🖼️ Nivel 5 - Imágenes y Multimedia

📖 Aprende sobre Imágenes

🖼️ La etiqueta IMG

La etiqueta <img> muestra imágenes en tu página web. Es una etiqueta sin cierre (no tiene </img>).

💡 Importante

La etiqueta img tiene DOS atributos obligatorios: src (la URL de la imagen) y alt (descripción para accesibilidad).

📋 Atributos de IMG:

src

URL o ruta de la imagen

alt

Texto alternativo

width

Ancho en píxeles

height

Alto en píxeles

title

Tooltip al pasar el mouse

"lazy" = carga diferida

🔗 Tipos de rutas:

Absoluta: https://ejemplo.com/foto.jpg
Relativa: imagenes/foto.jpg
Misma carpeta: foto.jpg

🎬 Videos con VIDEO

Usa <video> para mostrar videos. Atributos útiles: controls, autoplay, loop, muted.

📊 Formatos de Imagen: ¿Cuál usar?

📷 JPG / JPEG

Ideal para: Fotografías y imágenes con muchos colores.
Ventaja: Archivos pequeños con buena calidad.
Desventaja: No soporta transparencia.

                        <img src="foto-vacaciones.jpg" alt="Playa">
                    

🎨 PNG

Ideal para: Logos, iconos, imágenes con transparencia.
Ventaja: Soporta transparencia (fondo invisible).
Desventaja: Archivos más pesados que JPG.

                        <img src="logo-empresa.png" alt="Logo">
                    

✨ GIF

Ideal para: Animaciones simples, memes, iconos animados.
Ventaja: Soporta animación y transparencia.
Desventaja: Limitado a 256 colores.

                        <img src="loading.gif" alt="Cargando...">
                    

🚀 WebP (Moderno)

Ideal para: Web moderna - combina lo mejor de JPG y PNG.
Ventaja: Archivos 25-35% más pequeños, soporta transparencia y animación.
Desventaja: No funciona en navegadores muy antiguos.

                        <img src="imagen-optimizada.webp" alt="Imagen WebP">
                    

📐 SVG (Vectorial)

Ideal para: Iconos, logos, gráficos que necesitan escalar.
Ventaja: Se ve perfecto en cualquier tamaño, archivo muy pequeño.
Desventaja: No sirve para fotografías.

                        <img src="icono.svg" alt="Icono SVG">
                    

♿ Accesibilidad en Imágenes

📝 El atributo ALT es OBLIGATORIO

El texto alternativo (alt) describe la imagen para:

🔊 Lectores de pantalla: Personas ciegas escuchan la descripción
🌐 SEO: Google indexa tus imágenes mejor
📡 Conexiones lentas: Se muestra el texto si la imagen no carga

❌ MAL:

<img src="perro.jpg">

Sin alt = inaccesible

✅ BIEN:

<img src="perro.jpg" alt="Perro golden jugando en el parque">

Descriptivo y útil

💡 Consejo Pro: Imágenes Decorativas

Si la imagen es solo decorativa (no aporta información), usa alt="" vacío. Esto le dice al lector de pantalla que la ignore.

                        <img src="decoracion.png" alt=""> <!-- Decorativa -->
                    

⚡ Optimización de Imágenes

🐌 ¿Por qué optimizar?

Las imágenes son el contenido más pesado de una web. Una imagen de 5MB puede hacer que tu página tarde 10+ segundos en cargar. ¡Los usuarios se van después de 3 segundos!

🔧 Técnicas de Optimización:

📐 Redimensionar: No uses una imagen de 4000px si solo la muestras a 400px
📦 Comprimir: Usa herramientas como TinyPNG, Squoosh
🖼️ Formato correcto: JPG para fotos, PNG para logos, WebP para todo
⏳ Lazy Loading: Carga imágenes solo cuando son visibles

                        <!-- Lazy Loading: La imagen solo carga cuando el usuario hace scroll -->

                        <img src="foto.jpg" alt="Descripción" loading="lazy">

💻 Editor de Imágenes

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Galería de Imágenes</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        h1 { color: #ec4899; text-align: center; }
        
        .galeria {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .imagen-card {
            background: white;
            border-radius: 15px;
            overflow: hidden;
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s;
        }
        
        .imagen-card:hover {
            transform: scale(1.05);
        }
        
        .imagen-card img {
            width: 100%;
            height: 150px;
            object-fit: cover;
        }
        
        .imagen-card p {
            padding: 10px;
            text-align: center;
            color: #555;
        }
        
        .imagen-grande {
            width: 100%;
            max-width: 600px;
            border-radius: 20px;
            display: block;
            margin: 20px auto;
            box-shadow: 0 10px 30px rgba(0,0,0,0.2);
        }
    </style>
</head>
<body>
    <h1>🖼️ Mi Galería de Imágenes</h1>
    
    
    <img 
        src="https://picsum.photos/600/300"
        alt="Imagen panorámica aleatoria"
        title="¡Pasa el mouse para ver este texto!"
        class="imagen-grande"
        loading="lazy"
    >
    
    <h2>🎨 Mini Galería</h2>
    <div class="galeria">
        <div class="imagen-card">
            <img src="https://picsum.photos/200/150?random=1" alt="Imagen 1">
            <p>Foto 1</p>
        </div>
        <div class="imagen-card">
            <img src="https://picsum.photos/200/150?random=2" alt="Imagen 2">
            <p>Foto 2</p>
        </div>
        <div class="imagen-card">
            <img src="https://picsum.photos/200/150?random=3" alt="Imagen 3">
            <p>Foto 3</p>
        </div>
    </div>
    
    <h2>🔧 Imagen con tamaño fijo</h2>
    <img 
        src="https://picsum.photos/150/150"
        alt="Imagen cuadrada"
        width="150"
        height="150"
        style="border-radius: 50%; border: 4px solid #ec4899;"
    >
    <p>Esta imagen tiene width="150" y height="150"</p>
</body>
</html>

👁️ Vista Previa

Imágenes y Multimedia

🖼️ La etiqueta IMG

💡 Importante

📋 Atributos de IMG:

🔗 Tipos de rutas:

🎬 Videos con VIDEO

📊 Formatos de Imagen: ¿Cuál usar?

📷 JPG / JPEG

🎨 PNG

✨ GIF

🚀 WebP (Moderno)

📐 SVG (Vectorial)

♿ Accesibilidad en Imágenes

📝 El atributo ALT es OBLIGATORIO

💡 Consejo Pro: Imágenes Decorativas

⚡ Optimización de Imágenes

🐌 ¿Por qué optimizar?

🔧 Técnicas de Optimización:

1. ¿Cuáles son los atributos OBLIGATORIOS de la etiqueta img?

2. ¿Para qué sirve el atributo alt?

3. ¿Qué hace loading="lazy"?

🖼️ La etiqueta IMG

💡 Importante

📋 Atributos de IMG:

🔗 Tipos de rutas:

🎬 Videos con VIDEO

📊 Formatos de Imagen: ¿Cuál usar?

📷 JPG / JPEG

🎨 PNG

✨ GIF

🚀 WebP (Moderno)

📐 SVG (Vectorial)

♿ Accesibilidad en Imágenes

📝 El atributo ALT es OBLIGATORIO

💡 Consejo Pro: Imágenes Decorativas

⚡ Optimización de Imágenes

🐌 ¿Por qué optimizar?

🔧 Técnicas de Optimización:

1. ¿Cuáles son los atributos OBLIGATORIOS de la etiqueta img?

2. ¿Para qué sirve el atributo alt?

3. ¿Qué hace loading="lazy"?

¡Nivel 5 Completado!