本文已参与「 新人创作礼 」活动，一起开启掘金创作之路
图片瘦身 （ 效果最好 ）
-
webp 方案 （ webkit内核支持 ）
-
无损webp相比png减少26%大小
-
JD 采用自研 DPG
-
ps ： 建议采用WEBP方案, 支持webp图像的，都采用webp的方式加载，否则使用jpg或者其他。使用webp的后果，服务端需要对图片进行多备份。
-
目前 taobao tmall JD 唯品会 都采用了 webp方案。
- 去年6月份的图浏览器支持度
图片SEO （ 只针对SSR页面 ）
-
alt、title 标签使用得当
渐进式图片显示优化 （ 图片来源互联网 ）
-
普通
-
这种图片采用逐行扫描的方式，当图片较大或者网络下载速度较慢，那么就会看到图片被一行行加载的效果
-
渐进式
-
渐进式图片打开的过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰
-
node npm 处理有
-
is-progressive-cli、imagemagick、graphicsmagick、gm
图片回流问题
- 给图片设定一直的高度，以至于图片加载过程导致图片回流 ，指定图片骨架宽高、不回流。
- 参考文献 juejin.im/post/5cfe1b… 回流的影响，图片大小改变会影响回流。
密度问题体验优化
-
高密度屏幕上看起来会略微模糊，具有DPR 2的屏幕上加载2x尺寸的图像，在具有DPR 3的屏幕上加载3x图像并且在其他设备上加载普通图像1x尺寸的图像。
<img class="img" src="imgbg-320.jpg" srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w" sizes="(max-width: 480px) 480px, 320px" /><picture> <source srcset="3.jpg" media="(min-width: 320px)"> <source srcset="2.jpg" media="(min-width: 480px)"> <img srcset="1.jpg"> </picture> -
HTTP Client Hints
-
window.devicePixelRatio 获取DPR
-
移动端DPR方案
-
flexible.js flexible会自动添加data-dpr属性在html里
-
mixin.scss
@mixin fixImage($path,$img) { [data-dpr="1"] & { background-image: url("#{$path}/x1/#{$img}"); background-repeat: no-repeat; } [data-dpr="2"] & { background-image: url("#{$path}/x2/#{$img}"); background-repeat: no-repeat; } [data-dpr="3"] & { background-image: url("#{$path}/x3/#{$img}"); background-repeat: no-repeat; } }@import '../../scss/mixin.scss'; .test { @include fixImage('../../assets','image.png'); }
懒加载方案
`<img v-img="`path`/img/a.(webp|jpeg)" />`
- lazyload.js 懒加载方案
图片缓存&请求合并
-
pwa - sw ( service worker ) 仅https支持
-
CDN Prefetch
参考文献 www.jianshu.com/p/61298b51a…
-
雪碧图 、icon-font、css
-
雪碧图 （ 建议单个合成总大小200k之内 ）
-
www.iconfont.cn/ iconfont 开源平台
-
css和css3制作简单的图标和动画（代替gif图片）
-
随着技术的发展，css3可以实现的效果越来越多，比如箭头图标，三角形，梯形等图标，或者一些阴影效果，渐变的效果，所以可以用css制作一些简单的图标，而且具有多变性
