> 譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-7-type.html > 英文原文：http://blog.cloudfour.com/responsive-images-101-part-7-type/ 到目前為止我們專注于如何提高響應式圖片性能。這是必要的，但是今天，我們依然在頁面上使用一樣的舊圖片。 現在，是時候看點有意思的東西了！ ## Type屬性 你是否為可選的可靠圖片格式僅限于`jpg`,`png`和`gif`的事實而悲哀？是否對新圖片格式例如`svg`或`webp`的瀏覽器支持性而感到好奇？ 如果是，你會喜歡`type`屬性。  `type`屬性可以添加在`<picture>`元素中的`<source>`元素上并且允許聲明可供瀏覽器選擇的不同圖片類型： ~~~ <picture> <source type="image/svg+xml" srcset="logo.xml"> <source type="image/webp" srcset="logo.webp"> <img src="logo.png" alt="ACME Corp"> </picture> ~~~ 這個新`type`屬性模仿了`<video>`元素的類型屬性并且使用起來差不多。 瀏覽器會選擇支持的被聲明的圖片類型中的第一個源。如果沒有識別出任何源的類型，它會用`<img>`元素的`src`或`srcset`聲明。 在`srcset`屬性中聲明的圖片格式的值為`MIME`類型。如果有多個圖片`URL`，它們必須都匹配聲明的圖片`MIME`類型。 當然，你可以把`type`和[`sizes`](http://www.w3cplus.com/responsive/responsive-images-101-part-5-sizes.html)單獨結合或者再加上[`media`](http://www.w3cplus.com/responsive/responsive-images-101-part-6-picture-element.html)屬性。這三個屬性都可選并且可以結合完成任何功能。 所有`<source>`元素都需要`srcset`屬性。[屏幕密度](http://www.w3cplus.com/responsive/responsive-images-101-part-3-srcset-display-density.html)和[寬度描述符](http://www.w3cplus.com/responsive/responsive-images-101-part-4-srcset-width-descriptors.html)都可以和`type`屬性結合使用。 ## 你需要媒體屬性嗎？ 我已經習慣告訴人們在[大多數響應式圖片上不應該用`<picture>`元素](http://www.w3cplus.com/responsive/(http://blog.cloudfour.com/dont-use-picture-most-of-the-time/))。這一點是真的但又有一些誤導性。 既然你正在快速學習所有的內聯響應式圖片技術，讓我們來分解一下： * 網頁上多數圖片適用于[分辨率切換使用情況](http://www.w3cplus.com/responsive/responsive-images-101-definitions.html)。 * 當遇到分辨率切換使用情況，人們想讓瀏覽器做出最佳選擇。這就是`srcset`的設計用途。 * 當使用帶有媒體屬性的`<picture>`元素時，其實是在制定瀏覽器應該使用的圖片。 因此，當需要處理分辨率切換和多圖片格式支持時應該使用`<picture>`。關閉媒體屬性讓瀏覽器自己處理。 ## 圖片格式的漸進增強 到目前為止，我想在保持這個系列專業度的同時讓大家感覺輕松。但是到此為止了因為。。。 天吶！天吶！天吶！（重要的事情說三遍）TYPES讓我太激動了！ 誒，必須把它移出我的系統。 許多年來我們都想要使用不同的圖片格式，但總是需要等待這個格式被廣泛傳播和接受。 但即便最終是時候切換了，我們都知道這樣做會放棄老版瀏覽器。這是一個過程但我們希望不要影響太多人。也許正是因為害怕流失用戶我們才從來沒有切換新的圖片格式。 但是`<picture>`元素加上`type`屬性讓我們擺脫了這個難題。我們可以在圖片格式上使用漸進增強來處理。 Sara Soueidan敘述了她如何開始使用[SVG并把PNG做為備用方案]((http://sarasoueidan.com/blog/svg-picture/)而不是過去所用的那些hacks。 然而圖片格式不僅僅有SVG和webp。JPEG-2000呢？JPEG-XR？APNG? 如果你能找到支持某一種圖片格式的瀏覽器并相信這能對用戶產生一定價值，那就沒有理由使用那些備用的格式。 ### JPEG-2000 Zoltan Hawryluk寫的一篇[非常有深度的文章](http://www.w3cplus.com/responsive/(http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/))讓我眼界大開，我從中了解了不同圖片格式的優點尤其是帶`alpha`透明的JPEG-2000圖片。 在Zoltan文章里的一個例子中，他展示了[多顏色背景上放置的一個骰子](http://www.w3cplus.com/responsive/(http://www.useragentman.com/tests/html5ImageConverter/examples/dice-compare/drag-test.html))。為了實現這個效果需要`alpha`通道透明度。  圖片的文件尺寸如下： | 分辨率| JPEG 2000 | JPEG-XR | PNG | WEBP | | --- | --- | --- | --- | --- | | 320×240 | 2K | 22.6K | 55.2K | 112.1K | | 600×450 | 13.5K | 48.5K | 14.3K | 26.6K | | 1024×768 | 19.2K | 95.7K | 325.7K | 56K | 請看一下節約的空間。尺寸為`1024*768`大小的PNG格式的篩子文件大小為`325.7k`。相同圖片的JPEG-2000格式的大小僅為`19.2K`。不可思議！ 我知道你在想什么。這雖然很棒，但是沒有瀏覽器支持JPEG-2000。 我也這么認為，但我錯了。桌面版和移動端Safari已經支持JPEG-2000。 在將所有圖片轉換為JPEG-2000之前，注意Zoltan的警告： > 正如你所看到的，JPEG-2000圖片的數量。可選圖片的文件尺寸很大程度依賴于原始圖片的特性。因此有時候可選圖片格式的結果更好，有時候并不是。 所以這將取決于圖片和設計。但是你將看到，取決于圖片類型，對于那些受瀏覽器支持的用戶這將帶來巨大的好處。 ## 圖片格式的全新世界 我不指望每個人都馬上開始使用JPEG-2000。在這個方向上仍有許多工作要做從而讓我們知道哪種圖片格式是有意義的，在什么時候應該使用。 使用工具轉換而直接得到多種圖片格式很難。Zoltan在文章底部的[他使用的創建不同圖片格式的工具](http://www.w3cplus.com/responsive/(http://www.useragentman.com/blog/2015/01/14/using-webp-jpeg2000-jpegxr-apng-now-with-picturefill-and-modernizr/))中給出了一些信息。 除了命令行工具，我發現其他工具都很難用。除了一些公司像Adobe有豐富的圖片支持例如JPEG-2000外其他公司很少有支持因為之前沒人能使用。 還有很多實驗要做。我快等不及了！ ## 那CSS呢？ 目前為止我們談到的所有東西都是內聯響應式圖片。因為CSS中已經有了媒體查詢，內聯響應式圖片是最大的挑戰所以我們大部分注意力都放在它上面。 然而由于在CSS中有很多響應式圖片新標準并且有一些你應該知道的技巧。我們將在第八節中繼續闡述**CSS響應式圖片**。