Cuando un usuario medio está navegando por internet con su móvil u ordenador, pocas veces se para a pensar en los formatos usados por las imágenes de un artículo o de cualquier otro tipo de contenido.
Sin embargo, para diseñadores y especialistas en SEO es un elemento importante, ya que una correcta optimización de las imágenes puede mejorar sustancialmente la velocidad de carga de una web y, por lo tanto, mejorar la experiencia de usuario y la puntuación en Google, por lo que hay que tener un equilibrio entre calidad de las imágenes y tamaño de descarga de estas imágenes.
Por ello, elegir correctamente el formato debe estar en el decálogo de cualquier diseñador web: hay que encontrar el equilibrio entre una imagen con la suficiente calidad para ilustrar un contenido correctamente y que la página web pueda cargar lo más rápido posible y que evite que el usuario que visita esta página pueda abandonarla antes de poder llegar a cargarse.
Formatos de imágenes para web
Tradicionalmente en el diseño de páginas web se ha trabajado con tres formatos: JPG, PNG y GIF, aunque en la actualidad, tenemos nuevos formatos como el WEBP y AVIF que cada vez están siendo más usados, por lo que a continuación te mostramos las características de cada uno de ellos y puedas elegir el formato que más te conviene.
JPG
Las imágenes en JPG son el formato más usado, ya que permite una mayor compresión manteniendo niveles de calidad bastante aceptables. Su algoritmo se basa en quitar la información no esencial para el ojo humano, como por ejemplo cambios imperceptibles en zonas de color homogéneo.
Teniendo en cuenta que el JPG es un formato prácticamente universal y usado en millones de dispositivos (cámaras, teléfonos móviles…), existen multitud de herramientas con las que podemos convertir una imagen de nuestra cámara de fotos cuya calidad es para impresión en un formato adecuado para web.
Esta optimización puede tener tres procesos, el primero es cambiar la densidad de píxeles por pulgada, que normalmente es de 300ppp a 72ppp, suficiente para una buena calidad en pantalla. Luego, también se debe ajustar el tamaño de la imagen a la necesidad real para el sitio web. Si se va a necesitar un tamaño máximo de 1000 píxeles en la web, lo mejor es reducir la imagen a ese mismo tamaño.
Por último, está la compresión final de la foto que es la calidad final que le daremos a la imagen. Normalmente podemos jugar con el porcentaje de compresión buscando el equilibrio entre calidad y poco peso. Para una web lo habitual es comprimirlas entre un 60% y un 80% dependiendo del tipo de imagen y los colores de la misma.
PNG
Con una mejor calidad de imagen tenemos el formato PNG. Sus puntos fuertes son que tiene mayor profundidad de bits, permite transparencias y usa un algoritmo lossless (sin pérdida) en el proceso de compresión.
Todo esto quiere decir que las prestaciones gráficas son de las mejores ya que podremos conseguir imágenes bastante nítidas en formato web, además de poder usar transparencias con lo que añadiremos versatilidad a los usos de la imagen y que, aunque comprimamos la imagen una y otra vez, no habrá pérdida de calidad.
Con todo esto que contamos, los PNG serían el mejor formato para imagenes web. Sin embargo, su elevado peso hace que una web que tenga en cuenta el SEO no pueda permitirse que todos sus elementos gráficos sean en este formato. Por ello, los PNG se usan principalmente para fondos que requieran de transparencia o para iconos, logotipos o elementos gráficos con poca información de color.
GIF
Con un uso ya casi residual, nos encontramos con los GIF. Hoy en día han quedado prácticamente relegados a aplicaciones de envío de mensajes como Whatsapp o Telegram, usados como simpáticas animaciones que acompañan a los mensajes que nos envían. Sin embargo, en el mundo web es muy difícil ver una imagen en GIF en un site que tenga menos de 10 años, a no ser de banners comerciales o elementos que requieran animación.
Las imágenes en formato GIF tuvieron su auge cuando internet se popularizó a mediados de los años 90 del siglo pasado. Esto fue gracias a que su paleta de colores (solamente 256 frente a los 16 millones de un JPG) y su método de tramado permitían imágenes de calidad pasable y con un peso aceptable para una carga relativamente rápida.
Hay que tener en cuenta dos factores de aquella época, las pantallas eran de peor calidad por lo que el nivel gráfico no era tan exigente, y la velocidad de internet era bastante lenta, por lo que si queríamos cierta agilidad a la hora de ver una web necesitábamos imágenes lo más ligeras posibles. También hay que sumar la posibilidad de unir varios frames y hacer animación, así como la capacidad de transparencia. Sin duda, un formato muy versátil, pero que a día de hoy se queda corto en cuanto calidad visual.
WEBP
Este formato se le atribuye a Google, pero la realidad es que se valió de una tecnología desarrollada por otra compañía para el resultado final. Fue la empresa On2 Technologíes, comprada por el gigante de internet, la que desarrolló un codificador de video capaz de comprimir la imagen perdiendo la menor información posible, luego ya Google se encargó de usar esos algoritmos de compresión para crear el definitivo formato WEBP.
De hecho, aunque no lo sabíamos, podíamos usar WEBP desde hace diez años, eso sí, apenas había navegadores que daban soporte al formato (apenas Chrome y Ópera). El gran salto ha venido desde que hace un par de años cuando los principales navegadores decidieron incluirlo como formato soportado y desde entonces su ascenso ha sido meteórico.
La principal bondad de este tipo de imagen es su gran capacidad de compresión guardando un buen equilibrio con la calidad de imagen. Comparando un JPG con un WEBP del mismo tamaño y calidad observaremos que este último tendrá aproximadamente un 30% menos de peso. Además de ofrecer la posibilidad de transparencia y compresión lossless. Por lo que ganamos en versatilidad pudiendo usar imágenes de poco peso para fondos transparentes, además de no perder calidad, aunque comprimas la imagen cien veces.
A día de hoy, no hay ningún formato que pueda competir con esta relación calidad-peso. No en vano, uno de los principales CMS a nivel mundial como WordPress ha dado soporte a WEBP otorgando el mismo protagonismo que a los formatos tradicionales. También herramientas como Photoshop están dando la opción de añadir un pequeño parche para exportar las imágenes en WEBP.
AVIF
Sin duda, WEBP es la tendencia de los formatos de imagen y todo el mundo se está poniendo las pilas para actualizarse y darle cabida. Pero ojo, que también ha llegado un nuevo formato que podría desbancarle en breve. Se trata de AVIF, creado también por Google, que será el tipo predeterminado para los sistemas Android a partir de su versión 12.
La compresión que ofrece respecto a los JPG es del 50%, mejorando a los WEBP, sin embargo, todavía falta que los navegadores lo agreguen como imagen soportada de forma mayoritaria para consolidarse. Ya veremos en sucesivas actualizaciones hacia dónde va la tendencia.
