網站開發 關於圖片壓縮 以及圖片使用

1. 圖片格式

　　我就簡單介紹一下我經常使用的三中圖片格式 ( png jgp webP  )

　 A）png 能夠儲存透明，完爆gif的地方在於失真小，沒鋸齒；劣勢是不支持動畫；採用無損壓縮，在多數狀況下均可以保留圖片裏全部像素。PNG無損壓縮算法，簡單地說，就是把圖片裏出現的每個顏色都記錄下來。經過記錄這些顏色相對應的值記錄一張圖片。png分爲兩種，一種是Index，一種是RGB。Index記錄同一種顏色的值和出現的位置（簡單地說，好比一個2px*2px的超級小圖，從左往右從上往下依次的顏色是紅，白，白，紅，那麼記錄的方法就是「紅-1,4；白-2,3」）；而RGB圖則把全部像素的色值依次記錄下來（即「紅，白，白紅」）。對於相同的圖片，Index格式的尺寸老是小於RGB。

　　   通常來講咱們使用網頁小圖標的時候 這個用的比較多。由於須要透明。咱們使用CSS Sprite。順便提一下咱們可使用font-famliy來替換 淘寶天貓都是使用這樣的技術。

　 B) jpg 適用於攝影圖片，以及色彩豐富的圖片。它採用壓縮算法，會對圖片上每8px*8px的像素進行處理，經過強制漸變的方法來減少文件尺寸，所以不管選擇的儲存質量多高，仍是會多多少少失真一些，但對於攝影之類的圖片來講，jpg格式就會比png小不少了。

　　好比背景介紹圖片。百度的自定義背景設置就是這個jpg格式。

    C)webP google新的圖片格式。一種支持有損壓縮和無損壓縮的圖片文件格式，派生自圖像編碼格式 VP8。根據 Google 的測試，無損壓縮後的 WebP 比 PNG 文件少了 45％ 的文件大小，即便這些 PNG 文件通過其餘壓縮工具壓縮以後，WebP 仍是能夠減小 28％ 的文件大小。

2. 介紹通常css背景圖片的百分比平鋪。

　　

　　　這裏的代碼取自 百度官網的代碼。由於背景圖片是本身設置 全部用js本身設置。咱們本身寫的時候也須要用background-image: url(....);

　　設置position: absolute;來定位圖片。以及 backgrouns-position: center center.這是圖片位置居中。 background-repeat: no-repeat;

　　background-size:cover; 加前綴-weibikt- -o- 以及必要的響應式的話就只須要100%寬度 若是不須要就 設置min-width: ;根據佈局來設置。

3.接下來咱們來實際操做一下 jpg 和 png的大小 以及壓縮以後的 jpg 和png

　　第一步  我先切一張 1900*1000的 jpg背景圖。大小是523KB。我在壓縮以後 300kb(https://www.jpeg.io/)

　　　　    我在切一張 png的 2.63MB 壓縮以後856KB（iParta）固然這是背景圖片。通常咱們用jpg 有所壓縮 由於比較大。

 

　第二步  接下來壓縮一下小圖標png

　　　　　我使用的是項目的精靈圖片 原35KB 壓縮以後12KB。

　　　　　最好是 一個個壓縮以後再放上去。