Uno de los factores a mejorar para optimizar las Core Web Vitals es el LCP (Largest Contentful Paint). En la gran mayoría de los casos, cuando el LCP está por debajo de los “límites aceptables”, se debe a una imagen1.
Veamos el uso de las imágenes en la web2:
2010~500 kB~ 40 %Dominio de JPG/PNG; móviles emergentes obligan a optimizar.
2015~1.2 MB~50-60 %Auge del diseño responsive; imágenes HD para pantallas Retina.
2018~1.8 MB~45-50 %Adopción temprana de WebP; hero images más grandes.
2020~2.1 MB (mediana)~40-45 %WebP se populariza; AVIF aparece, pero con soporte limitado.
2023~2.3 MB (mediana)~35-40 %AVIF gana terreno; optimización agresiva con CDNs y lazy loading.
Evolución del peso de las imágenes en páginas web (2010–2023)
Las imágenes siguen siendo el recurso más pesado en el 90 % de las páginas.
Para optimizar algo, primero tenemos que entender qué es y cómo funciona, para después ver por dónde efectuar posibles mejoras, así que, vamos a ello.
Tamaño y peso de la imagen
Tipos de imágenes
Nuevos formatos
Acciones a realizar
Lazy loading
Plugins de optimización de imágenes
Photon y similares
Conclusión
Tamaño y peso de la imagen
El tamaño y el peso de una imagen a menudo se confunden o se usan indistintamente. Es importante diferenciarlos y entender cómo cada uno afecta al WPO.Si lo comparamos con el mundo físico, el símil es totalmente claro. Por ejemplo, un libro, cuyo tamaño es de 21 por 28 centímetros, y su peso es de 500 gramos. Si estamos hablando de nuestras imágenes, entonces tendremos una imagen de 500 por 750 píxeles y de 120 kilobytes.
En nuestras imágenes mediremos el tamaño en píxeles y el peso en kilobytes.
Para cada imagen que mostremos en nuestra página web, deberemos utilizar el tamaño y el peso adecuados.
Aunque no siempre es cierto al cien por cien, y veremos algunas excepciones, normalmente a mayor tamaño, mayor peso. Y para optimizar nuestra página web queremos tener el menor peso posible, ya que la transferencia de esos kilobytes entre el servidor y nuestro navegador requieren de un cierto tiempo que redundará en la velocidad a la que se muestre nuestra página web.
Los navegadores son muy buenos adaptando el tamaño de la imagen a lo que deben mostrar en pantalla, por lo que podemos mostrar una imagen de más de 5000 píxeles de ancho en un tamaño de solo 500 píxeles. La imagen se verá perfecta, pero, por el contrario, estamos utilizando una imagen de un peso elevado para una ventana de tamaño muy reducida que podríamos arreglar con una imagen mucho menor. Si la imagen de cinco mil píxeles pesa 800 kB, podríamos mostrar una imagen de 500 píxeles que podría pesar 80 kilobytes, lo cual significa que estamos utilizando una imagen que pesa 10 veces más de lo que necesitaríamos.
Los adelgazamientos de peso son relativamente fáciles de llevar a cabo con diferentes plugins de optimización de imágenes, pero otra cosa es optimizar el tamaño de las imágenes. WordPress nos ayuda generando diferentes tamaños de imágenes para cada archivo que subamos, generando unos tamaños predefinidos, pero no siempre tendremos todos los tamaños necesarios. Aquí opciones como Photon de wordpress.com nos generarán los diferentes tamaños de imagen a mostrar en el navegador de una marea dinámica sin que tengamos la imagen de ese tamaño extra, como veremos más adelante.
Debemos optimizar las imágenes tanto en tamaño como en peso para utilizar las correctas en cada ocasión.
Tipos de imágenes
Hay disponibles muchísimos formatos de imagen, pero aquí nos vamos a centrar únicamente en los formatos de imagen aptos para web.Para saber el formato de imagen adecuado que debemos de utilizar, tenemos que ver qué es lo que vamos a mostrar: si es un isotipo, una fotografía, un esquema, etcétera.
Por norma general, los esquemas, logotipos e isotipos tienen pocos colores, a diferencia de las fotografías, que tienen millones de colores, por lo que no podremos mostrar una fotografía de un paisaje, por ejemplo, con solo 256 colores. En cambio, si tenemos un isotipo de cuatro colores, utilizar una imagen de color verdadero es un desperdicio de recursos que redundará en un mayor peso de la imagen.
Cuando se trata de fotografía, teníamos dos formatos de imagen básicos, JPG y PNG, a los que ya desde hace unos años debemos añadirle los nuevos formatos WebP y AVIF.
Gran parte de los programas de capturas de pantalla y similares suelen guardar el resultado en PNG, por lo que es muy habitual encontrarnos capturas con millones de colores en formato PNG, que no está optimizando las imágenes tan bien como un JPG. Esto se debe a que el JPG tiene compresión con pérdida y, aunque baje un poco la calidad en el resultado final, podemos obtener muy buenos resultados con un peso muy inferior al de la misma imagen en formato PNG.
Si necesitamos que el fondo o cierta parte de la imagen sea transparente, deberemos de utilizar imágenes GIF o PNG. Si tienen millones de colores, tienen que ser PNG, ya que el GIF solo soporta 256 colores.
Pero tenemos que tener en cuenta que, cuando utilizamos imágenes PNG, estos pueden ser de hasta 256 colores o de color verdadero. Si utilizamos una imagen con fondo transparente y color verdadero, normalmente esa imagen tendrá un peso elevado y no siempre necesitamos utilizar un fondo transparente, puesto que podemos optimizar una imagen creando un fondo del mismo color que el fondo de la página. Por ejemplo, si nuestra página tiene un fondo de color gris #CCC, en lugar de utilizar un PNG con fondo transparente, podremos utilizar un JPG con un fondo de color #CCC y crearemos un JPG con un tamaño muy inferior al del mismo PNG con fondo transparente.
Si necesitamos imágenes con animaciones, podemos utilizar tanto GIF como PNG (APNG, aunque no muy usual). De hecho, se han puesto muy de moda últimamente los GIF animados, volviendo la misma tendencia que a finales de los 90. Pero si la animación es muy grande, en ocasiones deberemos de pensar en cambiarla por un formato de vídeo sin audio y podremos tener un MP4 de menor peso que un GIF animado del mismo tamaño.
Nuevos formatos
Vamos a ver ahora los nuevos formatos, también llamados formatos de nueva generación, que en realidad no son tan nuevos3.Tanto el formato WebP como el formato AVIF soportan imágenes con color verdadero, compresión, transparencia y animaciones, siendo la compatibilidad de WebP mayor que la de AVIF, pero soportando una mejor comprensión y calidad resultante en el formato AVIF. Por lo que podemos tener ambos formatos y servir las imágenes en formato AVIF y, en caso de que el navegador del usuario no tenga soporte, alternativamente servirle la imagen en formato WebP, para lo cual podemos utilizar un par de técnicas diferentes.
Si queremos ver el efecto de no soportar los nuevos formatos en los navegadores de nuestros clientes, podemos emular el que no se soporten dichos formatos desde las herramientas de desarrollo de nuestro navegador.
Color verdadero24 bits (8 bits por canal)Hasta 48 bits (16 bits/canal)8 bits (256 colores máx.)
TransparenciaNoCanal alfa de 8 bits1 bit (sí/no)
CompresiónCon pérdida (alta eficiencia)Sin pérdida (calidad óptima)Sin pérdida (limitada a 256 colores)
AnimacionesNoNo (excepto APNG)Sí (hasta 256 colores por frame)
Tamaño típicoPequeño (ideal para fotos)Grande (gráficos precisos)Pequeño (animaciones simples)
Velocidad decodificaciónRápidaModeradaRápida
Casos de usoFotografías, imágenes complejasGráficos con transparencia, logosAnimaciones simples
Formatos clásicos
Color verdadero24 bits (8 bits/canal)Hasta 16 bits/canal + HDR
TransparenciaCanal alfa de 8 bitsCanal alfa ajustable + mejor preservación
Compresión con pérdida~30 % mejor que JPEG~50 % mejor que JPEG
Soporta animacionesSí (similar a GIF)Sí, pero con adopción limitada
Velocidad de decodificaciónMás rápidaMás lenta, pero optimizable
Soporte96,82 % https://caniuse.com/webp 94,59 % https://caniuse.com/avif
Formatos de nueva generación
Esto es lo ideal cuando vamos a mostrar gráficos que se pueden representar por medio de esta fórmula, pero no es adecuado para fotografías ni para casos más complejos; aun así, debemos de tener en cuenta que, dependiendo de cómo se haya creado el SVG, puede optimizarse mucho más, para lo que tenemos herramientas que nos permiten simplificar dichas fórmulas y los datos del SVG disminuyendo su peso, como por ejemplo https://svgomg.net/4
Acciones a realizar
Una vez vistos los términos básicos de tamaño y peso y los diferentes tipos de imágenes, primero, debemos identificar el tipo adecuado de imagen que queremos mostrar, ya sea en formato GIF, PNG, JPG o preferiblemente los formatos de nueva generación WebP y AVIF.Una vez elegido el tipo adecuado de cada imagen a mostrar, debemos seleccionar el tamaño que necesitamos para dicha imagen. No es lo mismo que vaya en la cabecera de página al ancho completo de la misma o que sea una pequeña imagen ilustrativa que mostraremos en medio del texto.
Y por último, una vez que ya tengamos seleccionado el tamaño adecuado de la imagen y el tipo de imagen para lo que queremos mostrar, deberemos de optimizar el peso del archivo para que esa imagen resultante que hemos generado y nos pesa 600 kB, las subamos con una compresión adecuada y la misma imagen acabe pesando 150 kilobytes.
Este es un proceso que podemos hacer previo a la subida de la imagen desde nuestro ordenador o desde servicios online para subir la imagen en el tamaño adecuado.
También podemos delegar este trabajo en plugins instalados en nuestro WordPress que se ocuparán de limitar las dimensiones máximas del archivo, optimizar el peso del mismo mediante la compresión y generar los diferentes tipos de imágenes según la compatibilidad que tenga nuestro usuario final, creando así, por ejemplo, a partir del archivo JPG original, las versiones en diferentes dimensiones de ese archivo, las versiones en formato WebP y las versiones en formato AVIF.
Estas conversiones se pueden realizar directamente en nuestro hosting, es decir, en local, o el plugin puede solicitar dichas conversiones a un servicio de terceros especializado que lleve a cabo dicho trabajo y finalmente nos sirva los archivos para guardar en nuestro hosting. Cada una de estas dos opciones tiene sus ventajas y sus desventajas.
Los servicios de terceros suelen estar más optimizados y realizar dichas optimizaciones de una manera más rápida y además nos libran de las tareas de proceso sin ralentizar nuestro servidor y pudiendo ocuparse de otras tareas mientras se convierten las imágenes.
Si la conversión la realizamos directamente en nuestro hosting nos evitamos tener que pagar cuotas por dichas conversiones, pero a cambio puede que no obtengamos una optimización tan alta como las de servicios externos. Además, si estamos convirtiendo muchas imágenes, puede que ralenticemos nuestro hosting o que incluso en algún momento se pueda parar en medio del proceso y tengamos que reiniciar dicha conversión. Esto suele pasar más cuando convertimos un sitio web que ya cuenta con muchas imágenes y tenemos que hacer un gran trabajo inicial de conversión. No tanto en las conversiones del día a día, cuando publicamos un post que puede tener dos imágenes, veinte o cuarenta imágenes y no estamos tratando con una conversión inicial con varios miles de imágenes.
Para la conversión de imágenes en local, nuestro hosting debe tener instaladas las librerías de PHP GD o preferiblemente Imagick (más rápida y con más opciones). Hay que tener en cuenta que las versiones de Imagick previas a la 7, no gestionan bien la conversión de transparencia de PNG a AVIF.
El servidor configura las extensiones para el formato AVIF y para el formato WebP.
Se comprueba si la petición HTTP acepta el MIME Type de imagen AVIF; si no lo acepta, se vacía esta variable.
Se comprueba si la petición HTTP acepta el MIME Type de imagen WebP; si no lo acepta, se vacía esta variable.
Verificamos si la petición está en el directorio wp-content y si la extensión es de un archivo JPEG, PNG, GIF o WebP.
En caso de que se cumpla la condición 4, miramos si existe el mismo archivo en otra ruta predefinida por el plugin con la extensión AVIF, si la petición HTTP la soporta, si no con la extensión WebP en caso de soportarla.
Servimos el archivo alternativo, aunque en el navegador se mostrará el archivo original, pero con el nuevo MIME Type.
El código de, por ejemplo, un servidor Nginx, sería similar al siguiente (con variaciones según cada implementación):
Lazy loading
El Lazy loading de imágenes o carga diferida hace que las imágenes que no están a la vista del usuario no se carguen cuando se accede a la web, sino que se cargarán cuando la página lo necesite, es decir, cuando el usuario realice scroll y la imagen aparezca en pantalla.En el pasado se han implementado muchas técnicas para realizar esta carga diferida, pero en la actualidad, los navegadores ya lo soportan nativamente5 y consecuentemente, WordPress lo implementa de forma nativa mediante el atributo loading="lazy" en las imágenes (desde la versión 5.5).
Algunos plugins implementan el Lazy loading utilizando diferentes técnicas, en ocasiones más efectivas. Podemos realizar pruebas para ver si nos ofrecen alguna mejora respecto al método nativo.
Pero en ocasiones podemos tener una imagen que está siendo retarda su carga y no debería al pertenecer al LCP (Largest Contentful Paint). En estos caos donde nuestro LCP empeora por culpa del Lazy Loading, deberemos pre cargar dicha imagen, pero esto ya entra en las técnicas de un futuro artículo sobre optimización para las Core Web Vitals.
Plugins de optimización de imágenes
Hay multitud de plugins para la optimización de imágenes, tanto gratuitos como de pago. Los plugins de optimización de imágenes ofrecen técnicas como la conversión a formatos AVIF y WebP para mejorar la compatibilidad y la eficiencia o redimensionado de imágenes junto con opciones de Lazy loading.Antes mencionamos un par de técnicas para mostrar las imágenes AVIF y, en caso de que el navegador no las soporte, mostrar la imagen WebP.
Pues bien, una de estas opciones es mostrar la imagen original ya sea el archivo JPG o PNG, pero desde el servidor cambiar el tipo mime type de archivo a servir y en realidad estar sirviendo un archivo AVIF. Si el navegador del cliente no soporta dicho formato, entonces le serviremos la imagen en formato WebP.
Esta técnica tiene muchas ventajas, ya que no modificamos la ruta de los archivos originales y es muy fácil en caso de que queramos dejar de servir los archivos en formato AVIF o WebP que quede todo tal cual estaba. Estaremos sirviendo los archivos en los nuevos formatos desde otras carpetas, con lo cual no cambiaremos para nada la estructura actual de cara al cliente, aunque en el servidor estén en diferente ruta. Por contra, necesitamos que se puedan crear reglas en el .htaccess (y en LiteSpeed que podamos recargar las reglas), o en el caso de ser un servidor con Nginx, que podamos modificar las reglas del mismo para incluir estos cambios en el servidor.
Otra opción, sin tener que tocar nada en el servidor, es reescribir el HTML donde se sirven las imágenes y cambiar el tag img (la etiqueta de la imagen en el código HTML) por un tag picture con los diferentes tipos de imagen.
Vamos a ver ahora tres de estos plugins del repositorio público de WordPress:
AVIF, WebP Converter: Gratuito, conversión en local tanto formato WebP como AVIF.
Imagify: Opción gratuita (20 MB/mes) o pago fijo por mes con un buen plan de precios. Soporta tanto WebP como AVIF.
Converter for Media: Opción gratuita para WebP, AVIF solo en la versión de pago con planes anuales.
En el repositorio de WordPress podemos encontrar cantidad de opciones para optimizar el tamaño, compresión y tipos de archivos. Algunos son totalmente gratuitos (como el primer plugin que mencionamos), la gran mayoría disponen de opciones gratuitas y otras reservadas solo al plan de pago.
Deberemos tener en cuenta el tipo de servidor/hosting que tenemos, el control que tenemos sobre el mismo, su potencia para realizar la conversión en local o delegarla en servicios de terceros y el número de imágenes a convertir de nuestra web o de nuestros clientes si somos una agencia o un freelance. Además, en los planes de pago, deberemos tener en cuenta si lo vamos a utilizar solo para nuestra web o para varias webs de clientes de nuestra agencia, por lo que deberíamos buscar planes más extensos o ilimitados.
Photon y similares
Jetpack dispone del servicio Acelerador de sitios (antes conocido como Photon) que nos sirve las imágenes desde cuatro dominios diferentes (i0.wp.com, i1.wp.com, i2.wp.com, i3.wp.com) para imágenes GIF, PNG y JPG y también nos servirán las imágenes en la versión WebP aunque no cambiará la extensión de la misma6.
Por ejemplo, la siguiente imagen de 4000 píxeles de ancho (imagen de Matt Mullenweg) https://i0.wp.com/s.ma.tt/files/2012/06/DSC01205.jpg podemos mostrarla directamente a 600px de ancho https://i0.wp.com/s.ma.tt/files/2012/06/DSC01205.jpg?w=600 sin necesidad de descargar la imagen original de grandes dimensiones y solo con un parámetro en la URL (w=600), o si la mostramos en una lista de miniaturas, por ejemplo, mostrar su versión de 100 píxeles de altura https://i0.wp.com/s.ma.tt/files/2012/06/DSC01205.jpg?h=100 o incluso una versión en escala de grises de 500 píxeles de ancho y una calidad de 70 https://i0.wp.com/s.ma.tt/files/2012/06/DSC01205.jpg?w=100&filter=grayscale&quality=70
Al poder servir imágenes redimensionadas al vuelo y que sean del tamaño correcto sin un peso superfluo, podremos enviar a destino imágenes de diferentes dimensiones según el uso final de la imagen, ya que no es lo mismo servir una foto que se muestre al ancho de pantalla en un dispositivo de alta resolución que en un móvil pequeño.
Tenemos multitud de parámetros para aplicar individualmente o combinados (tamaños, calidad, zoom, recortes, filtros, etc.), todos disponibles y muy bien documentados en https://developer.wordpress.com/docs/site-performance/site-accelerator-cdn/
Podemos utilizar el servicio del Acelerador de Sitios gratuitamente simplemente con el uso del plugin Jetpack o en el hosting de WordPress.com que lo habilita por defecto. Este servicio no dispone de salida de imágenes en formato AVIF.
Otro servicio similar es Cloudinary con cantidad de opciones y una buena API para la conversión, pero aunque dispone de una opción gratuita, las opciones de pago ya parten de unos $90 por mes.
También tenemos la opción de Cloudflare Images con un excelente rendimiento, aunque es de pago por uso (según las imágenes servidas cada mes). Como ventaja, tenemos el que soporta el formato AVIF.
Conclusión
Como hemos podido ver, para realizar una correcta optimización de las imágenes de nuestra web debemos tener en cuenta:Las dimensiones a las que se debe mostrar la imagen.
El tipo de imagen de la que se trata para poder utilizar el tipo de archivo adecuado.
El dispositivo en el que se visualizará (móvil portátil, pantalla de alta densidad, etc.).
La compresión que tendrá la imagen.
Los tipos de imágenes de última generación con menores pesos a la misma o incluso mayor calidad.
Si la imagen se mostrará en la primera vista de pantalla (above the fold) o cae fuera de esa primera vista y formará parte del Lazy loading.
Un buen valor de LCP debe ser de menos de 2.5 segundos.
Fuentes:
– HTTP Archive (2023): La mediana de bytes de imágenes por página es de 2,300 KB, con un promedio de ~70 imágenes por sitio.
– Web Almanac (2022): Las imágenes representan el 39 % del peso total de una página web en dispositivos móviles.
– Akamai (2020): El 75 % de los sitios usaban imágenes sin optimizar, aumentando tiempos de carga un 20-30 %
El formato WebP está disponible desde septiembre de 2010 y el formato AVIF desde el año 2018.
Licencia MIT https://github.com/jakearchibald/svgomg
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#loading
Como comentamos anteriormente, cambiará el MIME Type de la imagen para servir la versión WebP, aunque en la URL se muestre la imagen y extensión originales.
Fuente: este post proviene de Masters , donde puedes consultar el contenido original.
¿Vulnera este post tus derechos? Pincha aquí.
Creado: