Images on blog.elementary.io should be web-optimized

[bigfatbird]

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:

1. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-released%2F
2. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-beta-2%2F

Expected Behavior

blog.elementary.io should not use such big images

Steps to Reproduce

1. Visit blog.elementary.io with opened network utility in dev-tools of browsers.
2. Inspect download size of website

Logs

1. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-released%2F
2. https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fblog.elementary.io%2Felementary-os-6-odin-beta-2%2F

Platform Information

1. None

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.

[cassidyjames]

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.