Easy Image - service details

This article explains how Easy Image works internally and is geared towards more advanced users. For a high-level description of the service, check the Easy Image overview article. To enable Easy Image in your editor, follow the Quick start guide.

# Image processing

For every uploaded image, Easy Image produces several optimized versions of the same image.

Image sizes are calculated in two ways depending on the width of the original image:

• For large images (wider than 800px) the width is reduced every 10%.
• For small images the width is reduced every 80px until the 100px limit is reached.

The original image gets saved in the cloud, too.

Thanks to offering several versions of the same image, devices with smaller resolutions, such as mobile devices, may request images that fit their display, reducing the bandwidth and improving the loading time of a website.

# Examples

For a 4000px wide image the following versions of it will be created: 400px, 800px, 1200px, 1600px, 2000px, 2400px, 2800px, 3200px, 3600px and 4000px.

For a 500px wide image the following versions will be created: 100px, 180px, 260px, 340px, 420px and 500px.

# Upload response

The Easy Image service responds with a JSON object containing addresses of generated versions of the image. The keys indicate the width of the image, the original image is named default. By default the aspect ratio is preserved.

# Sample response

{
   "390":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_390",
   "780":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_780",
   "1170":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_1170",
   "1560":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_1560",
   "1950":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_1950",
   "2340":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_2340",
   "2730":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_2730",
   "3120":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_3120",
   "3510":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_3510",
   "3840":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg/w_3840",
   "default":"https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/48f57a98cae2304ef7c8cee5f6ad6741dfd4c9f62873f659_image1.jpg"
}

The entire communication is hidden from the developer and requires no effort on their part.

# Generated HTML markup

The markup used for images varies a bit depending on the editor version, however, the <img> element always contains a similar srcset attribute where all the generated versions of the image are listed:

<figure ...>
    <figcaption ...>...</figcaption>
    <img alt="..." src="https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg" width="3840"
    srcset="https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_390 390w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_780 780w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_1170 1170w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_1560 1560w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_1950 1950w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_2340 2340w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_2730 2730w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_3120 3120w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_3510 3510w, https://cdn.cke-cs.com/f0pqzdtf0yRhaX1FymZU/images/259ea629bbdb0366edec1ff8fcb585e120fc984fcfd7b8f8_image1.jpg/w_3840 3840w" sizes="100vw">
</figure>

You can find more information about srcset and responsive images in the Responsive images article on MDN.

# Requesting a different size of the image

The Easy Image service supports requesting any size of an image.

# Parameters

To request an image with a custom size, add parameters to the default URL. Parameters are separated by commas. The names of parameters and values should be separated by an underscore, for example w_300,h_100.

Abbreviated names of parameters must be used, see the table below:

Abbreviated name	Full name
w	width
h	height

When w and h are used together, aspect ratio is ignored and a stretched image will be returned.

# Example

A sample default image URL:
https://cdn.cke-cs.com/aX1FymZU/images/48f57_image1.jpg

The same image resized to 200x100px:
https://cdn.cke-cs.com/aX1FymZU/images/48f57_image1.jpg/w_200,h_100

# Supported file formats

Easy Image supports the following formats:

• png
• jpeg
• bmp (images in bmp will be converted to png)
• tiff
• webp
• gif (animated gifs are also supported)