Imágenes en una Página Web

¡Hola de nuevo internauta!,

      En este artículo veremos los formatos de imágenes que se usan en las páginas web. Algo muy conceptual sin entrar en detalle de la implementación de las etiquetas <img>.

Las páginas web no son sólo texto si no que están formadas por varios elementos entre los que destacan aquellos que se aprovechan de la vista bien para hacer más ameno o divertido el sitio web, bien para aprovecharse de la memoria visual para resumir o concretar conceptos. Actualmente suelen usarse los vídeos e imágenes y serán de estas últimas sobre las que hablaremos como indicamos en el párrafo anterior.

¡Así que sin más preámbulos al ataque!.

1. ¿Por qué usar gráficos?

Porque ayudan a que el sitio web sea más atractivo visualmente y al usuario a comprender la información ofrecida mejorandolo considerablemente. Obviamente hay varios formatos de gráficos soportados por los navegadores gracias el HTML/XHTML y dependiendo de cada caso se usarán unos u otros.

2. ¿Qué formatos existen actualmente?

A la hora de escribir este artículo los formatos existente se agrupan en dos tipos:

• Gráficos de mapas de bits: Son aquellos que dividen una imagen en una cuadrícula de píxeles y especifican el color de cada píxel. Su uso es ideal para fotografías y gradaciones complicadas de sombra y color. El número de píxeles por pulgada recomendado son 72 para aquellas imágenes que se muestren en páginas web ya que más ralentizaría la carga de la página, y de 300 para aquellas imágenes que se vayan a imprimir. Están formados por los siguientes formatos: JPEG, GIF, TIFF, PNG y BMP.
• Gráficos vectoriales: Dividen la imagen en líneas y formas almacenando las líneas como coordenadas rellenando los espacios entre líneas con color. Suelen usarse para ilustraciones y animaciones. Son escalables lo que quiere decir que no pierden calidad cuando cambia su tamaño. Sus formatos son: SVG(Scalable Vector Graphics) y Flash.

Desglosemos ahora cada tipo de formato por separado para ver sus características:

• BMP: Es el formato ofrecido por windows puede guardar imágenes de hasta 24 bits y pueden comprimirse mediante RLE(Run-Length Encoding) sin pérdida de calidad. No suelen usarse en la actualidad en las páginas web por lo cual no considero necesaria más explicación. Si quieres saber ,ás sobre ellas te aconsejo que hagas una búsuqeda por internet.
• GIF(Graphics Interchange Format): Usan una paleta de hasta 256 colores seleccionados de un rango de 16 millones de colores. Dicha paleta la almacena en lo que se denomina tabla de resolución directa donde cada píxel hace referencia a la información de color, dando como resultado un archivo más pequeño en tamaño.

Es el formato adecuado para aquellas imágenes en las que existen áreas planas de color(áreas de un sólo color, como por ejemplo un rectángulo que use sólo el azul).Si un archivo GIF usa más de 256 colores se usa la técnica del entramado que posee las siguientes desventajas:


• Banding en colores(las transacciones entre colores son visibles).
• Si hay un color plano juanto a un color tramado se puede ver donde ocurre el cambio.
• Cada píxel es opaco o transparente(no hay grados de transparencia) lo que puede dar a que las curvas se visualicen pixeladas.

Por ello no son adecuados para fotografías detalladas. Para su compresión sin pérdida de calidad se usa la técnica LZW.
Permiten realizar imágenes animadas ya que pueden almacenar más de un fotograma en su archivo.
• JPEG(Joint Photographic Experts Group): Se diseñó para funcionar con fotos por lo que no trabajan muy bien con imágenes que tengan gran cantidad de color plano o bordes de alto contraste. Soporta entrelazado.
• PNG(Portable Network Graphics): Se diseñó para los mismos usos que el formato GIF. Hay dos tipos de PNG:


• 8 bits: Con las mismas limitaciones del GIF.
• 24 bits: Que posee las siguientes ventajas:
  
  • Puede incluir cualquier color sin perder ningún dato.
  • Usa un mapa para proporcionar diferentes niveles de transparencia para cada píxel lo que da como resultado bordes más suavizados.
  • Su carga es 8 veces más rápida que un gif.
  • Pueden contener información de corrección gamma para diferentes monitores y plataformas.

Comprimen mejor que un GIF equivalente. Puede usarse conn HTML, CSS, SVG, Canvas API y WebCGM.

• SVG(Scalable Vector Graphic): Es un lenguaje de marcado parecido al XML para describir todos los aspectos de una imagen: componentes, colores, formas, etc. Gracias a ello el usuario puede modificarla como desee y mejor se ajuste a sus preferencias, permitiendo además, editarlas como un archivo y trabajar sobre el mismo de esta manera. Es soportado por la mayoría de los navegadores actuales aunque en aquellas versiones antiguas es necesario instalarse un plugin. Genera gráficos de poco peso. No son afectados por restricciones "cross domain" si se usan en vez de icons fonts. No pierde calidad al cambiar sus dimensiones. Usa objetos gráficos que pueden ser agrupados, transformados , renderizados y recibir un estilo común. Los tipos de objetos gráficos son:
  
  • Elementos geométricos vectoriales.
  • Mapas de bits/digitales.
  • Texto
  
  Posee su propio DOM(Document Object Model) lo que permite animaciones vectoriales mediente ECMAScript o SMIL en sus manejadores de eventos. Es compatible con otras normas web.

Y hasta aquí la entrada de hoy. La verdad es que ha sido menos agradable que otras debido a la falta de imágenes, ¡lo que indica lo importante que son para la página/sitio web!. Espero que os haya ayudado.

¡Gracias por leerme!.