--- title: "Optimización de WebP para SEO - Carlos Sánchez" description: "En este post explico qué es el formato WebP y cuáles son sus ventajas e inconvenientes desde el punto de vista del SEO" author: "Carlos Sánchez" url: https://carlossanchezdonate.com/articulo/la-extension-webp/ image: https://carlossanchezdonate.com/wp-content/uploads/og-webp-post.jpg --- # La extensión Webp ¿Cómo afecta WebP al SEO? ![La extensión Webp](https://carlossanchezdonate.com/wp-content/uploads/cover-webp-post.jpg) **Autor:** : [Carlos Sánchez](https://carlossanchezdonate.com/sobre-mi/) **Temática: ** : [Multimedia](https://carlossanchezdonate.com/seo-avanzado/multimedia/) , : [WPO](https://carlossanchezdonate.com/seo-avanzado/rendimiento-velocidad/) **Fecha de publicación:** : 2022-03-03 **Última revisión:** : 2026-03-02 **Índice** mostrar 1 ¿Qué es el formato WebP? 2 Cómo afecta el formato WebP al SEO 3 Conclusiones 4 Bibliografía A la hora de comprimir imágenes, un planteamiento habitual suele ser cambiar el formato de imagen a WebP. De hecho, cuando utilizamos herramientas como LightHouse o PageSpeed Insights, es una recomendación que nos suelen hacer. ![Web vitals con WebP](https://carlossanchezdonate.com/wp-content/uploads/web-vitals-webp.jpg) Uno de los formatos de nueva generación más conocidos es WebP. Pero ¿Qué es el formato WebP y cuáles son sus ventajas e inconvenientes? ## ¿Qué es el formato WebP? El formato WebP es un formato de imagen (como pueden ser jpg o png), desarrollado por Google  (de ahí que se recomiende tanto en las herramientas desarrolladas por y para Google). ** WebP es un formato de imagen moderno que proporciona una mejor compresión sin pérdida y con pérdida para imágenes en la web. Usando WebP, los webmasters y los desarrolladores web pueden crear, imágenes mejores sin perder velocidad en la web. Google ## Cómo afecta el formato WebP al SEO Como hemos visto, el formato WebP nos permite tener imágenes con una mejor calidad/peso que en otros formatos, lo que nos permite mejorar los tiempos de carga para los usuarios de la web, mientras que aporta la misma experiencia de calidad. Aquí muestro un ejemplo de cómo varía el peso de cada imagen según su formato: ![Archivo BMP](https://sanchezdonate.com/wp-content/uploads/archivo-bmp.bmp) BMP 742KB ![Archivo PNG](https://sanchezdonate.com/wp-content/uploads/archivo-png.png) PNG 226KB ![Archivo JPG](https://sanchezdonate.com/wp-content/uploads/archivo-jpg.jpg) JPG 53,7KB ![](https://sanchezdonate.com/wp-content/uploads/archivo-webp.webp) WEBP 44,4KB Todo esto es sin duda una grandísima ventaja, entonces ¿Por qué se siguen usando los formatos JPG y PNG en la web? Pues, al ser una tecnología relativamente moderna en comparación con otros formatos de imágenes, ya que fue anunciada en el año 2010 y tuvo su salida en el 2018, hasta hace poco la mayoría de los navegadores no soportaban el formato y solo servía para Chrome. Actualmente muchos navegadores, incluyendo Safari, tienen compatibilidad con este formato de imagen. > Actualización 22/10/2024: Actualmente todos los navegadores comunes menos IE (que está depreciado) lo leen con normalidad Información extraída de la web [CanIUse](https://caniuse.com/webp#webp) En cualquier caso, se recomienda poner una imagen alternativa en un formato clásico para que todos los navegadores sean capaces de procesar la imagen y que no haya problemas de compatibilidades que desemboquen en una mala experiencia del usuario. Una implementación correcta, sería por medio de la etiqueta [picture](https://carlossanchezdonate.com/articulo/etiqueta-picture/): ` ![Texto Alternativo](img/ejemplo.jpg) ` ## Conclusiones El WebP es un formato a tener en cuenta ya no a medio-largo plazo, sino en el presente. Sin embargo debemos tener en cuenta que aunque queda poco, sigue sin ser compatible para todos los navegadores. Por lo que sería una mala idea dejar a un usuario con una imagen en blanco (por suerte existen los textos alternativos). Entonces, siempre y cuando implementemos WebP con la etiqueta picture, es una buena implementación. Para meter WebP por medio de base64 en un SVG, o para meterlo por medio de [CSS](https://carlossanchezdonate.com/articulo/css-posicionamiento-web/) en un background, o para meterlo en una etiqueta , es demasiado pronto. ## Bibliografía - [Google desarrolla WebP como código abierto](https://developers.google.com/speed/webp/faq#why_did_google_release_webp_as_open_source). - [Safari tiene problemas para procesar WebP en versiones antiguas.](https://caniuse.com/webp) (Antiguo) - [Documentación oficial de Webp](https://developers.google.com/speed/webp/faq) Si te gusta este artículo, me ayudarías un montón compartiendo mi contenido: Compartir: [![Compartir en LinkedIn](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/linkedin.svg)](https://www.linkedin.com/cws/share/?url=https://carlossanchezdonate.com/articulo/la-extension-webp/) [![Compartir en Twitter](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tw.svg)](https://twitter.com/intent/tweet?url=https://carlossanchezdonate.com/articulo/la-extension-webp/) [![Compartir en Facebook](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/facebook.svg)](https://www.facebook.com/sharer/sharer.php?u=https://carlossanchezdonate.com/articulo/la-extension-webp/) [![Compartir en WhatsApp](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/whatsapp.svg)](whatsapp://send?text=https://carlossanchezdonate.com/articulo/la-extension-webp/) [![Compartir en Telegram](https://carlossanchezdonate.com/wp-content/themes/sanchezdonate/images/rrss/tlg.svg)](https://telegram.me/share/url?url=https://carlossanchezdonate.com/articulo/la-extension-webp/) No se te da mal el SEO Técnico Te falta mi máster**. Accede a una formación avanzada que te permitirá aplicar e implementar SEO en cualquier tipo de WEB [¡Accede al Máster de SEO Técnico!](/master-seo-tecnico/) Tal vez te interesen otros artículos: [Artículos de SEO](/seo-avanzado/) [SXO como especialidad](https://carlossanchezdonate.com/articulo/sxo-especialidad-seo/) [Sitemaps](https://carlossanchezdonate.com/articulo/sitemaps/) [Curación de enlaces en el SEO](https://carlossanchezdonate.com/articulo/curacion-de-enlaces-en-el-seo/) [Texto alternativo para imágenes](https://carlossanchezdonate.com/articulo/alt-imagenes/) [Rich Snippets con HTML](https://carlossanchezdonate.com/articulo/rich-snippets-sin-datos-estructurados/)