Este documento ofrece consejos para optimizar imágenes en la web, incluyendo reducir la resolución a 72 dpi, usar 24 bits de color para un balance entre calidad y peso, y elegir el formato adecuado (JPG para fotos, GIF para iconos pequeños, PNG para transparencia). La optimización es importante para que las imágenes se vean bien y pesen poco para mejorar la experiencia del usuario.

1. taller de láminas . blogspot.com
material de apoyo para alumnos de la cátedra arq4·fau·UNNE
consejos para la optimización
de imágenes en web
La imagen, como parte fundamental del diseño de interfaces, debe ser optimizada para que pueda
cumplir dos funciones principales en web: que se vea bien y que pese poco. Las imágenes vistas
en el monitor no son optimizadas de la misma manera que para la impresión por lo que la resolución
es parte primordial en su manipulación entre otros aspectos como color, número de bits y formato.
Existen dos clases de imágenes con las que diseñamos, vectoriales y mapa de bits.
Las primeras se generan en la computadora y las otras son las obtenidas del mundo
exterior (fotografías o video) y se manipulan en la computadora (escaneadas o
descargadas). Las imágenes vectoriales son figuras generadas con vectores, estos
vectores –basados en cálculos matemáticos de la computadora– son los puntos que
controlan el contorno de la figura en su angularidad y modulación. Por la forma en que
son generadas estas figuras no pesan mucho y no pierden definición cuando son
escaladas. Las imágenes de mapa de bits están generadas a partir de píxeles (puntos)
contenidos en una retícula. Cada píxel contiene información de color. Por lo que el
número de píxeles dentro de una imagen determina su calidad visual o su resolución.
Es decir, a mayor número píxeles mejor definición, pero mientras más píxeles contenga
se vuelve más pesada y si requieres escalarla puedes perder definición en la imagen, lo
cual comúnmente se conoce como “pixelearse“. Generalmente, empezamos a diseñar
con imágenes de mapa de bits, por lo tanto abordaremos algunos de los elementos que
se deben considerar para su optimización.
mapa de bits
imagen vectorial

2. taller de láminas . blogspot.com
material de apoyo para alumnos de la cátedra arq4·fau·UNNE
la resolución
Es la cantidad de pixeles –puntos– que conforma la imagen. Dicha cantidad representa
la calidad de una imagen. La resolución se mide en dpi (siglas en inglés de dots per
inch obien, puntos por pulgadas) y es la “unidad de medida de la resolución de la
imagen“. Cuando se comienza a manipular una imagen se recomienda hacerlo con
una alta resolución. Si se va escanear una imagen de preferencia hacerlo con una
resolución mínima de 300 dpi para que cuando se manipule, retoque o escale no pierda
definición. Conforme vaya quedando la imagen podrás trabajarla a 150 dpi y cuando
tengas la imagen definitiva entonces bajas la resolución a 72 dpi, que es la resolución
estándar para web.
De todas maneras es aconsejable, dejar una copia de la imagen original sin manipular
su resolución por cualquier eventualidad. Ya que si queres subir la resolución de una
imagen –digamos de 72 a 300 dpi– para que puedas escalarla seguramente se perderá
! la calidad, lo que también es conocido como “romperse el pixel“. Esto significa que
cuando quitas pixeles o bajas la resolución de una imagen estas quitando información y
luego si queres meterle más pixeles simplemente la imagen no puede compensar esta
Color y número de bits
Por la forma en que están hechos los monitores existen 3 colores principales: RGB
(siglas en inglés de Red, Green y Blue). Estos son colores luz o aditivos; es decir,
mientras más porcentaje de color se tiene de ellos se llega al color blanco; en caso
contrario si se quita porcentaje de color, le restamos luz, se llega al color negro. Sin
embargo, este aspecto es inconstante y no se puede controlar, ya que en cada usuario
varía la calibración de color de su monitor. Entonces, aunque uno tenga los súper
colores en el diseño, en otro monitor puede verse como la peor combinación de colores
y destrozarlo. Por lo que se aconseja visualizar el sitio en diferentes monitores para
llegar a un estándar de colores con el que no se vean tan distintos.
Este tema está muy relacionado con el número de bits ya que el número colores que
tenga el píxel depende del número de bits, mientras más bits tengamos mayor
profundidad de color se tiene pero la imagen se vuelve más pesada, es decir,
mientras más colores soporte una imagen, se necesitaran de más bits por píxel,
lo que incrementará el tamaño del archivo. El bit se entiende como la unidad mínima
de información que reconoce una computadora en un solo dígito (0 o 1) su número
determina la cantidad de tonos de una imagen, lo cual lo podemos ver en la siguiente
escala:

3. taller de láminas . blogspot.com
material de apoyo para alumnos de la cátedra arq4·fau·UNNE
1 bit = 2 tonos
2 bits = 4 tonos
8 bits = 256 tonos
16 bits = 65,536 tonos
24 bits = 16,777,216 tonos
32 bits = 4,294,967,296 tonos
Ejemplos:
Los monitores utilizan entre 8, 16 y 32 bits, algunos hasta 64 bits. No obstante, la forma
como debe ser guardada una imagen para web es de 24 bits, así obtenemos una
imagen que se vea bien y no pese tanto. Los bits superiores se utilizan para salida de
impresión. Esta profundidad incluso nos permite usar transparencia en el formato png.
formato
El formato es la extensión con la que se guarda la imagen y dependiendo de las
necesidades del diseño utilizas cada una de ella de acuerdo a sus características,
optimización y peso. Las extensiones más comunes son jpg, gif y png. El formato
jpg permite tener miles de colores, por lo que muestra mejor los degradados y
fotografías pero no tiene transparencia. El formato gif tiene una paleta de colores hasta
de 256 tonos y permite salvar con transparencia y además se pueden animar, pero por
su cantidad de colores las imágenes con una gran cantidad de tonos no se ven muy
bien. El formato png es una combinación entre jpg y gif, esto significa que tiene una

4. taller de láminas . blogspot.com
material de apoyo para alumnos de la cátedra arq4·fau·UNNE
paleta de colores alta y permite la transparencia con buena calidad, el inconveniente es
que tiene mayor peso y las versiones anteriores y del Internet Explorer 7 no permiten
ver la transparencia, a menos que hagamos un hack con javascript.
El formato que utilices en una imagen depende mucho de la necesidad de la misma, por
ejemplo, si usas una imagen de fondo o que sea grande te recomiendo que sea en
formato jpg. Si utilizas botones o iconos pequeños que no tengan mucho degradado
utiliza el formato gif, también algunas imágenes grandes pueden verse bien en este
formato pero depende como fueron trabajadas desde el inicio. Si requieres una imagen
con transparencia mejor usa el formato png pero considera que tal vez no lo puedan ver
los navegadores mencionados.
La correcta combinación de estos aspectos (resolución, color, número de bits y
formato) es muy importante para la optimización de una imagen. Puesto que en
web se deben cumplir dos principios: que se vean bien las imágenes y que pesen
poco, para que no tarden mucho en descargarse. Así los usuarios no
abandonarán tu página porque la información se despliega rápido.