Optimización de imágenes para Web: guía completa

Las cargas lentas de páginas acaban con las conversiones. Los estudios muestran que el 40% de los usuarios abandonan un sitio que tarda más de 3 segundos. ¿La causa más importante? Imágenes no optimizadas. Una sola foto de 5 MB en tu página de inicio puede aumentar el tiempo de carga incluso en conexiones rápidas.

La lista de verificación de optimización de imágenes

1. Dimensiones correctas: no envíes una imagen de 4000 px donde se muestran 800 px
2. Formato correcto: WebP/AVIF moderno, JPG/PNG alternativo
3. Compresión correcta: entre un 75 % y un 85 % de calidad para las fotografías, sin pérdidas para los gráficos
4. Entrega correcta: carga diferida, srcset responsivo

Dimensiones recomendadas en 2026

• Imágenes principales: 1920×1080 (Full HD) o 2560×1440 (2K) máx.
• Héroe de la publicación del blog: 1200×675 (16:9)
• Fotos del producto: 1500×1500 con soporte de zoom, pantalla predeterminada de 800×800
• Avatares: 256×256 (las miniaturas se reducirán)
• Open Graph (compartir en redes sociales): 1200×630
• Favicon: 32×32, 192×192, 512×512 PNG

Cambie el tamaño de las fotos a estas dimensiones con nuestra herramienta de cambio de tamaño de imágenes antes de cargarlas.

Formatos: cuándo usar qué

• WebP: Valor predeterminado para el 95 % de las imágenes web. Entre un 25% y un 35% más pequeño que JPG con la misma calidad. Compatibilidad con navegador universal.
• AVIF: Incluso más pequeño (50% más pequeño que JPG). Úselo para imágenes de héroes. Los navegadores más nuevos lo admiten.
• JPG: Fotografías sin transparencia. Excelente compatibilidad.
• PNG: Logotipos, capturas de pantalla, cualquier cosa con transparencia. Sin pérdidas.
• SVG: Gráficos vectoriales, iconos, ilustraciones sencillas. Tamaño de archivo minúsculo, escala infinita.

Convierta entre estos formatos con PDF7 Image Convert.

Compresión: ¿qué tan agresivo es demasiado agresivo?

Para fotografías: comience con una calidad del 85 %. Baje al 75% para páginas críticas para el ancho de banda. Por debajo del 70 %, los artefactos se vuelven visibles. Utilice nuestra herramienta de compresión de imágenes para encontrar el equilibrio adecuado.

Imágenes responsivas con srcset

No entregue una imagen 2K a un teléfono. Utilice el atributo srcset de HTML:

El navegador elige la imagen más pequeña que se ajuste. Necesitarás 3 tamaños por imagen.

Carga diferida

Agregue loading="lazy" a todas las imágenes en la mitad inferior de la página. Los navegadores modernos no los cargan hasta que el usuario se acerca, ahorrando ancho de banda en cada carga de página.

La regla de los 100 KB

Apunte a imágenes individuales de menos de 100 KB. Las imágenes heroicas pueden extenderse hasta 200 KB. Si una sola foto tiene más de 500 KB, te has equivocado: cambia el tamaño y vuelve a comprimir.