Como se ha podido ver anteriormente, el desarrollo de una página implica la creación de un archivo en código HTML, pero no es lo único que debemos crear. En la mayoría de los casos también desearemos incluir imágenes y para ello será necesario crear los correspondientes archivos gráficos.

El proceso para incluir una imagen en una página empieza por la creación de la imagen con un programa de diseño gráfico o mediante su digitalización con un escáner. Será necesario que conozcamos alguno de los programas de diseño gráfico que existen en el mercado. Son muy interesantes Photoshop, Paint Shop Pro, Fireworks o Gimp, que sería la alternativa gratuita. En un principio podremos contentarnos con manejarlos por encima y nos resultará medianamente fácil, pero según avancemos en el camino como diseñadores web será más necesario dominarlos para obtener resultados más profesionales.

Los tipos de archivos gráficos que soporta Internet son JPG, GIF y PNG. Tienen características distintas y por tanto usos distintos. Podemos conocer más esto en el reportaje Formatos gráficos de Internet.

Una vez tenemos los archivos gráficos los ponemos en el mismo directorio que los archivos HTML o en un subdirectorio de este y en el código de la página HTML pondremos una etiqueta especial para incluir la imagen, o la insertaremos con nuestro programa editor de HTML.

Lo importante de todo esto es que nos percatemos que el sitio web está compuesto por archivos HTML, GIF, JPG y PNG e incluso los correspondientes archivos que contengan videos, animaciones Flash, programas Java, etc. Todos estos archivos los tenemos que tener bien localizados dentro de nuestro disco duro y dentro de un mismo directorio. Por supuesto el orden como están los archivos dentro del directorio es indiferente, pero podrá ser interesante que incluyamos subdirectorios para que quede todo mejor colocadito y su mantenimiento sea más fácil. Por ejemplo, una técnica muy habitual es colocar todas las imágenes dentro de un subdirectorio llamado images.

El objetivo de tanto orden y conocimiento de la localización de todos los archivos es que a la hora de crear las páginas tendremos que especificar la ruta de cada enlace o cada imagen. Luego tendremos que subirlos al servidor sin olvidarnos de ninguno, lo que es otra razón para tenerlos todos localizados. En capítulos posteriores veremos cómo se hace este paso.

Un problema típico con las imágenes y otros archivos externos consiste en que cuando vemos las páginas en nuestro ordenador se ven correctamente y no falta ninguna imagen ni otros posibles elementos. Sin embargo, cuando subimos los archivos al servidor y vemos la página desde Internet esta se muestra con errores en las imágenes y otros elementos, de modo que no se pueden ver. Esto suele llamarse tener una imagen rota. La razón por la que está; rota es que no puede localizarla en el servidor y por tanto no la puede mostrar. Esto puede ser debido a varias razones.

• La imagen no ha sido subida al servidor.
• La posición relativa de la imagen con respecto a la página no es la misma en nuestro ordenador (local) y en el servidor (remoto). Por ejemplo, las imágenes en local podrían estar en el directorio images mientras que en remoto podrían estar en el mismo directorio que la página, lo que sería un error. Siempre se debe respetar la estructura de directorios que hay en local y crearla exactamente igual en remoto.
• La imagen que se intenta acceder tiene un camino dirigido a un directorio de nuestro disco duro, como al ver la página desde Internet no se tiene acceso a tu disco duro, los usuarios no podrán ver las imágenes. Cuando trabajamos con un editor de HTML y colocamos imágenes en algunas ocasiones el editor coloca caminos en nuestro disco duro en lugar de caminos relativos. Los caminos relativos son rutas que empiezan en el lugar donde está la página que estamos diseñando.

Hay una forma muy útil de obtener pistas acerca del fallo de una imagen, consiste en pulsar con el botón derecho del ratón sobre ella y seleccionar propiedades. Esto nos muestra información sobre la imagen y nos informa sobre el sitio donde se está intentando encontrarla.