Consejos Para La Optimizacion De Imagenes En Web

  • Published on
    22-May-2015

  • View
    293

  • Download
    0

Transcript

<ul><li> 1. diseo de lminas. blogspot.commaterial de apoyo para alumnos de la ctedra arq4fauUNNEconsejos para la optimizacinde imgenes en web La imagen, como parte fundamental del diseo de interfaces, debe ser optimizada para que pueda cumplir dos funciones principales en web: que se vea bien y que pese poco. Las imgenes vistas en el monitor no son optimizadas de la misma manera que para la impresin por lo que la resolucin es parte primordial en su manipulacin entre otros aspectos como color, nmero de bits y formato.Existen dos clases de imgenes con las que diseamos, vectoriales y mapa de bits. Las primeras se generan en la computadora y las otras son las obtenidas del mundo exterior (fotografas o video) y se manipulan en la computadora (escaneadas o descargadas). Las imgenes vectoriales son figuras generadas con vectores, estos vectores basados en clculos matemticos de la computadora son los puntos que controlan el contorno de la figura en su angularidad y modulacin. Por la forma en que son generadas estas figuras no pesan mucho y no pierden definicin cuando son escaladas. Las imgenes de mapa de bits estn generadas a partir de pxeles (puntos) contenidos en una retcula. Cada pxel contiene informacin de color. Por lo que el nmero de pxeles dentro de una imagen determina su calidad visual o su resolucin. Es decir, a mayor nmero pxeles mejor definicin, pero mientras ms pxeles contenga se vuelve ms pesada y si requieres escalarla puedes perder definicin en la imagen, lo cual comnmente se conoce como pixelearse. Generalmente, empezamos a disear con imgenes de mapa de bits, por lo tanto abordaremos algunos de los elementos que se deben considerar para su optimizacin.mapa de bitsimagen vectorial </li></ul> <p> 2. diseo de lminas . blogspot.commaterial de apoyo para alumnos de la ctedra arq4fauUNNE la resolucin Es la cantidad de pixeles puntos que conforma la imagen. Dicha cantidad representa la calidad de una imagen. La resolucin se mide en dpi (siglas en ingls de dots per inch obien, puntos por pulgadas) y es la unidad de medida de la resolucin de la imagen. Cuando se comienza a manipular una imagen se recomienda hacerlo con una alta resolucin. Si se va escanear una imagen de preferencia hacerlo con una resolucin mnima de 300 dpi para que cuando se manipule, retoque o escale no pierda definicin. Conforme vaya quedando la imagen podrs trabajarla a 150 dpi y cuando tengas la imagen definitiva entonces bajas la resolucin a 72 dpi, que es la resolucin estndar para web. De todas maneras es aconsejable, dejar una copia de la imagen original sin manipular su resolucin por cualquier eventualidad. Ya que si queres subir la resolucin de una imagen digamos de 72 a 300 dpi para que puedas escalarla seguramente se perder ! la calidad, lo que tambin es conocido como romperse el pixel. Esto significa que cuando quitas pixeles o bajas la resolucin de una imagen estas quitando informacin y luego si queres meterle ms pixeles simplemente la imagen no puede compensar esta Color y nmero de bits Por la forma en que estn hechos los monitores existen 3 colores principales: RGB (siglas en ingls de Red, Green y Blue). Estos son colores luz o aditivos; es decir, mientras ms 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 vara la calibracin de color de su monitor. Entonces, aunque uno tenga los sper colores en el diseo, en otro monitor puede verse como la peor combinacin de colores y destrozarlo. Por lo que se aconseja visualizar el sitio en diferentes monitores para llegar a un estndar de colores con el que no se vean tan distintos. Este tema est muy relacionado con el nmero de bits ya que el nmero colores que tenga el pxel depende del nmero de bits, mientras ms bits tengamos mayor profundidad de color se tiene pero la imagen se vuelve ms pesada, es decir, mientras ms colores soporte una imagen, se necesitaran de ms bits por pxel, lo que incrementar el tamao del archivo. El bit se entiende como la unidad mnima de informacin que reconoce una computadora en un solo dgito (0 o 1) su nmero determina la cantidad de tonos de una imagen, lo cual lo podemos ver en la siguiente escala: 3. diseo de lminas. blogspot.commaterial de apoyo para alumnos de la ctedra arq4fauUNNE 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 impresin. Esta profundidad incluso nos permite usar transparencia en el formato png.formato El formato es la extensin con la que se guarda la imagen y dependiendo de las necesidades del diseo utilizas cada una de ella de acuerdo a sus caractersticas, optimizacin y peso. Las extensiones ms comunes son jpg, gif y png. El formato jpg permite tener miles de colores, por lo que muestra mejor los degradados y fotografas pero no tiene transparencia. El formato gif tiene una paleta de colores hasta de 256 tonos y permite salvar con transparencia y adems se pueden animar, pero por su cantidad de colores las imgenes con una gran cantidad de tonos no se ven muy bien. El formato png es una combinacin entre jpg y gif, esto significa que tiene una 4. diseo de lminas . blogspot.commaterial de apoyo para alumnos de la ctedra arq4fauUNNE 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 pequeos que no tengan mucho degradado utiliza el formato gif, tambin algunas imgenes 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 combinacin de estos aspectos (resolucin, color, nmero de bits y formato) es muy importante para la optimizacin de una imagen. Puesto que en web se deben cumplir dos principios: que se vean bien las imgenes y que pesen poco, para que no tarden mucho en descargarse. As los usuarios no abandonarn tu pgina porque la informacin se despliega rpido. </p>