이미지가 수행해야 할 작업으로 선택하세요
확장자(extension)부터 시작하지 말고 자산(asset)부터 시작하세요. 사진은 연속톤(continuous-tone) 콘텐츠이므로 표시 크기에서는 일부 손실이 허용될 수 있습니다. 반면 스크린샷, 차트, 로고 또는 선 드로잉은 선명한 엣지와 텍스트를 가지며 아티팩트가 눈에 띕니다. 이런 경우에는 무손실 출력이나 신중한 승인으로 보존하세요. 벡터 로고나 다이어그램이 가능하면 SVG를 사용하세요.
그다음 기능을 식별하세요. 알파(alpha)는 픽셀별 투명도를 의미합니다. 애니메이션은 프레임 시퀀스입니다. 필요한 브라우저 적용 범위, 게시량, 빌드 시간은 더 작은 형식보다 우선될 수 있는 전달 제약입니다.
먼저 손실성 AVIF와 WebP를 테스트하세요. 널리 호환되는 불투명 폴백이 필요하면 JPEG를 유지하세요.
무손실 소스를 보관하세요. 실제 표시 배율에서 PNG와 lossless WebP 또는 AVIF를 비교한 뒤 선택하세요.
AVIF, WebP 또는 PNG를 사용하세요. JPEG는 알파 채널을 담지 못하므로 선택하지 마세요.
각 형식이 제공하는 것을 이해하세요
AVIF는 AV1로 인코딩한 이미지를 HEIF 기반 포맷에 저장합니다. 규격에는 정지 이미지, 이미지 시퀀스, 알파 이미지 항목이 포함되어 있습니다. 손실 및 무손실 인코딩, 투명도, 애니메이션을 지원합니다. 절감량은 고정되지 않습니다: 소스 콘텐츠, 인코더, 속도, 목표 품질, 메타데이터에 따라 결과가 달라집니다.
WebP는 손실 및 무손실 모드, 투명도, 애니메이션을 지원합니다. JPEG는 매우 폭넓은 역사적 지원을 갖춘 손실 정지 이미지 형식으로, 불투명 사진의 폴백으로 유용합니다. PNG는 알파를 갖는 무손실 형식으로, 정확한 그래픽의 폴백으로 적합하지만 사진을 PNG로 저장하면 비효율적일 수 있습니다. 일반적인 PNG는 정적이며, 동작이 필요할 때는 별도의 애니메이션 형식을 테스트하세요.
전송량 절감이 인코딩 및 폴백 작업을 정당화할 수 있는 고부가 래스터 이미지에서 우선적으로 검토하세요.
투명도와 애니메이션을 포함한 현대적인 범용 래스터 옵션으로 유용합니다.
불투명한 사진의 폴백으로 사용하세요. 투명 로고나 컷아웃에는 적합하지 않습니다.
무손실·투명 래스터 폴백과 픽셀 충실도가 바이트 최소화보다 중요한 자산에 사용하세요.
하나의 포맷에만 기대지 말고 폴백 경로를 구축하세요
브라우저가 대안을 평가하도록 하는 picture 요소를 사용하세요. AVIF를 먼저, 그다음 WebP, 마지막으로 JPEG 또는 투명도가 필요하면 PNG로 img 폴백을 두고 올바른 MIME 타입을 설정하세요. 브라우저는 지원되지 않는 source를 건너뛰고 사용 가능한 소스가 없을 때 폴백을 사용합니다. 의미 있는 대체 텍스트(alt)는 의도적으로 크롭을 변경하지 않는 이상 동일하게 두세요.
형식 폴백은 반응형 크기(responsive sizing)를 대체하지 않습니다. 슬롯이 변경될 때는 폭 기반 후보를 제공하고 진실한 sizes 값을 제공하세요. width와 height를 포함하면 브라우저가 공간을 예약할 수 있습니다. 작은 포맷 파일을 과도히 큰 픽셀 치수로 제공하면 바이트가 낭비됩니다.
AVIF를 먼저, WebP를 두 번째로, 불투명 사진에는 JPEG를, 폴백에 투명도나 무손실 엣지가 필요하면 PNG를 사용하세요.
서버가 picture 마크업 대신 요청 기능(request capabilities)에서 형식을 선택한다면, 캐시 변이(cache variation)를 올바르게 구성하고 각 클라이언트가 디코딩 가능한 표현을 받는지 테스트하세요.
선호 디코더가 없는 클라이언트를 사용하거나 스테이징에서 소스를 의도적으로 비활성화해 보세요; 이미지, 치수, 대체 텍스트가 올바르게 유지되는지 확인하세요.
인코딩 시간을 예산에 포함하고 시각 품질을 보호하세요
현대 압축은 작업을 인코딩 쪽으로 이동시킵니다. AVIF의 참조 인코더는 0(가장 느림)에서 10(가장 빠름)까지 속도 범위를 제공합니다; WebP도 인코더 작업량을 속도, 출력 크기, 품질 간 교환으로 처리합니다. 배치 재인코드나 온디맨드 변환을 운영적 결정으로 여기고, 무료 설정 변경으로 보지 마세요.
자산 클래스별로 반복 가능한 정책을 설정하고 일반 표시 크기에서 원본을 검토하세요. 얼굴, 그라데이션, 텍스트, 엣지, 투명 경계를 검사하세요. 마스터를 보관하고 인코더 버전 및 설정을 기록해 결함이 재현되어 롤백될 수 있게 하세요.
빠른 인코딩은 빌드 압박을 줄일 수 있지만 더 큰 파일이나 덜 효율적인 압축을 초래할 수 있습니다; 자체 소스 집합으로 벤치마크하세요.
점수나 프리셋은 방문자에게 의미 있는 이미지 영역에 대한 육안 검토를 대체할 수 없습니다.
이미지 형식 변경을 적극적인 신뢰성 관행으로 만드세요
For Status Is UP, 이미지 최적화는 중요한 페이지의 품질 저하를 방지할 때 사전 예방적 가동시간(uptime) 작업입니다. 중요한 이미지 URL을 목록화하고 대표 변환을 스테이징한 뒤 콘텐츠 타입, CDN 동작, 캐시 무효화 등을 릴리스 전에 검증하세요.
되돌릴 수 있는 배치로 배포하세요. 릴리스 후보에서 렌더링과 전송 동작을 비교하고 새 경로가 입증될 때까지 이전 표현을 유지하세요. 변환이나 캐시 규칙이 실패하면 알려진 정상 소스로 복원하세요. 이는 회복력이 있는 전달 방향이지 AVIF나 다중 형식을 모든 곳에 적용하라는 보편적 명령은 아닙니다.
아카이브 이미지 전체가 아니라 첫 번째 유용 뷰에 영향을 주는 리드 이미지와 콘텐츠 이미지를 우선순위로 두세요.
결정론적(asset names) 자산 이름이나 버전 매핑을 유지해 이전 JPEG, PNG, 또는 WebP 경로를 빠르게 복원할 수 있게 하세요.