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