12 Abr Guía: Aprende a optimizar imágenes para tu web [Actualizado 2022]
Es importante optimizar las imágenes de tu web, ya sea una página personal o una página comercial, si quieres que Google no te penalice.
Uno de los principales problemas a los que nos enfrentamos es la necesidad de reducir el tamaño de los archivos de imagen sin reducir su calidad.
Existen algunas técnicas que permiten reducir el tamaño de las imágenes manteniendo la calidad suficiente para que el usuario disfrute navegando por el sitio web.
En el artículo de hoy entenderás todos los conceptos clave a la hora de optimizar las imágenes, así como las particularidades de cada formato y las herramientas que te permitirán llevarlo a cabo.
¿Qué significa optimizar imágenes?
La optimización de imágenes es un proceso que consiste en adaptar el tamaño de las imágenes al que se usará en el sitio web y reducir su peso lo máximo posible para que exista un equilibrio entre calidad y tamaño.
¿Por qué debes optimizar las imágenes del sitio web?
- Posicionamiento SEO. Google disponible de un tiempo limitado para rastrear tu página web, por lo tanto, cuanto más pese, menos páginas podrá rastrear y menos opciones tendrás para posicionar.
- Experiencia de usuario. Una web lenta no ofrece una buena experiencia al usuario que navegue por la misma por lo que el rebote será muy alto y los usuarios salgan rápidamente de la misma.
Beneficios de optimizar imágenes
- Mejora la velocidad de carga (WPO). Las imágenes pueden llegar a representar la mitad del contenido de la página, o más si se trata de un comercio electrónico. Si las imágenes no se optimizan correctamente causarán un problema en su visualización, lo cual afectará negativamente al posicionamiento web.
- Mejora tu posicionamiento orgánico (SEO). Se trata de uno de los aspectos más importantes a la hora de que Google decida posicionar nuestras páginas web. Si tenemos una gran cantidad de imágenes, como podría darse en un ecommerce, Google premiará aquellas páginas cuya velocidad de carga sea menor.
- Aumento de visibilidad en las SERPS. Es habitual que Google decida mostrar a través de las SERP imágenes que pueden ser un reclamo para los usuarios y convertirse en un clic para visitar la web.
- Mejora la experiencia de usuario (UX). Hoy en día, los visitantes de las páginas web están acostumbrados a consumir el contenido de una forma rápida. Si la página web o sus imágenes no cargan de manera casi inmediata, los visitantes cerraran la web y tendrás un alto porcentaje de rebote.
¿Cómo optimizar imágenes para la web?
Primero debes conocer cuáles son las imágenes que debes optimizar. Lo ideal es que realices un test de velocidad para comprobar el impacto que tienen las imágenes de tu sitio web.
Algunas herramientas que te permiten realizar este análisis son:
Formatos de imágenes
Antes de comenzar a optimizar imágenes, debemos conocer los diferentes tipos de formatos de imágenes existentes. Cada uno de ellos está pensado para utilizarlos en determinadas situaciones:
Formato JPG
Es un término acuñado por Joint Photographic Experts Group. Es un formato de compresión de imágenes, tanto de color como en escala de grises, con una alta calidad.
El formato JPG o JPEG es ideal para fotografías e imágenes donde requieres optimizar sin perder calidad. Te permite ajustar el nivel de calidad para tener un equilibro adecuado entre el tamaño y peso de la imagen con la calidad de la misma.
El formato JPG es el más utilizado por su calidad de colores y fácil compresión.
Formato PNG
El formato PNG es un formato gráfico basado en un algoritmo de comprensión sin pérdida para bitmaps. Este formato fue desarrollado para solventar las deficiencias del formato GIF, permitiendo crear imágenes con una mayor calidad.
A diferencia del formato JPG, este formato de compresión no tiene pérdida. Sus siglas corresponden a Portable Network Graphics.
Una característica de este formato es, que a diferencia del primer formato, soporta transparencias.
Hay dos tipos de archivos PNG:
- PNG 8. Tiene limitación de colores por lo que el peso del archivo es muy pequeño, resulta muy similar al formato GIF.
- PNG 24. No tiene limitación de colores, pero su tamaño será mayor.
El sistema .png está pensado para utilizarlo con imágenes con transparencias. Presenta una paleta de 256 colores y permite tanto el formato en blanco y negro como el color real.
Formato GIF
Sus siglas en inglés corresponden a Graphics Interchange Format. El formato GIF, también conocido como Compuserve GIF es uno de los formatos digitales más utilizados en la World Wide Web y se emplea tanto para imágenes como para animaciones.
El formato GIF soporta como máximo 256 colores y reproduce de manera consecutiva una serie de imágenes en segundos. No cuentan con sonido y su tamaño es mucho menor que el formato png o jpg.
El formato GIF está prácticamente obsoleto y únicamente se utiliza para imágenes animadas.
Herramientas para optimizar imágenes
Este artículo está enfocado para aquellos que no disponen de herramientas profesionales de tratamiento de imágenes de pago como Photoshop y que necesitan igualmente optimizar las imágenes de su página web.
A continuación os compartimos tres herramientas que puedes utilizar para optimizar imágenes.
TinyPNG
TinyPNG es una herramienta de compresión online que utiliza técnicas inteligentes para reducir el tamaño de archivos tanto jpg como png. Te permite cargar hasta 20 imágenes al mismo tiempo con un máximo de 5MB cada una.
¿Qué ventaja tiene utilizar TinyPNG? Su facilidad de uso, simplemente entras en su web, subes las imágenes en la interfaz y te las descargas ya reducidas.
Compressor.io
Compressor.io es una herramienta que nos permite conseguir una imagen comprimida sin apenas perder calidad y consiguiendo un buen porcentaje de reducción respecto al peso original. Soporta los formatos de JPEG, PNG, GIF y SVG.
En cuanto a su funcionamiento es sencillo, únicamente tendrás que seleccionar la imagen que quieres reducir y descargarla una vez haya terminado el proceso de optimización.
Kraken.io
Kraken.io es una herramienta online que se dedica exclusivamente a optimizar imágenes por medio de modernos algoritmos. Tiene opción de implementarse también en nuestra plantilla de WordPress por medio de su plugin oficial que podemos encontrar en la sección buscando «kraken».
Esta herramienta, además de comprimir las imágenes te permite, escalarlas.
Las principales desventajas de esta herramienta respecto a otras es que no permite realizar ningún tipo de ajuste de calidad ya que es automático, y que el tamaño máximo de la imagen no puede superar 1mb.
I love IMG
La herramienta I love IMG te permite realizar diferentes modificaciones sobre una imagen desde el navegador web. Esta herramienta no se limita a reducir el peso de la imagen, con ella podrás llevar a cabo las siguientes tareas:
- Comprimir una imagen. Comprimir las imágenes en formato JPG, PNG o GIF.
- Redimensionar una imagen. Cambiando el tamaño a la imagen original.
- Recortar una imagen. Recortar al tamaño definido por un área totalmente personalizable.
- Convertir a JPG. Convierte imágenes de formato TIFF, PNG, GIF o RAW a JPG.
- Convertir desde JPG. Convierte un JPG a un PNG o GIF. Incluso puedes seleccionar varias imágenes en formato JPG y crear un GIF animado con ellas.
Todas las funciones de esta herramienta son muy fáciles de usar, convirtiéndose en una opción muy completa.
Plugins WordPress para optimizar imágenes
Utilizar una herramienta externa a WordPress antes de subir una imagen es la manera más efectiva. Pero sí tienes que mejorar la biblioteca de medios existente quizás la opción más rápida sea automatizar la compresión de imágenes con un plugin.
A continuación te mostramos los mejores plugins para reducir el peso o tamaño de las imágenes en WordPress.
Imagify
Imagify es un plugin con muy buena reputación perteneciente a WP Media, la compañía que está detrás del plugin WP Rocket. En la versión gratuita puedes comprimir hasta 25mb al mes, lo que correspondería a unas 200 imágenes.
Tiene tres niveles de compresión: normal, agressive y ultra. Es compatible con Woocommerce y NextGen Gallery.
WP Smush
WP Smush es otro de los mejores plugins para reducir las imágenes de wordpress. Es un plugin que hemos utilizado en las webs de nuestros clientes, su funcionamiento es muy sencillo, simplemente instálalo y empieza a optimizar las imágenes que tengas subidas en el wordpress. Se encarga tanto de redimensionar como de optimizar y comprimir.
Para iniciar el proceso de optimización simplemente tendrás que dar al botón azul «Bulk Smush Now» y las imágenes se comprimirán automáticamente.
A partir de ese momento, las imágenes que subas a tu sitio web se comprimirán automáticamente.
Además, te permite elegir y configurar el tamaño al que quieres redimensionar las imágenes originales, una de las opciones más interesantes de este plugin.
Por defecto, WP Smush utiliza técnicas de optimización loseless, es decir, sin pérdida de calidad, pero su versión pro incluye una opción Super-Smush que optimiza cada imagen varias veces utilizando técnicas de compresión lossy, con pérdida, muy profesionales.
Imsanity
El plugin Imsanity redimensiona las imágenes al tamaño que tu preestablezcas. Esta herramienta es ideal para blogs con diferentes autores creando contenido que no saben redimensionar imágenes. Subas la imagen que subas, si ésta supera tus dimensiones, serán redimensionadas para que se ajusten a la perfección.
Imsanity es es una de las mejores herramientas si necesitas un plugin para redimensionar el tamaño de tus imágenes, ya que es sencillo de utilizar y permite automatizar acciones que manualmente tardarías bastante tiempo en realizar.
Una vez hayas optimizado las imágenes al tamaño correcto no te olvides de mejorar el SEO de la imagen. Optimizar tus imágenes mejorará la velocidad de tu sitio web, sin embargo, si quieres ir un paso más allá sigue los siguientes pasos:
1. Optimiza el título de la imagen
El título de la imagen aparece cuando el lector pasa el puntero sobre la misma. No es un punto decisivo para el SEO, pero ayuda a mejorar la experiencia de usuario.
2. Agrega etiqueta ALT
El texto alternativo de la imagen le da a Google un indicador sobre lo que trata tu página.
El también llamado «etiqueta alt» es un atributo HTML que describe una imagen. Permite a los motores de búsqueda rastrear y clasificar tu sitio web, además de que ayuda a los software de lectura a describir las imágenes para los lectores con discapacidad visual.
Si ya sea que implementes estrategias SEO para tu web, optimizar el texto alternativo en tu sitio es tu oportunidad de crear una mejor experiencia para los usuarios.
3. Nombre del archivo de imagen
El nombre de archivo de la imagen puede ayudarnos a posicionar en Google.
En lugar de tener un nombre sin sentido, recomendamos cambiarlo a algo que incluya la palabra clave objetivo o que refleje de que se trata la imagen.
Asegúrate de utilizar guiones entre las palabras, ya que Google lo leerá como un espacio.
Si te ha gustado este artículo te recomendamos que le eches un vistazo a: «Los mejores temas. Bridge de WordPress»
Y tú, ¿Ya tienes optimizadas las imágenes de tu web? ¿Tienes alguna sugerencia?
