Why you should optimise images before upload

Originally published: 31 December 2023

Save big on bandwidth by optimising images before you deploy your web app

Optimizing Images Before Upload for Maximum Performance

When adding images to your site, it’s tempting to simply throw them into an image CDN or optimizer as-is. But taking a few minutes to optimize your images beforehand can make a dramatic difference in site performance, cost savings, and overall efficiency.

The Problem With Unoptimized Images

What happens when you upload uncompressed, unoptimized images to a service like Cloudinary or Vercel’s Image Optimizer?

A few issues arise:

• Slow performance - Unoptimized images are much larger, slowing down load times.
• Costly bandwidth - Large images rack up your CDN’s bandwidth and transfer costs.
• Layout shifts - Browser has to reflow the page as unoptimized images load.

For example, here’s a nice hero image I might use on my site:

At 4MB and 4829x3198 pixels, this uncompressed PNG is much heavier than needed for a web hero image.

Uploading images like this has consequences:

• My site will be slower - Users wait longer for massive images to download.
• Higher CDN costs - More bandwidth consumed for unnecessary pixels.
• Page layout shifts - Browsers reflow text and elements as big images load.

Optimizing images ourselves before upload avoids these pitfalls.

Optimizing For The Web

Before uploading any image, we should:

• Resize to the display dimensions needed, no more.
• Set appropriate Image Quality - 80% is good for JPGs.
• Use Next-Gen Formats - WebP, AVIF when possible.
• Set Explicit Widths - For proper image sizing.

Here’s how I might optimize the hero image for web use:

• Resize to 1000 x 600 pixels (display size needed).
• Set quality to 80% to compress reasonably.
• Save as AVIF for supported browsers.
• Set width to 1000 pixels for layout.

This produces an optimized hero image:

The file size is now just 107KB, 5% the size of the unoptimized original.

By doing this optimization manually, I get huge performance benefits:

• Faster load times - Website feels snappier.
• Lower CDN costs - Less bandwidth consumed.
• No layout shift - Browser renders page correctly immediately.

Just a little effort upfront to optimize brings big speed and cost rewards!

Optimizing For Each Use Case

To really maximize gains, we can tailor optimization to each image’s specific use case on the page:

• Hero images - Moderate resize, 80% quality, next-gen formats.
• Article images - Resize to fit content column, 60% quality.
• Logos/icons - SVG format, or PNG for fallbacks.

Dialing in the best settings for each image purpose gives us site performance perfected.

Yes, image CDNs will do optimization automatically. But by handling it ourselves first, we save bandwidth and deployment time while delivering the fastest experience to our users. That’s why optimizing your own images is worth the small extra effort.

Share This Page

Facebook Twitter Email

Back To Blog