Optimización de las imágenes

Aunque Internet se basa principalmente en el hipertexto, desde sus inicios que las imágenes han tenido un papel muy relevante frente a otros elementos multimedia.

Aunque por lo general hoy en día hay 3 formatos de imágenes que son soportados por la red (JPEG, GIF y PNG) cada programa y sistema genera las imágenes a su manera, algunas de ellas, aunque la imagen se vea perfectamente, no es la óptima.

CANTIDAD DE COLORES
Categoría: Imágenes

Cada formato de imagen tiene su forma de guardar la paleta de colores. Algunas guardan todos los colores y otras sólo los colores en uso.

Por lo general, el formato que suele fallar más a la hora de reducir la cantidad de colores de la paleta, y por tanto ocupa más el archivo de la imagen, es el GIF. Para reducir la paleta podemos usar algún software como ImageMagick o Smush.it.

REDUCIR EL PESO DE LAS IMÁGENES
Categoría: Imágenes

Aunque uno de los objetivos a la hora de gestionar imágenes sea que se vean de la mejor forma posible, está claro que el tamaño es el principal reto. Es por esto que hay ciertas formas de mejorar el tamaño de las imágenes sin perder calidad en las mismas.

  • Intentar convertir los GIF en PNG si reducen su tamaño; por lo general hacer esto suele reducir el tamaño de los archivos cerca de un 20%, por ejemplo con ImageMagick.
  • Optimizar los GIF animados; una de las herramientas que permite hacerlo es Gifsicle.
  • Optimizar los PNG; puede llegarse a reducir sobre un 15% con herramientas como Pngcrush.
  • Optimizar los JPG; puede reducirse el tamaño cerca de un 10% con herramientas como jpegtran.

 
CODIFICACIÓN DE LOS JPEG
Categoría: Imágenes

Los archivos JPEG (Joint Photographic Experts Group), que más que un formato de archive de imagen, es un sistema de compresión, permiten varias formas de compresión.

Tras varios análisis sobre la mejor forma de comprimir, los resultados dicen que, si el archivo ocupa menos de 10 kilobytes, la mejor forma de comprimir es usando el algoritmo “baseline” o “estándar”. En cambio, en aquellos archivos que ocupen más de 10 kilobytes, la mejor forma de compresión es la de “progresive”.

Un detalle del sistema de compresión de los archivos JPEG es que se basa en los bloques de 8×8 de forma que se puede comprimir en base a esta regla. En la imagen, el primer recuadro está alineado en el bloque de 8×8 pero el segundo bloque no lo está.

Otro detalle importante de la calidad delos JPEG es que hay ciertos límites. Por ejemplo, comprimir una imagen al 95% o al 100% es inapreciable, pero el tamaño del fichero varía muchísimo. De la misma forma, comprimir a un 50% puede provocar una pérdida excesiva de calidad y, sin embargo, comprimir a un 51% puede llegar a ocupar menos tamaño el fichero y una menor pérdida.

CODIFICACIÓN DE LOS PNG
Categoría: Imágenes

El formato de imágenes PNG (Portable Network Graphics) se creó como sustitución del sistema GIF que tiene licencia propietaria y, además, se mejoró ya que se conocían muchos problemas de los GIF y JPEG.

Este tipo de imágenes tiene 5 posibilidades de almacenamiento: Grayscale (escala de grises), Truecolor (color verdadero), Indexed-color (color indexado), Grayscale with alpha (escala de grises con canal alfa) y Truecolor with alpha (color verdadero con canal alfa). Además, el Indexed-color permite almacenar información como bit transparency (cada píxel puede ser totalmente transparente o totalmente opaco) o palette transparency (cada píxel puede ser semitransparente).

Uno de los mayores problemas es que la mayoría de programas no acaba de permitir elegir entre todos estos formatos y opciones, por lo que siempre será recomendable el uso de herramientas como OptiPNG o pngcrush que convertirán la imagen a la mejor opción posible. En este caso, lo mejor será guardar la imagen en escala de grises si es el caso, o en color verdadero si es en color, ya que estas herramientas automáticamente comprueban si se puede reducir a color indexado.

Otra de las formas de reducir el tamaño de los ficheros en PNG sin perder una cantidad excesiva de calidad es utilizando la posterización (por ejemplo, a un 40%). Aunque este sistema implique una pérdida de calidad, puede reducir sobre un 25% el tamaño final del fichero.

ESCALADO DE IMÁGENES
Categoría: Imágenes

En el HTML, cuando se habla del elemento <img> encontramos que los atributos de ancho y alto son obligatorios, ya sea por el propio HTML o mediante CSS. Esto ayuda a la hora de renderizar la página ya que se sabe cuál es el tamaño de la imagen, como interactuará con el resto de elementos. En caso de no indicarlo, el navegador tendrá que esperarse a descargar por completo la imagen, analizarla y sacar el tamaño que ocupa para poder situarla en la página.

Incluso esto, en muchas ocasiones el tamaño real de las imágenes no coincide con el que se ha indicado en la página. Esto implica que, una vez se ha descargado la imagen, el navegador tenga que dedicar cierto tiempo a recalcular el tamaño de la imagen y generar la imagen que verá el usuario, lo cual implica un tiempo bastante elevado.

En estos casos es siempre mejor disponer de la imagen en los 2 tamaños, el original y uno que se haga generado y cacheado anteriormente que será el que se muestre por pantalla.

OPTIMIZAR LOS CSS SPRITES
Categoría: Imágenes

Cuando generamos ficheros de CSS Sprites hay que tener ciertas consideraciones para saber cuál es la forma óptima de organizar los distintos elementos que incluirá esta “imagen de imágenes”.

Para comenzar, los análisis que se han hecho dicen que es mejor disponer las imágenes en horizontal que en vertical, de forma que la imagen resultante siempre debe medir más de largo que de alto.

Otro detalle a tener en cuenta, y principalmente porque las imágenes que componen este fichero suelen ser iconos, hay que intentar combinar los colores para que el resultado quede en GIF 256 o PNG 8, que, en definitiva viene a resumirse en dejar la imagen resultante en 256 colores u 8 bits.
Y, como no, una de las cosas por las que se utiliza este sistema es para reducir el tamaño de las peticiones, por lo que, como llamaremos a los distintos iconos del interior mediante CSS, hay que intentar no dejar espacios entre las imágenes y aprovechar al máximo todos los píxeles. 

USAR UN «FAVICON.ICO» PEQUEÑO Y CACHEABLE
Categoría: Imágenes

Los “favicon” son esos pequeños iconos que aparecen al lado de las direcciones URL de los navegadores más modernos y que, en un principio, se usaban como acompañamiento en los listados de favoritos.

Estos iconos, por norma general, son llamados de forma automática por los navegadores, y si no se les indica su existencia en una dirección concreta, se buscan automáticamente como el fichero “favicon.ico” en la carpeta raíz del dominio.

Como este fichero no suele cambiar, se recomienda que exista (o en su defecto tener un fichero que ocupe 0 bytes para evitar generar errores Código 404) y que esté cacheado por mucho tiempo (incluso de forma indefinida).

Además, debido a su uso, es muy recomendable que el tamaño del mismo no sobrepase 1 kilobyte.

ELEMENTOS DE IMÁGENES SIN CONTENIDO
Categoría: Imágenes

En algunos casos los sitios web pueden tener elementos HTML de imagen sin contenido, algo similar a <img src=””> o incluso creado con JavaScript.

Aunque las nuevas versiones de los navegadores ya mejoran el tratamiento de estos casos, que básicamente bloquean la conexión, algunos como Internet Explorer intentan traerse todos los elementos del directorio actual, Safari o Google Chrome intentan cargar la propia página como imagen… esto puede provocar una cantidad de tráfico sin sentido en peticiones HTTP además de provocar problemas en la experiencia del usuario, como la destrucción de información, pudiendo generar problemas con cookies.
 
HERRAMIENTAS PARA OPTIMIZAR IMÁGENES
Categoría: Imágenes

Herramientas en línea:

Herramientas de escritorio: