Hay un tipo particular de contenido que domina Internet, y sin lugar a dudas se trata de las imágenes, que tienen el gran rol de hacer que todo se vea más bonito en nuestro sitio web, o simplemente, que se vea mejor e incluso en algunos casos, que se entienda mejor una idea (recuerden que una imagen puede valer más que mil palabras). Por eso hoy veremos cómo optimizar las imágenes de tu sitio web.
Se estima que las imágenes conforman (en promedio) más del 60% del peso de un sitio web. Esa es una gran cifra, sin embargo llama muchísimo la atención que muchas páginas web utilicen imágenes mal optimizadas. Optimizar las imágenes de tu sitio web no solo sirve para reducir el peso y complejidad de un sitio, sino que además puede ayudar a mejorar la experiencia del usuario y también nos permite ahorrar transferencia.
3 Reglas para Optimizar las Imágenes de tu Sitio Web
Hay tres aspectos importantes a tener en cuenta cuando hablamos de imágenes optimizadas: la compresión de las imágenes, la carga de imágenes y la forma en qué operamos con imágenes.
[wp-svg-icons icon=»image» wrap=»i»] Compresión de imágenes
La compresión es un punto tan importante que incluso se han creado herramientas online para optimizar imágenes. Generalmente el peso de las imágenes suele ir de la mano con el formato de imagen que estamos utilizando, y el más popular de todos sin lugar a dudas es JPG, de hecho se estima que casi el 50% de las imágenes de Internet existen en dicho formato.
JPG es un formato que usa una compresión con pérdida, es decir que logra darnos imágenes livianas al costo de un poco de calidad. Otros formatos como GIF o PNG realizan una compresión sin pérdida, y como resultado dan una imagen más pesada pero de mayor calidad. Con esto en mente, podemos darle un rol a cada tipo de formato:
- JPG: ideal para fotografías o imágenes complejas.
- PNG: es óptimo para imágenes simples o que necesiten transparencia, por ejemplo logos.
- GIF: se utiliza principalmente para animaciones y, en algunos casos, para imágenes de baja resolución.
- Por supuesto existen otros formatos ahí fuera, pero estos tres son los más utilizados, así que recuerda siempre usar el formato adecuado según el tipo de imagen que tengas entre manos.
Si quieres saber si estás utilizando las imágenes adecuadas, puedes recurrir a herramientas en línea como PageSpeed Insights o WebPagetest, que analizarán tu sitio web y realizarán un informe sobre los puntos del mismo que puedes mejorar.
[wp-svg-icons icon=»spinner-1″ wrap=»i»] Carga de imágenes
Ahora que tus imágenes están optimizadas debes enfocarte en mejorar su carga, y sobretodo, en que carguen bien para todos los usuarios, y eso por supuesto incluye a quienes usan dispositivos móviles.
Aquí es donde entra en juego el diseño responsive, que permite que las imágenes se adapten a cada usuario. ¿Pero cómo podemos lograr esto? Pues existen varios métodos para hacerlo:
- Una solución es almacenar varias copias de una imagen en distintos tamaños, y permitir que el navegador del usuario elija la más adecuada. Para que esto sea posible es necesario hacer uso del atributo srcset que especificará las múltiples imágenes que el navegador puede elegir. Lo bueno de esto es que la decisión de cuál imagen usar se toma del lado del cliente.
- Si no quieres que el navegador se encargue de todo, entonces utiliza el elemento picture para indicar cuándo se debe utilizar una imagen en lugar de otra.
- Para navegadores viejos, o para quienes buscan otras funciones, existen más soluciones como Picturefill o Imager.js.
Otros dos puntos notables son la prioridad de las imágenes y la carga diferida (Lazy Loading):
- El primero consiste básicamente en colocar imágenes importantes de forma que el usuario no necesite desplazarse para poder verlas, es decir que las imágenes con menor prioridad deben quedar fuera del área visible inmediata cuando alguien visita tu página.
- Con respecto al lazy loading, se trata de cargar las imágenes solo cuando son necesitadas. Esto último ayuda a que no se cargue contenido que no es necesario, permitiendo que tengamos una página más eficiente, aunque debemos tener en cuenta que esta técnica podría llegar a tener un impacto negativo para los buscadores (es decir, a nivel de SEO).
Finalmente, para darle el toque final al tutorial de optimizar las imágenes de tu sitio web recuerda siempre usar un CDN. Por medio de una red de distribución de contenido podrás cachear tus archivos estáticos (incluyendo imágenes) y hacer que lleguen a los usuarios más rápidamete. Los CDNs son tan buenos e importantes que en Infranetworking están disponibles rápidamente para todos nuestros clientes de planes compartidos, quienes pueden activar CloudFlare directamente desde cPanel.
[wp-svg-icons icon=»wrench» wrap=»i»] Operaciones con imágenes
Estas técnicas sobre las que hemos estado hablando son muy buenas, pero hay que saber llevarlas a la práctica, y sobre todo hay que tener las herramientas ideales para hacerlo. Veamos cuáles herramientas son buenas para cada formato:
Conclusión
Como hemos visto, optimizar las imágenes de tu sitio web va mucho más allá de simplemente reducir un poco el peso de las mismas. Es importante usar los formatos adecuados en los lugares adecuados, configurar nuestro sitio para que se distribuyan según la necesidad del usuario y por supuesto utilizar siempre herramientas óptimas. Si logras optimizar tus imágenes de forma debida entonces de seguro notarás una mejora en la velocidad de tu página web, así como en el consumo de transferencia.
