Responsive images inside of posts (or how to score 100 on Lighthouse performance)

I have recently asked around the forums here to figure out how to leverage responsive images inside of post content.
Here is the answer.

This way part of an experiment of reaching 100 points on the Lighthouse performance test, which I wanted to do to see how it can help in creating a better and more efficient web by empowering the creators of the sites.
In addition to the technical solution I have also documented some rationale behind doing this and my takeaways at https://maximilianehlers.com/lighthouse-for-performance-and-sustainability/ .

Quick conclusion:

The 1 point on the performance scale does not outweigh the actual realities and integrations that we face in the wild today, but can surely give a good indicator for possible improvements.
That is the general idea that I am getting of lighthouse as well.
It is a great tool and finally some good news from Google.
It is not perfect, but can give some great feedback to pick low hanging fruits.

Maybe it can help some of you out :)

2 Likes

Love it!

I think you’ve got the link to your blog wrong though. You’re missing /blog/

https://maximilianehlers.com/blog/lighthouse-for-performance-and-sustainability/

Also you’d probably dig this site https://solar.lowtechmagazine.com/

I have nothing to do with it, just think it is cool.