(七)：Type

譯文出處：http://www.w3cplus.com/responsive/responsive-images-101-part-7-type.html
英文原文：http://blog.cloudfour.com/responsive-images-101-part-7-type/

到目前為止我們專注于如何提高響應(yīng)式圖片性能。這是必要的，但是今天，我們依然在頁面上使用一樣的舊圖片。

現(xiàn)在，是時(shí)候看點(diǎn)有意思的東西了！

Type屬性

你是否為可選的可靠圖片格式僅限于jpg,png和gif的事實(shí)而悲哀？是否對(duì)新圖片格式例如svg或webp的瀏覽器支持性而感到好奇？

如果是，你會(huì)喜歡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>

這個(gè)新type屬性模仿了<video>元素的類型屬性并且使用起來差不多。

瀏覽器會(huì)選擇支持的被聲明的圖片類型中的第一個(gè)源。如果沒有識(shí)別出任何源的類型，它會(huì)用<img>元素的src或srcset聲明。

在srcset屬性中聲明的圖片格式的值為MIME類型。如果有多個(gè)圖片URL，它們必須都匹配聲明的圖片MIME類型。

當(dāng)然，你可以把type和sizes單獨(dú)結(jié)合或者再加上media屬性。這三個(gè)屬性都可選并且可以結(jié)合完成任何功能。

所有<source>元素都需要srcset屬性。屏幕密度和寬度描述符都可以和type屬性結(jié)合使用。

你需要媒體屬性嗎？

我已經(jīng)習(xí)慣告訴人們?cè)?a rel="external nofollow" target="_blank" target="_blank">大多數(shù)響應(yīng)式圖片上不應(yīng)該用<picture>元素。這一點(diǎn)是真的但又有一些誤導(dǎo)性。

既然你正在快速學(xué)習(xí)所有的內(nèi)聯(lián)響應(yīng)式圖片技術(shù)，讓我們來分解一下：

• 網(wǎng)頁上多數(shù)圖片適用于分辨率切換使用情況。
• 當(dāng)遇到分辨率切換使用情況，人們想讓瀏覽器做出最佳選擇。這就是srcset的設(shè)計(jì)用途。
• 當(dāng)使用帶有媒體屬性的<picture>元素時(shí)，其實(shí)是在制定瀏覽器應(yīng)該使用的圖片。

因此，當(dāng)需要處理分辨率切換和多圖片格式支持時(shí)應(yīng)該使用<picture>。關(guān)閉媒體屬性讓瀏覽器自己處理。

圖片格式的漸進(jìn)增強(qiáng)

到目前為止，我想在保持這個(gè)系列專業(yè)度的同時(shí)讓大家感覺輕松。但是到此為止了因?yàn)?。?！?/p>

天吶！天吶！天吶?。ㄖ匾氖虑檎f三遍）TYPES讓我太激動(dòng)了！

誒，必須把它移出我的系統(tǒng)。

許多年來我們都想要使用不同的圖片格式，但總是需要等待這個(gè)格式被廣泛傳播和接受。

但即便最終是時(shí)候切換了，我們都知道這樣做會(huì)放棄老版瀏覽器。這是一個(gè)過程但我們希望不要影響太多人。也許正是因?yàn)楹ε铝魇в脩粑覀儾艔膩頉]有切換新的圖片格式。

但是<picture>元素加上type屬性讓我們擺脫了這個(gè)難題。我們可以在圖片格式上使用漸進(jìn)增強(qiáng)來處理。

Sara Soueidan敘述了她如何開始使用[SVG并把PNG做為備用方案]((http://sarasoueidan.com/blog/svg-picture/)而不是過去所用的那些hacks。

然而圖片格式不僅僅有SVG和webp。JPEG-2000呢？JPEG-XR？APNG?

如果你能找到支持某一種圖片格式的瀏覽器并相信這能對(duì)用戶產(chǎn)生一定價(jià)值，那就沒有理由使用那些備用的格式。

JPEG-2000

Zoltan Hawryluk寫的一篇非常有深度的文章讓我眼界大開，我從中了解了不同圖片格式的優(yōu)點(diǎn)尤其是帶alpha透明的JPEG-2000圖片。

在Zoltan文章里的一個(gè)例子中，他展示了多顏色背景上放置的一個(gè)骰子。為了實(shí)現(xiàn)這個(gè)效果需要alpha通道透明度。

圖片的文件尺寸如下：

請(qǐng)看一下節(jié)約的空間。尺寸為1024*768大小的PNG格式的篩子文件大小為325.7k。相同圖片的JPEG-2000格式的大小僅為19.2K。不可思議！

我知道你在想什么。這雖然很棒，但是沒有瀏覽器支持JPEG-2000。

我也這么認(rèn)為，但我錯(cuò)了。桌面版和移動(dòng)端Safari已經(jīng)支持JPEG-2000。

在將所有圖片轉(zhuǎn)換為JPEG-2000之前，注意Zoltan的警告：

正如你所看到的，JPEG-2000圖片的數(shù)量。可選圖片的文件尺寸很大程度依賴于原始圖片的特性。因此有時(shí)候可選圖片格式的結(jié)果更好，有時(shí)候并不是。

所以這將取決于圖片和設(shè)計(jì)。但是你將看到，取決于圖片類型，對(duì)于那些受瀏覽器支持的用戶這將帶來巨大的好處。

圖片格式的全新世界

我不指望每個(gè)人都馬上開始使用JPEG-2000。在這個(gè)方向上仍有許多工作要做從而讓我們知道哪種圖片格式是有意義的，在什么時(shí)候應(yīng)該使用。

使用工具轉(zhuǎn)換而直接得到多種圖片格式很難。Zoltan在文章底部的他使用的創(chuàng)建不同圖片格式的工具中給出了一些信息。

除了命令行工具，我發(fā)現(xiàn)其他工具都很難用。除了一些公司像Adobe有豐富的圖片支持例如JPEG-2000外其他公司很少有支持因?yàn)橹皼]人能使用。

還有很多實(shí)驗(yàn)要做。我快等不及了！

那CSS呢？

目前為止我們談到的所有東西都是內(nèi)聯(lián)響應(yīng)式圖片。因?yàn)镃SS中已經(jīng)有了媒體查詢，內(nèi)聯(lián)響應(yīng)式圖片是最大的挑戰(zhàn)所以我們大部分注意力都放在它上面。

然而由于在CSS中有很多響應(yīng)式圖片新標(biāo)準(zhǔn)并且有一些你應(yīng)該知道的技巧。我們將在第八節(jié)中繼續(xù)闡述CSS響應(yīng)式圖片。