Alibaba Cloud OSS enables you to process the images that you store in your bucket. This is a very great feature because you don’t have to use any third-party service to resize, crop, watermark and optimize your images.
Prerequisites:
Of course, you will need an OSS bucket and an image or images that you can transform.
If you don’t have any OSS Bucket, go to Products > Storage & CDN > Object Storage Service in the Alibaba Cloud Console and create a standard bucket.
Select your bucket click on the Files tab, then click on Upload. Set the public read ACL on the file(Only you can write the file, but everyone can read it). If you will store only publicly available files in your bucket, you can set the ACL to public read on your entire bucket(Basic settings tab > ACL).
If you want to upload and manage files programmatically you can find official SDKs(including PHP, Python, Java, Go, Ruby and others) here.
You can use the REST API as well.
URL based image manipulation:
You can transform your images simply with parameters in the URL. For example, you can resize your images:
http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,h_200
You can add as many operations to the URL as you want, just separate them with a slash(/). For example, you can resize and sharpen an image at once:
http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/resize,h_200/sharpen,100
You can copy the URL of your image by clicking on More > Copy File URL at the right of your image.
If you want to get a transformed version of the image, just add the x-oss-process query string to the URL with the necessary operations.
Image optimization tips:
Use progressive JPEGs:
Progressive JPEGs can be better optimized and the modern browsers can display them more quickly.
http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/format,jpg/interlace,1
Reduce the quality of the images whenever it is possible. You can use lossy compression without a significant drop in the visual quality:
http://image-demo.oss-cn-hangzhou.aliyuncs.com/example.jpg?x-oss-process=image/quality,q_80
Use the HTML5 picture tag on your websites to download the appropriate image for the different devices/resolutions. With this technique, you can use the webp version of your images in the browsers that support it.
<picture>
<source srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_200/format,webp" media="(max-width: 380px)" type="image/webp">
<source srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_400/format,webp" media="(max-width: 600px)" type="image/webp">
<source srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_800/format,webp" type="image/webp">
<source srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_200" media="(max-width: 380px)" type="image/jpeg">
<source srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_400" media="(max-width: 600px)" type="image/jpeg">
<source srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_800" type="image/jpeg">
<img srcset="https://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=image/resize,w_800" alt="My default image">
</picture>
You can read more about how to build responsive images with srcset here.
Predefined image styles:
You can create predefined image styles as well, this can be very useful when you want to apply the same modifications to multiple images.
If you want to create a style go to your bucket, select the Image Processing tab, then click on Create Rule. You can set the size, the format, the quality and much more. You can add watermark to the image as well. Note: make sure your watermark image has public read access.
You can create as many styles as you want. If you want to apply a style to an image, you have to add the name of your style to the URL(in this example mystyle is the name of the style):
http://my-images.oss-eu-central-1.aliyuncs.com/dog-unsplash.jpg?x-oss-process=style/mystyle
Conclusion:
We went through the most important things that you can do with the image processing service. If you want to learn more about it, you can read the official documentation.