Feature #
Image Optimization #
WebP Cloud will try to convert all your images to WebP/AVIF image and send the optimized image to your visitor(if the WebP/AVIF image is smaller), besides, by removing image metadata will make the image even smaller, and potentially reduce the risk of EXIF privacy leak.
Original (1.73MB, PNG) | Optimized (1.21MB, WebP) |
---|---|
![]() |
![]() |
https://docs.webp.se/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg |
You can adjust Quality level from 10% to 100% on Proxy edit page, the higher the percent, the higher the image quality will be, and with Quality set to 100% means you want to use lossless convert.
Please note that if you’ve changed Quality Level in dashboard, a Cache Purge is required to take effect.
Image Resize #
Currently, we support the following params:
- height
- width
both are in px.
If you set both width
and height
, your image will be cropped using attention crop to maintain your width-height ratio, like this:
attention crop: look for features likely to draw human attention
Optimized (1.21MB, WebP) | With width (32.57KB, WebP) | With both width and height(will crop) (26.61KB, WebP) |
---|---|---|
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?width=200 |
https://559a238.webp.ee/images/demo.jpg?width=200&height=100 |
Animated images(GIF) are also supported
Original Image

https://strrl.dev/post/weekly-recap/2023/21-selfdrivinglongtrip/Peek2023-05-2215-49.gif
With WebP Cloud

https://webp.strrl.dev/post/weekly-recap/2023/21-selfdrivinglongtrip/Peek2023-05-2215-49.gif
With WebP Cloud and ?width=200

https://webp.strrl.dev/post/weekly-recap/2023/21-selfdrivinglongtrip/Peek2023-05-2215-49.gif?width=200
Flip #
- flip
Available options are: v
(vertical), h
(horizontal), b
(Both vertical and horizontal)
Optimized | Flip vertical | Flip horizontal | Flip Both |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?flip=v |
https://559a238.webp.ee/images/demo.jpg?flip=h |
https://559a238.webp.ee/images/demo.jpg?flip=b |
Quality #
- quality
Override quality set in dashbaord, available quality range from 10 ~ 100(100 means lossless convert)
Optimized | Quality 10 | Quality 80 | Quality 100 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?quality=10 |
https://559a238.webp.ee/images/demo.jpg?quality=80 |
https://559a238.webp.ee/images/demo.jpg?quality=100 |
Blur #
- blur
Available blur range from 10 ~ 100
Optimized | Blur 10 | Blur 80 | Blur 100 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?blur=10 |
https://559a238.webp.ee/images/demo.jpg?blur=80 |
https://559a238.webp.ee/images/demo.jpg?blur=100 |
Sharpen #
- sharpen
Sharpen the image, available sharpen range from 1 ~ 10
Optimized | Sharpen 5 | Sharpen 9 |
---|---|---|
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?sharpen=5 |
https://559a238.webp.ee/images/demo.jpg?sharpen=9 |
Rotate #
- rotate
Available rotate angle range from 0 ~ 360, however if angle is not 90, 180, 270, 360, it will be filled with white background
Optimized | Rotate 90 | Rotate 270 | Rotate 60 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?rotate=90 |
https://559a238.webp.ee/images/demo.jpg?rotate=270 |
https://559a238.webp.ee/images/demo.jpg?rotate=60 |
Brightness #
- brightness
Adjust brightness of the image, available range from 0 ~ 10, 1 means no change
Optimized | Brightness 0.2 | Brightness 3 |
---|---|---|
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?brightness=0.2 |
https://559a238.webp.ee/images/demo.jpg?brightness=3 |
Saturation #
- saturation
Adjust saturation of the image, available range from 0 ~ 10, 1 means no change
Optimized | Saturation 0 | Saturation 0.5 | Saturation 3 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?saturation=0 |
https://559a238.webp.ee/images/demo.jpg?saturation=0.5 |
https://559a238.webp.ee/images/demo.jpg?saturation=3 |
Hue #
- hue
Adjust hue of the image, available range from 0 ~ 360, hue will be 0 for no change, 90 for a complementary hue shift, 180 for a contrasting shift, 360 for no change again.
Optimized | Hue 45 | Hue 90 | Hue 180 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?hue=45 |
https://559a238.webp.ee/images/demo.jpg?hue=90 |
https://559a238.webp.ee/images/demo.jpg?hue=180 |
Contrast #
- contrast
Adjust contrast of the image, available range from 0 ~ 10, 1 means no change
Optimized | Contrast 0.5 | Contrast 3 | Contrast 6 |
---|---|---|---|
![]() |
![]() |
![]() |
![]() |
https://559a238.webp.ee/images/demo.jpg |
https://559a238.webp.ee/images/demo.jpg?contrast=0.5 |
https://559a238.webp.ee/images/demo.jpg?contrast=3 |
https://559a238.webp.ee/images/demo.jpg?contrast=6 |