Optimizar una imagen web implica servir los píxeles necesarios, elegir un formato sensato y validar cómo se ve en la página real.
Parte del espacio que ocupará la imagen
Mide el ancho máximo del componente donde aparecerá y considera si la interfaz sirve versiones distintas según la pantalla. Una fotografía enorme reducida solo con CSS mantiene una descarga innecesariamente grande.
Crea derivados desde una fuente maestra, no desde una copia ya comprimida. Si necesitas varios tamaños, genera cada uno directamente desde el original para evitar acumular artefactos.
Escoge el formato según el contenido
Para fotografías, compara JPG y WEBP a una calidad visual equivalente. Para logotipos, capturas o recursos con transparencia, PNG puede seguir siendo la opción correcta, aunque convenga optimizarlo.
El navegador necesita conocer el tipo real del archivo. Cambiar la extensión sin volver a codificar no aporta ninguna optimización y puede provocar respuestas MIME incorrectas o fallos en herramientas de publicación.
- Fotografía: JPG o WEBP.
- Transparencia: PNG o WEBP compatible.
- Iconos de interfaz: usa el sistema gráfico del proyecto cuando sea posible.
Ajusta la calidad con una página de prueba
Comprime primero una imagen representativa. Revisa rostros, producto, letras y degradados en el tamaño real del componente. Una previsualización aislada no siempre muestra cómo interactúa la imagen con fondos, recortes o superposiciones.
Si el archivo sigue siendo grande, no bajes la calidad a ciegas. Comprueba si sobran dimensiones, si hay metadatos prescindibles en el flujo de exportación o si otro formato encaja mejor con el contenido.
Evita que la optimización rompa la experiencia
Define ancho y alto en el diseño para reservar espacio y reducir movimientos al cargar. Añade textos alternativos que describan la función de las imágenes informativas; la compresión no sustituye la accesibilidad.
Prueba conexiones lentas y una pantalla móvil real o emulada. El resultado correcto equilibra rapidez, legibilidad y consistencia visual, no únicamente el menor número de bytes posible.
- Dimensiones reservadas.
- Recorte comprobado.
- Texto alternativo útil.
- Calidad revisada en móvil y escritorio.