Todos sabemos que usar imágenes de la manera correcta puede hacer que su sitio web se vea bastante efectivo. Pero, ¿sabías que pueden agregar peso a tu sitio web?
Lo creas o no, es verdad. Por lo tanto, si tiene muchas imágenes en su sitio, a veces puede encontrar problemas de retraso. Además, las páginas de su sitio web también pueden comenzar a cargarse lentamente. Con todo, estos problemas pueden ser bastante problemáticos y afectar enormemente la experiencia general del usuario de su sitio web.
Entonces, ¿cómo puedes resolver este problema? La respuesta a esta pregunta es bastante simple cambiando el formato de la foto a WebP.
Con este tipo de formato, puede reducir el tamaño de sus imágenes manteniendo intacta la calidad. Así que aquí hablaremos un poco sobre este formato y presentaremos algunas formas de mostrar imágenes WebP en su sitio web o servidor. Así que asegúrese de mantenerse actualizado.
¿Qué es exactamente WebP?
Como se mencionó anteriormente, WebP es en realidad un tipo de formato de archivo de imagen. Fue creado específicamente por Google para ayudar a los propietarios de sitios web a optimizar su sitio. Sí, tiene usted razón. WebP funciona igual que otros formatos de archivo populares como JPG, PNG, JPEG, BMP, etc.
La única diferencia, sin embargo, es que es mucho más simple y ligero que ellos.
Entonces, si los usa en su sitio de WordPress en lugar de otros formatos, reducirá en gran medida el peso del sitio. En consecuencia, la velocidad de carga de su sitio web también aumentará en una milla.
Sin embargo, muchos navegadores, como iOS Safari Browser, no admiten este formato. Entonces, si comienza a mostrar imágenes WebP en su sitio web en gran cantidad, los usuarios de iPhone solo verán imágenes en blanco.
¿Qué navegadores admiten el formato WebP?
Actualmente, algunos de los navegadores más populares, como Google Chrome, Opera y Edge, admiten el formato de imagen WebP.
Firefox anunció recientemente que están trabajando para que su navegador sea compatible con este formato en un futuro próximo. Sin embargo, la vieja escuela de Internet Explorer no admite el formato WebP de ninguna manera.
JPEG y WebP: comparar tamaño de imagen
Como se mencionó anteriormente, las imágenes WebP no pesan tanto como otros formatos populares, especialmente JPEG. Además, también son mucho más pequeños que los archivos normales.
Por ejemplo, las imágenes WebP son aproximadamente entre un 25 % y un 35 % más pequeñas que las imágenes JPEG. Por otro lado, son alrededor de un 26% más pequeñas que las fotos PNG.
Solo por esta razón, la mayoría de los propietarios de sitios web de WordPress hoy en día muestran imágenes WebP en sus páginas en lugar de usar las tradicionales.
¿Cómo implementar el soporte de WebP en el servidor Apache a través de .htaccess?
En la mayoría de los casos, el servidor de alojamiento no tendrá idea del formato de imagen WebP. Por lo tanto, si desea agregar imágenes WebP a su sitio web, primero debe declararlo en la carpeta .htaccess.
Si actualmente está trabajando en un servidor Apache o cPanel, puede implementar la compatibilidad con WebP agregando algunos códigos.
Para hacer esto, primero debe abrir el archivo .htaccess en una carpeta llamada public_html. Luego, puede agregarle los siguientes códigos para mostrar imágenes WebP en su sitio web.
# Serve Images with correct Mime Type AddType image/webp .webp # Setup Cache ExpiresActive On ExpiresByType image/webp A2592000
¿Cómo implementar la compatibilidad con WebP en el servidor Nginx?
Por otro lado, si está utilizando el servidor Nginx para ejecutar en su sitio web, también deberá agregar algunos códigos. Aquí está el código que necesita para escribir para esto:
location ~ ^(/path/to/your/images.+).(jpe?g|png)$ {
if ( $http_accept ~* webp ) {
set $webp "A";
}
if ( $request_filename ~ (.+).(png|jpe?g)$ ) {
set $file_without_ext $1;
}
if ( -f $file_without_ext.webp ) {
set $webp "${webp}E";
}
if ( $webp = AE ) {
add_header Vary Accept;
rewrite ^(.+).(png|jpe?g)$ $1.webp break;
}
}
Entonces, esta es la única forma en que su sitio de WordPress, que está alojado en Nginx, conoce el formato WebP.
¿Cuáles son los mejores complementos de WebP?
Hay varios complementos que pueden ayudar a mostrar imágenes WebP en su sitio de WordPress y hacerlo más fácil de usar. Éstos son algunos de ellos.
1. Caché Enabler y Optimus Image Optimizer
Cache Enabler es probablemente uno de los complementos WebP más fáciles de usar del mercado. Tiene una interfaz de usuario bastante simple y funciona con bastante rapidez.
Entonces, si es un novato y no sabe mucho sobre codificación avanzada, elegir Cache Enabler será una idea perfecta para usted. Esto habilitará el uso de cachés. Por lo tanto, puede usar perfectamente cualquier otro complemento de edición de imágenes para su trabajo. ¿Quieres saber una cosa más sorprendente al respecto? Es completamente gratis para descargar.
Como se mencionó anteriormente, Cache Enabler solo lo ayudará a agregar caché adicional en su sitio web, lo cual es bastante importante. Sin embargo, no puede ayudarlo a optimizar completamente sus imágenes y reformatearlas.
Es por eso que necesita la ayuda de Optimus Image Optimizer para esto. es un complemento automatizado, lo que significa que puede cambiar automáticamente el formato de sus fotos. Entonces, si tienes este programa, no tendrás que hacer nada manualmente.
2. Complemento WebP Express
Hay otro complemento excelente que puede usar para el mismo propósito. Es conocido como el complemento WebP Express. Puede crear automáticamente imágenes WebP en navegadores que admitan este formato.
Anteriormente, realizó la misma tarea de conversión de formato con dos complementos diferentes. Sin embargo, si elige hacer esto, no necesitará descargar nada adicional.
Este complemento también es bastante fácil de usar y puede ayudarlo a mostrar imágenes WebP cambiando automáticamente los formatos de imagen. Una vez instalado, verá la opción Iniciar conversación en la primera página. Todo lo que tiene que hacer es hacer clic en él y ver la magia del complemento.
El formato WebP puede ser muy útil para cualquier propietario de un sitio de WordPress, especialmente si está pensando en optimizar su sitio. Así que asegúrese de agregar los códigos correctos y usar complementos gratuitos para reformatear las imágenes de su sitio y mejorar la experiencia general del usuario.
