Usted está aquí:
Imágenes responsivas y formatos de imagen modernos (AVIF y WebP)
Cargue AVIF y WebP para tamaños de archivo más pequeños con navegadores modernos, y use JPEG (o PNG para transparencia o sin pérdidas) como alternativa. Los formatos de salida, la calidad y las reglas URLUtils y MediaFile para DIS se encuentran en el tema Dynamic Imaging Service.
La tabla Transformaciones admitidas tiene todos los detalles de formato, extensión y calidad. En este tema se describe cuándo usar cada formato en el marcado y cómo la imagen HTML y los elementos de origen pueden hacer referencia a direcciones URL de DIS.
Cuándo usar cada formato
| Formato | Uso típico | Notas |
|---|---|---|
| AVIF | Fotografía de productos de alta compresión cuando el navegador lo admite | A menudo el más pequeño; El soporte depende del navegador y la versión del comprador. |
| WebP | Tamaño equilibrado y soporte para clientes modernos | Soporte más amplio que AVIF; Todavía no es universal en clientes muy antiguos. |
| JPEG / PNG | Predeterminado, reservas img o transparencia a través de PNG |
Alinee la extensión de archivo en la URL con el formato que necesita. |
Mejora progresiva con imagen
Ofrezca primero AVIF o WebP y, a continuación, una imagen de referencia. Las direcciones URL DIS exactas (extensiones y valores sfrm ) deben seguir la tabla Transformaciones admitidas y las llamadas a URLUtils o MediaFile. Ejemplo de patrón (Internet Store Markup Language (ISML)-agnóstico):
<fuente de la imagen>
<srcset="<su URL de DIS de AVIF"> type="image/avif" /><
source srcset="<su URL> de DIS de WebP" type="image/webp" /<
>img src="<su URL de DIS JPEG"> alt="..." />
</imagen >En la práctica, usted genera cada URL en script a partir del mismo viewType o ruta con formato / extensión de archivo y transforma objetos para su sitio, en lugar de codificar cadenas sw= en su HTML.
Rendimiento e higiene de caché
- Mantenga los parámetros de transformación estables y minimizados: los tamaños lógicos y los parámetros idénticos se asignan a una sola clave de caché, lo que puede mejorar las tasas de aciertos en la CDN. Consulte Directrices de imágenes y Almacenamiento en caché de imágenes dinámicas en Dynamic Imaging Service .
- Omita
q=80cuando 80 ya es el valor predeterminado en su uso, para evitar unaqinnecesaria en la cadena cuando la documentación ya indica el valor predeterminado. - Controle el peso de la imagen y las velocidades 4xx; Los picos a menudo se correlacionan con un valor
de OIMGincorrecto, paressw=/sh=no válidos o una URL superpuesta que no estácodificada en URL. Consulte Solución de problemas y migración .
