@graphcommerce/image
v9.0.1
Published
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.
Downloads
6,590
Readme
@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-+)
https://blog.twitter.com/engineering/en_us/topics/infrastructure/2019/capping-image-fidelity-on-ultra-high-resolution-devices.html
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?