看看这些人的想法能不能帮上你：
甲：
1，不太“在乎”用户体验的省事方法：
图片保存成渐进式的，加载会慢慢变清晰，而不是从上往下依次加载，然后放在 CDN，设置缓存之类。
2，比较“在乎”用户体验的高端方案：
判断用户的设备（主要用在移动端）、网络等，分别加载不同质量的图片（例如高端 iPhone wifi 情况下，就可以加载双倍高清图等，蜂窝网络下面，就加载个单倍或者有损压缩过的）。
或者先加载低质量的图片，让浏览者可以看到，然后再在后台加载更高清的，等加载完了，浏览者还在观看，就插入替换掉。或者先加载低质量小图片列表，然后让用户点击，触发类似 fancybox 的效果，弹窗出现大图片。或者利用资源预加载（三个 HTML5 不常见特性简介）当用户还没打开的时候，就开始加载。还有好多思路，后面想到再补充。
乙：
压缩，预加载，缓存，图床。
丙：
1.使用缓存
2.使用CDN加速
3.使用jq延迟加载图片, 用到那个 加载哪个.
4.加大服务器宽带
5.检查服务器硬盘读取速度.
丁：
要尽可能的压缩，看用户的忍受程度。jpg 可以用很多方法压缩，png 推荐使用 工具（不过正文图片，显然要选择 jpg 格式的）。
推荐个压缩图片的神器：
https://tinypng.com/ 如图所示：
不过缺点就是不能设置压缩比例。只能直接压缩至最小。作为大banner图的有时候清晰度就不够达标。
戊：
直接一开始用压缩过的体积小的图，等加载完毕后，再用高清无码图来替换掉
高清无码的图片随便怎么命名，但是压缩过的命名有要求，那就是必须在原图的名称前面加上相同的便于分辨的标识。比如
高清图1命名为wozuishuai.jpg 那么相应的压缩图就叫wozuishuai_min.jpg (_min这个随你取名，但是要一致，不能一个叫_min,下一个就成了_small)
然后，高清图在网页上都不用，用压缩过的图。比如这样子
这样子，你打开网页的速度就会快很多，但是图片会失真，虽然有的时候不影响使用，但是会影响用户的体验，以及老板拍桌子骂你干什么吃的？
不用怕，可以用下面这段代码来解决这个问题，这个是基于jq的，要先引入jq
$(function(){
//一段正则，匹配所有_min.的图片src属性
vartest =/_min\./
//遍历所有的图片节点
$("img").each(function(index,obj){
if(test.test($(this).attr("src"))){
varreSrc = $(this).attr("src").replace(test,".");
$(this).attr("src",reSrc)
}
})
})
最后我们用一张图来测试下这个方法的可行性
其实不用1s，这些图基本上都可以用了，都可以看了，只不过我们这个是东郭先生，滥竽充数，但是最起码能知道图片讲的什么内容。但是，如果只加载高清图，那么，用户势必要等待好几s甚至十几s。这样的话，用户是很容易抛弃这个网站的。
网友评论