¿Por qué optimizar imágenes para Web? Publicado en: lun, 18 jul 2016 10:40:00 -0500
  • blog brigada
   

Por Fabián González

Definición de términos:

Pixel: abreviatura de Picture Element, es un único punto en una imagen gráfica. Los monitores gráficos muestran imágenes dividiendo la pantalla en miles (o millones) de pixeles, dispuestos en filas y columnas. Los pixeles están tan juntos que parece que estén conectados.

Información tomada de: ¿Qué es un Pixel?. Masadelnate.com. recuperado de: https://www.masadelante.com/faqs/pixel

¿Por qué optimizar las imágenes?

Optimizar nuestras imágenes para ser cargadas en tu sitio Web es un proceso indispensable para garantizar la carga efectiva del sitio en un tiempo prudente (según la velocidad de internet desde donde se esta visualizando).

En ocasiones descargamos nuestras imágenes tomadas con cámaras profesionales, convencionales o incluso celulares y que en la mayoría de casos superan los 1000 pixeles; usando la herramienta "ajuste de tamaño" en la plataforma Liferay, reducimos la imagen a conveniencia. Sin embargo, a pesar de que ajustemos los parámetros de la imagen a 300 pixeles por ejemplo, nuestra pagina estará cargando la fotografía original de 1000 pixeles, proceso que retrasa la carga de nuestro sitio Web a pesar de que el usuario visualice la fotografía a 300 pixeles.

Veamos un ejemplo:


Figura 1.1: Se ha cargado una imagen "x" y se ha ajustado el tamaño según la necesidad del usuario. 


Figura 1.2: El tamaño original de la imagen "X" como se encuentra almacenada en el servidor.

Otra razón por la cual es importante optimizar las imágenes tiene que ver con la proporción de la misma. Las imágenes pueden ampliarse o reducirse mas no es conveniente alterar su proporción (casos excepcionales). Optimizar utilizando un editor de imagen (diferente opciones en el mercado) nos permitirá mantener la proporción, evitando deformarla como se ve en la figura 2.1. 


Figura 2.1: la imagen del banner ha perdido su proporción original. 

Finalmente otra de los aspectos a tener en cuenta es el color de la imagen y las transparencias de ser el caso. Una vez optimicemos nuestras imágenes, garantizaremos la correspondencia de color para un destino Web. Sin olvidar que algunas plataformas de edición nos permiten seleccionar diferentes formatos para exportar nuestras imágenes que favorecen su calidad y peso.

¿Cómo se hace?

Solicita una capacitación para optimizar imágenes a través del formulario de la Brigada Web. Responderemos a tu solicitud para agendar una cita.