La velocidad de carga de una web es uno de los factores más importantes de la optimización de nuestro sitio web. Desde Google han mostrado abiertamente en numerosas ocasiones que cada vez prestan más atención a este factor y que, por tanto, es uno de los múltiples factores de SEO On Page que afectan al posicionamiento de nuestros sitios web. En este sentido, la optimización de imágenes tiene mucho que decir ya que estos elementos son, junto con los vídeos, los recursos más pesados y, por lo tanto, los que más pueden afectar al rendimiento de nuestro proyecto online.
Contenidos
Optimización de imágenes: dimensiones
Cuando hablamos de la resolución óptima de una imagen, es importante destacar que uno de los principales problemas que nos encontramos en multitud de sitios web es que las imágenes se muestran a un tamaño menor que las «dimensiones reales» de la propia imagen. Esto hace que, si por ejemplo mostramos una imagen en pantalla a 100*100px, pero la imagen realmente tiene 200*200px (y pesa lo que ocupa ese tamaño), estaremos desperdiciando una posibilidad de reducción de peso importante.
Veamos mejor un ejemplo gráfico:
Esta es una web que muestra dos imágenes. Una a la izquierda y otra a la derecha. Si nos centramos en la imagen de la izquierda, observamos que encaja perfectamente y su nitidez es indiscutible.
Si indagamos en el código fuente a través del inspector de elementos del navegador, observamos lo siguiente:
La imagen tiene una «dimensión o tamaño real» de 600*499 píxeles. Pero, ¿es necesario que tenga esas dimensiones para ocupar todo el contenedor en el que está insertado? Indaguemos un poco más:
En rojo observamos que la imagen tiene el tamaño real antes mencionado. En verde, hemos marcado el estilo CSS que tiene asociado a la imagen, donde se ve claramente que las dimensiones pueden ir variando dependiendo del dispositivo desde el que accedamos a esta web.
.estilo-de-imagen { min-width: 100%; max-width: 100%; height: auto; }Es necesario que la imagen tenga esa flexibilidad y se adapte a todas las resoluciones de pantalla posibles. No obstante, ojo con el exceso de tamaño que le metemos para suplir esa necesidad de adaptación.
Nos queda por comprobar un último punto.
¿Cuánto espacio ocupa el «contenedor de la imagen«?
Usando una vez más el inspector de elementos del navegador, descubrimos lo siguiente:
El «tamaño del contenedor» es menor que la «dimensión real de la imagen»:
Contenedor= 467*388 píxeles
VS.
Dimensión real= 600*499 píxeles
Hay un exceso de tamaño en la imagen respecto a su contenedor. Estamos sobre-cualificando las imágenes con exceso de calidad y esto, repercute directamente sobre el peso de las imágenes y, por tanto, sobre la velocidad de carga de la web.
Si tenemos en cuenta que esta falta de optimización puede extrapolarse a todas las imágenes de una URL, es cuando empezamos a ser conscientes de la cantidad de peso que podríamos ahorrarnos y la velocidad que podríamos ganar si lo hiciésemos. Por lógica, si sumamos esta circunstancia al cómputo de peso de todas las URL de un sitio web, el descalabro puede ser importante.
Por ese motivo, antes de utilizar uno de los compresores de imágenes que veremos a continuación, es importante adecuar las dimensiones de la imagen al tamaño máximo al que vayamos a mostrarla en nuestra web.
Optimización de imágenes: peso
En cuanto al peso: elegir adecuadamente el formato de las imágenes es fundamental. En este sentido, Google recomienda formatos que denomina «de próxima generación» en la propia herramienta de PageSpeed Insights
Los formatos JPEG 2000, JPEG XR y WebP comprimen mejor las imágenes que los formatos PNG o JPEG, lo que hace que se descarguen más rápido y consuman menos datos.
Google PageSpeed Insights
Como afirma Google estos formatos ofrecen una gran compresión de imágenes pero tenemos que tener en cuenta que pueden no ser la mejor opción en según qué navegadores. A continuación os dejamos acceso directo a las tablas de compatibilidad de cada uno de ellos:
Como se puede ver en estas tablas de compatibilidad, por mucho que estos formatos tengan un mayor grado de compresión sin pérdida, no son, por ahora, aceptados por la gran mayoría de navegadores.
Por suerte, tenemos a nuestra disposición multitud de herramientas de compresión de imágenes que pueden facilitarnos la vida a la hora de reducir el peso de nuestras imágenes, sin reducir la calidad de las mismas.
Por lo que, por ahora, tocará seguir usando los formatos tradicionales para evitar problemas de compatibilidad, realizando la optimización de imágenes con compresores de imagen como los que veremos a continuación.
Optimización de imágenes: formatos
Uno de los principales factores a tener en cuenta es el formato. Hoy día, los formatos .jpg y .png son ampliamente conocidos pero ¿cómo distinguimos qué formato es el más adecuado para cada imagen? Veamos una comparativa de estos dos formatos tan usados a nivel de compresión y transparencia.
PNG vs JPG: Compresión
Las imágenes que mostramos en una web se descargan desde el servidor o hosting propio o externo. Estas llamadas a recursos como imágenes llevan tiempo por mínimo que sea, lo que hace que tome relevancia, una vez más, el peso de las imágenes para conseguir que éstas puedan ser mostradas rápidamente y evitar así la exasperación del visitante.
.JPG
- El formato JPG es un buena buena opción a la hora de optimizar nuestras imágenes web dado que permite comprimir hasta 10 veces el peso de una imagen.
- El formato JPG ayuda a guardar imágenes con muchos matices de color a un tamaño del archivo muy ligero, siendo ideal para sitio web de alto contenido visual.
- Siendo conscientes de que es un formato comprimido, hay que asumir una pérdida mayor o menor de calidad al convertir la imagen a dicho formato. En función del grado de compresión que utilicemos, sufriremos mayor o menor pérdida.
- La recomendación habitual es no usar optimizaciones inferior al 70% de calidad. Buscaremos llegar a obtener imágenes de menos de 150KB de peso y la calidad suficiente para visualizarse desde cualquier dispositivo desde el que se acceda a la web.
.PNG
- A su vez, PNG es un formato de imagen sin pérdidas de calidad. Por mucho que guardemos la imagen una y otra vez, mantiene la cantidad de colores de origen por lo que no pierde calidad salvo que quitemos cantidad de los mencionados píxeles de colores.
- Este es formato sin compresión de información de colores más utilizados en el desarrollo web. Es muy útil para fondos de colores planos, iconos o gráficos.
- No suele ser recomendable para mostrar fotografías, pues su método de optimización sin reducción información de colores hace que las imágenes pesen más en este formato.
PNG vs JPG: Transparencia
.JPG
- El formato JPG no admite transparencias. El fondo de una imagen en formato .JPG siempre tendrá un color.
.PNG
- El formato PNG es el más adecuado para imágenes con transparencia. Es capaz de contener 8 bits de información adicionales en cada píxel, siendo óptimo para crear gráficos sin un fondo de color determinado.
- Recordar que las imágenes transparentes ocupan más KB, por que siempre serán imágenes con mayor peso en bits. Por su parte, el formato JPG no admite transparencia.
- Es un formato óptimo para imágenes que contienen caracteres de texto. Su método de compresión sin pérdida, hace que respete los bordes de las tipografías sin mezclar colores con los píxeles adyacentes. Además, en este formato, las imágenes con texto pesan mucho menos que en .JPG.
Compresores de imagen: Optimizando imágenes para la web
En internet encontramos multitud de herramientas que nos permitirán reducir el peso de imágenes y vectores de diferentes formatos. A continuación comentaremos algunas de las que mejor interfaz web de forma que sean utilizables desde cualquier sistema operativo o navegador web.
TinyJPG + TinyPNG
En su propio sitio web nos cuentan que utilizan técnicas de compresión inteligentes para reducir el peso de los archivos. Al reducir selectivamente el número de colores de la imagen, se necesitan menos bytes para almacenar los datos. Este tipo de compresión hace que, aunque el efecto visual sea casi invisible, se note mucho en el descenso de peso del archivo tratado. El funcionamiento es muy sencillo, únicamente deberemos arrastrar imágenes en lotes de un máximo de 20 elementos a su interfaz web, esperar a que la procesen y descargarnos el resultado final.
Además de la interfaz web, cuentan con un plugin de pago que permite realizar la optimización de imágenes en Photoshop y un plugin de WordPress que permite hacer lo propio en el CMS más utilizado del mundo.
Kraken
Esta herramienta de compresión de imágenes cuenta con una interfaz diferente a la anterior, pero su funcionamiento es muy similar, aunque cuenta con alguna opción de configuración extra. Así como TinyJPG no permite elegir el modo de compresión de las imágenes, Kraken nos permite elegir entre tres modos de optimización:
- Lossy: optimización de imágenes inteligente que habitualmente reduce el peso de las imágenes en un 60%. Está diseñado para producir imágenes de muy buena calidad y sin una pérdida de calidad que pueda notarse. Es el modo que recomiendan para la gran mayoría de usuarios.
- Lossless: este modo permite la reducción de tanto peso de archivo como sea posible sin tocar ni un solo píxel. Es decir, permite una reducción de peso algo menor que el modo lossy, pero las imágenes no perderán calidad alguna.
- Expert: este modo para usuarios más avanzados permitirá establecer diferentes niveles de calidad para optimización de imágenes manteniendo los datos EXIF de las mismas.
Aunque cuentan con una interfaz gratuita para su uso, su modelo de negocio está más orientado a la optimización de imágenes en lote en sus planes de pago. Para ello cuentan con una API de optimización y una infraestructura dedicada, además de con plugins para WordPress y Magento.
Compressor.io
Esta herramienta nos permite optimizar nuestras imágenes y tiene soporte para 4 tipos de archivo diferentes: JPEG, PNG, GIF y SVG. Con dos tipos de compresión: Lossless o lossy
Listado de compresores de imágenes
Aunque a lo largo de este post hemos hablado de 3 herramientas, os dejamos a continuación un listado más extenso de compresores para que podáis probar y comparar.
¿Problemas al optimizar tus imágenes o tu velocidad de carga?
Si tienes problemas con la optimización, te da miedo, o desconoces cómo hacerlo, no dudes en ponerte en contacto con nosotros.
Siempre cabe la posibilidad de que tu proyecto web no sea fácil de adaptar a los estándares que, cada vez más, exigen tanto los buscadores, los navegadores, como los propios usuarios. Entendemos que las webs que no tienen un mantenimiento continuo están más expuestas a quedarse obsoletas con rapidez.
Si necesitas ayuda, o tienes dudas…
o