Always use gatsby-image when possible

[bfabio]

We should always use gatsby-image for images when possible (ie. use <Img> objects).

fe. Images at https://cloud.italia.it/notizie/ don't use gatsby-image, we should fix that.

[dptdgi]

@bfabio still relevant? Please point out wrong and suggested usage!

[bfabio]

@dptdgi yes

Take a look at the home page, the images are loaded only when they are about to enter the viewport:

https://github.com/italia/cloud.italia.it-site/assets/788293/11201662-ff86-4ef2-aa07-8a99e00bb132

Whereas https://cloud.italia.it/notizie/ loads all the images as soon as you go there:

https://github.com/italia/cloud.italia.it-site/assets/788293/8dc291d1-05bf-4486-95f2-a992310b12a9

In general, if the image:

• doesn't have a placeholder while it loads
• loads immediately even if it's at the bottom of the page
• is not automatically resized at build time (see this one for example: https://github.com/italia/cloud.italia.it-site/assets/788293/ef7ff5ce-d307-4bcb-9707-8f2ec6ca1fb3)
• does not use the configured optimal format (avif, webp)

they are not using gatsby-image.

[dptdgi]

Thanks @bfabio, I was thinking about pointing out the issue in the code. Thanks for the effort in showing the problem in the UI. I guess the tag < img > is used instead of < StaticImage >