Conceptos básicos

Antes de tratar la optimización de imágenes conviene repasar algunos conceptos clave sobre imagen digital.

Resolución

Es el número de píxeles o puntos que contiene una imagen por pulgada lineal. Este valor se expresa en ppp (píxeles por pulgada). Cuanto más píxeles por pulgada contenga una imagen, mayor será su calidad y en consecuencia mayor número de bytes ocupará su archivo.

Profundidad de color

Es el número de bits necesarios para codificar y guardar la información de color de cada píxel. Un bit es una posición de memoria que puede tener el valor 0 ó 1. Cuanto mayor sea la profundidad de color en bits, la imagen dispondrá de una paleta de colores más amplia. Se utiliza 1-bit para imágenes en blanco/negro sin grises (0=color negro, 1= color blanco); 2-bits = 4 colores (00=color negro, 01=color X, 10=color Y, 11=color blanco); 3-bits = 8 colores; …; 8-bits = 256 colores; …; 24-bits = 16.7 millones de colores.

Formatos de imagen

Las imágenes digitales se pueden guardar en distintos formatos. Cada uno se corresponde con una extensión específica del archivo que lo contiene. Los más utilizados para la publicación web son: GIF, JPG y PNG.

GIF (Graphics Interchange Format : Formato de Intercambio Gráfico)

Admite una profundidad de color hasta de 8 bits como máximo, es decir, una paleta de 256 colores (color indexado). La conversión de una imagen a este formato produce una disminución del tamaño de archivo por reducción de la profundidad de color.

JPG-JPEG (Joint Photographic Experts Group : Grupo de Expertos Fotográficos Unidos)

A diferencia del formato GIF, admite una paleta de 16,7 millones de colores (24 bits).

Las cámaras digitales suelen almacenar directamente imágenes en formato JPEG con máxima calidad y sin compresión.

La compresión JPEG puede suponer cierta pérdida de calidad en la imagen. Cuando se pretende publicar en la web conviene asumir esta pérdida porque reduce considerablemente el tamaño del archivo conservando un aspecto aceptable. Si la imagen procede de una cámara digital es recomendable aplicar una calidad que oscile entre 60-90 % del JPG original.

PNG (Portable Network Graphic : Gráfico portable para la red)

Es un formato que surgió como alternativa al GIF. Es soportado por navegadores IE 4 o superiores.

Puede utilizar una profundidad de color de 24 bits (16,7 millones de colores) superando las limitaciones del formato GIF.

Recomendaciones sobre optimización de imágenes para la web

Al crear un sitio web es muy recomendable que los archivos que contienen las imágenes ocupen el menor número posible de bytes para agilizar su descarga y visualización por Internet. Esto garantizará el acceso de aquellos clientes que utilicen conexiones con anchos de banda modestos.

El tamaño de un archivo gráfico viene determinado, entre otros, por los siguientes factores:

• Dimensiones de la imagen.
• Profundidad o paleta de colores.
• Resolución.
• Formato  de archivo (JPG, GIF, PNG).

    • Conviene definir una resolución de imagen no superior a 96 ppp. Es la resolución que usan las pantallas de ordenador. No interesa optar por valores mayores ya que aumenta considerablemente el peso del archivo a descargar y el usuario no lo aprecia.

    • En ocasiones puede interesar reducir el número de colores de la paleta porque ello supone disminuir el tamaño del archivo.Conviene utilizar un programa de tratamiento de imágenes para definir las dimensiones concretas de una imagen antes de insertarla en una página web.

    • Es recomendable guardar los originales de las imágenes favoritas en formato BMP, TIFF ó JPEG sin comprimir. A partir de ellas se puede crear una copia en formato GIF (PNG) o JPEG con las dimensiones, resolución y paletas optimizadas para publicarlas en la web.

    • Las imágenes GIF son más adecuadas para dibujos, gráficos y logotipos. Son aquellas donde predominan los colores sólidos y una paleta con un número reducido de colores.

    • Las imágenes JPEG se adaptan mejor a fotografías e imágenes con degradados complejos. Admiten color de 24 bits y gracias a su compresión ofrecen una imagen más brillante que ocupa menos espacio.

      « Volver a Edición de Imágenes

      Ir a Educastur

      © Consejería de Educación y Ciencia del Gobierno del Principado de Asturias - Contacta con nosotros