Bit - loader

Optimización de sitios y aplicaciones Web – Segunda Parte

   Artículo | Optimización Web Bit - Optimización de sitios y aplicaciones Web – Segunda Parte
Marino Posadas | 01/03/18

Continuamos con esta miniserie dedicada a la optimización de sitios Web, donde lo dejamos en la entrada anterior, hablando de la optimización de recursos gráficos, cuya descarga es uno de los posibles cuellos de botella que encuentran nuestras aplicaciones.

Tras ver las ventajas e inconvenientes de los 3 formatos principales (JPEG/JPG, GIF y PNG) y las recomendaciones de uso para cada uno de ellos, teníamos pendiente la labor de optimizar el peso de las imágenes, y sugeríamos varias opciones (todas ellas gratuitas, y basadas en la eliminación de los metadatos de la imagen y la reescritura del contenido con distintos algoritmos de compresión, que en algunos caso permiten ajustar los resultados):

1) Por un lado, disponemos de una herramienta “on-line” como es JPEG Optimizer, que nos guía en el proceso, aunque tiene el inconveniente de que solo funciona bien con formatos JPG/JPEG, aparte de tener que trabajar con las imágenes individualmente. Obtiene una excelente ratio de compresión, eso sí, como podemos ver en el informe que aparece después de un proceso de optimización:

 

 

2) La utilidad Riot (Radical Image Optimization Tool), que puedes encontrar en http://luci.criosweb.ro/riot/,  es una aplicación de escritorio, y, aunque no consigue el nivel de optimización de la anterior, dispone de muchas más opciones y posibilidades de configurar el proceso, por lo que resulta una opción mucho más interesante para el desarrollador.

Además, soporta todos los tipos de gráficos (JPG/JPEG, PNG y GIF), y contiene varias utilidades que permiten un ajuste fino del proceso, incluyendo la posibilidad de retocar la imagen, aplicarle filtros, editarla (en forma básica), etc.

La ratio de optimización que se consigue, dependerá de los ajustes indicados y del nivel de calidad que pretendamos en la versión final, y también dispone de la posibilidad de seleccionar un perfil de optimización y aplicarlo como un proceso “batch” a todos los archivos de un directorio, con lo que nos evitamos tener que hacer el proceso de uno en uno.

La captura siguiente, nos da una idea de su aspecto:

 

 

3) Finalmente, disponemos de complementos que podemos usar desde los IDE’s de Visual Studio o Visual Studio Code, que se instalan rápidamente. Desde Visual Studio, por ejemplo, si instalamos “Image Optimizer” (lo encontramos en “Extensiones y Actualizaciones”, del menú “Herramientas”), cuando seleccionamos una imagen en el Explorador de Soluciones nos aparece una opción triple:

1) “Lossless“: Optimización sin pérdida (la imagen resultante es idéntica al original, pero consigue optimizaciones notables)

2) “Lossy“: Optimización con pérdida (la pérdida es mínima), para optimizaciones similares a las herramientas anteriores.

3) “Copy base64 data Uri to Clipboard“: Que convierte el gráfico en su equivalente del estándar XML Base64 para poder incrustarla como propiedad dentro de un archivo CSS o almacenarla en local mediante un API de localStorage o IndexedDB.

Una vez instalado el complemento, veremos una opción de menú con estas posibilidades:

 

 

En la próxima entrega, veremos cómo optimizar iconos mediante el uso de glifos (especialmente importante en versiones para móviles), así como los recursos gratuitos para hacerlo desde fuera o dentro del IDE.


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.