Dónde está la imagen: la carpeta y el nombre del archivo
alt
Texto alternativo
Describe la imagen. Se lee si no carga y lo usan los lectores de pantalla
<img> es una de las pocas etiquetas que no lleva cierre: no envuelve nada, solo
inserta.
El alt no es opcional
Una imagen sin texto alternativo es un problema de accesibilidad: alguien que
navega con lector de pantalla no tiene forma de saber qué hay ahí.
Y tiene que describir lo que se ve. alt="imagen1" o alt="foto" no sirven de
nada; alt="Foto de perfil de Ana Soto" sí.
Controla el ancho
Sin un width, una foto de 4000 px de ancho se desborda de la pantalla:
<img src="img/foto.jpg" alt="…" width="400">. Más adelante esto se maneja mejor
desde CSS, pero por ahora el atributo cumple.
Qué formato usar
Cada formato sirve para algo distinto, y el peso del archivo decide si tu página
carga rápido o lento.
Formato
Para qué
Detalle
.jpg
Fotografías
Comprime muy bien. No admite transparencia
.png
Logos y capturas
Admite fondo transparente y no pierde nitidez. Pesa más
.svg
Íconos vectoriales
Se agranda sin pixelarse y pesa poquísimo
.webp
El moderno
Misma calidad con menos peso. Lo soportan todos los navegadores
Cuidado con el peso
Una foto sacada del celular puede pesar 5 MB. Diez fotos así y la página tarda
medio minuto en cargar con datos móviles.
Antes de subirla al proyecto, redúcela: apunta a 1600 px de ancho y menos de
300 KB. Cualquier editor de imágenes o un conversor en línea lo hace.
Y recuerda la regla de nombres: minúsculas, sin espacios ni tildes. El nombre del
archivo es parte de la ruta.
Muestra los botones de reproducir, pausar y volumen
width
El ancho del reproductor de video
Sin controls no aparecen los botones
El medio se carga, pero no hay forma de reproducirlo. Es el olvido más frecuente
con estas dos etiquetas.
Cuidado con los archivos externos
El src acepta una URL que apunte a un archivo en otro sitio. Funciona, pero si ese
sitio lo borra o lo mueve, tu página queda sin el medio y no te vas a enterar.
Para los trabajos del curso, guarda los archivos dentro de tu proyecto.
Checkpoint
Intenta responder antes de desplegar cada pregunta.
¿Qué hacen los atributos src y alt de una imagen?
src es la ruta al archivo: dice dónde está la imagen (la carpeta y el
nombre). alt es el texto alternativo: describe lo que se ve.
¿Por qué es importante escribir siempre el alt?
Por dos razones. Si la imagen no carga, es lo único que el usuario va a leer en su
lugar. Y es lo que anuncian los lectores de pantalla: sin alt, quien no ve la
pantalla no tiene forma de saber qué hay ahí.
Tiene que describir la imagen de verdad: alt="imagen1" no sirve.
¿Qué formato conviene para una foto en una web?
.jpg, porque comprime muy bien las fotografías. El .png se reserva para
logos, íconos y capturas (admite transparencia pero pesa más), el .svg para
íconos vectoriales, y el .webp es la alternativa moderna al .jpg con menos peso.
¿Cómo se inserta un audio o un video con sus controles?
El atributo controls es el que muestra los botones de reproducir, pausar y
volumen. Sin él no aparecen.
Si aparece el ícono de imagen rota, ¿qué revisas primero?
La ruta: mayúsculas, tildes y espacios. Es la causa en casi todos los casos.
Revisa que el src coincida exactamente, carácter por carácter, con el nombre real
del archivo y con la carpeta donde está.
¿Por qué importa el peso de una imagen si igual se ve bien?
Porque el navegador tiene que descargarla entera antes de mostrarla. Una foto
de celular pesa unos 5 MB: diez de esas son 50 MB que alguien con datos móviles va
a esperar medio minuto, si es que no cierra la pestaña antes.
Se ve idéntica reducida a 1600 px de ancho y menos de 300 KB.