What is Image Optimization and How Does It Work?

Image Optimization and Resize Service provides you with different tools to perform various actions on your origin image by adding the module’s supported parameters to the content path.

Using this service you can do below process on your images

resize
adding padding
cropping
resizing and cropping
optimization
rotation
adding watermark

These services can be used as an integrated part of your CDN service, resulting in reducing your overall cost and saving storage by shifting these operations to the CDN side.

Resized images, would be cached on CDN as a unique image after the resize operation is done. So, in order to invalidate or purge your processed images, it is important to consider these files as a separate file and perform the same actions for each file.

Supported formats: jpg, png
Image Optimization & WebP Service does not support files larger than 10MB or with dimensions exceeding 3000x3000 pixels. The system will return a 415 Unsupported Media Type error for such files.

All the samples in this document, have the following structure: Sample Image Link: http://www.yourdomain.com/path/yourimage.jpg CDN Image Link: http://www.yourcdndomain.mncdn.com/path/yourimage.jpg

Size of the image used in the document is: 1920×1080 px

1. Image Resizing – MNRESIZE

This feature is used to resize your images keeping the original ratio.

For example; if your given image is rectangular and you need your output to be square, this feature doesn’t allow any distortion on the image and the output will still be a rectangle. (example 4)

If you only give either width or height of the desired image to be resized, this module will calculate the corresponding factor based on the ratio of the image. (example 2 and 3)

Format:

http(s)://{your_account}.mncdn.com/mnresize/{width}/{height}/{?path}/{image_name}.{format}

Example 1:

All the links below will give a 400×225 output.

http(s)://youraccount.mncdn.com/mnresize/400/225/yourimage.jpeg
http(s)://youraccount.mncdn.com/mnresize/-/225/yourimage.jpeg
http(s)://youraccount.mncdn.com/mnresize/400/-/yourimage.jpeg
http(s)://youtaccount.mncdn.com/mnresize/400/400/yourimage.jpeg

2. Add Padding – MNPADDING

You can add padding to edit the distance of the images to its borders. In this feature, all the parameters must be entered (width, height, hex). You must also enter the 6 digit HEX color code (without # in the beginning).

If your targeted dimension ratio is bigger than your original image, the padding would be added. In the following image, the original dimension is 1920×1080 and it can be resized to 400×225 without any padding. But as seen in example 1, if the dimension is 400×125, there would be an 89px padding added to the right and left sides of the picture, making total 178px padding and then your image is located.

Format:

Http(s)://{your_account}.mncdn.com/mnpadding/{width}/{height}/{hex_color}/{?path}/{image_name}.{format}

Example 2:

Http(s)://youraccount.mncdn.com/mnpadding/400/125/C0C0C0/yourimage.jpeg

Http(s)://youraccount.mncdn.com/mnpadding/200/225/D35400/yourimage.jpeg

3. Cropping – MNCROP

This feature crops the image by centering the original image. While doing this process, it doesn’t resize the original image, only crops due to the size of the given target. If you wish to resize the image while cropping, then you should use the mncropresize feature.

Format:

http(s)://{your_account}.mncdn.com/mncrop/{width}/{height}/{?path}/{image_name}.{format}

Example 3:

http(s)://youraccount.mncdn.com/mncrop/400/300/yourimage.jpeg

4. Resizing and Cropping – MNCROPRESIZE

This feature helps you to Crop and Resize your images at the same time. It applies both MNCROP and MNRESIZE features. Using this service, you can reach the target dimensions.

For example, the image used below can be resized to 400×225 without any disfigurement. As in example 1, if we enter 400px for height and 100px for width, it creates our targeted image cropping 125 pixels from the top and bottom of the image. Similarly as in example 2, when the target width is smaller, it will crop from the left and right sides.

Format: http(s)://{your_account}.mncdn.com/mncropresize/{width}/{height}/{?path}/{image_name}.{format}

Example 4:

http(s)://youraccount.mncdn.com/mncropresize/400/100/yourimage.jpeg

http(s)://youraccount.mncdn.com/mncropresize/200/225/yourimage.jpeg

5. Optimization – MNOPTIMIZE

Using this service, you can reduce the file size of the image that is being served from CDN. There are various optimization features used with this service. In order to get maximum optimization performance, your original images must be as raw as possible. If an optimization process is performed on an original image previously, then mnoptimize service will not work with high performance. The aim of this service is to optimize your images without any quality degradation (like pixelation, color loss, etc). In the best-case scenario, you can optimize your images up to 80%.

You may use this service to optimize your images without performing any of MNRESIZE features, simply by activating it through Medianova Panel (). If you optimize and resize your image, then you will get much better performance and lower file sizes.

In order to activate this service, follow the path: Medianova Cloud Panel > CDN Resources > Optimization > Image Optimization

6. Image Rotation – MNROTATE

You can rotate your images to a given angle using this service. Remember that you can’t combine this service with other services. Rotation service can only get 90, 180, 270 degrees as input. The service will fail if the input angle is not one of these values.

Format: http(s)://{your_account}.mncdn.com/mnrotate/{angle}/{?path}/{image_name}.{format}

Example 5:

http(s)://youraccount.mncdn.com/mnrotate/90/yourimage.jpeg

http(s)://youraccount.mncdn.com/mnrotate/270/yourimage.jpeg

http(s)://youraccount.mncdn.com/mnrotate/180/yourimage.jpeg

7. Watermarking – MNWATERMARK

This module is used to add a watermark to your images. When it is activated, a watermark is added to all of your images because there is a risk that the image can be served without watermark by deleting the watermark path. Adding it to all the images reduces these attempts. Please contact Medianova technical support to add watermarks to your images.

After uploading your watermark image through Medianova Panel, this image will be added to all the images that are not cached yet. If you want your cached images also contain a watermark, then you need to purge those cached images. If you want to have a transparent watermark, you should upload a transparent watermark image.

By default, this service adds the watermark to the middle of the image. If you want to set the size of the watermark, you can use the resize method. mncrop and mnrotate modules can’t be applied to the images that already contain the watermark.

Example 6:

http://youraccount.mncdn.com/mnresize/-/200/yourimage.jpeg

http://youraccount.mncdn.com/mncropresize/200/300/yourimage.jpeg

http://youraccount.mncdn.com/mnpadding/200/300/C0C0C0/yourimage.jpeg

8. Custom Cropping and Resizing - MNCUSTOMCROPRESIZE

This feature helps you to crop in a custom manner and resize your images. By using this service, you can crop a specific part of an image and isolate the cropped area from the rest of the original image. This process is particularly useful for using only a portion of the image or highlighting a specific element.

Format:

http(s)://{your_account}.mncdn.com/mncustomcrop/{width}/{height}/x/y/{?path}/{image_name}.{format}

· width/height: Specifies the width and height values for the cropping operation. The width and height of the cropped area are adjusted from here.

· x/y: Specifies the starting points (coordinates: x, y) of the cropping operation.

Example 7: