用html设置页面中有的多张图片大小,页面加载性能之使用正确的图片尺寸

我们总是会忘记缩小图片尺寸，直接应用到项目中。这种图片看上去很正常，但实际上既浪费了用户的流量，也影响了页面性能。

找出不正确尺寸的图片

Lighthouse是首选，执行一下Performance Audit，根据结果可以找到需要调整尺寸的图片列表。

确定正确的图片尺寸

此处提供了2种策略：上策和下策。两者都能提升性能，上策需要多花时间去理解和实施，但带来的体验和性能的提升是非常明显的。下策则是可以很快实施的方案。

稍微了解下CSS的单位

CSS给HTML元素的尺寸定义了两类单位：

绝对单位: 在所有设备上展示的尺寸都是固定不变的，如: px等。

相对单位: 会有一个参照物，相对于这个来设置的尺寸，如: em，rem，vw，vh等。

下策

根据图片尺寸的单位:

相对单位: 调整图片大小至所有设备均可适用，如果是手机网页，一般以iphone6的屏幕大小为准，375的设备宽度，准备图片的时候用750px的宽度。

绝对单位: 按图片的实际尺寸来调整，根据使用你的产品的用户高分屏的占比，如果3x的用户比较多，就准备3x图，如果2x比较多，则准备2x图。

上策

根据图片尺寸的单位:

相对单位: 使用响应式图片，根据不同的屏幕尺寸，提供不同尺寸的图片，之后的文章会介绍。

绝对单位: 使用 srcset 和 sizes 属性，在不同DPI的屏幕上提供不同尺寸的图片，以保证高清度。

调整图片大小

ImageMagick 是首选的CLI工具，对开发而言，这个比GUI的工具效率要高很多。

以下命令可以将图片调整成原始大小的25%:

convert flower.jpg -resize 25% flower_small.jpg

以下命令可以将图片调整成200*100的固定大小:

# macOS/Linux

convert flower.jpg -resize 200x100 flower_small.jpg

# Windows

magick convert flower.jpg -resize 200x100 flower_small.jpg

如果你要同时转换多个图片，可以写一个脚本来执行CLI。

验证效果

每次调整完尺寸，都用Lighthouse来测试，避免遗漏。

总结

偷懒的做法是，所有设备上都采用2x图片，也就是下策，花费时间不多，但这种优化还是会对一些3x的DPI手机屏幕造成略微的模糊，如果是4x的DPI，则会特别模糊。如果有时间的话，还是使用上策来保证对每一个用户都提供最优的性能和体验。

参考

用html设置页面中有的多张图片大小,页面加载性能之使用正确的图片尺寸相关推荐

HTML5怎么编辑另一个页面,html中嵌套iframe页面如何将一个html页面中嵌入另一个html页面...
如何将一个html页面中嵌入另一个html页面将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌 ...
html引用c 变量,在jsp页面中定义全局变量,供其他页面引用
一.在一个jsp中引用另一个jsp的方法有: 1.使用 jsp include指令(常用): file属性是必填的(绝对或相对路径),但它不支持任何的表达式,也不允许通过?挂参方式来传递参数. 注意: ...
iframe子页面内刷新父页面中另一个iframe子页面
框架页面如下: <div id="aa" style="float: left; height: 500px; border-right-style: solid; ...
html5 载入另一个页面,如何将一个html页面中嵌入另一个html页面
将一个html页面中嵌入另一个html页面需要使用到iframe标签. iframe标签用法: scrolling禁止鼠标滑动,frameborder嵌套页面边框,leftmargin左边距,topm ...
Android中的缓存处理及异步加载图片类的封装
一.缓存介绍: (一).Android中缓存的必要性: 智能手机的缓存管理应用非常的普遍和需要,是提高用户体验的有效手段之一. 1.没有缓存的弊端: 流量开销:对于客户端--服务器端应用,从远程获取图 ...
清除浏览器缓存之后为什么还是显示旧的html页面_H5缓存机制浅析-移动端Web加载性能优化...
1 H5缓存机制介绍 H5,即HTML5,是新一代的HTML标准,加入很多新的特性.离线存储(也可称为缓存机制)是其中一个非常重要的特性.H5引入的离线存储,这意味着 web 应用可进行缓存,并可在没 ...
android中常用的下拉刷新加载更多_如何设计“加载流程”
为什么要处理"加载"状态在页面拉取数据.或提交某些数据时,需要一定的时间来等待服务端返回结果.如果不处理加载,用户可能会看到一片空白,以为你的软件出错:或者因没有建立心理预期,被 ...
微信小程序中实现瀑布流布局和无限加载
瀑布流布局是一种比较流行的页面布局方式,最典型的就是Pinterest.com,每个卡片的高度不都一样,形成一种参差不齐的美感. 在HTML5中,我们可以找到很多基于jQuery之类实现的瀑布流布局插 ...
Android RecyclerView（八）设置自定义下拉刷新与上拉加载数据
Android RecyclerView(八)设置下拉刷新与上拉加载数据 GitHub 项目源码 CSDN 博客说明智慧安卓App 文章分析下拉刷新效果上拉加载数据效果 1 xml布局文件中 ...

用html设置页面中有的多张图片大小,页面加载性能之使用正确的图片尺寸

用html设置页面中有的多张图片大小,页面加载性能之使用正确的图片尺寸相关推荐

最新文章

热门文章