Cómo implementar WebP en tu sitio con soporte para navegadores antiguos

📅 Enero 2026 ⏱ 7 min de lectura

Ya convertiste tus imágenes a WebP y estás listo para usarlas en producción. Pero ¿qué pasa con los usuarios que aún usan navegadores más viejos? En esta guía te mostramos cómo servir WebP a los navegadores modernos y mantener una alternativa para el resto.

Estado actual del soporte WebP (2026)

En 2026, WebP tiene soporte prácticamente universal. Chrome lo adoptó en 2014, Firefox en 2019, Safari en 2020 (versión 14) y Edge en su versión Chromium. Según caniuse.com, más del 97% de los usuarios globales puede ver imágenes WebP sin ningún problema.

Para la mayoría de los sitios, implementar un fallback no es estrictamente necesario. Pero si tu audiencia incluye usuarios corporativos con IE, Safari muy antiguo en iOS, o si trabajás en mercados donde los dispositivos más viejos son comunes, vale la pena.

✅ Recomendación rápida: Para sitios nuevos en 2026, podés usar WebP directamente con <img src="imagen.webp"> sin fallback. Si el 3% de incompatibilidad te preocupa, usá el Método 1 (etiqueta picture).

Método 1: La etiqueta <picture> de HTML5

RECOMENDADO

La forma más limpia y estándar de implementar WebP con fallback es la etiqueta <picture>. El navegador elige el primer formato que soporta, de arriba hacia abajo:

<picture>
  <source srcset="imagen.webp" type="image/webp">
  <source srcset="imagen.jpg" type="image/jpeg">
  <img src="imagen.jpg"
       alt="Descripción de la imagen"
       width="800" height="600"
       loading="lazy">
</picture>

Con este código, los navegadores que soportan WebP cargan imagen.webp. Los que no, cargan imagen.jpg. El atributo loading="lazy" agrega carga diferida. Los atributos width y height evitan saltos de layout (CLS).

Para imágenes responsive (diferentes tamaños según el ancho de pantalla), podés usar srcset con múltiples versiones:

<picture>
  <source
    srcset="imagen-400.webp 400w, imagen-800.webp 800w, imagen-1200.webp 1200w"
    type="image/webp">
  <img
    src="imagen-800.jpg"
    srcset="imagen-400.jpg 400w, imagen-800.jpg 800w, imagen-1200.jpg 1200w"
    sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
    alt="Descripción"
    width="800" height="600"
    loading="lazy">
</picture>

[ Publicidad ]

Método 2: Configuración .htaccess para Apache (Hostinger)

IDEAL PARA HOSTINGER

Si usás Apache (que es lo que usa Hostinger por defecto), podés configurar el servidor para servir automáticamente la versión WebP cuando el navegador la soporta, sin cambiar nada en el HTML. El servidor detecta si el navegador envía image/webp en el header Accept y sirve el WebP si existe.

Creá o editá el archivo .htaccess en la raíz de tu public_html y agregá esto:

<IfModule mod_rewrite.c>
  RewriteEngine On

  # Servir WebP si el navegador lo soporta y el archivo existe
  RewriteCond %{HTTP_ACCEPT} image/webp
  RewriteCond %{REQUEST_FILENAME} (.*)\.(jpe?g|png)$
  RewriteCond %1.webp -f
  RewriteRule ^ %1.webp [L,T=image/webp]
</IfModule>

<IfModule mod_headers.c>
  Header append Vary Accept env=REDIRECT_accept
</IfModule>

AddType image/webp .webp

Con esta configuración, si subís foto.jpg y foto.webp a la misma carpeta, el servidor automáticamente sirve foto.webp a Chrome/Firefox/Safari modernos y foto.jpg al resto. Sin tocar el HTML.

Método 3: CSS para imágenes de fondo

Si usás imágenes WebP como fondo con CSS en lugar de etiquetas <img>, podés detectar soporte con JavaScript y aplicar clases:

// Detectar soporte WebP y agregar clase al <html>
(function() {
  var webP = new Image();
  webP.onload = webP.onerror = function() {
    document.documentElement.classList.add(
      webP.height === 2 ? 'webp' : 'no-webp'
    );
  };
  webP.src = 'data:image/webp;base64,UklGRjoAAABXRUJQVlA4IC4AAACyAgCdASoCAAIALmk0mk0iIiIiIgBoSygABc6WWgAA/veff/0PP8bA//LwYAAA';
})();

Luego en tu CSS:

/* Para navegadores con soporte WebP */
.webp .hero-section {
  background-image: url('hero.webp');
}

/* Fallback para navegadores sin soporte */
.no-webp .hero-section {
  background-image: url('hero.jpg');
}

Método 4: Plugins de WordPress

Si usás WordPress en Hostinger, hay plugins que manejan todo esto automáticamente al subir imágenes:

ShortPixel Image Optimizer: convierte y sirve WebP automáticamente. Tiene plan gratuito con 100 imágenes/mes.
Smush: optimización de imágenes con soporte WebP. Incluye lazy loading automático.
WebP Express: específicamente diseñado para Apache/Nginx con fallback automático.
EWWW Image Optimizer: conversión local sin API externa, plan gratuito generoso.

¿Cuál método elegir?

Sitio estático en Hostinger: Método 2 (.htaccess) — automático, sin tocar el HTML.
Sitio HTML donde controlás el código: Método 1 (etiqueta picture) — más explícito y portable.
Imágenes de fondo en CSS: Método 3 (detección JS).
WordPress: Método 4 (plugin) — la opción más cómoda.

Conclusión

Implementar WebP con fallback no es complicado y los beneficios son inmediatos: páginas más rápidas, mejor LCP y menor consumo de datos para tus visitantes. El Método 1 (etiqueta picture) es el más universal y el que Google recomienda en su documentación de PageSpeed. Si usás Hostinger con un sitio estático, el Método 2 (.htaccess) es el más transparente porque no requiere cambios en el HTML existente.

Primer paso: convertir tus imágenes

Antes de implementar WebP en tu sitio, necesitás convertir tus imágenes. Es gratis, instantáneo y sin registro.

Convertir imágenes a WebP →