Las imágenes pueden suponer más del 80% del tamaño de tu web (ojo al dato), por eso es súper importante tenerlas bien optimizadas porque este factor puede suponer la diferencia entre tener una página web rápida y una lenta (y esto afecta muchísimo a tu conversión y posicionamiento).
El problema es que muchas personas no saben cómo hacerlo o piensan que son necesarios conocimientos técnicos. Pero no te preocupes, vamos a ver un método sencillo para optimizar tus imágenes tú mismo antes de subirla a la web paso a paso.
Si si, tú mismo (yo creo en ti)
Vamos a decirlo de esta manera… ¿El tamaño importa? Pues pregúntaselo a tu web.
¿Listos? Rock&Roll
¿Qué significa optimizar imágenes?
Vamos a empezar por aquí, estamos hablando de optimizar una imagen para nuestra página web, pero ¿a qué nos referimos exactamente?
Pues a conseguir que la imagen pese lo menos posible y consuma los menos recursos posible, manteniendo una buena calidad cuando se ve la web en móviles y ordenadores.
El último punto es importante («cuando se ve la web en móviles y ordenadores») porque muchas personas suben sus imágenes a tamaño gigante que podrían servir para imprimirlas tamaño fachada de edificio, y luego en la web se va a ver en un cuadrito pequeño.
Esto provoca que tengamos una imagen que pese un montón y que ocupa muchísimo espacio cuando no lo necesitamos.
Ventajas de optimizar las imágenes de tu web
Pues la ventaja la debes tener clara a estas alturas del artículo, optimizar tus imágenes te ayudará a que tu web pese mucho menos y esto nos va a ayudar a que nuestra web cargue más rápido.
Imagina una tienda online con aproximadamente 1000 productos. Teniendo en cuenta las imágenes de las páginas de inicio, ventas, banners… y tres o cuatro fotos de media de cada productos, estamos hablando de unas 5000 imágenes en nuestra web.
Si no las optimizamos, estas imágenes se comerán todo el espacio del hosting, teniendo problemas de optimización, pero además la página irá súper lenta, por el tiempo que tarda en cargar las imágenes.
Al final esto no solo es solo por la velocidad de carga, gracias a esta optimización también podrás mejorar tu posicionamiento en Google, tu experiencia de usuario y como consecuencia tu tienda empezará a facturar mucho más.
Interesante, ¿no?
Tutorial para optimizar una imagen paso a paso
Te lo explico en el vídeo con un ejemplo, pero también te lo voy a poner aquí paso a paso:
Paso 1. Saber a qué tamaño necesitas la imagen.
Antes que nada vamos a «medir» el tamaño exacto que ocupará la imagen en tu web, para luego poder ajustarla a ese tamaño.
Para esto vamos a usar una extensión de Google Chrome llamada «Page Ruler» para medir en píxeles un hueco concreto que queremos que ocupe. Simplemente instalamos la extensión, la activamos y medimos dejando pulsado el clic izquierdo del ratón mientras seleccionas el espacio.
Esto nos dirá cuántos píxeles de ancho y alto debe tener mi imagen.
Paso 2. Redimensionar la imagen para la web al tamaño que vas a usarla y guardarla comprimida
Una vez que sabemos a qué tamaño debe estar, el próximo paso es pasarla por algún programa de edición, ponerla a ese tamaño y, de camino, guardarla comprimida para que pese aún menos.
Aquí un inciso: Si la imagen es un vector (que lo trabajamos con illustrator), podemos ponerla exactamente al tamaño que deseamos, pero si trabajamos con una foto o una imagen normal, a veces no podremos ponerla al tamaño si eso implica reducirla mucho, porque se pixela y pierde calidad (recuerda que el objetivo es que pese lo menos posible pero sin perder la calidad).
En este caso, lo que haremos será reducir la imagen o foto lo más cerca que podamos de nuestro tamaño ideal, sin que pierda calidad.
Vamos a ver esto con dos herramientas diferentes:
Con la herramienta Photoshop
Con Photoshop tenemos la ventaja de poder dejarla mucho más optimizada, ya que se trata de una herramienta muy potente, pero es de pago (si trabajáis con muchas imágenes, os recomiendo pillarla, no es cara).
Una vez abrimos la imagen, solo hay que ir al menú y seleccionar «imagen» y «tamaño de imagen» y modificar el tamaño en píxeles.
Ten en cuenta que para no deformar la imagen (por ejemplo si es un rectángulo que se mantenga así), tendrás que modificar solo el ancho y dejar que se ponga el alto correspondiente, sin tocarlo.
Una vez que lo tengas, solo darle «OK» y ya tienes tu imagen al tamaño deseado.
Cuando la tengas lista, ve al menú y dale a «Archivo» > «Exportar» > «Guardar para web» y guárdala con calidad media (un poco más abajo hablaremos de los formatos)
** Posdata: Si estamos trabajando con un vector en Illustrator, el proceso es similar.
Con una herramienta gratuita: Squoosh
Como en el fondo soy «tó buena gente» te voy a poner una opción gratuita que funciona bastante bien, una herramienta online llamada Squoosh.app
Esta herramienta es muy sencilla, solo tenemos que arrastrar la imagen dentro de la zona rosa o seleccionarla en nuestro PC, darle a la opción «Resize» (lo tienes a la derecha) y poner el tamaño que quieras.
Puedes mover el puntero para ver el antes y después del cambio y así asegurarte que no se pierda calidad.
Una vez que lo tengas, abajo en la derecha fíjate donde pone «Quality«. Vamos a ponerlo entre un 50% y un 75% y ajustamos para que no se pierda calidad. Con esto estamos comprimiendo aún más la imagen.
Una vez que la tengamos, ya podemos guardarla en el icono con la flecha que está abajo a la derecha.
¿En qué formato debo guardar mi imagen?
Una duda típica es en qué formato debemos guardar las imágenes.
Esto depende del tipo de imagen pero te lo pongo fácil:
Imágenes con fondo (tipo foto): JPG calidad media
Imágenes sin fondo (tipo logos o silueta de persona): PNG 24
¿Cómo nombrar la imagen para mi web?
Por último, al guardarla tenemos que nombrar la imagen, ya que normalmente desde la cámara o el banco de imágenes de donde ha salido suele venir con un nombre feo y sin sentido. El nombre que le debes poner es una palabra clave que describa tanto la imagen como lo que se quiere posicionar en la url donde va a ir esa imagen.
Importante: No debe contener caracteres especiales como «Ñ» ni acentos. Separa las palabras por guiones medios. Un ejemplo de título de imagen:
«portada-optimizar-imagen-web»
Paso 4. Comprime aún más la imagen con Tinypng
Una vez que tenemos la imagen en nuestro ordenador, vamos a dar un paso más pasándola por otro programa (online y gratuito) para comprimirla aún más. El programa se llama Tinypng y puedes acceder aquí.
Solo tenemos que arrastrar la imagen que hemos guardado antes hacia dentro del recuadro y automáticamente se comprimirá aún más. Cuando termine el proceso, que dura unos segundos, pondrá el porcentaje al que has reducido el peso de la imagen (en el ejemplo ves que lo ha reducido un 70%) y ya puedes darle «download» para descargarla.
Si ves que el porcentaje es un 0%, significa que ya con el paso anterior lo has dejado lo más optimizado posible sin perder calidad, por lo que te puedes saltar este paso.
Paso 5. Geolocaliza tu foto o imagen para potenciar tu seo local
Este último paso es opcional. Si nos interesa trabajar el posicionamiento local en la url en la que va la imagen, una acción que nos puede ayudar, y es gratis y muy sencillo, es geolocalizar la imagen, es decir, que en los metadatos de la imagen aparezca la dirección de tu negocio local.
Te dejo un vídeo en el que te puedes ver cómo hacerlo fácil y paso a paso.
Bonus: Plugin de WordPress para optimizar imágenes y fotos
Como extra, te cuento que es interesante que pongas un plugin como «Imagify» en tu WordPress. El motivo es doble:
Primero, si se te escapa alguna imagen y la subes sin optimizar, el plugin la optimiza un poco, ni de cerca tanto como cuando lo hacemos manual, pero es una ayuda para esas fotos o imágenes puntuales que se nos olvide optimizar (yo sé que a ti no se te va a olvidar ninguna, pero por si acaso).
La segunda es que te permite gestionar todo el tema de servir las imágenes en formato Webp, aunque de esto mejor hablamos en otro post.
Terminando, en resumen
Hagamos un pequeño resumen de lo que has hecho (o deberías hacer):
Has medido el tamaño del hueco en el que va la imagen.
Has puesto la imagen a ese tamaño
La has guardado comprimida, en el formato correcto y con un buen título
Lo has vuelto a comprimir con Tiny.png
La has geolocalizado (si querías potenciar el seo local)
Pues listo, ¡Enhorabuena!, has conseguido una foto decentemente optimizada y lista para subir a tu web. Ahora te estarás preguntando: Jonathan, ¿de verdad tengo que hacer todo esto con todas las imágenes de mi web?
La respuesta es SI, y además es un factor muy importante, recuerda que marcará la diferencia entre tener una web lenta y una rápida.
Y tú, ¿optimizas las imágenes antes de subirla a tu página web?
¿Recomiendas alguna otra herramienta o sigues algún otro método?
Déjame un comentario y compartimos cositas entre todos.
