Image Optimization

Let’s dive into the world of image optimization and its role in delivering lightning-fast web content.

In the digital landscape of 2023, disparities in internet speeds persist, affecting how users access content in different locations. The user that is in a city will have much faster internet speeds than the user in a remote area. As developers of the internet, we must think about these users and ensure that they both have good load times, and a great user experience navigating around the web.

Large files, like images, encounter hurdles traversing slower internet connections. This was a big issue in the early days of the internet, where images would load slowly from the top down of your page. While CDNs and caching improved image loading, the challenge is still present.

Some different approaches that have emerged to address this challenge are:

• Reducing the size of the image down to kilobytes,
• Using pre-loaders,
• Using skeleton loaders,
• Using Blurry images at first, then swapping them with Hi-res images once loaded.

The examples above have their tradeoffs, and a solution that works for me, may not work for you, or vice versa. If you prioritize your Google Ranking and indexing, then stay away from pre-loaders and skeleton loaders!

In my recent migration from Gatsby.js to Next.js v14, I encountered this challenge. Gatsby’s Image component had set a high bar, prompting me to seek a compatible solution for the new version. After some research, I committed to the method of using blurry images at first, then transitioning to Hi-res versions. Read more about it here.