search

pageboard / client

Web site building system - client packages
MIT License
4 stars 0 forks source link

Images improvements #29

Open kapouer opened 6 years ago

kapouer commented 6 years ago

Before anything else, use Accept and Vary on it to send back an image with the best available format.

Then: improve our lazy-loading to follow more closely client hints ! https://developers.google.com/web/updates/2015/09/automating-resource-selection-with-client-hints https://cloudinary.com/blog/client_hints_and_responsive_images_what_changed_in_chrome_67

Upcache 1.1 is also ready for this.

For future thoughts: https://developer.mozilla.org/en-US/docs/Web/API/Network_Information_API https://dev.to/addyosmani/adaptive-loading-improving-web-performance-on-low-end-devices-1m69 https://csswizardry.com/2023/09/the-ultimate-lqip-lcp-technique/

https://css-tricks.com/preventing-content-reflow-from-lazy-loaded-images/ avoid reflows using inline data-uri with svg having same ratio.

<img importance="high"> https://wicg.github.io/priority-hints/

kapouer commented 5 years ago 
const placeholderSrc = (width, height) => `data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 ${width} ${height}"%3E%3C/svg%3E`
kapouer commented 5 years ago

There is also much to be learnt from http://www.bl.uk/manuscripts/Viewer.aspx?ref=sloane_ms_278_fs001r the viewer uses non-blocking, cancellable, progressively loading images data to display in a canvas.

For more "classic" lazy loading, https://github.com/aFarkas/lazysizes seems to be popular.

kapouer commented 3 years ago

Also a nice reference for latest technologies: https://www.industrialempathy.com/posts/image-optimizations/