Inserción de Imágenes en HTML

Subir la Imagen: Si vas a usar una imagen propia, sube la imagen a un servicio de alojamiento de imágenes o a tu propio servidor usando FTP. Evita usar imágenes de terceros sin permiso para evitar problemas legales y técnicos.
Obtener la URL de la Imagen: Necesitas la URL exacta de la imagen para poder referenciarla en tu HTML. Si la imagen está en tu propio servidor, asegúrate de que la ruta sea correcta.
Usar la Etiqueta <img>: En tu código HTML, utiliza la etiqueta <img> para insertar la imagen. Dentro de esta etiqueta, coloca el atributo src seguido de la URL de la imagen entre comillas.
```
<img src="URL_de_tu_imagen.jpg" />
```
Agregar el Atributo alt: Añade el atributo alt a la etiqueta <img> para proporcionar un texto alternativo que se muestre si la imagen no se puede cargar. Este texto también ayuda a los motores de búsqueda y a las tecnologías de accesibilidad a entender el contenido de la imagen.
```
<img src="URL_de_tu_imagen.jpg" alt="Descripción de la imagen" />
```
Ajustes Opcionales: Puedes especificar el ancho (width) y alto (height) de la imagen para controlar su tamaño, esto es recomendable gestionarlo por css. También puedes envolver la etiqueta <img> en una etiqueta <a> para convertir la imagen en un enlace.
```
<a href="URL_del_enlace">
  <img
    src="URL_de_tu_imagen.jpg"
    alt="Descripción de la imagen"
    width="200"
    height="150"
  />
</a>
```
Figuras y Leyendas: Si deseas agregar una leyenda a tu imagen, puedes usar el elemento <figure> junto con <figcaption> para proporcionar una descripción o contexto adicional.
```
<figure>
  <img src="URL_de_tu_imagen.jpg" alt="Descripción de la imagen" />
  <figcaption>Una breve descripción de la imagen.</figcaption>
</figure>
```

Para utilizar imágenes optimizadas para diferentes resoluciones y formatos en HTML5, puedes emplear la etiqueta <picture>, que te permite especificar múltiples fuentes de imagen y elegir la más adecuada según las condiciones del dispositivo o navegador del usuario. Aquí te explico cómo hacerlo:

Etiqueta <picture>: La etiqueta <picture> actúa como contenedor para varios elementos <source> y <img>. Los elementos <source> definen diferentes versiones de la misma imagen, mientras que el elemento <img> sirve como una alternativa para navegadores que no soportan la etiqueta <picture> [4].
Etiquetas <source>: Dentro de la etiqueta <picture>, cada etiqueta <source> representa una versión de la imagen. Puedes especificar diferentes formatos de imagen como WebP y JPEG/PNG, así como diferentes resoluciones usando el atributo media o el atributo srcset [4].
Atributo srcset: El atributo srcset permite definir múltiples versiones de una imagen y cómo deben ser seleccionadas. Por ejemplo, puedes especificar una imagen WebP para navegadores modernos y una imagen JPEG/PNG para navegadores más antiguos [4].
Atributo type: Al usar el atributo srcset, es útil también incluir el atributo type para indicar el tipo MIME de cada imagen. Esto ayuda al navegador a decidir cuál imagen debe descargar y mostrar [4].
Etiqueta <img>: Después de todos los elementos <source>, debes incluir una etiqueta <img> que sirva como fallback para los navegadores que no soporten <picture>. Debes incluir aquí el atributo src con la imagen predeterminada y el atributo alt con un texto descriptivo [4].

Aquí tienes un ejemplo de cómo usar la etiqueta <picture> para servir imágenes WebP y JPEG/PNG:

<picture>
  <!-- Para navegadores que soportan WebP -->
  <source srcset="imagen.webp" type="image/webp" />
  <!-- Para navegadores que soportan JPEG/PNG -->
  <source srcset="imagen.jpg" type="image/jpeg" />
  <!-- Fallback para navegadores que no soportan picture -->
  <img src="imagen.jpg" alt="Descripción de la imagen" />
</picture>

En este ejemplo, el navegador intentará cargar primero la imagen WebP. Si no la soporta, buscará la imagen JPEG. Si ninguno de los dos formatos es compatible, se mostrará la imagen JPEG especificada en el atributo src de la etiqueta <img> [4].