Lighthouse 보고서의 '기회' 섹션에는 크기가 적절하지 않은 페이지의 모든 이미지와 함께 키비바이트(KiB) 단위로 표시된 잠재적 절감액이 나열됩니다. 다음과 같이 이미지 크기를 조절하여 데이터를 절약하고 페이지 로드 시간을 개선하세요.
Lighthouse에서 초과 크기 이미지를 계산하는 방법
Lighthouse는 페이지의 각 이미지에 대해 렌더링된 이미지의 크기를 실제 이미지의 크기와 비교합니다. 렌더링된 크기는 기기 픽셀 비율도 고려합니다. 렌더링된 크기가 실제 크기보다 최소 4KiB 작으면 이미지가 감사에 실패합니다.
이미지 크기를 적절하게 조절하기 위한 전략
페이지에서 사용자 화면에 렌더링되는 버전보다 더 큰 이미지를 전송하면 안 됩니다. 그보다 큰 경우 바이트가 낭비되고 페이지 로드 시간이 느려집니다.
적절한 크기의 이미지를 게재하기 위한 주요 전략은 '반응형 이미지'라고 합니다. 반응형 이미지를 사용하면 각 이미지의 여러 버전을 생성한 다음 미디어 쿼리, 표시 영역 크기 등을 사용하여 HTML 또는 CSS에서 사용할 버전을 지정합니다. 또한 RespImageLint는 이미지에 최적의 srcset 및 sizes 값을 식별하는 데 유용한 북마크릿입니다. 이러한 속성에 대한 자세한 내용은 반응형 이미지 게재를 참고하세요.
이미지 CDN은 적절한 크기의 이미지를 게재하기 위한 또 다른 주요 전략입니다. 이미지 CDN은 이미지 변환을 위한 웹 서비스 API와 같은 것으로 생각할 수 있습니다.
또 다른 전략은 SVG와 같은 벡터 기반 이미지 형식을 사용하는 것입니다. SVG 이미지는 제한된 양의 코드로 어떤 크기로든 조정할 수 있습니다. 자세한 내용은 복잡한 아이콘을 SVG로 대체를 참고하세요.
gulp-responsive 또는 responsive-images-generator와 같은 도구를 사용하면 이미지를 여러 형식으로 변환하는 프로세스를 자동화하는 데 도움이 될 수 있습니다. 이미지를 업로드하거나 페이지에서 이미지를 요청할 때 여러 버전을 생성할 수 있는 이미지 CDN도 있습니다.
스택별 안내
AMP
amp-img 구성요소의 srcset 지원을 사용하여 화면 크기에 따라 사용할 이미지 애셋을 지정합니다. srcset, sizes, heights를 사용하는 반응형 이미지도 참고하세요.
Angular
구성요소 개발 키트 (CDK)에서 BreakpointObserver 유틸리티를 사용하여 이미지 중단점을 관리하는 것이 좋습니다.
Drupal
Drupal에서 제공한 네이티브 반응형 이미지 스타일을 사용 중인지 확인합니다. 보기 모드, 보기 또는 WYSIWYG 편집기를 통해 업로드된 이미지로 이미지 필드를 렌더링할 경우 반응형 이미지 스타일을 사용합니다.
Gatsby
gatsby-image 플러그인을 사용하여 스마트폰과 태블릿을 위한 작은 이미지 여러 개를 생성하세요. 또한 효율적인 지연 로드를 위해 SVG 이미지 자리표시자를 만들 수 있습니다.
Joomla
반응형 이미지 플러그인을 사용해 보세요.
WordPress
필수 이미지 크기를 사용할 수 있도록 미디어 라이브러리에서 직접 이미지를 업로드하세요. 그런 다음 미디어 라이브러리에서 이미지를 삽입하거나 이미지 위젯을 사용하여 최적의 이미지 크기를 사용하는지 확인하세요(반응형 중단점용 이미지 포함). 이미지 크기가 용도에 적합하지 않다면 Full Size 이미지는 사용하지 않는 것이 좋습니다. 게시물 및 페이지에 이미지 삽입을 참조하세요.