La preparación de las imágenes que utilizaremos en una página HTML es un proceso fundamental, que exige algunas precauciones para lograr que el sitio sea más ágil y rápido de cargar.
Los diseñadores gráficos están acostumbrados a trabajar con resoluciones de 300 dpi (dots per inch, puntos por pulgada). En diseño web, debemos darles importancia al ancho y al alto de las imágenes que utilizaremos, y no tanto a la resolución, ya que la de cualquier monitor es siempre de aproximadamente 72 dpi.
Si utilizamos 300 dpi para una foto que incluiremos en una web, obtendremos imágenes demasiado pesadas y que no se verán mejor que si tuvieran el mínimo de resolución.
Una imagen pesada ocupará mayor espacio en el servidor, generará más tráfico de datos, tardará más tiempo en cargarse y, probablemente, agote a los usuarios del sitio cuando tengan que esperar su carga.
El peso de un archivo de imagen dependerá, directamente, de la cantidad de colores, su tamaño y la resolución. Entonces, cualquier acción que recorre estos parámetros implicará una reducción en el peso del archivo y, por lo tanto, del tiempo de descarga necesario para visualizarla en cualquier navegador de internet. Al guardar el archivo, debemos elegir el formato adecuado entre los tres más habituales para uso web: GIF, JPG y PNG.
RED, GREEN y BLUE
Al trabajar con imágenes para la web, no tiene sentido emplear el método CMYK utilizado en diseño gráfico para impresión. En cambio, optaremos por el modo de color RGB (Red, Green, Blue; rojo, verde y azul), método que establece un valor de 0 a 255 para cada uno de los componentes.
JPG vs GIF
El formato JPG soporta 256 colores como mínimo y 16 millones como máximo, por lo que la reducción de peso por este lado es irrelevante. Lo que permite ajustar mejor el peso de un archivo JPG es la compresión. Al aplicarla, es aconsejable ir probando cuál es la mayor compresión que podemos obtener sin corromper visualmente la imagen.
En cambio, para los archivos GIF, la cantidad de colores es importante, ya que podemos tener 256 como máximo. En este caso, mediante la resolución de colores, podremos disminuir el peso del archivo. Muchas veces, encontraremos que, visualmente, no existe diferencia entre un archivo GIF con 256 colores y otro con 128, y de esa forma, podremos reducir el peso hasta en un 60%.
Aunque Photoshop es una gran herramienta a la hora de optimizar imágenes para la web, existen otras utilidades online y offline que permiten realizar esta tarea. Entre las opciones online, una muy recomendable es Web Resizer, que se utiliza para reducir la resolución de una imagen (y, por consiguiente, su peso) como Web Service, sin tener que descargar nada.
72 DPI
Cuando cambiemos el ancho y el alto de las imágenes por medio de algún programa de edición, deberemos asegurarnos de que, además del tamaño, estemos modificando la resolución para que ésta sea de 72 dpi. Siempre que trabajemos con archivos de imágenes, es aconsejable guardar una copia original que conserve el tamaño, la resolución y la cantidad de colores necesarios que nos permitan manipularla posteriormente sin limitaciones. Los formatos ideales para este fin son TIFF y BMP.
Comentarios