币游国际平台

优化图像

最新更新:Jan-10-2024

优化图像对提高网站或应用性能很重要

本页概述可影响图像优化并覆盖各种云优化特征和选项以确保以最快速和最优方式向用户发送图像,这是提高核心WeViles度量度的关键构件

并见

上页:

图像优化是什么

优化图像需要以格式、维度、分辨率和质量提供图像,产生最小文件尺寸,同时确保生成图像适合具体内容、全页设计、请求设备以及网站访问者期望

下表汇总影响图像文件大小的主要因素和解决这些问题的潜在解决办法在许多情况下,单靠自身实施解决方案可能非常时间或劳动密集性点击每个题链接学习如何使用云性功能实现这些解决方案最小或无编码

问题	问题	可能的解决方案
图像质量	照片通常以原创高分辨率交付,因为害怕失去太多视觉质量或确保高频设备用户(restian显示器和DPR2+)获得期望质量结果是一个大文件并慢传送速度	在大多数情况下,您可大可低质量无显著视觉冲击.思考图像目的和对象,并使用最小质量为图像内容、对象和目的所接受重要时提供高质量图像高射线设备使用元素并发`srcset设置`属性为不同设备提供不同分辨率
图片格式	所有图像格式使用某种形式的图像压缩某些图像格式也损耗多端,即丢弃像素数据失态格式对图像内容效果很好,但对另一些则不然。不同的浏览器支持各种比标准JPG、PNG和GIF格式效率更高的格式为所有浏览器提供标准格式时忽略了新格式如AVIF和WebP的可贵节省小图像,像按钮和标识往往比设计师所实现的多百分比多,多出现在每页上图片类型不看损格式良好,但以PNGs交付图像可产生大累积大小,可延缓页加载时间。	确定每一图像均以正确格式交付表示图像内容利用CDN服务或其他工具/逻辑检查浏览器请求向不同浏览器提供不同格式使用元素并发`srcset设置`属性大动画GIF提供动画WebP或使用JPEG XR(使用步态属性CSS动画)支持浏览器或转换MP4图像质量非最优先级时,您也可以考虑提供损动GIF获取小文件向量图形基础线点和形状加注,而非像素使用矢量绘制几何图形,使每种分辨率和缩放法都产生锐化结果,文件最小尺寸 ss3特效和动画随同web字体币游平台网页版官方偶时可用相容图像小分数生成自解资源图片布局:当矢量和CSS3无法替换光栅图像时使用单片ss图像图案而不是多图像减少服务器请求并保存带宽
图像元数据	默认时图像包含大量元数据存储摄像头和图形应用,但在交付图像中完全免用这些数据	作为一种最佳做法,将元数据保留在图形原版中,但在传送图像中删除元数据
图像裁剪重定	需要显示小于原创图像并依赖浏览器调整图像大小时,则交付不必要的大文件并应用到标准图像变换大小和响应设计,需要多图像变换大小	需求维度可确定服务器端(交付浏览器前)。响应设计使用分片分片提供不同尺寸图像即使是重构服务器侧位时, 记住您可以裁剪焦点重要内容, 而不仅仅是缩放图像。

默认优化

每当对图像应用任何变换时,云形默认执行下列优化:

切换图像文件所有关联元数据除以
- JFIFVersion
- 分辨率Unit
- X解析
- Y解析
- 颜色空间
- DPI语言
覆盖行为并交付转换图像并完整保存元数据fl_keptc标志.或选,您可使用fl_kept分配标志保留变换图像中版权相关元数据,但仍删除默认删减的其他元数据内容
自动优化和质量调整应用生成图像置置默认调整质量参数进化变换

注解

每一种默认优化都只影响变换图像化原图像文件不变

如何优化图像质量

图像质量设置定义压缩级应用图像值介于1(最小文件大小)和100(最佳视觉质量)之间

设置包含视觉质量与文件大小相权衡关系:低质量值,文件压缩到小文件大小越多,过程丢失数据越多,结果视觉质量下降高品质水平视觉质量的损耗几乎不为人眼所见最终视觉质量结果还取决于其他因素,如原图像大小和用户监控或移动屏幕分辨率

调整图像质量到仍然提供良好视觉输出水平是图像优化最强工具之一常能以不足半原始文件大小提供图像,微小至无可见差优化图像质量也有助于提高您的水平核心Web维值得分

有一些方法控制云内传图像质量

设置产品环境默认质量

上头讲到上方中输入图像应用时,它还应用默认质量级视内容、目的和观众大都图片而定,你可能想修改默认图像质量层次化优化设置产品环境

可选择定质级或使用q_aut选项默认值

需要特定图像变换使用与产品环境默认集不同的质量设置时,或不执行图像变换时,可实现指定质量级变换式

举例说q_60下方参数下降交付文件大小303KB至105KB:

交付图像时设置质量

控制图像视觉质量压缩质量问题参数(q二维内URLs)本参数表示压缩级应用图像值介于1(最小文件大小可能的)和100(最佳视觉质量)。下降质量分视觉质量和文件大小:低质量值,文件压缩到小文件大小越多,过程丢失数据越多,结果视觉质量下降视觉质量的损耗在质量较高的人眼中几乎不为人所见,最终视觉质量还取决于其他因素,如图像大小和用户监控或移动屏幕分辨率

下图质量降为70结果文件尺寸69KB,而原文件尺寸195KB则略微明显下降视觉质量(低质量图像右侧滑动):

质量参数随任何其他变换交付图像时自动应用即,除非请求原始上传图像,则默认质量值80也自动应用到变换图像中

交互式演示:图像质量水平

交互图像示例显示各种质量设置对图像视觉质量的影响图像缩放至600像素宽度并初始显示质量设置为100点击图像下质量按钮查看不同质量设置如何影响图像质量

https://res.www.agrosoland.com/demo/image/upload/w_600/q_100/beach_huts.jpg

质量 : 百元大小 : 228KB

10 20码 30码 40码 50码 60码 70码 80 90 百元

注解

WebP格式图像在规定质量为100时无损,在规定质量小于100时无损看如何支持WEP图像,保存带宽并改进用户经验博客文章提供WebP格式更多资料
WebP格式图像无损,如果质量未定,原图像格式无损(例如PNG)。
动画GIF忽略质量设置,除非失落感添加标志看损压缩优化动画GIF文章获取更多信息

toglechroma子采样

Chroma子采样法是一种编码图像方法,即使用比luma信息少解析度(颜色)置换默认行为是否执行染色体子采样,可分值添加质量参数如下:

444可添加以防止子采样例举 :q_80:444
420可加到强制子采样中。例举 :q_95:420.

注解

Chroma子采样不由图像执行,图像中含有文本叠加值,除非有特别请求。

自动质量选择

云化智能质量编码分析图像查找最佳质量压缩级和最优编码设置云化自动化文件大小与质量权衡决策,用概念度量学和启发学调和基于特定图像内容和格式的质量设置逐个分析每张图像查找最优压缩水平和图像编码设置允许精确调整压缩水平并辅之以编码设置微调,并可以大量减少文件尺寸而不引起人眼可见退化

执行自动质量选择和图像编码调整质量问题变换参数汽车高山市q_aut或应用自动选项之类默认图像质量搭建产品环境

可进一步微调自动质量选择如下:

q_aut:文件大小和视觉质量最优平衡默认时,此值与q_auto:g,同时它可自动切换到更具攻击性q_ato:eco模式(见下文数据保存支持注解)。
q_aut:best少攻击性算法生成大文件并有可能提高视觉质量目标对象实例:图片网站显示高视觉质量图像
q_auto:g:确保相对小文件高视觉素养
q_ato:eco:更具攻击性算法,结果小文件视觉质量略低目标对象实例:广受欢迎的网站和社交网络流量大
q_auto:low最强进化算法产生最小文件低视觉质量目标对象实例:网站使用缩略图连接到质量更高的图像

生成文件大小实例编码照片时使用各种定期和自动质量参数值

原创性569KB

q_80803KB

q_aut:best(65.9KB)

q_auto:g(56.9KB)

q_ato:eco4.5.0KB

q_auto:low35.0KB

生成文件大小实例编码时使用正则和自动质量值

原创性296KB

q_80223KB

q_aut:best226KB

q_auto:g156KB

q_ato:eco97.5KB

q_auto:low87.5KB

保存数据支持

保存数据支持包含在客户端提示标准已经由 Chrome和Opera浏览器支持浏览器发送特殊请求头命名保存数据if用户已启动数据保存模式何时q_aut指定并保存数据:开页眉直达CDN云层,图像压缩编码自动切换生态学模式(q_ato:eco)取代默认好质量模式q_auto:g)特征对使用有影响q_aut内命名变换.

交互式模版:自动图像质量

交互图像示例显示各种效果汽车质量设置显示沙滩图像质量图像初始显示质量设置为100,并点击图像下方按钮之一使用该特定质量设置显示图像

https://res.www.agrosoland.com/demo/image/upload/w_600/q_100/beach_huts.jpg

质量 : 百元大小 : 228KB

自动:low 自动eco 自动:good 自动:最佳 80 百元

注解

可设置覆盖质量媒体库编辑资产页面资产设置时质量总是压倒任何一个q_autURL中为该资产指定的设置应用a可有效控制重要图像质量q_aut产品环境默认设置,或所有通过特定进程传送的图像均带变换交付q_aut.云化系统还使用重置输入帮助改善q_aut算法

并见:q_aut视频

如何优化图像格式

图像格式可能有损或无损,每个格式都有自己的压缩算法并如前所述,每种类型都提供某些类型图像内容的更好结果,而其他类型则产生较差结果。此外,有些更新格式仅在一些浏览器上支持优化图像格式也有助于改善您的状况核心Web维值得分

选择正确格式交付每一图像可节省大量文件体积而不牺牲质量

有几种云式选项可用解决这些问题

即使是用户上传图片格式不理想内容,也可以很容易地在图像中传递不同类型,只需修改交付URL中文件类型扩展
使用自动格式选择转换参数允许云化分析图像内容并选择最佳交付格式举例说,它可自动向支持这些格式的浏览器提供WebP、AVIF、JPEG XL或JPEG2000图像,同时以原创格式向所有其他浏览器传送选项还可以提供动画GIF动画AVIF或动画WEP支持这些格式浏览器
动画GIFs减值并同时保持可接受质量

丢失动画GIF2.5MB比较6.3MB原创性 :

降低动画图形成本的另一个方式是提供动画GIF视频可简单修改文件类型扩展.mp4或webm网站Chrome、Android和Opera提供URL

举个例子,这个mp495%小于原动画GIF319KB取而代之6.3MB:

更多动画GIF工作信息见操纵动画GIFs.

自动格式选择

多格式编码图像, 某些格式优于其他格式压缩并压缩文件大小而不损害视觉质量不同的浏览器支持不同的图像格式,优化交付时间并保存带宽的最佳解决办法是根据每个访问者使用浏览器提供最优格式

上头fack_format可设置自动机参数f_autURLs中)以便执行基于请求浏览器的自动格式选择视浏览器和浏览器格式启动Forf_aut产品环境上可交付图像,例如AVIF、JPEG XL、WebP或JPEG2000浏览器不支持优化格式f_aut允许返回后图像以文件扩展定义格式交付

JPEG(33.5KB)源格式为此缩放图像提供时,可视浏览器而定,可交付AVIF(14.6KB)、WebP(16.1KB)、JPEG XL(21.4KB)或JPEG2000(22.1KB)。表显示其他比较格式

格式化	大小问题
AVIF	14.6KB
GIF系统	98.0KB
JPEG	33.5KB
JPEG2000	22.1k
JPEGXL	21.4KB
JPEGXR	17.3KB
巴布亚新几内亚	1900KB
WebP	16.1KB

注解

可同时使用指定媒体类型使用时 f_aut.不提供文件扩展名,自动格式选择默认提供图像使用媒体类型选项对其它媒体类型更有利

提示和考量使用f_aut

变换计数:使用f_aut可能增加你变换计数并存储用法, 因单变URL生成格式不同可限制潜在交付格式数联系支持.
带宽使用:广度带宽总用量应随使用量减少f_aut因交付更多优化(小文件大小)媒体文件在某些情况下,你可能会经历带宽用量的增加,尤其是电子邮件运动使用量的增加,因为使用“私控缓存指令”,中间缓存无法向请求浏览器提供无支持格式。
AVIF和JPEG XL格式AVIF动画或JPEG XLf_aut云化产品环境联系支持.

注解
小图像(5000像素下)不自动交付AVIF取而代之的是以WebP交付
使用f_aut:时自动格式f_aut)同URL使用自动质量高山市q_aut:
- PNG格式可选择时自动质量算法判定它更适合特定图像允许提供更好的视觉经济图像文件
- JPEG图像方面,如果自动质量算法判定否Chroma子采样WebP格式应运算,不选择,因为这种损耗格式总能执行chroma子采样,这可能导致某些图像视觉质量下降。AVIF格式仍可选择,如果它得到请求浏览器支持并在产品环境启动
开发工具使用f_aut测试:请注意,如果开发者工具模仿不同的浏览器,云形返回不为主浏览器支持的格式,图像可能不按期望显示举例说,如果使用 Chromedev工具仿真iPhoneSearce浏览器,JPEG2000可返回,Chrome不支持
使用f_aut透明图像:如果f_aut图像交付透明性,请求浏览器不支持WebP或AVIF,然后以PNG格式交付图像,而不是JPEG格式
f_ato使用f_any_format:设置任意_format带自定义质量的标志q_auto,fl_any_format)但没有设置f_aut中还允许切换PNG8编码,如果质量算法判定它效率更高
JPEG2000JPEG2000自动支持f_aut云化产品环境创建 2019年10月帮助老产品环境使用此选项联系支持.
JPEGXRJPEG XR支持为返回格式f_aut仅面向2021年4月前创建并不再默认支持的云化产品环境添加或删除此选项联系支持.
使用f_auto命名变换:f_aut使用命名变换无效学习更多.
浏览器支持:如果通过直接输入云式交付URL访问图像f_aut可能不返回预期格式,因为浏览器可能不发布图像支持接受页眉