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 salida de 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 que retomamos 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 abordaré algunos de los elementos que se deben considerar para su optimización.
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. Pero doy un consejo, dejen una copia de la imagen original sin manipular su resolución por cualquier eventualidad. Ya que si quieres 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 quieres meterle más pixeles simplemente la imagen no puede compensar esta información con una mejor definición.
Color y número online casino bonuses 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 (21) = 2 tonos
2 bits (22) = 4 tonos
8 bits (28) = 256 tonos
16 bits (216) = 65,536 tonos
24 bits (224) = 16,777,216 tonos
32 bits (232) = 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.