Preskoči na sadržaj
BeoHosting
BeoHosting

10 min

Cómo optimizar imágenes para la web

WebP, AVIF, lazy loading, CDN y srcset.

BeoHosting Tim

10+ godina iskustva — Stručnjaci za web hosting i infrastrukturu

Poslednje ažurirano:

Las imágenes suelen suponer el 60-80 % del peso total de una página. Optimizarlas es la mayor mejora de rendimiento que puedes conseguir. WebP y AVIF reducen el tamaño de archivo entre un 25 % y un 50 % frente a JPEG y PNG sin pérdida visible de calidad, el lazy loading aplaza las imágenes fuera de pantalla y srcset entrega el tamaño adecuado a cada dispositivo. Esta guía cubre cada técnica con ajustes prácticos.

Cómo optimizar imágenes para la web

1

Elige el formato adecuado — WebP/AVIF

WebP: un 25-35 % más ligero que JPEG, compatible con todos los navegadores modernos. AVIF: un 30-50 % más ligero que WebP, pero con compatibilidad aún parcial; úsalo con fallback a WebP/JPEG. PNG solo para transparencias. SVG para logos e iconos.

2

Redimensiona antes de subir

Nunca subas una foto de réflex de 6000x4000 px para mostrarla a 800 px de ancho. Redimensiona a las dimensiones reales de visualización × 2 para pantallas retina. Redimensiona cientos de archivos por lotes con FastStone Photo Resizer.

3

Comprime con herramientas inteligentes

WordPress: ShortPixel, Imagify, Smush, EWWW. Fuera de WordPress: TinyPNG, Squoosh. Apunta a una calidad JPEG del 70-85 %: visualmente idéntica al 100 % pero con un tamaño mucho menor.

4

Activa el lazy loading

Nativo: <img loading="lazy">. WordPress 5.5+ lo añade automáticamente. Para navegadores antiguos, usa la librería JS Lazysizes. El lazy load aplaza las imágenes fuera de pantalla: un enorme empujón a los Core Web Vitals.

5

Usa srcset para imágenes responsive

<img srcset="img-400.jpg 400w, img-800.jpg 800w, img-1600.jpg 1600w" sizes="(max-width: 600px) 400px, 800px"> — el navegador elige el tamaño adecuado. WordPress genera el srcset automáticamente.

6

Sírvelas desde una CDN

Una CDN (Cloudflare, BunnyCDN) sirve las imágenes desde un servidor cercano al visitante: reduce la latencia entre 50 y 200 ms. Cloudflare Polish convierte automáticamente a WebP/AVIF. BeoHosting se integra con la CDN de QUIC.cloud para los usuarios de LiteSpeed Cache.

Spremni da pokrenete svoj sajt?

SSL zaštita
Brzina
24/7 podrška

Pridružite se 4.000+ zadovoljnih korisnika. Besplatna migracija i 15 dana garancije povrata novca.

15 dana garancija povrata novca
Besplatna migracija15 dana garancija24/7 podrška

FAQ

Odgovori na najčešća pitanja o našim uslugama.

WebP tiene compatibilidad universal y reduce el tamaño un 25-35 %. AVIF es aún más ligero (30-50 %) pero falta en algunos navegadores antiguos. Lo mejor: servir AVIF con fallback a WebP y JPEG/PNG como último recurso.

Lo habitual: JPEG → WebP 30 %, PNG → WebP 40 %, WebP → AVIF 30 %. Combinado con el redimensionado, una foto de réflex de 2 MB pasa a 150-300 KB con la misma calidad visual.

No: Google entiende el lazy loading nativo. Solo asegúrate de que las imágenes por encima del pliegue NO tengan lazy loading (deben cargarse de inmediato para el LCP).

ShortPixel por su mejor relación compresión-calidad. Imagify le sigue muy de cerca. Smush es gratuito y suficiente para necesidades básicas. EWWW mantiene los archivos en local, sin API externa.

Los Core Web Vitals son las métricas de experiencia de usuario de Google: LCP (Largest Contentful Paint, tiempo de carga del elemento más grande), CLS (Cumulative Layout Shift, estabilidad visual) e INP (Interaction to Next Paint, interactividad). Las imágenes afectan directamente al LCP porque el elemento más grande de una página suele ser una imagen. Las imágenes optimizadas con atributos de ancho y alto definidos mejoran tanto el LCP como el CLS.

Naše garancije za vaš mir

Zaštićeni ste sa svake strane

15 dana garancije

Vraćamo novac bez pitanja u prvih 15 dana.

Besplatna migracija

Mi prebacimo vaš sajt bez prekida — vi ništa ne radite.

24/7 podrška

Naši stručnjaci su tu 24/7 kroz tikete i live chat.