Optimizar una imagen significa entregar la información visual necesaria con un costo razonable de descarga, no alcanzar el menor archivo posible. El tamaño de exportación, el formato y la compresión deben responder al lugar donde se usa. Una captura con texto requiere una revisión diferente de una fotografía o una portada geométrica.
No existe una regla universal de 100 KB. Puede ser un objetivo útil para una composición simple, pero una imagen extensa o detallada puede necesitar más. La decisión debería considerar dimensiones, cantidad de imágenes en la página y función. Un archivo liviano que vuelve ilegible una interfaz no está bien optimizado para ese uso.
Exportar para el tamaño de presentación
Primero identificá cuánto espacio ocupa la imagen en cada contexto. Una portada puede aparecer en una card pequeña y en una interna ancha. Usar siempre el archivo original de mayor tamaño hace que una vista reducida descargue detalle que no muestra. Conviene preparar versiones cuando el uso justifica esa diferencia.
Como ejemplo orientativo, una composición de 1440 × 900 puede servir como fuente para una portada amplia; una card podría usar una versión menor con la misma proporción. No es una receta para todas las pantallas. Hay que revisar el tamaño mostrado, la densidad del dispositivo y qué detalles necesitan conservarse.
WebP, AVIF y el contenido de la imagen
WebP y AVIF son formatos que permiten compresión y pueden ser alternativas para imágenes web. La elección no debería hacerse únicamente por extensión: compará archivos del mismo contenido y observá el resultado. La guía de formatos de MDN documenta capacidades y compatibilidad que conviene revisar según el uso.
Una fotografía tolera ciertos cambios que una captura con texto pequeño no. En una composición de formas planas, los bordes pueden volverse visibles cuando la compresión es agresiva. No alcanza con mirar la miniatura del archivo: revisá la imagen a una escala representativa, incluyendo textos, líneas y zonas con contraste.
Tres casos con necesidades diferentes
Portada editorial
Si usa pocas formas y colores, puede exportarse con bastante eficiencia. La prioridad es conservar la composición, sin recortar el recurso que explica el tema. El peso objetivo se evalúa sobre la familia de portadas y la página donde aparecen, evitando agregar textura o detalle solo para llenar el espacio.
Fotografía
Importan detalle, encuadre y función. Una foto de presentación puede admitir más compresión que una imagen que permite evaluar un producto. Si el contenido principal necesita ampliación, esa vista puede tener otra versión. No conviene obligar a todas las cards a descargar la imagen destinada a una inspección detallada.
Captura de interfaz
La legibilidad de texto y controles es parte del contenido. Reducir demasiado puede borrar justamente lo que el caso quiere explicar. Conviene usar vistas completas y detalles cuando aporten una lectura distinta, no compensar un recorte confuso con una imagen gigantesca. Los números de una maqueta no deben presentarse como resultados medidos.
Servir una imagen adecuada al contexto
Los atributos srcset y sizes permiten ofrecer versiones y describir el espacio previsto; el navegador elige según sus condiciones. El elemento picture puede usarse cuando hay variantes de formato o dirección visual. No basta con declarar varios tamaños si todos apuntan al mismo archivo. MDN explica el funcionamiento de imágenes responsive.
Una implementación debe conservar la relación entre el contenido y su alternativa. Si en móvil se cambia el encuadre, hay que revisar que siga mostrando la información necesaria. En capturas de interfaces, a menudo es preferible mantener la imagen completa y diseñar otra vista de detalle antes que esconder partes con object-fit: cover.
Reservar espacio y elegir cuándo cargar
Los atributos width y height ayudan a indicar la proporción antes de descargar. Loading="lazy" posterga imágenes fuera de la vista; no conviene usarlo para la imagen principal que necesita aparecer al cargar. El alt comunica una alternativa según la función de la imagen. Estas recomendaciones están documentadas en el elemento img de MDN.
La carga diferida no debería transformarse en una regla aplicada a todo. Primero ubicá qué imagen es importante en la primera vista. Después revisá las inferiores. También verificá que los archivos existan y que su espacio no salte mientras aparecen; un atributo correcto no compensa una ruta rota o un contenedor que cambia sin necesidad.
Ejemplo hipotético: un caso de producto
Un portfolio incluye una portada, dos capturas desktop y una adaptación móvil. La portada se usa también en el listado. Se preparan versiones según esos espacios y se compara el texto de las capturas antes de aceptar la compresión. La imagen principal carga sin diferir; las inferiores se cargan cuando corresponde.
La verificación anota dimensiones y peso real, pero también revisa si cada decisión del caso se puede entender. Si un detalle quedó borroso, se vuelve a exportar esa imagen, no todas con una calidad mayor. La optimización se decide por recurso. El objetivo del ejemplo es una entrega consistente, no afirmar una mejora de rendimiento medida.
Una rutina corta de comprobación
- Elegí dimensiones y proporción según la presentación.
- Exportá y compará formato, peso y legibilidad.
- Revisá nombres, alternativas y rutas.
- Reservá espacio y diferenciá imágenes principales de inferiores.
- Probá el conjunto en móvil, no solamente el archivo aislado.
Podés continuar con el checklist de publicación y las decisiones de rendimiento. Si necesitás revisar recursos de una web existente, la optimización puede empezar por ese inventario antes de cambiar el diseño.
