Optimizar imágenes web reduce el peso de las fotografías y mejora la velocidad de carga de una página. Ajusta las dimensiones, el formato y la compresión para que se vean bien sin transferir más datos de los necesarios.
Elige dimensiones adecuadas
Antes de subir una imagen, revisa el espacio real que ocupará en la página. Una fotografía de varios miles de píxeles de ancho no suele ser necesaria para una tarjeta pequeña. Exporta una versión cercana al tamaño de presentación y guarda el original por separado.
Si una misma imagen se muestra en distintos tamaños, prepara variantes responsivas cuando la tecnología del sitio lo permita. Así, un teléfono puede descargar un archivo más pequeño que una pantalla grande.
Usa un formato moderno
WebP y AVIF pueden ofrecer archivos más livianos que formatos tradicionales para muchas fotografías. Comprueba que el flujo de publicación los genere correctamente y conserva una alternativa cuando el sistema o los navegadores objetivo la necesiten.
El formato no hace todo el trabajo: ajusta la compresión y revisa el resultado a tamaño real. Los artefactos visibles, bordes borrosos o colores alterados indican que se comprimió demasiado.
Carga primero lo que el visitante ve
Las imágenes que aparecen debajo de la primera pantalla pueden cargarse de forma diferida para no competir con el contenido inicial. En cambio, la imagen principal visible al abrir la página debería estar optimizada y disponible pronto.
Define también el ancho y alto de las imágenes en el HTML. El navegador podrá reservar el espacio antes de descargarlas y evitar saltos molestos mientras carga la página.
No olvides el texto alternativo
Escribe un atributo alt que describa la información útil de la imagen. Si es decorativa y no aporta contenido, utiliza un texto alternativo vacío. No repitas palabras clave sin sentido: el objetivo es que alguien que no ve la imagen entienda lo importante.
Revisión rápida
- ¿La imagen tiene un tamaño razonable para el espacio donde se muestra?
- ¿El formato mantiene una calidad aceptable?
- ¿Las imágenes fuera de pantalla se cargan de manera diferida?
- ¿El texto alternativo explica lo que aporta la imagen?
Revisa las páginas más visitadas después de optimizar los recursos. Una mejora pequeña en varias imágenes puede reducir el peso total del sitio y hacer más cómoda la navegación, especialmente con conexiones móviles.