효율적으로 이미지 인코딩
컬렉션을 사용해 정리하기
내 환경설정을 기준으로 콘텐츠를 저장하고 분류하세요.
Lighthouse 보고서의 기회 섹션에는 최적화되지 않은 모든 이미지가 키비바이트 (KiB) 의 잠재적인 절감액과 함께 나열됩니다.
페이지가 더 빨리 로드되고 데이터를 덜 소비하도록 다음 이미지를 최적화하세요.
Lighthouse에서 이미지를 최적화 가능으로 플래그하는 방법
Lighthouse는 페이지에서 모든 JPEG 또는 BMP 이미지를 수집하고 각 이미지의 압축 수준을 85로 설정한 다음 원본 버전과 압축된 버전을 비교합니다.
절감 가능치가 4KiB 이상이면 Lighthouse는 이미지를 최적화 가능으로 표시합니다.
이미지를 최적화하는 방법
다음과 같은 여러 단계를 통해 이미지를 최적화할 수 있습니다.
또 다른 방법은 컴퓨터에 설치하고 GUI로 실행하는 옵티마이저를 통해 이미지를 실행하는 것입니다.
예를 들어 ImageOptim 을 사용하면 이미지를 UI로 드래그 앤 드롭하면 눈에 띄는 품질 저하 없이 이미지를 자동으로 압축합니다.
소규모 사이트를 운영 중이고 모든 이미지를 수동으로 최적화할 수 있다면 이 옵션으로도 충분할 수 있습니다.
Squoosh 도 사용할 수 있습니다.
Squoosh는 Google Web DevRel 팀에서 관리합니다.
스택별 안내
Drupal
품질을 유지하면서 사이트를 통해 업로드된 이미지의 크기를 자동으로 최적화하고 줄이는 모듈 을 사용해 보세요. 또한 사이트에서 렌더링되는 모든 이미지에 Drupal의 기본 제공 반응형 이미지 스타일 (Drupal 8 이상에서 사용 가능)을 사용하고 있는지 확인하세요.
Joomla
품질을 유지하면서 이미지를 압축하는 이미지 최적화 플러그인 을 사용해 보세요.
Magento
이미지를 최적화하는 서드 파티 Magento 확장 프로그램 을 사용해 보세요.
WordPress
품질을 유지하면서 이미지를 압축하는 이미지 최적화 WordPress 플러그인 을 사용해 보세요.
자료
달리 명시되지 않는 한 이 페이지의 콘텐츠에는 Creative Commons Attribution 4.0 라이선스 에 따라 라이선스가 부여되며, 코드 샘플에는 Apache 2.0 라이선스 에 따라 라이선스가 부여됩니다. 자세한 내용은 Google Developers 사이트 정책 을 참조하세요. 자바는 Oracle 및/또는 Oracle 계열사의 등록 상표입니다.
최종 업데이트: 2019-05-02(UTC)
[{
"type": "thumb-down",
"id": "missingTheInformationINeed",
"label":"필요한 정보가 없음"
},{
"type": "thumb-down",
"id": "tooComplicatedTooManySteps",
"label":"너무 복잡함/단계 수가 너무 많음"
},{
"type": "thumb-down",
"id": "outOfDate",
"label":"오래됨"
},{
"type": "thumb-down",
"id": "translationIssue",
"label":"번역 문제"
},{
"type": "thumb-down",
"id": "samplesCodeIssue",
"label":"샘플/코드 문제"
},{
"type": "thumb-down",
"id": "otherDown",
"label":"기타"
}]
[{
"type": "thumb-up",
"id": "easyToUnderstand",
"label":"이해하기 쉬움"
},{
"type": "thumb-up",
"id": "solvedMyProblem",
"label":"문제가 해결됨"
},{
"type": "thumb-up",
"id": "otherUp",
"label":"기타"
}]
{"lastModified": "\ucd5c\uc885 \uc5c5\ub370\uc774\ud2b8: 2019-05-02(UTC)"}
[[["이해하기 쉬움","easyToUnderstand","thumb-up"],["문제가 해결됨","solvedMyProblem","thumb-up"],["기타","otherUp","thumb-up"]],[["필요한 정보가 없음","missingTheInformationINeed","thumb-down"],["너무 복잡함/단계 수가 너무 많음","tooComplicatedTooManySteps","thumb-down"],["오래됨","outOfDate","thumb-down"],["번역 문제","translationIssue","thumb-down"],["샘플/코드 문제","samplesCodeIssue","thumb-down"],["기타","otherDown","thumb-down"]],["최종 업데이트: 2019-05-02(UTC)"]]