Imágenes responsivas en HTML

Servir el archivo de imagen correcto para la pantalla que lo pide.

<picture>
  <source media="(min-width: 60rem)" type="image/avif"
          srcset="/img/wide.avif 1600w" sizes="50vw">
  <source media="(min-width: 30rem)" type="image/webp"
          srcset="/img/mid.webp 960w" sizes="50vw">
  <img src="/img/small.jpg" alt="A desk with a split keyboard"
       srcset="/img/small.jpg 480w, /img/mid.jpg 960w"
       sizes="(min-width: 30rem) 50vw, 100vw"
       width="480" height="320">
</picture>

Cómo funciona

1. srcset ofrece anchos y sizes dice a qué ancho se renderiza.
2. picture con media cambia la dirección de arte, no solo la resolución.
3. El img dentro de picture es el fallback obligatorio.

El intento, en números

Líneas

10

Caracteres a escribir

386

Tokens

58

Ritmo de tres estrellas

75 tpm

Al ritmo de tres estrellas de 75 tokens por minuto, este intento toma unos 46 segundos.

Escribe este fragmento

Paso 5 de 9 en Medios e incrustaciones; paso 12 de 23 en Semántica y metadatos.

← Anterior Siguiente →