Responsive images

Responsive images automatically adjust their size and resolution based on the device or screen size they are being viewed on. This brings faster loading times, improved website performance, and better user experience, ultimately reducing bandwidth usage and enhancing page responsiveness.

When you embed an image in CKEditor 5 using CKBox, it will produce a <picture> element containing several images optimized for the given breakpoint in the outcome HTML code.

# How it works

Upon uploading a file, CKBox will store the original asset. Then, responding to calls (for example, from the CKEditor 5 plugin), it will create several intermediate versions. The number of these intermediate versions and their resolutions depend on the resolution of the original image. The larger the original image is, the more versions will be created — up to ten for the biggest assets.

# Breakpoints

The first breakpoint for creating an optimized version should equal 10% of the image width but no less than 80 pixels. Each subsequent version will be twice the size of the previous one until the original size is reached.

# Example

An image with a width of 700px will have the smallest version set to 80px wide as the 10% width is too small. The larger versions will be calculated based on this. It means the next ones will be: 160px, 240px, 320px, and 640px.

Similarly, the first breakpoint step for a 1600px wide image is 160px. The next ones are 320px, 480px, 640px, and 1280px.

There is no upscaling — CKBox will only produce intermediate images smaller than the original one.

# Outcome

The browser will automatically load the image with dimensions most suitable for the presented page resolution, which makes the image load much faster. Bigger images are suitable for desktop users, so image details are visible. Using the same image on a mobile device with a smaller screen resolution would be a waste of bandwidth — a smaller image loads faster, improving the experience of your visitors.

You can observe responsive images in action in the CKEditor 5 documentation.