Técnicas de optimización de imágenes para Web

Temas relacionados: Banner Rotatorio

1. Optimización del uso de imagenes en sitios Web
2. Técnicas de reducción de la carga por elementos gráficos

Una vez asumido cuanto resulta de comprometido para la accesibilidad el tratamiento de los elementos gráficos, especialmente en la Home Page, partiremos de la base de iniciar su diseño, asumiendo las siguientes recomendaciones:

	recomendaciones: Reducción de carga por gráficos
Limitar al máximo el peso de gráficos utilizado en el site, fundamentalmente en la Home Page. Esto es especialmente crítico en Intranets, en donde el tiempo de acceso es crucial y la comunicación visual de ideas un factor menos estratégico.

1. 2.1 Reducción del número de gráficos: Las principales recomendaciones para la reducción del peso de elementos gráficos son:

   recomendaciones: Reducción del número de gráficos

   Utilizar el menor número de gráficos posible. Un número pequeño de imagenes situadas en puntos estratégicos puede ayudar a fijar la atención en una noticia o aspecto del site que se quiere resaltar, incitando además a su visita para visualizar en detalle. Un número elevado de imagenes, además de resultar muy pesada su carga, distrae, dispersa la atención, puede resultar confuso y provoca sensación de poca profesionalidad ("vendedor").





2. 2.2 Reutilización:

   recomendaciones: Reutilización

   Reutilizar los mismos gráficos a lo largo del site. Habida cuenta que los gráficos descargados por el visitante permanecen en el cache de su browser, la segunda vez que pide el mismo gráfico no se hace la petición al servidor, sino que se recupera del cache, evitando así la espera por la nueva entrega, agilizando los procesos de visualización. Si, por ejemplo, un site tiene una estructura del tipo: Libros Ciencia Ficción Novela Infantiles Entretenimiento Didácticos Discos Clásica Étnica Pop & Rock Pop Rock Latino Si se asocia a cada una de las secciones de artículos con una imagen identificativa, un visitante que llegara a "Libros Infantiles Didácticos", habría descargado los siguientes logos de sección (imagenes): Logo_Libros (imagen) Logo_Libros_Infantiles (imagen) Logo_Libros_Infantiles_Didácticos (imagen) Si se asocia una única imagen para la sección de Libros y se utilizan etiquetas textuales para identificar cada una de las subsecciones, el visitante descargaría una única imagen, con lo que, en cuanto a peso de imagenes por logos de sección, ahorraría un 60% de tiempo de espera: Logo_Libros (imagen) Logo_Libros (cache, t~0) + Etiqueta_Infantiles (texto) (t~0) Logo_Libros (cache, t~0) + Etiqueta_Infantiles_Didácticos (texto) (t~0)





3. 2.3 Redución del tamaño de las imagenes:

   recomendaciones: Reducir tamaño de imagenes

   Reducir el tamaño de los gráficos. La utilización de imagenes pequeñas tiene ventajas evidentes: Requieren menor tiempo de descarga. Ayudan a formatear mejor los párrafos de texto. Permiten la distribución de áreas de forma más ordenada. Ofrecen al usuario una visión de conjunto más rápida: imagenes grandes suponen mayores cantidades de scroll a lo largo de la página para retener la estructura de contenidos. En caso de precisarse imagenes de gran tamaño, es recomendable proporcionar una versión reducida en la Home Page (reducción proporcional / recorte) y ofrecer la posibilidad de acceder a la versión ampliada de la misma, informando de: Peso de la imagen ampliada (en KBytes) Tiempo estimado de descarga en condiciones normales (modem 54 KB/s), (en segs.) (Opcional). El procedimiento para reducir una imagen grande a otra menor es, por este orden: Recortar la imagen (cropping), dejando sólo la parte más significativa de la misma (si es posible y no se pierde información significativa). Reducción proporcional del tamaño: en la mayoría de casos, pueden llegarse a reducciones de un 60 o 70% del tamaño manteniendo prácticamente toda la información a la vista del usuario.





4. 2.4 Disminución de la percepción de espera: Se establece un equipo de 4 a 8 inspectores, cada uno con un papel determinado en el ámbito de la inspección global e instrucciones precisas de qué aspectos debe evaluar y qué conclusiones debe recoger.

   recomendaciones: Disminuir la percepción de espera

   Reducir la percepción de espera durante la descarga de las imágenes. En los casos en los que sea irremediable la utilización de imagenes de gran tamaño, y por tanto, de gran peso, es conveniente utilizar algún mecanismo para aliviar al usuario la espera por las imagenes. Esto puede realizarse de 2 formas: Utilizar la carga sucesiva de 2 versiones de la misma imagen: Una de baja resolución, por ejemplo en escala de grises, que será de descarga rápida al no tener demasiado peso. La misma en alta resolución, con lo que el efecto subjetivo de espera se atenúa. Se realiza con el tag: <img lowsrc="image_lowres.jpg" src="image_highres.jpg"> Utilizar las imágenes en formato GIF entrelazado, que permite la carga gradual de los detalles partiendo de la imagen completa a baja resolución, y mejorando progresivamente la calidad de la misma: De esta forma, muy pronto el usuario empieza a tener una primera impresión de la imagen completa. Otra forma de reducir la percepción de espera es utilizar Barras de Progresión de Descarga. Aún en el caso de que no se disponga de una que reproduzca la evolución real del proceso, se ha demostrado que aportan un feedback positivo al usuario que percibe que su petición está siendo atendida y está en curso.





5. 2.5 Uso de formatos gráficos que permiten compresión: Se analizan sólo las características que debe cumplir un Web site en función de las especificaciones establecidas inicialmente.

   recomendaciones: Usar formatos gráficos que permitan compresión

   Utilizar siempre que sea posible formatos gráficos que permitan compresión de las imágenes. La mayor parte de los navegadores modernos incorporar plugg-ins que permiten visualizar automáticamente distintos formatos de ficheros gráficos. A pesar de ello, conviene ser muy cuidadoso con el formato gráfico utilizado, ya que el peso de una misma imagen puede variar mucho dependiendo del formato utilizado. Más adelante se muestra un ejemplo: Las recomendaciones sobre el formato gráfico y lacompresión a utilizar en sitios Web es la siguiente: Utilizar por defecto formato .JPG. Una compresión de al menos el 50% (e incluso mayor) (calidad media, media-baja), suele ser admisible en cuanto a calidad de la imagen para la mayoría de necesidades de visualización-Web. Utilizar formato .GIF cuando se precise fondo de imagen transparente. Es el único formato que permite este utilidad. Utilizar formato .GIF Entrelazado o .JPG Progresivo cuando se precise visualización rápida de la imagen completa con baja calidad y transiciones progresivas a mejoras en la calidad de la misma. Utilizar formato .JPG o .GIF independientemente cuando la imagen sea de pequeñas dimensiones (< 50 X 50 pixels), ya que la diferencia de pesos no será significativa.

   Ejemplo de una misma imágen en distintos formatos y niveles de compresión:

   Bitmap .BMP Sin compresión 147 KB	Bitmap .JPG Compresión 75% 8,55 KB	Bitmap .JPG Compresión 0% 39,1 KB
   Bitmap .GIF No-entrelazado Sin compresión 30,3 KB	Bitmap .GIF Entrelazado Sin compresión 33,8 KB

   Como puede observarse, la calidad de la imagen no varía excesivamente en ciertos margenes de compresión, a efectos de los requerimientos que normalmente se precisan en sitios Web y para la resolución de los monitores utilizados en la mayoría de los casos.





6. 2.6 Reducción del número de colores:

   	recomendaciones: Reducir el número de colores
   Reducir el número de colores de elementos gráficos y fotos, ya que, al tener que guardar información de un mayor número de colores de la imagen, el peso de la misma es mayor cuantos más colores se utilicen en la misma. Más adelante se muestra un ejemplo:

   Ejemplo de una misma imágen utilizando distinto número de colores:

   Bitmap .GIF No-entrelazado Sin compresión 128 colores 30,3 KB	Bitmap .GIF Entrelazado Sin compresión 16 colores 33,8 KB

   Como puede observarse, la calidad de la imagen no varía excesivamente en ciertos margenes de compresión, a efectos de los requerimientos que normalmente se precisan en sitios Web y para la resolución de los monitores utilizados en la mayoría de los casos.





7. 2.7 Codificación de aspectos gráficos mediante HTML, Hojas de Estilo...:

   recomendaciones: Codificación de aspectos gráficos mediante HTML, Hojas de Estilo

   Utilizar al máximo las posibilidades de diseño gráfico ofrecidas por HTML, CSS, CSS2, JavaScript, DHTML y demás técnicas de codificación de presentación. El conocimiento exhaustivo de marcado HTML permite generar algunos efectos visuales atractivos que proporcionan formas de presentación elegantes sin necesidad del uso de imágenes, o valiéndose de algunas de muy poco peso haciendo que se repitan al "renderizar" la página de forma adecuada. Pero es mediante el uso de Hojas de Estilo (especificación CSS1, pero sobre todo CSS2), que se pueden obtener, sin necesidad de utilizar apenas imágenes, diseños gráficos de peso casi despreciable generando elementos gráficos sumamente interesantes y artractivos: Botones Logos Banners Áreas de texto enmarcadas y coloreadas Áreas y marcos de página Zonas de Navegación Barras de Herramientas Etc. La utilización de objetos y funciones JavaScript para la gestión de eventos de interactividad y presentación permite realizar diseños sumamente atractivos también con una contribución en peso mínima. Mediante DHTML (HTML Dinámico) las posibilidades de presentación gráfica de capas de contenido, despliegue de opciones de menús, expansión de artículos, etc. son enormes, proporcionando una plataforma de desarrollo de interfaces de presentación impactantes sin apenas elementos gráficos, y de peso tan sólo el requerido por los bytes del código. Los Applets de JAVA permiten un buen número de alternativas gráficas de presentación sin recurrir a imagenes. Su principal inconveniente es la necesidad de arrancar la máquina virtual JAVA que suele requerir un tiempo apreciable de espera en el cliente. Por esta razón se desaconsejan si su única finalidad es aportar efectos gráficos, justificándose sólo si son utilizados como herramienta que aporte funcionalidad interactiva del usuario con la aplicación/servidor.

   El siguiente banner es sólo texto y está realizado con CSS Positioning, sin utilizar gráfico alguno:

   





3. Anexos

1. Anexo-1 Codificación JavaScript de Banner rotatorio con diferentes links de destino: Una forma de codificar la rotación de diferentes banners (3 en el ejemplo), con tiempo de transición parametrizable y un "link" distinto por fase se muestra a continuación:

   <head>
   <meta http-equiv="content-type" content="text/html; charset=iso-8859-1">
   <title>Banner Rotatorio</title>
   </head>
   
   <script language="javascript">
   <!--
   Banner_imganz=3;
   var Banner_sctr=0;
   var Banner_halt=0;
   var Banner_rand=1;
   var Banner_timeout=2000;
   var Banner_isn=new Array();
   
   if (document.images) {
   for (i=0;i<Banner_imganz;i++) Banner_isn[i]=new Image();
   
   Banner_isn[0].src="images/showbanner1.gif";
   Banner_isn[1].src="images/showbanner2.gif";
   Banner_isn[2].src="images/showbanner3.gif";
   }
   
   else {
   Banner_isn[0]="images/showbanner1.gif";
   Banner_isn[1]="images/showbanner2.gif";
   Banner_isn[2]="images/showbanner3.gif";
   }
   
   var Banner_durl=new Array();
   Banner_durl[0]="rec_si.htm";
   Banner_durl[1]="rec_no.htm";
   Banner_durl[2]="rec_access.htm";
   
   function Banner_rotate(){
   if (Banner_halt!=1){
   if (Banner_rand==0) {Banner_sctr++;}
   else {Banner_sctr=Math.floor(Math.random()*Banner_imganz);}
   if (Banner_sctr>Banner_imganz-1) Banner_sctr=0;
   if (document.images) {
   document.Banner.src=Banner_isn[Banner_sctr].src;
   }
   
   else {
   document.Banner.src=Banner_isn[Banner_sctr];
   }
   
   setTimeout("Banner_rotate()",Banner_timeout);
   }
   }
   
   function Banner_link(){
   Banner_halt=1;
   if (Banner_durl[Banner_sctr].length!=0) location.href=Banner_durl[Banner_sctr];
   }
   function Banner_status(){ parent.window.status=Banner_durl[Banner_sctr];}
   // -->
   </script>
   
   <a href="#" onclick="banner_link();return false" onmouseover="banner_status();return true;" onmouseout="parent.window.status='';return true;">
   
   <script language="javascript">
   <!--
   Banner_sctr=-1; if (Banner_rand==0) {Banner_sctr++;}
   
   else {Banner_sctr=Math.floor(Math.random()*Banner_imganz);}
   
   if (document.images) {
   document.write('<img src="'+Banner_isn[Banner_sctr].src+'" alt="Banner" width=230 height=35 border="0" name=Banner></A>');
   }
   
   else {
   document.write('<img src="'+Banner_isn[Banner_sctr]+'" alt="Banner" width=230 height=35 border="0" name=Banner></A>');
   }
   settimeout("banner_rotate()",banner_timeout);// --></script>
   
   </body>
   </html>
   

El resultado de este código lo puedes ver en la siguiente página de ejemplo de Banner Rotatorio:

Optimización del uso de imagenes

Técnicas de reducción

Temas relacionados: Banner Rotatorio