This November, I published an article about Image Optimization On Jamstack Sites in Smashing Magazine. In this recap, I want to tell you what it is about, the sections and concepts covered in it, and show you the demo used to demonstrate the theory explained.

Who is this article intended for?

For developers and designers who want to improve the quality and performance of their projects containing images.

Anyone who wants to learn new image optimization techniques, reaffirm their knowledge on the subject, or catch up on the latest trends.

What sections make up this article?

The article comprises 5 sections covering theory, problems in working with images, and their theoretical and practical solutions, ending with a step-by-step case study.

Introduction

It begins with a brief introduction to the importance of web performance today, its relationship to images, and how images impact the health of Jamstack sites.

Fixes to common problems

Then, we present the most common problems when using images in our projects and what would be the optimization technique or theoretical solution for each one of them.

This section talks about the types of compression, the use of next-generation formats such as WebP and AVIF, the mandatory definition of width and height attributes in img and source tags, the optimization of images by device, resolution, and size, the lazy or eager loading technique, and the use of server and client cache.

The benefits of using an Image Service CDN

Next, we show a solution to each of the problems mentioned in the previous section by simply using an image CDN and discovering its simplicity and the advantages, flexibility, and scalability that it provides to our projects.

Case study: Image component in a Jamstack site

And with all the theories presented, it only remained to show an example project of how all these techniques could be carried out using Storyblok as a Headless CMS and image CDN provider. In this part, we present a static site generated by Nuxt 3, a custom image component created with Vue 3 and script setup, although it could be implemented in any other technology.

Resources

• Storyblok space (Duplicate): https://app.storyblok.com/#!/build/172320
• GitHub repository: https://github.com/Dawntraoz-Storyblok/sb-pokemon-gallery
• Live site: https://sb-pokemon-gallery.dawntraoz.com/

Conclusions

Lastly, we raise the importance of constant work on image optimization and maintenance, naming resources that allow you to keep up with the latest trends, testing the status of your images, and providing tips for creating standards in your company.

Official article: If you are interested in the topic and want to know more, read the original article A guide to image optimization on Jamstack sites.

How can this article help you?

This article can help you establish a clear vision of what you need to take your project's images to another level and how to do it in a scalable way. You will learn how to maintain their quality while allowing the user to have the best experience, regardless of device or connection speed.

We would love to hear your feedback on the article. Feel free to contact us through any channel or speak directly to the author at Alba (@dawntraoz).