Cómo optimizar imágenes para web【Paso a paso】

---

Optimizar las imágenes para web es algo necesario antes de subirlas al hosting, de lo contrario, podemos tener varios problemas, tanto en tiempo de carga de la web, como en el posicionamiento en buscadores.

Para optimizar imágenes no es necesario ser un experto informático o tener conocimientos avanzados en fotografía, pero sí tener alguna herramienta para comprimirlas o delegar el trabajo en algún plugin o complemento instalado en nuestra web. En este post te contamos cómo optimizar las imágenes web y todos los beneficios que tiene hacerlo, para que no tengas ninguna duda al respecto.

---

Cómo puedo optimizar las imágenes de mi web paso a paso para mejorar el rendimiento

TABLA DE CONTENIDOS

• Qué es optimizar una imagen
• Qué ventajas tiene comprimir las imágenes de la web
• Cómo optimizar las imágenes para web
• Cuál es el mejor formato de imagen para la web
• Optimizar imágenes en WordPress

---

Hay muchas ventajas al optimizar las imágenes y pocas o ningunas desventajas, así que se trata de algo que cualquier administrador web debe tener en cuenta en los sitios web que gestione.

Qué es optimizar una imagen

La palabra "optimizar" es algo que todos tenemos más o menos claro qué es, pero "optimizar una imagen" puede ser algo confuso para alguien que no esté acostumbrado a trabajar con imágenes o a procesarlas. Optimizar una imagen es reducir el tamaño del archivo al máximo posible, pero sin que llegue a perder calidad de forma que el usuario la vea mal en su pantalla.

Por ejemplo, si haces una foto con un teléfono móvil actual o una cámara digital, verás que el tamaño del archivo es considerable, con una resolución alta y un peso de varios MB. Este tipo de imágenes no podemos subirlas a la web directamente, ya que ralentizaría mucho su carga y consumiría recursos excesivos.

De nada nos sirve subir una imagen con una resolución de 3024 x 4032 píxeles, si en nuestra web sólo tiene un espacio de 400 x 600 disponible o que tenga un peso de 2.4 MB, cuando podemos obtener el mismo resultado con un archivo que ni siquiera llegue a los 100 KB.

Se trataría de encontrar un equilibrio entre la calidad y el tamaño de la imagen para que se vea bien, sin comprometer la calidad de esta.

Qué ventajas tiene comprimir las imágenes de la web

Tenemos muchas ventajas al comprimir las imágenes de nuestra web, ya que forman una parte muy importante del contenido de nuestra web. Al optimizar las imágenes, estamos optimizando nuestra web, algo muy importante en general para cualquier sitio web.

Si no optimizas las imágenes y subes archivos muy grandes o con una resolución muy alta, tendrás varios problemas, como la velocidad de carga de la web, veamos todas las ventajas de comprimir las imágenes.

• Mejora la velocidad de carga de la web
  Si las imágenes pesan mucho, la velocidad de carga de la web puede ralentizarse de manera considerable. Esto puede hacer que los usuarios se marchen de la web antes de que esta cargue. Más de 2 segundos de tiempo de carga es una eternidad y las imágenes sin optimizar pueden elevar el tiempo de carga por encima de ese tiempo.
• Google te posiciona mejor
  Uno de los parámetros que pondera Google para determinar en qué puesto aparecemos en los resultados de búsqueda, es la velocidad de carga. Como hemos dicho, al optimizar las imágenes mejoramos el tiempo de carga de la web y esto hacer que Google nos tenga en mejor consideración y mejore el posicionamiento de nuestra web.
• Reduce el espacio ocupado en nuestro servidor
  Todos los hosting o servidores tiene un espacio en disco, el cual es finito y se va llenando con los archivos web, bases de datos, vídeos o imágenes. Al optimizar las imágenes ocupan menos espacio en disco, por lo que podremos almacenar más archivos en el mismo espacio.
• Reduce el consumo de transferencia de datos Cada vez que se carga una página web en un navegador consume un poco de transferencia de datos. La mayoría de los alojamientos web tienen una transferencia máxima de datos mensual contratada. Si una imagen ocupa 1 MB y entran 100 usuarios a la web, son 100 MB consumidos. Si la misma imagen ocupa 100 KB, el consumo será de 1000 KB, lo cual no llega a 1 MB. Al optimizar las imágenes, podemos ahorrar cantidades enormes de transferencia de datos.

Cómo optimizar las imágenes para web

Hay varias formas de optimizar una imagen para la web. La más habitual es usar un programa de edición fotográfica, pero también tienes distintas herramientas web o en el caso de utilizar un CMS como WordPress o Joomla, usar algún plugin destinado a este propósito.

Los programas más utilizados para optimizar las imágenes son los del tipo Photoshop, ya que tienen herramientas tanto para cambiar el tamaño de la imagen, como para optimizarlas para web. Evidentemente, si no eres un usuario que se dedica a la edición fotográfica, posiblemente no tengas instalado Photoshop, ya que se trata de un software caro, pero existen alternativas gratuitas para retocar imágenes que puedes utilizar y tiene un funcionamiento similar a Photoshop.

Si ponemos como ejemplo Photoshop, algunas versiones tiene la opción de guardar una imagen para web, desde donde podemos ver la imagen original y la optimizada al mismo tiempo, así sabemos hasta dónde podemos llegar con la optimización sin que la calidad de la imagen se vea afectada.

Desde esta herramienta, puedes modificar el tamaño de la imagen final, el formato de la imagen y ajustar la calidad de la compresión para ver cómo queda.

Por ejemplo, la imagen original (izquierda), que ya estaba comprimida en formato JPG, tiene un peso de 689 KB. En la imagen de la derecha, se ha ajustado la calidad de la imagen en un 30% y aunque visualmente no se ve la imagen con una calidad degradada, el tamaño se ha reducido hasta los 27.05 KB.

Con sólo una imagen hemos ahorrado una cantidad considerable de KB en nuestra web. Si lo haces con todas las imágenes de la web, el ahorro es muy significativo. Esto que hemos hecho es un sencillo ejemplo de optimizar una imagen para la web.

Cuál es el mejor formato de imagen para la web

Existen distintos formatos de imagen que podemos usar para nuestra web. Dependiendo del tipo de formato que utilicemos, conseguiremos más o menos compresión en la imagen, con más o menos calidad. Hay muchos formatos de imagen, pero los más habituales en la web son los siguientes:

• JPG o JPEG
  Es el formato más habitual de todos. Se trata de un formato de archivo que comprime el tamaño del archivo, sin que se note apenas en la calidad de la imagen. Además de la web, es utilizado por cámaras la mayoría de las cámaras de fotos digitales, móviles, etc.
• PNG
  El formato PNG se comprime sin pérdidas, lo que consigue archivos de gran calidad, pero con un tamaño mayor que el de JPG. Se suele utilizar para comprimir los logotipos o los iconos que necesiten un fondo transparente, pero no para las imágenes web, ya que JPG es más efectivo.
• WebP
  Es un formato de los llamados nueva generación y está creado por Google con la intención de sustituir a otros formatos, como JPEG o PNG. Su nivel de compresión es mayor que en el resto y la calidad de la imagen no se ve afectada, mejorando incluso a JPG. El handicap que tiene es la compatibilidad, ya que algunos navegadores o CMS no lo soportan, al menos por el momento.
• SVG
  El formato SVG es un formato de imágenes vectoriales para web. Su uso está destinado a imágenes de vectores, como ilustraciones o logos, no a fotografías. Lo mejor de SVG es que, al ser vectorial, puede ampliar y reducir su tamaño sin que cambie la calidad del original.

Como hemos comentado, existen otros formatos de imagen, pero la mayoría de las veces usarás estos, siendo JPG y PNG los más habituales, con WebP pisando fuerte por detrás.

Optimizar imágenes en WordPress

Si usas WordPress como gestor de contenidos, tienes muchas opciones para optimizar las imágenes de manera automática. Sólo tienes que instalar alguno de los muchos plugins que tienes disponible para hacerlo, configurarlo a tus necesidades y olvidarte de hacer nada más.

La mayoría de los plugins de optimización de imágenes son gratuitos o tiene una opción gratuita con un número limitado de imágenes que pueden comprimir. Estos son los más populares:

• ShortPixel Image Optimizer
  Una de las opciones más utilizadas en WordPress. Puede optimizar todas las imágenes que tengas subidas en WordPress y todas las que subas. Compatible con los nuevos formatos como WebP. 100 créditos gratuitos al mes, para más cantidades hay que pasar por caja.
• Imagify Image Optimizer
  Con la posibilidad de comprimir y cambiar el tamaño de las imágenes al mismo tiempo, Imagify es una de las opciones más utilizadas en WordPress y compatible con WebP. Dispone de 20 MB al mes de imágenes comprimidas en la versión gratuita.
• Smush
  Más de 1 millón de instalaciones activas, Smush es capaz de reducir el tamaño de las imágenes de WordPress sin ninguna restricción de límites mensuales, aunque el tamaño máximo de la imagen que subas no puede superar los 5 MB. Sin WebP en la versión gratuita.

Estas son algunas de las opciones, pero ya sabes que, en WordPress, siempre tienes otras alternativas disponibles, por si ninguna de estas te convence.

Conclusión

Optimizar las imágenes es una tarea obligatoria, al menos si te preocupa algo la velocidad de carga o el posicionamiento web. Si no tienes Photoshop, dispones de aplicaciones gratuitas, como Krita o el popular Gimp, aunque también encontrarás servicios online gratuitos exclusivos para optimizar imágenes.

En cualquier caso, tienes varias opciones y muchas de ellas gratuitas para optimizar las imágenes para web, por lo que no hay ningún motivo para no hacerlo, sobre todo viendo todas las ventajas que tiene.