你所不知道的html5與html中的那些事（五）——web圖像

 

文章簡介：

      如今的頁面，通常都離不開圖像，而怎麼作才能讓咱們的頁面中的圖像加載的又快又好呢？在優化頁面速度的時候還有什麼事是你所不知道的呢？

    下面看看今天我爲你們帶來了哪些關於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，程序員互動聯盟，能夠與大牛在線隨時討論本身感興趣的話題，讓本身用最少的時間學到最多的東西，我在程序員互動聯盟期待您的加入