图片网站如何加速？

图片作为网页中的重要元素，虽然在网页的修饰及内容的展示上给人一种视觉美感，但是它本身也是一种资源。只要是资源，那浏览器就会发出请求，请求一多自然就会影响网页的加载速度。所以对于一般的图片（图床）网站，图片较多，打开速度也较慢。此时我们就需要进行一些技术上的优化，以此来加快网页加载速度了。具体有哪些优化措施呢？结合我的实际经验分享一些供大家参考：

1、图片资源单独域名形式部署每款浏览器其实都是有并发数限制的，如果一个页面上所有的资源用的都是同一个域名来请求，那并发数无法突破，所以建议图片资源可以搞1~3个独立域名（或子域名）来部署访问。这样做的好处有：便于后面的CDN加速实施；可以提高浏览器的并发请求数；减少了Cookie污染。我们可以看看那些大型网站，图片都是以单独域名形式部署的，而且域名还不止一个。

2、CDN加速图片类网站最多的资源就是图片，而正常的图片都是静态文件，所以我们完全可以把图片全部走CDN加速，这样做的好处主要有：节省源站服务器的带宽；利用CDN可以解决边缘网络访问问题，使得用户就近获取资源，加快了网页加载速度；

3、图片尺寸控制、适当裁剪见过不少网站存在一些无法理解的低级错误，如：一张图片几兆，一个页面下来光图片资源就占了几十兆；图片显示区大小为200x200，但引用的图片却是x768这种大尺寸的图。上面这些错误相信很多人都遇到过，这是需要规避的。网页上的图片一定要做到适当裁剪、控制好尺寸大小。

4、启用WebP格式WebP格式是由谷歌开发的一种图片格式，它即支持无损压缩也支持有损压缩，不管是哪种压缩方式，相比传统的JPEG，其物理大小要小得多。所以如果我们将JPEG的图片转为WebP，无疑是加快了网页加载速度，只不过要注意，一些低端浏览器可能对WebP的支持不够，这里要做好兼容处理。另外，如果服务器无法支持WebP，那就尽可能使用GIF代替PNG图片。

5、启用Gzip压缩Gzip同样能有效的压缩静态资源，据说静态资源文件启用了Gzip后，压缩率能达50%以上。Gzip要想正常发挥作用，需要客户端和服务器端都支持Gzip压缩。服务器端主流的HTTPServer都支持Gzip压缩，而现在主流的浏览器也都支持Gzip压缩，所以问题不大。

6、惰性加载惰性加载也称为“懒加载”，当图片出现在浏览器可视区域内图片才加载，如果不在可视区域图片则不主动加载，这就是懒加载的由来。通过惰性加载技术可以有效的减少页面短时间内的请求数量，这样就缓解了页面加载速度。如何实现呢？主要借助JQ插件来实现，常见的有：jQuery.lazyload等。上述这些方案在现实中是最常用的，当然了，方案远不止这些。以上就是我的观点，对于这个问题大家是怎么看待的呢？欢迎在下方评论区交流及补充~我是科技领域创作者，十年互联网从业经验，欢迎关注我了解更多科技知识！

除了直接的使用CDN加速服务外，您也可以使用：替换或者提高压缩算法和策略如果你有特别的客户端，可以考虑使用自定义的更高压缩比的压缩方式，这个做手机应用的童鞋或许接触过，和十年前大家压缩MP3以及做软件压缩包一样，使用自己软件算法和策略替代市面上已有的算法和策略。如果没有特别的客户端，不妨对图片和视频使用更好的压缩格式，比如webp和webm，以及适当情况下的gif替代png等。其他层面的方法：服务器性能：说到服务器性能，可能多数人会停留在几核几G几百G这种概念上，但是对于网站服务器，关注的应该是单机/VPS的数字运算能力和IO读写能力，如果不是单机服务器，那么请关注自己实际能使用的资源数量，尤其是高峰时刻够用且有余力！机房带宽资源：带宽资源或许是除了高端存储设备外，价格最贵的资源之一了。所以，评估带宽是否满足你的站点，是特别重要的事情。一般来说小站点，1~2M的带宽绝对够用。如果不知道你的机器的带宽能力，不妨登录机器后台观察流量图峰值，或者机器安装speedtest-cli，来进行数据收集。服务器的上行带宽，即是我们常说的网站带宽，一般而言，此数值越大，提供的访问能力就越强。服务器软件性能：“尺有所短，寸有所长”，软件也是一样，小站点，资源有限的情况下：如果你以前使用apache，且没有使用一些三方模块，或者不需要使用apache软件套装里的高级功能，或者没有软件必须依赖apache，以及三方模块能在nginx中找到替代的，可以考虑替换为nginx。如果你的程序允许实现数据库缓存/站点内容缓存，但是没有使用缓存的，请开启缓存功能；如果你的程序使用了文件缓存，在内存资源有富裕的情况下，请使用内存缓存（自己考虑缓存策略）；如果你的程序原来的运行环境执行速度不够快，那么请考虑升级或运行环境，诸如php5.2->php.5.6 ，或者php5.6->hhvm3.x，asp/php->nodejs；如果你的程序中多数功能你用不到，考虑使用更轻便的小程序；如果你启用了缓存，且数据库（关系数据库）读取热数据频率高于冷数据，且访问量不是特别大，不需要考虑数据库效率，否则需要考虑数据库进行分库分表和建立适当的索引，以提高数据库吞吐能力。根据自己情况适当调整nginx/mysql/redis/memcache等软件的数据分块大小。优化程序关键逻辑的流程，尽可能让程序始终遵循最短路径结束任务。尽可能让TCP链接重用，或者适当调整持久链接的时间和数量（Keep-Alive），以及考虑使用SPDY、防火墙/服务器代理软件/程序对访客限制流量以及过滤或者禁止能力范围内的异常流量。DNS查询速度：DNS对于站点首次打开速度至关重要，所以请尽可能选择靠谱的DNS提供商来解决DNS查询问题。除此之外，对于webkit支持DNS预缓存的浏览器，可以在页面头部尽少和尽合理的添加要缓存的DNS，以加快页面展示速度。替换或者提高压缩算法和策略：如果你有特别的客户端，可以考虑使用自定义的更高压缩比的压缩方式，这个做手机应用的童鞋或许接触过，和十年前大家压缩MP3以及做软件压缩包一样，使用自己软件算法和策略替代市面上已有的算法和策略。如果没有特别的客户端，不妨对图片和视频使用更好的压缩格式，比如webp和webm，以及适当情况下的gif替代png等。页面提供资源数量：尽可能减少同一时间的资源请求数量：

1.对于静态样式和脚本，使用合并策略。针对单页面程序，你可以将所有样式或者脚本都合并为一个单独的文件。但是针对多页面，以及带有皮肤策略的站点，则考虑抽象基础的Base内容和额外的内容，并通过前后端脚本进行策略加载。

2.对于图片和视频资源，在交互允许的情况下，使用延时加载，跨屏预加载一定数量，来取代页面文档加载完成后就加载全部的策略。对不同浏览器使用不同的脚本：差异对待浏览器，对古老浏览器不使用一些功能，以及差异对待浏览器使用的基础脚本库。如果你使用下一节提到的JS加载器，那么这个很容易做到。页面增量更新：如果你的内容支持异步增量更新，那么使用接口更新增量内容的模式，来替换打开新页面的模式。客户端缓存：简单的说，尽可能给所有资源使用最长时间的缓存，对于不支持200cache的客户端提供304Modified缓存（前者不需要额外HTTP请求）。客户端本地缓存：对于变化不大的站点，配合脚本，对支持使用本地缓存的客户端进行适当的数据缓存。页面资源加载时机：将页面主要样式尽可能放在文档顶部、将三方不可合并脚本尽可能放置页面底部、将页面inline脚本尽可能替换为配置内容。用户终端某时刻性能：受限于客户端宿主机性能以宿主机网络环境。和最开始提到的服务器性能一样，CPU时间片被其他程序占用时，或者硬件古老，以及网络被其他程序占用的时候，会带来浏览的不畅。如果你对网站的一般访问速度有信心（通过收集到的数据的反馈），且网站属于内容展示类的，可以在适当的位置加诸如以下的提示（程序打底提示）：页面加载过慢，不妨检查网络环境是否有其他软件占用（下载工具/在线视频），并刷新页面。资源加载失败，请刷新重试。待页面加载完成，干掉以上提示。但是请权衡此内容的存储位置和脚本执行时机，考虑搜索引擎将提示和内容都缓存的情况。用户终端浏览器性能：如果你的用户使用者古老的浏览器，软件性能成为页面数据下载和渲染瓶颈，那么不妨给其一个提示，或者强制其使用新版本的浏览器进行访问：请更新浏览器以获得更加体验。本站仅支持新的浏览器：

A,B,
C。为了您的访问速度和安全考虑，我们推荐您安装：
X,Y,
Z。用户直观感受：极致畅快体验！！！

可以试下用云极CDN加速资源包，通过CDN加速实现提升网站打开速度和图片加载速度，提升用户体验

优化图片，一般图片不要超过200KB，用压缩或者替换的方法去加速