Algunos pasos para acelerar su sitio web de imágenes pesadas

Las imágenes son un componente clave de cada sitio web. Según el archivo HTTP, las imágenes representan más del 60% de los datos subidos a las páginas web. Siendo un componente tan crítico de casi todas las páginas web, ya sea de comercio electrónico, noticias, sitios web de moda, blogs o portales de viajes, la optimización de la imagen es importante y tal vez el fruto más bajo, si se busca acelerar su sitio web de imágenes pesadas. La optimización de las imágenes en su sitio web se puede dividir en 3 categorías: carga más ligera, carga menos y carga más rápida. Las 5 técnicas que discutimos en este artículo o cualquier otra técnica que encuentres, probablemente pertenecerían a cualquiera de estas 3 categorías. Así que, empecemos y veamos algunas técnicas simples que puede implementar hoy para hacer un progreso significativo en la optimización de su sitio web de imágenes pesadas.

Redimensiona tus imágenes

Esto es una necesidad. Cambie el tamaño de sus imágenes a exactamente lo que se requiere en su sitio web. Y no, no estoy hablando de redimensionar usando CSS o en el HTML. Estoy hablando de redimensionar la imagen en el servidor y luego enviarla al navegador. Por ejemplo, tienes un 4000x3000pximagen para un producto que quieres incluir en tu sitio web de comercio electrónico. En su sitio web, sin embargo, debe mostrar una imagen mucho más pequeña de este producto. Podría ser una imagen de 200x300px en la página de listado de productos y una imagen de 800x1000px en la página de detalles del producto. Asegúrese de reducir la imagen original a estas dimensiones ANTES de enviarla al navegador. Las imágenes redimensionadas son mucho más pequeñas que la imagen original y se cargarán mucho más rápido que la imagen original.

En mi opinión, el redimensionamiento incorrecto de las imágenes es la mayor área de optimización en la mayoría de los sitios web. Y a menudo nosotros, como desarrolladores, tendemos a pasarlo por alto. Considere el siguiente escenario: Empiece con imágenes que tengan el tamaño perfecto para su nuevo sitio web. En los próximos meses, el diseño de su sitio web cambia y también los requisitos de tamaño de las imágenes. Sin embargo, en lugar de generar nuevas imágenes para cumplir con estos nuevos requisitos dimensionales, lo cual es una tarea en sí misma, se conforma con una alternativa cercana. Por ejemplo, utilice un 300x200pximagen donde un 200x200pximagen habría funcionado. Supongo que esto habría ocurrido con todos.



En el ejemplo anterior, la diferencia puede parecer pequeña para una sola imagen en términos de kilobytes. Pero aún así es del 21%. Esta pequeña diferencia, añadida a muchas imágenes, tiene el potencial de acelerar su sitio web y reducir su consumo de ancho de banda en un 21%. El mejor escenario es tener un servidor de imágenes que pueda redimensionar una imagen a cualquier dimensión, en tiempo real, simplemente cambiando el URL de la imagen. De esta manera, cada vez que cambie el requisito de dimensión de la imagen, todo lo que necesita para obtener sus nuevas imágenes es especificar esa dimensión en la URL. Hay muchas implementaciones de código abierto y del lado del servidor que puede implementar por su cuenta. ImageKit es uno de esos servicios de terceros que, además de todas las demás características, proporciona redimensionamiento y recorte en tiempo real basado en la URL. Y también puedes usarlo en todas tus imágenes existentes en unos pocos minutos de configuración.

Optimiza tus imágenes

El siguiente paso para acelerar su sitio web de imágenes pesadas es elegir el formato y la calidad adecuados para cada imagen de su sitio web. JPG, PNG y GIF son los formatos de imagen más comunes que se utilizan actualmente en la web y son adecuados para diferentes casos de uso. Existe otro formato de imagen relativamente nuevo llamado WebP que combina lo mejor de estos formatos de imagen, es un 30% más pequeño en tamaño y es compatible con casi el 75% de los navegadores modernos.

La comparación de tamaños anterior muestra la importancia de elegir el formato de imagen correcto para sus imágenes. Aunque las imágenes parecen idénticas, varían mucho en tamaño. Dadas las enormes ventajas de rendimiento, debería entregar sus imágenes en formato WebP siempre que sea posible. En otros navegadores, puede seguir entregando el formato de imagen original. La calidad de la imagen, en resumen, es una medida de cómo se ve la imagen visualmente. Existe una correlación directa entre la calidad y el tamaño de la imagen. Una mayor calidad da como resultado un mayor tamaño de la imagen y, como resultado, un sitio web más lento. Los diferentes métodos de compresión de imágenes aprovechan las limitaciones del ojo humano para distinguir entre pequeños cambios en la información de color para