Image optimization services intro

Learn about image processing service providers here. What is that? Which problem is solved? Which options and alternatives are available?

Scope and disclaimer

This is a quick overview about the service genre. This is not a deep comparison or a step by step integration guide. The author has only little or no first hand experience with the services themselves. There is no business association.

What is image hosting as a service?

An image processing service is a convenient mix of tool to easily deliver images for your website. It usually consists of a Content Delivery Network (edge caching) and an image transformations engine (image sizes on the fly). It fits nicely in a micro service oriented architecture. There is also an easy to use API usually just by passing URL parameters. Consider requesting a thumbnail version of an image like so: image.jpg?height=400&width=400&mode=crop.

What problem does image hosting solve?

Faster websites

Images are often the biggest byte chunks of websites. That's why you want your images to be as small as possible and you only want to deliver sizes a certain visitors will require. Also you want the images to be served from a location that is near by the visitor.

Better hosting resource usage

Your hosting service has limits. Here at fortrabbit, our Apps are designed for web fast delivery processes. When you upload photos to a CMS, these images need to be processed to multiple formats:

  • A thumbnail and large version
  • Multiple sizes for end devices with different resolutions
  • Multiple image formats for different browser engines, webp and jpg

So one uploaded original image might result in 20 images files for web delivery. Here is a simple example HTML markup for a full size image that can be served in 4 different sizes and two formats (webp and jpg):

<picture>
  <source 
    type="image/webp" 
    srcset="
      cute-cat-pic-2700x1209.webp 2700w, 
      cute-cat-pic-1800x806.webp 1800w, 
      cute-cat-pic-900x900.webp 900w, 
      cute-cat-pic-600x600.webp 600w" 
    sizes="100vw"
  />
  <source 
    srcset="
      cute-cat-pic-2700x1209.jpg 2700w, 
      cute-cat-pic-1800x806.jpg 1800w, 
      cute-cat-pic-900x900.jpg 900w, 
      cute-cat-pic-600x600.jpg 600w" 
    sizes="100vw"
  />
  <img 
    src="600x600/cute-cat-pic-600x600.jpg"
    alt="Cute cat pic" 
  />
</picture>

With standard web servers image crunching is usually done by open source tools like ImageMagick or GD. Image transformation is a CPU heavy task that can take some time (even seconds!) until executed and it can also use a lot of memory. Calling image libraries is wrapped in PHP on webhosting services like ours. That means a PHP process is occupied until an image is converted. Good news is, once an image version is created, it can be stored on disk for later usage.

With suboptimal configuration (crazy eager loading, too many sizes) and/or wrong settings (no cache on disk) and/or extensive use (super large source images or many images) this can lead to serious web delivery problems or even ends in 504 time-out errors.

In addition to standard image processing, additional tools (jpegoptim, optipng, pngquant, SVGO, gifsicle) to further optimize images are popular among performance aware frontend developers these days. These tools are often requiring a lot of processing power and are therefore not available here.

How an image hosting provider works

Most image hosting service work as an "origin pull CDN" at it's core. That means images are getting uploaded as usual with your CMS like so:

  • yourdomain.com/uploads/newimage.jpg

Then you configure the image hosting service to use that folder. With the templates of your files instead of using a relative path on the domain of the website use an external link like so:

  • user.imageprovider.com/uploads/newimage.jpg

In addition you can setup a sub-domain so you don't have to use the domain of the image provider:

  • cdn.yourdomain.com/uploads/newimage.jpg

After that you can use URL parameters to grab a different versions:

  • cdn.yourdomain.com/uploads/newimage.jpg?height=400
  • cdn.yourdomain.com/uploads/newimage.webp?height=400

Additional flavors and features are available.

Image hosting providers overview

Here is a list of some image optimization services:

There are client libraries for programming languages. There are also plugins for popular CMS such as WordPress, Craft CMS or Shopify and Magento to easily include the services. Some providers can also integrate an AWS S3 bucket. Most will have HTTP/2 or even HTTP/3 support. Some might have AI/ML tools for art directed cropping or automated tagging. Some also offer video encoding.

Comparing prices is a bit hard, since vendor are using individual pricing models - most are usage based (pay as you grow).

Alternatives

CDN

While there are dedicated image processing services, the service offering can also blend with other services. Some CDN providers are also providing image transformations services:

That might be convenient since it might be a one stop shop for you.

Transform images on the web server

For normal usage you can still use your general purpose web server to do the job.

Run your own

You can also host your own worldwide image transformation service. Imaginary is open source software written a Go.

Others

You can also tinker together something alike on your cloud infrastructure provider using serverless functions. On AWS there is some Serverless Image Handler glue.

My experience

Are image transformations services are worth the money and the efforts?
It depends!

You should definitely look into this when you are running a successful e-commerce site. Sometimes using such a service can be a economic choice: pay some more for the image service while paying less for the web hosting itself.

I do a lot of client support for our hosting platform. I often get requests for advanced image optimization because people see a bad Lighthouse score or they have read some article like Creating optimized images in Craft CMS. That's a reason why I write the blog post.

I would also like to see that people are first trying to take full advantage of the tools available before thinking about further optimization. Often the jpg compression level can be set to lower level when images are scaled down. Sometimes I see that images are not served in optimal sizes and resolutions. Sometimes I see other performance issues that might be fixed first.

My tip: Prioritize the areas of your website performance optimization. Go for the low hanging fruits first. Image sizes can play a major role. But before considering outsourcing image transformation, see what you can do with existing tooling and some creativity.

Cute cat pic by Tracie Hall via Flickr

Share & discuss this: