Imágenes responsivas y dirección de arte

Las imágenes responsivas suelen implementarse con el atributo srcset. El atributo srcset es una lista separada por comas de nombres de archivo de imagen y sus descriptores de ancho o densidad.

Para evitar cambios de diseño, configura los atributos width y height en las etiquetas <img> y <source> que usan srcset.

Descriptores de densidad

Para crear imágenes responsivas que usen descriptores de densidad, haz lo siguiente:

  • Todas las imágenes enumeradas en src y srcset deben tener la misma relación de aspecto.
  • Configura los atributos width y height para que coincidan con las dimensiones de la imagen 1x.
  • El atributo src debe hacer referencia a la imagen 1x.

Descriptores de ancho

Para crear imágenes responsivas que usen descriptores de ancho, haz lo siguiente:

  • Todas las imágenes enumeradas en src y srcset deben tener la misma relación de aspecto.
  • Los atributos width y height deben coincidir con las dimensiones de la imagen de resguardo.
  • Ajusta el estilo de la imagen según sea necesario. Sin CSS, si configuras un width y un height en una imagen responsiva que tiene descriptores de ancho, la imagen siempre se renderiza en ese tamaño establecido. Esto se aplica incluso cuando las imágenes enumeradas en srcset tienen dimensiones variables. Es posible que este comportamiento no sea lo que deseas. Agrega width: 100%; height: auto; o width: 100vw; height: auto; al estilo de tu imagen para obtener la apariencia visual que desees.

Elementos de imagen

Para crear elementos <picture> responsivos, haz lo siguiente:

  • Configura los atributos width y height para todas las etiquetas <source>. Los valores adecuados para estos atributos dependen de cómo la etiqueta <source> usa srcset.
  • Para ajustar la imagen, aplica un estilo a la etiqueta <img> correspondiente. La etiqueta <source> es un elemento vacío y, por lo tanto, el estilo no tiene efecto.
  • Configura los atributos width y height en la etiqueta <img>. Estos valores deben coincidir con el tamaño intrínseco de la imagen de resguardo.

Ejemplos

HTML

<!-- Using density descriptors -->
<img width="480" height="330"
    srcset="cat-1x.jpg, cat-2x.jpg 2x, cat-3x.jpg 3x"
    src="cat-1x.jpg"
    alt="Photo of a cat on a green background">
<!-- Using width descriptors -->    
<img width="256" height="128"
    srcset="dog-256w.jpg 256w, dog-512w.jpg 512w, dog-1028w.jpg 1028w"
    src="dog-256w.jpg"
    alt="Photo of a dog on a orange background">
<!-- Picture tag -->
<picture>
    <source media="(max-width: 720px)" width="600" height="300" srcset="newyork-rectangle.jpg" />
    <source media="(min-width: 721px)" width="600" height="600" srcset="newyork-square-1x.jpg, newyork-square-2x.jpg 2x, newyork-square-3x.jpg 3x" />
    <img src="newyork-rectangle.jpg" width="600" height="300" alt="Photo of the Empire State Building">
</picture>