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

Actualizado el 12/07/2007 < > 26 Cometarios

Resúmen: Guía sobre como añadir imágenes a una página web y darles formato.

Meneame Bitacoras

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.

Meneame Bitacoras

Publicado el 12/07/2007, última actualización 12/07/2007.

Seguir @lawebera

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

Añadir Comentario (Subir al texto)

26 Cometarios

Matias
Gracias, este tema me ha sido de mucha ayuda

Lunes, 4 de febrero 2008
Tratamiento de imágenes para la web :: LaWebera.es
[...] Las imágenes son una parte importante de la web. De hecho, la mayoría de las páginas web distribuyen su espacio entre texto e imágenes. [...]

Viernes, 8 de febrero 2008
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.

Viernes, 22 de agosto 2008
Poemas
Muy buena informacion, antes solo pegaba sin saber el significado de cada code, gracias

Lunes, 15 de septiembre 2008
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

Miércoles, 4 de febrero 2009
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.

Viernes, 27 de marzo 2009
L3B
Muchísimas gracias por la información. Era justo lo que estaba buscando. Simple y bien explicado. Gracias de nuevo.

Jueves, 11 de junio 2009
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.

Sábado, 26 de septiembre 2009
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.

Lunes, 28 de septiembre 2009
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

Viernes, 30 de octubre 2009
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.

Miércoles, 4 de noviembre 2009
Capas visibles e invisibles con CSS
[...] hay que definir las propiedades de la capa CSS. En ella también podremos poner información, imágenes, links, [...]

Viernes, 6 de noviembre 2009
CSS: buenas prácticas
[...] de estilos rápidamente, modificando el diseño de un mismo documento por completo. Por eso, las imágenes incluídas en el HTML (fotos descriptivas, gráficos, etc) debieran ir en directorios separados de las imágenes [...]

Lunes, 14 de diciembre 2009
Énfasis en el diseño web
[...] muchos diseños web, la simple disposición de textos, imágenes, videos y cualquier otro elemento no es suficiente para conseguir que el usuario dirija la [...]

Lunes, 4 de enero 2010
Utilizar un loading o imagen de carga con CSS
[...] que estén cargandose en tu web. Eso es, así de sencillo, con este simple código a todas las imagenes del sitio le colocamos nuestra animación de fondo. Cuando la imagen principal se haya cargado dejará de ser [...]

Lunes, 1 de febrero 2010
Elementos de diseño web: la textura
[...] web de alta calidad. La siguiente imagen es un ejemplo de ello, donde el elemento principal, una imagen, se sale de las dos dimensiones y adquiere [...]

Lunes, 8 de febrero 2010
Los textos en una página web
[...] de todas las páginas web se encuentra en los textos, aún en aquellos casos en los que las imágenes ocupan un porcentaje mucho mayor respecto del espacio de la página. Esto hace que el diseñador web [...]

Viernes, 2 de abril 2010
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.

Jueves, 8 de abril 2010
Daniel
Veronica muy buenas herramientas

Domingo, 18 de abril 2010
Renzo
Siempre es bueno refrescar estos temas. Gracias!

Lunes, 16 de agosto 2010
Lourdes
Gracias Es muy Explisito

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

Sábado, 28 de agosto 2010
Gina
Hola, estoy intentando poner dos fotos en mi web, que también servirán de enlace. El problema es que se publican en linea vertical y yo quiero que se publiquen en linea horizontal ¿como ordenarlos?

Gracias

Martes, 30 de noviembre 2010
Gerardo
Me gustaria saber como insertar imagenes en xml
Gracias

Domingo, 12 de diciembre 2010
Luis Cains
Interesante entrada. Sobre todo la partes en donde hablas de redicir el tamaño de la imagen desde el editor HTML. De verdad que no lo sabia, muchas gracias

Martes, 10 de mayo 2011
Raúl Baena
Hola, quiero poner rel=”lytebox” en todas las fotos de mi página web ¿puedo hacerlo en la hoja de estilos o tengo que hacerlo una por una?

Miércoles, 28 de diciembre 2011
Verónica Milán
Raúl, ese es un atributo HTML que, como tal, va en el HTML del enlace.

Saludos.

Martes, 3 de enero 2012

(Subir al texto)

Añadir Comentario

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

Atributos completos del código de la imagen

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

Donde encontrar imágenes web

Manuales y Artículos Web