comparte el articulo 

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

Actualizado el 12/07/2007 < > 31 Cometarios

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

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.

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

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 Milán

URL: Añadir imágenes a una web

Añadir Comentario (Subir al texto)

31 Cometarios

  1. Matias

    Gracias, este tema me ha sido de mucha ayuda

    Lunes, 4 de febrero 2008

  2. 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

  3. 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

  4. Poemas

    Muy buena informacion, antes solo pegaba sin saber el significado de cada code, gracias

    Lunes, 15 de septiembre 2008

  5. 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

  6. Verónica Milán

    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

  7. 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

  8. 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

  9. Verónica Milán

    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

  10. 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

  11. Verónica Milán

    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

  12. 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

  13. 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

  14. É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

  15. 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

  16. 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

  17. 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

  18. 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

  19. Daniel

    Veronica muy buenas herramientas

    Domingo, 18 de abril 2010

  20. Renzo

    Siempre es bueno refrescar estos temas. Gracias!

    Lunes, 16 de agosto 2010

  21. Lourdes

    Gracias Es muy Explisito

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

    Sábado, 28 de agosto 2010

  22. 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

  23. Gerardo

    Me gustaria saber como insertar imagenes en xml
    Gracias

    Domingo, 12 de diciembre 2010

  24. 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

  25. 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

  26. 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

  27. German

    Muchìsimas gracias por tu aporte amigo muy bueno y detallado , la pàgina es muy buena

    Viernes, 6 de enero 2012

  28. Christian.A.

    Gracias por la ayuda, siempre se aprenden cosas nuevas. Salu2.

    Jueves, 8 de marzo 2012

  29. Raul_R

    Por fin algo claro y útil, Gracias !!

    Jueves, 8 de marzo 2012

  30. Jose Luis

    Muchas gracias por una explicación tan clara!!

    Viernes, 30 de noviembre 2012

  31. Juan

    La información es muy clara. Me ha resultado muy interesante y muy útil.
    Un saludo
    Juan

    Martes, 10 de septiembre 2013

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras