Imágenes en HTML

Inserción de Imágenes

<img src="url-de-la-imagen" alt="texto-alternativo">

<img src="ejemplo.jpg" alt="Imagen de ejemplo" width="500" height="300">

Posicionamiento de imágenes

La etiqueta <img> se usa para insertar imágenes en un documento HTML, pero puedes controlar el posicionamiento y la disposición de las imágenes usando CSS. CSS tiene varias propiedades que te permiten posicionar imágenes dentro de tu página web.

Una forma de posicionar imágenes es usando la propiedad float. La propiedad float te permite colocar una imagen a la izquierda o derecha del contenido que la rodea. Cuando una imagen es flotada, el texto o los elementos a su lado se ajustarán alrededor de ella.

<img src="example.jpg" alt="Imagen de ejemplo" class="float-left">
<p>Este es un texto que se ajustará alrededor de la imagen flotada.</p>

.float-left {
  float: left;
  margin-right: 10px;
}

En este ejemplo, la imagen se flota a la izquierda usando float: left, y se añade un margen derecho para crear espacio entre la imagen y el texto a su lado.

Otra forma de posicionar imágenes es usando la propiedad display. Por defecto, las imágenes son elementos en línea, lo que significa que fluyen dentro del texto. Sin embargo, puedes cambiar cómo se muestran las imágenes usando valores como block, inline-block, o flex.

<img src="example.jpg" alt="Imagen de ejemplo" class="display-block">

.display-block {
  display: block;
  margin: 0 auto;
}

En este caso, la imagen se muestra como un elemento de bloque usando display: block, y se centra horizontalmente usando margin: 0 auto.

La propiedad position es otra herramienta para el posicionamiento de imágenes. Te permite posicionar imágenes en relación con su posición normal (position: relative), en relación con el ancestro posicionado más cercano (position: absolute), o fijo en la ventana del navegador (position: fixed).

<div class="container">
  <img src="example.jpg" alt="Imagen de ejemplo" class="position-absolute">
</div>

.container {
  position: relative;
  height: 400px;
}

.position-absolute {
  position: absolute;
  top: 20px;
  left: 20px;
}

En este ejemplo, la imagen se posiciona de manera absoluta a 20 píxeles desde la parte superior y la izquierda de su ancestro posicionado más cercano (el <div> con la clase container).

Al combinar estas técnicas de posicionamiento CSS con otras propiedades como margin, padding, y z-index, puedes controlar la colocación y disposición de imágenes dentro de tus páginas web. Prueba diferentes métodos de posicionamiento para encontrar el mejor enfoque para tus necesidades de diseño.

Imágenes responsivas

HTML ofrece varias técnicas para crear imágenes responsivas.

Una forma de servir imágenes responsivas es usando el atributo srcset en la etiqueta <img>. El atributo srcset permite especificar múltiples fuentes de imagen junto con sus respectivos anchos o densidades de píxeles. El navegador puede entonces elegir la imagen más apropiada según el tamaño de pantalla y la resolución del dispositivo.

<img src="imagen-pequena.jpg"
     srcset="imagen-pequena.jpg 400w,
             imagen-mediana.jpg 800w,
             imagen-grande.jpg 1200w"
     alt="Imagen responsiva">

El atributo srcset proporciona tres fuentes de imagen diferentes con sus anchos correspondientes (400w, 800w y 1200w). El navegador seleccionará la imagen que mejor se adapte al tamaño de pantalla y resolución del dispositivo.

Otra técnica para imágenes responsivas es usar el elemento <picture>. El elemento <picture> actúa como un contenedor para múltiples elementos <source>, cada uno especificando diferentes fuentes de imagen y consultas de medios. Esto permite definir diferentes imágenes para distintos tamaños de pantalla o características de dispositivo.

<picture>
  <source media="(min-width: 1200px)" srcset="imagen-grande.jpg">
  <source media="(min-width: 800px)" srcset="imagen-mediana.jpg">
  <img src="imagen-pequena.jpg" alt="Imagen responsiva">
</picture>

El elemento <picture> contiene dos elementos <source> con consultas de medios. El primer elemento <source> especifica una imagen para pantallas con un ancho mínimo de 1200px, mientras que el segundo elemento <source> se dirige a pantallas con un ancho mínimo de 800px. El elemento <img> dentro del elemento <picture> sirve como respaldo para navegadores que no admiten el elemento <picture>.

La dirección artística es otro concepto relacionado con las imágenes responsivas. La dirección artística implica servir diferentes recortes o composiciones de imagen basados en el tamaño de pantalla o la relación de aspecto del dispositivo. Esto asegura que las partes más importantes de la imagen sean visibles en diferentes dispositivos.

<picture>
  <source media="(min-width: 1200px)" srcset="imagen-grande.jpg">
  <source media="(min-width: 800px)" srcset="imagen-mediana-recortada.jpg">
  <img src="imagen-pequena-recortada.jpg" alt="Imagen responsiva">
</picture>

Los elementos <source> dentro del elemento <picture> especifican diferentes recortes de imagen para distintos tamaños de pantalla. Las imágenes "imagen-mediana-recortada.jpg" e "imagen-pequena-recortada.jpg" son versiones recortadas de la imagen original, optimizadas para pantallas medianas y pequeñas, respectivamente.

Al usar técnicas de imágenes responsivas como srcset, <picture> y dirección artística, puedes proporcionar una experiencia de visualización óptima para los usuarios en diversos dispositivos. Estas técnicas te ayudan a servir imágenes apropiadas para diferentes tamaños de pantalla, resoluciones y relaciones de aspecto, resultando en cargas de página más rápidas y una mejor interacción del usuario.

Accesibilidad

La accesibilidad es una parte importante del diseño web, asegurando que tu contenido pueda ser utilizado por todos, incluyendo personas con discapacidades. En cuanto a las imágenes, hay varios aspectos a tener en cuenta para mejorar la accesibilidad.

Proporcionar texto alternativo para las imágenes es importante. El texto alternativo, o "alt text", es una breve descripción de una imagen que se muestra cuando la imagen no se puede cargar o es leída en voz alta por lectores de pantalla para usuarios con discapacidad visual. El atributo alt de la etiqueta <img> se utiliza para proporcionar este texto alternativo.

<img src="example.jpg" alt="Una puesta de sol sobre el océano">

Al escribir texto alternativo, intenta describir el contenido y propósito de la imagen de manera breve. Para imágenes decorativas que no añaden contenido significativo, puedes dejar el atributo alt vacío (alt="").

Para imágenes complejas, como gráficos, diagramas o esquemas, proporcionar un texto alternativo corto puede no ser suficiente. En estos casos, puedes usar el atributo longdesc para proporcionar un enlace a una descripción detallada de la imagen. O bien, puedes incluir la descripción en el texto principal cerca de la imagen.

<img src="chart.jpg" alt="Gráfico de ventas" longdesc="descripcion-grafico.html">

En el ejemplo anterior, el atributo longdesc apunta a un archivo HTML (descripcion-grafico.html) que contiene una descripción detallada del gráfico.

Otra buena práctica de accesibilidad es evitar el uso de imágenes para texto. Aunque puede ser tentador usar imágenes para mostrar texto estilizado o encabezados, esto puede ser un problema para los lectores de pantalla y usuarios con discapacidades visuales. En su lugar, usa texto real y estilízalo con CSS. Esto asegura que el texto sea accesible, seleccionable y pueda ser redimensionado por los usuarios si es necesario.

<h1 class="encabezado-estilizado">Bienvenido a Nuestro Sitio Web</h1>

.encabezado-estilizado {
  font-family: "Fuente Decorativa", cursive;
  font-size: 36px;
  color: #ff0000;
}

Al usar CSS para estilizar el texto, mantienes la accesibilidad mientras logras el efecto visual deseado.

En resumen, para mejorar la accesibilidad de las imágenes:

Al seguir estas directrices de accesibilidad, te aseguras de que tus imágenes puedan ser entendidas por todos los usuarios, creando una experiencia web más inclusiva.

Mapas de imagen

Los mapas de imagen permiten crear áreas clickeables en una imagen, convirtiendo diferentes partes de la imagen en enlaces interactivos. Esta técnica es útil cuando se desea proporcionar múltiples enlaces dentro de una sola imagen o crear un sistema de navegación basado en una imagen.

Para crear un mapa de imagen, necesitas usar las etiquetas <map> y <area> junto con una etiqueta <img>. La etiqueta <map> define el mapa de imagen y le da un nombre, mientras que las etiquetas <area> definen las áreas clickeables dentro de la imagen.

<img src="image.jpg" alt="Mapa de imagen" usemap="#imagemap">

<map name="imagemap">
  <area shape="rect" coords="0,0,100,100" href="link1.html" alt="Enlace 1">
  <area shape="circle" coords="200,200,50" href="link2.html" alt="Enlace 2">
  <area shape="poly" coords="300,100,350,200,250,200" href="link3.html" alt="Enlace 3">
</map>

Al definir las coordenadas para las áreas clickeables, necesitas conocer las ubicaciones exactas en píxeles de las regiones deseadas dentro de la imagen. Puedes usar software de edición de imágenes o herramientas en línea para encontrar estas coordenadas.

Los mapas de imagen no se usan tan comúnmente hoy en día debido al auge del diseño web responsivo y la dificultad para crear y mantener coordenadas precisas para diferentes tamaños de imagen. Sin embargo, en ciertos casos, como la creación de infografías interactivas o la provisión de enlaces dentro de una imagen específica, los mapas de imagen pueden seguir siendo una técnica útil.

Al usar mapas de imagen, asegúrate de proporcionar un texto alternativo claro y descriptivo para cada área clickeable para garantizar la accesibilidad a los usuarios que dependen de tecnologías de asistencia.

Imágenes de fondo

Además de insertar imágenes en documentos HTML usando la etiqueta <img>, también puedes establecer imágenes como fondos para elementos usando CSS. Las imágenes de fondo pueden mejorar el atractivo visual de tus páginas web y crear efectos interesantes.

Para establecer una imagen de fondo para un elemento, usa la propiedad background-image en CSS. El valor de esta propiedad es una URL que apunta al archivo de imagen que quieres usar como fondo.

.element {
  background-image: url("background.jpg");
}

Por defecto, las imágenes de fondo se repiten tanto horizontal como verticalmente para cubrir todo el elemento. Sin embargo, puedes controlar el comportamiento de repetición usando la propiedad background-repeat. Los valores disponibles son:

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
}

También puedes controlar la posición de la imagen de fondo usando la propiedad background-position. Esta propiedad toma dos valores: la posición horizontal y la posición vertical. Los valores pueden ser palabras clave (left, center, right para horizontal; top, center, bottom para vertical) o longitudes específicas (por ejemplo, píxeles o porcentajes).

.element {
  background-image: url("background.jpg");
  background-repeat: no-repeat;
  background-position: center center;
}

Las imágenes de fondo se pueden usar para crear efectos visuales interesantes, como el desplazamiento parallax. El desplazamiento parallax es una técnica donde la imagen de fondo se mueve a una velocidad diferente que el contenido de la página, creando una sensación de profundidad.

.parallax {
  background-image: url("parallax-background.jpg");
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  height: 500px;
}

Para crear un efecto parallax:

1. Establece la imagen de fondo usando background-image.
2. Usa background-attachment: fixed para fijar la imagen de fondo en su lugar mientras el contenido de la página se desplaza sobre ella.
3. Posiciona la imagen de fondo como desees usando background-position.
4. Establece background-repeat: no-repeat para evitar que la imagen se repita.
5. Usa background-size: cover para asegurarte de que la imagen cubra todo el elemento, incluso si necesita ser redimensionada.
6. Establece una height suficiente para el elemento para crear el efecto de desplazamiento parallax.

Al usar imágenes de fondo, ten en cuenta las siguientes prácticas recomendadas:

• Optimiza tus imágenes para la web para mantener los tamaños de archivo pequeños y los tiempos de carga de página rápidos.
• Usa formatos de imagen apropiados (por ejemplo, JPEG para fotografías, PNG para imágenes con transparencia).
• Considera la legibilidad del contenido al elegir imágenes de fondo. Asegúrate de que haya suficiente contraste entre el texto y el fondo.
• Ten en cuenta la accesibilidad. Proporciona texto alternativo o descripciones para las imágenes de fondo si transmiten información importante.