[gatsby-plugin-image] Blurred placeholder does not respect attention cropping

Description

I have a static image:

<StaticImage
  alt="My alt"
  aspectRatio={360 / 288}
  formats={["auto", "webp", "avif"]}
  layout="constrained"
  width={640}
  placeholder="blurred"
  src="./my-image.jpg"
/>

having, by default, transformOptions={{fit: "cover", cropFocus: "attention"}}.

The generated blurred placeholder image does not have the same cropping as the final image.

One can see that the wheel is not as the same place.

I tried the entropy, but it leads to a different cropping for the final image, and the placeholder one’s is still not the same.

Steps to reproduce

Take this picture:

Use it with a small size and an aspect ratio of 1 to emphasize the issue:

<StaticImage
  alt="My alt"
  aspectRatio={1}
  layout="constrained"
  width={300}
  placeholder="blurred"
  src="./my-image.jpg"
  transformOptions={{fit: "cover", cropFocus: "attention"}}
/>

Expected result

Wheel should be aligned 😉

The plugin should apply the cropping, then generate the placeholder (wheither it’s blurred, traced svg…)

Actual result

Wheel are not aligned.

Environment

Run gatsby info --clipboard in your project directory and paste the output here:

 System:
    OS: macOS 11.2.1
    CPU: (8) arm64 Apple M1
    Shell: 5.8 - /bin/zsh
  Binaries:
    Node: 15.11.0 - /var/folders/fc/fqf9t2nn1wb4fy216v7jkdyw0000gn/T/yarn--1615202496627-0.34340404333252783/node
    Yarn: 1.22.10 - /var/folders/fc/fqf9t2nn1wb4fy216v7jkdyw0000gn/T/yarn--1615202496627-0.34340404333252783/yarn
    npm: 7.6.0 - /opt/homebrew/bin/npm
  Languages:
    Python: 2.7.16 - /usr/bin/python
  Browsers:
    Chrome: 88.0.4324.192
    Safari: 14.0.3
  npmPackages:
    gatsby: 3.0.3 => 3.0.3
    gatsby-plugin-canonical-urls: 3.0.0 => 3.0.0
    gatsby-plugin-catch-links: 3.0.0 => 3.0.0
    gatsby-plugin-eslint: 3.0.0 => 3.0.0
    gatsby-plugin-image: 1.0.0 => 1.0.0
    gatsby-plugin-react-helmet: 4.0.0 => 4.0.0
    gatsby-plugin-react-svg: 3.0.0 => 3.0.0
    gatsby-plugin-sass: 4.0.2 => 4.0.2
    gatsby-plugin-sharp: 3.0.0 => 3.0.0
    gatsby-plugin-sitemap: 3.0.0 => 3.0.0
    gatsby-plugin-typescript: 3.0.0 => 3.0.0
    gatsby-source-filesystem: 3.0.0 => 3.0.0
    gatsby-transformer-remark: 3.0.0 => 3.0.0
    gatsby-transformer-sharp: 3.0.0 => 3.0.0

Tell me if I can be of any help.

[ascorbic]

This seems to be happening because running the attention algorithm on the 20px image yields a different result from the larger image. The way around this would be to use the main output image as the source for the placeholder, rather than the input image as we do now.

@marcelscruz That is a different issue

[LekoArts]

Hi!

I’m closing this as a stale issue as in the meantime Gatsby 4 and related packages were released. You can check our Framework Version Support Page to see which versions currently receive active support. If this is a feature request, please create a discussion as we moved feature requests from issues to GitHub Discussions.

Please try the mentioned issue on the latest version (using the next tag) and if you still see this problem, open a new bug report. It must include a minimal reproduction.

Thanks!