W3C Validation – srcset attribute

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

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

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 );
}

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 5 years, 6 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 ??

Hi Frank sorry for the delay, I will try it today

no problem 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! ??