Gatsby: Remove 3x images from gatsby-plugin-sharp

Created on 20 May 2019 · 7Comments · Source: gatsbyjs/gatsby

From Twitter Engineering blog: https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html

The most modern screens are OLED. These screens boast some really great features like pure blacks, and are marketed as 3x scale. However, nearly no "3x scale" OLED actually has perfect 3x3 pixels per dot on their screen.

This means that most OLED screens that say they are 3x resolution, are actually 3x in the green color, but only 1.5x in the red and blue colors. Showing a 3x resolution image in the app vs a 2x resolution image will be visually the same, though the 3x image takes significantly more data. Even true 3x resolution screens are wasteful as the human eye cannot see that level of detail without something like a magnifying glass.

What does this change look like?

There's no difference that the human eye can see, but will save 38% on data and 32% on latency on the capped image load for this particular example which is reflective of most images that load on Twitter.

So removing support for generating 3x images would both speed up loading images for users & it'd speed up generating the site since it'd be one fewer thumbnail to generate.

This wouldn't be a breaking change since thumbnail generation isn't directly controllable by the users. Thoughts @gatsbyjs/core?

Source

KyleAMathews

👍3

Most helpful comment

Yes! I believe I saw this in a Google io talk too. Let's do it! Let me slap some labels on it.

wardpeet on 20 May 2019

😄2 🚀1

All 7 comments

This seems super easy to implement, and _could_ be reasonably impactful at getting build speeds down slightly.

I'll provide some details for implementation if it helps others.

Details

Remove this line and this line
Use gatsby-dev-cli to test changes pre/post this change
Use a sample project (e.g. examples/using-gatsby-image) to establish the timing of e.g. gatsby build with and without this change