게시일: 2025년 10월 8일
이미지의 다운로드 시간을 줄이면 페이지의 체감 로드 시간과 LCP를 개선할 수 있습니다.
인사이트가 실패하는 방식
이 통계에서는 불필요하게 큰 다운로드 크기를 가진 이미지를 강조 표시합니다. 예상 바이트 절감액은 이미지의 다운로드 크기를 이미지 형식의 효율적인 바이트/픽셀 비율과 비교하여 계산됩니다.
이미지 다운로드 시간 개선 방법
이 통계에서는 이미지의 표시 크기와 파일 형식에 따라 이미지 다운로드 시간을 개선하기 위한 여러 전략을 추천합니다. 이미지 CDN을 배포하면 이러한 모든 전략에 매우 유용합니다.
이미지 압축률 높이기
대부분의 이미지 형식은 이미지 품질을 희생하여 이미지 파일 크기를 개선하도록 조정할 수 있는 압축 수준을 지원합니다. ImageOptim, Squoosh, Imagemin과 같은 이미지 도구를 사용하여 이미지 압축 요소를 최적화할 수 있습니다.
최신 이미지 형식 사용
AVIF와 WebP는 기존 JPEG 및 PNG에 비해 압축 및 품질 특성이 우수한 이미지 형식입니다. 이러한 최신 형식으로 이미지를 인코딩하는 것은 이미지의 다운로드 크기를 줄이는 좋은 전략입니다.
AVIF는 모든 주요 브라우저의 최신 버전에서 지원되며 동일한 품질 설정의 다른 형식에 비해 파일 크기가 더 작습니다. AVIF에 관한 자세한 내용은 AVIF 이미지 제공 Codelab을 참고하세요.
WebP는 모든 주요 브라우저에서 지원되며 웹 이미지에 더 나은 손실 및 무손실 압축을 제공합니다. WebP에 관한 자세한 내용은 WebP 이미지 사용을 참고하세요.
애니메이션 콘텐츠에는 동영상 형식 사용
대용량 GIF는 동영상에 비해 애니메이션 콘텐츠를 전달하는 데 비효율적입니다. 애니메이션에는 MPEG4/WebM 동영상을, 정적인 이미지에는 GIF 대신 PNG/WebP를 사용하여 네트워크 용량을 절약하세요.
GIF 이미지를 동영상으로 대체하는 방법을 알아보려면 페이지 로드 속도를 높이기 위해 애니메이션 GIF를 동영상으로 대체하기를 참고하세요.
반응형 크기의 이미지 제공
페이지에서 사용자 화면에 렌더링되는 크기보다 더 큰 이미지를 전송하면 안 됩니다. 이보다 큰 이미지는 바이트가 낭비되고 페이지 로드 시간이 느려집니다.
한 가지 전략은 SVG와 같은 벡터 기반 이미지 형식을 사용하는 것입니다. 유한한 양의 코드를 사용하면 SVG 이미지를 어떤 크기로든 확장할 수 있습니다. 자세한 내용은 복잡한 아이콘을 SVG로 대체를 참고하세요.
벡터 기반 이미지를 사용할 수 없는 경우 '반응형' 이미지를 제공하는 것이 좋습니다. 반응형 이미지를 사용하면 각 이미지의 여러 버전을 생성한 다음 미디어 쿼리, 표시 영역 크기 등을 사용하여 HTML 또는 CSS에서 사용할 버전을 지정합니다.
예를 들어 <img> 요소에는 다양한 크기의 이미지 URL을 지정할 수 있는 srcset 및 sizes 속성이 있습니다.
이미지를 완전히 변경해야 하는 경우 <picture> 요소를 사용하면 됩니다.
자세한 내용은 반응형 이미지 및 그림 요소를 참고하세요.
스택별 안내
이 통계는 다음 기술을 사용하는 페이지에 스택별 안내도 제공합니다.
AMP
- WebP 형식의 모든
amp-img구성요소를 표시하면서 다른 브라우저의 적절한 대체 텍스트를 지정해 보세요. - 애니메이션 콘텐츠의 경우
amp-anim을 사용하여 콘텐츠가 화면에 표시되지 않을 때 CPU 사용량을 최소화하세요.
Drupal
- 품질은 유지하면서 사이트를 통해 업로드하는 이미지의 크기를 자동으로 최적화하고 줄여 주는 모듈을 사용해 보세요.
- 사이트에서 렌더링된 모든 이미지에 Drupal에서 제공한 기본 반응형 이미지 스타일을 사용 중인지 확인합니다.
Joomla
업로드한 이미지를 최적화된 형식으로 자동 변환해 주는 플러그인 또는 서비스를 사용해 보세요.
Magento
이미지를 최적화하는 서드 파티 Magento 확장 프로그램을 사용해 보세요.
WordPress
품질은 그대로 유지하면서 이미지를 압축해주는 이미지 최적화 WordPress 플러그인을 사용해 보세요.