Los tamaños de imagen adecuados para sitios web

Mide el espacio de tu diseño

Mide el ancho del área de la imagen en la página, no el de toda la ventana del navegador. Empieza por las dimensiones recomendadas por el tema o el bloque de imagen. Si no aparecen, utiliza el inspector del navegador o pide a quien mantiene tu web que compruebe el ancho mostrado en un móvil y un ordenador. Incluye cualquier vista ampliada de la galería o zoom que necesites.

Para una imagen mostrada a 720 píxeles de ancho, compara versiones de 720 y 1440 píxeles. La mayor puede verse más nítida en una pantalla de alta densidad, pero comprueba si el detalle adicional justifica el archivo más grande. Parte de un original suficientemente grande: ampliar uno de 900 a 1440 píxeles no recupera detalles perdidos.

Puntos de partida por ubicación

Una portada de 2400 píxeles no es correcta para todos. El móvil puede necesitar otra variante o recorte. Por otro lado, el zoom de producto puede requerir un archivo mayor separado de la tarjeta normal.

Separa píxeles y peso

Las dimensiones describen la cuadrícula, como 1200 × 800. El peso describe datos almacenados o transferidos en KB o MB. Dos imágenes de iguales dimensiones pueden pesar muy distinto por detalle, formato y compresión.

Un píxel CSS mide el tamaño visible en el diseño de la página. En una pantalla de alta densidad puede usar varios píxeles físicos. Por eso una imagen nítida puede necesitar más píxeles que su ancho mostrado.

Empieza por el diseño. Una foto de 600 píxeles CSS de ancho suele necesitar otra fuente que una foto que llena el escritorio. Las pantallas con alta densidad de píxeles pueden aprovechar más píxeles que la anchura CSS; depende de la imagen y los bytes adicionales.

Conserva proporciones deliberadas

En el redimensionador, bloquea la proporción e introduce 1200 píxeles de ancho para un original de 3000 × 2000. La altura pasa automáticamente a 800. No hace falta calcular e introducir las dos dimensiones. Comprueba que caras y círculos mantengan su forma.

Para una miniatura cuadrada, recorta la foto ancha en lugar de comprimir su forma. Usa el recortador y mantén el sujeto visible en pantallas pequeñas. Ampliar no recrea detalles nunca capturados.

Entrega tamaños según el diseño

El marcado adaptable permite elegir entre archivos. srcset basado en anchura y sizes describen tamaños disponibles y espacio previsto; no crean archivos. Consulta la guía MDN de imágenes adaptables.

Comprueba si tu CMS ya genera variantes y marcado. En páginas estáticas, exporta y referencia los archivos. Subir tres imágenes sin conectarlas al código no crea entrega adaptable.

Fija un objetivo de tamaño para los archivos

Prueba imágenes representativas y la página entera. Doce tarjetas de producto tienen necesidades distintas a un portafolio de una foto detallada. Ningún umbral único de kilobytes garantiza velocidad o calidad.

1. Inspecciona al tamaño de visualización real.
2. Compara dimensiones menores y formatos más eficientes.
3. Revisa bytes descargados y detalles visibles.
4. Prueba en móvil antes de reutilizar el ajuste.

Distingue portadas, productos y miniaturas

Si el sujeto de una portada ancha desaparece en móvil, prepara otro recorte en vez de deformarla. El zoom de producto puede usar un archivo grande separado que no necesitan todas las tarjetas pequeñas. Una miniatura cuadrada exige recortar, no comprimir geométricamente una foto horizontal.

Anota por ubicación la proporción, anchura máxima, tamaños candidatos y detalles imprescindibles. Revisa los ajustes al cambiar de tema. Si el teléfono sigue descargando el archivo mayor, examina la selección responsive. Exportar otro archivo pequeño no ayuda si la página no lo utiliza.