Support » Plugin: WebP Converter for Media » WebP converter not converting for mobile?

  • Resolved akristijan

    (@akristijan)


    Hello,

    I am using your WebP converter on my WordPress page. The plugin worked but only for computer version of website.

    If you go to google’s PageSpeed insight: https://developers.google.com/speed/pagespeed/insights/

    and test my page speed, the PC version doesn’t say there is problems in image sizes. But when I go on the mobile version, it says there’s a problem in image size and it specifies the image (“woman-wearing-face-mask-using-black-laptop-computer-4031905”) is too big of a size.

    I reuploaded this image several times (because in your plugin it says that it automatically converts image formats) and I’ve also done the Regenerate images option again. However the page insight still keeps showing this image being too big in mobile version.

    Am I doing something wrong here? Is your plugin not properly converting images for mobile? Or is the problem in my theme, wordpress or elementor not dealing with reponsive versions properly?

    Thanks in advance and if anything is still not clear please specify what and I’ll try to explain further.

    The page I need help with: [log in to see the link]

Viewing 8 replies - 16 through 23 (of 23 total)
  • Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    Turn on Dev Tools before clicking the button. And then after clicking take a screenshot of the Console and Network tab (in Network select the XHR filter).

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    Please show me something more about this error. I have checked the operation of the plugin and this error does not appear in any browser.

    I do not know what else to show you. This morning I updated the plugin to a new version. Now, when I click on “Regenerate All”, nothing happens.

    I tried enabling “Force convert all images again” thinking it might fix it, but it still doesn’t work.

    The file causing problems is located in the following folder: /public_html/wp-content/plugins/webp-converter-for-media/public/build/js

    This is what that file contains, and it’s all in 1 command line so I had to copy it like this:

    !function(e){var t={};function r(s){if(t[s])return t[s].exports;var i=t[s]={i:s,l:!1,exports:{}};return e[s].call(i.exports,i,i.exports,r),i.l=!0,i.exports}r.m=e,r.c=t,r.d=function(e,t,s){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:s})},r.r=function(e){“undefined”!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:”Module”}),Object.defineProperty(e,”__esModule”,{value:!0})},r.t=function(e,t){if(1&t&&(e=r(e)),8&t)return e;if(4&t&&”object”==typeof e&&e&&e.__esModule)return e;var s=Object.create(null);if(r.r(s),Object.defineProperty(s,”default”,{enumerable:!0,value:e}),2&t&&”string”!=typeof e)for(var i in e)r.d(s,i,function(t){return e[t]}.bind(null,i));return s},r.n=function(e){var t=e&&e.__esModule?function(){return e.default}:function(){return e};return r.d(t,”a”,t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p=”/”,r(r.s=0)}([function(e,t,r){r(1),e.exports=r(2)},function(e,t,r){“use strict”;function s(e,t){for(var r=0;r<t.length;r++){var s=t[r];s.enumerable=s.enumerable||!1,s.configurable=!0,”value”in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}r.r(t);var i=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError(“Cannot call a class as a function”)}(this,e),this.setVars()&&this.setEvents()}var t,r,i;return t=e,(r=[{key:”setVars”,value:function(){if(this.notice=document.querySelector(“.notice[data-notice=webp-converter]”),this.notice)return this.settings={isHidden:!1,ajaxUrl:this.notice.getAttribute(“data-url”)},!0}},{key:”setEvents”,value:function(){window.addEventListener(“load”,this.getButtons.bind(this))}},{key:”getButtons”,value:function(){this.buttonClose=this.notice.querySelector(“.notice-dismiss”),this.buttonPermanently=this.notice.querySelector(“[data-permanently]”),this.setButtonsEvents()}},{key:”setButtonsEvents”,value:function(){var e=this;this.buttonClose.addEventListener(“click”,(function(){e.hideNotice(!1)})),this.buttonPermanently.addEventListener(“click”,(function(t){t.preventDefault(),e.hideNotice(!0)}))}},{key:”hideNotice”,value:function(e){this.settings.isHidden||(this.settings.isHidden=!0,jQuery.ajax(this.settings.ajaxUrl,{type:”POST”,data:{is_permanently:e?1:0}}),this.buttonClose.click())}}])&&s(t.prototype,r),i&&s(t,i),e}();function n(e,t){for(var r=0;r<t.length;r++){var s=t[r];s.enumerable=s.enumerable||!1,s.configurable=!0,”value”in s&&(s.writable=!0),Object.defineProperty(e,s.key,s)}}var a=function(){function e(){!function(e,t){if(!(e instanceof t))throw new TypeError(“Cannot call a class as a function”)}(this,e),this.setVars()&&this.setEvents()}var t,r,s;return t=e,(r=[{key:”setVars”,value:function(){if(this.section=document.querySelector(“.webpLoader”),this.section)return this.wrapper=this.section.querySelector(“.webpLoader__status”),this.progress=this.wrapper.querySelector(“.webpLoader__barProgress”),this.progressSize=this.section.querySelector(“.webpLoader__sizeProgress”),this.errors=this.section.querySelector(“.webpLoader__errors”),this.errorsInner=this.errors.querySelector(“.webpLoader__errorsContentList”),this.errorsMessage=this.errors.querySelector(“.webpLoader__errorsContentMessage”),this.success=this.section.querySelector(“.webpLoader__success”),this.skipOption=this.section.querySelector(‘input[name=”regenerate_skip”]’),this.button=this.section.querySelector(“.webpLoader__button”),this.data={count:0,max:0,items:[],size:{before:0,after:0},errors:[]},this.settings={isDisabled:!1,ajax:{urlPaths:this.section.getAttribute(“data-api-paths”),urlRegenerate:this.section.getAttribute(“data-api-regenerate”),errorMessage:this.section.getAttribute(“data-api-error-message”)},units:[“kB”,”MB”,”GB”]},this.atts={progress:”data-percent”},this.classes={progressError:”webpLoader__barProgress–error”,buttonDisabled:”webpLoader__button–disabled”},!0}},{key:”setEvents”,value:function(){this.button.addEventListener(“click”,this.initRegenerate.bind(this))}},{key:”initRegenerate”,value:function(e){e.preventDefault(),this.settings.isDisabled||(this.settings.isDisabled=!0,this.skipOption.setAttribute(“disabled”,!0),this.button.classList.add(this.classes.buttonDisabled),this.wrapper.removeAttribute(“hidden”),this.getImagesList())}},{key:”getImagesList”,value:function(){var e=this;jQuery.ajax(this.settings.ajax.urlPaths,{type:”POST”,data:{skip_converted:this.skipOption.checked?1:0}}).done((function(t){e.data.items=t.data,e.data.max=t.data.length,e.regenerateNextImages()})).fail((function(){e.progress.classList.add(e.classes.progressError),e.errorsMessage.removeAttribute(“hidden”),e.errors.removeAttribute(“hidden”)}))}},{key:”regenerateNextImages”,value:function(){if(0===this.data.max&&this.updateProgress(),!(this.data.count>=this.data.max)){var e=this.data.items[this.data.count];this.data.count++,this.sendRequest(e)}}},{key:”sendRequest”,value:function(e){var t=this;jQuery.ajax(this.settings.ajax.urlRegenerate,{type:”POST”,data:{paths:e}}).done((function(e){t.updateErrors(e.errors),t.updateSize(e),t.updateProgress(),t.regenerateNextImages()})).fail((function(){var r=JSON.stringify(e),s=t.settings.ajax.errorMessage.replace(“%s”,”".concat(r,"“));t.updateErrors([s]),t.regenerateNextImages()}))}},{key:”updateErrors”,value:function(e){0!==e.length&&(this.data.errors=this.data.errors.concat(e),this.errorsInner.innerHTML=this.data.errors.join(“<br>”),this.errors.removeAttribute(“hidden”))}},{key:”updateSize”,value:function(e){var t=this.data.size;t.before+=e.size.before,t.after+=e.size.after;var r=t.before-t.after;if(r<0&&(r=0),0!==r){var s=Math.round(100*(1-t.after/t.before));s<0&&(s=0);var i=-1;do{i++,r/=1024}while(r>1024);var n=r.toFixed(2),a=this.settings.units[i],o=””.concat(n,” “).concat(a,” (“).concat(s,”%)”);this.progressSize.innerHTML=o}}},{key:”updateProgress”,value:function(){var e=this.data.max>0?Math.floor(this.data.count/this.data.max*100):100;e>100&&(e=100),100===e&&this.success.removeAttribute(“hidden”),this.progress.setAttribute(this.atts.progress,e)}}])&&n(t.prototype,r),s&&n(t,s),e}();new function e(){!function(e,t){if(!(e instanceof t))throw new TypeError(“Cannot call a class as a function”)}(this,e),new i,new a}},function(e,t){}]);

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    I would love to help you, but I can’t do it without having access to your site. If it was always a plugin error, I could easily fix it.

    Without access to the site, I have no idea what’s going on.

    Plugin Author Mateusz Gbiorczyk

    (@mateuszgbiorczyk)

    @akristijan, I think I have a solution. Have you tried refreshing the cache on the page and the cache on the page? From what I see, you use the old version of the JS file.

    The version on the repository contains different code:
    https://plugins.svn.wordpress.org/webp-converter-for-media/trunk/public/build/js/

    I didn’t clear cache yesterday because I didn’t have time. But today I logged in and tried doing it again and it worked now.

    Also to add on to that, since you updated your plugin with options to convert plugins, themes and uploads, the picture I had trouble converting has now successfully converted.

    So that’s it then. Thanks for your help and it’s lucky for me that your last update fixed this problem I had.

Viewing 8 replies - 16 through 23 (of 23 total)
  • You must be logged in to reply to this topic.