Open bigfatbird opened 3 years ago
I'd be in favor of lazy-loading and some more optimization, be we do already optimize images in the page as much as possible without losing visual fidelity—the "issue" is that there's a ton of them because it's a big, visual post about the release and all the visual changes therein. The blog template repo is at github.com/elementary/blog-template, so I'll transfer this there and that would be a good place to experiment with lazy loading.
What Happened
Not sure if this belongs here (did not find a dedicated blog repo) but I checked the elementary blog out and the post for the odin release was 43(!)Megabyte in size, and other post include several images with more than 1meg in size and this is really not so smart using all the visitors bandwith (some are on metered connections and have no unlimited data plans).
Google Speed Analyser also says to optimize images:
Expected Behavior
blog.elementary.io should not use such big images
Steps to Reproduce
Logs
Platform Information
Suggested solution
Solution would be to use compressed images where no absolute high quality media are neccessary and maybe some lazy loading here and there. You could also detect display sizes and use different images on desktop and mobile. Look into srcset https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/srcset, this allows you to use high quality on larger screen sizes and another low quality on mobile for example.
I also think some automation could solve this.. not sure what jekyll-developers are using for this though.