위치:
반응형 이미지 및 최신 이미지 형식(AVIF 및 WebP)
최신 브라우저에서 더 작은 파일 크기를 위해 AVIF 및 WebP를 로드하고 JPEG(또는 무손실 또는 투명도의 경우 PNG)를 폴백으로 사용합니다. DIS에 대한 출력 형식, 품질, URLUtils 및 MediaFile 규칙은 Dynamic Imaging Service 항목에 있습니다.
지원되는 변환테이블에는 전체 형식, 확장자 및 품질 세부 정보가 있습니다. 이 항목에서는 태그에서 각 형식을 사용하는경우와 HTML 그림및소스요소에서 DIS URL을 참조하는방법에대해 설명합니다.
각 형식을 사용하는 경우
| 형식 | 일반적인 사용 | 메모 |
|---|---|---|
| 아비프 | 브라우저가 지원하는 경우 고압축 제품 사진 | 종종 가장 작습니다. 지원은 구매자 브라우저 및 버전에 따라 다릅니다. |
| WebP | 현대 고객을 위한 균형 잡힌 크기 및 지원 | AVIF보다 더 넓은 지원; 아주 오래된 클라이언트에서는 여전히 보편적이지 않습니다. |
| JPEG / PNG | 기본값, img대체 또는 PNG를 통한 투명도 |
URL의 파일 확장명을 필요한 형식으로 맞춥니다. |
그림과 함께 점진적 향상
먼저 AVIF또는WebP를 제공한 다음 기준 이미지를 제공합니다. 정확한 DIS URL(확장 및sfrm값)은지원되는 변환표와URLUtils또는MediaFile호출을 따라야 합니다. 예제 (ISML(Internet Store Markup Language)에 구애받지 않음) 패턴:
<picture>
<source srcset="<AVIF DIS URL>" type="image/avif" /<>
source srcset="<WebP DIS URL>" type="image/webp" /><
img src="<JPEG DIS URL>" alt="..." />
</그림 >실제로 HTML에서sw=문자열을 하드 코딩하는 대신 동일한viewType또는형식 /파일 확장자를 가진 경로에서 스크립트로 각 URL을 생성하고 사이트의 개체를변환합니다.
성능 및 캐시 예방 조치
- 변환 매개 변수를안정적이고최소화유지: 동일한 논리적 크기와 매개 변수를 단일 캐시 키에 매핑하여 CDN의 적중률을 향상시킬 수 있습니다. Dynamic Imaging Service의 이미지 지침 및 동적 이미징 캐싱을 참조하십시오 .
- 문서에 이미 기본값이 명시되어 있을 때 문자열에 불필요한
q가 표시되지 않도록 80이 이미기본값인 경우q=80을 생략합니다. - 이미지 무게 및4xx속도 모니터링; 스파이크는 잘못된
OIMG값, 잘못된sw=/sh=쌍 또는URL로 인코딩되지 않은 오버레이 URL과 상관관계가 있는 경우가 많습니다. 문제 해결 및 마이그레이션을참조하십시오 .
이 기사를 통해 문제를 해결했습니까?
개선을 위한 의견을 보내주세요.
