Unidad 5. Básico: Formatos de imagen

Formatos de imagen

Las imágenes pueden ser de muchos formatos diferentes: gif, jpg, png, svg, webp, tiff, bmp, etc. Pero no todos estos formatos son adecuados para una web, debido a que pueden ocupar mucha memoria o a que no son compatibles con algunos navegadores.

Los formatos más utilizados para web son el GIF, el PNG y el JPG, pero también las imágenes SVG tienen ventajas; y los gráficos generados dinámicamente con CANVAS son muy interesantes. Hay nuevos formatos con buenas cualidades que pueden ir ganando espacio de uso, como APNG, WEBP. Vamos a ver un poco más sobre estos formatos:

Formato GIF:

Utilizan un máximo de 256 colores, y son recomendables para dibujos con grandes áreas de un mismo color o de tonos no continuos. También si se muestra texto.

Suelen utilizarse con gran frecuencia, ya que permiten contener transparencias y animaciones.

En cambio, no están recomendados para fotografías, ya que se perderían colores, y al no tener áreas de color continuo, el archivo final sería mayor que por ejemplo un JPG. Por ejemplo:

Formato JPG:

Estas imágenes pueden contener millones de colores, en un archivo comprimido de tamaño razonable. Por ejemplo, las imágenes que obtenemos de una cámara digital suelen estar en este formato.

Por tanto, son especialmente indicadas para fotografías, o gráficos complejos, obteniendo mejores resultados que el GIF.

En cambio, en gráficos con pocos colores y continuos, generará un archivo mayor que el GIF, y podremos apreciar pérdida de calidad. Por ejemplo:

Formato PNG.

Se trata de un formato de compresión sin perdida. Tiene varias versiones:

PNG 8 es un formato de 256 colores muy similar al GIF, que en teoría obtiene archivos algo menores. También admite transparencias.

PNG 24 y PNG 36. Es un formato de color verdadero (34 o 36 bits), lo que hace que sea un archivo de tamaño algo mayor. Admite canal de transparencia alfa, lo que quiere decir que puede obtener distintos niveles de transparencia, a diferencia de PNG 8 o GIF que pueden ser totalmente transparentes o no. El resultado es el de mayor calidad, pero también de mayor tamaño. Este formato es el más adecuado cuando necesitamos distintos niveles de transparencia, o requerimos que una imagen muestre correctamente todos sus colores y detalles, evitando la pérdida de calidad que puede producir JPG. También resulta especialmente indicado para imágenes con degradados de color.

Formato SVG.

En un formato para representar gráficos vectoriales, de ahí su nombre SVG, Scalable Vector Graphics (Gráficos Vectoriales Escalables). Es escalable porque permite ampliar o reducir el gráfico sin pérdida de calidad y sin aumentar el tamaño del archivo. Es vectorial porque la imagen se define con vectores y fórmulas matemáticas que representan elementos geométricos (líneas, curvas, polígonos, etc.), los elementos de la imagen están definidos como formas elementales (líneas, rectángulos, círculos, curvas, polígonos, etc.). Por esto es adecuado para representar gráficos, esquemas, dibujo técnico, y en general cualquier imagen que pueda generarse de forma precisa por los elementos que la forman. Y por el mismo motivo no es adecuado para representar imágenes fotografías que están formadas por puntos de color captados por el sensor de la cámara pero que no tienen ninguna relación matemática entre ellos.
Una imagen SVG puede incluirse en una página web de dos formas, como una imagen ya generada en un archivo, o como una imagen generada al cargar la página y que puede modificarse dinámicamente por javascript. El hecho de poder contener código javascript hace posible que un archivo svg pueda contener código malicioso.

Elemento Canvas.

Canvas no es propiamente un formato gráfico sino un elemento de HTML 5 que permite dibujar gráficos, manipular imágenes y realizar animaciones en una página web de forma dinámica. Es decir, el gráfico se crea en el momento en que se carga la página. El gráfico se define mediante programación, usualmente Javascript. Una vez creado el gráfico se pueden programar acciones para que el usuario interactúe con él, por ejemplo, haciendo clic para arrancar una animación o arrastrando un elemento del gráfico.

Lo habitual es utilizar GIF o PNG para pequeños gráficos, normalmente elementos del diseño o imágenes simples, y JPG para fotografías, sean del tamaño que sean. Si es posible, para gráficos utilizar imágenes SVG ya que son escalables. Para gráficos generados dinámicamente se puede utilizar Canvas o SVG.

Al utilizar formatos nuevos hay que tener en cuenta que aunque algunos navegadores los soportan, no lo hacen todos. Y hemos de asegurarnos de que cualquier visitante de nuestra página pueda ver las imágenes.

Puedes cambiar el formato de las imágenes mediante la utilización de algún programa de tratamiento de imágenes, como pueden ser Illustrator, Photoshop, Corel Draw, Gimp, Inkscape.