Buscar

Usabilidad Diseo Tcnico Diseo Grfico CSSs Esquemas Herramientas Utilidades Sobre WebUsable

T cnicasdeoptimizacindeimgenesparaWeb
Temas relacionados: Banner Rotatorio

Contenido: 1. Optimizacin del uso de imagenes en sitios Web 1. 1.1 Logos y Marcas Grficos de Empresa (Branding) 2. 1.2 Imagenes de productos, campaas, promociones, eventos...: 3. 1.3 Fotos representativas (personales, edificios...) 4. 1.4 Grficos propios del diseo del site 5. 1.5 Banners 6. 1.6 Banners animados 7. 1.7 Iconos de navegacin 8. 1.8 Barras de herramientas 9. 1.9 Mapas de navegacin 2. Tcnicas de reduccin de la carga por elementos grficos 1. 2.1 Reduccin del nmero de grficos 2. 2.2 Reutilizacin 3. 2.3 Reducin del tamao 4. 2.4 Disminucin de la percepcin de espera 5. 2.5 Uso de formatos grficos que permiten compresin 6. 2.6 Reduccin del nmero de colores 7. 2.7 Codificacin de aspectos grficos mediante HTML, Hojas de Estilo... 3. Anexos 1. Anexo-1 Codificacin JavaScript de Banner rotatorio con diferentes links de destino

1. Optimizacin del uso de imagenes en sitios Web 1.1 Logos y Marcas Grficos de Empresa (Branding): Son los elementos grficos menos estandarizables de un site: al definir la imagen corporativa y contribuir de forma central a la representacin de la presencia de la empresa en la Red, es preciso admitir ciertos grados de libertad en su diseo, sobre todo cuando, adems de la marca de la empresa, se utilizan como parte del diseo de imagen del site. Los criterios de diseo para el site on-line no tienen porque responder a las seas de identidad corporativa

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

generales de la empresa. En el caso de Intranets no se justifican diseos espectaculares y pesados: Estn dirigidas a empleados con los que no es necesario buscar el impacto visual para la comunicacin de imagen de compaa. El tiempo de acceso es una factor crucial para el diseo de las Intranets. CNN Financial Bank of Montreal

Tamao: 185 X 80 pixels (medio-grande) Peso: 4 KBytes (muy bueno) Aprovechamiento: Muy bueno Diseo: Bueno Branding: Muy bueno JP Morgan

Tamao: 251 X 70 pixels (pequeo) Peso: 3 KBytes (muy bueno) Aprovechamiento: Bueno Diseo: Muy bueno Branding: Bueno

Tamao: 264 X 58 pixels (mediano) Peso: 2 KBytes (muy bueno) Aprovechamiento: Mal Diseo: Bueno Branding: Bueno Compaq

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Tamao: 584 X 105 pixels (muy grande) Peso: 9 KBytes (alto) Aprovechamiento: Muy mal Diseo: Vulgar Branding: Medio BMW Aventis

Tamao: 90 X 90 pixels (pequeo) Peso: 2 KBytes (muy bueno) Aprovechamiento: Regular Diseo: Muy bueno Branding: Muy bueno Tamao: 167 X 120 pixels (medio) Peso: 3 KBytes (muy bueno) Aprovechamiento: Mal Bueno Branding: Muy bueno recomendaciones: Logos, Marcas, Branding...

De forma orientativa, el estndar de tamaos y pesos para Logos y Marcas de Sites en Internet est dentro del rango:. Logo pequeo: ... Ancho X Alto = (80 X 30 pixels). Peso = 2 KBytes Logo grande: ... Ancho X Alto = (250 X 70 pixels). Peso = 5 KBytes

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

A modo de ejemplo, estndares orientativos de tamaos y pesos de logos seran: Rectangular pequeo Rectangular mediano Rectangular grande

Tamao: 80 X 30 pixels Peso: 2 KBytes Aprovechamiento: Bueno

Tamao: 190 X 30 pixels Peso: 4 KBytes Aprovechamiento: Mximo Tamao: 250 X 65 pixels Peso: 5 KBytes Aprovechamiento: Bueno

1.2 Imagenes de productos, campaas, promociones, eventos...: Son utilizadas para reclamar atencin sobre productos, servicios, promociones, campaas, etc. recomendaciones: Imagenes de productos,
campaas, promociones, eventos...

La estrategia correcta de utilizacin es utilizar una pequea imagen o icono del producto, acompaada de una breve resea de presentacin, o embebida en el diseo general de los productos o campaas del site, con un link a una pgina de detalle, donde, si es necesario, se puede ampliar la imagen utilizada. Un estndar orientativo de tamaos es: En Home Page: Tamao pequeo: 35 X 35 pixels, Peso: 1 KByte Tamao grande: 120 X 70 pixels, Peso: 2 KByte En pgina de detalle: Tamao pequeo: 200 X 150 pixels, Peso: 12 KByte Tamao grande: 300 X 250 pixels, Peso: 20 KByte

1.3 Fotos representativas (personales, edificios...): Se utilizan para la presentacin de: Personalidades o directivos de la organizacin.

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Colaboradores en los contenidos del site o para resaltar la autora de reseas. Hechos deportivos, benficos o sociales protagonizados o patrocinados por el entorno de la empresa. Edificios sede, construcciones locales reseables, obras de arte propias o de transcendencia artstica, cientfica o de ingeniera en las que ha estado involucrada la compaa. recomendaciones: Fotos representativas

La estrategia recomendada de uso de este tipo de imagenes es utilizar una pequea foto de la persona, edificio, etc., acompaada de una breve resea de presentacin, o con un ttulo relativo a su presencia. Pueden llevar asociado un link a una pgina de detalle, si es preciso ampiar o describir la informacin relativa a la imgen. Un estndar orientativo de tamaos es: En Home Page: Tamao pequeo: 60 X 50 pixels, Peso: 1 KByte Tamao grande: 100 X 80 pixels, Peso: 2 KByte En pgina de detalle: Tamao pequeo: 160 X 130 pixels, Peso: 7 KByte Tamao grande: 220 X 170 pixels, Peso: 9 KByte

1.4 Grficos propios del diseo del site: Este es una aspecto tcnicamente controvertido con mucha frecuencia en el diseo de sites, ya que su uso implica aumento de carga de pgina sin justificacin funcional. Sin embargo aporta las ventajas: Suelen porporcionar impacto visual al site. Consiguen resolver problemas de distribucin de reas con frecuencia complejos de implementar mediante cdigo de presentacin. Conllevan los inconvenientes: Son responsables de primer orden del peso de la Home Page y, por tanto, del tiempo de acceso a la misma.

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Con frecuencia conllevan porblemas de legibilidad de etiquetas y enlaces. Con el tiempo acaban por ser molestos y hasta iiritantes. recomendaciones: Grficos propios del diseo

Evitarlos en la medida de lo posible: tratar siempre de recurrir a codificar los aspectos visuales de presentacin mediante HTML, Hojas de Estilo, etc. Si es imprescindible, utilizar las imagenesdefondo: A muy baja resolucin. Para areas especficas, de manera que su tamao pueda ser lo menor porsible. Utilizando tablas bien estructuradas y dimensionadas, y siempre indicando el ancho y alto de la imgen, de manera que la pgina pueda proseguir su "renderizacin" sin esperar al trmino de la carga de la imgen. No utilizar fondos de escritorio, tapices, etc. Recurrir a bordes de pgina lo menos posible, y slo si delimitan un rea funcionalmente concreta (reas de navegacin, fotos de productos, etc.) No abusar de la alternancia de imagenes "onMouseOver": acaban cansando y, con frecuencia, no aportan nada.

1.5 Banners: El objetivo final de los banners es llamar la atencin sobre el visitante acerca de una anuncio de producto, camnpaa, promocin, etc., de manera que se sienta tentado de hacer "click" sobre el mismo para obtener informacin de detalle. Es importante no abusar de este formato de publicidad (bastante quemado ya en la actualidad) y recurrir a otros mecanismos de informacin o induccin ms apropiados descritos en este captulo. recomendaciones: Banners

Deben tener un tamao estndar, de manera que un mismo diseo publicitario pueda ser usado sin limitacin de dimensiones en sites externos (tanto de la misma organizacin como de terceros).

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Deben hacer referencia directa al tema que promocionan de manera que el usuario tenga ya una idea de que va a ver antes de hacer "click". Deben tener asociado un link a una pgina de detalle donde se se informe a fondo al usuario sobre lo anunciado. Los tamaos estndar de los banners en Internet son: Tamao grande: 468 X 60 pixels (16,5 X 2,1 cms.) Peso < 25 KBytes Tamao mediano: 230 X 35 pixels (8,4 X 1,2 cms.) Peso < 12 KBytes Tamao botn: 90 X 30 pixels (3,2 X 1,1 cms.) Peso < 3 KBytes Grande 468 X 60 pixels (16,5 X 2,1 cms.) Peso < 25 KBytes

Mediano

230 X 35 pixels

(8,4 X 1,2 cms.)

Peso < 12 KBytes

Botn

90 X 30 pixels

(3,2 X 1,1 cms.)

Peso < 3 KBytes

1.6 Banners animados: Los banners animados tienen el mismo objetivo final que los banners estticos. La diferencia fundamental estriba en el hecho de estar compuestos de un cierto nmero de fases grficas (escenas) o estticas o mediante transiciones dinmicas entre las mismas. recomendaciones: Banners animados

Debe limitarse su uso al mximo, no siendo recomendable utilizar ms de uno por pgina: Cargan en exceo el peso de la pgina. Distraen la atencin del usuario. Terminan por producir estress por movimiento.

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

Comunican una cierta idea de "comercial" y "juvenil" en lugar de profesional. Slo excepcionalmente est aceptado su uso en Intranets, ya que en estas el tiempo de carga de pgina es vital y no se requieren acciones de atraccin de cliente. En cuanto al nmero de fases: No es recomendable que tengan ms de 3 fases. Cada fase del banner debe llevar asociado un link a una pgina de detalle. Evitar las fases innecesarias (sin mensaje) que slo se utilicen para implementar efectos de transicin. Cada fase debe ser aprovechada para inducir al usuario a "clickar" el banner y, a la vez, dar una idea de lo que se va a encontrar el usuario si lo pincha. Los banners dinmicos tcnicamente se pueden construir de las siguientes formas: Mediante Gifs animados. Formato ".GIF". Slo se puede definir un nico link para todo el conjunto de fases. Mediante Bitmaps estticos alternados mediante una funcin JavaScript. Formatos ".GIF" y ".JPG". Se pueden definir tantos links como fases tenga el banner. Asmismo, se puede definir el retardo de cambio de fase. (Al final del captulo, en el Anexo-1, se muestra un ejemplo de codificacin de alternancia de banners). Mediante animacin Flash. Formatos ".SWF", ".FLA". Se pueden definir tantos links como fases tenga el banner, el retardo de cambio de fase, la forma de la transicin, etc Las recomendaciones que rigen para los banners dinmicos en Internet son exactamente los mismos que los de los banners estticos. En cuanto a los pesos, se admiten cifras mayores que en los banners estticos, pero se debe ser muy cuidadoso en su diseo, a fn de no hacerlos excesivamente pesados. Una tcnica para ello es utilizar un nmerolimitadodecoloresen cada fase, y siempre losmismoscoloresencadafase. Tamao grande: 468 X 60 pixels (16,5 X 2,1 cms.) Peso < 35 KBytes Tamao mediano: 230 X 35 pixels (8,4 X 1,2 cms.) Peso < 25 KBytes Tamao botn: 90 X 30 pixels (3,2 X 1,1 cms.) Peso < 12 KBytes

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

1.7 Iconos de navegacin: Son pequeos grficos hiperenlace que: De forma aislada Acompaados de un hipertexto Acompaados de una etiqueta Acompaados de un "tooltip" recomendaciones: Iconos de navegacin

Utilizar ideografas estndar para representar las acciones de navegacin. No ser innovador a este respecto, al menos no en el concepto bsico representado: generar cierto grado de confusin con seguridad. Slo son recomendables los iconos que representan acciones comunes a la navegacin en cualquier site: Home Page ("Home") Pgina anterior ("Back") Pgina siguiente ("Forward") Inicio de pgina ("Up") Inicio de seccin ("Top page") ltima pgina de seccin ("End page") Imprimir ("Print") Ayuda ("Help") Etc. Para acciones de navegacin especficas de nuestro site: es preferible no utilizar iconos, o, de usarlos, acompaarlos de una etiqueta. En la mayora de casos aumenta la usabilidad un simple hipertexto, o un botn generado slo con texto y las clases de estilo adecuadas para conferirle apariencia de botn. Los tamaos pueden ser variables, aunque se ha demostrado la misma eficacio para los microiconos y tienen un peso apreciablemente menor: 40 X 40 pixels Peso < 1 KBytes 20 X 20 pixels Peso < 300 Bytes

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

12 X 12 pixels Peso < 100 Bytes Grande 40 X 40 pixels Peso < 1 KBytes

Mediano 20 X 20 pixels Peso < 300 Bytes Pequeo 12 X 12 pixels Peso < 100 Bytes

1.8 Barras de herramientas: Son conjuntos de opciones de navegacin generalemente presentes a lo largo de todo el site, o en secciones del mismo. Suelen presentarse: Slo iconos hipervnculo con un "tooltip":

Iconos hipervnculo acompaados de una etiqueta (no-clickable):

Iconos hipervnculo acompaados de un hipertexto (clickable):

Conjunto de hipertextos (clickable):

recomendaciones: Barras de herramientas

Si la Barra de Herramientas slo est compuesta de hipertextos, no utilizar elementos grficos en forma de botones para la implementacin de las opciones de navegacin, ya que tienen un cierto peso que penaliza la carga de la pgina. Se pueden realizar con clases de hojas de estilo que conllevan un tiempo de carga despreciable. Slo son recomendables los iconos que representan acciones comunes a la navegacin en cualquier site: Si se utilizan iconos, no est recomendado utilizarlos de forma aislada, aunque incluyan un "tooltip". Debern llevar asociada una etiqueta, que siempre ser preferible sea hipertexto, con el mismo link que el icono. En los hipertextos de las Barras de Herramientas siempre ser recomndable asociar

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

un parmetro "title" describiendo a qu enlaza realmente el botn en cuestin: Asmismo, en caso de ir acompaado de un icono, en la definicin de este deber asociarse el parmetro "alt" (tooltip) con el mismo objeto: <ahref="anterior.htm"title="Iralapginaantrior"><imgsrc="images/anterior.jpg" alt="Iralapginaantrior"></a>

1.9 Mapas de navegacin (grficos): Son grficos en los que se definen reas hipervnculo, cada una de ellas con un link distinto. En general cada vez son menos usados habida cuenta de que se suelen precisar imagenes de mediano o gran tamao que contribuyen en buena medida a aumentar el peso de la pgina. recomendaciones: Barras de herramientas

Procurar no utilizar mapas de navegacin grficos. El nico motivo de implementar opciones de navegacin no los justifica. En caso de que sean importantes por su contrribucin al diseo grfico del site: Utilizar una imgen lo menor posible, tratando de enriquecer el diseo con codificacin HTML y Hojas de Estilo. Utilizar la imgen del mapa a la menor resolucin posible, de manera que el peso de la misma penalice mnimamente la carga de la pgina. Una forma de conseguir esto es reduciendo el nmero de colores de la imgen y, para que esto no resulte empobrecedor, utilizar efectos de atenuacin de presencia tales como disminuir la saturacin y la luminosidad de la misma. Para la correcta identificacin de las areas de navegacin: Incluir un "tooltip" en cada rea que se active "onMouseOver" indicando el destino del enlace. Incluir una leyenda relativa al objeto del link. El resultado de este cdigo lo puedes ver en la siguiente pgina de ejemplo de Banner Rotatorio: Captulos: Optimizacin del uso de imagenes Tcnicas de reduccin
Temas relacionados: Banner Rotatorio

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com

WebUsable.com

Todos los derechos reservados.

open in browser customize

Are you a developer? Try out the HTML to PDF API

pdfcrowd.com