How did we reduce image load times in 5 minutes?

Kayahan Güven
Insider Engineering
3 min readDec 30, 2020

Insider has lots of partners (customers) using images through it’s platform. Sometimes these images may be very big and may slow down the website’s load time. So in that place, we need to figure out a solution for compressing images.

After a small research, we decided to take a look at webp format.

But first, why Image Compression is important?

  • Faster website loading
  • Reduce users’ internet quota usage
  • Increase SEO rank
  • Reduce network traffic

What is webp format?

Webp is the a compressible image format which is developed by Google. It has wide support by browsers. According to caniuse.com global support is 87%.

Smashing Magazine’s “The WebP Manual” by Jeremy Wagner

Normally, if you are not using any third-party tool for serving files, like CDN services, you should convert images to different formats -including webp- during the upload phase and store them in your storage(Server, Amazon S3, etc.) by yourselves. Then you can show images according to the user’s browser by fetching different formats from the backend. While doing that, you should take browser support into consideration for different formats of images.

With Cloudflare Polish, you don’t need to think about users’ browser support. You don’t need to store two types of images and you don’t need to upload webp version of previously uploaded images.

What does Polish provide us?

  • Takes care of your user's browser and shows what they do support.
  • Caches your images with two formats.
  • Provides two options lossless and lossy.
  • Supports GIF format beside PNG and JPG ones.
PNG vs Webp
JPG vs Webp

Benefits of Polish

  • Zero code development.
  • Previously uploaded images are covered.
  • Automated browser support.
  • No need for extra storage.

Activating the Polish over Cloudflare

  1. Open Cloudflare Dashboard.
  2. Select Domain where you activate Polish Compression.
  3. Choose Speed App.
  4. Scroll down the Polish.
  5. Select lossy or lossless.
  6. Done!

Conclusion

Everything affecting performance does matter and user expectations are increasing every day. Image optimization is a small part of this expectation. Small changes can make huge impacts on your services, your customers and users. Always track your performance and, if you see a problem, optimize it!

If you want to be a part of us, check out our career page!

--

--