Las imágenes responsivas suelen implementarse mediante el atributo srcset
. El atributo srcset
es una lista separada por comas de nombres de archivos de imágenes 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
.
Para imágenes responsivas que usan descriptores de densidad:
- Todas las imágenes enumeradas en
src
ysrcset
deben tener la misma relación de aspecto. - Configura los atributos
width
yheight
para que coincidan con las dimensiones de la imagen1x
. - El atributo
src
debe hacer referencia a la imagen1x
.
Para imágenes responsivas que usan descriptores de ancho, haz lo siguiente:
- Todas las imágenes que aparecen en
src
ysrcset
deben tener la misma relación de aspecto. - Configura los atributos
width
yheight
para que coincidan con las dimensiones de la imagen de resguardo. - Ajusta el estilo de la imagen según sea necesario: Si no existe un estilo de CSS, configurar
width
yheight
en una imagen responsiva que use descriptores de ancho hará que la imagen siempre se renderice en el mismo tamaño, incluso si las imágenes enumeradas ensrcset
tienen dimensiones variables. Es posible que este comportamiento no sea el deseado. Si agregaswidth: 100%; height: auto;
owidth: 100vw; height: auto;
al estilo de tu imagen, puedes obtener la apariencia visual que deseas.
Para las etiquetas <picture>:
- Configura los atributos
width
yheight
para todas las etiquetas<source>
: Los valores apropiados parawidth
yheight
dependerán de cómo la etiqueta<source>
usesrcset
. (Consulta más arriba para obtener información sobre cómo trabajar consrcset
). - Ajustar el estilo de la imagen: Si necesitas ajustar el estilo de la imagen, ten en cuenta que agregar un estilo a una etiqueta
<source>
no tendrá ningún efecto: una etiqueta<source>
es un elemento vacío. En su lugar, deberás aplicar estilo a la etiqueta<img>
correspondiente. - Configura los atributos
width
yheight
en la etiqueta<img>
: Estos valores deben coincidir con el tamaño intrínseco de la imagen de resguardo.
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>