• Saltar a la navegación principal
  • Saltar al contenido principal
  • Saltar a la barra lateral principal

DecodeCMS

Tu WordPress a otro Nivel ...

  • Acerca de
  • Contacto
  • Inicio
  • Tutoriales
    • Themes
    • Plugins
    • Core
    • Recursos
  • Cursos
  • Acceder
    • Mis cursos
    • Mi Cuenta
    • Acceder
Inicio / Tutoriales / Core / Usar imágenes WebP en WordPress

Usar imágenes WebP en WordPress

Usar imágenes WebP en WordPress

[ 27 abril 2021 ] [ Autor: Jhon Marreros Guzmán ][ Core - Intermedio] [ ]

funcionalidad imagen

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Una de las optimizaciones básicas de todo sitio web tiene que ver con el tamaño de las imágenes, WebP es un formato moderno para las imágenes, alternativo a .jpg, .png y que permite reducir el tamaño hasta un 30% sin pérdida apreciable de calidad.

 

Generalidades

El formato WebP es un formato de imagen desarrollado por Google, en un estudio de compresión de imágenes llevado a cabo por Google se concluyó que .webp tiene una reducción mayor que los formatos .jpg y .png sin pérdida notable de la calidad, debido a esto se esta popularizando su uso para optimizar la carga de sitios web.

Si quieres aprender más sobre este nuevo formato puedes leer la documentación oficial

 

WordPress y Webp

A la fecha actual, WordPress aún no soporta por defecto el formato .webp, si tratamos de subir una imagen .webp a WordPress aparecerá un mensaje similar a lo que se muestra en la siguiente imagen:

Mensaje de error al subir una imagen webp

 

Habilitar el formato .webp en WordPress

Existen diferentes plugins que te permiten habilitar el formato webp en un sitio web WordPress, sin embargo en este artículo veremos cómo realizarlo a través de código.

En un artículo anterior habíamos visto cómo habilitar el formato .svg en WordPress, el código es similar para habilitar el formato .webp y futuros formatos que puedan aparecer.

function dmc_add_webp_mime_types( $mimes ) {
	$mimes['webp'] = 'image/webp';
	return $mimes;
}
add_filter('mime_types', 'dmc_add_webp_mime_types');
Puedes agregar este código al final de tu archivo functions.php de tu tema hijo

 

Soporte en Navegadores

Hoy en día las versiones actuales de los principales navegadores, tanto para versiones de escritorio y para móvil ya soportan .webp.

Puedes revisar el soporte de este formato en los navegadores en este enlace

Sin embargo si tienes imágenes específicas en .webp que quieres usar en versiones antiguas de los navegadores, tendrías que cargar también la imagen en un formato .jpg o .png, por ejemplo con el siguiente código:

<picture>
<source srcset="img.webp" type="image/webp">
<source srcset="img.jpg" type="image/jpeg">
<img src="img.jpg">
</picture>
Evidentemente si tienes muchas imágenes tendrías que evaluar un plugin para realizar esta conversión y generación de código de forma automática.

 

Conclusión

Como has podido comprobar, actualmente WordPress no soporta aún WebP, sin embargo es suficientemente flexible como para agregar el soporte a este nuevo formato a través de código.

 
¿Aún con dudas?, en el siguiente video se detallan los puntos anteriores

Suscríbete a DecodeCMS:  

 

¿Me ayudas a llegar a más gente?

Twittear Compartir LinkedIn WhatsApp

Artículos Relacionados

  • Cómo usar imágenes SVG en WordPressCómo usar imágenes SVG en WordPress
  • Cómo usar el Modo de Recuperación de WordPressCómo usar el Modo de Recuperación de WordPress
  • Página de inicio y página de entradasPágina de inicio y Página de entradas en WordPress
  • nube de etiquetas en WordPressPersonalizar nube de etiquetas en WordPress
Valora este artículo : 1 barra2 barras3 barras4 barras5 barras (5 votos, promedio: 4,40 de 5)
Cargando...

Interacciones con los lectores

Comentarios

  1. Adry

    12 mayo, 2021

    Gracias!!! Muy buen dato!!! (para los que consideramos que “Menos (plugins) es Más”!!!

  2. Richard

    30 mayo, 2021

    Aun no me sube, que crees que pueda ser?

    • Jhon Marreros Guzmán

      1 junio, 2021

      Tal vez tengas algún conflicto con algún plugin o con el theme, prueba ir desactivando plugins y verifica.

  3. Oscar

    7 enero, 2023

    Hola, soy nuevo configurando páginas. Quiero subir estás imágenes sin plugin, uso el menú de WordPress. Dónde puedo añadir este código o como puedo seguir está instrucción desde este menú? Gracias

    • Jhon Marreros Guzmán

      7 enero, 2023

      Hola, el código se agrega en el archivo functions.php o usando algún plugin de snippets, revisa el video. También puedes revisar: https://decodecms.com/agregar-codigo-a-tu-sitio-sin-usar-functions-php/

Para escribir código envolver con: <pre class="language-xxx"><code> </code></pre> ,reemplaza las xxx (php, css, html)

*

* Gravatar habilitado

Barra lateral principal

Presentación

Curso Decodifica WordPress

Únete a DecodeCMS

Recibirás como regalo:

Guia práctica con video:
¿Quieres agregar código a WordPress? Revisa las diferentes opciones que tienes.Ver más

Jooble
Alojamiento Wordpress

Niveles

Básico Intermedio Avanzado

Etiquetas

accesibilidad css dashboard editor error funcionalidad herramientas imagen js librería mejoras optimización seguridad social woocommerce

Populares

Agregar login y logout en un menú de WordPress

Agregar super administrador a multisitio de WordPress

Cómo duplicar un Widget en WordPress con Javascript

Restringir productos por país en WooCommerce a través de código

© logo decode pie
Política de Privacidad | Política de devoluciones
Copyrigth 2023 Todos los derechos reservados