Los anchos de imagen receptivos ayudan al navegador a elegir un tamaño de archivo, pero a veces la composición misma debería cambiar. El elemento de imagen puede ofrecer un recorte vertical en una pantalla estrecha y un recorte amplio en una más grande.

<picture>
  <source media="(max-width: 40rem)" srcset="portrait-crop.webp" type="image/webp">
  <source srcset="wide-crop.webp" type="image/webp">
  <img src="wide-crop.jpg" alt="A gardener pruning a young tree" width="1200" height="800">
</picture>

Mantenga el respaldo completo

  • El elemento img lleva el texto alternativo y sigue siendo el recurso alternativo si ninguna fuente coincide.
  • Ordenar fuentes desde la condición más específica hasta la opción general.
  • Utilice un ancho y alto que coincidan con el recurso alternativo y evite cambios de diseño inesperados.

Elija cultivos que conserven el significado

La dirección de arte es más que hacer zoom. Mantenga el tema y el contexto que importan en cada cultivo y verifique que el texto alternativo aún describa el significado compartido.

Utilice srcset y tamaños cuando la misma composición simplemente pueda entregarse en diferentes resoluciones; Utilice la imagen cuando cambie la composición visual.