Empieza por el tamaño mostrado, no por el original
Una cámara o un móvil puede crear fotos de varios miles de píxeles de ancho. Eso no significa que debas publicar ese archivo completo. Si una tarjeta de un listado se muestra a unos 360 píxeles, una foto de 5000 píxeles añade transferencia sin ofrecer más detalle visible en ese contexto.
Abre una página real y mira el ancho máximo de la imagen en escritorio y móvil. Si no tienes acceso a herramientas de desarrollo, utiliza el ancho del contenedor como referencia y prueba la página en un teléfono. El objetivo es preparar una salida que cubra el espacio mostrado, con margen para pantallas de mayor densidad, no una copia del original.
Una referencia útil por contexto
Para listados, galerías y previsualizaciones. Mantén la misma proporción para que no salten los diseños.
Buen punto de partida cuando la foto ocupa casi todo el ancho y puede abrirse con algo de zoom.
Define el ancho según el diseño y revisa siempre el recorte vertical en móvil.
Estos rangos no son una norma universal. Una foto con texto pequeño, una ficha con zoom profundo o una imagen que se reutiliza como fondo pueden necesitar un tamaño distinto. Úsalos para crear una primera versión y decide después con la página publicada, no mirando el archivo aislado.
Respeta la proporción antes de recortar
Reducir dimensiones conserva la relación entre ancho y alto; recortar cambia el encuadre. Son operaciones diferentes. Antes de limitar una imagen, averigua qué proporción pide el diseño: una tarjeta cuadrada, una foto de producto vertical y una cabecera 16:9 no pueden reutilizar exactamente el mismo recorte sin perder información.
Cuando una imagen se usará en varios lugares, guarda un original y genera variantes con nombres claros. Por ejemplo, lampara-negra-listado.webp, lampara-negra-ficha.webp y lampara-negra-cabecera.webp. Esto evita forzar una sola versión gigante para todos los contextos y facilita corregir un encuadre más adelante.
Piensa primero en móvil
En una pantalla pequeña, una imagen horizontal puede ocupar todo el ancho y una cabecera puede recortar los laterales. Comprueba que el motivo principal sigue visible, que cualquier texto integrado se puede leer y que una persona no necesita hacer zoom para identificar el producto o la escena.
No reduzcas solo el ancho por intuición. Una foto de 2400 × 1600 y una de 2400 × 600 generan resultados muy distintos aunque compartan ancho. Define también un alto máximo cuando el diseño lo necesite, pero evita deformar la imagen: conserva la proporción o prepara un recorte específico.
Secuencia de trabajo reproducible
- Guarda el original: deja una copia fuera de la carpeta que subirás a la web.
- Identifica el uso: anota si será miniatura, artículo, ficha, galería o cabecera.
- Elige la proporción: recorta solo si el diseño necesita otro encuadre.
- Limita dimensiones: usa el ancho y alto máximos acordes al hueco real.
- Optimiza el formato: después ajusta WebP, JPG o PNG y revisa la nitidez.
- Comprueba la página: revisa la salida tanto en móvil como en escritorio antes de sustituir la imagen publicada.
Relaciona tamaño, formato y peso
Las dimensiones son la primera palanca para reducir peso; la segunda es el formato y la calidad. Una foto demasiado grande seguirá siendo pesada aunque la conviertas a WebP. En cambio, reducir primero de 5000 a 1600 píxeles suele permitir mantener más detalle que bajar agresivamente la calidad de un archivo enorme.
Cuando hayas decidido el tamaño, consulta la guía de formatos y usa el Studio para comparar una versión de partida con el resultado. La mejor salida es la que se ve bien en su contexto y no retrasa la lectura de la página.