Imágenes que no mueven la página en HTML

Width y height no son estilo: reservan el espacio antes de que llegue el archivo.

<img src="/img/hero.jpg" alt="A split keyboard on a wooden desk"
     width="1200" height="630" fetchpriority="high">

<img src="/img/thumb.jpg" alt="" width="240" height="160"
     loading="lazy" decoding="async">

Cómo funciona

1. width y height dejan que el navegador aparte la caja correcta desde el inicio.
2. loading="lazy" difiere las imágenes fuera de pantalla; nunca las de la vista inicial.
3. decoding="async" saca la decodificación del hilo principal.

El intento, en números

Líneas

5

Caracteres a escribir

204

Tokens

39

Ritmo de tres estrellas

65 tpm

Al ritmo de tres estrellas de 65 tokens por minuto, este intento toma unos 36 segundos.

Escribe este fragmento

Paso 6 de 7 en Enlaces e imágenes; paso 21 de 28 en Estructura del documento.

← Anterior Siguiente →