图片网站如何加速？

圖(tú)片(piàn)作为网頁(yè)中的(de)重要元素，虽然在网頁(yè)的(de)修饰及内容的(de)展示上给人一种视覺(jué)美感，但是(shì)它本身也是(shì)一种資(zī)源(yuán)。只要是(shì)資(zī)源(yuán)，那瀏(liú)览器(qì)就会发出请求，请求一多自然就会影响网頁(yè)的(de)加载速度。所(suǒ)以對(duì)于一般的(de)圖(tú)片(piàn)（圖(tú)床）网站，圖(tú)片(piàn)较多，打开速度也较慢。此时我們(men)就需(xū)要进行一些技(jì)术上的(de)优化，以此來(lái)加快(kuài)网頁(yè)加载速度了。具体有(yǒu)哪些优化措施呢？结合我的(de)實(shí)际经验分享一些供大家参考：

1、圖(tú)片(piàn)資(zī)源(yuán)单独域名(míng)形式部署

每款瀏(liú)览器(qì)其實(shí)都是(shì)有(yǒu)并发数限制的(de)，如(rú)果一个頁(yè)麪(miàn)上所(suǒ)有(yǒu)的(de)資(zī)源(yuán)用的(de)都是(shì)同一个域名(míng)來(lái)请求，那并发数无法突破，所(suǒ)以建议圖(tú)片(piàn)資(zī)源(yuán)可以搞1~3个独立域名(míng)（或子(zi)域名(míng)）來(lái)部署访问。這(zhè)樣(yàng)做(zuò)的(de)好处有(yǒu)：

便于后麪(miàn)的(de)CDN加速實(shí)施；

可以提高瀏(liú)览器(qì)的(de)并发请求数；

减少了Cookie污染。

我們(men)可以看看那些大型网站，圖(tú)片(piàn)都是(shì)以单独域名(míng)形式部署的(de)，而且域名(míng)还不止一个。2、CDN加速

圖(tú)片(piàn)类网站最多的(de)資(zī)源(yuán)就是(shì)圖(tú)片(piàn)，而正常的(de)圖(tú)片(piàn)都是(shì)静态文件，所(suǒ)以我們(men)完全可以把圖(tú)片(piàn)全部走(zǒu)CDN加速，這(zhè)樣(yàng)做(zuò)的(de)好处主(zhǔ)要有(yǒu)：

节省源(yuán)站服务器(qì)的(de)带宽；

利用CDN可以解决边缘网络访问问题，使得用户就近获取資(zī)源(yuán)，加快(kuài)了网頁(yè)加载速度；

3、圖(tú)片(piàn)尺寸控制、适当裁(cái)剪(jiǎn)

见過(guò)不少网站存在一些无法理解的(de)低级错误，如(rú)：一张圖(tú)片(piàn)几兆，一个頁(yè)麪(miàn)下來(lái)光圖(tú)片(piàn)資(zī)源(yuán)就占了几十兆；圖(tú)片(piàn)显示區(qū)大小为200x200，但引用的(de)圖(tú)片(piàn)却是(shì)1024x768這(zhè)种大尺寸的(de)圖(tú)。

上麪(miàn)這(zhè)些错误相信很多人都遇到過(guò)，這(zhè)是(shì)需(xū)要规避的(de)。网頁(yè)上的(de)圖(tú)片(piàn)一定要做(zuò)到适当裁(cái)剪(jiǎn)、控制好尺寸大小。

4、启用WebP格(gé)式

WebP格(gé)式是(shì)由谷歌开发的(de)一种圖(tú)片(piàn)格(gé)式，它即支持无损壓(yā)縮(suō)也支持有(yǒu)损壓(yā)縮(suō)，不管是(shì)哪种壓(yā)縮(suō)方(fāng)式，相比传统的(de)JPEG，其物理大小要小得多。所(suǒ)以如(rú)果我們(men)将JPEG的(de)圖(tú)片(piàn)转为WebP，无疑是(shì)加快(kuài)了网頁(yè)加载速度，只不過(guò)要注意，一些低端瀏(liú)览器(qì)可能對(duì)WebP的(de)支持不够，這(zhè)里要做(zuò)好兼容处理。

另外，如(rú)果服务器(qì)无法支持WebP，那就尽可能使用GIF代替(tì)PNG圖(tú)片(piàn)。

5、启用Gzip壓(yā)縮(suō)

Gzip同樣(yàng)能有(yǒu)效的(de)壓(yā)縮(suō)静态資(zī)源(yuán)，据说静态資(zī)源(yuán)文件启用了Gzip后，壓(yā)縮(suō)率能达50%以上。

Gzip要想正常发挥作用，需(xū)要客户端和服务器(qì)端都支持Gzip壓(yā)縮(suō)。服务器(qì)端主(zhǔ)流的(de)壓(yā)縮(suō)，所(suǒ)以问题不大。

6、惰性加载

惰性加载也称为“懒加载”，当圖(tú)片(piàn)出现在瀏(liú)览器(qì)可视區(qū)域内圖(tú)片(piàn)才加载，如(rú)果不在可视區(qū)域圖(tú)片(piàn)則(zé)不主(zhǔ)动加载，這(zhè)就是(shì)懒加载的(de)由來(lái)。

通過(guò)惰性加载技(jì)术可以有(yǒu)效的(de)减少頁(yè)麪(miàn)短时间内的(de)请求数量，這(zhè)樣(yàng)就缓解了頁(yè)麪(miàn)加载速度。

如(rú)何實(shí)现呢？主(zhǔ)要借(jiè)助JQ插件來(lái)實(shí)现，常见的(de)有(yǒu)：jQuery.lazyload 等。

上述這(zhè)些方(fāng)案在现實(shí)中是(shì)最常用的(de)，当然了，方(fāng)案远不止這(zhè)些。

以上就是(shì)我的(de)观點(diǎn)，對(duì)于這(zhè)个问题大家是(shì)怎么看待的(de)呢？欢迎在下方(fāng)评论區(qū)交流及补充 ~ 我是(shì)科技(jì)领域创作者，十年互联网从业经验，欢迎关注我了解更多科技(jì)知识！