Optimización de imágenes para web

La preparación de imágenes para la web exige algunas precauciones cuando se parte de una imagen escaneada o cualquier otro tipo de imagen con alta resolución. Debemos tener presente que la resolución del monitor es aproximadamente de sólo 72dpi (puntos por pulgada). Si escaneamos a 300 dpi, estamos obteniendo imágenes que serán innecesariamente grandes y que no se verán en absoluto mejor que la imagen adquirida al mínimo de resolución. Una imagen mastodóntica puede tardar una eternidad en descargarse, ocupará espacio innecesario en vuestro servidor y probablemente los visitantes no tengan paciencia para esperar.

Uno de los errores más comunes en los principiantes al incluir imágenes es el tomarlas directamente del escaner y simplemente escalarlas al tamaño que desean en el programa de edición de páginas. La solución es muy sencilla; en el programa de tratamiento de imágenes, buscamos la opción que permita cambiar la densidad de la imagen (la resolución) o efectuar un nuevo muestreo (resample.) para ajustar el tamaño a la resolución de pantalla.

Después de preparar los ficheros para las páginas web, debe guardarse siempre una imagen original con el tamaño, resolución y número de colores necesarios para podrla manipular sin limitaciones. Si queremos recuperar toda esta informaciòn después de alterar la imagen para optimizarla en pantalla, pueden surgir todo tipo de imperfecciones. En pocas palabras, los "originales" deben guardarse en un formato que no pierda calidad, y que conserve íntegra la información de los colores. Para los ficheros de mapa de bits, sirven TIFF y BMP, y los formatos nativos de Photoshop, PaintShop Pro, Photopaint... para los ficheros vectoriales, no hay problema: basta con guardar en el formato original del programa (AI -EPS, FH-, CDR, XAR...)

Cómo optimizar el tamaño de las imágenes.

Puesto que el tamaño de un fichero gráfico depende del número de colores, tamaño y resolución, todo lo que permita recortar estos parámetros implicará reducción del tamaño del fichero y por tanto, del tiempo de descarga necesario. Por otro lado, debemos elegir el formato de fichero adecuado, con los sistemas de compresión GIF y JPG. Ambos admiten diferentes opciones, y según elijamos, podemos llegar a una solución satisfactoria: imagen de buena calidad con tamaño aceptable.

Sobre la resolución, está todo dicho: basta con 72 dpi.
El tamaño de la imagen dependerá, evidentmente, de su tamaño y del grado de detalle que queramos mostrar. Debemos tener en cuenta que para una imagen de gran tamaño (por ejemplo, toda la pantalla),el tamaño puede ser muy grande y se hace imprescindible adoptar estrategias de optimización. A veces puede ser conveniente dividir la imagen en partes, optimizarlas al máximo por separado y preparar una tabla que muestre, aparentemente, una imagen única intacta.

El número de colores para jpeg es casi irrelevante: como mínimo debe haber 256. Lo que permite ajustar mejor el tamaño de un jpeg es el grado de compresión, que se puede elegir en el programa de gráficos. Si vamos probando, podemos llegar al tamaño mínimo con el que la pérdida de calidad es insignificante. En cambio, para los gifs el número de colores sí que es importante; el máximo aquí es 256, pero si podemos mantener el número más bajo, el tamaño será menor. En el cuadro de diálogo para guardar como gif una imagen (ilustración adjunta) tenemos diversas opciones: elegir el número de colores, el tipo de paleta, qué hacer con los colores no presentes en ésta, transparencia...

La forma en que se simulan los colores no contenidos en la paleta que elijamos para el gif puede ser: a) convertirlos a los colores más próximos en la paleta disponible; b) simular una trama que se aproxime al color. Estos dos parámetros nos permiten hacer diferentes pruebas a la busca de la mejor solución en términos de calidad y tamaño.

Esta tarea de optimización, de todos modos, también se puede automatizar. Diferentes programas tienen la opción de procesar por lotes (conjuntos de imágenes) o pueden grabar macros o acciones del proceso de optimización, para después aplicarlos a un conjunto de gráficos simultáneamente.

Usuarios que han visto este tema también han visto...

- Un Tao del diseño Web
- Análisis de los puntos débiles en los sistemas de estadísticas web
- Cómo modificar los archivos .htaccess
- Las contraseñas más habituales
- Limpiar y desfragmentar el disco duro

- Versión imprimible de este documento

- Enviar por e-mail este documento