@graphcommerce/image v8.0.5
@graphcommerce/image
Since we're using a ton of images on the website we wanted to optimize the
images further than what next/image
has to offer.
Goals
Only provide an image, no wrapping divs which changes how images work.
Support the next/image layout properties.
Optimize images further than what next/image does.
Optimizing the images on high dpi sreens (1.5x-2.5x)
It seems that it doesn't really matter if we lower the quality of images for 2x screens. So we lowered the quality to 44 as recommended.
To view the difference between quality=100 and quality=44, open this on a high dpi screen: https://u5uol.sse.codesandbox.io/ and see the difference between the 'High resolution' variants.
Serving the right images for low dpi screens (1x)
Jake Archibald's blog https://jakearchibald.com/2021/serving-sharp-images-to-high-density-screens/ recommends serving high quality, but low resolution images on low dpi screens: high resolution screens and low resolution screens
- high dpi screens need
high res
images but it is very acceptable to havequality=44
images quality=80
: low dpi screens needlow res
images but also need to have high quality images.
In our testing
(code),
for low dpi screens it doesn't really seem to matter if we serve
high res, quality=44
.
Advantage: We need significantly less resizes, which is good for the backend.
Disadvantage: The image size for the low res, quality=44
images is about 30%
larger than high res, quality=80
We deemed this to be acceptable for desktop as internet connections are fairly acceptable and we're winning a great deal by lowering the quality already.
Capping image fidelity on ultra-high resolution devices (2.5x-+)
Defaulting to 50vw the sizes attribute <img sizes=".."/>
The sizes
attribute allows browsers to download images even before the CSS has
finished loading. This means that the browser is able to download images as
early as an img with only an src attribute.
When the browser starts to load a page, it starts to download (preload) any images before the main parser has started to load and interpret the page's CSS and JavaScript. Why can't we just do this using CSS or JavaScript?
4 days ago
8 days ago
10 days ago
10 days ago
11 days ago
17 days ago
17 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
18 days ago
21 days ago
21 days ago
21 days ago
23 days ago
23 days ago
23 days ago
28 days ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
1 month ago
2 months ago
2 months ago
2 months ago
2 months ago
2 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
3 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
4 months ago
5 months ago
5 months ago
5 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
10 months ago
10 months ago
10 months ago
10 months ago
6 months ago
7 months ago
7 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
7 months ago
8 months ago
7 months ago
7 months ago
7 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
5 months ago
5 months ago
5 months ago
9 months ago
9 months ago
10 months ago
10 months ago
9 months ago
10 months ago
6 months ago
10 months ago
6 months ago
10 months ago
10 months ago
10 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
9 months ago
6 months ago
6 months ago
9 months ago
8 months ago
9 months ago
9 months ago
8 months ago
8 months ago
8 months ago
8 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
8 months ago
9 months ago
6 months ago
9 months ago
6 months ago
8 months ago
9 months ago
6 months ago
9 months ago
9 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
6 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
12 months ago
12 months ago
1 year ago
1 year ago
12 months ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
1 year ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
2 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago
3 years ago