Optimize images for faster web

Table of contents

At my current company, we develop a Content Management System (and a website builder) and image uploading is one essential feature of the system. If you have worked with non-tech users before, you will know that it's next to impossible to expect them to understand and follow your guidelines. Asking users to optimize images before uploading them is also very inconvenient for users.

Image optimization options

I considered several images optimization options:

  1. On the fly: there are services such as https://cloudinary.com/ that can optimize images in real-time. However, these services can be a bit expensive and can add unexpected service interruption factors (what if their service goes down for example)

  2. Pre optimization: optimize the images as soon as they are uploaded by the users, then store these optimized versions.

In the end, I decided to go with option 2. It gives a nice balance between speed and cost. Since storage is cheap and bandwidth is virtually free (with the help of Cloudflare CDN), I can afford to generate many variations of the same original image and store them.

Another benefit of processing images is that we can mitigate the risk of the original images containing malicious code that can pose security risks.

Image optimization process

When a new image is uploaded, a background task is queued to process this new image. This process can take several minutes during which the image is not available for view yet.

Our current process is:

  1. Image is uploaded to a temporary location.

  2. Image is processed to create optimized variations.

  3. Variations are uploaded to public storage for serving.

  4. The original image is uploaded to private storage for backup.

At first, we started with using ImageMagick to process these images. Unfortunately, ImageMagick did not do a very good job at optimization (probably because there are so many options and it's difficult to pinpoint the best options combination). ImageMagick is also a resource hog, it uses up our CPU and Memory resources to process images.

I was looking around and found ShortPixel to be a good alternative for image optimization. Its package is quite generous, and it offers a quite good result. I decided to just resize images with ImageMagick, then optimize with ShortPixel. This new process allows us to process much more images with lower resource requirements.

Eventually, we ran into some other issues:

  1. ShortPixel can be very slow sometimes. There are times when it just throws an error at us.

  2. We need a backup solution just in case.

  3. ImageMagick is still very resource-intensive.

This is our current solution:

  1. Libvips: it's a much more lighter solution to process images, we mainly use it for cropping, changing the size of the images.

  2. Spatie Image Optimizer: a php wrapper which utilizes multiple libraries to optimize images.

We are also considering GraphicsMagick which is a fork of ImageMagick (and claims to be much more faster).

On the side notes, I recommend putting all user-uploaded files to a storage system such as S3 and serving them from there. This way, you have one less security issue to worry about (while it's note 100% safe, the file is not on your server).