Lighthouse 보고서의 '기회' 섹션에는 최적화되지 않은 모든 이미지와 함께 키비바이트(KiB) 단위로 절감 가능한 양이 표시됩니다. 페이지가 더 빠르게 로드되고 데이터를 적게 소비하도록 다음 이미지를 최적화하세요.
Lighthouse에서 이미지를 최적화 가능으로 표시하는 방법
Lighthouse는 페이지의 모든 JPEG 또는 BMP 이미지를 수집하고 각 이미지의 압축 수준을 85로 설정한 다음 원본 버전과 압축된 버전을 비교합니다. 절감 가능성이 4KiB 이상인 경우 Lighthouse는 이미지를 최적화 가능으로 표시합니다.
이미지를 최적화하는 방법
다음과 같은 여러 단계를 거쳐 이미지를 최적화할 수 있습니다.
GUI 도구를 사용하여 이미지 최적화
또 다른 접근 방식은 컴퓨터에 설치하고 GUI로 실행하는 최적화 도구를 통해 이미지를 실행하는 것입니다. 예를 들어 ImageOptim을 사용하면 이미지를 UI로 드래그 앤 드롭하면 품질이 눈에 띄게 저하되지 않고 이미지가 자동으로 압축됩니다. 규모가 작은 사이트를 운영하고 모든 이미지를 수동으로 최적화할 수 있다면 이 옵션이 충분할 수 있습니다.
Squoosh도 다른 옵션입니다. Squoosh는 Google 웹 DevRel팀에서 유지관리합니다.
스택별 안내
Drupal
품질은 유지하면서 사이트를 통해 업로드하는 이미지의 크기를 자동으로 최적화하고 줄여 주는 모듈을 사용해 보세요. 또한 사이트에서 렌더링된 모든 이미지에 Drupal에서 제공한 네이티브 반응형 이미지 스타일을 사용 중인지도 확인합니다.
Joomla
품질은 유지하면서 이미지를 압축해 주는 이미지 최적화 플러그인을 사용해 보세요.
Magento
이미지를 최적화하는 서드 파티 Magento 확장 프로그램을 사용하는 것이 좋습니다.
WordPress
품질은 유지하면서 이미지를 압축해 주는 이미지 최적화 WordPress 플러그인을 사용해 보세요.