Cómo optimizar imágenes para mejorar la velocidad de carga de tu web.

Cómo optimizar imágenes para mejorar la velocidad de carga de tu web.

Utilizar imágenes en nuestra página es algo básico y muy útil para hacerla más atractiva al usuario y conseguir que permanezca más tiempo en tu web. Pero muchas veces nos olvidamos de que subir imágenes sin cuidado puede ser un arma de doble filo y llevar a un error que cometen demasiadas empresas: subir las imágenes sin optimizar. Y, aunque no lo parezca, es un error que puede hacer que los usuarios abandonen tu web, puesto que afecta negativamente a la velocidad de carga y el posicionamiento SEO.

La importancia de optimizar imágenes de tu web

Optimizar imágenes puede parecer algo tan básico que se podría pensar que es una práctica común y extendida, y que la mayoría de sitios web seguirán esta norma básica.

Por desgracia, no siempre es así.  Y ese error puede influir negativamente en:

  • La velocidad de carga del sitio web: No optimizar las imágenes provoca que ésta tarde más tiempo en cargarse y puede hacer que el usuario se vaya a otra página por impaciencia. Esto es nefasto, puesto que no solo se pierde un potencial cliente sino que la experiencia del usuario es negativa, cosa que Google es capaz de notar.
  • Dar mucho trabajo al servidor:  Si se suben las imágenes sin optimizar a tu web, el servidor tendrá que soportar más peso, afectando al rendimiento de nuestro sitio y perdiendo velocidad de carga.
  • Posicionamiento SEO: Los puntos anteriores son tenidos en cuenta por Google, que penaliza a la página y resta posiciones.

Es posible que ahora te estés planteando: ¿Y cómo se optimiza correctamente una web? No te preocupes que te ayudamos también con eso.

Cómo optimizar las imágenes de tu web

Llegados a este punto, tenemos clara la importancia de optimizar las imágenes de una web y queremos aplicar esa optimización a nuestro sitio.

Lo siguiente será tener en cuenta los siguientes aspectos:

  • Formato de imagen a utilizar.

El primer paso antes de modificar las imágenes, es elegir el tipo de archivo que más convenga:

  • PNG: permite fondos transparentes además de tener mayor calidad, pero tiene un tamaño de archivo mayor.
    • JPEG: pesa menos que un PNG pero su calidad es menor.
  • Peso de la imagen.

Punto de gran importancia para optimizar tus imágenes, ya que cuanto más pese tu imagen, más tardará el navegador en descargarla y más tiempo tendrá que esperar el usuario. Recomendamos optimizar las imágenes a un peso por debajo de los 200kb.

  • Dimensiones.

Las dimensiones de la imagen y su peso suelen ir de la mano, aunque no siempre es así. En caso de que la imagen sea grande pero pese poco, hay que tener en cuenta que las dimensiones de la misma sean iguales que lo que se muestra en la web. En caso de que la imagen sea más grande, el servidor tardará más en descargarla.

  • Ajustar al tamaño.

En el último punto comentábamos la importancia de que el tamaño de la imagen sea igual al del espacio donde queremos insertarla. Tendremos que conocer la altura y el ancho del contenedor para ajustar la imagen con un software de edición de fotos tipo Photoshop.

  • Comprimir sin perder calidad

Una vez se ha ajustado el ancho y alto de la imagen, es posible que todavía pese demasiado. Si es así, no desesperes. Hay varias herramientas que permiten comprimir una imagen sin perder mucha calidad:

  • Photoshop: Con este programa no sólo se puede redimensionar una imagen sino que también tiene una opción de guardarla para web, que optimiza la resolución al máximo.
    • Web Resizer: Herramienta online gratuita con la que se puede recortar, ajustar el tamaño y calidad.
    • Kraken.io: Es un optimizador y compresor de imagen que permite optimizar imágenes en bloque bastante rápido.
  • Plugins.

En caso de que ya hayas subido las fotos a tu sitio web, existen plugins que hacen todo el trabajo de compresión y optimización. De esta forma, nos evitamos que tener que hacer todo el trabajo de volver a subir las imágenes optimizadas  y reemplazarlas. Algunos plugins:

Imagify Image Optimizer: El mismo equipo de WP Rocket creó este plugin capaz de optimización en bloque, diferentes niveles de compresión y función de restaurar en caso que los resultados no sean satisfactorios.

WPSmush: Este plugin simplifica la optimización de imágenes de tu web todavía más, puesto que lo único que tienes que hacer es subir la imagen y el plugin la optimizará sin tener que hacer nada más.

Optimole: Optimiza las imágenes de forma automática. Además, el plugin proporciona carga diferida y reemplazo de la imagen.

Ahora que ya sabes cómo hacerlo, solo queda ponerlo en marcha. Recuerda que es casi tan importante que las imágenes se vean bien como que pesen poco.

Entendemos que puede ser mucha información o que hayan cosas que no acabes de entender. Si ese es el caso y necesitas optimizar tu web, puedes contactar con nosotros para poner a punto tu negocio.

¿Necesitas ayuda?

Deja una respuesta

7 + seis =