Entendiendo 'WebP Converter for Media'

Hola compañeros... He instalado el plugin "WebP Converter for Media" tras leer que este formato de imagen mejora la carga de las páginas... pero no acabo de entender qué hace, pues no veo ninguna diferencia... He probado a subir un jpg, pero no veo que el plugin lo haya convertido a webp, ni haya creado una versión webp. Por otra parte, las páginas que ya tienen imágenes jpg siguen mostrando jpg. Y tampoco veo que en los ajustes del plugin pueda hacer gran cosa...

¿Alguien que utilice este plugin sería tan amable de explicar cómo trabaja y si merece la pena tenerlo instalado?

Gracias...

Feliz Finde... Y Comienzode...

Hola, pues pueden ser varios factores (como siempre).

Si no te está creando las imágenes .webp, prueba a usar la opción que trae abajo, la de "Regenerate images" y marca la casilla de forzar. En caso de que siga sin generártelas (como dices), quizás tenga un problema y toca esperar a que actualicen el plugin. También puedes probar a usar otro de los muchos que hay: https://wordpress.org/plugins/search/webp/

Si te genera las imágenes webp pero tú no ves que tu página las muestre, prueba con esto:

• Usas Cloudflare o similar? elimina el cache.
• Elimina el cache de tu navegador.
• Estás usando un navegador / versión compatible? https://caniuse.com/#feat=webp
• No sé cómo funciona el plugin, pues nunca lo he usado. Lo normal (y óptimo) sería que el plugin use picture (puedes comprobarlo viendo el código fuente de tu web), pues este permite al navegador seleccionar la imagen que más le convenga. Hay navegadores y SO que no son compatibles con el formato webp, incluso google chrome en iOS no es capaz de mostrar su propio formato (a partir de la iOS14 si es compatible tanto Safari como g-chrome).

Espero que te sirve de ayuda para que soluciones tu problema, un saludo.

Gracias Oscar...

Si subo un jpg, en la biblioteca de medio veo el jpg, como siempre... ¿Se supone que el plugin crea una versión webp que debería ver en la biblioteca?

Si miro el código fuente de alguna de mis páginas, por ejemplo en Chrome, veo que las imágenes siguen siendo jpg... ¿El plugin debería sustituirlas por webp o las páginas antiguas no las toca?

Si llevo el ratón al botón "Regenerate All" se pone el verde y al calicar no hace nada (independientemente de si tengo activada o no la casilla "Force convert all images again".

Podría probar otros plugin, pero no sé si merece la pena añadir un plugin para reducir un milisegundo la carga...

Gracias de nuevo...

JoseZabaleta dijo:

Gracias Oscar...

Si subo un jpg, en la biblioteca de medio veo el jpg, como siempre... ¿Se supone que el plugin crea una versión webp que debería ver en la biblioteca?

Si miro el código fuente de alguna de mis páginas, por ejemplo en Chrome, veo que las imágenes siguen siendo jpg... ¿El plugin debería sustituirlas por webp o las páginas antiguas no las toca?

Si llevo el ratón al botón "Regenerate All" se pone el verde y al calicar no hace nada (independientemente de si tengo activada o no la casilla "Force convert all images again".

Podría probar otros plugin, pero no sé si merece la pena añadir un plugin para reducir un milisegundo la carga...

Gracias de nuevo...

Hacer clic para expandir...

No, no tienes por que verlo desde la biblioteca de medios, puede que se guarden en otra dirección donde no accede la biblioteca.

Miré hace un rato el plugin, y bueno, puedo darte un par de conclusiones más.
Puede que no te esté funcionando, por que el plugin necesita los módulos php GD e ImageMagick, tendrías que entrar en tu cpanel y comprobar que tienes alguno de ellos activado y seleccionado en las opciones del plugin (en caso que esté desactivado, actívalo para que funcione), si no, no funcionará.

De forma adicional, si no quieres hacerlo de forma manual, puedes probar con WebP Express, tienes más opciones interesantes incluyendo la que te comenté antes.

Respecto a hacer la conversión o no, bueno, siempre que estés usando JPGs progresivos con una buena compresión y sin mucha perdida de imagen, sería suficiente.
Adicionalmente, webp es el formato de google, y google es el buscador más grande, a google le gusta su formato, a ti te gusta gustarle a google? espero que me entiendas, un saludo.

GRACIAS Oscar...

oscarcweb dijo:

No, no tienes por que verlo desde la biblioteca de medios, puede que se guarden en otra dirección donde no accede la biblioteca.

Hacer clic para expandir...

He creado un post de prueba en el que he publicado una imagen jpg recién subida... Al mirar al código de la pagina veo que la imagen sigue siendo jpg.

oscarcweb dijo:

Miré hace un rato el plugin, y bueno, puedo darte un par de conclusiones más.
Puede que no te esté funcionando, por que el plugin necesita los módulos php GD e ImageMagick, tendrías que entrar en tu cpanel y comprobar que tienes alguno de ellos activado y seleccionado en las opciones del plugin (en caso que esté desactivado, actívalo para que funcione), si no, no funcionará.

Hacer clic para expandir...

No conozco mucho cpanel... Veo una sección llamada "software" con algunos apartados relacionados con php, pero esos módulos que mencionas no aparecen en primera instancia... ¿Tendría que mirar en algún sub apartado?

oscarcweb dijo:

De forma adicional, si no quieres hacerlo de forma manual, puedes probar con WebP Express, tienes más opciones interesantes incluyendo la que te comenté antes.

Hacer clic para expandir...

¿A qué te refieres con hacerlo de forma manual?

He instalado "WebP Express" y he realizado la misma prueba... Pego a continuación el código generado:

<figure class="wp-block-image size-large"><picture><source data-src="https://www.viaje-iniciatico.com/wp...ploads/2020/06/UnderReview-1-840x472.jpg.webp" type="image/webp"><img src="//www.viaje-iniciatico.com/wp-content/plugins/a3-lazy-load/assets/images/lazy_placeholder.gif" data-lazy-type="image" data-src="https://www.viaje-iniciatico.com/wp-content/uploads/2020/06/UnderReview-1-840x472.jpg" alt="" class="lazy lazy-hidden wp-image-22818 webpexpress-processed"></picture><noscript><picture><source srcset="https://www.viaje-iniciatico.com/wp...ploads/2020/06/UnderReview-1-840x472.jpg.webp" type="image/webp"><img src="https://www.viaje-iniciatico.com/wp-content/uploads/2020/06/UnderReview-1-840x472.jpg" alt="" class="wp-image-22818 webpexpress-processed"></picture></noscript></figure>

Supongo que los jpg que aparecen son para navegadores que no soportan webp. ¿Correcto?

En cualquier caso, he desinstalado el plugin, pues me descoloca el logo de la web.

oscarcweb dijo:

Respecto a hacer la conversión o no, bueno, siempre que estés usando JPGs progresivos con una buena compresión y sin mucha perdida de imagen, sería suficiente.

Hacer clic para expandir...

¿Qué son JPGs progresivos?

oscarcweb dijo:

Adicionalmente, webp es el formato de google, y google es el buscador más grande, a google le gusta su formato, a ti te gusta gustarle a google? espero que me entiendas, un saludo.

Hacer clic para expandir...

Al igual que con las mujeres... me gusta gustar... pero no a cualquier precio...

Gracias de nuevo...

Te lo resumo:

Como habilitar módulos php en cpanel:

De forma manual, me refiero que conviertas tu mismo la imagen a webp y la subas directamente a tu página web. Sin plugins.

Si, al usar picture, el navegador selecciona lo que más le convenga, pueden ser formatos, tamaños, etc.

Dicen que una imagen vale más que mil palabras:

Más info: (https://maugelves.com/como-optimizar-las-imagenes-jpg-con-el-formato-progresivo/)

Bueno, convertir las imágenes de tu sitio a otro formato, es una trabajo fácil, la decisión es tuya.
Saludos

Gracias Oscar...

Como puede verse en la captura, en mi cpanel no tengo un php selector, sino un MultiPHP Manager...

Ver el archivo adjunto 297789

Y como puede verse en la siguiente captura, dentro de este manager puedo seleccionar la versión de php y pulsar aplicar, pero no aparecen los módulos...

Ver el archivo adjunto 297795

Interesante lo de JPG progressive... Hace un tiempo me tomé la molestia de ir bajando vía FTP, carpeta por carpeta, todas las imágenes del sitio (las originales y las versiones en diferentes tamaños que utiliza el tema), reducir el peso mediante https://kraken.io/web-interface y volverlas a subir... Me llevó horas, pero consideré que merecía la pena... Podría volver a hacerlo para convertirlas en progressive mediante https://tinypng.com/ (veo que reduce más que el programa que utilicé) y volver a subirlas...

También podría crear versiones webp y subirlas... pero para mostrar la versión webp o la jpg según el navegador, necesito modificar el código... por lo que no creo que me pueda ahorrar el plugin... ¿No es así?

Gracias de nuevo...

@JoseZabaleta
Contacta con tu hosting, mediante tickets o como sea que funcione con tu hosting, diles que quieres habilitar / deshabilitar X extensión.

Si, como ya te dije, si decides hacerlo manual, puedes o bien dejar solo las webp o usar picture. Aquí te dejo una función que añade picture a todas las imágenes del contenido de tus entradas: https://wordpress.stackexchange.com...stead-of-img-tags-in-wordpress-post-content-h

Y si no, plugins, hay muchos para lo que quieres, completos y simples, es la gracia de wordpress. Y aunque un plugin te descoloque un poco el logo, no pasa nada, pide ayuda, o contrata a alguien, suelen ser simples correcciones.

Saludos

Gracias Oscar...

oscarcweb dijo:

Si, como ya te dije, si decides hacerlo manual, puedes o bien dejar solo las webp o usar picture. Aquí te dejo una función que añade picture a todas las imágenes del contenido de tus entradas: https://wordpress.stackexchange.com...stead-of-img-tags-in-wordpress-post-content-h

Hacer clic para expandir...

¿Dónde tendría que añadir esa función?
¿Dónde tendrían que estar las webp?
¿Cómo lo haces tú?

Gracias de nuevo... Feliz semana...

@JoseZabaleta
Hola,

¿Por que mejor no usas un plugin que comprime y cambia las imágenes a webp?

Ten en cuenta que las imágenes pueden estar siendo "cargadas" como PNG/JPG pero el MIME-type (content-type) puede ser image/webp, en otras palabras, no siempre tienen que terminar en .webp para que sean cargadas como webp.

Te dejo el ejemplo en una imagen:



Como puedes ver la imagen es una jpg, pero el MIME-type (content-type) es image/webp, en otras palabras, la página esta siendo servida como una webp aunque no termine en .webp.

Saludos

Gracias compañer@

MajesticCat dijo:

¿Por que mejor no usas un plugin que comprime y cambia las imágenes a webp?

Ten en cuenta que las imágenes pueden estar siendo "cargadas" como PNG/JPG pero el MIME-type (content-type) puede ser image/webp, en otras palabras, no siempre tienen que terminar en .webp para que sean cargadas como webp.

Hacer clic para expandir...

Precisamente en el post inicial comento que tras instalar el plugin "WebP Converter for Media" no veo el resultado, pues al mirar el código fuente, las imágenes siguen siendo jpg. ¿Cómo puedo saber si están siendo cargadas como webp?

En este artículo que acabo de leer: https://kinsta.com/es/blog/webp/ comentan tres plugins, aunque parece algo complicado para mí, pues entra en apis...

¿Qué plugin utilizáis vosotr@s?

JoseZabaleta dijo:

Gracias compañer@



Precisamente en el post inicial comento que tras instalar el plugin "WebP Converter for Media" no veo el resultado, pues al mirar el código fuente, las imágenes siguen siendo jpg. ¿Cómo puedo saber si están siendo cargadas como webp?

En este artículo que acabo de leer: https://kinsta.com/es/blog/webp/ comentan tres plugins, aunque parece algo complicado para mí, pues entra en apis...

¿Qué plugin utilizáis vosotr@s?

Hacer clic para expandir...

Shortpixel o Imagify te los recomiendo.

Y lo puedes ver en los headers

Saludos

Gracias...

MajesticCat dijo:

Shortpixel o Imagify te los recomiendo.

Hacer clic para expandir...

Hace unos días @oscarcweb me habló de los jpg progressive: https://maugelves.com/como-optimizar-las-imagenes-jpg-con-el-formato-progresivo/

¿Esos plugins convierten los jpg a progressive?

MajesticCat dijo:

Y lo puedes ver en los headers

Hacer clic para expandir...

Lo mío no es la tecnología... ¿Dónde y cómo puedo ver esos headers?

JoseZabaleta dijo:

Gracias...



Hace unos días @oscarcweb me habló de los jpg progressive: https://maugelves.com/como-optimizar-las-imagenes-jpg-con-el-formato-progresivo/

¿Esos plugins convierten los jpg a progressive?



Lo mío no es la tecnología... ¿Dónde y cómo puedo ver esos headers?

Hacer clic para expandir...

Hola,

Dándole a la tecla F12 o click derecho "Inspect/Inspeccionar". Luego te vas a "Network" y refrescas la página, luego te vas a cualquier imagen (puedes filtrar) y le das click, ahí te aparecerán los headers.

Saludos

MajesticCat dijo:

Dándole a la tecla F12 o click derecho "Inspect/Inspeccionar". Luego te vas a "Network" y refrescas la página, luego te vas a cualquier imagen (puedes filtrar) y le das click, ahí te aparecerán los headers.

Hacer clic para expandir...

Gracias... He podido ver que con el plugin "WebP Converter for Media", aunque en el código fuente los jpg siguen siendo jpg, el content-type es webp... Los png y gif siguen siendo png y gif, pero la mayoría de las imágenes de mi sitio son jpg.

Cuando probé el plugin "WebP Express" vi en el código fuente que utilizaba "<picture>" para servir jpg o webp en función del navegador... pero con "WebP Converter for Media" no veo "<picture>". Aun así, supongo que de alguna manera servirá un formato u otro dependiendo del navegador...

Me había planteado la posibilidad de bajar todas las jpg de mi sitio... convertirlas en progressive mediante https://tinypng.com/ y volver a subirlas... pero teniendo en cuenta que como explican en https://kinsta.com/es/blog/webp/ alrededor del 77% de los usuarios de Internet tienen un navegador compatible con el WebP, quizá no merece la pena el esfuerzo...

Gracias de nuevo...

@JoseZabaleta
Me preguntaste como lo hago yo, yo no uso wordpress, tengo mi propio cms en los que uso picture con imagenes webp y jpg.

El código lo pegas en el archivo functions.php de tu tema.

Respecto al formato Webp, a ver si te lo dejo algo más claro; Google recomienda usar imágenes de "próxima generación":
https://web.dev/uses-webp-images/
Más info en español: https://pixelatumente.com/imagenes-de-nueva-generacion/
Entre ellas está su propio formato Webp, el mejor de los denominados como próxima generación, comprimiendo hasta un 30% más y siendo mucho más compatible, pues los otros solo alcanzan un 17% y 3% de compatibilidad frente al 78% de Webp.

Webp, será compatible con prácticamente todos los navegadores y SO de aquí a unos años, por lo que si no lo quieres hacer ahora, lo querrás hacer más tarde. Ahora mismo, los usuarios de iOS no tienen compatibilidad con este formato, representado a un 12% de usuarios que no son compatibles con este formato. Este mismo año, apple sacará iOS 14, donde ya si será compatible, calculando que la mitad de ese 12% actualice a iOS 14, la compatibilidad con webp, ascenderá del 78% al 84% (puede ser más o menos, depende de la cantidad de usuarios que quieran/puedan actualizar a iOS 14).

Info dispositivos compatibles iOS 14: https://www.t13.cl/noticia/tendenci...ran-actualizacion-del-sistema-operativo-apple

Existen muchas formas de hacer lo que quieres, usando html(picture), mod_rewrite, detectando el navegador/so en php, js, etc.

Usando wordpress, usa plugins o contrata a alguien, hay muchos programadores buenos aquí y a precios muy buenos.

Saludos

PD: WebP Converter for Media no usa picture, usa mod_rewrite como te comentó @MajesticCat

JoseZabaleta dijo:

Gracias... He podido ver que con el plugin "WebP Converter for Media", aunque en el código fuente los jpg siguen siendo jpg, el content-type es webp...

Hacer clic para expandir...

Hola, esto del webP todavía es algo complejo. Yo he usado algunos plugins y sólo me han dado dolor de cabeza.

Además fíjate que puedes usar el formato JPEG con el sistema de compresión MOZJPEG, que Mozilla desarrolló y que en muchas ocasiones COMPRIME LO MISMO QUE WEBP.

Claro que no es fácil encontrar servicios que utilicen este sistema de compresión, pero te dejo los más populares y eficientes:





Mi favorito es este último ya que con las opciones avanzadas puedes simplemente mover los deslizadores de
Brightness quality // Color quality Color subsampling y conseguir compresiones MUY ALTAS con niveles de calidad bastante aceptables.



Hay algunos programas, aunque no son muy intuitivos a nivel de revisar cambios (parecen derivados del mismo código fuente):

Voralent Antelope - https://boldright.co.jp/products/antelope/

WEBconv - http://www.romeolight.com/products/webpconv/

Ver el archivo adjunto 299218

Y también me topé hace poco con MozJPEG GUI, oriental pero disponible en INGLÉS, que usa un sistema bastante extraño...

MozJPEG GUI - http://s.masayaohara.com/


Ver el archivo adjunto 299226

Con respecto al problema que tienes con los webP posiblemente sean por 2 cosas:

1 - porque estás usando caché, generalmente las imágenes webP no se generan en la primera carga de la página sino hasta que la imagen está en caché (entonces no tiene mucho sentido usar webP sino tienes muchas visitas)- y aparte de Opera pocos navegadores soportan el formato (si vas a hacer pruebas que sea con Opera)

2 - cuando descargas las imágenes, según el navegador y situaciones, a veces carga las webP y otras veces no (parece un bug o algo así).

Una opción que quizás te pueda interesar sería usar CLOUDINARY, dan una cuenta GRATUITA y puedes insertar las imágenes en formato AUTOMÁTICO, el navegador decide si enviarlas en formato webP, además es un CDN por lo que aligeras la carga de tu servidor.

Publiqué un tutorial en su día, la interfaz ha cambiado un poco, pero vamos, la idea general sigue siendo la misma (subir la imagen y escoger algunas opciones y pegar el link en wordpress - no tiene mucha ciencia).

Con Cloudinary SÍ se cargan las imágenes webP correctamente, pero como te comento, aparte de Opera ese formato está muy en pañales.

El tutorial está aquí - https://forobeta.com/temas/acelera-...do-el-plan-cdn-gratuito-de-cloudinary.599757/

Ver el archivo adjunto 299231

nota - revisando ahora veo que han puesto bastantes limitaciones en Cloudinary, sobre todo en tamaños y ancho de banda...

yo tuve ese problema, necesitas hacer un arreglo con algun plugin o codigo en functions.php para que cuando cargues con un navegador compatible, te bote las imagenes en webp y cuando el navegador no sea compatible, carga en JPG, yo hice la prueba y si me cambio a webp, note la diferencia, pero tambien me rompia otras cosas de la web, asi que lo deje todo a litespeed y en un vps que tengo lo trabajo con smush.

Gracias @oscarcweb @ramonjosegn y @Flakito2015 por las aportaciones...

Abrí este post porque tras instalar el plugin "WebP Converter for Media" vi que en el código fuente las imágenes seguían siendo jpg... Sin embargo, tras la explicación de @MajesticCat he podido comprobar que el plugin sirve las imágenes en formato webp a los navegadores que lo soportan...

Por tanto, con WordPress, servir webp o jpg en función del navegador del visitante, es tan sencillo como instalar el plugin "WebP Converter for Media".

Gracias de nuevo a tod@s.

JoseZabaleta dijo:

Gracias @oscarcweb @ramonjosegn y @Flakito2015 por las aportaciones...

Hacer clic para expandir...

Me alegro que hayas podido solucionarlo, yo seguiré usando mozJPEG y el CDN de Cloudinary... y con eso que los servidores y programas hagan el trabajo (y no un plugin). Menos quebraderos de cabeza, jajaja.