Optimización de Imágenes para la Web
Optimizar una imagen no consiste únicamente en bajar su calidad hasta que pese menos. Una buena estrategia entrega las dimensiones correctas, un formato apropiado y suficiente calidad visual para el contexto. También evita descargar imágenes que el usuario todavía no puede ver.
El resultado debe medirse en la página real. Una imagen de 80 KB puede ser ineficiente si se muestra como un icono, mientras que una fotografía de 250 KB puede ser razonable para una cabecera grande y nítida.
Empieza por las dimensiones
El error más común es enviar una fotografía de 4000 píxeles para mostrarla en un contenedor de 600. Aunque el CSS la reduzca visualmente, el navegador ya ha descargado todos sus píxeles.
Exporta cada recurso cerca de su mayor tamaño de presentación y ofrece variantes para pantallas distintas. Los atributos srcset y sizes, o el componente de imagen de tu framework, permiten que el navegador elija el archivo adecuado. Conserva el original fuera del sitio para poder generar nuevos tamaños en el futuro.
Elige el formato según el contenido
JPEG sigue siendo compatible y eficaz para fotografías, especialmente cuando no se necesita transparencia. PNG es útil para capturas, diagramas o gráficos con bordes nítidos, pero puede resultar pesado para fotografías.
WebP admite compresión con y sin pérdida, transparencia y animación. AVIF puede reducir todavía más algunas fotografías y gráficos complejos, aunque el tiempo de codificación y el resultado varían. SVG es la opción natural para logotipos, iconos y formas vectoriales; no es adecuado para fotografías.
No existe un formato ganador para todo. Compara el resultado visual y el tamaño con imágenes representativas de tu proyecto. Una conversión a AVIF no garantiza automáticamente un archivo menor si la configuración es inadecuada.
Ajusta la calidad con una comparación visual
La compresión con pérdida elimina información para reducir peso. Empieza con una calidad moderada, revisa detalles finos, degradados, piel y texto, y reduce gradualmente. La vista previa debe comprobarse al tamaño real en el que aparecerá la imagen, no solamente ampliada al 400 %.
La compresión sin pérdida conserva exactamente los píxeles, pero no siempre conserva metadatos. Decide si necesitas EXIF, perfil de color, ubicación GPS o información de la cámara. Para una imagen pública suele ser prudente eliminar metadatos innecesarios; para un archivo de trabajo pueden ser importantes.
Usa imágenes responsivas
Una sola imagen para todos los dispositivos obliga a elegir entre desperdiciar datos en móviles o perder nitidez en pantallas grandes. Genera varios anchos, por ejemplo 480, 960 y 1600 píxeles, y deja que el navegador seleccione.
El atributo sizes debe describir el espacio real que ocupará la imagen. Si indica siempre 100vw pero el diseño utiliza media pantalla, el navegador puede descargar una variante mayor de la necesaria.
Carga diferida sin perjudicar la cabecera
loading="lazy" aplaza imágenes que están fuera de la pantalla inicial. Es útil para galerías y contenido situado más abajo, pero no debe aplicarse indiscriminadamente a la imagen principal. Retrasar el recurso que probablemente sea el Largest Contentful Paint puede empeorar la percepción de velocidad.
La imagen principal necesita dimensiones declaradas para reservar espacio y evitar movimientos de diseño. Las imágenes secundarias sí pueden usar carga diferida. Comprueba el resultado con las herramientas de rendimiento del navegador y con una conexión móvil simulada.
Evita cambios de diseño
Indica width y height, o utiliza una relación de aspecto CSS. Así el navegador conoce el espacio necesario antes de descargar el archivo. Sin esa información, el texto puede desplazarse durante la carga y aumentar el Cumulative Layout Shift.
También conviene definir un color de fondo coherente o una miniatura ligera cuando el diseño lo requiera, pero una previsualización borrosa no debe añadir más código del que ahorra.
Un flujo de optimización repetible
Primero clasifica el recurso como fotografía, captura, ilustración o vector. Después redimensiónalo, elimina metadatos innecesarios, genera dos formatos cuando aporte valor y crea variantes responsivas. Finalmente mide peso, dimensiones y apariencia en la página real.
El conversor de imágenes, el optimizador SVG y el visor EXIF de UtilX cubren partes distintas de ese flujo. El procesamiento se realiza en el navegador, de modo que puedes preparar recursos sin subirlos para transformarlos en un servidor externo.
Qué medir después de publicar
Comprueba el peso transferido, el formato servido, el tamaño elegido por srcset, el tiempo de la imagen principal y los cambios de diseño. Lighthouse puede orientar, pero la pestaña Network y las métricas de usuarios reales muestran qué archivo recibió cada dispositivo.
Una optimización sostenible no busca una puntuación aislada. Busca que cada visitante descargue la imagen más pequeña que conserve la calidad necesaria y que el diseño permanezca estable mientras carga.
Optimizar no significa bajar un control de calidad hasta que el archivo pese menos. El formato depende del contenido: JPEG o WebP con pérdida suelen servir para fotografías; PNG conserva gráficos planos y transparencia; SVG es vectorial; AVIF puede reducir fotografías, pero debe probarse. Una animación no equivale a una foto estática y un activo con canal alpha requiere comprobar que el códec elegido lo conserva.
Como ejemplo, parte de una foto de producto de 2400 × 1600 píxeles que se muestra a 600 píxeles de ancho. Genera variantes de 480, 960 y 1600 píxeles, compara WebP y AVIF al tamaño real y conserva un JPEG cuando el soporte o el flujo lo necesite. Revisa un borde transparente y texto pequeño si existen. No reutilices esa exportación para un icono plano: necesita dimensiones y formato distintos.
Primero identifica el tamaño máximo de presentación y la relación de aspecto; después redimensiona desde el original, exporta variantes y define srcset con sizes que describa el ancho real del diseño. Declara dimensiones o una relación de aspecto para reservar espacio. Aplica loading="lazy" solo fuera de la vista inicial; la imagen candidata a LCP debe cargarse con prioridad adecuada y verificarse en una conexión móvil simulada.
Los códecs deciden qué información se elimina o conserva. La compresión con pérdida simplifica detalle y puede producir bloques, halos o cambios de color; el submuestreo de croma puede degradar texto y bordes de color. PNG conserva píxeles pero puede ser enorme; WebP y AVIF admiten alpha, aunque el resultado depende del codificador. La calidad debe juzgarse a la escala publicada, no con una previsualización ampliada.
Los fallos habituales son comprimir dos veces una imagen ya con pérdida, enviar 4000 píxeles a un contenedor pequeño o eliminar metadatos que todavía hacen falta al flujo editorial. También aparecen perfiles de color ignorados, rotación EXIF inesperada, AVIF o WebP sin alternativa donde se necesita, y animaciones que pierden fotogramas al convertirlas. Comprueba siempre la salida visual y los bytes transferidos, no solo el nombre de extensión.
Mide el archivo elegido por el navegador, el peso transferido, el tamaño CSS y el tiempo de la imagen principal. srcset no ayuda si sizes afirma 100vw cuando la columna ocupa media pantalla. Revisa LCP, cambios de diseño y caché en Network y con datos reales. Eliminar GPS y metadatos de cámara puede ser prudente para una imagen pública, pero conserva el original y cualquier dato necesario para derechos o producción.
El navegador tiene límites de memoria y decodificación: un archivo comprimido pequeño puede expandirse mucho al convertirse en píxeles, y procesar muchas fotos a la vez puede bloquear la pestaña. Las herramientas locales reducen una transferencia para la conversión, pero no sustituyen una revisión de licencias, accesibilidad ni los controles del dispositivo. Para lotes enormes, animaciones complejas o perfiles de color críticos, usa una cadena de producción especializada.
Antes de publicar, confirma el formato, alpha y animación; comprueba dimensiones, relación de aspecto, srcset, sizes, width y height; y observa la página al ancho de móvil y escritorio. Compara calidad a tamaño real, verifica metadatos y orientación, inspecciona bytes y LCP, y abre la variante final en navegadores relevantes. Guarda el original editable y documenta qué exportación corresponde a cada ubicación.