hmm, the problem is not with what’s in the <noscript> tag, because that does have a srcset attribute, but with the lazyloaded image tag which indeed has sizes (if your original image did) but not a srcset tag as that is now data-srcset, afraid there’s no fix for that at the moment.
hope this clarifies,
frank
Thread Starter
drazon
(@drazon)
I understand this is an issue of lazysizes rather than autoptimize. However maybe there is a workaround using data-sizes like this
Do you think we should open a similar issue at lazysizes ?
nah, this is the markup created by AO based on the original markup, so before lazysizes kicks in.
possibilities:
* leave as is. easy by but not W3C HTML compliant
* change sizes=”xyz” into data-sizes=”xzy”
* change sizes=”xyz” into data-sizes=”auto”
the two last ones can be tested with a code snippet, interested to try those out? 🙂
frank
Thread Starter
drazon
(@drazon)
Of course always interested 😉
I’ll cook something up, more later today 😉
OK, this one simply replaces sizes= with data-sizes=;
add_filter('autoptimize_filter_imgopt_lazyloaded_img','sizes_experiment');
function sizes_experiment($img_in) {
$noscript_pos = strpos( $img_in, '</noscript>') + 11;
$noscript_img = substr ( $img_in , 0 , $noscript_pos );
$_img = substr ( $img_in , $noscript_pos );
return $noscript_img . str_replace( 'sizes=', 'data-sizes=', $_img );
}
let me know how that works for you 🙂
and this one adds data-sizes=”auto” (removing all the hardcoded sizes);
add_filter('autoptimize_filter_imgopt_lazyloaded_img','sizes_experiment');
function sizes_experiment($img_in) {
$noscript_pos = strpos( $img_in, '</noscript>') + 11;
$noscript_img = substr ( $img_in , 0 , $noscript_pos );
$_img = substr ( $img_in , $noscript_pos );
return $noscript_img . preg_replace( "/ sizes=([\"'])[^\"']*/", " data-sizes=$1auto", $_img );
}
Thread Starter
drazon
(@drazon)
Hi Frank I’ve just tried both, they both work, I kept the first, I don’t know why, I don’t know much for “auto” but I read here https://afarkas.github.io/lazysizes/index.html a few things. It sounds better though. What do you suggest?
Anyway do you consider adding one of those fixes to a next version?
Edit: Now that the sizes issue is fixed can you check the 2 styles
<style>.lazyload,.lazyloading{opacity:0;}.lazyloaded{opacity:1;transition:opacity 300ms;}</style>
<style>.lazyload{display:none;}</style>
Maybe add them in the head?
-
This reply was modified 4 years, 11 months ago by
drazon. Reason: styles w3c
I’ll probably by default keep current behavior and add the 2 other solutions to be activated with a filter drazon.
regarding the CSS; the 2nd one is in <noscript>-tags if I’m not mistaking, so you’re good 😉
I changed my mind (after looking at lazysizes code), AO 2.5.1 will move sizes to data-sizes by default (but can be forced to leave as is with a filter), see https://github.com/futtta/autoptimize/commit/40164effac74cfa1958d133fa28c3bd8bcb60f8a
would be great if you could download the beta & test 🙂
Thread Starter
drazon
(@drazon)
Hi Frank sorry for the delay, I will try it today
Thread Starter
drazon
(@drazon)
Hi Frank yeap I confirm it works fine and I have no w3c errors looking forward to the release of the new version
thanks for the confirmation, feel free to leave a review of the plugin and support here! 🙂
