企業網站建設中圖片的優化方法

2019.03.29

1、控制jpg圖片的質量　　

網站建設时质量高的jpg格式图片比较清晰，色彩更鲜艳，不少人就用这种图片来美化header，其实这对速度的影响是很大的，因为打开一个页面首先加载的就是header，header加载时间太长的话，很容易使第一次来的访客反感，还有一种情况是页面上的小图标，有些站长过于追求美观，于是页面上的小图标也用高质量的图片来做，这是很没必要的。

2、盡量使用gif格式　　jpg格式在在展示色彩豐富的大圖片是效果很好，但做網頁圖標的話，gif才是最好的格式。因爲在展示像素級的細節是，gif的效果比jpg好了不知多少倍，你可以嘗試一下，截取一幅含有12px或14px文字的圖，分別保存爲256色的gif和質量爲80的jpg，對比一下文字的顯示效果，gif肯定比jpg清晰很多，而體積卻小了不少。所以，在制作小圖標或帶有小字體的圖片時，優先使用gif格式，這裏還有說到一個顔色數的問題，gif格式能顯示的顔色數量最多爲256色，其實對不包含大量色彩漸變的圖片來說，已經是非常足夠了，因此，在制作顔色比較少的gif時，嘗試一下降低顔色數，只要效果能過得去就行了。

3、如何插入裝飾性圖片　　這裏要講的不是簡單的用img標簽插入圖像，用這種方法插入頁面小圖標等裝飾性圖片弊端是非常大的。首先，用img標簽插入的圖片不能通過簡單的方法實現變換效果，在這裏，美化效果要打個折扣，其次，用img插入的圖片，如果圖片不在浏覽器緩存裏，而且不重複出現的話，會大大增加http請求數。因爲img標簽理論上是出現一次載入一次的。其三，用img標簽不利于調整圖片位置，如果一個圖片，需要在header靠右和footer靠左這兩個位置出現兩次，你就需要爲它寫兩次css。其四，用img標簽插入圖片不利于整合，整合圖片可以大大減少http請求數，到底整合圖片有什麽技巧呢?看下節。

4、页面背景图片的处理方法　　很多人喜欢用图片做页面元素的hover变换效果，但是却没有把相关的图片整合，导致一些变换效果有事会因为图片载入失败而失色。我們可以把针对某个效果的图片都整合成一个文件，在css里用background-position属性调整图片位置。这种做法的好处是背景只需要一次http请求，图片可以重复调用，也有利于图片变换。看到这里，你知道装饰性图片应该怎么插入了吗?对，用css。

5、插图尽量使用外链　　由于服務器性能的限制，一般非独立主机都会限制单ip的http请求数，如果一个页面里http请求太多的话，页面往往要等很久才能完全载入。特别是图片，如果太长时间不能加载的话，浏览器就会断开与服務器的链接，这是就需要在点击一下显示图片才能显示出来，比较好的支持外链的相册有picasa、flickr和国内的yupoo等。这样做不但能减轻服務器压力，节约流量，更重要的是，我不相信大部分站长用的服務器比那些专业的在线相册快。

6，提高圖片傳輸並行程度
使用多個而不是一個域名訪問圖片
大多數浏覽器中，對于同一域名下的並發HTTP請求數是有限制的，一般爲幾個。當頁面中圖片數量較多時，可以考慮分配不用的域名來訪問。比如，原本的圖片托管域名爲image.fractal-technology.com，可以考慮增加幾個子域名，如image-1.fractal-technology.com、image-2.fractal-technology.com等，將他們都CNAME到image.fractal-technology.com。然後在你的頁面中，當需要訪問圖片時，隨機分配所用的域名。

7，延遲加載圖片
原理很簡單，就是對于<img>標簽，先不要寫上它的資源地址src（因爲只要寫上了，浏覽器加載到這個img標簽，就會去下載src指向的圖片資源），可以把它的資源地址先寫在一個臨時屬性裏，下面用到的一段js（相當于一個js小插件）中寫在了一個屬性originalSrc裏（這個屬性叫啥都可以的），然後給<img>標簽們綁定事件，這個事件就是判斷其是否出現在了浏覽器的當前顯示區域，如果出現了，就把originalSrc指示的資源地址寫給<img>標簽的src，src寫入後浏覽器就會去下載圖片資源，如此就實現了圖片的延遲加載。

400-7808-893 / 010-64913142 我想要個更針對我需求的方案

上一篇文章：網站建設制作完成网页打开问题解决方法下一篇文章：手机網站建設网页打开速度提升的方法

看過此文章的人也看過

日韩一级一片