html页面懒加载灰度图片大小,小程序初级指南--图片及其优化
图片格式
开发中常见的图片格式有 GIF、PNG8、PNG24、JPEG、WEBP。
我们需要根据图片格式的特性和场景需要选取适合的图片格式,而不是设计给什么用什么。
PNGPNG 的目的是替代GIF和TIFF文件格式,同时增加一些GIF文件格式所不具备的特性。流式网络图形格式(Portable Network Graphic Format,PNG)名称来源于非官方的“PNG’s Not GIF”,是一种位图文件(bitmap file)存储格式,读成“ping”。PNG用来存储灰度图像时,灰度图像的深度可多到16位,存储彩色图像时,彩色图像的深度可多到48位,并且还可存储多到16位的α通道数据。PNG使用从LZ77派生的无损数据压缩算法。
特性支持256色调色板技术,文件体积小。
无损压缩
最高支持48位真彩色图像以及16位灰度图像。
支持Alpha通道的透明/半透明特性。
支持图像亮度的Gamma校准信息。
支持存储附加文本信息,以保留图像名称、作者、版权、创作时间、注释等信息。
渐近显示和流式读写,适合在网络传输中快速显示预览效果后再展示全貌。
使用CRC防止文件出错。
最新的PNG标准允许在一个文件内存储多幅图像。
更多
JPEGJPEG是一种针对照片视频而广泛使用的一种有损压缩标准方法.
特性适用于储存24位元全采影像
采取的压缩方式通常为有损压缩
不支持透明或动画
压缩比越高影像耗损越大,失真越严重
压缩比在10左右肉眼无法辨出压缩图与原图的差别
更多
WEBP
WebP,是一种同时提供了有损压缩与无损压缩的图片文件格式,WebP支持无损压缩和透明色的功能。
特性同时提供有损压缩和无损压缩两种图片文件格式
文件体积小,无损压缩后,比 PNG 文件少了 45% 的文件大小;有损压缩后,比 JPEG 文件少了 25% - 34% 文件大小
浏览器兼容差,目前只支持客户端 Chrome 和 Opera 浏览器以及安卓原生浏览器(Andriod 4.0+),WebP兼容性
更多
更多关于WebP:
GIFGIF图象是基于颜色列表的(存储的数据是该点的颜色对应于颜色列表的索引值),最多只支持8位(256色)。GIF文件内部分成许多存储块,用来存储多幅图象或者是决定图象表现行为的控制块,用以实现动画和交互式应用。
特性优秀的压缩算法使其在一定程度上保证图像质量的同时将体积变得很小。
可插入多帧,从而实现动画效果。
可设置透明色以产生对象浮现于背景之上的效果。
由于采用了8位压缩,最多只能处理256种颜色,故不宜应用于真彩色图片
更多
团队约定
内容图内容图多以商品图等照片类图片形式存在,颜色较为丰富,文件体积较大。优先考虑 JPEG 格式,条件允许的话优先考虑 WebP 格式
尽量不使用PNG格式,PNG8 色位太低,PNG24 压缩率低,文件体积大
背景图背景图多为图标等颜色比较简单、文件体积不大、起修饰作用的图片。PNG 与 GIF 格式,优先考虑使用 PNG 格式,PNG格式允许更多的颜色并提供更好的压缩率
图像颜色比较简单的,如纯色块线条图标,优先考虑使用 PNG8 格式,避免不使用 JPEG 格式
图像颜色丰富而且图片文件不太大的(40KB 以下)或有半透明效果的优先考虑 PNG24 格式
图像颜色丰富而且文件比较大的(40KB - 200KB)优先考虑 JPEG 格式
条件允许的,优先考虑 WebP 代替 PNG 和 JPEG 格式
优化图片是页面显示中很重要的部分,图片加载关系到用户体验、应用性能
常见处理方式
减少文件体积大小上线的图片都应该经过压缩处理,压缩后的图片不应该出现肉眼可感知的失真区域。
压缩优化图片大小
采用合适的图片格式
减少图片资源请求数合成雪碧图
使用建议适合使用频率高更新频率低的小图标
尽量不留太多的空白
体积较大的图片不合并
确保要合并的小图坐标数值和合并后的 Sprites 图尺寸均为偶数
预加载图片预加载可以提高用户体验,对于图片长列表和图片占比很大的背景图尤其重要。
css 预加载
利用css的background属性可以预先加载图片。加载后隐藏。在其他地方在请求一样的地址时会优先去加载缓存内的图片进行显示,达到一个预加载的效果。不好的地方就是会影响影响页面渲染速度
显性预加载
显性预加载指的则是处于预加载过程时页面有明确的加载提示,比如进度条或者是Loading图标,让用户有个心理预期,减少等待的烦躁感。
隐形预加载(基于用户行为的资源预加载
通过触屏页面进度加载对应的资源。常见tabs切换,通常的处理是当用户去点击选项卡按钮的时候,在对应面板呈现的时候,我们再去加载图片内容。于是,就存在这样一个不好的体验——由于内容呈现瞬时,而图片呈现是异步的,就很容易出现选项卡主体内容切换过来了,结果是个空白,过了会儿图片才出现。
预加载组件
先加载一张缩略图,该缩略图通过样式设置为和原图一样的宽高,这样用户首先能很快速地看到一张模糊的图片,此时再去对原图做预加载,加载完成之后对缩略图进行替换,因为此时图片已经下载过了,所以界面上能无缝地切换为原图显示
懒加载指的是图片在页面渲染的时候先不加载,页面渲染完成后在指定动作触发后再加载图片。这种方式通常比较合适于篇幅较长的页面,并且图片内容的重要性低于页面信息内容,能够快速地先将重要的页面信息呈现给用户。
lazy-loadimage 自带属性。 图片懒加载,在即将进入一定范围(上下三屏)时才开始加载。
lazy-loadbooleanfalse图片懒加载,在即将进入一定范围(上下三屏)时才开始加载
官方推荐优化方式--关于图片资源的优化
目前图片资源的主要性能问题在于大图片和长列表图片上,这两种情况都有可能导致 iOS 客户端内存占用上升,从而触发系统回收小程序页面。建议开发者尽量减少使用大图片资源
控制代码包内的图片资源
小程序代码包经过编译后,会放在微信的 CDN 上供用户下载,CDN 开启了 GZIP 压缩,所以用户下载的是压缩后的 GZIP 包,其大小比代码包原体积会更小。 但我们分析数据发现,不同小程序之间的代码包压缩比差异也挺大的,部分可以达到 30%,而部分只有 80%,而造成这部分差异的一个原因,就是图片资源的使用。GZIP 对基于文本资源的压缩效果最好,在压缩较大文件时往往可高达 70%-80% 的压缩率,而如果对已经压缩的资源(例如大多数的图片格式)则效果甚微。
写在最后
凡事都是实践出真知。围绕着业务,切合实际的进行优化处理。
不要为了优化而优化。
html页面懒加载灰度图片大小,小程序初级指南--图片及其优化相关推荐
- 小程序图片懒加载放在服务器,【小程序】使用uni-app搭建小程序环境---图片懒加载...
延迟加载的理念:页面初始化时,暂不加载处于屏幕可见区域之外的图片.该方案会有如下几大好处:\n加快页面渲染速度 \n提升页面滚动性能 \n默认不下载屏幕外的图片,减少网络流量 主标题 列表二级标题 e ...
- html如何实现页面懒加载,原生JS如何实现图片懒加载
懒加载简介 什么是图片懒加载 懒加载其实就是延迟加载,是一种对网页性能优化的方式,比如当访问一个页面的时候,优先显示可视区域的图片而不一次性加载所有图片,当需要显示的时候再发送图片请求,避免打开网页时 ...
- html如何实现页面懒加载,浏览器HTML自带懒加载技术
对于目前的图浏.富混工就划这些本公的响示近览记的迹更片懒加载,我们一般采用的是通过第三方库或懒加载库来实现,但是该方式的显著问题就是,必须按插者几天网后供小来剑思含程个些结十在必页到别则气底.时效器按 ...
- vue页面滚动加载、页面懒加载
需求:页面有一堆图表.需要滚动到图表时.再加载出来这个图表. 思路:没找到合适的插件.只能自己手撸一个.直接放到混入里就行.主要就是判断元素距离底部的距离和可视区域内容的高度进行对比即可 /*** 判 ...
- 小程序本地图片偶尔加载不出来_小程序优化的20中策略
体验评分是一项给小程序的体验好坏打分的功能,它会在小程序运行过程中实时检查,分析出一些可能导致体验不好的地方,并且定位出哪里有问题,以及给出一些优化建议. 使用流程: 1.打开开发者工具,在详情里切换 ...
- java applet 浏览器_浏览器不能加载Java中Applet小程序
展开全部 要确e68a8462616964757a686964616f31333363373736保浏览器可以运行applet,需要执行如下步骤: 1.确保applet在eclipse是可以运行的(本 ...
- 服务器图片加载慢_页面提高性能利器_懒加载
哈喽,艾瑞巴蒂,现在搜狗商城产品需求已经趋于稳定,已经开始逐步的着手进行页面的性能提升工作.这不最近小编正在进行"页面懒加载需求"的功能测试.小编第一次听说这个名词,让我们一起了解 ...
- html页面预加载图片不出来,页面图片预加载与懒加载策略
在图片的加载策略之前,我们先来了解下html网页中,图片的不同位置的图片分别是在什么时候发起图片资源请求的 img 标签 img标签会在html渲染解析到的时候,如果解析到img src值,则浏览器会 ...
- 分页组件change_javascript原生瀑布流+图片懒加载组件
我不是天使:javascript原生手动分页组件zhuanlan.zhihu.com 我不是天使:javascript原生自定义轮播图组件zhuanlan.zhihu.com 一大早就去办签证,啦 ...
最新文章
- 微信小程序生成小程序二维码 php 直接可以用
- mos管防倒灌电路_MOS管自举电路工作原理及升压自举电路结构图
- asp.net core 自定义异常处理中间件
- P4070 [SDOI2016]生成魔咒
- C 线程的使用~(上)
- android native.js,Android Native与JS通信互调
- bz2解压命令_tar 命令
- eclipse运行go test_在 Go 中发现竞态条件 (Race Conditions)
- 测绘程序设计 C++ CSU
- python数据抓取与实战_Python数据抓取技术与实战 pdf
- Android性能优化的问题
- php按一列拆分excel表格,excel表格要根据某一列数据拆分-excel怎么按照某一列拆分表格...
- oracle函数笔记
- js iframe 打印 打印预览 页眉页脚的设置
- MATLAB | 绘制复指数函数 y = exp(j*w*n)的三维图像
- Android TV开发--HDMI播放器
- 无头浏览器和抓取-解决方案
- Android 原生Gallery3d的优化系列--1
- spark-sql运行报错 ERROR server.TransportRequestHandler: Error while invoking RpcHandler#receive() on RPC
- 命令行中运行jar包(cmd)