La respuesta corta
Averigua qué ancho ocupa la imagen en la página, en píxeles CSS, y expórtala al doble. Una columna de blog de 760 píxeles necesita una imagen de unos 1520. Una tarjeta de producto mostrada a 280 píxeles necesita unos 560. Un fondo que ocupa toda la pantalla necesita 1920 píxeles para laptops típicas y hasta 2560 para monitores grandes.
El redimensionador de abajo lo hace en un paso: elige Píxeles, escribe el ancho, deja Alto vacío y mantén activado Mantener proporciones. Pasar un lote de fotos del móvil de unos 4000 píxeles a 1600 suele reducir cada archivo entre un 80 y un 90 por ciento antes de cualquier compresión adicional.
Pruébalo aquí: Redimensionar imagen
Abrir la herramienta completaTamaños recomendados según el tipo de imagen
Estas medidas cubren los casos habituales en blogs, tiendas en línea y webs de empresa. Lo que más importa es el ancho; el alto sale de la proporción que elijas. Los pesos objetivo suponen JPG o WebP con una calidad de entre 75 y 85.
| Tipo de imagen | Ancho en píxeles | Proporción habitual | Peso objetivo |
|---|---|---|---|
| Portada o banner a todo lo ancho | 1920 a 2560 | 16:9 o 21:9 | 200 a 400 KB |
| Imagen dentro de un artículo | 1200 a 1600 | 3:2 o 16:9 | 100 a 200 KB |
| Foto de producto con zoom | 1000 a 2000 | 1:1 | 100 a 300 KB |
| Miniatura, tarjeta de producto | 300 a 600 | 1:1 o 4:3 | 20 a 60 KB |
| Imagen para compartir (Open Graph) | 1200 x 630 | aprox. 1,91:1 | menos de 300 KB |
| Logo | unas 2 veces su tamaño en pantalla | cualquiera | menos de 30 KB, o SVG |
| Foto del equipo o del autor | 400 a 800 | 1:1 | 30 a 80 KB |
Qué son las imágenes retina o 2x
Los móviles modernos, muchas laptops y casi todos los Mac tienen pantallas de alta densidad, donde un píxel CSS se dibuja con dos o tres píxeles físicos. Una imagen exactamente igual de ancha que su espacio se ve algo blanda en esas pantallas. Duplicar el ancho (2x) la vuelve nítida; llegar a 3x añade mucho peso para una mejora que casi nadie nota, así que 2x suele ser el máximo razonable.
Si tu web o plataforma admite imágenes adaptables (el atributo srcset, que WordPress, Shopify y la mayoría de sistemas de tienda añaden solos), sube una versión grande a 2x y deja que el sistema cree las copias pequeñas. Si no lo admite, una sola imagen al doble del mayor ancho de visualización es el mejor equilibrio.
Para una portada a todo lo ancho eso significa unos 2560 píxeles en escritorio. En un móvil la misma zona mide unos 400 píxeles CSS, así que un sistema adaptable serviría ahí una versión de 800 a 1200 píxeles.
Proporciones y cómo redimensionar sin deformar
La proporción es la relación entre ancho y alto. 16:9 es la forma panorámica de los videos y de casi todos los banners, 3:2 la forma nativa de muchas cámaras, 4:3 la de la mayoría de cámaras de móvil y 1:1 es el cuadrado, habitual en listados de productos. Usar una misma proporción para cada tipo de imagen hace que las páginas se vean ordenadas.
Redimensionar solo cambia el tamaño, no la forma, siempre que se mantengan las proporciones. Con Mantener proporciones activado, el redimensionador encaja la imagen dentro del ancho y alto que escribes, así que nunca se ve estirada. Si necesitas una forma exacta, por ejemplo 1200 x 630 para compartir o un cuadrado para un producto, recorta primero con la herramienta de recorte y luego redimensiona.
No amplíes imágenes pequeñas. Ampliar añade píxeles sin añadir detalle, así que el resultado pesa más y se ve más borroso. Por eso No ampliar imágenes pequeñas viene activado.
Paso a paso para una web típica
- Mide: abre la página, haz clic derecho sobre la imagen y elige Inspeccionar, o consulta en la documentación de tu plantilla el ancho del contenido.
- Recorta a la proporción que usas para ese tipo de imagen si el original tiene otra forma.
- Redimensiona al doble del ancho de visualización en modo Píxeles.
- Elige el formato de salida: WebP para los archivos más ligeros si tu plataforma lo acepta, si no JPG. Deja PNG para logos y gráficos con transparencia.
- Comprime si el archivo sigue por encima del objetivo, súbelo y revisa la página en un móvil.
Errores frecuentes
- Subir el original de la cámara y dejar que el navegador lo reduzca. El archivo de 4000 píxeles se descarga entero igualmente, lo que hace más lenta la página y empeora la métrica Largest Contentful Paint.
- Reducir solo con los atributos width y height del HTML. Controlan el tamaño en pantalla, no el peso del archivo. Aun así conviene ponerlos, porque reservan el espacio y evitan saltos en la página.
- Usar PNG para fotos. Una foto guardada en PNG suele pesar de 5 a 10 veces más que en JPG o WebP.
- Mezclar proporciones en una misma cuadrícula, lo que hace que los listados de productos se vean desordenados.
- Meter texto dentro de las imágenes. Los buscadores no lo leen y en el móvil queda diminuto; mejor usa texto real encima de la imagen.
Consejos para páginas más rápidas
Las imágenes que quedan por debajo de la primera pantalla deberían usar carga diferida (lazy loading), para descargarse solo cuando el visitante se acerca; la mayoría de los gestores de contenido lo añaden solos. La imagen principal de arriba debe cargarse normal, porque suele ser el elemento más grande que mide la puntuación de velocidad.
Redimensiona carpetas enteras de una vez: añade todas las imágenes, escribe el ancho una sola vez y usa Descargar todo en ZIP. La lista muestra las dimensiones anteriores y nuevas de cada archivo. Todo ocurre en tu navegador, así que incluso cientos de fotos de producto se procesan sin subir nada.