[Enhancement] Add <noscript> for SEO

[Alfrex92]

Hi, I love this plugin and this is the best way to do lazy loading for Wordpress.

As an enhancement, it would be great to add a noscript tag for SEO.

As an example

<!-- An image that eventually gets lazy loaded by JavaScript -->
<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load.jpg" alt="I'm an image!">
<!-- An image that is shown if JavaScript is turned off -->
<noscript>
  <img src="image-to-lazy-load.jpg" alt="I'm an image!">
</noscript>

You can find more info here.

Thank you :D

[Lorti]

Hi Alfredo! I have released a new version of https://wordpress.org/plugins/dominant-colors-lazy-loading/. Can you please test if it works for you?

[Alfrex92]

Thank you so much for your quick response.

I just test the plugin and I found the following:

Srcset is being added in img src

<img class="size-full wp-image-1284" src="https://mipon.org/wp-content/uploads/2018/12/Maho-Hiyajo_AkihabaraJR-station.jpg" alt="Maho Hiyajo in front of Akihabara JR Sation" width="862" height="485" srcset="https://mipon.org/wp-content/uploads/2018/12/Maho-Hiyajo_AkihabaraJR-station.jpg 862w, https://mipon.org/wp-content/uploads/2018/12/Maho-Hiyajo_AkihabaraJR-station-300x169.jpg 300w, https://mipon.org/wp-content/uploads/2018/12/Maho-Hiyajo_AkihabaraJR-station-768x432.jpg 768w" sizes="(max-width: 862px) 100vw, 862px" />

And according to google it should look this

<img src="https://mipon.org/wp-content/uploads/2018/12/Maho-Hiyajo_AkihabaraJR-station-768x432.jpg" alt="Maho Hiyajo in front of Akihabara JR Sation">

I wrote a code that I'm using for my thumbnails where I am adding the no-script tag. I think you can use it as a reference :D

function lazy_thumbnail ($post, $myclass = '') {
    $class = 'lazy-load';
    if($myclass) $class .= ' ' . $myclass;
    //Get thumbnail source
    $thumbnail_id = get_post_thumbnail_id( $post->ID );
    $alt = get_post_meta($thumbnail_id, '_wp_attachment_image_alt', true); 
    $srcset= wp_get_attachment_image_srcset( get_post_thumbnail_id($post->ID), 'medium' );
    $image_alt = get_post_meta( $post->ID, '_wp_attachment_image_alt', true);
    $thumb = wp_get_attachment_image_src(get_post_thumbnail_id($post->ID), 'medium');

    $src = $thumb['0'];
    echo '<img data-src="'.$src.'" data-srcset="'.$srcset.'" class="'.$class.'" alt="'.$alt.'"/>';
    echo '<noscript src="'.$src.'" alt="'.$alt.'"></noscript>';
}

I noticed something else that is not related with noscript tag.

When adding a caption to the img, the img is being "reflow".

For example:

Loading https://imgur.com/YXbB58r

After loading: https://imgur.com/P17xv2E

[Lorti]

Why shouldn't we add srcset to the

What do you mean by "reflow"? That the image changes size as soon as it’s loaded? What type of placeholders are you using? Only SVGs preserve the aspect ratio of images. If you're using GIFs you might have to adapt your theme.

[Alfrex92]

You have a good point.

In their website google only mentioned that the src & alt should be included. I don't know if adding the srcset will cause any problem.

But, regardless of the SEO, I think that getting rid of the srcset in the noscript tag will reduce a lot the size of the HTML file. Don't you think?

Yes, the img size changes. Let me test it again. I will also check my CSS :D

[Lorti]

It will reduce the size of the HTML, but can negatively impact the size of the page overall, when larger images are loaded because of the missing srcset. I also don't think that it matters a lot with gzipped HTML?

This could be another checkbox, but I think it might make the plugin more complicated than necessary.

Also with the srcset in the noscript tag the image is what WordPresw would serve by default, which is also nice.