開發(fā)前端也有幾年了，一直很忙埂息，課下看書技潘，或者做一些筆記，看看別人的見解千康，也會做一些筆記記錄享幽，有時(shí)間就來刷刷掘金，逛逛技術(shù)網(wǎng)站拾弃，尷尬的事情是自己沒有認(rèn)真的總結(jié)過一些筆記和知識點(diǎn)值桩，發(fā)出來大家共同學(xué)習(xí)，最近也才開始做一些markdown豪椿，后續(xù)我會抽時(shí)間繼續(xù)做這件事奔坟，有什么不對的知識點(diǎn)携栋，麻煩大家指出批評，也算對自己的一個(gè)鞏固咳秉。
很多的前端開發(fā)者都比較關(guān)心性能的優(yōu)化的問題婉支，今天主要講一下圖片優(yōu)化的見解和總結(jié)，可能很多人大神都知道我列出的知識點(diǎn)澜建，那么開始整理一下圖片優(yōu)化的筆記吧,可能廢話有點(diǎn)多向挖，語言組織不到位的地方，大家多擔(dān)待
每個(gè)前端網(wǎng)站都有可能引入很多的圖片來達(dá)到酷炫或者展示的效果炕舵，有人會問何之？為什么非要用圖片，因?yàn)橛行┘夹g(shù)上達(dá)不到的效果展示咽筋，只能用圖片來代替溶推，比如淘寶天貓京東這些商城的酷炫的創(chuàng)意廣告圖
當(dāng)然我們也會用到很多的圖標(biāo)圖片，圖片越多請求次數(shù)越多奸攻，造成延遲的可能性也就越大
最開始做前端的時(shí)候悼潭，我都會把實(shí)現(xiàn)不了的效果切換成圖片還有一些圖標(biāo)也會切成圖片，這樣就會降低前端頁面展示的性能舞箍，增加頁面資源HTTP的請求舰褪，甚至有的頁面存在幾十個(gè)img的http請求
總結(jié)優(yōu)化的地方有幾個(gè)地方：
-
1、降低圖片的大小
首先我們目前常用的圖片格式有png,gif,jpg等疏橄，png又分png24和png8,關(guān)于圖片的的知識點(diǎn)占拍，我給大家兩個(gè)網(wǎng)址大家可以了解一下，對于圖片格式講的很詳細(xì)
http://www.cnblogs.com/xiangism/p/5311314.html
http://www.cnblogs.com/pqjzxq/p/5749304.html
我們的目的是降低圖片的大小kb捎迫，有很多方法可以做晃酒，壓縮圖片，選擇更小kb的圖片格式窄绒，以達(dá)到最優(yōu)的顯示效果
好多人都推薦一個(gè)壓縮圖片的網(wǎng)站---智圖：一個(gè)圖片優(yōu)化平臺
用起來很簡單的
現(xiàn)在百度一下很多在線壓縮圖的在線網(wǎng)站贝次，比如TinyPNG:一個(gè)壓縮PNG的神站
-
2、選擇適當(dāng)?shù)膱D片寬度尺寸（即響應(yīng)式圖片）
不管是pc還是移動端彰导，都會有很多不同尺寸的圖片蛔翅，如果你做的是響應(yīng)式網(wǎng)站和移動端的話，那么你就更需要考慮圖片尺寸的選擇問題了
移動端的屏幕分辨率和尺寸太多位谋，所以就可能需要不同的尺寸加載不同尺寸的圖片山析，這樣就節(jié)省了網(wǎng)站的訪問流量，以及頁面渲染的效率
先展示現(xiàn)在設(shè)備的分辨率等的圖
如果想查看更多的話掏父，就去devices
響應(yīng)式圖片方式有哪幾種笋轨，
可以通過服務(wù)器圖片資源配置命名規(guī)則來獲取圖片
ps：或
-
通過css定義來加載不同的背景bg圖片
@media only screen and (max-width : 480px) {
.img {background-image: url(bg-480.jpg);}
}
@media only screen and (max-width : 360px) {
.img {background-image: url(bg-360.jpg);}
}
-
Img的
srcset和sizes的方法
這兩個(gè)img屬性是html5的屬性，有瀏覽器的兼容問題
<img class="img" src="imgbg-320.jpg"
srcset="imgbg-320.jpg 320w, imgbg-360.jpg 360w, imgbg-480px.jpg 480w"
sizes="(max-width: 480px) 480px, 320px">
src:當(dāng)設(shè)備不支持srcset，sizes屬性時(shí)爵政，使用這個(gè)圖片
srcset指定圖片的地址和對應(yīng)的圖片質(zhì)量仅讽。sizes用來設(shè)置圖片的尺寸零界點(diǎn)
sizes="[media query] [length], [media query] [length] ... "
對于srcset和sizes，詳解點(diǎn)擊查看
-
picture標(biāo)簽實(shí)現(xiàn)
通過媒體查詢的方式钾挟，根據(jù)頁面寬度（當(dāng)然也可以添加其他參考項(xiàng)）加載不同圖片洁灵，具體picture詳情點(diǎn)擊查看
<picture>
<source srcset="3.jpg" media="(min-width: 320px)">
<source srcset="2.jpg" media="(min-width: 480px)">
<img srcset="1.jpg">
</picture>
-
3、減少HTTP的網(wǎng)絡(luò)資源請求
CSSSprites(背景精靈圖/雪碧圖)
一種網(wǎng)頁圖片應(yīng)用處理方式等龙，將一個(gè)頁面涉及到的所有零星圖片或者圖標(biāo)都包含到一張大圖里面处渣，這樣就只需要加載這個(gè)一個(gè)圖片伶贰，而不是很多個(gè)圖片了蛛砰，這樣就減少了很多http的請求
如何制作精靈圖？
自己通過ps制作黍衙，或者UI設(shè)計(jì)師制作的過程中泥畅，做好這個(gè)精靈圖，注意圖片直接的間隔琅翻，以防css操作的時(shí)候出現(xiàn)顯示的問題
怎么使用精靈圖位仁？
利用CSS的background-image，background- repeat方椎，background-position的組合進(jìn)行背景定位聂抢，background-position可以用數(shù)字精確的定位出背景圖片的位置
詳細(xì)查看CSSSprites
-
css和css3制作簡單的圖標(biāo)和動畫（代替gif圖片）
隨著技術(shù)的發(fā)展，css3可以實(shí)現(xiàn)的效果越來越多棠众，比如箭頭圖標(biāo)琳疏，三角形，梯形等圖標(biāo)闸拿，或者一些陰影效果空盼，漸變的效果，所以可以用css制作一些簡單的圖標(biāo)新荤，而且具有多變性
.sanjiaoxing {
width: 0;
height: 0;
border-top: 2em solid #000;
border-right: 1.8rem solid transparent;
border-left: 1.8rem solid transparent;
}
-
SVG技術(shù)替換圖片
SVG 是使用 XML 來描述二維圖形和繪圖程序的語言,支持透明揽趾，縮放，動畫
什么是SVG苛骨？(摘自w3cschool)
SVG 指可伸縮矢量圖形 (Scalable Vector Graphics)
SVG 用來定義用于網(wǎng)絡(luò)的基于矢量的圖形
SVG 使用 XML 格式定義圖形
SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和 XSL 之類的 W3C 標(biāo)準(zhǔn)是一個(gè)整體
-
html5 canvas繪畫圖形
目前canvas應(yīng)用很多篱瞎，它可以使用腳本javascript來繪制各種圖表、動畫等
點(diǎn)擊查看更多html5 canvas
-
4痒芝、字體圖庫代替圖標(biāo)
隨著技術(shù)的更新和瀏覽器的更新奔缠，字體圖庫去代替一些圖標(biāo)我認(rèn)為還是極好的，使用字體圖庫你不僅可以改變大小吼野，而且還可以改變顏色
大家比較熟知的的字體圖庫有很多校哎，這里就說一個(gè)吧，font-awesom,截圖看看他的好處吧
有了他，根本不擔(dān)心圖標(biāo)的問題了闷哆，很簡單的使用腰奋，只需要引入之后，按照規(guī)則寫html標(biāo)簽即可
其實(shí)咱們也可以自定義咱們的圖標(biāo)選擇抱怔，畢竟有的圖標(biāo)庫我們用不到這么多劣坊，因此咱們可以自定義咱們的字體圖標(biāo)庫
目前我認(rèn)為畢竟好的就是 Iconfont ,最近的幾個(gè)react項(xiàng)目，我都在使用這個(gè)來定制自己的一些圖標(biāo)庫屈留，用起來也很簡單
-
1局冰、搜索自己想要的圖標(biāo)
2、在搜索結(jié)果頁找到自己想要的圖標(biāo)灌危，然后加入購物車
3康二、找完自己的圖標(biāo)之后點(diǎn)開購物車，會有一個(gè)
添加到項(xiàng)目勇蝙，點(diǎn)擊它沫勿，如果你有項(xiàng)目就可以選擇，如果沒有就創(chuàng)建一個(gè)項(xiàng)目味混，點(diǎn)擊確定之后即可4产雹、在個(gè)人中心找到自己的項(xiàng)目，選擇方式之后翁锡，點(diǎn)擊下載即可使用
使用方式在這里就不多說了蔓挖，和font-awesom基本上差不多的
-
5、微信小程序怎么使用字體圖標(biāo)
直接引入字體也可以馆衔，但是要把字體文件放在服務(wù)器上瘟判，并且允許跨域的情況下，在css文件里面遠(yuǎn)程地址引入字體文件即可
@font-face {font-family: "iconfont";
src: url('https//examle.com/font/iconfont.eot?t=1494498562077'); /* IE9*/
src: url('https//examle.com/font/iconfont.eot?t=1494498562077#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('https//examle.com/font/iconfont.woff?t=1494498562077') format('woff'), /* chrome, firefox */
url('https//examle.com/font/iconfont.ttf?t=1494498562077') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+*/
url('https//examle.com/font/iconfont.svg?t=1494498562077#iconfont') format('svg'); /* iOS 4.1- */
}
如果不想放在服務(wù)器上哈踱，還有一種方法可以使用荒适，這個(gè)時(shí)候我們需要一個(gè)工具來輔助一下 transfonter,將解壓出來的
ttf字體文件轉(zhuǎn)化成base64格式
生成的文件里面替換css里面的代碼
@font-face {
font-family: 'iconfont';
src: url(data:font/truetype;charset=utf-8;base64,這里省略了) format('truetype');
font-weight: 500;
font-style: normal;
}
使用和直接引入字體圖標(biāo)是一樣的
-
6、圖片延遲加載（懶惰加載）（js/lazyload.js）
有個(gè)頁面會很大很長很多的圖片素材开镣，這樣全部加載就會變的很慢刀诬，因此需要修改一下加載方案，只加載窗口內(nèi)的圖片邪财，我們大家瀏覽網(wǎng)站的時(shí)候會經(jīng)成乱迹看到會有默認(rèn)圖，圖片加載成功之后會替換默認(rèn)圖
比如常用的lazyload.js用于圖片的延遲加載树埠，視口外的圖片會在窗口滾動到它的位置時(shí)再進(jìn)行加載糠馆，這是與預(yù)加載相反的，怎憋。
- 能有效的提高頁面加載速度
- 有時(shí)候可以幫助減少服務(wù)器負(fù)載
用法：lazyload.js
還有一些優(yōu)化的方式在上一篇文章已經(jīng)列了又碌，這里就不多說了
如有沒有說到的地方九昧，麻煩大家指出
后續(xù)抽時(shí)間會接著做筆記，大家共同學(xué)習(xí)鞏固分享
前端蝸牛blog傳送：codehtml
