consejos para la optimizacion de imagenes 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.

consejos para la optimización de imágenes en web

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.

imagen vectorial

mapa de bits

taller de láminas . blogspot.com

material de apoyo para alumnos de la cátedra arq4·fau·UNNE

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

la resolución

!

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:



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



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.



consejos para la optimizacion de imagenes en web

Documents