整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          手把手教你如何將網站圖片格式升級為WebP|干貨分享

          手把手教你如何將網站圖片格式升級為WebP|干貨分享

          | 王成

          本文轉載自SegmentFault

          WebP格式介紹

          WebP是Google開發的一種新的圖片格式,它支持有損壓縮、無損壓縮和透明度,壓縮后的文件大小比JPEG、PNG等都要小。所以可以節省帶寬,減少頁面載入時間,節省用戶的流量。

          Android和iOS的App只要引入Google提供的解碼庫,都可以很輕松的支持WebP格式。不過在Web上,WebP的支持還不是很廣泛。根據Can I Use的數據,目前只有Chrome、Opera瀏覽器,以及Android的WebView是支持WebP的。但是WebP圖片有這么多優點,我們能不能在Web頁面中使用呢?可以。這篇文章就來討論一下這個問題。

          把已有的圖片轉換為WebP格式

          要使用WebP格式,需要將你網站用到的圖片都制作一份WebP格式的版本,如果你使用CDN服務商,它們一般都會提供轉碼到WebP格式的選項。如又拍云:

          增加這樣的配置后,我們可以通過給圖片URL加上相應的后綴,來使用WebP格式的版本資源。

          你也可以使用Webpack、Gulp的插件來批量轉換圖片格式。這里不贅述。

          在瀏覽器中使用WebP格式

          因為不是所有瀏覽器都支持WebP格式,我們就有兩種思路:一個是只在支持WebP格式的瀏覽器中使用WebP格式;一個是讓不支持WebP格式的瀏覽器可以支持WebP。

          姿勢一: <Picture>標簽

          <Picture>是HTML5中的一個新標簽,類似<Video>它也可以指定多個格式的資源,由瀏覽器選擇自己支持的格式進行加載。

          <picture class="picture">

          <source type="image/webp" srcset="image.webp">

          <img class="image" src="image.jpg">

          </picture>

          如果瀏覽器支持WebP格式,就會加載Image.webp,否則會加載Image.jpg。

          即使瀏覽器不支持<Picture>標簽,圖片仍然會正常顯示,只是CSS可能無法正確選取到Picture元素。比如在IE8中,下面的CSS就不會起作用:

          .picture img { width: 100px; height: 100px;}

          但是可以這樣來給圖片寫樣式:

          .image { width: 100px; height: 100px;}

          即使瀏覽器使用的是WebP格式的圖片,最終還是會應用img元素的樣式。

          不過只要使用了HTML5Shiv,使舊的瀏覽器支持這個標簽,CSS選擇器就可以正常使用了。這種方法是最簡單的,但是不能作用于CSS中的圖片(如背景)。

          姿勢二:使用JS替換圖片的URL。

          我們有很多的頁面往往會用到圖片的“懶加載”——通常是把圖片的URL放在Img元素的一個自定義屬性中,然后用JS在適當的時機將URL賦值給SRC屬性。用類似的原理,我們可以根據瀏覽器是否支持WebP格式,給Img元素賦予不同的SRC值。

          首先我們需要用JS來判斷瀏覽器是否支持WebP格式,方法是給瀏覽器一個WebP格式的圖片,看瀏覽器能否正確渲染。這種方法是異步的,所以需要把后續的操作寫在回調函數中。我們可以將結果存儲在LocalStorage中,這樣之后就不用再次檢查了。

          function checkWebp(callback) { var img=new Image();

          img.onload=function () { var result=(img.width > 0) && (img.height > 0);

          callback(result);

          };

          img.onerror=function () {

          callback(false);

          };

          img.src='data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA';

          }

          然后用下面的代碼來根據是否支持WebP替換相應的SRC。

          function showImage(useWebp){ var imgs=Array.from(document.querySelectorAll('img'));

          imgs.forEach(function(i){ var src=i.attributes['data-src'].value; if (useWebp){

          src=src.replace(/\.jpg$/, '.webp');

          }

          i.src=src;

          });

          }

          checkWebp(showImage);

          這種方式的優點是可以與已有的懶加載函數相結合。而且使用JS,我們還可以處理CSS中的圖片(如背景圖等)。

          姿勢三:使用JS解碼WebP圖片

          既然WebP的解碼器是開源的,那么能否用JS來實現呢?當然可以,有人就用JS寫出了WebP的解碼器。引入這個JS庫,就是將所有的WebP圖片用JS解碼后轉換為Base64,然后替換掉原來的URL,這樣就可以讓原本不支持WebP的瀏覽器正常顯示WebP了。這個庫的使用方法非常簡單,看網頁的說明即可。

          這種方法的缺點是,因為JS要解碼WebP圖片,需要在此異步請求SRC中的URL(不過因為圖片本身之前被下載了一次,直接使用了緩存);而且JS解碼比較慢,對性能有影響,可能需要一段時間才能顯示出圖片來。

          以上就是在瀏覽器中使用WebP圖片的幾種方法,可以根據自己的實際情況選用。在我們的實踐中,使用了WebP格式后,圖片的體積普遍縮小了1/3以上,既加快了加載的速度,還節省了用戶的流量,我們十分推薦從現在就開始使用這種格式。

          又小拍也關注WebP一段時間呢,不但關注了WebP,還關注了動態WebP,不久之后會有驚喜帶給大家哦。

          又拍云的處理功能實在太豐富,在圖片處理方面,略縮圖任意尺寸更改,全網一鍵更新所有圖片,打水印,URL防盜鏈等。最近上線的又拍直播云,除了直播加速、推拉流外,更具有豐富的美顏、濾鏡、水印、防盜鏈、鑒黃、禁播等功能,幫助直播平臺快速上線直播業務,快來試試吧~

          文章總結了一下在切圖工作中常見的關于瀏覽器尤其是IE8下兼容的一些問題,為了使頁面更好的兼容各個瀏覽器,達到更好的用戶體驗。

          1. Respond.min.js

          我們在寫頁面時,經常會碰到頁面在電腦端自適應的頁面,并且要求兼容到IE8瀏覽器,因為是自適應的頁面,所以我們會用到Media Query,

          即: “@media(max-width:1200px){},” 但是這個屬性在IE8瀏覽器以及IE8以下是不支持的,這時我們可以加載一個js文件,使 IE8以及IE8以下版本也支持Media Query屬性; 即:

          Respond.min.js是一個快速、輕量的js文件,

          用于為IE6-IE8以及其他不支持CSS3 Media Queries的瀏覽器提供媒體查詢的min-width 和max-width特性,實現響應式的網頁設計。

          其中Media Query 的兼容性如下:

          使用方法:引入respond.min.js,但要在css的后面(越早引入越好,在IE下面看到頁面閃屏的概率越低,因為做出css會先渲染出來,如果respond.min.js的加載的很后面,這是重新根據media Query解析出來的css會再改一次頁面的布局)

          <!--[if lt IE 9]>

          <script src="js/respond.min,js"></script>

          <![endif]-->

          其中:“<!--[if lt IE 9]>”是“html if條件注釋”它的含義是當IE瀏覽器版本小于IE9瀏覽器版本時,就運行這個js文件,否則就不運行這個js文件(比如:在chorme瀏覽器下是不識別的)

          2. Htmlif條件注釋

          <!--[if !IE]><!-->除IE瀏覽器外都可識別<!--<![endif]--> <--[if IE]>所有IE可識別<![endif]--> <--[if IE6]>僅IE6可識別<![endif]--> <--[if lt IE6]>IE6以及IE6以下版本可識別<![endif]--> <--[if gte IE6]>IE6以及IE6以上版本可識別<![endif]--> <--[if lt IE9]>IE9以及IE9以下版本可識別<![endif]-->

          注意:圖中標識的紅線是空格,必須嚴格按照這個樣式來寫,否則ie9上會出現顯示這些字符:

          3. html5shiv.min.js

          我們在寫頁面時,html5的新增標簽在IE9以下的版本是識別的,所以在IE8以及以下的版本內容是錯亂的,解決方案是加載一個js文件,可以讓html5的新增標簽在ie8以及以下也能正常顯示。

          用于解決IE9以下版本的瀏覽器對HTML5新增標簽不識別,并導致css不起作用的問題。

          <!--[if lt IE 9]> <script src="js/html5shiv.min.js"></script> <![endif]-->

          其中html5新增的標簽有:<article>、<aside>、<audio>、<bdi>、<canvas>、<command>、<datalist>、<details>、<embed>、<figcaption>、<figure>、<footer>、<header>、<keygen>、<mark>、<meter>、<nav>、<output>、<progress>、<rp>、<rt>、<ruby>、<section>、<source>、<summary>、<time>、<track>、<video>、<wbr>

          4. CSS3個瀏覽器兼容問題

          1. Css3選擇器的兼容情況

          注意:

          l first-child 兼容到IE8+(包括IE8)

          l Last-child: 兼容到IE9+(包括IE9)

          l nth-child(n):兼容到IE9+(包括IE9)

          l 解決方案,詳見【7.偽類兼容問題】

          2.Css3屬性的兼容情況

          注解

          l Css動畫只能支持到ie10+(包括ie10),Chrome和Safari是沒有問題的。

          l 如果是ie8以下的動畫需要用jquery1.x的動畫函數實現,jquery2.x是不支持ie9以下的瀏覽器的動畫效果的。

          l 透明度(opacity)和 rgba() 僅支持到ie9+(包括ie9);如果要兼容到IE8,就要用到濾鏡,用法:

          background: rgba(157,151,162,0.56);

          filter:progid:DXImageTransform.Microsoft.gradient(startColorstr="#569d97a2",endColorstr="#569d97a2");

          例如:其中“#569d97a2”中后六位(9d97a2)是顏色的十六進制的色值,前兩位(“56”)指的是不透明度代表不透明度是 0.56。

          l Border radius, box-shadow: 支持到IE9+(包括IE9),IE8的解決方案:詳見【6.PIE.htc

          5. IOS的字體的問題

          我們在寫頁面是會發現,數字和英文在ios系統中顯示異常,經過研究發現,IOS系統中是識別微軟雅黑的字體的,所以在定義字體的時候要寫上IOS系統的默認字體,IOS默認的字體為

          中文字體:STHeiti

          英文和數字:Helveticas

          所以在定義字體的時候,要注明Ios

          font-family:"微軟雅黑","Helvetica";

          6. PIE.htc

          我們知道IE8瀏覽器不支持css3的屬性,這里PIE實際上是指的是一個名為pie的htc文件,即pie.htc,使用CSS的behavior行為,可以調用此文件,然后使IE8也能實現一部分常見的CSS3效果,如:圓角(border-radius)、漸變(gradient)、陰影(box-shadow)。

          CSS代碼如下(以box-radius為例):

          [codesyntax]

          .pie_radius{ width:360px; height:200px; background:#34538b; border-radius:8px; -moz-border-radius:8px; -webkit-border-radius:8px; behavior: url(PIE/PIE.htc);behavior: }

          [/codesyntax]

          7. 偽類兼容問題

          在頁面中我們通常會用到偽類,以country項目為例,

          為了時左右的內容跟上部分對齊,我們常常使用偽類消除左右兩邊的間距,這樣做是正確的,但是偽類的兼容性不好,只能兼容到IE9+,如果客戶要求的兼容性是IE9的話,這樣做沒有任何問題!

          但是,如果客戶要求兼容性是IE7或是IE8的話,這樣做就會出錯,因為在IE7和IE8下是不支持偽類的。我們可以用另一種方法解決這個問題。

          1) 不必清掉左右兩邊的內容的左右邊距

          2) 給循環的元素的父級一個較大的寬度,使其即使在不清掉左右邊距的情況下,也能保證內容布局不錯亂,跟設計一致!

          3) 此時這個父級的寬度顯然就跟設計不一致了,可以給這個父級再加一個父級,這個父級的寬度要跟設計一致,并為它加上{overflow:hidden}即可。

          如下圖: 去掉.sectionSeven .listType的偽類之后,給”.listType” 的父級“.sectionSeven” 的寬度由之前的1000px增加到1010px(增加10px是因為listType的右邊距是10px);這樣寬度夠大,內容就不會錯亂,然后為了保持跟設計圖一致的寬度,再給.sectionSeven的父級.bigSection的寬度設置1000px(設計圖的寬度),同時設置{overflow:hidden},即隱藏掉多出來的部分即可。

          文/切版網

          http://www.qieban.cn/10-jianrongxing-qietu

          家在第一次做網站的時候,一般都是拿別人的模板來直接用,很少有人會為自己的個人網站做個模板,甚至是從頭到尾都自己寫代碼的。特別是現在最為流行的響應式網站,不是專業的寫起來是相當的麻煩,而且小問題多多,比如今天就要說到的問題。要知道在微軟提供的IE瀏覽器問世的前夕是沒用響應式網站的,那么要想在IE上瀏覽響應式網站會怎么樣呢?

          大家是不是經常在瀏覽網頁的時候出現下圖這樣的情況

          出現這個問題的原因是什么呢?細心的朋友就會發現在上圖的瀏覽器地址欄后面有個IE的圖標,這就表示我們瀏覽這個網頁是通過IE的內核瀏覽的。大家都知道,自適應一般采用@media的媒體查詢方式進行,雖然大多數瀏覽器都支持,但IE的老版本即IE9以下都是不支持媒體查詢的。這時,我們就需要為IE9以下版本的瀏覽器提供媒體查詢支持,經過大量百度,終于找到了方法。

          使用respond.min.js可以為IE9以下版本提供媒體查詢支持。資源百度上有很多,這里就不提供了,以免違反規則。

          在使用respond.min.js的時候有幾個需要注意的地方:

          1. respond.min.js只能識別網頁地址是http://開頭的網址,它只會給http://開頭的網頁提供媒體查詢支持,我們在本地編寫代碼調試的時候一般是使用file:///形式瀏覽的。

            解決辦法:開啟本地服務器,(打開PHPstudy使用localhost或者127.0.0.1訪問就好了)或者上傳到云端服務器。

          2. 提供respond.min.js支持的代碼必須在你加載css樣式之后。也就是說先加載你的css樣式,在加載respond.min.js。使用方法如下:

            <link rel="stylesheet" href="css/main.css"/><script src="js/respond.min.js"></script><script src="js/html5shiv.js"></script>

          做到以上兩點,基本上你的網頁就能成功為IE9以下版本用戶提供媒體查詢了。效果如下圖所示:


          主站蜘蛛池模板: 国产一区韩国女主播| 国模视频一区二区| 国产主播在线一区| 无码精品久久一区二区三区| 激情内射亚洲一区二区三区爱妻| 久久精品动漫一区二区三区| 在线电影一区二区| 精品国产一区二区三区久久久狼| 国产人妖视频一区二区| 一区二区三区在线视频播放| 在线观看日本亚洲一区| 色窝窝无码一区二区三区 | 男插女高潮一区二区| 任你躁国产自任一区二区三区| 国产在线观看精品一区二区三区91| av无码免费一区二区三区| 无码精品人妻一区二区三区人妻斩| 亚洲av福利无码无一区二区| 韩国福利一区二区三区高清视频| 国产伦一区二区三区高清 | 亚洲AV无码第一区二区三区| 亚洲色婷婷一区二区三区| 国精产品一区一区三区免费视频 | 精品久久久久中文字幕一区| 日本一区二区三区在线视频| 精品视频一区在线观看| 一区二区三区在线看| 一区二区三区免费在线观看| 视频精品一区二区三区| 国产福利电影一区二区三区久久久久成人精品综合 | 视频一区二区三区免费观看| 无码少妇一区二区浪潮av| 日韩一区二区三区免费体验| av无码人妻一区二区三区牛牛| 亚洲AV无码一区二区三区牲色| 一区二区视频免费观看| 亚洲一区二区三区乱码在线欧洲| 日韩亚洲AV无码一区二区不卡 | 亚洲一区二区三区久久| 麻豆精品人妻一区二区三区蜜桃| 国产情侣一区二区|