Bit - loader

Optimización de sitios y aplicaciones Web – Primera Parte


Netmind - Optimización de sitios y aplicaciones Web – Primera Parte    Artículo | Optimización Web
Marino Posadas | 27/02/18

Google ha hecho (y sigue haciendo) estudios sobre la aceptación y uso de sitios web,  especialmente en el móvil. Esos trabajos demuestran que un factor crítico es el tiempo de respuesta de las Landing Pages o páginas iniciales del sitio. Y como consecuencia, sugiere varias técnicas aplicables, no solo a sitios o aplicaciones Web nuevas, sino a los ya existentes.

De hecho, en Angular, su marco de desarrollo front-end más popular han invertido mucho tiempo en el proceso de optimización inicial a través de técnicas de Bundling and Minifying (Empaquetado y Minimización) de los recursos utilizados. Esto implica la creación de “paquetes de distribución” que contienen varias librerías del mismo lenguaje, que pueden ser distribuidas juntas para evitar peticiones HTTP extra al servidor.

Pero eso es solo una parte del problema. El otro gran problema estriba en los componentes visuales: iconos, imágenes, videos (y audio, aunque no sea visual), gráficos vectoriales, etc. En esta primera entrada quiero analizar las técnicas más importantes relacionadas con el tratamiento de imágenes.

 

Minimización de imágenes

La primera medida es la de la minimización de imágenes. Las imágenes son imprescindibles en la mayoría de los sitios web, pero no siempre se presta atención a la forma en que se distribuyen. Los 3 puntos en que podemos centrarnos son:

  • Formato de imagen: Distinguir entre GIF, PNG y JPG.
  • Tamaño de la imagen.
  • Almacenamiento de la imagen en el servidor.

Los factores a tener en cuenta al elegir un formato son el número de colores en la imagen y si se tendrá que reducir el tamaño. Cuando se reduce el tamaño de una imagen, es posible que pierda calidad. Un formato que se puede guardar sin perder calidad (un formato sin pérdida) generalmente será un tamaño de archivo mayor debido a la información que se debe conservar. Algunos formatos son con pérdida, lo que significa que a medida que los guarde en diferentes tamaños, perderán calidad. A continuación se muestra la misma imagen guardada tres veces. Se puede ver que el tamaño del archivo varía según el formato utilizado:

 

Optimización de sitios y aplicaciones Web – Primera Parte 0

 

Los valores indicados en las imágenes de más arriba son solamente para un numero bajo de colores. Al aumentar este número los valores cambian considerablemente (el formato PNG soporta hasta 4 canales de color: RGB y A, siendo éste último –Alpha- el canal de transparencia).

 

En cuanto a sus características, cada uno de ellos tiene diferentes fortalezas y habilidades:

  • Las imágenes GIF se consideran sin pérdidas, ya que pueden conservar la calidad si se guardan una y otra vez; sin embargo, están restringidos en la cantidad de colores que almacenan. En general, una imagen GIF solo almacenará 256 colores. Si usa imágenes con poca cantidad de colores, como un logotipo, entonces los GIF a menudo pueden ser una buena solución. Las imágenes GIF también pueden almacenar imágenes animadas e incluir transparencia.

 

  • Las imágenes JPEG permiten pérdidas, por lo que si guardas el mismo archivo varias veces, tienes es posible que pierdas claridad. En el lado positivo, los archivos JPEG pueden almacenar una gran cantidad de colores. Si tienes imágenes con una gran cantidad de colores, como fotos, entonces un formato de imagen JPEG puede ser una mejor opción que otros formatos.

 

  • El formato PNG tampoco tiene pérdida (como los GIF) y se comprime fácilmente. Para imágenes estándar, el formato PNG generalmente va a hacer un mejor trabajo ahorrando espacio con un tamaño de archivo más pequeño. Los archivos PNG también pueden almacenar animaciones, aunque esto resulta más complejo que con los GIF. Pueden almacenarse en múltiples modos, lo que significa que se pueden establecer diferentes niveles de paleta de colores. Si se usa una paleta de 256 colores, se puede configurar de un modo diferente al de una imagen usando una paleta de colores verdaderos de 24 o 32 bits.

 

Optimización de sitios y aplicaciones Web – Primera Parte 1

 

De forma que tendremos que preguntarnos en cada caso qué es lo que queremos preservar: ¿Necesitamos alguna animación básica (GIF)?, ¿No queremos que se pierda calidad al hacer zoom en el móvil (PNG)? ¿O necesitamos minimizar a toda costa (JPG)?

El tamaño es otro factor y siempre deberíamos de tener en cuenta presentar el tamaño adecuado sin mandar al navegador una minimización (que es una operación extra). Lo idóneo es que el tamaño almacenado sea el que queremos por defecto en la página que lo muestra.

Finalmente, queda la labor de optimizar el peso de una imagen a partir de una original más grande una vez determinados los factores anteriores.

Hay varias soluciones para eso: tenemos JPEG Optimizer, que nos guía en el proceso, la utilidad Riot (Radical Image Optimization Tool), disponible en la web de RIOT y algunas otras utilidades si estamos desde un IDE como Visual Studio o Visual Studio Code.

 

Pero eso, y la optimización de iconos lo trataremos en una próxima entrada. ¡No os la perdáis!


Marino Posadas


Entradas relacionadas
Nuestro sitio utiliza cookies para análisis. Si no estás seguro de ello, echa un vistazo a nuestra política de privacidad.