Si le hacemos la pregunta a «¿sabes cómo poner una imagen en HTML?» a cualquier desarrollador, seguro que contestará con un rotundo «¡Sí, obvio!». Seguramente, tú también hayas contestado igual, pero ¿puedes decirnos cuántos de los atributos que tratamos en este post utilizas?
Lazy load de imágenes en HTML
Tenemos un sitio con decenas de imágenes, muchas escondidas debajo de varias «páginas» de scroll. ¿Cómo puedes evitar que las imágenes se carguen hasta que realmente estén siendo visualizadas en la pantalla del navegador?
Para estos casos actualmente los clientes web tienen un atributo para la carga perezosa nativa, sin necesidad de usar ningún tipo de JavaScript.
<img src="imagen.jpg" loading="lazy">
Además, en este caso todos los navegadores actuales lo soportan ¿Lo estás usando ya?
Deferir la decodificación de la imagen en HTML
A la hora de procesar y renderizar una página, los navegadores deben decodificar las imágenes para situarlas en la página junto con el resto del contenido. Esto implica una cantidad de procesamiento por parte del navegador que no siempre es necesaria de realizar en una primera instancia.
Sobre todo cuando tenemos imágenes que no aparecen en la primera zona visible del documento HTML, es interesante indicarle al navegador que espere a decodificarla, para que esta tarea se realice de manera asíncrona una vez está procesado el propio documento.
<img src="foto.jpg" decoding="async">
Solamente Internet Explorer (afortunadamente desaparecido ya) es incapaz de entender este atributo, por lo que resulta extremadamente útil como criterio de optimización.
Imágenes responsive en HTML con srcset y sizes
Si queremos que las imágenes se adapten bien a los distintos tamaños de pantalla y resoluciones podemos usar los atributos srcset y sizes de la etiqueta <img> mediante los cuales somos capaces de informar diversos archivos con los correspondientes tamaños de pantallas objetivo.
Estos dos atributos funcionan de manera sincronizada y tienen cierta complejidad debido a la cantidad de posibilidades que nos ofrecen. Básicamente nos sirven para indicar diversas imágenes, con sus anchuras distintas y diversas condiciones de medios que permiten al navegador escoger la mejor de las imágenes disponibles ajustada a la resolución actual y el tamaño de la ventana del navegador.
Tenemos un ejemplo de código aquí.
<img src="imagen-800w.jpg" srcset="imagen-320w.jpg 320w, imagen-520w.jpg 520w, imagen-1000w.jpg 1000w" sizes="(min-width: 1000px) 650px, 90vw">
Primero tenemos el atributo src, que indica a posibles navegadores no compatibles qué imagen deben de mostrar.
Luego tenemos srcset que nos permite indicar qué imágenes están disponibles, separadas por comas. Para cada imagen se señala el nombre del fichero y el ancho de la imagen, seguido de la unidad «w». Esta unidad hace referencia al tamaño real del fichero de la imagen y no a cómo se visualiza en función de la densidad de píxeles de la pantalla.
El atributo sizes nos sirve para indicar el conjunto de medios sobre los que estamos trabajando y los anchos del zócalo de imágenes que se deben rellenar para cada tipo de medio. Por ejemplo, en el código anterior estamos indicando que en pantallas de mínimo 1000 píxeles se debe rellenar una imagen con 650px. En otro caso se rellena el 90% del viewport. El navegador es quien debe decidir qué imagen usar en cada caso dentro de las versiones disponibles. Por ejemplo, no hay una imagen de 650 píxeles, entonces usará la que mejor encaje tenga, que en este caso sería la de 1000 píxeles.
Atributo fetchpriority para imágenes en HTML
¿Qué tal aquella imagen que resulta muy importante para tu sitio web y que se tiene que ver en el primer contenido visualizable de la página? Podemos optimizar imágenes para que se codifiquen y se rendericen lo más rápidamente posible con fetchpriority.
<img src="imagen-muy-importante.png" fetchpriority="high">
En este caso se trata de una funcionalidad más experimental, que actualmente está disponible solamente en Chrome y Edge, por lo que no debemos depender de este comportamiento.
Un caso de uso interesante podría ser en los carruseles de imágenes, donde queremos optimizar la visualización de la primera imagen del carrusel y no las siguientes.
<div class="carrusel"> <img src="elemento1.jpg" fetchpriority="high"> <img src="elemento2.jpg" fetchpriority="low"> <img src="elemento3.jpg" fetchpriority="low"> <img src="elemento4.jpg" fetchpriority="low"> </div>
Accesibilidad en las imágenes HTML
Queremos acabar con unos temas no tan técnicos pero también de extrema importancia en lo que respecta a las imágenes HTML. Consiste en aportar algunos atributos interesantes para que puedan ser bien interpretadas por los agentes de todo tipo, especialmente pensados para el acceso universal.
La primera de las recomendaciones es de sobra conocida por todos, basada en el atributo alt.
<img src="imagen_descrita.png" alt="imagen que representa tal cosa...">
Luego tenemos otros atributos como role, que nos pueden venir bien para indicar qué función tiene una imagen en el contexto de la página, especialmente indicada cuando esta imagen tiene solamente fines de presentación (por ejemplo aquellas imágenes que no tienen valor con respecto al contenido y usamos simplemente para separar secciones de la web o hacer que un área de la página quede bonita).
<img src="motivo_grafico_decorativo.jpg" role="presentation">