PageSpeed Insights의 이미지 전송 개선 경고 해결하기

1. 01PageSpeed Insights나 Lighthouse에서 해당 페이지를 여세요. 개선할 모바일 또는 데스크톱 보고서를 선택하고 이미지 전송 개선 항목을 펼쳐 URL과 제안 내용을 기록하세요.
2. 02페이지에서 해당 이미지를 찾으세요. 브라우저 개발자 도구에서 화면 밀도를 고려해 다운로드 이미지와 표시 크기를 비교하세요. 미디어 라이브러리 원본만 보지 말고 실제 선택된 파일을 확인하세요.
3. 03전송 이미지의 픽셀이 너무 많으면 반응형 크기나 테마 설정부터 수정하세요. 크기가 맞으면 압축이나 지원되는 다른 형식을 비교하세요.
4. 04이미지 편집기에서 필요한 크기의 사본을 준비하세요. 적합한 파일을 Bitinz 이미지 압축기로 처리하고 교체 전에 글자, 테두리, 투명도와 그라데이션을 살펴보세요.
5. 05이미지나 템플릿 변경을 게시하세요. 오래된 캐시가 아닌 새 이미지를 요청하는지 확인한 뒤 같은 기기 설정으로 보고서를 다시 실행하세요.

Chrome은 다운로드 크기와 해당 형식에 효율적인 바이트·픽셀 비율로 절감량을 추정합니다. 추정 절감량이 4 KiB 미만인 이미지는 표시하지 않습니다. 이는 보고서 기준이지 권장 최대 용량이 아닙니다.

Lighthouse 13은 기존 이미지 감사를 이 분석으로 대체했으며 Lighthouse 12부터 분석이 기본 보고서 화면이었습니다. 형식, 과도한 크기, 무거운 애니메이션은 각각 다른 해결이 필요합니다. 전체 게시 과정은 웹사이트용 이미지 압축 방법을 참고하세요.

• WordPress: 블록이나 테마에서 선택한 이미지 크기와 실제 srcset, sizes 마크업을 확인하세요. WordPress는 반응형 후보를 만들지만 맞춤 템플릿이나 잘못된 레이아웃 설명으로 부적합한 크기가 전송될 수 있습니다. 원본만 바꾸면 기존 생성 사본이 계속 쓰일 수 있습니다.
• Shopify: 스토어 이미지는 형식 선택을 포함해 Shopify CDN이 이미 최적화합니다. Shopify는 업로드 전 수동 압축이 불필요하다고 안내합니다. 경고가 있으면 원본을 반복해 손상시키기보다 테마가 요청하는 너비와 반응형 마크업을 확인하세요. 개발자는 image_url과 image_tag를 살펴볼 수 있습니다.
• Next.js: Image 컴포넌트의 반응형 설정을 사용해 sizes를 실제 레이아웃에 맞추고 특히 fill과 함께 쓸 때 주의하세요. 적절한 값이 없으면 좁은 이미지도 화면 전체 너비로 간주되어 큰 후보가 다운로드될 수 있습니다. 화질만 바꿔서는 이런 불일치를 고치지 못합니다.

편집 가능한 원본을 보관하세요. 독립적으로 전송하는 이미지는 실제 크기와 모습을 비교하고 JPG·PNG·WebP 비교를 참고하세요. Bitinz는 크기를 조절하지 않습니다. WebP 변환으로 파일이 커질 수 있으니 페이지에 맞는 결과를 보관하세요.

반복 게시 작업에는 계정과 월간 할당량으로 개발자 API를 이용할 수 있습니다. 테마 마크업이나 반응형 레이아웃을 고치는 기능은 아닙니다. 자동화 연결 후에도 실제 전송 페이지를 확인하세요.

• 표시된 URL이 수정한 이미지와 버전에 일치합니다.
• 휴대전화와 넓은 화면 모두에서 브라우저가 적합한 파일을 선택합니다.
• 압축 후에도 중요한 디테일, 투명도와 부드러운 그라데이션이 남습니다.
• 부적절한 지연 로딩 설정이 주요 표시 이미지를 늦추지 않습니다.
• 같은 기기 설정으로 재검사하고 실제 표시와 로딩도 확인했습니다.