Advanced Image Optimization Through CDN

The automatic image optimization service is designed to:

• Resize images
• Optimize image formats
• Crop images
• Compress images without quality loss
• And perform many other operations

Enabling Image Optimization

If you are not yet a CDN customer, you can submit a request to activate the CDN, by providing your email, website, and CMS (if applicable). In the request comments, specify that you would also like to enable image optimization.

You will receive an email with access to the cdnnow! Control Panel and a default CDN address for your project in the format userXXXXX.nowcdn.co or userXXXXX.clients-cdnnow.ru, where userXXXXX — is your unique identifier.

If your site is already connected to our CDN, you can activate image optimization. Log into the cdnnow! Control Panel, and open your project.

• In the project settings, navigate to the «Acceleration» tab.
• Enable the «Turn on image optimization» toggle.
• Select the image width and height. You can choose "Any" or set fixed values in pixels, separated by commas.
• Specify which file extensions from the provided list should be processed (jpg, jpeg, gif, png, ico). We recommend excluding ico if your site's icons contain transparency.
• Save changes without publishing. Once you have finished adjusting all settings, publish the project.

How to Use the Service

The service automatically selects the best image format based on the headers sent by the user's browser, while the original filenames and extensions in the website code remain unchanged.

To use the service, reference the required image via CDN in this format:

• user21345, your cdnnow! project identifier (use your actual project ID)
• /src/files/cat.jpg, path to the source image

The original jpg image is 213252 bytes. If your browser supports WebP (as virtually all modern browsers do), the image size will be optimized to 85,258 bytes.

We've compressed the file by 2.5 times (reducing its size by 60%)!

Original uncompressed image
jpg, 213 252 bytes

Compressed image
jpg with WebP type (in HTTP header), 85 258 bytes

Image Compression (Dimensions)

To optimize loading speed, the service uses image resizing based on the user's device.

Width Compression

To compress an image by width, add the width=xxx parameter to the query string. If the requested width is available in the list of widths, the service will return the width compressed image. Otherwise, you will receive an error message.

• user21345 is your project ID in cdnnow!
• /src/files/cat.jpg is the path to the source image
• width=480 is the required width

Width compressed image
width=480

Height Compression

To compress an image by height, add the height=xxx parameter to the query string. If the requested height is available in the list of heights, the service will return the height compressed image.

• user21345 is your project ID in cdnnow!
• /src/files/cat.jpg is the path to the source image
• height=150 is the required height

Height compressed image
height=150

Proportional Image Scaling

By default, images are scaled proportionally.

To scale an image non-proportionally, add the rs=fill parameter to the query string along with width and height values.

• user21345 is your project ID in cdnnow!
• /src/files/cat.jpg is the path to the source image
• rs=fill enables non-proportional scaling
• width=290 is the required width
• height=100 is the required height

Compressed image
rs=fill&width=290&height=100

Gravity

When an image is transformed non-proportionally, you can specify its gravity.

To position the image, add the g=type:x_offset:y_offset parameter to the query string.

Where type can be:

• no (north, top edge)
• so (south, bottom edge)
• ea (east, right edge)
• we (west, left edge)
• noea (north-east, top-right corner)
• nowe (north-west, top-left corner)
• soea (south-east, bottom-right corner)
• sowe (south-west, bottom-left corner)
• ce (center)

x_offset and y_offset are offset values relative to the image edge.

Note: x_offset and y_offset only accept positive values.

• user21345 is your project ID in cdnnow!
• /src/files/cat.jpg is the path to the source image
• rs=fill enables non-proportional scaling
• width=480 is the required width
• height=200 is the required height
• g=no anchors to top edge

Compressed image
rs=fill&width=480&height=200&g=no

Compressed image
rs=fill&width=480&height=200&g=so

Compressed image
rs=fill&width=290&height=300&g=ea

Compressed image
rs=fill&width=290&height=300&g=we

Border

You can add a border around the processed image.

Important: The border size is added to the processed image dimensions and becomes part of the image itself, unlike CSS styling.

To add a border around the processed image, include the pd=size parameter.

To set the border color, add the parameter bg=RRGGBB, where RRGGBB is the color in hex format (without transparency).

• user21345 is your project ID in cdnnow!
• /src/files/cat.jpg is the path to the source image
• width=480 is the required width
• pd=10 is the required border size in pixels on all sides
• bg=999999 is the required border color

Compressed image
width=480&pd=10&bg=999999
Image size: 500 pixels (480 + 10 + 10)

To set different border sizes for top/bottom and left/right, use the parameter pd=10:20

• 10 - border size for top/bottom
• 20 - border size for left/right

Compressed image
width=480&pd=10:20&bg=AA0000

To set different border sizes for top, right, bottom, and left, use the parameter pd=10:20:30:40

• 10 - border size for top
• 20 - border size for right
• 30 - border size for bottom
• 40 - border size for left

Compressed image
width=480&pd=10:20:30:40&bg=15b2a0

Резкость

Изображение можно сделать резче.
Для того чтобы сделать изображение резче достаточно передать параметр sh=number.
Number может изменяться от 1 до 100.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• width=480, требуемая ширина
• pd=10, требуемый размер рамки в пикселях со всех сторон
• bg=999999, требуемый цвет рамки
• sh=2, резкость

Compressed image
width=480&pd=10&bg=999999&sh=2

Размытие

Изображение можно размыть.
Для того чтобы размыть изображение достаточно передать параметр bl=number.
Number может изменяться от 1 до 100.

• user21345, служебное имя проекта в cdnnow!
• /src/files/cat.jpg, путь до исходного изображения
• width=480, требуемая ширина
• pd=10, требуемый размер рамки в пикселях со всех сторон
• bg=999999, требуемый цвет рамки
• bl=3, размытость

Compressed image
width=480&pd=10&bg=999999&bl=3