Es imposible imaginar cualquier sitio web sin un componente visual, parte del cual incluye diversas imágenes para ayudar al usuario en la percepción de la información. En el marcado HTML, las imágenes se añaden mediante una etiqueta especial <img>. Además de la opción principal, también contiene muchos atributos que permiten editar las imágenes según criterios. Por ejemplo, para fijar la anchura de la imagen o establecer la sangría en la parte superior e inferior.

En el artículo de hoy veremos los aspectos básicos de cómo insertar una imagen en HTML y examinaremos la lista completa de atributos de la etiqueta <img>.

Cómo Añadir una Imagen y No Ser Demandado (Copyright)

Antes de empezar a poner imágenes en su sitio web, conviene asegurarse de que todo el contenido es único. El uso de ilustraciones, bocetos, cómics y fotografías sin el consentimiento del propietario está penado por la ley.

Banco de imágenes gratis
Banco de imágenes gratis

¿De dónde sacar las fotos? ¿Tiene que salir a hacerlas uno mismo? Si produces cualquier tipo de producto, es mejor pagar a un buen fotógrafo y hacer fotos de alta calidad: será un placer para el usuario ver las fotos, y el negocio prosperará.

Otro caso es cuando necesitas hacer algunas fotos para rellenar contenidos, fondos, etc. La mejor manera de hacerlo es utilizar fotos gratuitas o de pago, que se publican en los servicios especiales, photostocks. A menudo imágenes libres son suficientes, pero si no hay nada adecuado, se puede pagar – tal vez debido a esta imagen aumentará la conversión del sitio.

Aquí tienes una lista de algunos de los servicios que alojan imágenes gratuitas y de pago:

En estos sitios puede encontrar desde ilustraciones abstractas hasta fotos de personajes públicos. Recuerda que la calidad de la imagen afecta directamente a la percepción del contenido: cuanto mejor sea, más profesional parecerá la página.

Añadir Imágenes a HTML

Ahora pasemos a la parte principal de este artículo: añadir imágenes al marcado HTML. Como hemos visto antes, podemos insertar una imagen en el código y mostrarla en el sitio web utilizando la etiqueta <img>.

Por defecto tiene dos atributos: “src” y “alt“. El primero debe contener la ruta a la imagen, el segundo es una descripción de texto, que es utilizado por los motores de búsqueda. Si no deseas que los motores de búsqueda indexen la foto, no utilices el atributo “alt“.

Plantilla:

<img src="/photo/amigos.jpg">

donde photo es la carpeta situada junto al archivo HTML principal. Si la imagen se colocara en otro lugar, se haría referencia completa a ella, por ejemplo C:\Users\Admin\Escritrio\HTML\img\amigos.jpg.

Veamos cómo añadir una imagen a HTML utilizando como ejemplo una foto de Unsplash:

  1. Descarga la foto deseada del stock de imágenes (ejemplo) y añádela a la carpeta img creada previamente en el directorio de contenido del sitio web. No es necesario crear una nueva carpeta, el archivo puede estar situado junto al documento HTML. Si tomas una imagen de otra ubicación, ten en cuenta también su ruta.
  2. Escribe la etiqueta <img> y añade el atributo “src” con la ruta copiada. En nuestro caso obtendrás simplemente <img src="img/nombre de archivo con extensión">. Si utilizas una imagen de otra carpeta, tendrás que especificar la ruta completa con una barra invertida.
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="widh=device-width, initial-scale=1.0">
    <title>Documento HTML</title>
</head>
<body>
      <img src="img/imagen-unsplash.jpg">
</body>
</html>
  1. Ejecuta el archivo HTML y asegúrate de que todo se ha escrito correctamente. Como resultado, la foto debería ocupar toda la zona: fíjate en los controles deslizantes de la derecha y la parte inferior. Podemos desplazarnos por ellos para ver toda la imagen.
Insertar imagen HTML que ocupa todo el espacio
Insertar imagen HTML que ocupa todo el espacio

Si no aparece ninguna imagen al abrir el archivo HTML, asegúrate de que la ruta está escrita correctamente, así como el nombre del archivo. Además, puede que la extensión no sea .jpg, sino .png o cualquier otra.

Para que la imagen no ocupe todo el espacio, podemos utilizar atributos especiales para ello. Por ejemplo width – permite ajustar la anchura de la imagen. En proporción, también ajustará la altura, que puede ajustarse mediante el atributo height.

Nota

El tamaño se especifica tanto en unidades como sin ellas; si especificas un número simple, se especificará automáticamente en píxeles. También se puede especificar en em, ex, % y otras unidades.

Intentemos comprimir un poco nuestra foto, para que no se extienda por toda la página. Para ello, escribe el atributo width="500px" dentro de la etiqueta. A continuación, actualiza la página y comprueba que la imagen se ha reducido a un tamaño de 500×500(px).

<img src="img/imagen-unsplash.jpg" width="500px">
Insertar imagen HTML con ancho fijo
Insertar imagen HTML con ancho fijo

Este era uno de los atributos que te daban la oportunidad de jugar un poco con la etiqueta . Los atributos permiten dar a la página un aspecto lo más presentable y flexible posible. El valor siempre va entre comillas dobles y se recomienda especificarlo en minúsculas.

Hay más de 10 propiedades de imagen diferentes entre las que elegir para distintas situaciones. A continuación, repasaremos en detalle cada uno de los atributos relacionados con la etiqueta <img>.

Lista de Atributos <img> para Personalizar Imagen

El uso de etiquetas en el marcado HTML no nos obliga a utilizar un solo atributo, sino que podemos utilizar cualquier número de ellos si es necesario. Si se utilizan dos atributos idénticos, tendrá prioridad el que se especifique en primer lugar.

Lista completa de atributos:

Ruta de la imagen a insertar

  • src es básico y obligatorio, e incluye un enlace a la imagen. Puede dirigirse tanto a un archivo alojado en otro recurso web como a una imagen que resida en tu ordenador personal.

Formatos posibles: JPEG, JPG, PNG, GIF, BMP, ICO, APNG, SVG y Base64.

Ejemplo:

<img src="https://ejemplo.com/photo/amigos.jpg"> o <img src="photo/amigos.jpg">

Descripción de la imagen con alt

  • alt – establece un texto alternativo para la imagen. La información del texto se muestra cuando los gráficos no están cargados en el navegador del usuario y da una indicación de lo que se muestra en la imagen. Además, este atributo también es necesario para los motores de búsqueda – para que indexen la imagen y muestren un resultado adecuado al usuario.

Ejemplo:

<img src="photo/yate.jpg" alt="yate en el mar">

Alinear la imagen arriba, ajo, centro, izquierda o derecha

  • align – especifica la alineación de la imagen en relación con el texto adyacente.

Valores posibles: top, bottom, middle, left y right.

Ejemplo:

<img src="photo/amigos.jpg" align="middle">

Añadir border a la imagen

  • border – añade un marco alrededor de la imagen con el tamaño seleccionado.

Valores posibles: px, % y otros.

Ejemplo:

<img src="photo/amigos.jpg" border="25px">

Cambiar altura de imagen

  • height – permite cambiar la altura de la imagen, en proporción a la que cambia la anchura.

Valores posibles: px, % y otros.

Ejemplo:

<img src="photo/amigos.jpg" height="125px">

Cambiar el ancho de la imagen

  • width – permite cambiar la anchura de la imagen, en proporción a la que cambia la altura.

Valores posibles: px, % y otros.

Ejemplo:

<img src="photo/amigos.jpg" width=”100px”>

Margen arriba, abajo, derecha o izquierda de la imagen

  • hspace – añade un espacio/margen a la parte izquierda y derecha de la imagen.

Valores posibles: px, % y otros.

Ejemplo:

<img src="photo/amigos.jpg" hspace=”50px”>
  • vspace – añade un margen en la parte superior e inferior de la imagen.

Valores posibles: px, % y otros.

Ejemplo:

<img src="photo/amigos.jpg" vspace=”150px”>

Vincular descripción de imagen

  • longdesc – permite añadir una dirección con una descripción ampliada de la foto seleccionada.

Formato posible: txt.

Ejemplo:

<img src="photo/amigos.jpg" longdesc="img/archivo.txt">

Insertar imagen desde otra fuente

  • crossorigin – permite la inserción de una imagen desde otra fuente utilizando una petición cross-domain.

Valores posibles: anonymous – petición anónima sin credenciales, use-credentials – petición con credenciales.

Ejemplo:

<img src="https://switch.com/img/amigos.jpg" crossorigin="anonymous">

Listar imágenes adaptables

  • srcset – añade una lista de imágenes que se mostrarán en función de la anchura o densidad de la pantalla. No es compatible con los navegadores Android e Internet Explorer.

Valores válidos: Nw, donde N es cualquier número entero positivo, y Kx, donde K es un número decimal positivo.

Ejemplo:

<img src="img/low.jpg" srcset="img/amigos.jpg 320w, img/low-mid.jpg 480w, img/low-full.jpg 768w">
  • sizes – hace referencia al atributo anterior y permite especificar el tamaño de las imágenes seleccionadas.

Los valores posibles son Nex, Nrem, Nem, Nvmin, Nch, Nvh, Nvw, Nvmax, Nin, Nq, Nmm, Npc, Ncm, Npt y Npx donde N es un número positivo.

Ejemplo:

<img src="img/amigos.jpg" srcset="img/amigos.jpg 320w, img/low-mid.jpg 480w, img/low-full.jpg 768w" sizes="(max-width: 800px) 500px, (min-width: 800px) 800px">

Funciona de la siguiente manera: Si la resolución de la pantalla es inferior a 800px, el ancho de la imagen se fija en 500px. Si la pantalla es mayor de 800px, la imagen se fija en 800px.

Especificar imagen como mapa de imagen del lado del cliente

  • usemap – permite combinar la imagen con el mapa especificado en la etiqueta <map>.

Valores posibles: #name, donde name es el valor del atributo name del mapa, y #id, donde id es el valor del atributo id del mapa.

Ejemplo:

<img src="img/amigos.jpg" usemap="#my_point">
  • ismap – alinea la foto con el área del mapa del servidor. Al hacer clic, lee las coordenadas de la esquina superior izquierda. Se envían por petición a la dirección especificada en el enlace.

Requisito obligatorio para trabajar con el atributo: la foto debe estar envuelta en la etiqueta <a>.

Ejemplo:

<a href="map/ismap.php">
           <img src="img/amigos.jpg" ismap>
</a>

Opciones Adicionales

A veces no basta con añadir una imagen a una página web, sino que hay que convertirla en un objeto sobre el que se pueda hacer clic o en un objeto de fondo. Las etiquetas adicionales y los estilos CSS pueden ayudar a conseguirlo:

Imagen como enlace a otra página

<a href="https://www.google.es/">
          <img src="img/low.jpg">
</a>

Puedes consultar más información en Cómo Insertar Imagen con Enlace en HTML.

Insertar imágenes como GIF

El atributo src permite añadir no sólo fotos, sino también imágenes GIF:

<img src="low.gif">

Insertar imagen que coincida con la resolución de ventana del navegador

Una etiqueta flexible, introducida en HTML5 y denominada <picture>, permite cambiar las imágenes en diferentes dimensiones:

<picture>
           <source media="(min-width: 750px)" srcset="img_pink_flowers.jpg">
           <source media="(min-width: 265px)" srcset="img_white_flower.jpg">
</picture>

Un tamaño de pantalla superior a 750px mostrará una imagen, un tamaño de pantalla superior a 265px pero inferior a 750px mostrará otra.

Insertar imagen como fondo

La imagen de fondo se añade a la etiqueta body utilizando el estilo CSS “background-image” y estilos similares:

<body style="background-image:url('img/fondo.jpg')">
           <h2>¡Hola, mundo!</h2>
</body>
Insertar imagen como fondo en HTML
Insertar imagen como fondo en HTML

Video Tutorial: Colocar Imágenes en HTML

Palabras Finales

Con esto terminamos este artículo. Hoy hemos cubierto algunas cosas bastante simples del marcado HTML que pueden ser útiles no sólo para los principiantes en el desarrollo web, sino también para aquellos que ya están familiarizados con el diseño.

Por otro lado, ya sea que desees crear una galería de recuerdos, resaltar productos o simplemente embellecer tu contenido, https://www.wallpics.com te ofrece una solución creativa y personalizada

No siempre es posible recordar todos los atributos, a veces es más fácil buscarlos y copiarlos en un par de clics. Ahí es donde este tutorial debería ayudar. Espero que no tengas ninguna duda después de leerlo.

5/5 - (1 voto)