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.