Avisos
Vaciar todo

[Resuelto] Hacer funcionar el plugin WebP Express para cargar mis imágenes en formato de nueva generación WEBP  

 
enrique
 enrique
Nuevo usuario

Hola quiero mostrar imágenes en formato de nueva generación WEBP porque veo que el nivel de reducción de peso es bastante considerable.

Por lo que veo se recomienda el plugin WebP Express, ya que con otros plugins aparentemente WebEmpresa tenéis bloqueado ciertos accesos por seguridad.

En este plugin al entrar me dice:

 

It seems your server setup does not support headers in.htaccess. You should either fix this (installmod_headers)ordeactivate the "Enable direct redirection to existing converted images?" option. Otherwise theVary:Acceptheader will not be added and this can result in problems for users behind proxy servers (ie used in larger companies)
 
 
Yo le he dado todo a Bulk Convert según pone para hacer la conversión utiliza Gd Extension pero no llegan a cargar en el modo test me pone.
 
 

Copying files for testing

Copying JPEG to uploads folder (webp-express-test-images/ccnMyH.JPEG). ok
We now have a jpeg stored here:
/home/naluchar/public_html/nalucharter.com/wp-content/uploads/webp-express-test-images/ccnMyH.JPEG
 
Copying dummy webp to the cache root for uploads. ok
We now have a webp file stored here:
/home/naluchar/public_html/nalucharter.com/wp-content/webp-express/webp-images/uploads/webp-express-test-images/ccnMyH.JPEG.webp
 

Lets check that browsers supporting webp gets the WEBP when the JPEG is requested

Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
Request URL:
Response: 200 OK

Response headers:

- server: nginx
- date: Mon, 14 Jun 2021 16:33:29 GMT
- content-type: image/jpeg
- content-length: 1888
- last-modified: Mon, 14 Jun 2021 16:33:29 GMT
- etag: "60c784d9-760"
- expires: Tue, 14 Jun 2022 16:33:29 GMT
- cache-control: max-age=31536000
- x-microcache: True
- accept-ranges: bytes
 
Bummer. As the "content-type" header reveals, we got the jpeg.
Additionally, the content-length reveals that we did not get the webp (we know that the file we put is exactly 6964 bytes). So we can conclude that the rewrite did not happen
The test FAILED.

Diagnosing rewrites

Notice that you are on Nginx and the rules that WebP Express stores in the .htaccess files probably does not have any effect.
Please read the "I am on Nginx" section in the FAQ ( https://wordpress.org/plugins/webp-express/)
And did you remember to restart the nginx service after updating the configuration?
PS: If you cannot get the redirect to work, you can simply rely on Alter HTML as described in the FAQ.
Deleting test images

Contenido solo visible a usuarios registrados

Respondido : 14/06/2021 5:34 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Enrique

Verifica agregando a tu archivo .htaccess el siguiente texto:

<IfModule mod_headers.c>
<FilesMatch "(?i)\.(jpe?g|png)$">
Header append "Vary" "Accept"
</FilesMatch>
</IfModule>

Este archivo puedes encontrarlo en Cpanel > Administrador de archivos > Public_html > Dominio > Archivo .htaccess. Al igual que desactiva temporalmente todo complemento que tengas de compresión de información como wp rocket o autoptimize.

Estos comprimen y crean nuevos archivos htaccess aplicando reglas especificas que a veces pueden interferir en el funcionamiento de algunos complementos.

Verifica y nos comentas, un saludo 🖐️ 

Respondido : 14/06/2021 5:42 pm

Gestor de Contraseñas - VPN Conexión Segura - Gestor 2FA (Segundo Factor de Autenticación

enrique
 enrique
Nuevo usuario

@argenis Hola buenos días he realizado exactamente lo que has indicado añadiendo el código al principio del .htaccess, luego me he ido al plugin y le he dado al botón de "Save settings and force new .htacces rules" 

 

Me indica

Configuration was saved.

Rewrite rules were saved to the following files:

/home/naluchar/public_html/nalucharter.com/wp-content/themes/.htaccess(themes)
/home/naluchar/public_html/nalucharter.com/wp-content/uploads/.htaccess(uploads)
/home/naluchar/public_html/nalucharter.com/wp-content/webp-express/webp-images/.htaccess(cache)

 
Pero voy a la web y al intentar guardar imagen veo que sigue siendo .jpg (utilizo Google Chrome última versión) 
 
 
Cuando le doy a test pone
 
 

Testing redirection to existing webp

UPLOADS

Copying files for testing

Copying JPEG to uploads folder (webp-express-test-images/RDjkx3.JPEG). ok
We now have a jpeg stored here:
/home/naluchar/public_html/nalucharter.com/wp-content/uploads/webp-express-test-images/RDjkx3.JPEG
 
Copying dummy webp to the cache root for uploads. ok
We now have a webp file stored here:
/home/naluchar/public_html/nalucharter.com/wp-content/webp-express/webp-images/uploads/webp-express-test-images/RDjkx3.JPEG.webp
 

Lets check that browsers supporting webp gets the WEBP when the JPEG is requested

Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
Request URL:
Response: 200 OK

Response headers:

- server: nginx
- date: Tue, 15 Jun 2021 08:27:11 GMT
- content-type: image/jpeg
- content-length: 1888
- last-modified: Tue, 15 Jun 2021 08:27:11 GMT
- etag: "60c8645f-760"
- expires: Wed, 15 Jun 2022 08:27:11 GMT
- cache-control: max-age=31536000
- x-microcache: True
- accept-ranges: bytes
 
Bummer. As the "content-type" header reveals, we got the jpeg.
Additionally, the content-length reveals that we did not get the webp (we know that the file we put is exactly 6964 bytes). So we can conclude that the rewrite did not happen
The test FAILED.

Diagnosing rewrites

Notice that you are on Nginx and the rules that WebP Express stores in the .htaccess files probably does not have any effect.
Please read the "I am on Nginx" section in the FAQ ( https://wordpress.org/plugins/webp-express/)
And did you remember to restart the nginx service after updating the configuration?
PS: If you cannot get the redirect to work, you can simply rely on Alter HTML as described in the FAQ.
Deleting test images

THEMES

Copying files for testing

Copying JPEG to themes folder (webp-express-test-images/f29FPf.JPEG). ok
We now have a jpeg stored here:
/home/naluchar/public_html/nalucharter.com/wp-content/themes/webp-express-test-images/f29FPf.JPEG
 
Copying dummy webp to the cache root for themes. ok
We now have a webp file stored here:
/home/naluchar/public_html/nalucharter.com/wp-content/webp-express/webp-images/themes/webp-express-test-images/f29FPf.JPEG.webp
 

Lets check that browsers supporting webp gets the WEBP when the JPEG is requested

Making a HTTP request for the test image (pretending to be a client that supports webp, by setting the "Accept" header to "image/webp")
Request URL:
Response: 200 OK

Response headers:

- server: nginx
- date: Tue, 15 Jun 2021 08:27:11 GMT
- content-type: image/jpeg
- content-length: 1888
- last-modified: Tue, 15 Jun 2021 08:27:11 GMT
- etag: "60c8645f-760"
- expires: Wed, 15 Jun 2022 08:27:11 GMT
- cache-control: max-age=31536000
- x-microcache: True
- accept-ranges: bytes
 
Bummer. As the "content-type" header reveals, we got the jpeg.
Additionally, the content-length reveals that we did not get the webp (we know that the file we put is exactly 6964 bytes). So we can conclude that the rewrite did not happen
The test FAILED.

Diagnosing rewrites

Notice that you are on Nginx and the rules that WebP Express stores in the .htaccess files probably does not have any effect.
Please read the "I am on Nginx" section in the FAQ ( https://wordpress.org/plugins/webp-express/)
And did you remember to restart the nginx service after updating the configuration?
PS: If you cannot get the redirect to work, you can simply rely on Alter HTML as described in the FAQ.
Respondido : 15/06/2021 9:27 am
Karen Rios
 Karen Rios
Soporte CMS Webempresa Moderator

Hola Enrique, 

Verifica si tienes alguno opción dentro de sus configuraciones con "Pass Thru" si es así prueba seleccionarlo y nos comentas, de igual forma prueba pulsar en la opción de convertir masivamente y comprueba si al hacerlo tus imágenes cambiar al formato que deseas

Screenshot (85)

Prueba esto y nos comentas como ha ido todo

Un Saludo

Respondido : 15/06/2021 12:46 pm

enrique
 enrique
Nuevo usuario

@karen Hola "parece" que lo he conseguido, ese paso indicado ya lo había hecho antes. Lo que he realizado es esto según el FAQ del creador plugin.

 

WebP Express funciona bien en NGINX, sin embargo, la interfaz de usuario aún no está optimizada para NGINX. Y, por supuesto, NGINX no procesa los archivos .htaccess que genera WebP Express. WebP Express se puede usar sin redireccionamiento, ya que puede alterar HTML para usar etiquetas de imagen que enlazan con la alternativa webp. Consulte "La forma sencilla" a continuación. O puede ensuciarse las manos y configurar la redirección en NGINX guiado por la sección "La forma avanzada" a continuación.

La forma simple (sin reglas de redireccionamiento)
La solución fácil es simplemente usar el complemento en modo "compatible con CDN", hacer una conversión masiva (se encarga de convertir las imágenes existentes), activar la opción "Convertir al cargar" (se encarga de convertir nuevas imágenes en la biblioteca de medios) y habilite Alter HTML (se encarga de entregar webp a los navegadores habilitados para webp mientras sigue entregando el jpeg / png original a los navegadores que no admiten webp).

PRO : Muy fácil de configurar.
CON : Las imágenes en CSS externo y las imágenes que se agregan dinámicamente con javascript no se servirán como webp.
CON : Las nuevas imágenes de temas nuevos no se convertirán hasta que ejecute una nueva conversión masiva

 

 

Alter HTML

Enabling this alters the HTML code such that webp images are served to browsers that supports webp. It is recommended to enable this even when the redirection is also enabled, so the varied image responses are only used for those images that cannot be replaced in HTML. The varied responses generally leads to poorer caching in proxies and CDN's. And if users download those images, they will have jpg/png extension, even though they are webp.

Alter HTML?

?

Two distinct methods for altering HTML are supported. View comparison chart

     
 

 

 

 
   

     
     

  • ?
  • ?
  • ?
  • ?

?

?

?
Respondido : 15/06/2021 1:46 pm
Argenis
 Argenis
Soporte CMS Webempresa Moderator

Hola Enrique,

Estupendo, muchísimas gracias por la información suministrada, nos alegra que lograses solventar el inconveniente y ya logres usar el plugin.

Si tienes alguna otra duda recuerda que puedes crear un nuevo tema y con gusto lo atenderemos.

Un saludo 🖐️ 

Respondido : 15/06/2021 2:05 pm

Cursos Gratuitos WordPress