Guías

Imágenes para una web rápida: tamaño, formato y buenas prácticas

Las imágenes suelen representar más de la mitad del peso de una página web. Si no las preparas, tu sitio carga lento, los visitantes se van y los buscadores lo notan. La buena noticia es que optimizar imágenes es una de las mejoras más simples y con mayor impacto. Esta guía reúne una receta práctica.

Por qué importan las imágenes en la velocidad

Una página con diez fotos de 4 MB obliga al visitante a descargar 40 MB, algo muy lento en un teléfono con datos móviles. Un tiempo de carga alto aumenta el abandono y perjudica la experiencia. Los buscadores consideran la velocidad como un factor de calidad, especialmente en móviles.

Reducir el peso de las imágenes no requiere conocimientos técnicos: basta con aplicar unos criterios sencillos de forma constante.

Dimensiones: no subas más píxeles de los que se muestran

La causa más habitual de imágenes pesadas es subir la foto tal como sale de la cámara. Si en tu página la imagen se muestra con 800 píxeles de ancho, subir una de 4000 no mejora nada visible y multiplica el peso. Calcula el ancho máximo que ocupará en pantalla y sube una versión con ese ancho, o el doble si quieres nitidez en pantallas de alta densidad.

Valores orientativos: imagen principal de portada, 1600 a 1920 píxeles; imágenes de artículo, 1000 a 1200; miniaturas de producto, 400 a 600; iconos, lo mínimo necesario.

Peso objetivo por tipo de imagen

Como objetivo razonable, una imagen de portada debería quedar por debajo de 200 a 300 KB, las imágenes de contenido entre 60 y 150 KB y las miniaturas por debajo de 40 KB. No son límites estrictos, sino metas que mantienen una página de tamaño total manejable, idealmente por debajo de 1 a 2 MB.

Usa la herramienta de comprimir imagen o la de peso exacto para acercarte a estos valores revisando que la calidad siga siendo buena.

Formato adecuado

Elige WebP o JPG para fotografías, PNG o WebP para gráficos con transparencia y SVG para logotipos e iconos vectoriales, que se ven nítidos a cualquier tamaño y pesan muy poco. Evita los GIF animados pesados: un vídeo corto en formato moderno suele ser mucho más ligero.

Ponle a cada imagen un nombre descriptivo en minúsculas y con guiones, por ejemplo 'zapatillas-running-azules.webp', mejor que 'IMG_2043.jpg'.

Carga diferida y texto alternativo

Las imágenes que quedan fuera de la pantalla inicial no necesitan cargarse al abrir la página. El atributo de carga diferida del navegador permite que se descarguen solo cuando el visitante se acerca a ellas. Para la imagen principal, que se ve de inmediato, no apliques esa carga diferida.

Incluye siempre un texto alternativo que describa la imagen. Ayuda a personas con lectores de pantalla, aparece si la imagen no carga y da contexto a los buscadores.

Una receta para empezar hoy

Primero, redimensiona tus imágenes al ancho que realmente usarás. Segundo, conviértelas a WebP o JPG con calidad entre 75 y 85. Tercero, verifica que cada una cumpla el peso objetivo. Cuarto, nómbralas con claridad y agrega texto alternativo. Quinto, prueba tu página en un teléfono con conexión normal.

Haz este proceso cada vez que publiques contenido nuevo y, si tu sitio ya tiene muchas imágenes pesadas, empieza por las de las páginas más visitadas.

Probar la herramienta: Comprimir imagen

Preguntas frecuentes

Más guías