有很多方法优化PNG文件,但有一个方法
优化化通常被忽视的是PNG透明背景如果您选择使用PNGs而不是像JPG那样较紧凑格式,主要用于支持透明后台(alpha信道)阅读并观察动态底线如何将文件缩放最大
1:5.
网站应用图形设计师有时希望在一定背景上显示剪切照片常见实例是新闻网站显示作者头部拍片或文章中提及的图典型图像
剪切照片编辑软件像Photoshop,
问题在于图像可置于不同的上下文中,而在每种上下文中背景可能有不同的颜色产生需要为图像提供透明背景,这需要文件格式支持透明性(alpha信道)。通常选择格式为PNG,这可大幅提高文件尺寸
举例说,拍下个人相片JPG格式按预期保存
图形设计师手工编辑剪切照片为了保持剪切照片透明性(alpha信道),图像使用
巴布亚新几内亚支持透明化格式对比
PG照片格式
允许图像放入任何后台, 但是PNG格式不最优应用图片生成缩略图权重
59.8KB几乎-
500%重达90%质量JPG
12.4KB.这可能是巨大的带宽和钱浪费并有损用户浏览经验,用户需要等待更多时间才能加载图像。
来大幅裁剪图像大小-完全不使用PNG图形设计师可将文件保存为
PG并动态应用理想背景色
一种方法就是上传裁剪照片到云端并增加飞上动态背景云化系统可帮助存储、管理、 transform并发送网站图片图像变换使用URL或API调用动态操作,很容易生成代码
第一步是将图像交付为质量达90%JPG注意云形还可裁剪到200x250即时飞照,以自动检测表情为基础
归根结底
12.4KB文件-近似
1/5重时保存为PNG图形设计师当然仍然有同样的问题-现在将图像放在非白背景上,像下文的例子中那样。
云形中简单解析法是创建JPG飞步缩略图,它已经具有缩略图需要的背景色。使用照片编辑软件手动制作时,你绝对不想要为网站所有可能的后台颜色创建多版本,并在图形设计改变时修改这些版本。
下示例设置'
后台变换参数
b/URLs表示RGB颜色产生结果为同一张JPG图像,该图像动态生成红色后台,现在可贴近页面上方的红色后台
生成JPG图像权重
12.8KB优化比对PNG选项PG图像保存
80%带宽提高页加载时间并动态修改变换URL的颜色参数
PHP中同图像标签和 URL生成
200,Hiight,#C11e31)? >
此外,还可以对剪切照片应用进一步的滤波效果下方示例动态提高红色通道强度,减少不透明性,减少色饱和度并减少对比度
上举例子对固化背景色有用现代网站可能有渐变背景或图像背景云化可帮助优化带宽使用和用户经验
下背景图像上传至云内并公有标识
图像权重
18.4KB.保存为透明背景
巴布亚新几内亚表示额外
59KB内积总权数
782KB.优化PNG使用带固背景JPG图像绝对不是一种选项可再次手动制作JPG图像并发相片和底部背景图像,但当您拥有多相片和不同背景图像时,此操作无效。
可使用
云性动态图像叠加克服问题优化PNG
下例中云化动态加插个人裁剪相片叠加20像素右上角,同时缩放剪切相片高度220像素
生成图像权重
24.8KB.PNG优化保存近70%图像尺寸和带宽
构建相同的 URL,这次在Norde.js
云形图像 (bn_bg_全局.jpg) {叠加:business_man_cli
另一选项:不添加剪切照片叠加,而创建基于200x250脸部检测缩略图并添加蓝背景图像为底部图像
生成的JPG图像包括底线称重
7KB.
使用 Python(和Django):
云性.CloudinaryImag (business_man_clipt.jpg.).image(变换s
优化PNG的另一个简单选项是使用剪切图像转换并交付
WebP格式化现代格式优化图片并支持透明背景
后200x250缩略图由云形自动转换为WebP格式,高90%质量生成图像权重
10.5KB.表示存取
82%大小带宽PNG图像,而结果几乎完全相同
rails命令上下Ruby创建图像标签并使用相同的变换和CDN交付URL
Cl_image_tag (business_man_clipp.webp),:width##200
WebP格式唯一问题就是大多数浏览器目前不支持它贝斯特2200娱乐Google Chrome和Android是唯一目前支持它的主要平台可使用云形智能URL
f_aut`参数交付使用WebP格式支持设备并使用PNG格式实现其他设备
更多选择WebP图像传递
透明WebP格式CDN交付.
Cloudinary任务之一是[优化](//www.aaaalireno.com/documentation/image_opti开发者可协同云基图像变换能力执行复杂图像变换并优化大小和交付,而无需花宝贵时间人工完成或自建自动化任务
继续阅读图像优化
- 网站图像优化快速交付带云化
- 完整指南PHP图像压缩优化
- Python图像优化转换
- Ruby图像优化
- 图像优化WordPress
- 学习知识JPEG2000的利弊
- 采行WebP Android图像格式网站或原生应用
- 10网站图像误差慢加载时间
- 自动化缩小图像大小免损质量
- 自动化占位符生成加速页面加载
- 3方法实现进步JPEG编码
