Ejemplos HTML y XHTML

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

1 estrella2 estrellas3 estrellas4 estrellas5 estrellas (45 votos, promedio: 3,64 de 5)
Cargando...

Guía y códigos de ejemplo sobre como añadir imágenes a una página web y darles formato según tus necesidades.

Las imágenes añaden una nota de color al blog y a cualquier página en general, proporcionan un descanso en la lectura al usuario y muchas veces sirven de explicación gráfica para lo que se está contando.

Por ello, contar con imágenes a la hora de postear puede suponer un beneficio para el usuario.

A la hora de encarar un proyecto, un diseñador web freelance debe estar capacitado para añadir imágenes que aporten información útil, ayuden al usuario y a la vez hagan el diseño atractivo. Todo ello sin penalizar la velocidad de carga de la web.

En este artículo te explicamos cómo poner imágenes en tu web de forma correcta, ya seas diseñador web o tengas un proyecto propio.

Código para añadir una imagen a un sitio web

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


<img src="/como_hacer/ejemplos_html_xhml/archivo.jpg">

Atributo src, la ruta de la imagen

Indica la ruta del archivo. Si el archivo de imagen se encuentra en la misma 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="https://web.com/carpeta/archivo.jpg"

Alto y ancho de la imagen

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="/como_hacer/ejemplos_html_xhml/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.

Cómo insertar imágenes con enlaces

Uno de los mayores usos que se le dan a las imágenes en la web es el de vincular archivos, utilizarlas como enlaces.

Ejemplo:


<a href="carpeta/web.html"><img src="/como_hacer/ejemplos_html_xhml/archivo.png"></a>

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


<a href="/index.html">
   <img src="/carpeta/archivo.png" />
</a>

Atributo alt, la descripción de la imagen

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="/como_hacer/ejemplos_html_xhml/nombrearchivo.jpg" alt="texto alternativo descriptivo" />

Este atributo es importante para SEO, ya que es la información que puede extraer el buscador de esa imagen, así que no descuides este aspecto.

Código completo para añadir una imagen a una web

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

Veamos un ejemplo con lo aprendido:


<a href="paginaweb.html">
    <img src="/como_hacer/ejemplos_html_xhml/archivo.png"
    width="300" height="150"
    alt="texto alternativo de la imagen" />
</a>

Para definir otro tipo de detalles visuales hay que hacer uso de CSS.

Añadir un favicon a tu web

Los favicon son esas pequeñas imágenes personalizadas que aparecen en la barra de direcciones del navegador, y también son esas imágenes que aparecen al lado de los nombres de las páginas que hemos guardado en favoritos.

Por ejemplo el favicon de LaWebera es este:

Para tener un favicon personalizado en tu web sólo tienes que crear una imagen con extensión .ico y subirla a la carpeta raíz de tu espacio web con este nombre: favicon.ico. Una vez subida la imagen añade este código en las páginas de tu web y listo:


<link rel="shortcut icon" href="http://www.miweb.com/favicon.ico">

Ahora bien. Para crear la imagen .ico no vale cualquier programa.

Por ejemplo, Photoshop que es de los más usados, no reconoce este tipo de archivos. Pero no pasa nada, porque como siempre en Internet tenemos herramientas gratuitas que nos solucionan el problema.

En Dynamic Drive tienen un generador de favicon (favicon generator) que funciona a la perfección.

Le indicas la ubicación del archivo que quieres convetir en favicon (el archivo debe ser en formato gif, jpg, png o bmp) y pulsas “crear icono”. De forma predeterminada te genera el favicon con un tamaño de 16×16 píxeles, listo para subir a tu web, pero si también quieres hacer un favicon más grande para el escritorio o cualquier otra cosa permite crearlos de 32×32 o 48×48 px.

Una buena forma de destacar tu web entre los favoritos de tus visitantes y de darle un toque personal en el navegador.

Mapas de imágenes

Cuando utilizamos una sola imagen para establecer varios puntos o dividirla en partes mediante coordenadas, estamos estableciendo un mapa de imagen.

Hablando en términos generales, podemos encontrar que existen dos tipos de mapas, aquellos que se encuentran del lado servidor y los que son realizados desde el lado cliente, estos últimos son los que vamos a realizar mediante las etiquetas “map” y “area”.

Supongamos que tenemos una imagen con un mapa mundial, y queremos señalar a dos o más países dentro de este mapa para redireccionar a otras páginas, entonces tendríamos que hacer algo como esto:


<img src="/como_hacer/ejemplos_html_xhml/mapamundi.gif" alt="Mapa mundial" usemap="#mapamundi" />
<map name="mapamundi" id="mapamundi">
  <area shape="rect" coords="0,0,115,90" href="america.html" alt="America" />
  <area shape="poly" coords="113,39,187,21,180,72,141,77,117,86" href="europa.html" alt="Europa" />
</map>

En este ejemplo estamos definiendo una imagen que se relaciona a un mapa mediante el atributo “usemap”, el cual lleva el mismo valor que el atributo “id” del elemento “map”.

En este caso nos estamos refiriendo a “id” y no a “name” ya que en eso radica la diferencia entre XHTML y HTML para este caso, XHTML considera deprecado el atributo “name” para la etiqueta “map”, por ello “id” se convierte en el atributo de uso común, aunque en este ejemplo utilizamos ambos para evitar problemas de compatibilidad.

Cada elemento de área del mapa es definido mediante la etiqueta del mismo nombre, el cual cuenta con atributos de forma y coordenadas.

Para la primer área utilizamos una forma rectangular por lo que el atributo “shape” recibe el valor de “rect” y las coordenadas tienen que indicar los cuatro puntos de la figura por lo que el atributo “coords” indica los cuatro valores separados por coma. Pr su parte la segunda área utiliza una forma poligonal por lo que son necesarios más valores para indicar la forma.

La razón por la que estos mapas no son tan utilizados, es que su uso se limita únicamente a ciertas enseñanzas como el caso de temas geográficos como el que vimos, además del hecho de que no son de un uso amigable en la interfaz, en muchas ocasiones no podemos inferir que la imagen cuenta con divisiones o links internos.

Imágenes de fondo con CSS

Debido a que las imágenes son más utilizadas como elemento de presentación, que como un auténtico contenido, es común ver que su manejo se lleve a cabo por CSS en la mayoría de las ocasiones.

El elemento “img” solía ser llevado al extremo para realizar toda clase de funciones relacionadas a las imágenes, en la actualidad esto se ve disminuido por el hecho de que CSS permite manejar imágenes mediante su propiedad “background-image“, apegándonos más a los estándares que predominan.

La propiedad background-image se pueden utilizar para especificar una imagen que se utilizará como fondo en cualquier elemento de tipo capa, desde el cuerpo de la página hasta un párrafo sencillo.

Al utilizarlo estaremos llenando el elemento con una imagen que ira desde la esquina superior izquierda hasta el final, cubriendo todo el espacio y con la oportunidad de agregar otros elementos sobre la imagen.


body { background-image: url(/como_hacer/ejemplos_html_xhml/imagenes/webera.jpg); }

Podemos controlar aspectos de la imagen de fondo mediante otras propiedades CSS, como background-attachment, background-repeat y background-position.

La propiedad background-attachment determina si la imagen de fondo se desplazará con el contenido de una caja. Puede ser utilizado para especificar si la imagen se desplazará con el resto de la página o si debe ser fijado a la vista, es decir el área de visualización de la ventana del navegador, en lugar de la página.


body {
  background-image: url(/como_hacer/ejemplos_html_xhml/imagenes/webera.jpg);
  background-attachment: fixed;
}

En este ejemplo estamos estableciendo la imagen “webera.jpg” como fondo de página, y en vez de seguir el patrón común de desplazamiento, la imagen lucirá exactamente igual conforme nos desplacemos, lo único que se ira recorriendo es el resto del contenido de la página.

En caso de que la imagen que estas utilizando sea muy pequeña o simplemente no deseas que se repita, creando un efecto de mosaico, entonces la propiedad a la que debes recurrir es “background-repeat”.

Al establecer esta propiedad con un valor de “no-repeat” nos ahorraremos el tener que desplegar la imagen varias veces y simplemente se mostrará en una ocasión.


body {
  background-image: url(/como_hacer/ejemplos_html_xhml/imagenes/webera.jpg);
  background-repeat: no-repeat;
}

Esta propiedad también puede tener los valores de:

  • “repeat-x” para repetir la imagen únicamente de manera horizontal.
  • “repeat-y” para hacer lo mismo pero de manera vertical.

El resto del área que no sea cubierto por la imagen de fondo optará por un fondo transparente, que por lo general luce de color blanco por ser el patrón elegido para el navegador, al menos que elijamos un color de fondo mediante la propiedad “background-color” lo que cual combinaría los dos valores, mostrando la imagen y en el área restante el color elegido.

Las imágenes de fondos siempre inician en la esquina superior izquierda por defecto, en caso de que esto no cumpla con lo que requerimos, podemos cambiar esa posición mediante la propiedad “background-position”, que es generalmente utilizada en combinación con la propiedad de repetición.

Los valores que recibe esta propiedad son los clásicos para definir una posición, nos referimos a “top”, “right”, “bottom”, “left”, “center”, alguna medida o un porcentaje, o incluso la combinación de alguno de estos valores.


body {
  background-image: url(/como_hacer/ejemplos_html_xhml/imagenes/webera.jpg);
  background-repeat: no-repeat;
  background-position: center;
}

Finalmente tenemos los ya famosos shorthands o también conocidos como atajos, es decir la propiedad que nos va a ayudar a representar todas estás propiedades en una sola línea, en este caso lleva por nombre “background” y nos ayudará a definir los valores de background-color, background-image, background-repeat, background-attachment y background-position.


body { background: #CCCCCC url(/como_hacer/ejemplos_html_xhml/imagenes/webera.jpg) center fixed no-repeat; }

Aunque en los ejemplos de este artículo estuvimos utilizando el elemento “body”, ten en mente que estas propiedades puedes ser aplicadas para cualquier elemento visible en la página, un párrafo, una tabla, un div, etc.

Dónde alojar las imágenes

La duda es si guardar (o alojar) los gráficos en tu propio servidor web o en un servidor especializado en almacenamiento de archivos, como Amazon AWS. Depende de la cantidad de imágenes que vayas a subir, si son muchas es mejor usar un servicio especializado porque te va a costar mucho más barato.

Si eliges un servidor gratuito de fiar para tus imágenes puede ser útil, porque ahorras algo de dinero, pero si no eliges bien puede fallar el servicio o cargar las páginas con demasiada lentitud y volverse en tu contra.

Dónde conseguir imágenes gratis. Bancos de imágenes

Aunque siempre podemos optar por hacer nuestros propios gráficos, muchos webmasters no tienen tiempo o la habilidad necesarias para hacerlo, por lo que utilizar imágenes gratuitas puede ser una buena solución.

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.

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.

42 respuestas

  1. Buenas noches, soy el administrador de un sitio web (el cual el antiguo administrador me dejo algunos consejos básicos para tenerlo actualizado) pero he encontrado alguna dificultad al editar o intentar adjuntar nuevas imágenes con enlaces y por ese motivo estoy aquí tratando de ubicar una guía que me ayude a resolver estos dilemas, gracias.

  2. Excelente Verónica!

    Es uno de los post más completos que he encontrado respecto al tema. No obstante aún sigo sin conseguir en la web la manera de:

    1. Editar el html dado por Amazon (web de afiliados) para generar la imagen. Ya que he notado que a pesar que coloco un texto descriptivo en el “alt” de ese html generado, aún me siguen indicando distintas herramientas que no indico el “alt” (valga la redundancia).
    2. Ese html generado por amazon además genera muchas “html request” el cual ralentiza mi web, por lo que cuando revisa otras web de afiliados en su código fuente al parecer no utilizan completamente el texto generado por amazon.

    Así que te pregunto, como puedo hacer?

    1. Hola Davis!

      Gracias por tus comentarios, me alegra que te guste el artículo.

      Respecto a tus preguntas no sé si te estoy entendiendo, si te refieres al código que generas desde la barra web de afiliados de Amazon, es un iframe, por lo que poco puedes modificar ahí.

      ¿De dónde obtienes el código?.

      Saludos.

      1. Exactamente Verónica, desde sitestripe (la barra web de afiliados de Amazon).

        Realmente no sé como hacen aquellas webs que utilizan esta herramienta para indicar el texto ALT.

        Porque lo que he visto en algunas webs es lo que indicas en tu artículo: suben la imagen (probablemente la scrapean y al parecer eso viola las políticas de Amazon), editan el ancho de la imagen y colocan e texto alt.

        ¿Alguna sugerencia? y gracias por tu respuesta.

        1. Hola Davis!

          Ah ok, el iframe te lo devuelve cuando seleccionas imagen + texto, entiendo que tú estás usando la imagen sola.

          Entonces si usas el código de la barra de afiliados, la opción sólo imagen, sería algo así:

          <a href="url-de-archivo" target="_blank" rel="noopener noreferrer nofollow">
              	<img border="0" src="ruta-de-imagen" alt="tu texto alternativo" />
          </a>
          <img src="imagen-de-trackeo-de-amazon" width="1" height="1" border="0" alt="" style="border:none !important; margin:0px !important;" />
          

          “tu texto alternativo” es el ALT. Quizá la segunda imagen te la puedes ahorrar, para lo que dices de evitar peticiones innecesarias, pero lo desconozco.

          Espero que te sirva, saludos.

  3. Hola Verónica Milán.

    Soy nueva en esto espero que me ayudes, creé una página web de mi negocio pero quiero poner un logo con mi marca de negocio, pero me sale muy grande.

    Quiero plasmar mi logo en mis fotos para que otras páginas no me roben.

  4. Hola! Alguien sabe donde puedo encontrar el icono de youtube en una URL? Quiero colocarlo en mi web junto otros social media iconos.
    Gracias!!

  5. hola una consulta yo arme mi pagina web con direccionamiento de imagenes en mi pc. Ej img src=”c://Desktop/carpeta/imagen.jpg; y ahora contrate el servicio de hosting y como deberia poner el direccionamiento img src=”www.mipagina/carpeta/imagen.jpg”?

    1. Hola Gaston,

      Sí, una vez subas tu página web a internet tienes que modificar la ruta de las imágenes. Más o menos como tú lo has puesto:

      img src=”http://www.mipagina/carpeta/imagen.jpg”

  6. Hola! Me han resultado muy útiles tus artículos. Quería hacerte una consulta. Si en un sitio web se utiliza una misma imagen en dos páginas distintas con distinto tamaño, tengo que cargar la misma imagen en dos tamaños diferentes o el programador web debería encargarse de que la imagen se adapte automáticamente a los dos tamaños?

    1. Hola María Teresa,

      Depende de la diferencia de tamaño que haya entre ambas imágenes.

      Si son muy diferentes, entonces sí merece la pena cargar la misma imagen en dos tamaños diferentes, puesto que sino, la imagen que es más pequeña pesa más de lo necesario y puede tardar más en cargar que si estuviera ajustada al tamaño en que se muestra.

      Si no hay mucha diferencia de tamaño, no creo que merezca la pena usar imágenes diferentes. En ese caso podrías usar la misma en ambas páginas.

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

  8. Interesante entrada. Sobre todo la partes en donde hablas de reducir el tamaño de la imagen desde el editor HTML. De verdad que no lo sabía, muchas gracias.

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

  10. He visitado tu sitio y es muy bueno y sobre todo con muy buena información. Estaré revisando mas información como ésta, es de suma importancia para la gente que empieza, se sacaron un 10 definitivamente.

    Saludos.
    Su amigo.
    Marco A. Arteaga Silva.

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

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

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

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

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

Deja una respuesta