Optimizing Images for the Web

One issue that occurs often is that an image that is presented on the page is too big in file size. This causes the image to slowly load while the rest of the webpage has already loaded and violates one of the Core Web Vitals of Largest Contentful Paint (LCP).

Optimizing requires a few steps to be taken so images are efficiently “presented” on the page, balancing quality vs. performance.

So let’s dive into a few ways to optimize your images.

Quality vs. Performance

Ideally you don’t want to lose any quality presenting an image but the fact of the matter is you will have to choose between quality vs. performance. This can be more easily read as choosing between file size and picture quality with the ultimate goal of having a balance between the two.

If you deliver full size images and rely on browser-side resizing (using CSS or HTML width and height attributes), users are forced to unnecessarily download large images. Therefore, images should always be delivered from the server at their final size through transformations.

Imgix, Cloudinary, ImageKit offer free service plans that can transform your images on the fly and deliver optimized images to fit your needs. I’ve used Imgix for past projects and it’s been able to bring down some of my image sizes without too much of a loss in quality with more options than I know what to do with.

Cloudinary q_auto Imgix auto_format

Even before you use Cloudinary’s q_auto feature, you can reduce the file size by using apps such as Image Shrinker or MacOS’ Quick Actions to reduce file size without sacrificing image quality.

Reducing the file size to around ~900kb before uploading to a third-party service would greatly help in reducing the size further with the help of features from the services listed above. Shooting for below 200kb is the goal and would serve up the images without taking up too much bandwidth.

Make sure to check your browsers Network tab see the size of the images being sent and tweak any features that could reduce the image file size without sacrificing too much of the quality.

Image File Types:

These rules aren’t set in stone but you can check out MDN’s Image Types documentation to get more information on the image formats and which format would best fit your needs.

References

Cloudinary (2020) “Image Optimization for Websites…”, Cloudinary Team, June 30, 2020.

Apple (2023) “Mac Quick Actions”, MacOS User Guide, accessed on May 30, 2023.