Preparar fotos para una web: tamaño, formato, peso
Actualizado el 29 de octubre de 2026
Una foto recién salida de la cámara pesa 5 MB y mide 6000 píxeles de ancho; una foto en una página tiene como mucho 1 o 2 millones de píxeles y debería pesar de 100 a 300 KB. Todo lo que hay entre esos dos números es velocidad de página que regalas.
Tres decisiones lo cubren todo: el tamaño en píxeles, el formato y la calidad. Estos son los números que funcionan en 2026 y las herramientas que los aplican en el navegador.
Tamaño: exporta para el lugar más grande donde se mostrará
Un «hero» a ancho completo en escritorio mide de 1600 a 1920 píxeles; una imagen de blog 1200; una miniatura de producto 600; un avatar 256. Dobla esas cifras solo para imágenes que se muestran pequeñas pero se amplían. Redimensiona al lado más largo con la herramienta de redimensionar; mantiene las proporciones y nunca amplía.
Dos tamaños por imagen (grande y pequeño) con el atributo srcset es la configuración habitual en producción; la herramienta de redimensionar puede producir ambos de una sola vez.
Formato: WebP por defecto, AVIF para las mayores ganancias, JPG en caso de duda
WebP está soportado en todas partes y es entre un 25 y un 35 por ciento más pequeño que JPG con el mismo aspecto. AVIF va más lejos (a menudo la mitad que JPG) y lo soportan todos los navegadores actuales; codifica despacio, lo que no importa para unas pocas fotos. PNG es para gráficos con bordes nítidos o transparencia, nunca para fotos.
La herramienta de convertir imágenes cambia entre todos ellos; la de comprimir puede redimensionar, convertir y ajustar la calidad en una sola pasada.
Calidad: de 75 a 82
La calidad 80 en JPG o WebP es el punto en que más calidad resulta invisible en pantalla y el archivo sigue reduciéndose por debajo. Baja a 70 para fondos y miniaturas. Usa el ajuste de tamaño objetivo cuando una plataforma impone un límite (200 KB es común en marketplaces).
Consejos
- Quita los EXIF salvo que los necesites: los metadatos de una cámara pueden pesar 50 KB e incluyen la ubicación.
- Usa el deslizador antes/después de la herramienta de comprimir para juzgar, al 100 por ciento de zoom.
- Conserva los originales; vuelve a exportar desde ellos cuando cambie el diseño.
Preguntas
- ¿Debo usar AVIF en 2026?
- Sí para páginas con muchas fotos; todos los navegadores actuales lo decodifican. Ofrece una alternativa WebP o JPG solo si aún das soporte a navegadores muy antiguos.
- ¿Redimensionar pierde calidad?
- Reducir elimina píxeles que de todos modos no puedes mostrar. El remuestreo usado aquí (Lanczos) mantiene los bordes nítidos.
- ¿Y los HEIC del iPhone?
- Conviértelos primero a JPG o WebP; los navegadores no muestran HEIC en páginas web.