Lighthouse 보고서의 추천 섹션에는 크기가 적절하지 않은 페이지의 모든 이미지와 키비바이트 (KiB)의 잠재적인 절감액이 나열됩니다. 이러한 이미지의 크기를 조절하여 데이터를 절약하고 페이지 로드 시간을 단축하세요.
![Lighthouse 적절한 크기 이미지 감사 스크린샷](https://developer.chrome.google.cn/static/docs/lighthouse/performance/uses-responsive-images/image/a-screenshot-the-lightho-7c337c3ae8988.png?authuser=19&hl=ko)
Lighthouse에서 대형 이미지를 계산하는 방법
Lighthouse는 페이지의 각 이미지에서 렌더링된 이미지의 크기를 실제 이미지의 크기와 비교합니다. 렌더링된 크기는 기기 픽셀 비율도 고려합니다. 렌더링된 크기가 실제 크기보다 4KiB 이상 작으면 이미지가 감사를 통과하지 못합니다.
적절한 이미지 크기 조정 전략
페이지에서 사용자 화면에 렌더링된 버전보다 큰 이미지를 제공하지 않는 것이 좋습니다. 이보다 크면 바이트가 낭비되고 페이지 로드 시간이 느려집니다.
적절한 크기의 이미지를 게재하기 위한 기본 전략을 '반응형 이미지'라고 합니다. 반응형 이미지를 사용하면 각 이미지의 여러 버전을 생성한 다음 미디어 쿼리, 표시 영역 크기 등을 사용하여 HTML 또는 CSS에서 사용할 버전을 지정합니다. 또한 RespImageLint는 이미지에 가장 적합한 srcset
및 sizes
값을 식별하는 데 유용한 북마크입니다. 이러한 속성에 대한 자세한 내용은 반응형 이미지 제공을 참고하세요.
이미지 CDN은 적절한 크기의 이미지를 제공하기 위한 또 다른 기본 전략입니다. 이미지 CDN은 이미지를 변환하는 Web Service API라고 생각하면 됩니다.
또 다른 전략으로 SVG와 같은 벡터 기반 이미지 형식을 사용할 수 있습니다. 코드 수가 한정되어 있기 때문에 SVG 이미지를 모든 크기로 확장할 수 있습니다. 자세한 내용은 복잡한 아이콘을 SVG로 대체를 참고하세요.
gulp-responsive 또는 response-images-generator와 같은 도구를 사용하면 이미지를 여러 형식으로 변환하는 과정을 자동화할 수 있습니다. 이미지를 업로드하거나 페이지에서 요청할 때 여러 버전을 생성할 수 있는 이미지 CDN도 있습니다.
스택별 안내
AMP
amp-img
구성요소의 srcset
지원을 사용하여 화면 크기에 따라 사용할 이미지 애셋을 지정합니다. srcset, 크기, 높이가 있는 반응형 이미지도 참고하세요.
Angular
구성요소 개발자 키트 (CDK)의 BreakpointObserver
유틸리티를 사용하여 이미지 중단점을 관리하는 것이 좋습니다.
Drupal
뷰 모드, 뷰 또는 WYSIWYG 편집기를 통해 업로드된 이미지를 통해 이미지 필드를 렌더링할 때 기본 제공되는 반응형 이미지 스타일 기능 (Drupal 8 이상에서 사용 가능)을 사용합니다.
개츠비
gatsby-image 플러그인을 사용하여 스마트폰 및 태블릿용 작은 이미지를 여러 개 생성합니다. 또한 효율적인 지연 로드를 위해 SVG 이미지 자리표시자를 만들 수도 있습니다.
Joomla
반응형 이미지 플러그인을 사용해 보세요.
WordPress
미디어 라이브러리를 통해 직접 이미지를 업로드하여 필요한 이미지 크기를 사용할 수 있는지 확인한 다음 미디어 라이브러리에서 이미지를 삽입하거나 이미지 위젯을 사용하여 최적의 이미지 크기가 사용되도록 합니다(반응형 중단점용 이미지 포함). 이미지 크기가 용도에 적합하지 않다면 Full Size
이미지는 사용하지 마세요. 게시물 및 페이지에 이미지 삽입하기를 참고하세요.