PageSpeed Insights에서 이미지 효율 인코딩을 고치는 방법

이미지 효율 인코딩은 압축 검사이며 레이아웃 검사가 아닙니다. PageSpeed Insights는 페이지의 각 JPEG, PNG, WebP를 보고 비슷한 체감 화질로 다시 인코딩하면 얼마나 많은 킬로바이트를 줄일 수 있는지 추정합니다. 사진 형식이 잘못됐다고 말하는 것이 아니고, 픽셀이 너무 크다고 말하는 것도 아닙니다. 그건 다른 감사입니다(차세대 형식으로 이미지 제공 및 이미지 크기 적절히 조정).

보고서는 파일 이름을 알려 줍니다. 그래도 사이트나 CMS에서 그 원본을 가져와 다시 인코딩하고 더 작은 사본을 다시 넣어야 합니다. EditItAll은 URL을 크롤링하지 않고 PageSpeed Insights와 통신하지도 않습니다. 브라우저에서 다시 인코딩만 합니다.

JPEG 압축 도구를 엽니다(보고서가 PNG / WebP를 나열했다면 해당 도구를 사용). 무거운 원본을 끌어다 놓으세요:

• 사진은 품질을 80 근처에 두세요. 화면에서는 보통 구분이 안 되며 JPEG 품질 가이드가 권하는 구간과 같습니다.
• 사진 폭이 수천 픽셀인데 표시는 그 일부라면 최대 변을 1920 또는 1280으로 설정하세요. 압축 도구에서 실제로 고를 수 있는 값입니다. 과대한 픽셀은 페이지 용량의 나머지 절반입니다. 웹용 JPEG 압축을 참고하세요.
• 결과 목록의 in → out 용량을 읽으세요. 아직 큰가요? 품질을 약 열 단계 낮추고 다시 실행하세요. “N KB로 압축” 칸은 없습니다. 용량은 출력입니다.

내보내고 다운로드한 뒤 서버나 CMS에서 파일을 교체하고 PageSpeed Insights를 다시 실행하세요. 모든 작업은 기기에 머뭅니다. 페이지가 로드된 뒤에는 오프라인에서도 사용할 수 있습니다. 내보낼 때 EXIF는 제거됩니다.

JPEG를 다시 인코딩한 뒤 절감량이 작아 보이면 PageSpeed Insights가 최신 형식도 요구하는 것일 수 있습니다. 같은 체감 화질에서 WebP와 AVIF는 보통 JPEG보다 낫습니다. JPG를 WebP로 또는 WebP 압축 도구로 사본을 변환하고 표시된 용량을 비교하세요. 구형 브라우저에도 서비스를 한다면 JPEG 대체본을 유지하세요.

PNG 사진은 웹 페이지에 거의 어울리지 않습니다. JPG나 WebP로 변환하세요. 무손실 PNG 재압축은 사진을 거의 줄이지 못합니다. 이미지 압축 모음에서 형식 선택을 더 깊게 다룹니다.

다시 인코딩해도 4000픽셀 히어로가 800픽셀 슬롯에 맞지는 않습니다. 그건 이미지 크기 적절히 조정이며 더 작은 픽셀 크기가 필요합니다. 접힌 화면 아래 이미지를 지연 로드해 주지도 않고 srcset을 작성해 주지도 않습니다. EditItAll은 킬로바이트 목표를 자동으로 맞추거나 파일에 이미 있는 JPEG 아티팩트를 제거하지도 못합니다. 원본에서 한 번 압축한 뒤 멈추세요.