¿Cómo usar imágenes WebP en WordPress?
Publicado: 2021-11-09Si hay demasiadas imágenes en su sitio, se cargan en formato PNG o JPG. Aprender a usar imágenes WebP en WordPress lo ayuda a reducir el tamaño de archivo de las imágenes y optimizar las imágenes de su sitio para una carga rápida.
¿Qué es WebP?
Debe tener tipos de archivos de imagen ampliamente utilizados como JPEG, JPG y PNG en el pasado. Además de estos tipos básicos de imágenes, también hay otros tipos de archivos de imágenes de los que debe haber oído hablar.
WebP es desarrollado por Google para optimizar las imágenes para una carga rápida. Se enfoca en entregar los archivos de imágenes al reducir el tamaño del archivo. Si usa imágenes regularmente en su sitio y si puede reducir el tamaño de archivo de todas esas imágenes, entonces mejorará significativamente la velocidad de su sitio web.
Si revisa el sitio a través de Pagespeed insights , obtendrá una recomendación para " Servir imágenes en formatos de próxima generación " si aún no lo ha hecho y WebP es uno de esos formatos recomendados.
La compresión de imagen puede ser sin pérdida o con pérdida. La imagen PNG es un buen ejemplo de compresión sin pérdidas. Durante la compresión sin pérdida, las imágenes comprimidas pierden menos calidad en comparación con la compresión con pérdida. En realidad, la compresión en imágenes sin pérdida ocurre al reducir los bits de datos no deseados que están presentes en las imágenes. Por esta razón, si es necesario, puede descomprimirlo para recuperar la imagen original.
Por otro lado, las imágenes con pérdida tienen un tamaño de archivo más pequeño que las imágenes sin pérdida, ya que elimina bits de datos de forma permanente de las imágenes. Como resultado, la calidad se ve comprometida en la compresión de archivos JPG/JPEG.
El formato de imagen WebP también se puede comprimir al tipo sin pérdida o con pérdida. Sin embargo, evita comprometer la calidad durante la compresión. WebP utiliza codificación predictiva para reducir el tamaño del archivo si usa compresión con pérdida, mientras que en el caso de la compresión sin pérdida, WebP utiliza métodos complejos para comprimir archivos de imagen. Como resultado, la compresión de imágenes WebP es mejor que las compresiones tradicionales PNG/JPG.
Google ya ha dicho que el tamaño del archivo de imagen WebP es un 26% menor que la imagen PNG y también es un 25-34% menor que la imagen JPEG.
Esa es la razón por la que debe aprender a usar imágenes WebP en WordPress siempre que sea posible.
Ventajas y desventajas de las imágenes WebP
Debe tener en cuenta que para que un archivo de imagen WebP funcione, el visitante de la página debe usar el navegador compatible con WebP. Más del 95% de los usuarios utilizan el navegador web compatible con WebP. Los navegadores como Chrome, Firefox, Opera, Microsoft Edge brindan soporte completo a las imágenes WebP.
Las versiones recientes de ios y macOS Safari son compatibles con WebP, mientras que las versiones anteriores no son compatibles con WebP. Además, Internet Explorer no es compatible con la versión WebP de imágenes. Sin embargo, es un alivio que Edge haya reemplazado a IE.
Como ya sabemos, usar imágenes WebP hace que nuestro sitio sea más rápido, pero dado que no es compatible con versiones menores de navegador, ¿será una buena práctica usar WebP en su sitio?
Hacer que su sitio sea más rápido no significa que tenga que entregar contenido no compatible a sus usuarios. Sin embargo, debe entregar imágenes WebP a los navegadores que las admitan. Mientras que si tiene una copia de las imágenes PNG/JPG, puede enviarla a navegadores no compatibles. Esta es la forma correcta de manejar la versión WebP de las imágenes.
¿Cómo usar imágenes WebP en WordPress?
Puede elegir cualquiera de los métodos enumerados a continuación que se adapte a su sitio para agregar las imágenes WebP.
CDN
Hay muchos CDN disponibles para su sitio de WordPress para servir el contenido de su sitio web desde diferentes ubicaciones globales. El uso de un CDN hará que un sitio web sea comparativamente más rápido que sin usarlo.
Algunas de las CDN más populares son Cloudflare, MaxCDN, KeyCDN y StackPath . El uso de cualquiera de estos CDN le permite convertir sus archivos de imágenes al formato WebP. También sirve esos archivos a los usuarios que navegan desde los navegadores compatibles.
Complemento de optimización de imágenes
Es una mejor práctica cargar imágenes en JPG/PNG y convertirlas a WebP con la ayuda de complementos de optimización de imágenes. Aquí hay una lista de complementos recomendados que convierten archivos de imagen al formato WebP.
Optimol
Con su ayuda, puede reemplazar las imágenes de su sitio con las URL de imágenes optimizadas por Optimole. Además de la conversión WebP, también cambia automáticamente el tamaño de las imágenes según la pantalla del usuario.
El plan gratuito de Optimole incluye una cuota mensual de 5000 visitantes. Pero, si eso no es suficiente para ti, puedes comprar un plan premium para actualizar ese límite a 25000.
Después de instalar y activar el complemento, debe crear una clave API como se indica en la configuración del complemento. Una vez que el complemento esté conectado, optimizará sus imágenes y comenzará a servir la versión WebP de las imágenes a todos los navegadores compatibles desde su CDN.
imaginar
Cuando cree una cuenta en Imagify, obtendrá una clave API que deberá ingresar en el complemento después de la activación. Si subes menos de 200 imágenes al mes, Imagify es la solución para ti. El plan gratuito incluye 20 MB o 200 imágenes al mes. Si no es suficiente, puede optar por los planes premium disponibles.
Si observa la configuración, puede crear una versión WebP de las imágenes y mostrarlas en el sitio. Mientras muestra las imágenes, puede usar las etiquetas de imagen en la configuración que las reglas de reescritura.
Si usa el complemento Imagify, también puede mejorar la velocidad de su sitio web con la configuración de medios en el complemento WP Rocket. Dado que WP Rocket e Imagify son creados por WP Media, los complementos también son compatibles.
En la configuración de Compatibilidad WebP de WP Rocket, puede habilitar el almacenamiento en caché de WebP si desea que estas imágenes se publiquen desde el almacenamiento en caché de WP Rocket.
Si echa un vistazo al repositorio oficial de WordPress, puede obtener varios otros complementos de optimización de imágenes. Sin embargo, le recomendamos que use cualquiera de estos dos complementos mencionados en esta publicación si necesita una solución para imágenes web.
A mano
Puede usar un CDN, un complemento o ambos para usar imágenes WebP. Si te gusta el método manual, echa un vistazo a la descripción a continuación:
En primer lugar, debe convertir sus imágenes al formato WebP antes de cargarlas. Hay varios convertidores en línea que puedes encontrar en Google.
Tenga en cuenta que el complemento de Adobe Photoshop le da permiso para guardar los archivos de imagen en formato WebP. Después de convertir su imagen al formato WebP, ahora puede cargarlas a través de. tu tablero.
Antes de cargar, debe realizar algunos cambios en el editor de temas. En el archivo functions.php de su tema activo, agregue este código en la parte inferior:
//** *Habilitar la carga de imágenes webp.*/
función enable_webp_mimes($existing_mimes) {
$existing_mimes['webp'] = 'imagen/webp';
devuelve $ mimos_existentes;
}
add_filter('mime_types', 'enable_webp_mimes');Después de agregar este código, vaya a Medios> Agregar nuevo y agregue sus archivos WebP.
Terminando
Ahora debería poder saber cómo usar imágenes WebP en WordPress. Puede probar uno de los métodos enumerados en la publicación. Si hay alguna sugerencia o confusión con respecto a la publicación, contácteme en [email protected]
Artículos Relacionados
- Cómo bloquear la dirección IP en WordPress
- Cómo desactivar los comentarios en WordPress
- Cómo personalizar la página de inicio en WordPress