Punto de partida. Actividad «Optimización y comparación de la web», sesión 3 de 6. Abre el avance de la sesión anterior; los pasos de hoy indican qué conservar y qué completar. La guía de arranque permite preparar las herramientas sin depender de otros módulos.
Se explica
10 minutos · contexto, explicación y ejemplo
Una imagen puede transferir muchos más píxeles de los que se muestran. Reducir dimensiones o cambiar formato puede disminuir bytes, pero hay que comprobar legibilidad y calidad. La primera imagen visible y una imagen situada al final de la página tampoco tienen la misma prioridad de carga.
El experimento cambia una cosa cada vez: elegimos una imagen medida, aplicamos una mejora y volvemos a observarla. Así podemos relacionar el resultado con la modificación y conservar una versión adecuada si una compresión mayor deteriora el producto.
Consultar ejemplos y conceptos de esta sesión
Una imagen puede ser enorme
Una foto de 6000 × 4000 que pesa 8,5 MB y que en la web aparece a 600 × 400. Estamos enviando información que el usuario no puede llegar a ver.
Sobre una imagen podemos actuar en tres frentes.
Resolución. No servir una imagen mucho mayor de lo que se va a mostrar.
Formato. No hay un formato perfecto para todo:
| Formato | Va bien para |
|---|---|
| SVG | Iconos, logotipos, gráficos vectoriales |
| WebP / AVIF | Fotografías e imágenes web, con archivos bastante menores |
| PNG | Cuando hace falta transparencia u otras características concretas; no suele ser el más ligero |
| JPEG | Fotografía, cuando no se puede usar un formato moderno |
Calidad. Una imagen al 100 % de calidad puede pesar muchísimo más que la misma al 80 %, con una diferencia visual que casi nadie percibe. El objetivo no es destrozar la imagen para que pese 3 KB: es encontrar un equilibrio razonable.
Responsive images
Un móvil no necesita la misma resolución que una pantalla grande. HTML permite ofrecer varias versiones y dejar que el navegador elija, con srcset.
Lazy loading
Una página con 30 imágenes de las que al abrirla se ven 4. ¿Hace falta descargar las otras 26 ya? Casi nunca:
<img src="producto.webp" loading="lazy" alt="Zapatilla de running azul">Se trabaja
45 minutos · trabajo guiado sobre la actividad
- Selecciona una imagen entre los recursos más pesados. Localiza su archivo en el proyecto y la referencia que lo utiliza, mediante la búsqueda del editor. Conserva una copia inicial fuera de la carpeta servida.
- Compara dimensiones del archivo con su tamaño visible. Abre la herramienta de conversión indicada en la guía y exporta una versión con resolución suficiente; conserva el original de trabajo.
- Actualiza la referencia al archivo exportado. Recarga y comprueba en Red que responde correctamente y que ya no se solicita la versión anterior por esa referencia.
- Compara bytes y aspecto en móvil y escritorio. Si se ve borrosa, aumenta calidad o resolución y repite la medida. Registra una versión aceptada y una alternativa descartada si realmente la probaste.
- Repite el procedimiento en otra imagen y razona si puede cargarse de forma diferida. No apliques
loading="lazy"automáticamente a la imagen principal visible al abrir la página.
Cierre
5 minutos · comprobar el resultado
Al terminar la sesión:
La reducción está medida y las imágenes conservan su función. Puedes localizar el cambio en el archivo y explicar por qué elegiste esa calidad.