?crop=100:200;30,75
Crop an image/GIF to a width of 100px, a height of 200px, an offset of 30px on the x-axis and an offset of 75px on the y-axis.
?crop=100:200;right,top
Crop an image/GIF to a width of 100px and a height of 200px, and align the crop box to the top and right edges of the image/GIF. center, left and bottom are also valid options.
?crop=100:200
Crop an image/GIF to a width of 100px and a height of 200px, and align the crop box to the center of the image/GIF. No coordinate options are passed.
Example:
Notes:
Images/GIFs will be set to requested dimensions even if the original is smaller.
?resize=100:200
Set width to 100px and height to 200px. (Does not respect original aspect ratio, obviously.)
?resize=300:*
Set width to 300px and keep original aspect ratio for the height.
?resize=*:150
Keep original aspect ratio for the width and set height to 150px.
?resize=0.6x
Keep original aspect ratio and resize width by 60%. Resizing using percentages only applies to the width of the asset. It is possible to go higher than 100%. ?resize=2.4x would work for example.
Examples:
Notes:
Same as resize, except that it will not increase the size of the image if the height and width of the original are smaller.
?downsize=100:200
Set width to 100px and height to 200px. (Does not respect original aspect ratio, obviously.)
?downsize=300:*
Set width to 300px and keep original aspect ratio for the height.
?downsize=*:150
Keep original aspect ratio for the width and set height to 150px.
?fill=250:140
Resize an image/GIF so that both the height and width are no smaller than the requested dimensions while keeping the aspect ratio. By default, the center of gravity is the center of the image.
?fill=250:140;center,top
Same as above with gravity values. right, left, bottom, top, center are all valid options.
?fill=250:140;30,75
Same as above where gravity has an offset of 30px on the x-axis and an offset of 75px on the y-axis.
Example:
?fit=250:140
Resize an image/GIF so that both the height and width are no larger than the requested dimensions while keeping the aspect ratio.
Example:
Note: Use this on both images AND animated GIFs. ☀️☀️
?output-quality=40
Compress file to 40% of its original quality.
?output-quality=auto
When auto is used, we'll return whatever quality is optimized to the client that requested it. Here are the current rules:
- set quality to
80by default - if UserAgent indicates that it's a BFLite request (proxy browsers like Opera Mini and UC Browser), set it to
20 - if UserAgent indicates that it's a mobile request, set it to
60if it's a GIF, set it to40if it's an image
Original:
Quality settings at 10%:
Notes:
There is currently only 3 valid options for images: webp, mp4, jpg and auto.
Use this to transcode animated GIFs to mp4 and WebP Animation. ☀️☀️☀️☀️
?output-format=jpg
Convert any image to JPG format.
(Use that on a GIF and you will get the first frame of the GIF as a JPG image)
?output-format=webp
Use that to convert any image to WebP format or GIFs to WebP Animations.
?output-format=mp4
Convert a GIF to mp4.
?output-format=auto
When auto is used, we'll return whatever format is optimized to the client that requested it. For example, we'll return a webp version of an image if the image was requested by a Chrome-based browser.
Example:
GIF to WebP Animation:
https://img.buzzfeed.com/buzzfeed-qa03/static/2016-01/15/14/enhanced/qa03-b/anigif_enhanced-4324-1452885939-2.gif?resize=400:*&output-format=webp&output-quality=10
Images with a resize parameter (resize or downsize) AND a crop parameter (crop, fill or fit) will always be cropped then resized, regardless of the order of the parameters.
Note that the opposite, a resize then a crop, is the equivalent of a fill.