¿Cuánto influyen las imágenes en el rendimiento de una web? Mucho. Las imágenes son el principal tipo de recurso, en cuanto al peso, en una web. Que sí, que también puede haber vídeo… Pero no es raro que supongan cerca del 70% del total de la página. Conseguir que las imágenes tengan un peso óptimo (el menor posible sin que la calidad se aprecie afectada) va a reportar gran beneficio para el tiempo de carga de la web sin suponer una merma en la experiencia que se quiere proporcionar al visitante.

Por esto, es importante saber elegir el tipo de archivo más apropiado para cada imagen. Además, refiriéndonos a las imágenes, hay características o metadatos admitidos por los tipos de archivo que no es necesario mantener para el uso en web, como son la miniatura de la imagen o el perfil de color para impresión.

Si hace un tiempo publiqué una serie de artículos dedicados a las imágenes y su optimización para web, en los que centraba en destacar diferencias entre los formatos más usados y crear un criterio a la hora de elegir uno u otro formato, hoy quiero dar el siguiente paso lógico en este tema: ¿Existe alguna manera mejor que otra para usar las imágenes en la web? Ya no hablo del formato, sino, por ejemplo, ¿qué ocurre si la imagen tiene que mostrarse en tamaños muy dispares de pantalla? ¿Cómo gestionamos esto con CSS, con HTML…?

Cargar una imagen en HTML

Parece obvio, y es posible que muchos lo sepamos de sobra, pero nos hemos ido haciendo vagos poco a poco, al ir derivando la responsabilidad del diseño visual en CSS. Y esto es correcto solo a medias. Por el camino, hemos olvidado que el HTML es el documento, que debería tener valor y estructura por sí mismo. Según yo lo veo, el CSS debe ser un añadido a la web, el maquillaje que consiga de la web un sito más llamativo. Pero el HTML, debería poder mantener todo el sentido y orden, con independencia del CSS.

Volviendo al tema: el caso es que la etiqueta <img>, en HTML, va acompañada de una serie de atributos, algunos obligatorios, muy útiles y, a menudo, tristemente olvidados, como el conocido alt.

Según la recomendación W3C, la etiqueta img requiere el atributo alt conteniendo un texto alternativo que describa la funcionalidad o contenido de la imagen. Se permite que este atributo quede vacío cuando la imagen en cuestión es, por ejemplo un bullet de un listado, o un icono sin relevancia semántica, pero debe existir (es lo que se llama null alt text).

Indica el tamaño de la imagen

Es buena costumbre, y hasta hace poco no comprendía su importancia, definir el tamaño de la imagen en la propia etiqueta HTML. De esta forma, el navegador no tendrá que esperar a la descarga de la imagen, o del CSS para poder calcular el espacio necesario para ésta.

Lo ideal sería definir, el tamaño en el que a ser usado la imagen. Pero, si no es posible, define al menos el tamaño de la imagen original, lo que te permitirá sacar partido al siguiente punto, la carga diferida o lazy-load.

Aprovecha la carga diferida de imágenes

Hasta ahora, para usar este lazy-load, se ha venido haciendo uso de diferentes scripts que manejaban esta característica. A día de hoy, la mayoría de los usuarios usan navegadores que soportan de forma nativa la carga diferida de imágenes cuando se define el atributo loading="lazy" en la etiqueta HTML.

Usa diferentes el tamaño de fichero adecuado para la imagen

Por otro lado, y ya desde hace unos años, existe la posibilidad de definir no un único origen (src) para una imagen, sino una colección de ellos, con el atributo srcset, de entre los que el navegador cargará la versión de la imagen que considere más eficaz según unas reglas establecidas en este atributo y el tamaño de la ventana donde tenga que mostrarla.

Un paréntesis. No se si te das cuenta, pero con esto:

• hemos conseguido que el navegador pueda colocar el texto de manera correcta antes de tener las imágenes, gracias a decirle cuánto van a ocupar;
• hemos conseguido que el navegador pueda optar por descargar una imagen más pequeña, más ajustada a la pantalla donde será mostrada;
• hemos conseguido que nuestra página sea más amigable con personas que puedan no tener un buen acceso a internet, o que no sean capaces de ver bien las imágenes, gracias a haber completado correctamente ese atributo alt (además de la consiguiente ventaja para el SEO);
• retrasamos, con lazy-load, la descarga de imágenes que no se están mostrando en pantalla, evitando descargas menos importantes y priorizando lo primero que nuestro visitante va a ver.

Figure y picture

Casi parece inexistente la diferencia entre estas dos etiquetas incorporadas en HTML5, y hasta he llegado a confundirlas. Pero no es así. La diferencia entre estas etiquetas es esencialmente semántica, además de que picture sólo acepta imágenes y figure acepta otros tipos de medios.

Figure otorga independencia al contenido de la etiqueta, creando una especie de ventana que desvincula el contenido de figure del resto del documento, mientras que picture tan solo es un envoltorio para una imagen o conjunto de imágenes que ilustran el contenido.

Con ambas etiquetas, se pueden definir varios tipos de fichero alternativos para cubrir navegadores antiguos o «especialitos» que no soporten, o sí, un determinado tipo de archivo.

Si necesitas saber más sobre esto, puedes ver más en la página de MDN sobre picture o figure.

Y por hoy, ya está. En breve sacaré algo sobre cómo gestionar las imágenes con WordPress, que tiene sus funciones interesantes que facilitan bastante este trabajo.