Optimise Images does not work on some images

1. AO image opt. does not work on all images, but should work on most (img and picture tag, background-image in CSS and data-thumb attributes (e.g. in woocommerce) when on your own domain. that _should_ cover most, but some might not be optimized.

2. the lqip ones are temporary “low quality image placeholders” which are subsequently replaced by the real optimized image (the webp ones if your browser supports those).

hope this clarifies,
frank

1. ok
2. yes but sometimes the lqip image is not replaced by webp version and it’s shown in website (chrome last version)

• This reply was modified 5 years, 8 months ago by g3n10z.

hmm, the replacing is done using JS, maybe that’s broken somehow. maybe try disabling the lqip ones with this code snippet;

add_filter('autoptimize_filter_imgopt_lazyload_dolqip','__return_false');

it worked.

no sorry, the problem is still here… and now is not sometimes but the 100% of time!
If i add your filter i see white image, if i remove the filter i see the lqip version!
at the moment i need to disable lazyload and webp option.
any idea?

• This reply was modified 5 years, 8 months ago by g3n10z.

no sorry, the problem is still here… and now is not sometimes but the 100% of time!

ok, what JavaScript error do you see on the browser console when that happens?

HI, i’m using chrome.

If i uncheck the option “Also aggregate inline JS?” i don’t see any error.

If i check the option i see:
2(index):288 Uncaught ReferenceError: supportsWebP is not defined
at HTMLDocument.<anonymous> ((index):288)
at t (autoptimize_0314f440edd56386cc56d659a167da78.js:243)
at autoptimize_0314f440edd56386cc56d659a167da78.js:243
at autoptimize_0314f440edd56386cc56d659a167da78.js:243
at Function.g [as _lsFlush] (autoptimize_0314f440edd56386cc56d659a167da78.js:243)
at Object._ (autoptimize_0314f440edd56386cc56d659a167da78.js:243)
at D (autoptimize_0314f440edd56386cc56d659a167da78.js:243)
at autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ (index):288
t @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
g @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
_ @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
D @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
setTimeout (async)
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243
(anonymous) @ autoptimize_0314f440edd56386cc56d659a167da78.js:243

Wow … no idea how that is even possible, because:
* the function that calls supportsWebP is in the same block of code that actually defines that exact function.
* the code is added in such a way that is it not aggregated by AO (except if you force it to using a code snippet, which I would advise against).

On a sidenote; aggregating inline JS is rarely a good idea as that risks bloating AO’s cache.

ok,
I unchecked the option “Also aggregate inline JS?”!
If i check the lazyload option (with or without webp option selected): i see for some images only the low res blurred version and no error on chrome console.

I see only JQMIGRATE: Migrate is installed, version 1.4.1 on console.

Any ideas?

thanks

• This reply was modified 5 years, 8 months ago by g3n10z.

lazyload currently seems not to be active, so I can’t really say g3n10z ..