1. El contenido multimedia pesa
Las imágenes, los vídeos y las fuentes son, con diferencia, lo que más pesa de una página web: una sola foto sin optimizar puede ocupar más que todo el HTML, el CSS y el JavaScript juntos. Y el peso se traduce en tiempo de carga, en datos móviles gastados y en posiciones perdidas en Google, que mide la velocidad de cada página. Preparar bien los archivos multimedia es tan parte del diseño web como elegir los colores.
Tres preguntas antes de subir un archivo
2. Imágenes: formatos y optimización
| Formato | Tipo | Úsalo para |
|---|---|---|
| JPEG | Mapa de bits con pérdida | Fotografías, como respaldo universal |
| PNG | Mapa de bits sin pérdida, con transparencia | Capturas de pantalla, imágenes con texto o transparencias |
| WebP | Con o sin pérdida, transparencia y animación | Sustituto moderno de JPEG y PNG: un 25-35 % menos de peso |
| AVIF | Compresión aún mejor | Fotografías donde cada kilobyte cuenta; compatible con los navegadores actuales |
| SVG | Vectorial (formas descritas en XML) | Logotipos, iconos e ilustraciones: pesan poco y se ven nítidos a cualquier tamaño |
| GIF | Mapa de bits de 256 colores | Casi nunca: para animaciones, mejor un vídeo corto |
Optimizar una imagen tiene tres pasos: redimensionarla al tamaño máximo con que se va a mostrar (teniendo en cuenta las pantallas de alta densidad, que usan el doble de píxeles), comprimirla con una calidad razonable (en JPEG o WebP, en torno al 75-80 % es imperceptible) y elegir el formato adecuado. Herramientas como Squoosh (en el navegador), ImageMagick o sharp (automatizadas) lo hacen en segundos.
Imágenes adaptables
HTML permite ofrecer varias versiones de una imagen y dejar que el navegador elija. Con srcset y sizes das el mismo encuadre en varios anchos, y el navegador descarga el más pequeño que se vea bien en esa pantalla. Con <picture> puedes, además, ofrecer formatos modernos con respaldo o cambiar el encuadre según la pantalla (lo que se llama dirección de arte).
1<img src="aula-800.jpg"
2 srcset="aula-400.jpg 400w, aula-800.jpg 800w, aula-1600.jpg 1600w"
3 sizes="(min-width: 60rem) 50vw, 100vw"
4 alt="Alumnos trabajando en el aula de informática"
5 width="800" height="533" loading="lazy" decoding="async">width y height siempre
3. Vídeo y audio
Las etiquetas <video> y <audio> reproducen multimedia sin complementos. Un archivo de vídeo es un contenedor (MP4, WebM) que lleva dentro pistas codificadas con un códec (H.264, VP9, AV1): el contenedor dice cómo se empaqueta y el códec cómo se comprime. MP4 con H.264 funciona en todas partes; WebM con VP9 o AV1 pesa menos. Ofreciendo los dos, cada navegador elige el primero que sabe reproducir.
- controls: sin controles, el usuario no puede pausar ni bajar el volumen.
- Nada de reproducción automática con sonido: los navegadores la bloquean y molesta. Si un vídeo decorativo debe empezar solo, que sea
autoplay muted loop playsinline. - poster y preload="metadata": una portada y descargar solo lo mínimo hasta que el usuario pulse reproducir.
- Subtítulos con
<track>y ficheros WebVTT, y una transcripción para quien no puede ver ni oír el contenido. - Para vídeos largos o muy vistos, una plataforma (YouTube, Vimeo) o un servicio de streaming adaptativo ahorra ancho de banda.
4. Derechos de autor y licencias
Toda imagen, fotografía, icono, tipografía o música tiene un autor con derechos sobre ella desde el momento en que la crea, aunque no lo indique. Usar un archivo sin permiso puede acarrear reclamaciones y multas, también a la empresa para la que trabajas. Por eso, antes de usar un recurso hay que conocer su licencia.
| Licencia | Qué permite |
|---|---|
| Todos los derechos reservados | Nada sin permiso expreso o compra de una licencia |
| CC BY | Usar y modificar, incluso comercialmente, citando al autor |
| CC BY-SA | Igual, y las obras derivadas deben compartirse con la misma licencia |
| CC BY-NC | Solo usos no comerciales, citando al autor |
| CC0 / dominio público | Cualquier uso, sin necesidad de citar |
| Licencias de bancos de imágenes | Lo que diga cada banco (Unsplash, Pexels: uso libre con condiciones; otros, de pago) |
5. Animación e interactividad con CSS
Una animación bien usada guía la atención y da información: un botón que responde al pasar el ratón, un panel que se despliega en lugar de aparecer de golpe, un indicador de carga. Mal usada, distrae y marea. CSS ofrece dos herramientas: las transiciones, que suavizan el cambio entre dos estados, y las animaciones con @keyframes, que describen una secuencia completa.
1.tarjeta { transition: transform 0.2s ease, box-shadow 0.2s ease; }
2.tarjeta:hover { transform: translateY(-4px); box-shadow: 0 12px 24px rgb(0 0 0 / 0.15); }
3
4@keyframes girar { to { transform: rotate(360deg); } }
5.cargando { animation: girar 1s linear infinite; }
6
7@media (prefers-reduced-motion: reduce) {
8 *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
9}Anima preferentemente transform y opacity: el navegador las calcula en la tarjeta gráfica sin volver a distribuir la página, y van fluidas incluso en móviles modestos. Y respeta siempre la preferencia de movimiento reducido del sistema operativo: para algunas personas con trastornos vestibulares, las animaciones grandes provocan mareos reales.
(sin mensajes)6. Retos
Los dos primeros retos se resuelven escribiendo HTML y las pruebas revisan cada atributo importante; en el tercero editas el CSS de un botón animado que también cuide a quien prefiere menos movimiento.
Escribe un <picture> que ofrezca la foto en AVIF (foto-800.avif 800w y foto-1600.avif 1600w) y en WebP (los mismos anchos), en ese orden, con sizes="(min-width: 800px) 800px, 100vw" en ambas fuentes, y un <img> de respaldo en JPEG (foto-800.jpg) con texto alternativo, width="800", height="533" y carga diferida.
Inserta un vídeo con controles, imagen de portada (portada.jpg) y precarga solo de los metadatos, que ofrezca dos formatos (clase.webm y clase.mp4, con su type) y subtítulos en español activados por defecto (subtitulos-es.vtt, kind captions, etiqueta «Español»). Añade también un enlace a la transcripción (transcripcion.html) para quien no pueda ver ni oír el vídeo. No debe reproducirse solo.
Al pasar por encima, .boton debe oscurecer su fondo a #1d4ed8 y subir 2px (transform: translateY(-2px)), con una transición de 0.2s en background-color y transform. Pero hay personas a las que el movimiento les marea: si el sistema pide reducir el movimiento (prefers-reduced-motion: reduce), el botón no debe tener transiciones.