Saltar al contenido

Cómo optimizar imágenes para PageSpeed

Cuando un usuario visita nuestra página web espera que esta cargue lo más rápido posible. Teniendo en cuenta que gran parte de las consultas ya se realizan a través de dispositivos móviles, los usuarios aún tienen menos paciencia. Es por eso que hoy desde nuestra agencia de posicionamiento seo os vamos a explicar cómo optimizar imágenes para PageSpeed, la herramienta de Google que sirve para medir la velocidad de carga de un sitio web.

Lo primero que hay que tener en cuenta es que en la velocidad de carga influyen muchos factores, como por ejemplo, la calidad del código, la optimización de imágenes, el hosting, la velocidad de conexión o la caché, entre otras, y a continuación os explicamos cómo mejorar un elemento vital para la velocidad de carga: las fotos.

¿Por qué es importante optimizar las imágenes para PageSpeed?

De todos los factores mencionados si hay uno que mejora la velocidad de carga de una web drásticamente es la compresión de las imágenes. Dedicándole poco tiempo y esfuerzo, PageSpeed le asigna considerablemente una mejor puntuación a aquellas páginas cuyas imágenes han sido optimizadas.

Un sitio web puede almacenar una gran cantidad de imágenes, por lo que es importante reducir siempre la resolución y el peso a los mínimos necesarios. Para ello, lo primero que tenemos que entender es la diferencia entre resolución y peso de la imagen. A menudo se suele pensar que cuanta más resolución tenga una imagen mayor será su peso, pero eso no es siempre así.

Una imagen, cuando hablamos en formato digital, está formada por una cantidad de píxeles concretos. Si medimos la cantidad de píxeles de una imagen en vertical y horizontal obtendremos su resolución. Por ejemplo, cuando hablamos de una imagen en full HD, estamos diciendo que tiene 1920px de ancho por 1080px de alto.

No obstante, aunque la resolución afecta al peso de una imagen, no es el único factor importante. En el peso de una imagen influye sobre todo su formato y calidad de compresión. Cuando hablamos de formato de una imagen nos referimos por ejemplo a JPG, PNG, GIF, TIF… y lo podemos saber fácilmente por su extensión.

¿Cómo optimizar una imagen en tamaño?

Cuando queremos optimizar el tamaño (resolución) de una imagen para una página web el objetivo es que el volumen real de una imagen y el de visualización sean iguales. El tamaño real es el que tiene originalmente el archivo que subimos a nuestra web y el de visualización se refiere al tamaño al que lo verá el usuario finalmente.

Por lo tanto, optimizar una imagen en tamaño significa ajustar su tamaño de visualización al real. Debemos evitar que una imagen que se va a visualizar a 600x300px se suba a la web con un tamaño de 1200x600px ya que sería innecesario y ralentizaría la carga de la web.

¿Cómo optimizar una imagen en calidad?

Al subir una imagen a un sitio web nos interesará que su peso sea el mínimo posible sin perder calidad o perdiendo muy poca, dependiendo de lo que queramos mostrar.

Para empezar, para optimizar una imagen en calidad deberemos escoger un formato que se adapte a nuestras necesidades teniendo en cuenta que el peso puede variar. Por ejemplo, PNG es un formato que puede tener muy buena calidad y permite el uso de transparencias pero, en contraposición, una imagen en este formato suele pesar bastante más que una en JPG.

Es muy importante escoger bien el formato que necesitamos pero además deberemos elegir adecuadamente la calidad de compresión, teniendo en cuenta que, a más compresión, menos peso y menor calidad y, a menos compresión, más peso y mayor calidad.

optimizar imagenes para pagespeed

Herramientas para optimizar las imágenes

Para optimizar imágenes para PageSpeed existen muchas herramientas de diferentes tipos. Podemos separarlas en dos grandes grupos; las herramientas online y offline, es decir, las que podemos utilizar a través de una aplicación web o las que tenemos que instalar en nuestro ordenador. También es importante tener en cuenta la dificultad de cada herramienta y si es gratuita o no. Ahora, las herramientas son:

Herramientas online para optimizar imágenes

  • Optimizilla: sin duda una de las mejores herramientas online para optimizar imágenes para PageSpeed. Es totalmente gratuita y extremadamente fácil de utilizar. Podemos subir hasta 20 imágenes al mismo tiempo y ajustar la calidad de compresión de cada una de ellas de manera individual mientras vemos si pierde demasiada calidad o no.
  • TinyJPG: similar a la anterior, también con un límite de 20 imágenes (5mb cada una como máximo) y con opción de plan de pago que elimina esos límites. Una vez subidas las imágenes, el proceso es automático y permite menos opciones que la anterior, pero también es muy fácil de utilizar.
  • Compressor.io: es gratuita y acepta algún formato más que las anteriores, concretamente JPEG, PNG, GIF y SVG. Se echa en falta la opción de subir varias imágenes al mismo tiempo pero a cambio aumenta el límite de cada una hasta los 10mb.

Herramientas offline para optimizar imágenes

  • Gimp: es un editor de imágenes muy completo y de software libre. Sus principales ventajas son que es gratuito y muy completo pero por contra su interfaz no es la más clara.
  • Riot: esta herramienta gratuita es solo de compresión de imágenes. Permite comprimir varias fotos a la vez de una manera muy sencilla a través de su intuitva interfaz.
  • Photoshop: es el editor de imágenes por excelencia. Incorpora una herramienta bastante efectiva para compresión de imágenes para sitios webs. No es fácil de usar aunque tiene una muy buena interfaz y es una aplicación de pago.

En definitiva, ahora que ya sabes cómo optimizar imágenes para PageSpeed ten claro que esto será muy importante para la velocidad de carga de una web. Hay que intentar optmizar cada imagen antes de subirla ya que siempre es una tarea tediosa tener que eliminarlas, optimizarlas y volverlas a subir.

Jose L. García

Jose L. García

Cuando era niño y me preguntaban qué quería ser de mayor dudaba entre policía o informático. Como lo primero requería una condición física que nunca he alcanzado ni alcanzaré, me decanté por lo segundo. Empecé a hacer webs con 16 años y todavía sigo al pie del cañón. Mi lema es gluten free y html para todos.

¿Te ha gustado el artículo?

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (7 votos, promedio: 4,14 de 5)
Cargando…