가장 먼저 생각해야 할 질문은 이미지가 실제로 추구하는 효과를 달성하는 데 필요한지 여부입니다. 우수한 디자인은 단순하면서도 항상 최고의 성능을 발휘합니다. 페이지의 HTML, CSS, 자바스크립트, 기타 애셋과 관련하여 대량의 바이트가 필요한 경우가 많으므로 이미지 리소스를 제거할 수 있다면 이것이 언제나 최고의 최적화 전략입니다. 하지만 잘 배치된 이미지는 천 마디 말보다 많은 정보를 전달할 수 있으므로 균형을 찾는 것은 사용자의 몫입니다.
다음으로, 보다 효율적인 방식으로 원하는 결과를 제공할 수 있는 대체 기술이 있는지 고려해야 합니다.
- CSS 효과 (예: 그림자 또는 그래디언트) 및 CSS 애니메이션을 사용하여 모든 해상도 및 확대/축소 수준에서 항상 선명하게 표시되는 해상도와 무관한 애셋을 생성할 수 있습니다.
- 웹 글꼴을 사용하면 텍스트를 선택, 검색, 크기 조절하는 기능을 유지하면서 아름다운 서체를 사용할 수 있으므로 사용성이 크게 향상됩니다.
이미지 애셋에서 인코딩 텍스트를 발견한 경우 잠시 멈추고 다시 생각해 보세요. 좋은 서체는 좋은 디자인, 브랜딩, 가독성에 중요하지만 이미지 내 텍스트는 사용자 환경을 저하합니다. 텍스트를 선택하거나 검색할 수 없고 확대/축소할 수 없고 액세스도 불가능하며 DPI가 높은 기기에서 사용하기에도 적합하지 않습니다. 웹 글꼴을 사용하려면 자체적인 최적화 모음이 필요하지만, 웹 글꼴을 사용하면 이러한 문제를 모두 해결할 수 있으므로 항상 텍스트 표시에 더 나은 선택이 될 수 있습니다.
올바른 이미지 형식 선택
이미지가 올바른 옵션이라고 확신하는 경우 작업에 적합한 이미지 종류를 신중하게 선택해야 합니다.
![확대된 벡터 및 래스터 이미지](https://web.developers.google.cn/static/articles/choose-the-right-image-format/image/zoomed-vector-raster-im-c090b61f8ec5a.png?authuser=7&hl=ko)
형식마다 장단점이 있습니다. 벡터 형식은 로고, 텍스트, 아이콘과 같은 간단한 기하학적 모양으로 구성된 이미지에 적합합니다. 모든 해상도 및 확대/축소 설정에서 선명한 결과를 제공하므로 고해상도 화면과 다양한 크기로 표시해야 하는 애셋에 이상적인 형식입니다.
그러나 장면이 복잡하면 (예: 사진) 벡터 형식은 부족할 수 있습니다. 모든 도형을 설명하는 SVG 마크업의 양이 엄청나게 많을 수 있지만 출력은 여전히 '실사'처럼 보이지 않을 수 있습니다. 이 경우 PNG, JPEG, WebP 또는 AVIF와 같은 래스터 이미지 형식을 사용해야 합니다.
래스터 이미지에는 해상도나 확대/축소와 무관한 동일한 속성이 없습니다. 래스터 이미지를 확장하면 들쭉날쭉하고 흐릿한 그래픽이 표시됩니다. 따라서 사용자에게 최적의 환경을 제공하기 위해 여러 버전의 래스터 이미지를 다양한 해상도로 저장해야 할 수 있습니다.
고해상도 화면의 영향
픽셀에는 CSS 픽셀과 기기 픽셀이라는 두 가지 종류가 있습니다. 단일 CSS 픽셀은 단일 기기 픽셀에 직접 대응될 수도 있고, 여러 기기 픽셀에 의해 뒤에 있을 수도 있습니다. 요점은 무엇일까요? 기기 픽셀이 많을수록 화면에 표시되는 콘텐츠의 세부 사항이 더 세밀해집니다.
![CSS 픽셀과 기기 픽셀 간의 차이를 보여주는 이미지 3개](https://web.developers.google.cn/static/articles/choose-the-right-image-format/image/three-images-showing-dif-674a2b17f1ab7.png?authuser=7&hl=ko)
높은 DPI (HiDPI) 화면에서 멋진 결과를 얻을 수 있지만, 한 가지 명백한 단점이 있습니다. 즉, 더 많은 기기 픽셀 수를 활용하려면 이미지 애셋에서 더 많은 세부정보가 필요하다는 것입니다. 좋은 소식은 벡터 이미지는 어떤 해상도에서든 선명한 결과로 렌더링될 수 있으므로 이 작업에 가장 적합합니다. 더 세밀한 디테일을 렌더링하는 데 더 높은 처리 비용이 발생할 수 있지만 기본 애셋은 동일하며 해상도에 독립적입니다.
반면에 래스터 이미지는 이미지 데이터를 픽셀 단위로 인코딩하므로 훨씬 더 큰 문제가 됩니다. 따라서 픽셀 수가 클수록 래스터 이미지의 파일 크기가 커집니다. 예를 들어 100x100 (CSS) 픽셀로 표시되는 사진 애셋의 차이를 생각해 보겠습니다.
화면 해상도 | 총 픽셀 수 | 압축되지 않은 파일 크기 (픽셀당 4바이트) |
---|---|---|
1x | 100 x 100 = 10,000 | 40,000바이트 |
2배 | 100 x 100 x 4 = 40,000 | 160,000바이트 |
3배 | 100 x 100 x 9 = 90,000 | 360,000바이트 |
실제 화면의 해상도를 두 배로 높이면 총 픽셀 수가 4의 배수로 증가합니다. 즉, 가로 픽셀 수를 두 배, 세로 픽셀 수를 두 배로 늘립니다. 따라서 '2x' 화면은 필수 픽셀 수를 2배로 늘리는 것이 아니라 4배로 늘립니다.
그렇다면 이것이 실제로 의미하는 바는 무엇일까요? 고해상도 화면을 사용하면 아름다운 이미지를 제공할 수 있으며, 이는 훌륭한 제품 기능이 될 수 있습니다. 그러나 고해상도 화면에는 고해상도 이미지도 필요하므로 다음을 충족해야 합니다.
- 벡터 이미지는 해상도와 무관하며 항상 선명한 결과를 제공하므로 가능하면 벡터 이미지를 사용하는 것이 좋습니다.
- 래스터 이미지가 필요한 경우 반응형 이미지를 게재합니다.
다양한 래스터 이미지 형식의 기능
다양한 손실(lossy) 및 무손실 압축 알고리즘 외에도 다양한 이미지 형식은 애니메이션 및 투명도(알파) 채널과 같은 다양한 기능을 지원합니다. 따라서 특정 이미지에 '올바른 형식'을 선택하려면 원하는 시각적 결과와 기능 요구사항을 조합해야 합니다.
형식 | 투명성 | 애니메이션 | 탐색자 |
---|---|---|---|
PNG | 예 | 아니요 | 전체 |
JPEG | 아니요 | 아니요 | 전체 |
WebP | 예 | 예 | 모든 최신 브라우저 자세한 내용은 사용 가능한가요?를 |
AVIF | 예 | 예 | 아니요. 자세한 내용은 사용 가능 여부를 |
보편적으로 지원되는 두 가지 래스터 이미지 형식은 PNG와 JPEG입니다. 이러한 형식 외에도 최신 브라우저는 최신 형식인 WebP를 지원하는 반면, 일부 브라우저만 최신 AVIF 형식을 지원합니다. 두 가지 최신 형식 모두 전반적으로 더 나은 압축과 더 많은 기능을 제공합니다. 그렇다면 어떤 형식을 사용해야 할까요?
WebP 및 AVIF는 일반적으로 이전 형식보다 더 나은 압축을 제공하며 가능한 경우 사용해야 합니다. WebP 또는 AVIF 이미지를 JPEG 또는 PNG 이미지와 함께 대체로 사용할 수 있습니다. 자세한 내용은 WebP 이미지 사용을 참고하세요.
이전 이미지 형식과 관련하여 다음 사항을 고려하세요.
- 애니메이션이 필요하신가요?
<video>
요소를 사용합니다.- GIF는 어떤가요? GIF는 색상 팔레트를 최대 256색으로 제한하며
<video>
요소보다 훨씬 큰 파일 크기를 만듭니다. 애니메이션 GIF를 동영상으로 바꾸기를 참고하세요.
- GIF는 어떤가요? GIF는 색상 팔레트를 최대 256색으로 제한하며
- 가장 높은 해상도로 세부 사항을 세밀하게 유지해야 하나요? PNG 또는 무손실 WebP를 사용하세요.
- PNG는 선택한 색상 팔레트 크기를 넘어서는 손실이 있는 압축 알고리즘을 적용하지 않습니다. 따라서 가장 높은 품질의 이미지를 생성하지만 대가로 다른 형식에 비해 파일 크기가 훨씬 커집니다. 현명하게 사용하세요.
- WebP에는 PNG보다 효율적일 수 있는 무손실 인코딩 모드가 있습니다.
- 이미지 자산에 기하학적 모양으로 구성된 이미지가 포함된 경우 벡터 (SVG) 형식으로 변환하는 것이 좋습니다.
- 이미지 애셋에 텍스트가 포함되어 있다면 잠시 멈추고 다시 생각해 보세요. 이미지의 텍스트는 선택하거나 검색하거나 '확대/축소'할 수 없습니다. (브랜딩 또는 기타 이유로 인해) 맞춤 디자인을 제공해야 하는 경우 웹 글꼴을 대신 사용하세요.
- 사진, 스크린샷 또는 유사한 이미지 확장 소재를 최적화하고 있나요? JPEG, 손실 WebP 또는 손실 AVIF를 사용하세요.
- JPEG는 손실이 있는 최적화와 무손실 최적화를 함께 사용하여 이미지 자산의 파일 크기를 줄입니다. 여러 JPEG 품질 수준을 시도하여 자산에 대해 최상의 품질과 파일 크기 사이의 균형을 찾아보세요.
- 손실(lossy) WebP 또는 손실(lossy) AVIF는 허용되는 JPEG 대안이 될 수 있지만 WebP의 손실 모드는 특히 더 작은 이미지를 얻기 위해 일부 크로마 정보를 삭제한다는 점에 유의하세요. 즉, 일부 색상이 동등한 JPEG와 동일하지 않을 수 있습니다.
마지막으로, WebView를 사용하여 플랫폼별 애플리케이션에서 콘텐츠를 렌더링하는 경우 클라이언트를 완전히 제어할 수 있으며 WebP를 단독으로 사용할 수 있습니다. Facebook을 비롯한 다수의 다른 제공업체에서 WebP를 사용하여 모든 이미지를 애플리케이션 내에 제공합니다. 절감된 가치는 분명 그만한 가치가 있습니다.
최대 콘텐츠 렌더링 시간 (LCP)에 미치는 영향
이미지가 LCP 후보일 수 있습니다. 따라서 이미지 크기는 로드 시간에 영향을 줍니다. 이미지가 LCP 후보인 경우 LCP를 개선하려면 해당 이미지를 효율적으로 인코딩하는 것이 중요합니다.
모든 사용자가 가능한 한 빨리 페이지의 인지 성능을 발휘할 수 있도록 이 도움말에서 제공하는 조언을 적용하기 위해 노력해야 합니다. LCP는 페이지에서 가장 큰 (따라서 가장 인지 가능한) 요소가 표시되는 속도를 측정하므로 인지 성능의 일부입니다.