El rendimiento y la velocidad de carga en la web es algo esencial por dos motivos principales: nos ayudan a mejorar nuestro posicionamiento web y mejoran la experiencia de usuario.

Algo de lo que muchas veces la gente se despreocupa bastante o no le da la suficiente relevancia es en la optimización de imágenes, siendo de normal una gran parte del peso de una web.

Donde suele darse este mayor problema suele ser en webs que usan bastantes imágenes como los eccommerce, pero ¿qué es todo esto de optimizar imágenes? En este artículo voy a explicar todo lo que necesitas saber, incluso lo que ya nos dicen y muchos no trabajan.

¿Qué es optimizar las imágenes de una web?

Optimizar una imagen es reducir su proceso para la descarga de esta cuando un usuario o los robots acceden a una página web en concreto.

Existen 2 factores principales a la hora de mejorar el proceso de carga de las imágenes, estos son:

  • el peso de la imagen
  • el tamaño de la imagen

También hay otros factores que pueden ayudarnos a mejorar la experiencia de usuario y tiempos de carga, pero principalmente se basa en estos 2 factores.

¿Cómo beneficia la optimización de las imágenes a una web?

Cuando optimizamos las imágenes por tamaño y peso, lo que estamos logrando es mejorar la velocidad con la que una página se descarga y lograr que el servidor donde tenemos alojada nuestra web tenga que realizar menos trabajo para descargar todos los elementos.

Mejorando estos tiempos de descarga conseguiremos que el usuario vea la página antes y reduciremos la probabilidad del rebote. Con esto, mejorará la satisfacción respecto a la página.

Mejorar los tiempos de carga también beneficia el posicionamiento web. Ya que las arañas de Google tienen que hacer menos trabajo para rastrear tu web y pueden dedicar ese tiempo extra a rastrear otras páginas internas a través del interlinking. Además, al saber que los usuarios van a recibir una mejor experiencia en tu web optimizada, va a tender a posicionarla mejor.

Cómo optimizar imágenes y mejorar el rendimiento de tu web (GUÍA 2019) Clic para tuitear

Ejemplos de rendimiento de una imagen

Bueno, todo lo comentado antes está bastante bien a modo teoría, pero a veces es necesario ver para creer. Es por ello que os voy a mostrar un ligero ejemplo de lo que supone adaptar una imagen en cuestiones de tiempo y velocidad:

El siguiente ejemplo es algo exagerado, esto es lo que sucede con un imagen de 753 KB que solo está comprimida:

imagen seo sin optimizar

Esto es lo que sucede, si cambiamos el tamaño y volvemos a comprimir la imagen:

imagen seo optimizada

Aunque el nombre se muestre diferente, es la misma imagen, lo único que al guardar la guardé con un nombre distinto.

El tiempo de descarga de la imagen se reduce bastante como se puede ver, pasando de 1.44 segundos a 165.5 milisegundos.

Aspectos a tener en cuenta en la optimización de imágenes

Una vez sabemos para qué sirve y en qué nos beneficia la optimización de las imágenes, toca explicar lo necesario para aprender a realizar todo esto.

Antes de ello, haremos un breve repaso a las extensiones de imágenes más usadas y los nuevos formatos recomendados por Google.

➡️ Formatos de imagen existentes

  • PNG: los archivos .png suelen dar más calidad de imagen pero suelen pesar mucho más de normal. Si la paleta de colores es pequeña, pesa menos que las imágenes en JPG. Si tu imagen necesita transparencia, deberás usar este formato.
  • JPG: suele utilizarse para archivos con una amplia paleta de colores, con el objetivo de tener una buena relación de calidad y peso de las imágenes.
  • GIF: se utiliza normalmente para imágenes animadas.
  • SVG: los svg son imágenes vectoriales que suelen usarse para logos, iconos o imágenes sencillas. Son indexables, escalables a diferentes resoluciones y su peso suele ser menor que los archivos .jpg y .png
  • JPEG 2000: extensión de imagen de nueva generación no soportado por todos los navegadores. Se lanzó con el objetivo de reemplazar el estándar original .jpeg
  • JPEG XR: extensión de imagen de nueva generación no soportado por todos los navegadores. Puede ofrecer la misma calidad que las imágenes .jpeg llegando a reducir su peso hasta un 50%.
  • WebP: extensión de imagen de nueva generación no soportado por todos los navegadores. Es el competidor directo de las imágenes jpeg y de las extensiones de nueva generación, es el que ofrece una mejor respuesta en cuanto a calidad y peso de la imagen.

Como recomendación sobre qué formato trabajar te diría que dependiendo de tus necesidades. Por lo general jpg y png son los más usados y si no quieres muchos quebraderos de cabeza, es mejor usar estos dos.

Pero si quieres empezar a darle caña al tema de carga web y mejorar la puntuación de Pagespeed, empezaría a usar WebP (que yo ya estoy empezando a testear en algunos proyectos), siendo consecuentes que os puede dar problemas en algunos navegadores y cms.

➡️ Optimización de tamaño

La optimización de tamaño consiste en que el tamaño de la imagen de ancho y largo, sea igual al que se descarga la web.

Si el tamaño es más grande o pequeño, se produce lo que llamamos una redimensión de la imagen al tamaño indicado mediante programación, lo que lleva a realizar un trabajo extra cuando se sirve nuestra web al navegador del usuario.

Para ver esto más claro, solo debemos ir a una imagen de nuestra web, por ejemplo, si nos vamos a una página de nuestra web con el navegador chrome, y con el ratón encima de una imagen, pulsamos el botón derecho, se nos desplegará un menú, nos vamos a inspeccionar. Se nos abrira una pestaña con el código de la web en html.

La etiqueta de la imagen debería aparecer seleccionada, si pasamos el ratón por encima de ella, veremos el tamaño real de la imagen y el tamaño en el que se muestra. Si son distintos, es que se puede optimizar la imagen.

publisuites footer redimension

Conforme menos procesos se tengan que realizar, más rápidamente se mostrará nuestra página completamente.

➡️ Optimización de peso

La optimización de peso consiste en reducir el peso de las imágenes para acelerar los tiempos de carga.

Por lo general, siempre se recomienda que una imagen esté por debajo de los 100kb, y cuanto menos sea el peso, mejor.

Para lograrlo, podemos reducir el tamaño, bajar la calidad, usar los nuevos formatos de imagen o reducir la escala de colores. Al final hay que encontrar un equilibrio entre calidad y peso, pero muchas veces, puede ser complicado, sobre todo para aquellas webs que utilizan imágenes grandes o sliders.

Optimización de imágenes para SEO: formatos, herramientas y plugins para rankear mejor. Clic para tuitear

🛠 Herramientas para la optimización de imágenes

Existen diversas herramientas para optimizar las creatividad de una web. Tenemos tanto las aplicaciones de escritorio como herramientas online que pueden ayudarnos a ello.

Herramientas online

  • Compressor.io: esta es la herramienta que normalmente uso cuando creo un artículo y publico las imágenes. Mantiene la calidad de las imágenes y reduce bastante su peso. Lo malo es que solo te permite subir de uno en uno los archivos.

Compressor.io

  • Squoosh.app: un compressor de imágenes lanzado oficialmente por Google. Ofrece algunas opciones para reducir la calidad y paleta, además de mostrarte cuanto se reduce el peso de la imagen, además de que te permite descargar la imagen en WebP, formato que no todos los compresores aceptan.
    squoosh
  • Imagecompressor.com: otro compresor de imágenes, con la ventaja de que te permite subir múltiples archivos al mismo tiempo. Tiene un límite de 20 imágenes al mismo tiempo, pero de normal, suele ser más que suficiente.

Optimizilla

  • Imageresize.org: este compresor de imágenes, te permite subir la imagen o directamente, insertar la url, por lo que no es necesario que la descargues y la subas de nuevo para comprimirla. Una ventaja si quieres optimizar de forma rápida algún artículo.

Imageresize

Herramientas de escritorio

Las herramientas online suelen estar bien para realizar tareas rápidas o rematar alguna imagen y asegurarnos que están comprimidas, pero si disponemos de herramientas de escritorio, podemos asegurarnos de que salen comprimidas y con una calidad de imagen y peso razonable. Vamos a ver algunas de ellas:

  • Photoshop: la herramienta de diseño por excelencia de Adobe. Una potente herramienta de diseño que nos permitirá guardar las imágenes en varios formatos y llevar al máximo, la relación de calidad y peso, aunque es necesario conocer cómo usar la herramienta.
  • Gimp: la alternativa gratuita de Photoshop. Nos es tan potente como la de Adobe pero es lo suficientemente potente como para sacarnos de más de un apuro. Es necesario también conocer como funciona para poder sacarle el mayor partido posible.
  • File Optimizer: esta herramienta la acabo de descubrir mientras realizaba el artículo y me parece brutal. Comprime todo tipo de archivos, no solo imágenes y de forma masiva (incluso archivos de audio, vídeo y pdf).

⚙️ Plugins para automatizarla automatización en WordPress

WordPress es uno de los cms más usados del momento, y algunas de estas tareas, pueden automatizarse con plugins, además de ofrecer otras interesantes ventajas.

Optimización de peso y tamaño de imágenes

Optimizar de forma automática las imágenes con plugins en WordPress puede interesarnos bien por si se nos pasa optimizar alguna imagen, por ahorrar tiempo en nuestro método de trabajo o porque ya tenemos la web creada con cientos de miles de imágenes y puede resultar una locura optimizar todas las imágenes y subirlas de nuevo al servidor.

  • WP Super Cache: entre sus múltiples funcionalidades de optimización, la opción de pago te permite optimizar las imágenes mediante créditos.
  • Swift: otro plugin de optimización de WPO para WordPress. La opción de pago te permite optimizar todas las imágenes de la web de forma automática sin límite.
  • Smush: un plugin orientado específicamente a la optimización de las imágenes.

Optimización de carga asíncrona

La optimización de carga asíncrona de las imágenes permite cargar las imágenes solo cuando se muestran por pantalla al usuario, es decir, si tenemos una imagen en el footer, esta no se mostrará hasta que el usuario llegue al footer.

Es especialmente útil en tiendas online con largas listas de productos, donde se pretende mejorar mucho la experiencia del usuario para que este compre.

Los plugins mencionados anteriormente, Swift y WP Super Cache, permiten esto, aunque también puede usarse Lazy Load para ello, que es más conocido.

Conclusiones

Ahora ya sabes por dónde puedes seguir optimizando y mejorando tu web. El SEO al final trata de optimizar lo máximo posible y rascar de pequeñas cosas. Puedes hacer la prueba fácilmente con GT Metrix y realizar pruebas en tu web, antes de optimizar las imágenes y después, posiblemente te lleves una grata sorpresa acelerando tu web algunos segundos.

Sí que es cierto que se requieren otros factores para acelerar la carga, como la cache y la compresión y minificación de archivos, pero las imágenes es algo primordial que muchas veces, cuando se trabaja en contenidos no se vigila lo suficiente o se toma bastante a la ligera.

Así que recordad, antes de publicar algún producto, cambiar vuestro slider o subir algún post, aseguraros de que el peso de la imagen es el menor posible.

  • Alienigenas

    En la parte de Optimización de tamaño no le veo mucho sentido porque dependiendo del tamaño de la pantalla en la que mires saldrán medidas diferentes.

    • Eric Jorge Seguí Parejo

      Puedes usar srcset para cargar imágenes en función del tamaño de pantalla =)

  • Viaja y no te pierdas nada

    Pedazo de post,antes no le echaba cuenta pero una vez que estoy liberando peso se está notando.
    Gracias por compartir

  • Logopedia Madrid

    Muy buen artículo. Además yo recomendaría geoetiquetar cada imagen si es necesario optimizar el SEO local.

    Gracias a Publisuites podemos contar con una gran red de backlinks.

  • Javi Torres

    Me gustó el artículo.
    Tengo una pregunta: uso blogger; la edición de este servidor da la opción de publicar las imágenes en el tamaño original en que las hayamos comprimido, o en otros tamaños, ya sean mayores o menores tamaños. La pregunta, después del contexto, es esta: ¿ si imaginariamente mi imagen fuese de 750 x 420 pixeles y la publico con un tamaño menor, la imagen en mi blog ya pesará menos o seguirá pesando lo mismo?

    • Eric Jorge Seguí Parejo

      Depende, si blogger te redimensiona la imagen o te guarda distintos tamaños.

      De normal, todas estas plataformas, tienen un sistema que guarda diferentes tamaños de la imagen y te muestran la que más cercana al tamaño.

      Aun así, si fuera una redimensión realizada por código, la imagen pesaría lo mismo, es por ello que es importante que carguemos las imágenes en el tamaño que queremos mostrarlas =)

  • PlantaMedicinal

    Es imprescindible para mejorar la velocidad de carga de la web y, por ende, su posicionamiento. Enhorabuena por el articulo.

  • Claudia Sierra

    Una guía muy útil para convertir a las imágenes en unas aliadas y no en unas enemigas de cara al posicionamiento SEO. Merece la pena leerlo de principio a fin. Gracias por tu esfuerzo.

  • agencia de posicionamiento web

    Muy buen post, sobre todo por la información que entregas

    saludos

    Nicolás

  • ¿Cuáles son los APN de Claro?

    me cuesta leer un poco de esto , en verdad que si

  • Diseño web Cordoba

    Genial el post!

  • Informacion sobre Carbohidratos

    Muchas gracias por el Post!

*