이미지를 효율적으로 인코딩

Lighthouse 보고서의 기회 섹션에는 kibibytes (KiB)로 잠재적 절감 효과를 제공하는 최적화되지 않은 모든 이미지가 나열되어 있습니다. 페이지가 더 빨리 로드되고 더 적은 데이터를 소비하도록 이러한 이미지를 최적화합니다.

# Lighthouse가 이미지를 최적화 가능한 것으로 플래그 지정하는 방법

Lighthouse는 페이지의 모든 JPEG 또는 BMP 이미지를 수집하고 각 이미지의 압축 수준을 85로 설정한 다음 원본 버전을 압축 버전과 비교합니다. 잠재적인 절감 효과가 4KiB 이상인 경우 Lighthouse는 이미지를 최적화 가능한 것으로 플래그 지정합니다.

# 이미지를 최적화하는 방법

다음을 포함하여 이미지를 최적화하기 위해 취할 수 있는 여러 단계가 있습니다.

• 이미지 CDN 사용
• 이미지 압축
• 애니메이션 GIF를 비디오로 대체
• 이미지 로딩 지연
• 반응형 이미지 제공
• 올바른 크기의 이미지 제공
• WebP 이미지 사용

# GUI 도구를 사용하여 이미지 최적화

또 다른 접근 방식은 컴퓨터에 설치하고 GUI로 실행하는 최적화 프로그램을 통해 이미지를 실행하는 것입니다. 예를 들어 ImageOptim을 사용하여 이미지를 UI로 끌어다 놓으면 눈에 띄게 품질이 저하되지 않고 이미지가 자동으로 압축됩니다. 소규모 사이트를 운영 중이고 모든 이미지를 수동으로 최적화할 수 있다면 이 옵션이 충분할 것입니다.

Squoosh는 또 다른 옵션입니다. Squoosh는 Google Web DevRel 팀에서 유지 관리합니다.

# 스택별 지침

# Drupal

품질을 유지하면서 사이트를 통해 업로드되는 이미지의 크기를 자동으로 최적화하고 줄이는 모듈을 사용하는 것이 좋습니다. 또한 사이트에서 렌더링되는 모든 이미지에 대해 Drupal의 내장 반응형 이미지 스타일(Drupal 8 이상에서 사용 가능)을 사용하고 있는지 확인하십시오.

# Joomla

품질을 유지하면서 이미지를 압축하는 이미지 최적화 플러그인 사용을 고려하십시오.

# Magento

이미지를 최적화하는 타사 Magento 확장 프로그램을 사용하는 것이 좋습니다.

# WordPress

품질을 유지하면서 이미지를 압축하는 이미지 최적화 WordPress 플러그인 사용을 고려하십시오.

# 리소스

• 효율적인 이미지 인코딩 감사에 대한 소스 코드