Mejor tamaño de imagen para un sitio web: guía de imagen principal, blog y miniaturas

El mejor tamaño de imagen para un sitio web es aproximadamente el doble del ancho en que se muestra la imagen. Como guía, usa de 1920 a 2560 px de ancho para imágenes principales a todo lo ancho, de 1200 a 1600 px para imágenes de blog y de 300 a 600 px para miniaturas. Guarda en WebP o JPG comprimido, y mantén la mayoría de las imágenes por debajo de unos 200 KB.

Son puntos de partida prácticos, no estándares oficiales. Tu tema y tu diseño deciden las cifras reales, y el método de abajo muestra cómo encontrarlas.

¿Cuál es el mejor tamaño de imagen para un sitio web?

Empieza por el espacio que ocupa cada imagen en tu diseño. Abre la página en un navegador de escritorio, haz clic derecho en la imagen y elige Inspeccionar. Las herramientas para desarrolladores muestran el ancho renderizado en píxeles CSS. Duplica esa cifra para que la imagen se vea nítida en celulares y laptops con pantallas de alta densidad.

Una referencia rápida para tipos de imagen comunes:

• Imagen principal o banner a todo lo ancho: de 1920 a 2560 px de ancho.
• Imágenes dentro de una entrada de blog o columna de contenido: de 1200 a 1600 px de ancho.
• Fotos de productos: de 1000 a 2000 px en el lado más largo, más si tu tienda permite hacer zoom.
• Miniaturas y tarjetas: de 300 a 600 px de ancho.
• Logos e íconos: SVG siempre que se pueda, porque se ve nítido a cualquier tamaño.
• Imagen para compartir en redes sociales (Open Graph): 1200 x 630 px es el tamaño más usado.

El error más común es subir una foto de 4000 px de un celular o una cámara a una columna de 700 px. El navegador descarga todos los píxeles y luego descarta la mayoría. Con una conexión móvil, son segundos de espera para nada.

En la web solo importan las dimensiones en píxeles. Las pantallas ignoran el número de DPI guardado en un archivo, así que no hace falta fijar 72 o 300 DPI para un sitio web. Nuestra guía de 300 DPI explica cuándo sí importa esa cifra (al imprimir).

Tamaño de la imagen principal: ¿qué tan ancha y qué tan alta?

Una imagen principal (hero) es el banner grande en la parte superior de una página. Como se extiende por toda la pantalla, tiene que ser la imagen más ancha de tu sitio.

• Ancho: 1920 px cubre la mayoría de las pantallas de escritorio. Sube hasta 2560 px si quieres que se vea nítida en pantallas grandes de alta densidad.
• Alto: depende de tu diseño. Muchas imágenes principales miden entre 600 y 1000 px de alto en el ancho de escritorio.
• Forma: un recorte ancho como 16:9 o 21:9 funciona en escritorio. En celulares, la misma imagen suele recortarse al centro, así que deja el sujeto en medio.
• Peso: intenta quedarte por debajo de unos 500 KB; entre menos, mejor.

La imagen principal suele ser el elemento Largest Contentful Paint (LCP) de la página, el momento que usa Google para juzgar qué tan rápido aparece tu página. La guía de web.dev de Google recomienda apuntar a un LCP de 2.5 segundos o menos. Una imagen principal pesada es la razón habitual por la que una página no lo logra.

Si hay texto sobre la imagen principal, una imagen un poco más oscura o desenfocada lo mantiene legible y se comprime mejor, porque las zonas lisas ocupan menos bytes que el detalle fino.

Tamaño de imagen para blog: artículos e imágenes destacadas

Para imágenes dentro de una entrada, fíjate en el ancho de tu columna de contenido. La mayoría de los temas de blog usan una columna de entre 600 y 800 píxeles CSS. Al duplicarlo obtienes de 1200 a 1600 px, que es el rango de tamaño de imagen para blog de arriba.

• Imágenes dentro del artículo: 1200 px de ancho va bien con la mayoría de los temas. Usa 1600 px si tu columna es ancha.
• Imagen destacada: revisa la documentación de tu tema. Muchos usan un recorte ancho, y 1200 x 630 px sirve también como imagen para compartir en redes.
• Capturas de pantalla: déjalas en su tamaño natural si son más angostas que la columna, para que el texto no se vea borroso al ampliarse.
• Peso: apunta a 100 a 200 KB para fotos. Las capturas guardadas como PNG pueden pesar más, así que prueba WebP para ellas.

Usa una forma uniforme para las imágenes destacadas en todo el blog. Las formas mezcladas hacen que las páginas de archivo y de categoría se vean disparejas.

¿Qué peso de archivo deben tener las imágenes de un sitio web?

No hay un límite oficial, pero algunos objetivos aproximados mantienen las páginas rápidas:

• La mayoría de las imágenes de contenido: menos de unos 200 KB.
• Imágenes principales grandes: menos de unos 500 KB.
• Miniaturas: muchas veces de 20 a 50 KB.

Si los objetivos en KB y MB te confunden, nuestra guía sobre cuántos KB tiene un MB lo aclara.

Las dimensiones correctas hacen la mayor parte del trabajo. La compresión hace el resto. Una foto de 1600 px guardada como JPG con calidad de 75 a 85, o como WebP, normalmente queda dentro del rango. Si una imagen sigue pesando mucho, usa un compresor con tamaño objetivo, como Comprimir imagen de ConvertorLab. Compara el resultado con el original a tamaño completo antes de publicar.

¿Qué formato conviene usar?

• WebP para fotos y gráficos. Google dice que WebP con pérdida pesa entre un 25 y un 34% menos que JPEG comparables, y WebP sin pérdida un 26% menos que PNG. Todos los navegadores principales actuales lo admiten.
• SVG para logotipos, íconos e ilustraciones simples.
• JPG como respaldo, o cuando tu plataforma no acepta WebP.
• PNG solo cuando necesites calidad sin pérdida o transparencia y no puedas usar WebP.

Nuestra explicación sobre qué es un archivo WebP cubre la compatibilidad con navegadores y apps. Para convertir archivos existentes, usa el convertidor de imagen a WebP.

Cómo cambiar el tamaño de las imágenes para tu sitio web, paso a paso

1. Guarda tus archivos originales de alta resolución en una carpeta aparte. Nunca edites la única copia.
2. Recorta cada imagen con la forma que usa tu diseño, como 16:9 para banners o 1:1 para tarjetas.
3. Cambia el tamaño al ancho objetivo. La herramienta Cambiar tamaño de imagen fija un ancho exacto o el lado más largo para todo un lote y puede generar WebP o JPG.
4. Comprime al peso objetivo y luego revisa algunas imágenes a tamaño completo para detectar manchas o bandas.
5. Renombra los archivos con nombres cortos, descriptivos y en minúsculas, como oak-dining-table.webp.
6. Sube las imágenes y agrega texto alternativo descriptivo en tu CMS.

Muchas plataformas cambian el tamaño y convierten las imágenes al subirlas. Aun así, sube un archivo de tamaño razonable. Ahorra almacenamiento y le da a la plataforma un buen punto de partida.

Imágenes adaptables, carga diferida y cómo revisar la velocidad

Cómo cargan las imágenes importa tanto como su tamaño. Unos cuantos hábitos de HTML hacen la mayor parte del trabajo:

• Agrega loading="lazy" a las imágenes que están más abajo en la página, para que el navegador espere hasta que el lector se acerque a ellas.
• No apliques carga diferida a la imagen principal. La guía para optimizar el LCP de web.dev dice que nunca hay que aplicar carga diferida a la imagen LCP, y sugiere usar fetchpriority="high" en su lugar.
• Define siempre los atributos width y height en las imágenes. El navegador reserva el espacio, así que el texto no salta mientras carga la página.
• Para imágenes que se muestran en tamaños muy distintos en celulares y computadoras, ofrece varias versiones con srcset y sizes. La guía de imágenes adaptables de MDN explica la sintaxis paso a paso.

Para encontrar las peores, analiza tu página con PageSpeed Insights o con el panel Lighthouse de las herramientas para desarrolladores de Chrome. Señalan imágenes más grandes que su tamaño de visualización, imágenes que podrían usar un formato moderno e imágenes fuera de pantalla que deberían cargarse de forma diferida. También puedes abrir la pestaña Red, filtrar por Img y ordenar por tamaño. Todo lo que aparezca arriba y pese más de unos cientos de KB merece que le cambies el tamaño primero.

Preguntas frecuentes