El elemento img: src, alt, width y height
Inserte imágenes correctamente con todos los atributos necesarios.
El elemento img: src, alt, width y height es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.
El elemento img
El elemento <img> inserta una imagen en la página:
<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->El atributo src
El atributo src especifica el origen de la imagen:
<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">
<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">
<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">
<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">El atributo alt
El atributo alt proporciona el texto alternativo de las imágenes:
- Se muestra cuando la imagen no se puede cargar
- Los lectores de pantalla lo leen en voz alta
- Los motores de búsqueda lo indexan
- Es necesario para la accesibilidad (WCAG)
Escribir un buen texto alt
Cómo escribir un texto alt eficaz:
<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->
<!-- Functional image (button/link): describe the action -->
<a href="/">
<img src="logo.png" alt="Go to homepage">
</a>Atributos width y height
Especifique siempre width y height en las imágenes:
<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
This prevents layout shift (CLS) — a Core Web Vital metric -->Relación de aspecto y CSS
Establecer width y height en HTML permite que CSS calcule la relación de aspecto:
<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">
<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
width: 100%;
height: auto; /* auto preserves the aspect ratio -->
}
-->Formatos de imagen en la web
Formatos de imagen habituales y cuándo utilizarlos:
- JPEG/JPG: fotografías e imágenes complejas con muchos colores
- PNG: imágenes que requieren transparencia
- WebP: formato moderno, más pequeño que JPEG/PNG y compatible con transparencia
- AVIF: formato de nueva generación, con una compresión aún mejor que WebP
- SVG: iconos e ilustraciones vectoriales, con escalabilidad infinita
- GIF: animaciones sencillas, sustituidas en su mayoría por vídeo
Atributo loading
Controle cuándo se cargan las imágenes con el atributo loading:
<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">
<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">
<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->Atributo decoding
El atributo decoding controla el comportamiento de decodificación de las imágenes:
<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->Atributo fetchpriority
El atributo fetchpriority indica la prioridad de carga de la imagen:
<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">
<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
loading="lazy" width="400" height="300">Ejemplo completo de img
Una imagen totalmente accesible y optimizada para el rendimiento:
<img
src="/images/team-photo.jpg"
alt="The Coddy team gathered at a conference table in 2024"
width="1200"
height="800"
loading="lazy"
decoding="async"
>Comprobación rápida
¿Por qué debe incluir siempre los atributos width y height en los elementos img?
Resumen: elemento img
Aspectos esenciales para insertar imágenes:
src: URL de la imagen, relativa o absolutaalt: descripción obligatoria; déjelo vacío para imágenes decorativaswidthyheight: establézcalos siempre para evitar cambios de diseñoloading="lazy"para imágenes situadas por debajo del contenido visible inicialmente- Elija el formato adecuado: WebP/AVIF para fotografías y SVG para iconos
Preguntas frecuentes
¿La lección «El elemento img: src, alt, width y height» es gratis?
Sí — el texto completo de «El elemento img: src, alt, width y height» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.
¿Qué aprenderé en «El elemento img: src, alt, width y height»?
Inserte imágenes correctamente con todos los atributos necesarios. Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar HTML Academy?
No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «El elemento img: src, alt, width y height»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de HTML Academy?
Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- El elemento img: src, alt, width y height
- Imágenes adaptables con srcset y sizes
- El elemento picture para dirección artística
- figure y figcaption