Optimización de imágenes para la Web

Escrito por Ramón Saquete

Si queremos una Web rentable, es indispensable tener un buen rendimiento. Para que os hagáis una idea, cuando Amazon reduce en 100 milisegundos el tiempo de carga, sus ingresos incrementan en un 1%, lo que les supone importantes sumas de dinero.

Hay muchos factores que se pueden optimizar para lograr un menor tiempo de carga, pero los dos más importantes son la base de datos y las imágenes. En esta entrada voy a hablar de la optimización de imágenes para editores de contenido, diseñadores y SEOs. Hay también otras técnicas que pueden aplicar desarrolladores, maquetadores y administradores de sistemas, pero aquí no trataremos éstas.

Las imágenes normalmente suponen el 70 o el 90% de la información que necesita descargar el navegador para mostrar una página. El que los editores de contenido sepan cómo reducir el espacio que ocupan de las imágenes, sin que se perciban diferencias de calidad, es de vital importancia para la Web. Tener también presente, que las imágenes, además de empeorar el tiempo de carga, sirven para captar la atención, por eso tener buenas fotografías en una tienda online o cualquier otro tipo de Web, que carguen rápido y se vean bien, es una de las cosas que podemos hacer para intentar incrementar los ingresos de nuestra página.

Pero antes de entrar en materia, veamos algunos conceptos básicos:

Conceptos básicos

• Diferencia entre compresión sin pérdida de información y compresión con pérdida: Cuando comprimimos una imagen perdiendo calidad en el proceso, estamos utilizando compresión con pérdida. Si por el contrario, la imagen comprimida se mantiene idéntica a la original, estamos usando compresión sin pérdida.
• Formato crudo: En un ordenador, una imagen en formato crudo es aquella que no tiene compresión y que contiene la información tal y como la necesita el ordenador para mostrarla en la pantalla. En fotografía, el formato crudo (raw), es distinto, ya que se guarda la imagen tal y como la recoge el sensor (aunque no suele ser del todo crudo, ya que las cámaras suelen aplicar compresión sin pérdida).
• Píxel: Las imágenes que muestra el ordenador en pantalla están compuestas por una cuadrícula de puntos llamados píxeles, cada píxel tiene asociado un valor numérico que indica qué color tiene que representar el monitor.
• Profundidad de color o número de bits: Si el ancho y el alto de la imagen los consideramos los ejes de representación X e Y, el color sería la Z (la profundidad) puesto que el color es un valor numérico más. Si decimos que los píxeles de una imagen pueden representar colores de 8 bits, esto significará que cada píxel podrá tener cualquier valor entre 0 y 255, puesto que 256 es el número que colores distintos que podemos representar con 8bits (2⁸=256).
  La profundidad de color que usa normalmente cualquier monitor son 24 bits y, por lo tanto, este es el máximo que suelen tener los formatos de imagen.
• Tamaño de imagen: Cuanto mayor es el número de bits y el tamaño de la imagen, más espacio ocupará. Pensemos por ejemplo en una imagen pequeña de 100×100 píxeles, si cada píxel ocupa 1 byte (8 bits de profundidad de color), entonces nuestra imagen en formato crudo ocupará 100×100=10.000 bytes = 9,76 KBi. Pero si en lugar de 8bits, tenemos 24 bits, cada píxel de nuestra imagen ocupará 3 bytes y por lo tanto la imagen entera ocupará el triple, 30.000 bytes = 29,29 KBi.

Ahora que ya hemos visto algunos de los conceptos básicos, veamos los distintos formatos en los que podemos guardar nuestras imágenes y cuál debemos usar en cada momento. No importa si usáis Gimp, Adobe Photoshop, Adobe Lightroom o Corel Photopaint, todo lo que voy a explicar es aplicable a cualquier programa de retoque fotográfico que utilicéis.

JPG (Joint Photographic Experts Group)

JPG es un formato de compresión con pérdida de 24 bits de color. No soporta animaciones ni transparencias. Es el formato ideal para fotografías, en color o en blanco y negro, sobre todo si tienen gran variedad de tonalidades.
A la hora de guardar una imagen de este tipo, deberemos ajustar el nivel de calidad entre 0 y 100%. Cuanto más alto sea este valor, la imagen ocupará más y se notará menos la pérdida de calidad. Normalmente, entre un 70% y un 80% no veremos ninguna diferencia entre la imagen comprimida y la original, ya que la compresión que aplica se basa en estudios estadísticos de la visión humana. En algunos programas, se puede elegir el submuestreo del color de la imagen. Seleccionaremos la opción de submuestreo que más reduzca el tamaño y esta será la opción 4:2:0 o 2×2 1×1 1×1. Con ésta reduciremos la información de color contenida en la imagen y no notaremos ninguna diferencia. Si la imagen está en blanco y negro, se puede eliminar toda la información de color con 4:0:0, pero esto normalmente lo hacen los programas automáticamente.
Si os interesa el tema, en un artículo de mi blog personal explico el algoritmo de compresión JPG y el significado del submuestreo con más detalle.

PNG-24 (Portable Network Graphics)

Formato de compresión sin pérdida de información de 32 bits. De esos 32 bits, 24 los usa para representar los colores y 8 para poder hacer transparencias con diferentes niveles de opacidad en cada píxel. No soporta animación. Si lo usamos sin transparencia usará sólo los 24 bits que indica el nombre.
Este formato sólo debemos usarlo cuando sea realmente necesario emplear imágenes con transparencias. Si el fondo de detrás de la imagen no se va a desplazar o no se va a usar la misma imagen con otro fondo, es preferible pegarle el que va a tener en la Web y guardar la imagen en otro formato, puesto que al usar mayor número de bits por píxel y usar compresión sin pérdida de información, este formato es el que más espacio ocupa de todos.
En algunos programas podemos ajustar el nivel de compresión entre 0 y 9, siendo 9 el valor con el que ocupará menos y el que deberemos elegir siempre, puesto que la imagen no perderá calidad, independientemente del valor que de compresión que tenga.

PNG-8

Al igual que el PNG-24, usa el mismo algoritmo de compresión sin pérdida, pero con una profundidad de color de 8 bits. Soporta transparencia, pero no con diferentes niveles de opacidad, por lo que si la zona transparente tiene bordes redondeados, nos dará efecto de dientes de sierra (aunque son en realidad las herramients de retoque fotográfico las que no permiten guardar con distintos niveles de opacidad, el formato sí lo permite). Tampoco soporta animación.
Los formatos de imagen con profundidad de color de 8 bits, se les llama también con paleta de 8 bits o de color indexado. Esto es porque cada uno de los 256 colores están asociados, en un índice, a uno de los 16.777.216 colores que se pueden representar con 24 bits. Por lo tanto, tenemos una paleta limitada de 256 colores, que se han escogido previamente de entre los 16 millones disponibles.

Este es el formato ideal para dibujos, iconos, logotipos, diseños y en general cualquier imagen con pocos colores. Preferentemente usaremos PNG-8 antes que JPG para este tipo de gráficos, puesto que si usamos JPG notaremos los efectos de la compresión con pérdida que aplica este algoritmo, ya que parecerá que al resultado se le ha aplicado una especie de desenfoque perceptual, y esto en un diseño con bordes bien definidos, se nota bastante más que en una fotografía. Además, con JPG no conseguiremos un nivel de compresión tan alto como el que da PNG para este tipo de imágenes, ya que éste comprime mejor en situaciones donde se repite un mismo color varias veces.

Si la imagen tiene más de 256 colores podemos guardarla igualmente en PNG-8, pero para ello debemos reducirle los colores previamente. El programa nos dará a elegir alguna técnica de tramado. Cada una distribuirá, de forma diferente, los píxeles de un color, alrededor de píxeles de otro color, para dar la apariencia de que es un color intermedio entre los dos. El tramado, aunque requiere perder un poco de información, permite usar este formato con imágenes que se pasan un poco de los 256 colores, sin que se aprecie mucho la pérdida de información.
Si la imagen tiene menos de 256 colores o queremos reducir su número para que ocupe menos, podemos especificárselo al programa. Así, podemos tener imágenes con las siguientes relaciones entre número de bits y colores: 1 bit = 2 colores, 2 bits= 4 colores, 3 bits = 8 colores, 4 bits= 16 colores, 5 bits= 32 colores, 6 bits= 64 colores y 7 bits = 128 colores.
El mayor problema que tiene PNG-8 y PNG-24, es que la corrección de gama que se le aplica a los colores impide que podamos crear imágenes para que en todos los navegadores tengan colores iguales a otros elementos de la Web.

GIF (Graphics Interchange Format)

El GIF al igual que PNG-8, es de 8 bits, sin pérdida y permite tener transparencias sin distintos niveles de opacidad. Al contrario que el PNG, no se le aplica ninguna corrección de gama a los colores. Su característica principal es que es el único formato soportado por todos los navegadores que permite el uso de animaciones.

Este formato debe usarse al igual que PNG-8 para gráficos con pocos colores, pero sólo cuando las imágenes sean de unos pocos píxeles o queramos mantener la relación cromática con otros colores de la Web. Para el resto de casos, PNG-8 es mejor porque obtiene tamaños de archivo más pequeños.
Este formato se usaba mucho en los comienzos de la Web para poner animaciones. Como anécdota interesante, sus inventores usaron un algoritmo que tenía una patente sin saberlo, lo que provocó que desde el año 1994 al 2004 hubiera que pagar una licencia por poner archivos GIF en tu Web y esto generó una campaña contra este formato llamada burn all gifs.

WEBP

Este formato ha sido creado por Google para reemplazar a todos los demás. El problema es que sólo es compatible con los navegadores Chrome y Opera, además de que hay pocas herramientas para manejarlo. Es de 24 bits, puede usarse con pérdida o sin pérdida de calidad, puede soportar transparencias con distintos niveles de opacidad y animaciones. Lo único que no soporta es color indexado de 8 bits, por lo que le gana al JPG en calidad y compresión de fotografías, pero en imágenes de gráficos con pocos colores sigue ganándole el PNG-8.
Su uso está desaconsejado en cualquier caso por el poco soporte que tiene.

Para terminar, unas recomendaciones generales

• Nunca guardéis las imágenes a un tamaño mayor del hueco donde se van a mostrar.
• Guardar siempre las imágenes en modo progresivo si es un JPG y en modo entrelazado si es un GIF o un PNG. Esta opción hace que la imagen se muestre entera con una versión a baja resolución que irá aumentando en detalle, en lugar de aparecer poco a poco o línea por línea. Esto aumentará ligeramente el tamaño del archivo, pero el usuario percibirá que la imagen se carga antes y todo buen ingeniero informático sabe que, en cualquier interfaz de usuario, siempre es más importante la velocidad percibida que la velocidad real, por eso tenemos barras de progreso que crean el efecto de que las tareas tardan menos, cuando en realidad éstas provocan que tarden un poco más.
• En los campos de texto que ofrecen los formatos para almacenar meta información, no guardéis nada y quitarlos si es posible. Estos son datos que no aportan nada, como la fecha de creación o datos EXIF de los parámetros de la cámara que tomó la fotografía. En cambio, sí es recomendable rellenar los campos de comentarios con palabras clave que describan la imagen, ya que la araña del buscador de imágenes de Google es capaz de leerlos.
• Escribir los nombres de las imágenes como URLs amigables, es decir, sin acentos ni eñes y con guiones en lugar de espacios.
• Redactar siempre un texto alternativo al insertar una imagen en el HTML (atributo «alt»)

Hasta aquí mis recomendaciones. Si tenéis alguna duda, lo mejor es probar a guardar la imagen en varios formatos y quedarse con el que ocupe menos y se vea mejor.