Optimizing Images for the Web

Serving up images make up a big part of the web and can be as simple as moving the image to your projects /assets folder and sticking the image path in the <img>’s src attribute.

Easy right?

Well… One issue that could occur is that the image that is presented on the viewport is too big in file size. This causes the image the slowly load while the rest of the webpage has already loaded and violates one of the Core Web Vitals of Largest Contentful Paint.

Optimizing requires a few steps to be taken so that images sent to the user are efficiently “presented” on the viewport so let’s dive in a few ways to optimize your images so that they can be served to your users in an efficient and quick way.

Quality

Lossless vs Lossy

Ideally you don’t want to lose any quality presenting an image but the fact is, you will have to choose between speed vs. quality. A couple of tips for selecting compression type:

Image File Size

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.

Imgix, Cloudinary, ImageKit offer free service plans that can transform your images on the fly and deliver optimized images that will load quickly on the viewport. For personal projects, I use Cloudinary and it’s been able to bring down some of my image sizes from 1.2mb to ~67kb, which makes a significant difference.

Compression is the first thing you want to do to your images to reduce file size and Cloudinary offers the quality (q_auto) transformation without noticably degrading the image quality too much.

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 Dimensions

Here I’m going to talk about the actual width and height of the image you want to display. If compression and reformatting does not give you the size you’re looking for, you can change the height and width of the images before they’re displayed on the website.

Image File Types:

Two general rules I found while digging up how to properly serve up images on the web is:

• JPEG for photos
• WebP for computer generated images (charts, branding and logos)

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.

Mac Quick Actions

Windows user skip this.

Finding this saved me downloading GIMP or using an image manipulator to decrease the size of my images without losing too much quality.

Open your images in Finder, you can convert your images to a smaller size with finder Quick Actions by Ctrl + clicking on the image to open up the menu, go down to Quick Actions and choosing Convert Image. From here you can convert your image format as well as pre-defined sizes, this should significantly lower the size of your images and “pre-optimize” before you hand it off to your image service.

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.