[gatsby-plugin-image] - Not possible to setup dynamic different sized images for images withArtDirection

[galileo]

It is not possible to create an image with dynamic sizes if we would like to have images with different aspect ratios at different breakpoints.

In the documentation, there is some hack that tries to aim these issues with some CSS rules but this is not flexible enough

https://www.gatsbyjs.com/docs/reference/built-in-components/gatsby-plugin-image/#withartdirection

@media screen and (max-width: 1024px) {
  .art-directed {
    width: 400px;
    height: 300px;
  }
}

But this makes the image fixed to the sizes which we will force in CSS.

The main issue here is that we can not control for each breakpoint the thing which will be produced from the Sizer component. Sizer creates only one image placeholder for the main image, but if we could control it through some property to create different placeholder images. Would be great.

There is also one additional temporary solution that would work a little bit more elastic than the recent one. Instead of giving the image fixed sizes for a breakpoint, we can overwrite the src property for the placeholder image like that:

@media screen and (max-width: 1024px) {
  .art-directed {
      [role='presentation'] {
        content: url("data:image/svg+xml;charset=utf-8,%3Csvg width='400' height='300' xmlns='http://www.w3.org/2000/svg' version='1.1'%3E%3C/svg%3E");
      }
  }
}