Optimizar las imágenes influye, y mucho, en la velocidad de carga de las webs y esto, a su vez, en la experiencia del usuario y en el SEO.
Ya hemos visto que el uso de imágenes influye mucho en el impacto de tus contenidos y su viralización.
Sin embargo, las imágenes de buena calidad suelen ser de muchos cientos de Kbs, cuando no de algunos «megas» (las que uso de ShutterStock son de 1 Mb mínimo).
Así que tener varias imágenes de gran «peso» va a suponer un lastre a la hora de cargar tus páginas o artículos.
Impacto en la Experiencia del Usuario
Uno de los factores que más influyen en la experiencia del usuario es la velocidad de carga.
Piensa que si tu página tarda en cargarse más de 2 0 3 segundos ya estás perdiendo visitantes.
De hecho, se suele comentar que pierdes un 10% de visitantes cada segundo de retraso.
Aparte que estás consiguiendo que tu visitante ocasional se muestre reticente a volver a tu web.
Por si fuera poco, y a pesar del incremento en los Gbs que las operadoras van ofreciendo, aún hay mucha gente con límites «bajos» de datos (y piensa en otros mercados como el Latinoamericano).
Impacto en el SEO
Y si la velocidad de carga impacta mucho en la experiencia del usuario de tu web, para Google esto es importante.
A tal punto que Google incluye esta variable en el algoritmo que calcula tu posición en la página de resultados.
Por tanto, a mayores tiempos de carga peor resultado obtienes.
Así que vamos a ponernos a optimizar nuestras imágenes
Antes de optimizar las imágenes
En el tema de las imágenes también es importante que cada imagen aporte valor al contenido general.
Es cierto que muchas temáticas implican el uso de un elevado número de imágenes.
Blogs o webs de viajes, moda, gastronomía, etc. basan buena parte de su autoridad en el uso de una gran número de imágenes.
Sin embargo, y como norma general, menos es más.
Por ello, cuando planifiques el contenido, elimina aquellas imágenes que no van a enriquecer y solo van a servir de lastre al resto.
Así que, salvo que tengas una tienda de mascotas, procura evitar las fotos de gatitos adorables 😉 .
Empezamos a optimizar las imágenes
Una vez que ya tenemos las imágenes seleccionadas les vamos a aplicar dos procesos diferentes:
- Reescalado
- Compresión
Reescalado de las imágenes
El primer paso es ajustar el tamaño de la imagen a subir al tamaño realmente necesario para la web.
Una pantalla HD tiene 1920×1080 píxeles y muchas de las imágenes en una web no se van a visualizar a más de 800×600.
Así que el primer trabajo consiste en reescalar la imagen original al tamaño mayor en el que vaya a ser visualizada.
De no hacerlo así, será el navegador el que deba reescalarla, con el consiguiente incremento de tiempo para la visualización.
Y piensa que reducir la imagen a la mitad de tamaño reduce el peso de la imagen por 4.
Por ejemplo, la imagen de esta portada la he descargado de ShutterStock a 4100×2723 píxeles con un tamaño original de 4,53 Mb.
Después de ajustarla para la web a 903×600 pesaba unos 300 Kb.
(Normalmente las descargo a 1000 píxeles).
Compresión de la imagen
Una vez que tenemos la imagen ajustada de tamaño vamos a comprimir la imagen.
Los formatos habituales, JPG, PNG, etc., ya son formatos comprimidos.
Piensa que una imagen de 1920×1080 sin comprimir ocuparía un mínimo de 7 megas, mientras que un JPG equivalente ocuparía entre 1 y 2 megas.
Esta compresión siempre implica una cierta pérdida de calidad, pero si la mantenemos dentro de unos márgenes no es muy apreciable.
Personalmente suelo ajustar la calidad al 94% y la reducción de tamaño puede ser más que notable.
En el caso de la imagen de portada ha pasado de los 300 Kb a 122 Kb.
El peso de la imagen original se ha reducido mas de 37 veces y, sin embargo, en la web apenas notarías diferencia de calidad.
Multiplica esto por cada imagen y verás que el ahorro conseguido puede ser increíble.
Herramientas para optimizar las imágenes
Tienes varias opciones:
Programas de retoque fotográfico. Entre los más conocidos tienes:
- Photoshop. El más clásico.
- Gimp. Gratuito. El clásico de la comunidad de desarrolladores GNU
- Photoplus. Una versión interesante a un precio razonable.
Aplicaciones web:
- TinyPNG, Yo uso su plugin para wordpress, por debajo de 500 compresiones/mes es gratuito y caza las imágenes al vuelo.
- Kraken. Tiene versiones gratuita y de pago.
- Image optimizer. Gratuito y de muy fácil uso.
Otras opciones:
- Flickr. Por cada imagen que subes crea diferentes tamaños (los más habituales) y las optimiza para su visualización en la web.
Una vuelta más en la optimización de las imágenes: la carga en paralelo
Porque no todo es ajustar el tamaño, también puedes optimizar la carga de la página mejorando la carga de las imágenes.
Para ello puedes recurrir a:
Jetpack
Si usas WordPress el plugin Jetpack tiene una opción llamada «Photon» que no es otra cosa que un CDN en el que almacenar las imágenes y servirlas desde ahí.
Es una funcionalidad gratuita y mejora el rendimiento de carga.
Almacenar las imágenes en otro dominio
Una variante, si no quieres instalar Jetpack, consiste en utilizar otro dominio (o subdominios) para el almacenamiento de las imágenes.
Por ejemplo, podría crear un subdominio (no lo busquéis que no existe) llamado «imagenes.davidgomez.eu» y guardar ahí las imágenes para luego llamarlas desde el blog o la web.
De esta forma, el sistema seguirá atendiendo el resto de llamadas al servidor mientras las imágenes son cargadas en paralelo.
Y recuerda siempre, mejor pocas imágenes y buenas que muchas y de mala calidad.
Bueno, hasta aquí este artículo dedicado a la optimización de las imágenes.
Seguro que tu conoces algún otro truco o has usados otras aplicaciones. ¿Nos comentas tu experiencia con ellas?
Nos vemos
Y si necesitas ayuda ¡anímate y contacta conmigo ahora!
Descubrirás todo lo que tu negocio puede mejorar con el Marketing Digital (y sin ningún compromiso).
Si te ha parecido interesante ¿me ayudas compartiéndolo en tus redes sociales? Muchas gracias.
Derechos de imagen de portada por Shutterstock