Image optimization

WebSonic.io provides automatic image optimization out of the box. When enabled, all image files with extensions - jpg, jpeg, webp, png, svg or gif are optimized on the fly.

How to enable image optimization?

Go to performance section in the configuration editor and enable the image optimization module setting.

Optimization settings

Processing region

When image optimzation is enabled, your image requests are handled by dedicated image processing servers. This is where the image content is fetched from origin server and optimized for delivery.

Tip Choose a region which is closest to your origin server in terms of latency. This will result in quickest time to first byte (TTFB) for fresh requests. The subsequent request for the same image resource will be served from CDN cache.

Currently you can choose from 6 different regions. In future we can add more regions.

  1. Sydney (Australia)

  2. Frankfurt (Europe)

  3. Mumbai (India)

  4. Singapore (Singapore)

  5. North Virginia (United States)

  6. North California (United States)

Automatic format conversion

When this setting is enabled, WebSonic.io will automatically convert the image format to WebP, or JPG based on:

  • Image content (transparency check for PNG images)

  • Available format support in the requesting browser (WebP support)

Please note that the URL of the image remains same but the encoding is changed. However, you can check the content-type header in response to see the actual image format.

If you don't want to enable this setting globally, you can keep this disabled and still do it on an image request by using f-auto parameter in the image URL.

Quality optimization

When enable, WebSonic.io will change the quality of the image to default quality setting specified by you.

For most cases you can keep the default quality at 80. Certain industries, like the e-commerce industry, are slightly more sensitive towards the image quality and prefer to have it set to a slightly higher number like 85 or 90.

You can override the quality of an image by specifying q parameter in the image URL. When you don't specify any q parameter in the image URL, the default quality setting specified here will be picked.

Support Data saver mode

If a user has enabled the data saver mode in the browser, WebSonic.io compresses the image even further to ensure faster delivery and lighter resources for that user. If a user doesn’t use the data saver mode, he continues to get the same image as all the other users. The same URL is used to cater to different performance requirements of different users.

If this setting is enabled, WebSonic.io can serve a low quality variant of the requested image.

Device based settings

Device based image dimension restriction

This setting, if enabled, ensures that images delivered on desktop and mobile devices are not larger than the dimensions specified.

For example, if you enable this setting and set the maximum mobile dimensions at 900x900, and try loading an image that is 4000x3000 on your mobile website, then WebSonic.io will automatically resize it down to 900x900, without you specifying anything in the URL. Thus the output image will be smaller or equal to 900x900. For desktop device, we have set the value to 0, it means no restriction.

If you don't want to restrict the dimension then put 0. This is useful when you want to put restriction for just mobile devices.

Aspect ratio is preserved 🙌 We don't crop or change the aspect ratio of image.

Advanced settings

Auto rotate image based on metadata

A lot of images have additional data associated with them to indicate the correct orientation of the image. With this setting turned on, Websonic.io will read that associated data and correctly orient the image before delivering.

Use 4:2:0 chroma subsampling

Chroma subsampling is an image encoding practice that takes advantage of the nature of human vision to reduce image size. While it reduces the image size, it may introduce unwanted artefacts in a lot of images.

Test in staging first You must check for artefacts in images before turning this on in production environment. Learn more about testing.

Image metadata settings

Images have a lot of additional data like camera information, lens information etc. associated with them. Stripping them off reduces the image size significantly. Special scenarios may require preserving the image metadata in the output. Does not impact image orientation as that is handled by the first setting at the top.

You can choose one of the following options:

  • Discard all metadata - recommended for most use cases.

  • Preserve only color profile - Only if you embed color profile in images and want WebSonic.io to preserve color profile information while discarding rest of the metadata.

  • Preserve complete metadata - Not recommended.

PNG compression mode

The size of PNG Images can be reduced significantly by using lossless or lossy compression. Websonic.io provides three options for PNG compression:

  • Minimum - Use this setting If you use PNG format for photographs (images which usually have a lot of colors).

  • Maximum - Use this setting if you use PNGs only for logs and other small graphics (small number of unique colors).

  • None - Use none, though not recommended, only if you feel that either optimization is not working for you in terms of quality.