Cada vez el usuario tiene menos paciencia durante la espera de la carga de una página web y uno de los factores que puede ralentizar más este momento es la carga de imágenes que no están optimizadas para ello. Por ello, en este artículo quiero explicar cómo optimizar imágenes para web y qué procesos hago antes de publicarlas.
Contenidos
1. Ajusta las dimensiones de la imagen para adaptarlas a la visualización
Cuanto más grande sea una imagen, más información tiene el fichero a descargar y, por tanto, más tardará en estar visible en pantalla. Por tanto, no tiene sentido que carguemos una imagen de 3000px de ancho si el espacio de visualización va a tener un ancho de 600px o 300px en una pantalla de móvil.
Asimismo tampoco deben tener menos ancho que el espacio de visualización ya que el navegador reescalará lo mejor que pueda pero se creará una distorsión en la imagen que hará que reduzca la calidad.
Ajusta las dimensiones de la imagen para que estas sean lo más aproximadas a las máximas del espacio que va a ocupar para obtener la mejor relación posible entre calidad y tamaño.
También hay otro concepto que deberemos tener en cuenta que son los píxeles por pulgada (ppi) que tiene una imagen. Esto es el detalle de información gráfica que contiene por cada punto. Es un valor que cuanto más alto sea, mayor definición puede llegar a tener al imagen. Sin embargo esto no siempre es bueno… Una pantalla tiene límites de visualización y en imágenes reescaladas no es necesario demasiado detalle, ya que esta se omitirá. Por tanto una imagen de más de 72ppi contendrá información en muchos casos irrelevante, por lo que se pueden definir a esta definición máxima.
Considera tener imágenes diferentes para diferentes dispositivos, unas apaisadas para ordenador y otras con el ancho de pantalla móvil y en formato vertical. No siempre es necesario pero en ciertos casos, como imágenes decorativas de fondo, es muy recomendable.
2. Conviértelas al formato más óptimo para cada caso
Existen múltiples formatos de imagen pensados para funcionalidades diferentes y un desarrollador frontend debería conocer el uso más adecuado para cada uno de ellos para sacar el mejor rendimiento final.
El uso del formato correcto puede suponer una gran diferencia en el tiempo de espera de carga de una imagen.
Imágenes web en formato JPG
Este es el formato más común para fotografías e imágenes estáticas con cierta complejidad gráfica. Es el formato más usado ya que está muy optimizado para mostrar fotografías de calidad, con sombras y contrastes.
Cuando se manipulan imágenes JPG se contempla que hay una pérdida de información para disminuir el tamaño del fichero y deberá ajustarse al máximo para que esta sea inapreciable en una pantalla.
Usa formato JPG progresivo
Cabe recalcar que es muy interesante en web que las imágenes JPG que se carguen, se hayan guardado como JPG progresivo en lugar del estándar. Esto hará que la imagen cargue muy rápidamente pero con mala calidad, ocupando todo el espacio de esta, y se define al 100% una vez cargada al completo.
Mediante el método estándar JPG, la imagen se carga línea a línea, cambiando los espacios que ocupa conforme se va cargando y puede crear que los elementos de la web se vayan reubicando de lugar hasta la carga completa, cosa poco agradable para el visitante.
La opción de usar JPG progresivo da mucha mejor experiencia de usuario al no sufrir la reubicación de elementos y dar información gráfica completa desde el primer momento.
Imágenes web en formato PNG
Este formato de imagen tiene dos funcionalidades muy buenas: En imágenes planas, sin texturas, ocupa poco espacio y, al contrario que el JPG, soporta transparencias.
Por tanto para sobreimprimir imágenes con buena calidad, usando un fondo transparente, este formato es ideal. También es muy bueno para imágenes grandes y con pocos colores planos.
El formato WEBP optimiza muy bien tus imágenes
Este es un nuevo formato de imagen creado por Google y pensado para optimizar al máximo las imágenes que podría llegar a ser el sucesor del JPG.
Recomiendo el uso de este formato pese a que no es compatible con todos los navegadores. La diferencia de compresión en muchos casos es muy grande a su favor y con su uso logramos optimizar imágenes web al máximo.
Eso sí, implicará modificar el código de la página para mostrar webp o jpg según la compatibilidad con el navegador.
El formato SVG: Iconos para web
Este es sin duda uno de mis formatos favoritos. A diferencia de los anteriores, no guarda la información de pixels de una imagen, sino que es un fichero editable y define líneas y rellenos que desciben cómo dibujar una imagen.
Este formato no es en absoluto para fotografías ni imágenes medianamente complejas pero es ideal para iconos y formas simples.
¿Y porqué el formato SVG es tan especial para web?
Bueno, lo primero porque es un fichero de código que se puede incluir directamente en el HTML sin tener que hacer peticiones extra al servidor. Cada petición de imagen lleva un tiempo también y penaliza mucho, por lo que si tenemos 20 iconos en este formato, reduciremos en 20 el número de peticiones que se realizan.
Además en pocas líneas de texto cabe la información gráfica de un icono que sería bastante más grande en otros formatos. También al ser instrucciones del tipo «círculo», «ruta»… y no disponer de información gráfica como tal es reescalable a la medida que deseemos sin ninguna pérdida de calidad.
Y una última cosa que lo hace potentísimo es que es manipulable. Se puede definir su aspecto mediante css y, una vez cargado, se puede operar con él reescalando, rotando, cambiando colores o incluso la información gráfica completamente.
Aquí he creado un ejemplo en el que cambiamos colores dinámicamente: ¡Dale al interruptor y se encenderá la bombilla!
Y por poner otro ejemplo, si un día cambia el color corporativo, bastará cambiar la referencia css del SVG y cambiará en toda la web a la vez.
¿Y el GIF?
El GIF fue una revolución en la imagen digital. Permitía tener buena compresión en imágenes sin mucha información gráfica, transparencias y ¡animaciones!
Ahora este formato ha quedado bastante desbancado por los anteriores. Lo he usado en contadas ocasiones para alguna animación pero las animaciones en web no se estilan demasiado y han quedado relegadas por css y vídeos.
3. Optimizar imágenes web reduciendo el peso
Bueno, eligiendo correctamente las dimensiones y el formato parece que bastaría para tener buena optimización pero esto no es así.
Y es que las imágenes guardan mucha información «extra» que se puede eliminar por la poca relevancia en web. ¿Es relevante para el usuario el saber que la foto de un calcetín fue tomada un 3 de mayo en Cantirillas de Arriba con una Canon e ISO 400? Información como esta muchas veces forma parte de la imagen en forma de metadatos.
Los metadatos de una imagen guardan información sobre ubicación, fecha y hora, parámetros, usuarios… del momento que se tomó la imagen, si ha sido manipulada, cuándo, cómo,… Miniaturas de la propia imagen… Un montón de información que en pocos casos es relevante para el visitante de una web y, por tanto, se deberían eliminar.
Personalmente, para optimizar imágenes en este sentido, uso la web https://tinyjpg.com/ para reducir el tamaño de las imágenes pero hay muchísimos más servicios que te lo permiten hacer.
4. Configura tu CMS para optimizar imágenes
Si usas un CMS hay cosas que deberás configurar para sacar el máximo rendimiento a las imágenes.
Cada CMS tiene sus extensiones para lograr cierta optimización de imágenes y deberás encontrar las que te satisfagan más las necesidades del proyecto que estés ejecutando.
Optimizar imágenes en WordPress
WordPress por ejemplo, aunque no los soporta de manera nativa, tiene múltiples plugins para permitir la compatibilidad con los formatos webp o svg. Además tiene otros plugins como Smush que implementa de manera automática muchas de las funcionalidades que he descrito en el artículo.
Otras recomendaciones para optimizar imágenes web
Usa Sprites
El uso de sprites de imagen una técnica laboriosa pero se consiguen buenos resultados. Consiste en ubicar varias imágenes en una sola imágenes que las contenga todas en cuadrículas y mostrar únicamente el espacio de esa imagen que deseemos que sea visible en cada momento.
Con este método se reducen el número de peticiones de imágenes al servidor y se descarga una única cuyo tamaño suele ser menor al de la suma de todas las anteriores.
Eso sí, requiere más tiempo de implementación y maquetación. Este método lo uso en ocasiones para mostrar varios logos en una página web, optimizando bien el tiempo de carga.
Usa Lazyload
LazyLoad permite cargar las imágenes conforme se necesitan en la visualización de la página. De esta manera se cargan únicamente las que están en el espacio visible priorizándolas al máximo y el resto se van cargando bajo demanda conforme se va haciendo scroll en la pantalla.
Es una manera muy óptima de mostrar el contenido realmente necesario lo más rápido posible.
La implementación se realiza únicamente agregando loading=»lazy» a tus <img>
<img loading="lazy" src="dummy.jpg" alt="imagen lazy load" />
Y mi recomendación es no ponerlo en las imágenes que esten a simple vista en la primera carga, ya que puede provocar que no carguen hasta que el usuario haga scroll.
Usa un CDN
El uso de CDNs para el almacenamiento de tus imágenes puede mejorar mucho los tiempos de carga.
Usa imágenes responsivas
Y con ello quiero decir tanto las de decoración css mediante media queries como las que se muestran en el html.
Tal como he comentado antes, las imágenes que se usen como fondo, recomiendo que estén adaptadas al dispositivo por lo que podemos tener:
@media screen and (min-width: 768px)
{
body{background-image:url(imagen-1920px.jpg}
}
@media screen and (max-width: 767px)
{
body{background-image:url(imagen-767px.jpg}
}
@media screen and (max-width: 400px)
{
body{background-image:url(imagen-400px.jpg}
}
Con imágenes en formatos y distribución diferentes según el dispositivo.
Esto en el HTML también lo debemos tener en cuenta y, en este caso, la etiqueta <picture> es nuestra aliada.
<picture class="img-fluid"> <source srcset="img-1200px.webp" type="image/webp" media="(min-width:720px)" class="img-fluid"> <source srcset="img-1200px.jpg" type="image/jpeg" media="(min-width:720px)" class="img-fluid"> <source srcset="img-720px.webp" media="(max-width:720px)" type="image/webp" class="img-fluid"> <source srcset="img-720.jpg" media="(max-width:720px)" type="image/jpeg" class="img-fluid"> <img loading="lazy" src="img-1200px.jpg" alt="Imagen dummy" class="img-fluid"> </picture>
Como podemos ver, en este ejemplo se combina varios puntos descritos anteriormente: uso de responsive, uso de webp y jpg, y uso de lazyload.
Sé que todo lo descrito es costoso pero el uso de imágenes optimizadas pueden hacer que tus landing page sean un éxito. Lo he comprobado en innumerables ocasiones en la que han llegado a mis manos páginas poco optimizadas y 4 cambios de este tipo han hecho subir posicionamiento y mejorar Costes por clic de manera rapidísima.
Espero que este artículo haya sido de ayuda y cualquier comentario al respecto es bienvenido 🙂
