이 규칙은 PageSpeed Insights에서 화질에 큰 영향을 주지 않고 파일 크기를 줄여서 페이지의 이미지를 최적화할 수 있음이 감지되면 트리거됩니다.
개요
이미지는 대개 페이지에 다운로드된 바이트의 대부분을 차지합니다. 따라서 이미지를 최적화하면 브라우저에서 다운로드해야 하는 바이트 수가 감소하고 클라이언트의 대역폭 경쟁이 줄어들며 브라우저가 콘텐츠를 다운로드하여 화면에 렌더링할 수 있는 속도가 빨라져서 일부 대용량 바이트를 절감하고 성능이 개선되는 경우가 많습니다.
권장사항
이미지 애셋에 가장 적합한 형식과 최적화 전략을 찾으려면 인코딩되는 데이터의 유형, 이미지 형식 기능, 화질 설정, 해상도 등을 꼼꼼히 분석해야 합니다. 또한 어떤 이미지가 벡터 형식으로 가장 잘 전송되는지, CSS를 통해 원하는 효과를 얻을 수 있는지, 각 기기 유형에 맞게 확장된 애셋을 전송하는 방법을 고려해야 합니다.
모든 이미지 유형의 최적화
- 반응형 이미지 전송을 위한 권장사항을 따르세요.
- 각 이미지의 이미지 최적화 검사 목록을 따르세요.
GIF, PNG, JPEG 이미지의 최적화
GIF, PNG, JPEG 형식은 전체 인터넷 이미지 트래픽의 96%를 차지합니다. 이렇게 많이 사용되기 때문에 PageSpeed Insights에서는 구체적인 최적화 권장사항을 제공합니다. PageSpeed Insights에서는 modpagespeed.com의 이미지 최적화 라이브러리를 사용하기 때문에 최적화된 이미지를 곧바로 편리하게 다운로드할 수 있습니다.
또한 ImageMagick에서 만든 convert 바이너리 같은 도구를 사용하여 비슷하게 최적화할 수 있습니다. 아래의 예제 안내를 참조하세요.
타사 도구를 사용하는 경우 이미지가 이미 충분히 최적화되었다면 변환으로 인해 이미지 용량이 더 커질 수 있으니 유의하시기 바랍니다. 이미지가 더 커지면 원본을 사용하세요.
GIF와 PNG는 무손실 형식이므로 압축해도 이미지에 시각적 수정이 일어나지 않습니다. 정지 이미지의 경우 PNG에서 더 나은 압축률과 시각적 화질을 얻을 수 있습니다. 애니메이션 이미지의 경우 압축률을 높이려면 GIF 대신 video 요소를 사용해 보세요.
- 원본이 애니메이션이 아니거나 크기가 작지 않은(몇백 바이트 이하) 경우 항상 GIF를 PNG로 전환하세요.
- GIF와 PNG 모두에서 픽셀이 모두 불투명인 경우 알파 채널을 삭제하세요.
예를 들어 convert 바이너리 도구를 사용하면 다음 명령어로 GIF와 PNG 이미지를 최적화할 수 있으며 대괄호 안의 매개변수는 선택사항입니다.
convert INPUT.gif_or_png -strip [-resize WxH] [-alpha Remove] OUTPUT.png
convert cuppa.png -strip cuppa_converted.png
JPEG는 손실 형식입니다. 압축 과정에서 이미지의 시각적 세부정보가 삭제되지만 압축률은 GIF나 PNG보다 10배까지 높아질 수 있습니다.
- 화질이 높은 경우 85로 낮춥니다. 화질이 85보다 높으면 이미지 용량은 빠르게 커지지만 시각적 개선은 적습니다.
- Chroma 샘플링을 4:2:0으로 낮춥니다. 사람의 시각 체계는 밝기에 비해 색상에 덜 민감하기 때문입니다.
- 10 KB 이상인 이미지에는 프로그레시브 형식을 사용합니다. 큰 이미지의 경우 대개 프로그레시브 JPEG는 베이스라인 JPEG보다 압축률이 높고 점진적으로 렌더링된다는 이점이 있습니다.
- 이미지가 흑백인 경우 회색조 색상 공간을 사용합니다.
예를 들어 convert 바이너리 도구를 사용하면 다음 명령어로 JPEG 이미지를 최적화할 수 있으며 대괄호 안의 매개변수는 선택사항입니다.
convert INPUT.jpg -sampling-factor 4:2:0 -strip [-resize WxH] [-quality N] [-interlace JPEG] [-colorspace Gray/sRGB] OUTPUT.jpg
convert puzzle.jpg -sampling-factor 4:2:0 -strip -quality 85 -interlace JPEG -colorspace sRGB puzzle_converted.jpg
