Si estás aprendiendo desarrollo web y te preguntas cómo insertar una imagen en HTML, has llegado al lugar indicado. En este artículo, te explicaremos de forma clara y sencilla el proceso, las mejores prácticas y los errores comunes que debes evitar. Además, veremos la etiqueta para insertar una imagen en HTML y ejemplos prácticos para que lo apliques en tu código.
¿Cuál es la Etiqueta para Insertar una Imagen en HTML?
Para insertar una imagen en HTML, usamos la etiqueta <img>. Esta etiqueta es fundamental en el desarrollo web, ya que permite mostrar imágenes en una página sin necesidad de un cierre.
Sintaxis Básica:
<img src="ruta-de-la-imagen.jpg" alt="Descripción de la imagen">
Atributos Clave de la Etiqueta <img>:
src: Define la ubicación del archivo de imagen.
alt: Proporciona una descripción alternativa para accesibilidad y SEO.
width y height: Permiten ajustar el tamaño de la imagen.
Pasos para Insertar una Imagen en HTML
1. Guardar la Imagen en la Carpeta del Proyecto
proyecto/
│-- index.html
│-- imagenes/
│ │-- ejemplo.jpg
2. Agregar la Etiqueta <img> en el Código HTML
Dentro del archivo index.html, agrega la siguiente línea de código:
<img src="imagenes/ejemplo.jpg" alt="Ejemplo de imagen en HTML">
3. Verificar la Ruta de la Imagen
Si la imagen no se muestra, revisa que la ruta en el atributo src sea correcta. Puedes probar con una imagen en línea usando una URL directa:
<img src="https://ejemplo.com/imagen.jpg" alt="Imagen desde una URL">
4. Ajustar Tamaño y Estilos con CSS
Para mejorar la presentación de la imagen, podemos agregar estilos CSS:
<style>
img {
width: 300px;
height: auto;
border-radius: 10px;
}
</style>
<img src="imagenes/ejemplo.jpg" alt="Ejemplo de imagen estilizada">
Formatos de Imagen Recomendados para Web
Al insertar imágenes en HTML, es importante elegir el formato adecuado:
JPEG: Compresión con pérdida, ideal para fotos
PNG: Soporta transparencia, excelente calidad
SVG: Gráficos escalables sin perder calidad
WEBP: Alta compresión y calidad óptima
Errores Comunes al Insertar una Imagen en HTML
Ruta Incorrecta: Asegúrate de que la ruta de la imagen sea precisa.
Formato No Soportado: Verifica que el navegador admita el formato de la imagen.
Falta de Atributo alt: Siempre agrega una descripción para accesibilidad y SEO.
¿Cómo Insertar una Imagen como Fondo en HTML?
Si en lugar de una imagen independiente quieres usar una como fondo, emplea CSS:
body {
background-image: url('imagenes/fondo.jpg');
background-size: cover;
background-position: center;
}
Ahora que conoces los pasos para insertar una imagen en HTML, puedes aplicar este conocimiento en tus proyectos web. Recuerda utilizar rutas correctas, formatos optimizados y buenas prácticas para mejorar el rendimiento de tu página.
📌 ¿Necesitas más guías sobre desarrollo web? Explora nuestro blog y sigue aprendiendo.