1. 최적화 전에 이미지를 분류하세요
템플릿별로 이미지를 인벤토리화하세요. 각 이미지의 역할, 가장 큰/가장 작은 렌더링 너비, 초기 뷰포트 여부, 작은 화면에서 다른 크롭이 필요한지 기록하세요. 이렇게 하면 파일 크기 작업을 중요한 페이지에서 테스트할 수 있는 결정으로 바꿀 수 있습니다.
사진은 검토된 손실 압축을 잘 견딜 때가 많습니다. 로고, 인터페이스 기호, 선형 아트(line art), 차트는 SVG 또는 선명한 가장자리를 보호하는 래스터 포맷이 적합할 수 있습니다. SVG는 선형 아트, 다이어그램, 차트에 적합하며, 상세한 사진에는 적합하지 않습니다.
필수 세부를 유지하고 이미지의 목적을 전달하는 텍스트를 제공하세요.
빈 대체 텍스트(alt="")를 사용하고 중요한 정보를 이미지에만 의존하지 마세요.
이미지 픽셀을 묘사하기보다 동작이나 목적(예: 버튼의 역할, 링크 대상)을 명확히 하세요.
2. 렌더 슬롯에 맞춰 크기를 정한 뒤 반응형 후보를 제공하세요
내재적(intrinsic) 치수를 CSS 슬롯에 맞추세요. 데스크톱 규모 파일을 좁은 카드에 쓰면 전송이 낭비되고, 작은 래스터를 과도하게 늘리면 흐릿해집니다. 디바이스 픽셀 비율을 고려하되 모든 화면이 가장 큰 후보를 필요로 한다고 가정하지 말고 시각적으로 검증하세요.
한 구성(composition)을 여러 너비로 제공해야 한다면 srcset의 너비 기술자(width descriptors)와 sizes를 사용해 실제 슬롯 너비를 명시하세요. 그러면 브라우저가 적절한 후보를 선택합니다. 뷰포트별로 자르기나 구성 변경(art direction)이 필요한 경우 picture를 사용하세요. picture 내부에는 src와 alt를 가진 img 폴백을 유지하세요.
같은 구성에서 픽셀 치수만 다른 후보.
확대/축소만으로 메시지가 보존되지 않을 때 다른 크롭이나 구성을 사용.
반응형 특성을 사용하지 않는 클라이언트를 위해 img의 src를 유지.
3. 이미지 특성에 따라 포맷과 압축을 선택하세요
WebP와 AVIF는 적절한 경우 래스터 전송량을 줄일 수 있지만 포맷 자체가 품질을 보장하지는 않습니다. 대표적인 인물, 미세 텍스처, 브랜드 그라데이션, 이미지 내 텍스트, 투명도를 테스트하세요. JPEG는 사진용 일반적인 폴백으로 남아 있고, PNG는 무손실 디테일이나 투명도에 적합할 수 있습니다. AVIF 지원과 배포 스택에서의 운용 적합성을 확인하세요.
손실 압축(lossy)은 바이트를 줄이기 위해 정보를 제거하며 상세한 사진에서는 관용적이지만 선명한 선이나 텍스트에는 덜 관대합니다. 무손실 압축(lossless)은 인코딩된 픽셀을 보존하지만 절감 폭이 작을 수 있습니다. 품질은 복사한 숫자 설정이 아니라 렌더된 크기에서의 나란한 비교로 결정하세요. 메타데이터는 방향, 색상, 워크플로 요구를 확인한 뒤에만 제거하세요.
표시 크기에서 손실 AVIF, WebP, JPEG 폴백을 비교하세요.
적합한 SVG를 우선 고려하거나 테스트로 선명한 래스터 가장자리를 보호하세요.
전달하는 모든 포맷과 폴백에서 알파 채널 표시를 확인하세요.
4. 마크업으로 속도와 레이아웃 안정성을 보호하세요
모든 콘텐츠 img에 대해 내재적 종횡비와 일치하는 width 및 height 속성을 제공하세요. 브라우저가 파일 도착 전 공간을 예약해 레이아웃 이동을 줄일 수 있습니다. CSS는 표시 크기를 여전히 조정할 수 있습니다.
loading=lazy는 초기 뷰포트 밖에서만 사용하세요. 로드 시 보일 가능성이 있는 이미지, 특히 Largest Contentful Paint(LCP) 후보는 지연 로드하지 마세요. LCP는 뷰포트에 보이는 가장 큰 이미지·텍스트 블록·비디오의 렌더 시간입니다. fetchpriority=high는 상대적인 힌트일 뿐이므로 아껴서 사용하고 결과를 측정하세요. 대체 텍스트나 이미지 검색이 필요한 콘텐츠에는 HTML 이미지 마크업을 사용하세요; Google은 CSS 배경 이미지를 색인하지 않는다고 문서화했습니다.
지연 로드되는 갤러리 이미지에도 width와 height를 설정하세요.
잠재적 LCP 이미지는 eager로 두고 요청 우선순위를 검사하세요.
오프스크린 이미지는 lazy-load하고 제약된 네트워크에서 스크롤을 테스트하세요.
5. 의미, 발견 가능성, 시각적 품질을 보존하세요
대체 텍스트(alt)는 목적과 맥락에 따라 달라집니다. 정보 제공형 이미지에는 필수 정보를 설명하고, 장식형에는 alt=""를 사용하며, 링크나 버튼 이미지의 경우 기능을 명확히 표현하세요. 복잡한 차트나 다이어그램에는 근처 텍스트로 등가 설명을 제공하세요. 키워드 나열은 피하세요.
발견 가능해야 하는 콘텐츠 이미지는 표준 HTML 이미지 요소, 관련 근처 텍스트, 실용적인 짧은 설명 파일명, 반응형 마크업의 폴백 소스를 사용하세요. 장식적 배경을 단지 발견 가능성 때문에 중복된 콘텐츠로 바꾸지 마세요.
가장 크고 가장 작은 의도된 크기에서 압축된 파일을 검토하세요.
가능하면 일반 텍스트를 사용하고, 불가피하면 동등한 문구를 제공하세요.
정보형 이미지는 관련 페이지 텍스트 근처에 배치하세요.
6. 에셋뿐 아니라 페이지를 검증하세요
대표 템플릿을 좁은/넓은 뷰포트에서 테스트하세요. 브라우저 개발자 도구로 srcset에서 선택된 후보, 전송 크기, 렌더된 치수, 레이아웃 이동을 검사하세요. 네트워크 스로틀링으로 늦게 뜨는 히어로 이미지와 느린 갤러리를 드러내세요. 단순한 내보내기 비교로는 sizes 값의 부정확성, 예기치 않은 크롭, 또는 프로덕션 변환 문제를 드러낼 수 없습니다.
가능하면 실험실(lab)과 필드(field) 신호를 모두 사용하세요. Lighthouse와 PageSpeed Insights는 크기 부적절한 이미지를 식별할 수 있고, 필드 LCP는 실제 방문을 반영합니다. 동일한 템플릿, 디바이스 클래스, 릴리스 버전, 측정 창을 비교하세요. 서버 응답 시간, 스크립트, 폰트, 서드파티 변경도 함께 바뀌었다면 이미지 때문에 메트릭이 변했다고 단정하지 마세요. 공유 템플릿 변경은 단계별로 진행하고 검증될 때까지 롤백 경로를 유지하세요.
슬롯이 예상치 못한 과다한 후보를 선택하지 않는지 확인하세요.
크롭, 선명도, 색상, 대체 텍스트, 레이아웃 안정성을 점검하세요.
오너, 예상 신호, 그리고 되돌리기 경로를 명시하세요.