如果您的业务涉及到内容分享网站、电商平台、社交软件、在线教育及素材网站等领域,可能经常需要调整图片尺寸和转换图片格式。全站加速提供图片处理功能,源站只需要存储原始图片,边缘节点可以完成对图片的裁剪、缩放、格式转换。这样可以加快客户端获取被处理过图片的速度,同时减轻源站处理图片的压力,提升访问体验。
使用限制
- 全站加速能直接处理的图片,原始图片存在以下限制:
- 原图的大小不超过 10MB。
- 原图的宽×高不能超过 16,777,216 px。
- 原图的格式可以是:JPEG、JPG、PNG、WebP、BMP、TIFF。
- 全站加速处理图片的过程中,处理的逻辑存在以下限制:
说明
如果处理图片失败(如解析图片格式失败、图片大小超过限制),那么全站加速将尽量返回原图。
- 如果设定的目标宽和目标高均超过原图,那么全站加速将响应原图。
- 如果设定的目标宽或目标高超过原图,那么超过原图的宽或高将被设置成原图对应的值。
- 裁剪图片时,默认的裁剪原点是图片左上角。
- 裁剪图片时,改变裁剪位置,图片的宽和高的限制也随之改变。
- 全站加速不允许对裁剪的图片进行压缩、Range 请求。
- 全站加速处理后的图片,图片存在以下限制:
- 处理后图片的宽×高不能超过 16,777,216 px。
- 图片转换成 WEBP 格式时,图片的宽×高不能超过16,777,216 px,且宽和高单边均不能超过16,384 px。
操作指南
注意
图片处理功能仅为白名单用户提供,如需体验,请联系您的客户经理。
您可以直接在客户端请求 URL 中拼接图片处理相关参数来实现图片的裁剪、缩放、格式转换。URL 的格式如下:
http://example.com/image_01.png?image_process=action,param_value/action,param_value
不同字段的含义如下:
字段 | 说明 |
---|
example.com | 接入全站加速的加速域名。 |
image_01.png | 待处理原图的名称。原图的格式可以是:JPEG、JPG、PNG、WebP、BMP、TIFF。 |
image_process | 固定参数,表示使用全站加速对图片进行处理。 |
action,param_value | 图片处理的操作 action 、参数 param 和值 value 。 - action:对原图进行的操作。您可以将
action 设置为:
- crop:表示对原图进行裁剪。
- resize:表示对原图进行缩放。
- format:表示对原图进行格式转换。
- 不同的
action 可设置的参数和值不相同。
|
图片裁剪
裁剪参数说明
参数 | 描述 | 取值 |
---|
w | 裁剪后图片的宽度。不指定时,默认为原图宽度。 | 宽×高不能超过 16,777,216 px。 |
h | 裁剪后图片的高度。不指定时,默认为原图高度。 |
x | 裁剪过程中,裁剪起点的横坐标。不指定时,默认图片的左上角(原点)作为横坐标起点。 |
y | 裁剪过程中,裁剪起点的纵坐标。不指定时,默认图片的左上角(原点)作为纵坐标起点。 |
g | 裁剪过程中,裁剪的起点。 - 不指定时,默认图片的左上角原点作为起点。
- 指定裁剪的起点时,图片将被均匀分成九宫格。每一格的左上角顶点可以作为裁剪的起点。
![图片](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bd3b7fb0a6a0419ca5a5a5baec3d77ee~tplv-goo7wpa0wc-image.image)
| - nw:左上
- north:中上
- ne:右上
- west:左中
- center:中部
- east:右中
- sw:左下
- south:中下
- se:右下
|
mid | 裁剪过程中,以指定的裁剪起点为中心。按照您制定的宽度、高度对图片进行裁剪。裁剪方式如下: - 以起点为中心,对高度值平分上下进行裁剪。
- 以起点为中心,对宽度值平分左右进行裁剪。
- 裁剪过程中按照起点超过实际图片范围时,只裁剪到原本图片支持的坐标范围。
| 不涉及 |
裁剪示例
对加速域名 example.com
下的 一张大小为 1920*1080 的 PNG 格式图片image_01.png
进行裁剪,示例如下:
裁剪方式 | 描述 | 示例 |
---|
九宫格切 | - 图片裁剪的起点为默认的原点。
- 裁剪后图片的宽度为300。
- 裁剪后图片的高度为500。
| http(s)://example.com/image01.png?image_process=crop,w_300,h_500
|
九宫格切 | - 图片裁剪的起点为右下。
- 裁剪后图片的宽度为600。
- 裁剪后图片的高度为300。
| http(s)://example.com/image01.png?image_process=crop,g_se,w_600,h_300
|
指定X、Y轴剪切 | - 裁剪过程中,裁剪起点的横坐标是宽度值300的点。
- 裁剪过程中,裁剪起点的纵坐标是高度值200的点。
- 裁剪后图片的宽度为600。
- 裁剪后图片的高度为300。
| http(s)://example.com/image01.png?image_process=crop,x_300,y_200,w_600,h_300
|
图片居中剪切 | - 图片裁剪的起点为左中。
- 居中裁剪。
- 裁剪后图片的宽度为600。
- 裁剪后图片的高度为300。
说明 本示例下,由于起点在左中,图片被裁剪后实际图片宽度值为150。 | http(s)://example.com/image01.png?image_process=crop,g_west,mid,w_600,h_300
|
图片缩放
缩放参数说明
参数 | 描述 | 取值 |
---|
w | - 目标图片的宽度。
- 指定 w 值后,目标图片的宽度为 w 的值。目标图片的高度按照宽度的前后缩放比例进行缩放。
- 如果设定的目标宽超过原图,那么 w 将被设置成原图对应的值,即不缩放。
说明 例如:原始图片:1920*1080, 缩放参数:resize,w_600 - 目标图片的宽度为 600。
- 缩放比例:1920/600 = 3.2。
- 目标图片的高:1080/3.2 = 337.5,取整后为338。
| 宽×高不能超过16777216 px。 |
h | - 目标图片的高度。
- 指定 h 值后,目标图片高度为 h 的值。目标图片的宽度按照高度的前后缩放比例进行缩放。
- 如果设定的目标高超过原图,那么 h 将被设置成原图对应的值,即不缩放。
说明 例如:原始图片:1920*1080, 缩放参数:resize,h_300 - 目标图片的高度为 300。
- 缩放比例:1080/300 = 3.6。
- 目标图片的宽:1920/3.6 = 533.3,取整后为533。
|
l | 指定目标图片的长边。具体逻辑如下: - 对比原始图片的宽度和高度。
- 数值更大的一边作为目标图片所对应的值。
- 数值小的一边,根据缩放比例进行缩放。
说明 例如:原始图片:1920*1080, 缩放参数:resize,l_600。 - 原始图片的宽度1920 > 高度1080。
- 选择 600 作为目标图片的宽,进行图片的缩放。缩放比例:1920/600 = 3.2
- 目标图片的高:1080/3.2 = 337.5,取整后为338。
|
s | 指定目标图片的短边。具体逻辑如下: - 对比原始图片的宽度和高度。
- 数值更小的一边作为目标图片所对应的值。
- 数值大的一边,根据缩放比例进行缩放。
说明 例如:原始图片:1920*1080, 缩放参数:resize,s_600。 - 原始图片的宽度1920 > 高度1080。
- 选择 600 作为目标图片的高,进行图片的缩放。缩放比例:1080/600 = 1.8
- 目标图片的宽:1920/1.8 = 1066.7,取整后为1067。
|
fw | 指定目标图片的宽度。缩放后不改变图片的高度。 |
fh | 指定目标图片的高度。缩放后不改变图片的宽度。 |
p | 按比例缩放原图。具体逻辑如下: - 设定 p 值,p 的范围是:[0,100]。p 值为0时,不对图片进行缩放。
- 计算缩放比例:p/100
- 目标图片的宽和高根据缩放比例计算得到。
说明 例如:原始图片:1920*1080, 缩放参数:resize,p_80。 - 缩放比例:p/100 = 0.8。
- 目标图片的宽:1920*0.8 = 1536。
- 目标图片的高:1080*0.8 = 864。
| [0,100] |
注意事项
- 参数 w 和 h 同时存在时,缩放会按照缩放比例更大的一侧来处理图片。
说明
例如:原始图片:1920*1080, 缩放参数:resize,w_600,h_300。宽度缩放比:1920/600 = 3.2。高度缩放比:1080/300 = 3.6。
因此按照高度进行图片的缩放。目标图片的高度:300。缩放比:3.6。目标图片的宽度:1920/3.6 = 533.3,取整后为533。
- 参数 w、 h 和 l、s 不能同时存在。同时存在时,仅最后一个参数生效。
- fw、fh 同时存在时,强制指定了目标图片的宽度和高度,图片可能会发生变形。
缩放示例
对加速域名 example.com
下的 一张大小为 1920*1080 的 JPEG 格式图片image_01.jepg
进行缩放,示例如下:
缩放方式 | 描述 | 示例 |
---|
按照比例缩放原图 | 缩放比例为0.8,p = 80。 | http(s)://example.com/image_01.jepg?image_process=resize,p_80
|
指定目标图片的长边来缩放原图 | resize,l_600
处理逻辑: - 原始图片的宽度1920 > 高度1080。
- 选择 600 作为目标图片的宽,进行图片的缩放。缩放比例:1920/600 = 3.2
- 目标图片的高:1080/3.2 = 337.5,取整后为338。
| http(s)://example.com/image_01.jepg?image_process=resize,l_600
|
指定目标图片的短边来缩放原图 | resize,s_600
处理逻辑: - 原始图片的宽度1920 > 高度1080。
- 选择 600 作为目标图片的高,进行图片的缩放。缩放比例:1080/600 = 1.8
- 目标图片的宽:1920/1.8 = 1066.7,取整后为1067。
| http(s)://example.com/image_01.jepg?image_process=resize,s_600
|
固定目标图片的宽度来缩放图片 | resize,w_600
处理逻辑: - 目标图片的宽度为 600。
- 缩放比例:1920/600 = 3.2。
- 目标图片的高:1080/3.2 = 337.5,取整后为338。
| http(s)://example.com/ image_01. jepg ?image_process=resize,w_600
|
固定目标图片的高度来缩放图片 | resize,h_300
处理逻辑: - 目标图片的高度为 300。
- 缩放比例:1080/300 = 3.6。
- 目标图片的宽:1920/3.6 = 533.3,取整后为533。
| http(s)://example.com/image_01.jepg?image_process=resize,h_300
|
指定目标图片的高度和宽度 | resize,fw_600,fh_300 - 目标图片的高度为 300。
- 目标图片的宽度为 600。
| http(s)://example.com/image_01.jepg?image_process=resize,fw_600,fh_300
|
图片格式转换
转换参数说明
参数 | 描述 |
---|
jpeg | 将原图保存为JPG或JPEG格式。 |
png | 将原图保存为 PNG 格式。 |
webp | 将原图保存为 WEBP 格式。 |
bmp | 将原图保存为 BMP 格式。 |
tiff | 将原图保存为 TIFF 格式。 |
缩放示例
对加速域名 example.com
下的 一张大小为 1920*1080 的 JPEG 格式图片image_01.jepg
进行格式转换,示例如下:
目标图片格式 | 示例 |
---|
PNG | http(s)://example.com/image_01.jepg?image_process=format,png
|
WEBP | http(s)://example.com/image_01.jepg?image_process=format,webp
|
BMP | http(s)://example.com/image_01.jepg?image_process=format,bmp
|
TIFF | http(s)://example.com/image_01.jepg?image_process=format,tiff
|