페이지에 20 개 이상의 이미지를 표시한다고 가정하면 둥근 이미지 효과를 유발하는 투명한 배경을 가진 png 세트를 사용하거나 jpg를 사용하고 css를 사용하여 이미지를 둥글게하는 것이 더 좋습니까?둥근 이미지 - 둥근 이미지를 자르거나 CSS를 사용하는 것이 더 낫습니까?
클라이언트 사이트의 성능을 크게 향상 시키려고합니다. 실제로 사용자 성능 측면에서 말하면 다음 옵션 중 어느 것이 더 나은 결과를 제공 할 것입니다.
옵션 1 - 이미지 형식 : 투명 가장자리가있는 png 이미지가 원처럼 보입니다.
옵션 2 - 이미지 형식 : JPG 경계 반경 CSS 속성을 사용하여 원으로 표시 반올림 이미지.
통찰력을 제공하십시오. 앞으로 물어 보면이 사실을 이해하는 데 도움이됩니다.
이것은 "성능"이라고하는 것에 전적으로 의존합니다.
다운로드 속도에 대해 이야기하는 경우 : 이미지 유형 및 크기에 따라 다릅니다. 일반적으로 jpg, 그래픽, 날카로운 모서리를 가진 이미지 및 작은 것들이 png보다 우수하므로 세부 사항이 많은 큰 사진이 더 좋아집니다.
렌더링 성능에 대해 이야기하는 경우 : 형식에 관계없이 이미지의 크기가 같으면 렌더링 할 때 테두리 반경을 사용하는 것이 물론 속도가 느려지지만 현대의 브라우저에서는 큰 문제가되지 않습니다.
가장 큰 요인은 유스 케이스의 올바른 이미지 형식을 선택한 다음 사람이 브라우저를 작동시키는 대신 투명 픽셀로 모든 이미지를 준비하는 것이 가치가 있는지 판단하는 것입니다.
나는 더 중요한 방법 (예 : performant javascript, 이미지의 lazyloading, 효율적인 마크 업 (코드 최소화, 적절한 압축 선택 ...))을 통해 성능을 향상시킬 수있는 다른 영역이 있음을 제안합니다.
나는 이것이 OP의 상황에 너무 특정한 현지화 된 질문이라는 이유로 태그 될 것이라고 생각합니다. 그렇다면 내 질문에 단어를 다시 쓰는 방법을 찾아보십시오. 내가 아는 많은 사람들이이 질문에 부딪 쳤지만 답변을 찾을 수 없었습니다. 나는 이것이 중요한 질문이라고 생각합니다. CSS와 이미지 최적화. 이드는 일반적인 대답을 좋아합니다. –
음 이미지에는 이미지 렌더링이 포함되고, 이미지 렌더링에는 브라우저가 포함되어 원을 그리는 작업이 많이 필요합니다. 좀 더 효율적이라고 생각합니까? – leigero
@leigero 아,하지만 약간 더 복잡합니다. 자른 png가 렌더링하는 것이 더 효율적이지만 jpg 파일은 더 작을 것이므로로드하는 것이 더 효율적입니다. –