Support for SEO (no script tag)

[Alfrex92]

This package is extremely easy to use and it works perfectly. But, there is one big problem it is not compatible with SEO. What is necessary to give support to SEO is a <noscript> tag below the img.

Describe the solution you'd like

Add the no script tag below the img As an example:

<img class="lazy" src="placeholder-image.jpg" data-src="image-to-lazy-load.jpg" alt="I'm an image!">
<noscript>
  <img src="image-to-lazy-load.jpg" alt="I'm an image!">
</noscript>]

Additional context Note: the ALT attribute should be also in the noscript tag

You can find more info here: Deliver search-friendly JavaScript-powered websites Lazy Loading Images and Video

[bluebill1049]

hey @Alfrex92,

Thanks for report the issue ❤️

it depend on your app weather is server-side render or not? if it's client-side rendering then probably you would only see <noscript /> content under browser source (for entire app). if you have SSR support then it should render out the <img /> with alt tag.

let me know if this makes sense?

cheers bill

[Alfrex92]

I'm using SSR so I'd love if you can add the noscript tag below the img.

Also, I found a performance issue on the CSS

Instead of using transition: all 0.3s ease 0s;

You need to apply the transition to the property that you are being animated, in this case is opacity. So the code should be

transition: opacity 0.3s ease 0s;

More info: https://stackoverflow.com/questions/8947441/css3-transitions-is-transition-all-slower-than-transition-x

Hope that you can fix and add the noscript tag. My company would like to use your library. Also, are you planning to add support to figure and caption?

Thanks 😃

[bluebill1049]

Thanks for reporting transition bit.

I have included noscript for each image, in the following version please test it out

2.2.0-beta.1

[Alfrex92]

I don't see the commit, where can I download the latest version?

Thanks

[bluebill1049]

you can just do this

yarn add react-simple-img@2.2.0-beta.1 npm i react-simple-img@2.2.0-beta.1

I will need some testing tmr, once everything works well on yours and my end, I will publish the version.

thanks bill

[Alfrex92]

i can't install the new version, but it shouldn't be any error with the library. Hope you can publish it soon 😄

[bluebill1049]

react-simple-img@2.2.0 published

[Alfrex92]

it is working, thank you 😄

(I tested with NextJS)

[bluebill1049]

nice thanks, please leave star to the repo if you find it useful to support this package (if you already, thanks again) 🙏