Blog

Optimizar las imágenes de tu web es fundamental para poder contar con una velocidad de carga óptima para los navegadores y usuarios. Y es que hay que considerar que solo las imágenes de una web suelen representar hasta el 50% del peso de una web.

Sinceramente, no sirve de nada tener los mejores plugins, theme, SEO y estrategia si nuestro sitio tarda siglos en cargar. Lo peor de todo es que la era del móvil ha llegado para quedarse, por lo que Google y los demás exploradores están cada vez más enfocados a este tipo de dispositivos.

Según estudios, cerca del 37% de la población accede a internet utilizando un móvil, desplazando al ordenador y portátiles en segundo y tercer lugar respectivamente.

De hecho, Google se ha puesto serio con el tema y en julio de 2018 había lanzado una actualización en la cual anunció que de ahora en adelante el posicionamiento de una web para móviles se vería afectado por la velocidad de carga.

Las personas desean poder encontrar respuestas a sus preguntas lo más rápido posible; los estudios de Think With Google demuestran que a las personas realmente les importa la velocidad de una página. – Google.

Esto fue un duro golpe para los webmasters, sin embargo, se puede reducir los tiempos de carga de un sitio. La forma más sencilla es optimizar las imágenes.

Factores críticos en la optimización de imágenes

Antes de empezar con la optimización hay que tener bien claros algunos conceptos básicos en las imágenes para conseguir los mejores resultados posibles. Existen 4 factores fundamentales a analizar antes de optimizar una imagen y estos son:

El tamaño

Uno de los mayores problemas de sitios webs es que suelen elegir el tamaño incorrecto. Normalmente hay dos casos:

• La imagen es muy grande: Imagina que subes una imagen a tu blog de 1280 x 720 pixeles, pero el formato de tu blog solo soporta imágenes de 640 x 400. El tamaño de la imagen se redimensionará según sea necesario, pero el peso seguirá siendo el mismo. Es decir, estarías gastando el doble de recursos para mostrar la misma imagen, lo que retrasa la carga de la web.
• La imagen es muy pequeña: A nadie le gustan las páginas lentas, pero si fijas imágenes demasiado pequeñas es posible que tus lectores no puedan verlas.

No podemos decirte un tamaño máximo, pero sí que lo ideal es que haya cierta armonía entre ambos puntos. Una imagen ligera no tiene porqué ser de baja calidad.

El formato

Existen diferentes formatos de imágenes, aunque los más populares son JPEG, PNG y GIF:

• JPEG: El formato ideal para las imágenes para la web y fotografías por su posibilidad de ser comprimidas hasta 100 veces. Tiene un cierto margen de pérdida de calidad.
• PNG: Un poco más pesada, pero idónea para gráficos, logos e ilustraciones que cuenten con transparencias. No son muy recomendadas para la web por su peso.
• GIF: Perfectas para las imágenes en movimiento con colores limitados. Debido a su peso, debería limitarse su uso para web.

El peso

Decirte que existe un peso ideal para las imágenes sería mentirte. En realidad, es imposible dar un peso ideal aproximado por imagen, ya que esto depende tanto del tamaño de la imagen como de la calidad a utilizar.

Sin embargo, algunos especialistas SEO afirman que:

• Para el PC, las imágenes no deberían pesar más de 500 KB – 1 MB.
• Para el móvil, las imágenes no deberían pesar más de 99 KB para agilizar la carga en redes 3G y 4G.

Lazy Load

Existen dos tipos de carga utilizadas para un sitio web: síncrona y asíncrona. Con regularidad, los sitios optimizados utilizan cargas asíncronas que permitan cargar las imágenes conforme se vayan necesitando.

De esta forma, toda la carga de las imágenes y scripts de un sitio web no cargan desde el inicio, sino solamente cuando sea completamente necesario y una vez el contenido esté a la vista del lector.

Cómo optimizar imágenes para la web

Ya tenemos en claro que tener imágenes optimizadas es importante ¿No? Ahora es momento de aprender cómo optimizar las imágenes para la web. Tranquilo, se trata de una labor bastante simple, te explicamos por varios métodos:

Adobe Photoshop

Una de las formas más prácticas para optimizar imágenes para la web es utilizar el archiconocido Photoshop para esta labor. Para hacerlo, solamente tienes que seguir los pasos:

1. Abre el archivo a optimizar.
2. Presiona Archivo > Guardar para web…
3. Elige el formato deseado y elige en la barra de calidad el margen de compresión, entendiendo que va de 0 a 100 y mientras más alto es el número, mayor será el peso de la imagen al igual que la calidad.
4. Si deseas, también puedes utilizar la opción de entrelazado para agilizar la carga de las imágenes.

Nota: Si piensas optar por el formato PNG es recomendable que uses PNG-24.

RIOT (Radical Image Optimization Tool)

Si no quieres liarte con una herramienta con millones de funciones, entonces quizás sea más sencillo para ti utilizar RIOT, una herramienta creada directamente para optimizar imágenes para web desde el ordenador.

Para usarla no tenemos más que:

1. Ejecutar la aplicación en nuestro ordenador.
2. Dar clic en Open para abrir una imagen o Batch para optimizar imágenes por lote.
3. Selecciona el porcentaje de calidad deseado. Se recomienda utilizar 40 a 30% para no afectar la calidad.
4. Presiona Save y elige un nombre para tu archivo o remplaza el existente.

Image Optim

Si usas Mac no desesperes, porque también hay soluciones para este sistema. Image Optim permite optimizar imágenes para web de forma rápida y sencilla con una interfaz bastante simple, pero rápida.

Solo necesitas añadir las imágenes y en un corto periodo de tiempo tendrás las imágenes optimizadas.

Kraken.io

¿Poco espacio en el ordenador? Pues entonces, puedes probar con una herramienta online como Kraken.io. Para utilizarla sigue los pasos:

1. Elige entre Lossy (reducción sin pérdida de calidad), Lossless (reducción con pérdida de calidad) o Expert (Modo Experto).
2. Arrastra las imágenes, impórtalas o da clic para subir las imágenes
3. Espera a que se suban y procesen y presiona el botón Download File para descargar un archivo individual o Download All Kraked Files para bajar todas las imágenes optimizadas.

Puedes consultar a nuestra agencia seo girona en caso que tengas dudas.