Vídeo: Formatos gráficos para páginas web

  • Por
Videotutorial con un repaso general a los formatos gráficos que se pueden utilizar una página web, gif - jpg y png, sus características, técnicas de uso y consejos para sacarles el mejor partido.
Publicamos un vídeo enfocado para personas con poca experiencia en el diseño web, en el que se estudia uno de los temas más básicos que debemos saber cuando comenzamos a trabajar con nuestra web. Se trata de los formatos gráficos, que se deben utilizar convenientemente, no sólo para que la web sea atractiva, sino también para optimizar su peso, de cara a una rápida descarga.

En la web, en líneas generales, se utilizan tres formatos gráficos para las imágenes y cada uno de ellos tiene unas características diferentes, que lo hacen más o menos adecuado, dependiendo el uso que queramos hacer o el tipo de imagen que sea. Estos formatos son:

  • GIF: Útil especialmente para los mapas de bits (dibujos)
  • JPG: Especialmente indicado para las fotografías
  • PNG: También indicado para los dibujos y sobre todo para transparencias.
En este vídeo presentaremos con detalle todas las particularidades de cada formato y veremos por la práctica cómo, dependiendo del tipo de imagen que deseemos incorporar a una web, conviene usar uno u otro.

Además, enseñaremos a optimizar los archivos para que ocupen menos espacio en Kb, aunque siempre manteniendo una calidad aceptable en el archivo gráfico. Con esto conseguiremos páginas web que se vean correctamente y además que ocupen poco peso y por tanto se puedan transferir más rápidamente por Internet, para que el usuario no sufra esperas innecesarias por la carga de las imágenes cuando visita nuestros sitios.

En este videotutorial sobre los formatos gráficos utilizamos el programa de diseño Photoshop para optimizar las fotografías, ya sea en cualquiera de los tipos de archivo GIF, JPG y PNG. Photoshop tiene una utilidad llamada "Guardar para web" que nos servirá perfectamente para conseguir este paso, porque permite ver la imagen tal como quedaría con cada optimización posible, y comprobar su tamaño en bytes, para poder ajustar el compromiso entre calidad y peso de una manera visual, rápida y sencilla. Además, mostramos cómo un programa gratuito y extremadamente sencillo, como Picasa, podría utilizarse para optimizar y editar fotografías que pretendemos usar en una página web.

El último paso que se verá en el video-tutorial es las transparencias y cómo se diferencia el tratamiento para la transparencia en GIF y PNG y cómo el formato PNG es infinitamente superior. Por tanto, cualquier imagen en la que queremos alterar la opacidad de sus elementos, interesa guardarlo como PNG de 24 bits.

El vídeo en si no es muy largo, unos 35 minutos, pero rebosa de detalles importantes, como decimos, para las personas que quieren hacer sus primeras webs e incluso algunas claves para desarrolladores sin perfil de diseñador, que en muchas ocasiones tienen problemas justamente en la elección de los formatos cuando realizan una página web. Esperamos que estas notas y el propio vídeo sirvan para que los desarrolladores que empiezan a realizar sus proyectos web no cometan los típicos errores de principiante cuando trabajan con los formatos gráficos.

Autor

Miguel Angel Álvarez

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.

Compartir

Comentarios

oswaldo Quintero

17/10/2009
VIDEOS HTML
Me parecio exelente la forma en que manejo todo el tema de HTML.

Gracias, Sinceramente

OSWALDO

alecox

18/10/2009
Gracias
Esta muy bien explicado gracias

JaviHG

22/10/2009
Muchas Gracias
Muchas gracias por el trabaja me ha sido de gran ayuda

Pablo Daniel Almada

26/10/2009
Video6: Formatos Gráficos
Hola DesarrolloWeb

Gracias por este video 6. El video es didáctico y se entiende bien. Explica bien con paciencia y detalle la optimización de la imagen con los distintos formatos. Tambien explica bien con algunas opciones el programa picasa.
El tema de la transparencia de la imagen muy bien explicado y en detalle el comportamiento con gif y png. Me gusto mucho cuando hace los cambios de color de fondo en las distintas areas de la página para que se note bien la diferencias en los bordes de trasparencia , y cuando hace uso de la etiqueta div para definir las areas de la página.

Siguen Adelante con estos videos que estan muy interesante y son muy didaticos y ayudan muchos que quieren aprender a desarrollar una web.

Griacias a todos los que integran el equipo de dasarrolloweb.

Pedro

09/11/2009
Excente VIDEO-TUTORIAL
Simplemente, decir que es un excelente Video-Tutorial, muy preciso y bien explicado.

kique

15/1/2010
Muy bueno
genial como desarrollo el tema de los JPG, GIF y PNG felicidades.

LeoGiovanni

29/8/2012
Error en el vídeo
Los videotuturiales son excelentes. Pero este vídeo y el siguiente los veo mal, acabo de comprobar de nuevo los vídeos anteriores y los veo perfectamente pero vuelvo a este y al siguiente y las imágenes se montan.
¿Sabéis porqué?

Gracias.