Redimensiona, comprime y elige entre WebP, AVIF y otros formatos con un flujo práctico que reduce peso sin degradar innecesariamente la imagen.
Una imagen de varios megabytes puede ser perfecta para impresión y desproporcionada para una página Web. Optimizar no significa degradarla hasta que pese poco: significa eliminar lo que la visualización final no necesita.
El orden práctico suele ser: redimensionar, elegir formato, comprimir, comprobar visualmente y servir la variante adecuada.
Una fotografía de 6000 × 4000 contiene 24 millones de píxeles. Si nunca se muestra a más de 1200 px de ancho, descargar la versión completa desperdicia transferencia y decodificación.
Pregúntese cuál es el ancho máximo real, si existe versión móvil y si hace falta una versión de alta densidad.
Dos imágenes de 1600 × 900 pueden pesar cantidades muy distintas. El formato, el contenido y la compresión también influyen.
Una fotografía detallada no se comprime como un logotipo con cuatro colores.
| Contenido | Formato habitual |
|---|---|
| Fotografía | WebP, AVIF, JPEG |
| Captura de interfaz | WebP o PNG |
| Logo vectorial | SVG |
| Transparencia | WebP, AVIF, PNG |
| Compatibilidad máxima | JPEG / PNG |
WebP es muy compatible y admite pérdida, sin pérdida, transparencia y animación. AVIF ofrece compresión moderna y funciones avanzadas. JPEG y PNG siguen siendo importantes como formatos de referencia y fallback.
La compresión sin pérdida conserva los datos de píxel. La compresión con pérdida elimina información menos importante visualmente.
Para fotografía Web, una compresión con pérdida razonable puede reducir mucho el peso sin una diferencia visible al tamaño real de uso.
No evalúe una imagen Web solo con zoom al 400%. Revísela al tamaño de visualización y observe texto, gradientes, cabello, vegetación y detalles finos.
Pasar de 4000 × 3000 a 800 × 600 reduce el número de píxeles de 12 millones a 480.000. La reducción de datos potencial es enorme.
srcset, sizes y <picture> permiten ofrecer variantes adaptadas y formatos alternativos.
<picture>
<source srcset="/imagen.avif" type="image/avif">
<source srcset="/imagen.webp" type="image/webp">
<img src="/imagen.jpg" alt="Descripción">
</picture>Las capturas de pantalla y esquemas toleran peor una compresión fotográfica agresiva. Los bordes de letras y líneas hacen visibles los artefactos. Pruebe modos sin pérdida o más calidad.
Los EXIF pueden incluir cámara, fecha y, en algunos casos, localización. Conserve solo los datos realmente útiles y tenga cuidado con perfiles de color cuando su eliminación cambie el aspecto.
Diez imágenes de 900 kB suman unos 9 MB. A 180 kB de media pasan a 1,8 MB: un ahorro de 7,2 MB.
Para tareas recurrentes:
importar → redimensionar → convertir → comprimir → exportar
El orden importa: comprimir antes de redimensionar puede provocar una recompresión innecesaria.
La mejor imagen Web no es siempre el archivo más pequeño posible, sino el archivo más pequeño que cumple correctamente su función visual.
Colección
11 / 14
Reduce el peso de una imagen eligiendo las dimensiones adecuadas, el formato correcto y un nivel de calidad controlado, sin una degradación visible innecesaria.
Entiende srcset, sizes, los descriptores de anchura y densidad, picture, la dirección artística y cómo el navegador elige la imagen responsive adecuada.
Elige el formato de imagen adecuado para una foto, una captura, un recurso transparente o una interfaz, sin sacrificar innecesariamente la calidad ni el rendimiento.