Optimización de Imágenes

Escrito por Agustín Iglesias, en "SEO Asesor"

Las imágenes utilizadas en una página web normalmente son creadas por un diseñador gráfico o un diseñador de páginas web, para los que la calidad es la principal preocupación (porque este es el estándar por el cual son juzgados generalmente). Por lo tanto, no es de extrañar que la optimización de imágenes sea a menudo ignorada. Podemos bajar el peso de una imagen en 10KB o 20KB sin pérdida visible de calidad. El tamaño de las imágenes es un factor que incide directamente en la velocidad de carga de una página web, o lo que es lo mismo, es un factor de posicionamiento.

Si los diseñadores gráficos pueden ser culpables de visión de túnel en este sentido, hay que tener cuidado de no caer en la misma trampa. Aunque el tamaño es nuestra principal preocupación, y una pérdida de calidad sea probablemente aceptable, debemos resistirnos la tentación de sobre optimizar.

 

ENTENDIENDO LOS DISTINTOS
FORMATOS DE IMAGEN

Durante mucho tiempo, se utilizaron principalmente dos formatos de imagen en la web: JPEG y GIF.

JPEG (que es un acrónimo de Joint Photographic Experts Group) se utiliza para fotografías y GIF (siglas de Graphics Interchange Format) se utiliza para imágenes generadas por ordenador tales como iconos.

A mediados de la década de los 90 salió a la luz el método de compresión Lempel-Ziv Welch (LZW) utilizado por GIF y fue patentado. En 1996, se publicó la primera especificación de un nuevo formato: PNG (siglas de Portable Network Graphics). Más tarde ese mismo año, se había convertido en una recomendación del World Wide Web Consortium (W3C), con el apoyo de los principales navegadores hasta el final de esa década. Aunque la patente LZW expiraba en 2003, PNG había demostrado ser un formato superior, y GIF nunca se recuperó totalmente.

Aunque las funciones de JPEG y GIF están bien definidas, el propósito de PNG es impreciso. El formato PNG se puede utilizar como un sustituto de JPEG y GIF.

Vamos a revisar estos tres formatos.

JPEG
JPEG es un método de compresión con pérdida (hay un modo sin pérdidas, pero no es ampliamente soportado) y se adapta bien a las imágenes fotográficas que normalmente tienen muchos colores y gradientes diferentes. Con JPEG existe una relación entre el tamaño del fichero y la calidad de la imagen, pero incluso con la compresión de más bajo nivel (es decir, el mayor tamaño de fichero), las imágenes JPEG son todavía considerablemente más pequeñas que las  de formatos sin pérdida como TIFF (que significa Tagged Image File Format).

Los niveles de compresión JPEG se especifican como un porcentaje (donde 0 por ciento es el menor tamaño de archivo, pero la calidad más baja, y 100 por ciento es la mejor calidad, pero el tamaño más grande). Un valor de aproximadamente entre el 60 por ciento y el  80 por ciento se considera en general un buen punto medio de imágenes de la web.

GIF
GIF existe desde 1987 y se utiliza comúnmente para logos, sprites e imágenes prediseñadas.
Las imágenes GIF utilizan una tabla de colores (también conocida como paleta), que puede contener hasta 256 colores. Cada píxel de la imagen GIF se sustituye entonces por un número que representa cuál de estos colores es el que contiene. La obvia limitación aquí es que un GIF sólo puede contener 256 colores como máximo. Pero, sorprendentemente, esto es a menudo suficiente, especialmente porque la tabla de color no se predefine y es asignada a partir de los colores empleados en la imagen (la imagen podría contener 256 tonos de rojo, por ejemplo).

También es interesante observar que la compresión GIF se basa en LWZ, una versión revisada del algoritmo LZ78, que se utiliza en gzip y deflate.

Dado que la compresión se produce en las filas horizontales (de izquierda a derecha), las imágenes que contienen un degradado horizontal de color se comprimen peor que aquellos con un gradiente vertical.

PNG
PNG es un formato sin pérdida, que fue diseñado para reemplazar a GIF. PNG utiliza el algoritmo deflate (que a su vez utiliza LZ77, que es similar a LWZ).

PNG admite imágenes con paleta y sin paleta RGB y RGBA (RGB con un canal alfa). Las diferentes paletas se denominan a menudo como PNG8 (para PNG), PNG24 (para RGB) y PNG32 (para RGBA). Los números se refieren al número de bits por píxel.

• PNG8 es el más similar al GIF. Usa una paleta de colores de 8 bits (es decir, 256). En la mayoría de los casos, supera a GIF.
• El modo RGB (PNG24) a veces se usa también como una alternativa a JPEG sin pérdida, aunque el gran tamaño de fichero hace que no sea de uso común en la web.
• PNG32 es similar al modo RGB pero incluye un canal alfa. Aunque este modo no se utiliza mucho, hay ciertas situaciones en las que es el único formato viable. Para obtener una imagen con muchos degradados de color que también requieren la transparencia, ni JPEG, ni GIF, ni PNG8 son ideales (porque JPEG carece de soporte para la transparencia, mientras que GIF y PNG8 tienen profundidades de color limitado). PNG32 maneja esta imágenes bien, pero el tamaño no será pequeño.

Aunque PNG ha estado presente desde finales de los 90, Internet Explorer ha tenido numerosos fallos en su soporte para este formato, sobre todo para PNG32. Por ejemplo, IE 6.0 y versiones anteriores no logran resolver la transparencia alfa correctamente, mientras que IE 7.0 tiene problemas cuando se utiliza transparencia en la parte superior de los elementos HTML semi-transparentes. (Ver: http://support.microsoft.com/kb/265221)

SGV
Los formatos de imagen examinados anteriormente hacen todo el trabajo alrededor de principios similares: sobre la información del color de cada píxel de la imagen. Lo que difiere es la manera en que se codifica esta información.

Los gráficos vectoriales escalables (SVG) tiene un enfoque completamente diferente, utilizando XML para describir una imagen en términos de formas geométricas. Si alguna vez has dibujado en tu lenguaje de programación favorito, estarás familiarizado con la idea de especificar las dimensiones de polígonos, establecer un color de relleno, la superposición de texto, y así sucesivamente. Este es el contenido de un archivo SVG sencillo:

<?xml version=”1.0″?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg xmlns=”http://www.w3.org/2000/svg” version=”1.1″>
<circle cx=”100″ cy=”50″ r=”20″ stroke=”black” stroke-width=”1″
fill=”blue” />
</svg>

 

Esto dibuja un círculo con radio de 20 píxeles en coordenadas de 100 × 50 píxeles. El círculo se llena con un color azul, y tiene un borde negro con radio de 1 pixel. Aparte de los círculos, elipses, polígonos y textos, SVG también es compatible con gradientes de color, filtros, efectos de desenfoque, y sombras.

En muchas situaciones, SVG es una alternativa ideal para los formatos de imagen tradicionales. Puede dar lugar a tamaños más pequeños de archivo (a veces, pero no siempre), y (como el nombre implica) es escalable, lo que significa que la imagen se puede cambiar el tamaño sin afectar a su calidad.

Una de las principales razones por las que el formato SVG no es tan ampliamente utilizado como se supone ser es debido al pobre apoyo en Internet Explorer. Mientras que la mayoría de los principales navegadores han tenido algún nivel de apoyo a SVG desde alrededor de 2005 (Konqueror en 2004, Firefox en 2005, Opera en 2005, Chrome y Safari en 2006), Internet Explorer no comenzó a ofrecer soporte nativo para SVG hasta la versión 9 de 2011. Debido a que un número considerable de las visitas seguirá utilizando versiones anteriores de IE, la única solución práctica, si deseamos utilizar archivos SVG es usar la negociación de contenido y servir una versión no-SVG del gráfico para las versiones anteriores de IE.

Los archivos SVG no se ven afectados por consideraciones de optimización de imagen tradicionales (es decir, niveles de compresión, profundidad de color, entrelazado, y así sucesivamente). El hecho de que deban ser analizados y renderizados por el navegador plantea sus propias consideraciones de rendimiento. Cuanto mayor sea el archivo XML, más formas deben ser dibujadas, y esto tiene el potencial de ser más lento que simplemente mostrar una imagen en un formato como GIF o PNG (incluso teniendo en cuenta que estos formatos requieren decodificación). Particularmente costosos son los efectos avanzados tales como gradientes, rellenos, y opacidad. Sin embargo, siempre que se utilicen con moderación, los ficheros SVG no necesitan un uso intensivo de la CPU para renderizar.

Elegir el formato de archivo apropiado es el primer paso esencial para la optimización de imágenes, y entender los algoritmos de compresión subyacentes utilizados por los tres principales formatos de imagen (PNG, JPEG, GIF) te puede ayudar a hacer más reducciones en el tamaño de archivo.

Cada imagen que se utiliza en una página de resultados es una solicitud HTTP adicional, por lo que la reducción del número de imágenes es un objetivo que vale la pena. Las dos técnicas principales son los mapas de imágenes y sprites CSS. Los Sprites son la mejor solución de propósito general, pero algo más incómodos de poner en práctica.

Es importante conocer la forma en la que se analizan los selectores (derecha a izquierda) y el efecto de estos en el rendimiento CSS, especialmente cuando se usan caracteres comodín. Además, es bueno estar familiarizado con los atajos disponibles para muchas de las propiedades CSS, ya que estos pueden hacer que las hojas de estilo sean significativamente más pequeñas en tamaño.

Aunque los avances en CSS pueden ser utilizados para reducir el uso de JavaScript, todavía hay muchas situaciones en las que JavaScript es la única solución viable. Puede gustar o no, pero  JavaScript es una parte esencial de la web moderna (especialmente desde el nacimiento de la Web 2.0), y comprender cómo optimizar es esencial.