Formatos gráficos para páginas web

  • Por
  • 01 de enero de 2001
  • Valoración:
  • 13 Comentarios
  • Diseño web
Presenta los formatos gráficos utilizados en las páginas web, el GIF, el JPG y PNG. Hace hincapié en los dos primeros, resumiendo sus características y enseñando a optimizar los ficheros.
El componente gráfico de las páginas web tiene mucha importancia, es el que hace que estas sean vistosas y el que nos permite aplicar nuestra creatividad para hacer del diseño de sitios una tarea agradable. Es también una herramienta para acercar los sitios al mundo donde vivimos, si embargo, es también el causante de errores graves en las páginas y hacer de estas, en algunos casos, un martirio para el visitante.

Las nociones básicas para el uso de archivos gráficos son sencillas, conocerlas, aunque sea ligeramente, nos ayudará a crear sitios agradables y rápidos. No cometer errores en el uso de las imágenes es fundamental, aunque no seas un diseñador y las imágenes que utilices sean feas, utilízalas bien y así estarás haciendo más agradable la visita a tus páginas.

Tipos de archivos

En Internet se utilizan principalmente dos tipos de archivos gráficos GIF y JPG, pensados especialmente para optimizar el tamaño que ocupan en disco, ya que los archivos pequeños se transmiten más rápidamente por la Red.

El formato de archivo GIF se usa para las imágenes que tengan dibujos, mientras que el formato JPG se usa para las fotografías. Los dos comprimen las imágenes para guardarlas. La forma de comprimir la imagen que utiliza cada formato es lo que los hace ideales para unos u otros propósitos.

Adicionalmente, se puede usar un tercer formato gráfico en las páginas web, el PNG. Este formato no tiene tanta aceptación como el GIF o JPG por varias razones, entre las que destacan el desconocimiento del formato por parte de los desarrolladores, que las herramientas habituales para tratar gráficos (como por ejemplo Photoshop) generalmente no lo soportaban y que los navegadores antiguos también tienen problemas para visualizarlas. Sin embargo, el formato se comporta muy bien en cuanto a compresión y calidad del gráfico conseguido, por lo que resulta muy útil en infinidad de casos. Todos estos problemas han pasado y ya sólo Internet Explorer 6 tiene algunos fallos cuando trata con PNG, pero la aceptación actual es más que suficiente para incorporarlo a nuestras posibilidades reales de trabajo con formatos y optimización de archivos.

A continuación se puede ver una tabla comparativa de las principales características de los formatos gráficos para crear páginas web:

Formato GIF

logo de desarrolloweb
Un logotipo es un ejemplo claro de imagen GIF
A parte de ser un archivo ideal para las imágenes que estén dibujadas tiene muchas otras características que son importantes y útiles.

Compresión: Es muy buena para dibujos, como ya hemos dicho. Incluso puede ser interesante si la imagen es muy pequeña, aunque sea una foto.

Una imagen con transparencia
Parte de esta imagen es transparente
Transparencia: es una utilidad para definir ciertas partes del dibujo como transparentes. De este modo podemos colocar las imágenes sobre distintos fondos sin que se vea el cuadrado donde está inscrito el dibujo, viendose en cambio la silueta del dibujo en cuestión.
Para crear un gif transparente debemos utilizar un programa de diseño gráfico, con el podemos indicar qué colores del dibujo queremos que sean transparentes. Generalmente, definimos la transparencia cuando vamos a guardar el gráfico.
Colores: Con este formato gráfico podemos utilizar paletas, conjuntos, de 256 colores o menos. Este es un detalle muy importante, puesto que cuantos menos colores utilicemos en la imagen, por lo general, menos ocupará el archivo. En ocasiones, aunque utilicemos menos colores en un gráfico, este no pierde mucho en calidad, llegando a ser inapreciable a la vista.
En algunos programas podemos modificar la cantidad de colores al guardar el archivo, en otros lo hacemos mientras creamos el gráfico.


32 colores

16 colores

8 colores
Imagen tomada con distintas paletas de colores. Se puede apreciar como con pocos colores se ve bien el gráfico y como pierde un poco a medida que le restamos colores.

Formato JPG

Una imagen típica JPG es una fotografía
Una fotografía con formato JPG
Veamos ahora cuales son las características fundamentales del formato JPG:

Compresión: Tal como hemos dicho anteriormente, su algoritmo de compresión hace ideal este formato para guardar fotografías. Además, con JPG podemos definir la calidad de la imagen, con calidad baja el fichero ocupará menos, y viceversa.

Ejemplo de transparencia en JPG
Intento de transparencia en JPG. Pulsar para ampliar
Transparencia: Este formato no tiene posibilidad de crear áreas transparentes. Si deseamos colocar una imagen con un área que parezca transparente procederemos así: con nuestro programa de diseño gráfico haremos que el fondo de la imagen sea el mismo que el de la página donde queremos colocarla. En muchos casos los fondos de la imagen y la página parecerán el mismo.
Colores: JPG trabaja siempre con 16 millones de colores, ideal para fotografías.

Optimizar ficheros

Para que las imágenes ocupen lo menos posible y se transfieran rápidamente por la Red debemos aprender a optimizar los ficheros gráficos. Para ello debemos hacer lo siguiente:

Para los archivos GIF: Reduciremos el número de colores de nuestra paleta. Esto se hace con nuestro editor gráfico, en muchos casos podremos hacerlo al guardar el archivo.

Imagen con 256 colores GIF 256 colores - 10,8 KB

Imagen con 32 colores GIF 32 colores - 5,5 KB

Imagen con 4 colores GIF 4 colores - 2 KB

Para los archivos JPG: Ajustaremos la calidad del archivo cuando lo estemos guardando. Este formato nos permite bajar mucho la calidad de la imagen sin que esta pierda mucho en su aspecto visual.

Imagen de calidad 0 pesa 3K JPG
calidad 0
3 KB
Imagen de calidad 30 pesa 5,9K JPG
calidad 20
5,9 KB
Imagen de calidad 50 pesa 10K JPG
calidad 50
10 KB

Imagen tomada en Photoshop cuando se guarda para el web
Photoshop es una herramienta excelente para optimizar ficheros. Viendo varias copias podemos elegir la más adecuada.
Es imprescindible disponer para optimizar la imagen de una herramienta buena que nos permita configurar estas características de la imagen con libertad y fácilmente. Photoshop 5.5 o 6 es un programa bastante recomendable, pues incorpora una opción que se llama "Guardar para el Web" con la que podemos definir los colores del gif, calidad del JPG y otras opciones en varias muestras a la vez. Así con todas las opciones configurables, viendo los resultados a la vez que el tamaño del archivo podemos optimizar la imagen de una manera precisa con los resultados que deseamos.

También existen en el mercado otros programas que nos permiten optimizar estas imágenes de manera sorprendente. Una vez hemos creado la imagen la pasamos por estos programas y nos comprimen aun más el archivo, haciéndolo rápido de transferir y, por tanto, más optimo para Internet. Al ser estas utilidades tan especializadas los resultados suelen ser mejores que con los programas de edición gráfica.

Ejemplos de optimizadores gráficos:
- WebGraphics Optimizer
- ProJPG, GIF Imantion
Y con versiones Online:
- GIF Wizard

Nota: Si te interesa reforzar todos los conceptos tratados en este artículo y ver cómo optimizamos nosotros imágenes para la web, te recomendamos ver el Vídeo sobre Formatos gráficos para páginas web.

Autor

Miguel Angel Alvarez

Miguel es fundador de DesarrolloWeb.com y la plataforma de formación online EscuelaIT. Comenzó en el mundo del desarrollo web en el año 1997, transformando su hobby en su trabajo.

Comentarios

lop

15/2/2002
Recomiendo para el tratamiento de imagenes.. el Fireworks 4, que permite ver multiples preview de como vas a quedar la imagen en distintos tipos de formato..
Ademas de poder optimizar.. por lotes completos.. y agregarles extenciones a dichas transformaciones.. por ej.. archivo 1.jpg.. bajar calidad a 0 en xxpix por xxpix. y la guarda en el directorio que uno quiera con un su- o pre- fijo... tipo_chica_grande.. suerte.. lop

-

10/10/2002
Respecto al formato PNG:

por lo que resultaría útil si se llega a extender su uso. ¿No es ya útil? Muchas páginas web lo utilizan y se visualizan perfectamente (al menos con mozilla y konqueror que son los navegadores que utilizo). Me permito recordar que el formato PNG es libre mientras que el GIF *NO*, y aunque de momento no sean validas las patentes en europa, esto es de momento, y en caso de que dejase de ser así habría que pagar por las imagenes en formato GIF en cada una de las páginas Web que lo usasen (ninguna empresa querría tener problemas legales por algo así ¿verdad?). Personalmente uso PNG, obtengo la misma calidad y con un formato libre, más facil de implementar en cualquier programa que cualquier formato cerrado.

canavis_digital

14/4/2004
el programa adove photoshop 6.0 hacia arriba te permite ser un artista y controlar los pesos de una forma impresionante.. asi q usenlo.. y suerte compañeros

quinqui

03/11/2004
Otro programa de edicion de material grafico es el PhotoImpact de Ulead. En lo personal lo utilizo para desarrollar todo lo que es el diseno grafico de mis paginas web, pues permite el uso de todas las imagenes a modo de objetos independientes y editables por separado o en conjunto en un entorno de fondo personalizable. Tiene muchas mas utilidades, en especial referidas a la publicacion web, pero no las he explorado aun mayormente (pues para eso me valgo del Dreamweaver), pero por seguro lo recomiendo. Al menos lo encuentro mucho mas rapido en edicion, en cuanto a la utilizacion de las imagenes como objetos movibles de por si via mouse, en vez de las capas solo seleccionables via ventana de Capas del PhotoShop, por ejemplo...

En cuanto a editores de GIFs animados, recomiendo el GIF Animator del Paint Shop Pro. PhotoImpact trae un editor para la creacion de GIFs animados, pero lamentablemente, para los disenadores creativos, son preestablecidos, aun su belleza.

fastop

19/9/2005
El editor por excelencia para imagenes PNG es Fireworks de Macromedia, ya que este soft trabaja con este formato como base y cuenta con un asistente de exportacion (jpg/gif) el cual te optimiza muy bien las imagenes respescto al peso de estas.

Y ...PNG (hasta donde yo lo he utilizado...) no soporta transparencias y segun mi punto de vista no es muy optimo este formato.

caminomaster

14/3/2007
No aparece el archivo de ampliar transparencia jpg.

Recomiendo el editor de imágenes Gimp. Ofrece las opciones de colores gif y calidad jpg al momento de guardar, además es gratuito (opensource)

Carlos

21/6/2007
Aunque no tenga nada que ver con HTML, por favor, "hincapié" con "h". Tenemos que cuidar mucho la ortografía en las web de amplia difusión como ésta.

Antonio

21/9/2008
Un apunte solamente, el programa de retoque digital gratuito GIMP, si soporta PNG, entre otros muchos tipos.

ISa_UnLTd

06/8/2009
pORQUE NO PUEDO
porque no puedo poner imagenes .JPEG

Gaston_Mekalogman

12/12/2009
Sobre GIF y JGP...
Optar por alguno de estos dos formatos esta bien dificil, porque tecnicamente según veo Gif es mejor debido a los problemas con los navegadores viejos que tiene Png (Internet Explorer 6 sigue siendo muy utilizado muy a nuestro pesar) y la compatibilidad. Pero investigue un poquito gracias al comentario anterior de un user (¿-?) y encontre esto:

"El formato gif es propiedad de Unisys, esto significa que tiene una patente con restricciones de uso y que este propietario puede fijar reglas y decidir cuando cambiarlas, de hecho en 1995 Unisys permitía la utilización de GIFs sólo a fines no comerciales.

En ese año en que Unisys anuncia que haría cumplir su patente sobre el algoritmo LZW usado en el formato GIF surge la necesidad de contar con otro formato, lugar que ocuparía PNG (portable network graphics), el cual no tiene restricciones de patentes y está recomendado por el W3C .

El formato PNG se abriría paso en la web con mayor penetración de uso en 1999 cuando Unisys puso fin a su política de licencias de patente libre de royalties para los desarrolladores de software libre o no comercial."

Osea que en cualquier momento le agarra un raye a Unisys y nos va a querer cobrar, aunque no creo que se lo permitan, o que le vayan a pagar pero quien sabe. Además de otras medidas... no se.

Por el momento usare GIF para practicar, pero creo que hay que considerarlo.

comentario Nº [12]

Curra S.

07/6/2010
Corrección ortográfica
Simplemente quería avisar de un error ortográfico en el subtítulo. Hincapié con hache (h). He leído tu artículo para despejar una duda y me ha sido de gran utilidad. Muchas gracias.

Javier

17/7/2010
gif
Gif, ¿compresión sin pérdidas? No estoy de acuerdo.

Ashgabat

15/3/2012
Buen artículo.
Buen artículo.

Compartir