Some issues with gatsby-plugin-image

[quansenB]

Hi,

I wanted to share 3 issues, I came across in my latest project using the new gatsby-plugin-image.

1. On Safari using the same image multiple times, leads to it only being rendered one time, if the others are outside the viewport. Only the first image in viewport is rendered, the others stay their placeholders. This issue can be circumvented by using the same image with different names, but I think this is still worth fixing.

Reproduction:

1. Place image above the fold
2. Place same image outside of the area observed by the intersection observer.
3. View in Safari

Expected result:
All images are rendered fine.

Actual result:
Only first image is rendered.

2. In some older browsers in contrast to the old gatsby-image, gatsby-plugin-image doesn't work. We tested this on older versions of mobile chrome (don't know the version, sorry). I think this is related to intersection observer not being polyfilled by the new plugin, but I'm not entirely sure.

Reproduction:

1. Place same image with gatsby-plugin-image and gatsby-image
2. View in old version of mobile Chrome (Or possible other old browsers. I didn't check)

Expected result:
All images are rendered fine.

Actual result:
Only the image using gatby-image renders correctly.

3. The art direction feature is not working. This is because the calculated aspect ratio is the same for all versions of the image. This is counterintuitve as usually the aspect ratio changes if you want to use responsive images. This can also be circumvented by using multiple images and display: none -ing the image currently not wanted. But to make the feature really usable this of course should also be fixed.

Reproduction:

1. Place two images with different aspect ratios on site using withArtDirection.
2. View both images in their respective breakpoints

Expected result:
Both images are rendered fine.

Actual result:
Only the first image of the withArtDirection array is rendered correctly. The second image is rendered with the same aspect ratio as the first, which leads to a bad user experience.

I hope my findings are of help to you. Feel free to ask any follow-up question.