文章簡介：
現在的頁面，一般都離不開圖像，而怎麼做才能讓我們的頁面中的圖像加載的又快又好呢？在優化頁面速度的時候還有什麼事是你所不知道的呢？
下面看看今天我爲大家帶來了哪些關於web圖像的你所平時不一定關心的事與一些有建設性的建議吧：
1)關於web頁面中的圖像你需要關注的關鍵點有那些？
2)web頁面中圖像的格式選擇需要注意什麼？
3)<img>標籤的用法細節小結?
第一個問題
關於web頁面中的圖像你需要關注的關鍵點有那些？
![]()
示例圖
像示例圖中的圖片一樣，平時我們寫頁面都會用到圖片，而你在看圖片的時候看的是圖片的什麼呢（不要說只看到上圖中的S型曲線的美女哦）？你在用圖片的時候是不是怎麼去考慮它的用法呢？有沒有想過這個圖片對你的頁面來說是不是最優的狀態？
而當你選擇一些圖片的時候你是從那幾個方面去考慮的呢？
下面我們就說一下關於運用圖片的時候你應該需要注意的一些關鍵點：
1.圖片的格式
這個可能大家都知道但是不一定知道什麼時候去用什麼樣的格式最優，下一個問題中會詳細說明；
2.圖片的顏色
這個大家可能也瞭解一些，就是關於圖片的顏色值顯示的問題，計算機的顯示屏可以顯示數以個百萬計的顏色，但是圖片的顏色的會根據它的格式不同而所可以表示的顏色值也有不同；例如：PNG-8只擁有256種顏色；
3.圖片的尺寸和分辨率
這個在紙上是沒有的分辨率的概念的，想要多大的圖像就用多大的尺寸，而在顯示屏幕上尺寸的因素就不是一個了，還與屏幕的分辨率有關；
4.圖片的加載速度
這個對用戶來說真的是太重要了，如果說一個頁面點開超過三秒還沒有圖片顯示的話，用戶對這個網站的體驗評價就會大的將低；
面加載的速度對直接的要素就是圖片的大小了，赿大加載的時間赿長；
5.圖片的透明度
一般的在給用戶一個好的用戶交互體驗的時候有一個有透明度的圖片要比沒有透明度的好，比如：一些圖標大多時候用的都是有透明度的；
6.圖片的動畫
這個效果是在紙上你就遠看不見的（小時候的那種翻頁的就不說了），這一類的圖像可以是gif格式的圖片，但是現在爲了提升速度一般都用 flash,css，javaScript來創建動畫，但是最近用flash的也赿來赿少了（蘋果對HTML的推動的問題），所以現在主要對動畫的創建主 要就是css與javascript;
第二個問題
web頁面中圖像的格式選擇需要注意什麼？
關於web頁面中的圖片的格式現在大多數的瀏覽器或者是屏幕閱讀器都支持一下三種格式：png\jpg\gif;
這三個格式的選擇可是大有門道的，要學會正確選擇這三個格式，就需要先了解這個三個格式的特點;
png ：常用的png格式的圖片分爲png-8與png-24，通常這個格式用來保存大量純色的圖案或是標誌類的文件，對於連續重複的圖案他的壓縮效果好一些，而且他支持圖片的透明度（alpha）見上面的圖標；png的壓縮爲無損的壓縮；
jpg:適用於彩色的照片，因爲他包含大量的顏色並進行了合理的壓縮，使文件變得比較小，但是他是有損心事的壓縮，一些像素點壓縮之後不能夠被還原；但是對於頁面來說犧牲一些像素點是值得的因爲可以提升速度；
如：示例圖中的美女，他就是用的jpg格式的圖片，進行的合理的壓縮，加載的速度很快，效果也還是可以接受的；
gif:他的最大的特點就是可以做成動態的圖片，就是小動畫，示例圖中的左右箭頭就是gif格式的；他也支持透明，但是不像png一樣支持半透明；所以在一些比較複雜的圖的時候就需要用png來做透明效果而不是gif，以免產生鋸齒的效果；
知道了他們的特性之後就可以因地制宜的選擇合理的格式來封裝圖片文件了，這裏你可以用ps來做一下簡單的處理；對了，還有一個非常重要的來較快瀏覽器圖片加載速度的方法；就是可以把一個圖片分成幾個部分來保存之後用css在組裝起來，而保存的那幾個部分可以根據圖片文件的內容來選擇對應的文件的格式保存，以達到在可控範圍內，速度最優；
第三個問題
<img>標籤的用法細節小結?
只要做過頁面開發的人都知道只要是向頁面中加載圖片，標準的用法就是用<img>標籤（現在做一些效果用的都是css+div）；關於img的用法在這裏我就不說了，下面就是簡單的說總結一下在用這個標籤的時候我們需要注意的問題：
1.通過IMG來加載的圖片一定不要太大，那樣會非常的影響你的頁面的速度以及用戶的體驗所以將圖片進行必要的壓縮是必須的（需要訪問的圖片一定要放在服務器上這樣訪問者纔可以訪問的到；）
2.爲你的img標籤提供文本解釋，因爲一些網速不好的地方會用瀏覽器選擇關掉圖像顯示的功能，如果你不做文本解釋那麼在不顯示圖像的時候你的網站就沒有 意義了；文本提示標準的用法就是用alt屬性；理論上說解釋的文字沒有長度的限制，但是一般的瀏覽器不會自動換行，所以呢爲了用戶體驗最好控制在50個字 符以內；
3.在HTML5規定IMG標籤一定要用ALT屬性，這個一定要記住哦，不習慣給IMG標籤加ALT屬性的需要注意了；
4.關於圖像的尺寸的問題，雖然可以制定IMG標籤的寬高來修改原圖片的顯示大小，但是在瀏覽器請求的時候圖像的大小不會變，所以建議就是頁面需要多大的圖片就給多大的圖片不要通過IMG標籤中的寬高屬性來修改；
好了今天就說到這裏吧，不知道對讀到這篇文章的您有什麼幫助沒有？相信通過這篇文章您對web頁面的圖像選擇一定有了一個新的認識；
下篇文章我會講一些HTML5 與鏈接相關的東西哦，相信一定會有你不知道的事情。 感謝您的閱讀，期待下次與您見面；
身爲一名IT技術人員磨練自己的技術是必不可少的，關注微信號coder_online，程序員互動聯盟，可以與大牛在線隨時討論自己感興趣的話題，讓自己用最少的時間學到最多的東西，我在程序員互動聯盟期待您的加入
