Skip to content
배우기 측정 블로그 Case studies 정보
이 페이지에서
  • Lighthouse가 이미지를 최적화 가능한 것으로 플래그 지정하는 방법
  • GUI 도구를 사용하여 이미지 최적화
  • 스택별 지침
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • 리소스

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

May 2, 2019 — 업데이트됨 Jun 20, 2020
Available in: Español, 日本語, Português, Русский, 中文, English
Appears in: 성능 감사
이 페이지에서
  • Lighthouse가 이미지를 최적화 가능한 것으로 플래그 지정하는 방법
  • GUI 도구를 사용하여 이미지 최적화
  • 스택별 지침
    • Drupal
    • Joomla
    • Magento
    • WordPress
  • 리소스

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

Lighthouse 효율적인 이미지 인코딩 감사에 대한 스크린샷

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 플러그인 사용을 고려하십시오.

리소스 #

  • 효율적인 이미지 인코딩 감사에 대한 소스 코드
마지막 업데이트: Jun 20, 2020 — 기사 개선하기
Return to all articles
공유
구독

Contribute

  • 버그 신고
  • 소스 보기

관련된 콘텐츠

  • developer.chrome.com
  • Chrome 업데이트
  • 웹 기초
  • 사례 연구
  • 팟캐스트
  • 쇼

연결

  • Twitter
  • YouTube
  • Google Developers
  • Chrome
  • Firebase
  • Google Cloud Platform
  • 전체 제품
  • 약관 및 개인정보 보호
  • 커뮤니티 가이드라인

Except as otherwise noted, the content of this page is licensed under the Creative Commons Attribution 4.0 License, and code samples are licensed under the Apache 2.0 License. For details, see the Google Developers Site Policies.