1. El ` 
`` `` ``
* `src` atributo: Esta es la parte más importante. Especifica la ruta de URL o archivo donde se encuentra la imagen.
* Ejemplo: `src =" imágenes/my-image.jpg "` (si la imagen está en una carpeta llamada 'Imágenes' en su sitio web).
* `alt` atributo: Esto es crucial para la accesibilidad y el SEO. Proporciona texto alternativo que describe la imagen para los usuarios que no pueden verla (por ejemplo, lectores de pantalla).
* Ejemplo: `alt =" una hermosa puesta de sol sobre el océano "`
2. Formatos de imagen comunes
* jpeg (`.jpg` o` .jpeg`): Ideal para fotografías e imágenes con muchos colores y detalles.
* png (`.png`): Admite la transparencia (hacer que los fondos desaparezcan) y es ideal para logotipos, iconos y gráficos con bordes afilados.
* gif (`.gif`): Admite animación y se puede usar para animaciones o logotipos simples.
3. Tamaño de imagen y optimización
* Tamaño: Optimice las imágenes para el uso web comprimiéndolas. Herramientas como [https://tinypng.com/font>(https://tinypng.com/) o [https://www.iloveimg.com/compress-imagefont>(https://www.iloveimg.com/compress -image) puede ayudar.
* Dimensiones: Especifique el ancho y la altura de la imagen utilizando los atributos `` `` de altura '' de la imagen para evitar problemas de diseño a medida que se carga la imagen.
4. Ejemplos
Ejemplo 1:una imagen simple
`` `HTML
`` `` ``
Ejemplo 2:Imagen con comportamiento receptivo
`` `HTML
`` `` ``
* El atributo `width =" 100%"` hace que la imagen ocupe el ancho completo de su contenedor, lo que responde a diferentes tamaños de pantalla.
5. Colocación de imágenes dentro del texto
Puede colocar imágenes directamente dentro de su texto, ya sea antes o después de un párrafo, por ejemplo:
`` `HTML
Este es un párrafo de texto.
Y aquí hay más texto.
`` `` ``
Puntos clave:
* ruta de imagen: Asegúrese de que la ruta de imagen en el atributo `src` sea correcta en relación con la ubicación de su archivo HTML.
* Texto alternativo: Nunca olvides el atributo 'Alt'. Es crucial para la accesibilidad y el SEO.
* Optimización de imágenes: Asegúrese de que sus imágenes estén optimizadas para uso web. Los tamaños de archivo más pequeños conducen a tiempos de carga más rápidos.
¡Avíseme si tiene alguna otra pregunta sobre imágenes en HTML!
