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

Introduction

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.

Goals

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.

Note

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