Guía de imágenes para tu web: qué formato usar y de qué tamaño

Casi todas las webs lentas que revisamos tienen el mismo culpable, y no es el código: son las imágenes. Una foto sacada del móvil y subida tal cual pesa lo que treinta páginas enteras de texto. Multiplicado por los diez productos que se cargaron esa tarde, el sitio pasa de abrir en un segundo a abrir en ocho.

La buena noticia es que arreglarlo no requiere saber diseño ni programación. Requiere tres decisiones: qué formato, qué tamaño y qué peso. Esta guía las explica en lenguaje corriente, para que quien sube el contenido —que muchas veces no es quien hizo la web— pueda decidir sin preguntar.

Primero, la regla corta

Si solo te llevas una cosa de aquí, que sea esta:

• ¿Es una fotografía? → WebP, y si no puedes, JPG.
• ¿Necesita fondo transparente o tiene texto y bordes nítidos? → PNG, o mejor WebP si la herramienta lo permite.
• ¿Es un logo, un icono o un gráfico de líneas? → SVG.

Con eso resuelves el noventa por ciento de los casos. El resto de la guía es el porqué y los detalles.

Los formatos, uno por uno

JPG (o JPEG), el de toda la vida

Es el formato de las fotografías desde hace treinta años. Comprime tirando información que el ojo no suele notar, así que cuanto más lo comprimes, menos pesa y peor se ve. En fotos normales aguanta muy bien.

Su límite: no admite transparencia. Si guardas un logo en JPG, lo que era fondo transparente se convierte en un rectángulo blanco que se nota en cuanto lo pones sobre cualquier color que no sea blanco.

Úsalo para: fotos, cuando no puedas usar WebP.

PNG, el de los fondos transparentes

El PNG guarda la imagen sin perder ni un píxel, y admite transparencia. Eso lo hace perfecto para logos, capturas de pantalla y cualquier gráfico con texto o líneas rectas, que en JPG salen con un halo sucio alrededor.

Su límite es el contrario: para fotografías pesa muchísimo. Un paisaje en PNG puede ocupar diez veces lo que el mismo paisaje en JPG sin verse mejor. Es el error más común que encontramos.

Úsalo para: transparencias, capturas de pantalla, gráficos con texto.

WebP, el que deberías usar por defecto

Es el formato que sustituye a los dos anteriores. Hace lo que hace el JPG y lo que hace el PNG —incluida la transparencia— con alrededor de un 30 % menos de peso para la misma calidad, según las pruebas de Google.

La pregunta que siempre nos hacen: ¿lo van a ver mis clientes? Sí. Lo admiten todos los navegadores actuales, incluido Safari desde 2020. Ya no es una apuesta.

Úsalo para: casi todo. Es la opción por defecto.

AVIF, el más ligero

Es el más nuevo y el que más comprime: en fotos grandes y en degradados suele bajar bastante más que WebP. A cambio, tarda más en generarse y algunas herramientas antiguas todavía no lo exportan.

Lo admiten todos los navegadores modernos —el último en sumarse fue Safari, en 2023—, y los sitios bien construidos lo sirven a quien puede verlo y sirven WebP al resto, automáticamente.

Úsalo para: fotos grandes, si tu herramienta lo permite. Si no, no pasa nada: WebP está muy bien.

SVG, el que nunca se pixela

El SVG no guarda píxeles, guarda instrucciones de dibujo. Por eso se ve nítido a cualquier tamaño, en un móvil y en una pantalla de sala de juntas, y suele pesar unos pocos kilobytes.

Es el formato correcto para tu logotipo. Si tu agencia solo te entregó el logo en JPG o PNG, pídeselo en SVG: es tuyo y lo vas a necesitar cada vez que cambies algo. Lo contamos entero —incluido por qué el que exportan pesa diez veces lo necesario— en qué es un SVG y por qué usarlo.

Úsalo para: logotipos, iconos, ilustraciones de líneas, gráficos sencillos. No lo uses para: fotografías, porque no es lo que es.

Y el GIF

Para animaciones cortas hoy hay opciones mucho mejores —un vídeo o un WebP animado pesan una fracción—. El GIF sigue siendo útil para una cosa: que alguien lo pueda compartir por WhatsApp sin pensar.

¿Qué tamaño debe tener cada imagen?

Aquí conviene entender una sola idea: las pantallas de hoy tienen el doble de puntos que hace unos años. Por eso una imagen que se ve a 600 píxeles de ancho necesita subirse a unos 1200 para verse nítida. El doble, no más — subir una foto de 6000 píxeles para mostrarla en 600 no la mejora, solo la hace pesada.

Si tienes curiosidad por la tuya, esta página te dice la densidad de tu pantalla —el 1×, 2× o 3× del que hablamos— además de su resolución.

Medidas que funcionan en la mayoría de sitios:

• Hero o cabecera grande: 2400 × 1200 px (relación 2:1). No hace falta pasar de 2560 px de ancho nunca.
• Portada de artículo o tarjeta: 1200 × 675 px (16:9). Es la misma proporción del vídeo, así que encaja en casi todas las plantillas.
• Foto de producto: 1600 × 1600 px (cuadrada). El cuadrado es el formato más seguro para catálogos, porque todos los productos ocupan lo mismo en la cuadrícula aunque unos sean altos y otros anchos.
• Foto de equipo o retrato: 800 × 800 px.
• Logotipo: SVG. Si tiene que ser PNG, 512 px de ancho con fondo transparente.
• Imagen para compartir en redes: 1200 × 630 px. Es la medida que usan casi todas las plataformas para la vista previa de un enlace.

Si necesitas recortar respetando una proporción y no quieres hacer cuentas, tenemos una calculadora de relación de aspecto que hace justo eso.

Lo importante no es acertar al píxel, es acertar la proporción. Si tu plantilla espera una imagen apaisada y subes una vertical, el sistema la va a recortar por donde pueda — y ahí es donde a la gente le cortan la cabeza en las fotos de equipo.

¿Cuánto debería pesar?

Como referencia práctica, y sabiendo que cada sitio es distinto:

• Cabecera grande: por debajo de 200 KB.
• Foto de producto o de artículo: por debajo de 150 KB.
• Miniaturas y tarjetas: por debajo de 80 KB.
• Logotipo en SVG: unos pocos KB.

Si una sola imagen pesa más de medio megabyte, algo se puede mejorar casi seguro. Y si pesa más de dos, es una foto que salió del móvil sin pasar por ningún sitio.

No es una cuestión de perfeccionismo: el tiempo que tarda tu página en aparecer forma parte de la experiencia que se lleva quien te visita, y de lo que el buscador mide.

Los cinco errores que más vemos

1. Subir la foto directa del móvil o de la cámara. Son imágenes pensadas para imprimir: 4000 o 6000 píxeles de ancho y varios megabytes. Redimensiónalas antes.
2. Guardar fotografías en PNG. Pesan varias veces más sin verse mejor.
3. Guardar el logo en JPG. Aparece el rectángulo blanco en cuanto el fondo no es blanco.
4. Meter texto dentro de la imagen. No se puede traducir, no lo lee un buscador, no lo lee quien usa un lector de pantalla, y se ve borroso en cuanto la imagen se reescala. Si el texto importa, que sea texto.
5. Ampliar una imagen pequeña. Una foto de 400 px estirada a 1200 no gana detalle: gana desenfoque. Si no tienes el original grande, es mejor usarla pequeña.

Antes de subir: treinta segundos bien invertidos

• Recorta a la proporción que espera la plantilla.
• Redimensiona al doble del tamaño en que se va a ver.
• Exporta en WebP si puedes; si no, JPG para fotos y PNG para transparencias.
• Comprime hasta donde la imagen aguante sin que se note.
• Nombra el archivo con palabras de verdad: silla-oficina-ergonomica-negra.webp, no IMG_20250610_0043.jpg. El nombre también se lee.
• Escribe el texto alternativo: una frase describiendo lo que se ve. Es lo que oye alguien que no puede ver la imagen y lo que entiende el buscador.

Una herramienta gratuita que hace los cuatro primeros pasos

Squoosh es la que recomendamos cuando alguien nos pregunta por dónde empezar. Es gratuita, no pide cuenta y funciona dentro del navegador: arrastras la imagen, eliges el formato de salida —JPG, PNG, WebP o AVIF—, ajustas el tamaño y la calidad, y descargas.

Tiene dos cosas que la hacen especialmente útil aquí:

• Enseña el resultado antes de descargarlo. Muestra la imagen original y la comprimida lado a lado, con el peso final de cada una. Puedes bajar la calidad hasta el punto justo antes de que empiece a notarse, que es exactamente lo que hay que hacer y lo que nadie sabe calcular a ojo.
• Las imágenes no salen de tu ordenador. Todo el proceso ocurre en tu propio navegador; no se suben a ningún servidor. Para fotos de producto sin publicar, o material bajo acuerdo de confidencialidad, la diferencia no es menor.

Un flujo típico completo son dos minutos: abrir Squoosh, arrastrar la foto, poner el ancho que toque, elegir WebP, bajar la calidad hasta rozar los 150 KB, descargar y subir. Con eso ya has hecho el noventa por ciento del trabajo que esta guía describe.

Una tranquilidad final

Si tu sitio está bien construido, buena parte de esto lo hace solo: genera las versiones en varios tamaños, las convierte a WebP o AVIF según lo que admita cada navegador, y carga primero lo que se ve. Tu trabajo se reduce a subir un original con la proporción correcta, con suficiente resolución y sin exagerar el peso.

Eso sí: ninguna herramienta puede arreglar una foto mal recortada, un logo sin transparencia o un texto incrustado en un JPG. Esa parte sigue siendo humana, y son treinta segundos por imagen.