6

Optimizando Imágenes

7Feb
en CSS, Desarrollo web, Herramientas, HTML, Tutoriales

Hoy en día la web sin imágenes sería muy aburrida, por lo que es muy importante no solo tener imágenes sino optimizarlas para que nuestro navegador las cargue en el menor tiempo posible. Aquí van algunos consejos.

Utiliza Data-URI para imágenes pequeñas

Data-URI es una forma de poner en el código de la página el contenido de la URI a la que apuntarías normalmente, por ejemplo, en vez de poner en el atributo src de una etiqueta <img> una dirección, pondríamos un código que representa la imagen y no habría que descargarla. Veamos:

Con Data-Uri:

<img src='data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAEAgQAhIOEAMjHyABIR0gA6ejpAGlqaQCpqKkAKCgoAPz9%2FAAZGBkAmJiYANjZ2ABXWFcAent6ALm6uQA8OjwAiIiIiIiIiIiIiI4oiL6IiIiIgzuIV4iIiIhndo53KIiIiB%2FWvXoYiIiIfEZfWBSIiIEGi%2FfoqoiIgzuL84i9iIjpGIoMiEHoiMkos3FojmiLlUipYliEWIF%2BiDe0GoRa7D6GPbjcu1yIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA' />

Con una ruta:

<img src='/img/wikipedia.png' />

Esta técnica también se puede utilizar en los CSS para la propiedad background-image:

background-image: url('data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAAAAAAAAAAAAAAAAAEAAAAAAAAAAEAgQAhIOEAMjHyABIR0gA6ejpAGlqaQCpqKkAKCgoAPz9%2FAAZGBkAmJiYANjZ2ABXWFcAent6ALm6uQA8OjwAiIiIiIiIiIiIiI4oiL6IiIiIgzuIV4iIiIhndo53KIiIiB%2FWvXoYiIiIfEZfWBSIiIEGi%2FfoqoiIgzuL84i9iIjpGIoMiEHoiMkos3FojmiLlUipYliEWIF%2BiDe0GoRa7D6GPbjcu1yIiIiIiIiIiIiIiIiIiIiIiIiIiIiIiIgAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA');

Utilizar Data-Uri puede reducir el número de solicitudes HTTP requeridas para cargar la página, sin embargo, tiene la desventaja de aumentar el tamaño de tu HTML/CSS considerablemente si tienes imágenes grandes. Puedes utilizar esta herramienta para crear tus data-uri.

Utiliza sprites

Ésta técnica es sobre agrupar varias imágenes en un sólo archivo.

sprite

Y después posicionarlas con CSS.

.icon-foo {
  background-image: url('mySprite.png');
  background-position: -10px -10px;
}
.icon-bar {
  background-image: url('mySprite.png');
  background-position: -5px -5px;
}

Como resultado, has reducido dramáticamente el número de solicitudes HTTP y evitado cualquier retraso potencial de otros recursos en tu página.
Cuando estás usando tu sprite, evita dejar mucho espacio en blanco entre imágenes. Esto no afectará al tamaño del archivo, pero tendrá efecto en el consumo de memoria.

Pese a que casi todo el mundo conoce las sprites, esta técnica no está demasiado extendida, tal vez debido a que los desarrolladores no usan herramientas automatizadas para generar sprites. Aquí les dejo esta herramienta para Windows que permite crear sprites a partir de las imágenes de un directorio, además de crear el CSS correspondiente con las clases para usar como background.

ventanaSprite

Sprite Generator

0.14 MB

No cambies el tamaño de las imágenes en el HTML

Muchos desarrolladores piensan que cambiar los atributos width y height les permitirá reducir el tamaño de las imágenes, aunque se visualice en el tamaño definido se enviarán docenas de kilobytes innecesarios. Por lo tanto, debes utilizar las imágenes con el tamaño con que se presentan en la página.

Optimiza las imágenes

Los archivos de imágenes contienen muchísima información inútil en la Web. Por ejemplo una foto JPEG puede tener metadatos Exif sobre la cámara (fecha, modelo de cámara, ubicación, etc.). Una imagen PNG contiene información sobre colores, metadatos, y a veces incluso una miniatura incrustada. Nada de esto es usado por el navegador y contribuye al aumento del tamaño del archivo.
Hay herramientas para la optimización de imágenes que borrarán estos datos innecesarios y te darán un archivo más ligero sin afectar a la calidad. Decimos que hacen una compresión sin pérdida.

Para mejorar la percepción de rendimiento del usuario, deberías también transformar todos tus archivos JPEG en JPEGs progresivos. Los JPEGs progresivos son soportados por una gran cantidad de navegadores, son muy simples de crear, y no conllevan ninguna pérdida de rendimiento significativa. La ventaja es que la imagen aparecerá más pronto en la página.

Una buena opción para para optimizar imágenes es RIOT . Puedes descargar al final de la imagen esta herramienta  para Windows.

ventanaOpt

Radical Image Optimization Tool

1.67 MB

Fuente: https://browserdiet.com/

6 Comentarios

  1. eliecerSR dice:

    Necesito algún ejemplo de como puedo brindarle a un usuario la opción de instalar un plugin en el navegador Firefox que no tenga instalado.

    La parte de comprobar el navegador y saber si tiene un plugin instalado y la versión del mismo ya la tengo resuelta.

    Lo que necesito es brindarle la opción de instalar el plugin (tengo el el .dll), para que pueda visualizar correctamente el contenido sin tener que mostrarle un mensaje que lo redireccione a Internet.

  2. LuisM dice:

    Muy completo el artículo, son técnicas imprescindibles para todo desarrollador web. Saludos y sigan publicando

  3. AndyT dice:

    El RIOT me da un 403… ¿hay acceso desde fuera de la uci a los archivos?

  4. F@lcón dice:

    Tufaaaooo este artículo, para mi el mejor, artículos de este tipo es que me gustaría que siguieran haciendo. Un saludo para los admin.

  5. Legolas dice:

    Saludos tropa eso, eso
    hay que seguir optimizando nuestra web nacional y creo este artículo
    es bueno para los webmasters que inician.
    gracias por la ayuda. Sigan pulicando temas de optimización web.

  6. Le dice:

    Hola, seria bueno si pusieran el codigo fuente del DATA-URI para descargarlo, para asi utilizarlo, me parece muy buena la herramienta, saludos a todos

Dejar un comentario