a galaxy background, lots of image icons laying around, in the center there is a rocket launching up

I Boosted the Site's Performance with Better Images

Published on:

I optimized the images on my personal blog. Let me tell you the goals of this series.


On this site you are reading, every blog or series has a thumbnail. These are used no matter what and loaded in for everyone. They are also present in the OG meta tags.

Because of their high usage it is essential to optimize them by creating responsive images. It is good for the client and the server too. The client gets a better performance (load time). The server’s bandwidth will not be overloaded.

Before the update I made, I had to manipulate images manually. Compress and remove metadata from them. It was really annoying. I automated this process (also made it better). In this series I will share how I’ve done it.


There will be two parts of the implementation. First, in order to use different sized images, they need to be generated. Second, use our new fancy images on the site. More details can be seen in each part of the series.


I am using the Astro web framework, so some parts of the series will be Astro specific. I am going to use typescript.

Read more

card list icon, zoom in icon, clock icon, copy icon, with a nice mountain view in the background

Series Feature, Zoomable Images

Pi Alarm title, a time input with apply button next to it, a text input with stop button next to it, cobweb in the background

Finish Line, Web Interface of My Sunrise Alarm