Saltar al contenido
pixvertoPixverto

Tamaños de imagen ideales para páginas web: cabecera, blog, miniaturas y pantallas retina

No existe un único tamaño de imagen perfecto, pero sí rangos razonables. Si son demasiado grandes, tu página es lenta. Si son demasiado pequeñas, las imágenes se ven blandas. Esta guía explica la lógica, da cifras prácticas para los usos más comunes y muestra cómo elegir para tu propia web.

Por qué importa el tamaño de la imagen

Dos cosas determinan lo pesada que es una imagen: cuántos píxeles tiene y cuánto está comprimida. Los píxeles son lo que más cuenta. Una foto de 4000 × 3000 tiene 12 millones de píxeles, mientras que una versión de 1200 × 900 tiene aproximadamente uno, así que pesa unas doce veces menos antes de aplicar ninguna compresión.

Si una imagen se muestra en una columna de 800 píxeles, los píxeles que sobran no te dan casi nada que se pueda ver, pero los visitantes siguen pagando por descargarlos. En el otro extremo, una imagen demasiado pequeña el navegador la estira y se ve borrosa. Elegir el tamaño adecuado es el primer y mayor ahorro.

La regla: ajusta al tamaño de visualización

Una imagen debe tener aproximadamente el ancho con el que se muestra. En pantallas de alta densidad de píxeles, que muestran el contenido con el doble de píxeles físicos, basta con hasta aproximadamente el doble del ancho mostrado. Más allá añades peso sin añadir detalle visible.

Para saber con qué tamaño se muestra, abre las herramientas para desarrolladores del navegador, inspecciona una imagen y compara su tamaño renderizado con su tamaño intrínseco. Si el archivo es mucho mayor de lo que aparece en pantalla, puedes reducirlo sin riesgo.

Elegir entre más grande y más pequeña

Imágenes más grandes

  • Ventajas: más nítidas en pantallas grandes y de alta densidad, y con margen para el zoom en las páginas de producto.
  • Inconvenientes: páginas más lentas, más ancho de banda y almacenamiento, y peor experiencia en móviles.

Imágenes más pequeñas

  • Ventajas: carga rápida, menores costes y mejores puntuaciones de velocidad de página.
  • Inconvenientes: resultados blandos o borrosos si la imagen se muestra más grande que su tamaño.

Un buen compromiso es dimensionar para la mayor visualización realista de la imagen y ofrecer varios tamaños para distintas pantallas con imágenes adaptables.

Paso a paso: elige y crea el tamaño adecuado

  1. 1Localiza dónde aparece la imagen y anota el mayor ancho con el que se muestra.
  2. 2Elige el ancho objetivo, entre una y dos veces ese ancho, usando la tabla anterior como guía.
  3. 3Redimensiona a partir del original con Redimensionar imagen, manteniendo la proporción. Si hay que cambiar la forma, recórtala antes con Recortar imagen.
  4. 4Comprime con Comprimir imagen con una calidad de 75 a 85. Si necesitas un límite estricto, Comprimir a 100 KB encuentra la mejor calidad que cabe.
  5. 5Comprueba el peso del archivo frente a los objetivos. Si sigue siendo pesado, reduce más las dimensiones en lugar de bajar demasiado la calidad.
  6. 6Usa un formato moderno donde puedas. Consulta la guía de formatos.
  7. 7Define width y height en tu HTML con las dimensiones finales.

Proporciones y coherencia

Elige unas pocas proporciones y mantenlas: 16:9 para banners, 3:2 o 4:3 para fotos, 1:1 para avatares y cuadrículas de productos. Las proporciones coherentes ordenan los diseños y ayudan a evitar saltos de diseño. Si quieres entender mejor la resolución y el DPI, consulta resolución de imagen, DPI y PPI explicados.

Errores frecuentes

  • Subir los originales de la cámara y confiar en que el navegador los reduzca.
  • Ampliar imágenes pequeñas para llenar un hueco mayor, lo que solo las deja borrosas.
  • Usar un único tamaño enorme en todas partes, incluso para las miniaturas.
  • Arreglar el peso solo bajando la calidad, en lugar de reducir primero las dimensiones en píxeles.
  • Olvidar que el móvil es el público principal de la mayoría de las webs.

Preguntas frecuentes

¿De qué tamaño debe ser la imagen de cabecera de una web?

Entre 1600 y 2000 píxeles de ancho bastan para la mayoría de los diseños, y hasta unos 2560 para pantallas muy grandes. Intenta que el archivo pese menos de 200 a 300 KB comprimiéndolo.

¿De qué tamaño deben ser las imágenes de un blog?

Entre 800 y 1200 píxeles de ancho van bien en la mayoría de los diseños de blog. Comprueba con qué ancho muestra tu tema las imágenes dentro del texto y mantente en torno a ese ancho, o hasta el doble para pantallas nítidas.

¿Necesito imágenes 2x para las pantallas retina?

Hasta aproximadamente el doble del ancho mostrado da resultados nítidos en pantallas de alta densidad. Más allá añades peso con poco beneficio visible. Las imágenes adaptables permiten que cada dispositivo descargue el tamaño adecuado.

¿Cuántos KB debe pesar una imagen web?

Como referencia, menos de 200 a 300 KB para una imagen de cabecera, menos de 100 a 150 KB para una imagen de contenido y menos de 50 KB para una miniatura. Las fotos con mucho detalle pueden necesitar más, y los gráficos sencillos menos.

¿Es mejor reducir la calidad o reducir las dimensiones?

Reduce primero las dimensiones. Menos píxeles reducen el archivo mucho más que bajar la calidad, y con menos daño visible. Ajusta después la calidad solo si aún necesitas recortar peso.

Prueba las herramientas