Como añadir imágenes a una página web

Para añadir imágenes a una página web hay que escribir el siguiente código HTML:

<img src="archivo.jpg">

src indica la ruta del archivo. Si el archivo de imagen se encuentra en la mísma carpeta que la página web se escribiría como en el ejemplo, pero si se encuentra en una carpeta distinta la ruta podría ser así:

src="carpeta/archivo.jpg".

También se puede llamar a una imagen con la dirección completa:

 src="http://www.web.com/images/archivo.gif".

Ahora bien, es conveniente añadir otros atributos al código de la imagen:

Alto y ancho: es conveniente determinar el ancho y alto de una imagen para evitar al navegador operaciones innecesarias y facilitar que cargue más rápido la página. Para esto se utilizan las etiquetas height (alto) y width (ancho). Siempre es recomendable establecer estos atributos. Por ejemplo:

<img src="archivo.jpg" width="300" height="150">

En este caso la imagen tendría un ancho de 300 píxeles y un alto de 150 píxeles.

Imágenes con enlaces: uno de los mayores usos que se le dan a las imágenes en la web es el de vinculr archivos, utilizarlas como enlaces. Ejemplo:

<a href="carpeta/web.html"><img src="archivo.gif"></a>

Donde href establece la ruta de la página a la que dirigirá la imagen. Otro ejemplo:

<a href="http://www.lawebera.es/">
<img src="carpeta/archivo.gif"></a>

Atributo alt: este atributo especifica un texto alternativo que se muestra en lugar de la imagen cuando ésta no existe o el navegador no es capaz de cargarla. En estos casos, el texto alternativo es la única forma que tienen los visitantes de conocer el contenido de la imagen. El atributo alt se expresa así:

<img src="nombrearchivo.jpg"
alt="texto alternativo a mi gusto">

Establecer el borde: toda imagen en la web puede tener un borde de un grosor determinado. Según tus preferencias podrás determinar si la imagen tiene o no borde, y en caso de tenerlo su grosor. Ejemplos:

Imagen sin borde:

 <img src="nombrearchivo.jpg" border="0">

Imagen con borde de 3 píxeles:

<img src="nombrearchivo.jpg" border="3">

Atributos completos del código de la imagen

Con todo lo anterior, podemos definir bastante bien las propiedades básicas de la imagen (recordemos que es muy importante el uso de imagenes en los blogs y en portales web). Para denifir otro tipo de detalles visuales hay que hacer uso de CSS. Veamos un ejemplo con lo aprendido:

<a href="paginaweb.html">
<img src="archivo.gif" width="300"
height="150" border="5"
alt="texto alternativo de la imagen"></a>

Algunos errores comunes en la utilización de imágenes en la web

Reducir el tamaño de la imagen directamente en el editor de HTML: si haces esto, no estás reduciendo realmente la imagen, le estás diciendo al navegador que la redimensione en el momento, pero su tamaño (y lo que ocupa) sigue siendo igual y la página tarda una eternidad en cargar. Como consecuencia, puede ocurrir que tengas una imagen muy pequena en tu web que tarda mucho en cargar, porque en realidad es enorme. Para cambiar el tamaño de una imagen utiliza un editor de imágenes, así el peso también se reducirá y la página web tardará menos en cargar.
Usar imágenes en formato BMP: por suerte, este formato está desapareciendo cada vez más de la web, y digo con suerte porque es un tipo de formato que no comprime la imagen, por lo que ésta es muy pesada y ralentiza mucho la carga de la página. Es mejor usar imágenes .gif, .jpg o .png.
No poner etiquetas alt: las imágenes son importantes en la web, pero no añaden contenido a la página, por lo que añadir una pequeña descripción a la imagen resulta muy útil de cara al posicionamiento en buscadores ya que da información a los buscadores acerca del tema de tu web. Ni que decir tiene que en los navegadores en los que las imágenes no se muestran en su lugar aparece el texto escrito en esta etiqueta, por lo que los usuarios que los utilizan tienen una guía para saber qué imagen había si escribes un texto descriptivo, algo que mejora mucho la accesibilidad web.

Donde encontrar imágenes web

Una alternativa a la creación de imágenes propias para tu web, es utilizar las que existen disponibles en Internet para su libre uso. Algunas páginas donde puedes comenzar a buscar son:

FreeFoto.com: cuenta con una enorme colección de fotografías que se pueden usar libremente para complementar nuestras webs.
IconShock: esta web tiene una sección de iconos gratuitos para utilizar en nuestra página web de muy buena calidad.
FreeImages.co.uk: en la línea de las anteriores webs, cuentan con una gran colección de imágenes listas para usar.
Yotophoto: en un buscador de imágenes con licencia copyleft, GNU y demás licencias que permiten la distribución. Muy útil.

Artículos Relacionados
¿Cómo organizar una web?
Como empezar una web: ¿Cómo organizar el sitio? Parte del problema con la Web hoy...
Enlázanos
Si te gusta esta web y quieres enlazarnos, te sugiero estas imágenes y textos totalmente...
Manual PHP. Crear imágenes GIF desde PHP
Cómo crear imágenes GIF desde PHP Uno de los temas más...
Videotutoriales de WordPress
Recopilación de video tutoriales de WordPress para aprender a manejar este programa de gestión de...

Artículo creado el 12/07/07
Última Actualización: 1/02/10

Autor y licencia

Licencia: Eres libre de distribuir este artículo bajo los términos de la licencia creative commons, siempre que pongas claramente el siguiente texto en la página que publica el artículo (enlaces activos incluidos):

Autor: Verónica M.
URL: Añadir imágenes a una web
Web: Como hacer una página web

21 Comentarios para “Como añadir imágenes a una página web”

Matias:
Gracias, este tema me ha sido de mucha ayuda

4/02/08 - 15:40 #
sylvia:
hola
este tema es muy importante al momento d hacer o crear nuestra propia pagina, pero realmente seria bueno qe incluyeran la forma de como se podria organizar una imagen al lado izquierdo, pero ya habiendo una al derecho, es decir en la misma linea horizontal, pero en 2 columnas o en los dos extremos,…Gracias por el tema aqui tratado y espero que alguien pueda responder mi duda.

22/08/08 - 13:37 #
Poemas:
Muy buena informacion, antes solo pegaba sin saber el significado de cada code, gracias

15/09/08 - 18:36 #
Andrea Fernández:
Hola,
Tengo establecido en CSS que todas las imágenes de mi web tengan un borde, pero hay una imagen en concreto (un botón) que no quiero que lo tenga ¿cómo lo hago?

Muchas gracias (la página está fenomenal),

Andrea

4/02/09 - 13:55 #
Verónica M.:
Andrea puedes determinar un estilo específico para ese botón con el atributo class, a partir de ahí puedes darle el aspecto que quieras.

Un saludo.

27/03/09 - 20:58 #
L3B:
Muchísimas gracias por la información. Era justo lo que estaba buscando. Simple y bien explicado. Gracias de nuevo.

11/06/09 - 20:37 #
alejandro:
buenas tardes, estoy tratando de insertar una imagen a mi pagina web que se vea en la barra de direcciones pero no se como hacerlo.

espero respuestas, gracias Ale.

26/09/09 - 19:13 #
Verónica M.:
Alejandro, creo que lo que estás buscando es añadir un favicon, prueba con este enlace: http://www.lawebera.es/recursos/trucos/icono.php

Un saludo.

28/09/09 - 13:44 #
ema:
hola q tal muy buena la pagina queria saber si hay alguna propiedad para poner poe ej una imagen se no se 300×300 y al tocarla se agrande a no se 500×500 espero respuestas desde ya muchas gracias un saludo

30/10/09 - 21:31 #
Verónica M.:
Ema, prueba con estos scripts a ver si son lo que buscas:

http://thumbnail-generator.programas-gratis.net/
http://tech.mikelopez.info/2006/03/02/php-image-resize-script/
http://shiftingpixel.com/2008/03/03/smart-image-resizer/

Un saludo.

4/11/09 - 22:15 #
Marco A. Arteaga Silva:
He vistado tu sitio y es muy bueno y sobre todo con muy buena informacion, estare checando mas informacion como esta, es de suma importancia para la gente que empieza, se sacaron un 10 definitivamente.

Saludos.
Su amigo.
Marco A. Arteaga Silva.

8/04/10 - 10:14 #
Daniel:
Veronica muy buenas herramientas

18/04/10 - 23:48 #
Renzo:
Siempre es bueno refrescar estos temas. Gracias!

16/08/10 - 19:59 #
Lourdes:
Gracias Es muy Explisito

Me gustaria otro post para saber como Poner
Comentarios en Mi pagina

28/08/10 - 21:15 #

Enlaces a esta entrada