올바른 이미지 형식 선택

일리야 그리고릭
일리야 그리고릭

가장 먼저 생각해야 할 질문은 이미지가 실제로 추구하는 효과를 달성하는 데 필요한지 여부입니다. 우수한 디자인은 단순하면서도 항상 최고의 성능을 발휘합니다. 페이지의 HTML, CSS, 자바스크립트, 기타 애셋과 관련하여 대량의 바이트가 필요한 경우가 많으므로 이미지 리소스를 제거할 수 있다면 이것이 언제나 최고의 최적화 전략입니다. 하지만 잘 배치된 이미지는 천 마디 말보다 많은 정보를 전달할 수 있으므로 균형을 찾는 것은 사용자의 몫입니다.

다음으로, 보다 효율적인 방식으로 원하는 결과를 제공할 수 있는 대체 기술이 있는지 고려해야 합니다.

  • CSS 효과 (예: 그림자 또는 그래디언트) 및 CSS 애니메이션을 사용하여 모든 해상도 및 확대/축소 수준에서 항상 선명하게 표시되는 해상도와 무관한 애셋을 생성할 수 있습니다.
  • 웹 글꼴을 사용하면 텍스트를 선택, 검색, 크기 조절하는 기능을 유지하면서 아름다운 서체를 사용할 수 있으므로 사용성이 크게 향상됩니다.

이미지 애셋에서 인코딩 텍스트를 발견한 경우 잠시 멈추고 다시 생각해 보세요. 좋은 서체는 좋은 디자인, 브랜딩, 가독성에 중요하지만 이미지 내 텍스트는 사용자 환경을 저하합니다. 텍스트를 선택하거나 검색할 수 없고 확대/축소할 수 없고 액세스도 불가능하며 DPI가 높은 기기에서 사용하기에도 적합하지 않습니다. 웹 글꼴을 사용하려면 자체적인 최적화 모음이 필요하지만, 웹 글꼴을 사용하면 이러한 문제를 모두 해결할 수 있으므로 항상 텍스트 표시에 더 나은 선택이 될 수 있습니다.

올바른 이미지 형식 선택

이미지가 올바른 옵션이라고 확신하는 경우 작업에 적합한 이미지 종류를 신중하게 선택해야 합니다.

확대된 벡터 및 래스터 이미지
확대된 벡터 이미지 (L) 래스터 이미지 (R)
  • 벡터 그래픽은 선, 점, 다각형을 사용하여 이미지를 나타냅니다.
  • 래스터 그래픽은 직사각형 그리드 내에서 각 픽셀의 개별 값을 인코딩하여 이미지를 나타냅니다.

형식마다 장단점이 있습니다. 벡터 형식은 로고, 텍스트, 아이콘과 같은 간단한 기하학적 모양으로 구성된 이미지에 적합합니다. 모든 해상도 및 확대/축소 설정에서 선명한 결과를 제공하므로 고해상도 화면과 다양한 크기로 표시해야 하는 애셋에 이상적인 형식입니다.

그러나 장면이 복잡하면 (예: 사진) 벡터 형식은 부족할 수 있습니다. 모든 도형을 설명하는 SVG 마크업의 양이 엄청나게 많을 수 있지만 출력은 여전히 '실사'처럼 보이지 않을 수 있습니다. 이 경우 PNG, JPEG, WebP 또는 AVIF와 같은 래스터 이미지 형식을 사용해야 합니다.

래스터 이미지에는 해상도나 확대/축소와 무관한 동일한 속성이 없습니다. 래스터 이미지를 확장하면 들쭉날쭉하고 흐릿한 그래픽이 표시됩니다. 따라서 사용자에게 최적의 환경을 제공하기 위해 여러 버전의 래스터 이미지를 다양한 해상도로 저장해야 할 수 있습니다.

고해상도 화면의 영향

픽셀에는 CSS 픽셀과 기기 픽셀이라는 두 가지 종류가 있습니다. 단일 CSS 픽셀은 단일 기기 픽셀에 직접 대응될 수도 있고, 여러 기기 픽셀에 의해 뒤에 있을 수도 있습니다. 요점은 무엇일까요? 기기 픽셀이 많을수록 화면에 표시되는 콘텐츠의 세부 사항이 더 세밀해집니다.

CSS 픽셀과 기기 픽셀 간의 차이를 보여주는 이미지 3개
CSS 픽셀과 기기 픽셀의 차이입니다.

높은 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 이미지 사용을 참고하세요.

이전 이미지 형식과 관련하여 다음 사항을 고려하세요.

  1. 애니메이션이 필요하신가요? <video> 요소를 사용합니다.
  2. 가장 높은 해상도로 세부 사항을 세밀하게 유지해야 하나요? PNG 또는 무손실 WebP를 사용하세요.
    • PNG는 선택한 색상 팔레트 크기를 넘어서는 손실이 있는 압축 알고리즘을 적용하지 않습니다. 따라서 가장 높은 품질의 이미지를 생성하지만 대가로 다른 형식에 비해 파일 크기가 훨씬 커집니다. 현명하게 사용하세요.
    • WebP에는 PNG보다 효율적일 수 있는 무손실 인코딩 모드가 있습니다.
    • 이미지 자산에 기하학적 모양으로 구성된 이미지가 포함된 경우 벡터 (SVG) 형식으로 변환하는 것이 좋습니다.
    • 이미지 애셋에 텍스트가 포함되어 있다면 잠시 멈추고 다시 생각해 보세요. 이미지의 텍스트는 선택하거나 검색하거나 '확대/축소'할 수 없습니다. (브랜딩 또는 기타 이유로 인해) 맞춤 디자인을 제공해야 하는 경우 웹 글꼴을 대신 사용하세요.
  3. 사진, 스크린샷 또는 유사한 이미지 확장 소재를 최적화하고 있나요? JPEG, 손실 WebP 또는 손실 AVIF를 사용하세요.
    • JPEG는 손실이 있는 최적화와 무손실 최적화를 함께 사용하여 이미지 자산의 파일 크기를 줄입니다. 여러 JPEG 품질 수준을 시도하여 자산에 대해 최상의 품질과 파일 크기 사이의 균형을 찾아보세요.
    • 손실(lossy) WebP 또는 손실(lossy) AVIF는 허용되는 JPEG 대안이 될 수 있지만 WebP의 손실 모드는 특히 더 작은 이미지를 얻기 위해 일부 크로마 정보를 삭제한다는 점에 유의하세요. 즉, 일부 색상이 동등한 JPEG와 동일하지 않을 수 있습니다.

마지막으로, WebView를 사용하여 플랫폼별 애플리케이션에서 콘텐츠를 렌더링하는 경우 클라이언트를 완전히 제어할 수 있으며 WebP를 단독으로 사용할 수 있습니다. Facebook을 비롯한 다수의 다른 제공업체에서 WebP를 사용하여 모든 이미지를 애플리케이션 내에 제공합니다. 절감된 가치는 분명 그만한 가치가 있습니다.

최대 콘텐츠 렌더링 시간 (LCP)에 미치는 영향

이미지가 LCP 후보일 수 있습니다. 따라서 이미지 크기는 로드 시간에 영향을 줍니다. 이미지가 LCP 후보인 경우 LCP를 개선하려면 해당 이미지를 효율적으로 인코딩하는 것이 중요합니다.

모든 사용자가 가능한 한 빨리 페이지의 인지 성능을 발휘할 수 있도록 이 도움말에서 제공하는 조언을 적용하기 위해 노력해야 합니다. LCP는 페이지에서 가장 큰 (따라서 가장 인지 가능한) 요소가 표시되는 속도를 측정하므로 인지 성능의 일부입니다.