[html] 网站首页有大量的图片,加载很慢,要是你,你该怎么去优化呢?

haizhilin2013
2019-10-10 04:36:53 星期四
html
                    
                        
网站首页有大量的图片,加载很慢,要是你,你该怎么去优化呢?
Comments per page
< Page 1 / 1 >
cxwht 2019-10-09 23:11:04

用cdn ,用图床,或者用那种一张图片里面好多图片组成的办法(不知道怎么说)或者根据设备的不同大小,加载不同分辨率的图片

NicholasBaiYa 2019-10-10 00:11:05

1.icon 等小图片推荐使用雪碧图;
2.类似于相册那种 使用分页加载/懒加载。

wuliTaoLeo 2019-10-10 00:59:26

小图片的话可以使用雪碧图
正常的图片可以使用懒加载

vkboo 2019-10-10 14:45:47
  • base64(性能差)
  • 雪碧图
  • 懒加载
  • 缩略图
  • 骨架图
childmoon 2019-10-11 04:04:53

小图片或icon等用精灵图
大图可以使用懒加载

mjhcc365 2019-10-11 04:54:06

问题不同解决的方法也不同
1,启动页面时加载过多的图片
使用瀑布流==》懒加载
使用雪碧图==〉多个小图放在一个大图上
使用骨架图
首屏优先加载

2,部分图片体积过大
一张100px100px的图片,其中高喊10000个像素点,而每个像素点事通过rgba进行寻处,rgba每个色道都有0~255个取值,也就是2的八次方=256。正好是8位的1byte。而每个像素点事4个色道,每个像素点需要4bytes。因袭该图片体积为100004bytes=40000bytes=39kb。
有了上述的背景知识,我们就知道怎样去优化一张图片了,无非就有两个方向:
一方面是减少像素点 裁剪
另一方面减少每个像素点的字节数 压缩 ==》缩略图

scofieldfan 2019-10-11 07:59:33

雪碧图基本已经要退出历史舞台了吧?
1 小图用 iconfont(svg)代替。
2 不能替代的用base64。
3 去除gif图,用video代替。
4 工具压缩图片的大小。
5 优先使用webp格式
6 骨骼屏+ 懒加载。
7 http2

qhdxwdm 2019-10-11 10:39:17

预加载,懒加载+http2

boboZh 2019-10-17 07:24:36

雪碧图基本已经要退出历史舞台了吧?
1 小图用 iconfont(svg)代替。
2 不能替代的用base64。
3 去除gif图,用video代替。
4 工具压缩图片的大小。
5 优先使用webp格式
6 骨骼屏+ 懒加载。
7 http2

你好,能简单讲一下http2是什么实现方式吗

Comments per page
< Page 1 / 1 >

学习不打烊,充电加油只为遇到更好的自己,365天无节假日,每天早上5点纯手工发布前端知识点(死磕自己,愉悦大家)。希望大家在这浮夸的前端圈里,保持冷静,坚持每天花20分钟来学习与思考。在这千变万化,类库层出不穷的前端,建议大家不要等到找工作时,才狂刷题,提倡每日学习!欢迎大家关注3+1开源项目!希望大家每人去学习与思考!(不要为了谁而来,要为自己而努力!

【关注官方公众号】 每天4:30-5:00推送
【公众号推荐】 一起折腾前端算法
【微信学习群】 备注3+1