Image Optimization

Clodui does image optimization based on the website settings except when the optimization level set to "No".

Automatic WebP Generation

WebP version of all images(JPG, JPEG, PNG) generated automatically during the deployment. No need to make any code changes, instead Clodui automatically returns the WebP format if the browser supports otherwise returns requested image format.

Below is an image with source set to test-image.png and browser requests for a PNG file; if Clodui detects that browser supports WebP based on the request Accept header, then it returns WebP version.

Image Optimization
<img src="..." alt="Image Optimization" />

Screenshot from Chrome which supports WebP

Chrome WebP

Screenshot from Safari which doesn't support WebP


Image Resize Using Querystring

Clodui has support for image resizing by setting querystring parameters in the image URL.

widthwidth of the image
heightheight of the image
fithow the image should resize to fit within the dimension(height or width), Possible values are contain, cover, fill
dprDevice pixel ratio of the requested image.

Width and height parameters

Width parameter
Clodui image resize width
<img src="...?width=250" />
Height parameter
Clodui image resize height
  <img src="...?height=250" />
Both height and width parameters
Clodui image resize width and height
  <img src="...?width=250&height=250" />

Fit parameter

Clodui image resize fit cover
  <img src="...?width=250&height=250&fit=cover" />
Clodui image resize fit contain
  <img src="...?width=250&height=250&fit=contain" />
Clodui image resize fit fill
  <img src="...?width=250&height=250&fit=fill" />

DPR parameter

Clodui DPR image resize
  <img src="...?width=250&dpr=1" />
Clodui DPR image resize
  <img src="...?width=250&dpr=2" />

Smart Image Resize Using Client Hints

If your website Optimiziation Level is set to Full then Clodui can automatically resize images based on Client-Hints (browser support is required).

In the image below, Clodui will return an image with different widths based on the available viewport width.

Client Hint Demo
  <img src="..." sizes="50vw" />

We use cookies to offer you a better experience and analyze site traffic. By continuing to use this website, you consent to the use of our cookies.