Me piro vampiro’. Eso es lo que dirán los usuarios de tu web si tarda demasiado en cargar. Cada segundo que tarda una web en cargar supone una reducción del 7% en las ventas, un 11% menos de visitas y una disminución del 16% en el grado de satisfacción del cliente.
Pero eso no es todo. ¿Sabías que uno de los factores que Google tiene en cuenta para el posicionamiento de tu web es precisamente su velocidad de carga?
Pues ahora ya lo sabes. Así que, tanto si quieres mejorar la experiencia de usuario como el SEO de tu web, la solución pasa por optimizar las imágenes para web.
¿Qué no sabes cómo hacerlo? Anda, vente alma cándida, que te lo contamos todo, todito todo.
Buenas prácticas para subir imágenes para web
Cuando hablamos de optimizar las imágenes de tu web no solo nos referimos a mejorar el rendimiento de tu web, sino también a facilitarle su lectura a Google. What? ¿Google lee las imágenes de mi web?
Pues sí. Y, aunque dicen las malas lenguas que el superbuscador ya es capaz de interpretar y analizar el contenido gráfico, existen unos campos específicos para incluir esa información.
El atributo ‘Alt’, por ejemplo, es el texto alternativo que mostrará Google en caso de que la imagen no pueda cargarse o el equipo cuente con sistema de audiodescripción para personas ciegas. Es decir, es la representación escrita de la imagen y, sorpresa, también posiciona. De modo que, si quieres ser más inclusivo y, a su vez, rascar unos puntitos más para SEO, cambia el texto que viene por defecto en el campo ALT por otro que defina el contenido de la imagen y sea entendible para humanos.
Otro truquito para optimizar las imágenes de tu web para SEO es añadir una descripción adicional gracias a la etiqueta TITLE. Así como el campo ALT es obligatorio y en caso de que no lo edites Google usa el título original de la foto (suelen ser números sin mucho sentido), el campo TITLE o Descripción viene vacío por defecto, por lo que te recomendamos añadir una descripción que incluya las palabras clave que más te convengan y tengan relación la imagen, claro. Pero procura que tenga sentido porque es el texto que aparecerá al pasar el cursor por encima de la imagen.
Ahora bien, para optimizar la velocidad de carga de tu web, empieza por reducir el tamaño de las imágenes y subirlas al servidor, ocuparán menos espacio y se reducirá el tiempo de carga.
5 herramientas para comprimir imágenes para web
Según las estadísticas de HTTP Archive, las imágenes representan el 21% del peso total de una página web, por lo que reducir su tamaño puede ser un buen punto de partida para optimizar su rendimiento
Hoy en día puedes conseguir grandes resultados con cualquiera de estas herramientas online:
Con un ratio de compresión de hasta un 60% y tan sencillo como arrastrar hasta su página principal los archivos que desees comprimir. Compatible con imágenes en formato JPEG o PNG.
Reducción de hasta 15 imágenes por conversión, ya sean en formato JPEG, PNG o GIF, hasta un 74% sin necesidad de registro.
Permite reducir hasta 20 imágenes en JPEG, PNG o GIF de forma rápida y sencilla.
Reducción de hasta un 80% manteniendo al máximo la calidad de la imagen y con la posibilidad de acoplarse a Photoshop.
Tan fácil de usar como Shrink Me, pero aumentando la compresión a un 90% y reduciendo el tamaño máximo de la imagen original a 10 MB.
Eso sí, sí utilizas Photoshop o Illustrator como herramientas para reducir el tamaño de las imágenes, mejor que mejor. Es más ¿Conoces el plugin lazy load? Con él podrás conseguir que las imágenes web se carguen a medida que el usuario hace scroll por tu página, también conocido como “carga diferida”. ”
Te dejamos por aquí enlace al mejor lugar en el que informarte sobre este aspecto y sus buenas prácticas: Guidelines de Google.
¿Te has quedado con la copla? Perfecto, porque ahora que conoces las herramientas para optimizar el tamaño de las imágenes de tu web es cuando llega la pregunta del millón:
¿Cuál es el tamaño idóneo para que una imagen no pierda calidad ni pese demasiado?
Cuanto más reducimos una fotografía más definición pierde, por eso hay muchas personas que son reacias a hacerlo. Pero el truco está en encontrar el equilibrio.
Por lo general, el tamaño recomendado al optimizar imágenes para web se sitúa alrededor de los 100 KB si se trata de fotos pequeñas, 200 KB si son de tamaño medio y 500 KB para las grandes.
Lo único que debes tener presente es que el peso total de la web no supere nunca los 2 MB, en cuyo caso deberíamos reducir todavía más el tamaño de las imágenes que contiene.
Tipos de imágenes para páginas web
Está claro que, en este caso, el tamaño importa; pero el formato, también. Por eso, antes de optimizar las imágenes de tu web, es necesario que conozcas los formatos más comunes para escoger el que más te convenga en cada ocasión:
Imágenes en formato JPG o JPEG
Es el formato derivado de la aplicación de la norma ISO/IEC 10918-1 para la compresión de imágenes. Esta norma establece que dicha compresión se debe llevar a cabo seccionando la imagen en conjuntos de 8 x 8 píxeles y pasando del espacio cromático en RGB al esquema de color YCbCr. Por lo que permite una compresión más elevada que cualquier otro formato.
Imágenes en formato PNG
El formato PNG (Portable Network Graphics) se caracteriza por ofrecer una profundidad de color de hasta 24 bits por píxel y la posibilidad de comprimir las imágenes sin pérdidas. Por este motivo, las fotografías en PNG suelen ser de mayor calidad y ocupan más espacio que en otros formatos, como por ejemplo el JPEG.
Imágenes en formato GIF
Es el formato más antiguo de los tres y, aunque es el más pobre en cuanto a paleta de colores (solo utiliza 256 colores o, lo que es lo mismo, 8 bits) sigue siendo la mejor opción para crear pequeñas animaciones gracias a la combinación de diferentes imágenes.
Estos son los tres formatos más comunes en el ámbito de las páginas web, sin embargo, Google recomienda utilizar imágenes de próxima generación como JPEG 2000, JPEG XR o WebP. Así que toma nota de ello si quieres optimizar el SEO de tu web.
Cómo guardar imágenes para web
Una vez tengas tus imágenes optimizadas para web, debes elegir en qué formato quieres guardarlas.
Y aquí llega el segundo dilema.
Sabemos que más de un diseñador gráfico se tirará de los pelos al leer esto, pero nuestro consejo es que no te compliques. Utiliza los formatos JPEG para fotografías con mucho color y el PNG para imágenes más simples o con fondo transparente.
¿Has visto qué fácil?
7 herramientas para optimizar imágenes para web
Ok, así es como se tendría que hacer, pero ¿Y si tengo una web con un montón de imágenes ya subidas y sin optimizar? ¿Cómo lo hago para arreglarlo?
Tranqui, que aquí hay para todos.
A no ser que quieras acabar como el de la foto, no es necesario que retoques una a una las fotos que tienes ya cargadas. Wordpress ofrece varios plugins que permiten optimizar las imágenes de tu web de forma automática para que no tengas que hacerlo manualmente.
Aún así, para no ventilarte el espacio del hosting en cero coma, intenta no subir imágenes de más de 2 MB, ni de más de 200KB a tu biblioteca multimedia de Wordpress.
De hecho, la mejor opción es reducir el tamaño de las imágenes con alguna de las herramientas que te hemos presentado y, una vez subidas, utilizar alguno de los siguientes plugins de Wordpress para optimizar todavía más el rendimiento de la web:
- Optimizador.io
Plugin gratuito que no consume los recursos de tu servidor, por lo que no interfiere en el rendimiento de tu web.
- WP Smush
Otro plugin sin coste que, además de comprimir las fotografías que ya están subidas, permite establecer un tamaño máximo y el solito ajusta todas las imágenes que subas al mismo.
- EWWW Image Optimizer
Reduce de forma gratuita el peso de las imágenes de tu librería perdiendo la mínima calidad posible.
- Compress JPEG & PNG images
Más de 500 imágenes comprimidas al mes de manera gratuita pero para poder usarlo hay que registrarse y obtener la clave API.
- ShortPixel Image Optimizer
Compatible con formatos JPEG, PNG, GIF y PDF con un máximo de 100 imágenes optimizadas al mes. Eso sí, también hay que registrarse para poder usarla.
- Kraken Image Optimizer
Otro plugin que permite optimizar las imágenes de tu librería o al subirlas. En este caso soporta archivos en formato JPEG, GIF o PNG de 32 MB como máximo y requiere de registro y clave API para poder usarlo.
- Imagify Image Optimizer
Este plugin ofrece tres niveles distintos de compresión: normal, Agressive o Ultra y es compatible con WooCommerce y NextGen Gallery.
Así que, ya no tienes excusa para no optimizar las imágenes de tu web. Y, oye, ya que estamos puestos…
¿Qué te parece si seguimos con las de tus redes sociales?
