WebP 크기 관리가 중요한 이유

  • 코덱의 효율성이 향상되었음에도 불구하고, 크기가 큰 WebP 이미지는 여전히 페이지 용량을 증가시킵니다.
  • 반응형 srcset을 사용하려면 WebP 자산당 여러 차원 변형이 필요합니다.
  • 레티나 디스플레이 타겟팅에는 2배 해상도의 WebP 변형이 필요합니다.
  • CDN 캐싱은 표준 WebP 크기 세트를 활용하면 이점을 얻을 수 있습니다.

WebP 크기 조정 모범 사례

  • 필요한 최대 크기(일반적으로 히어로 크기의 2배)로 마스터하세요.
  • 표준 중단점(320, 640, 1024, 1920)에서 srcset 변형을 생성합니다.
  • UI에는 WebP 무손실 포맷을, 사진에는 손실 압축 포맷을 사용하세요. 절대로 혼합해서 사용하지 마세요.
  • 투명 WebP 이미지의 크기 조정 후 알파 엣지를 확인합니다.
  • 크기 조정과 형식 협상을 함께 수행합니다(AVIF 우선, WebP 대체, JPG 마지막).