CSS3和HTML5網頁設計:響應式網頁圖片設計

文章簡介：HTML5與CSS響應式圖片。

隨著 Retina 螢幕的逐漸普及，網頁中對圖片的適配要求也越來越高。如何讓圖片在放大了兩倍的 Retina 螢幕顯示依然清晰，曾經一度困擾著網頁開發人員，好在 CSS3 與 HTML5 已經著力在改變這種現狀。那麼到底什麼是響應式圖片呢？

什麼是響應式圖片？

響應式圖片是指：使用者代理程式根據輸出裝置的解析度不同載入不同類型的圖片，不會造成頻寬的浪費。同時，在改變輸出裝置類型或解析度時，能及時載入對應類型的圖片。

CSS 響應式圖片

對於很多 IOS 開發人員來說可能已經不太陌生了，為了適配Retina 螢幕，傳統的 CSS3 實現方式是通過載入一張寬高分別放大兩倍的圖片，然後通過 Media Queries 使背景圖片尺寸減小一倍「background-size:50% 50%;」，例如：

?

1 2 3 4 5 6 7 8 9 10 11 12 13

.mod .hd h3 { background-image:url(http://www.csswang.com/wp-content/uploads/2013/01/030234veU.png );/* 普通螢幕 */ /* ———— Retina ———— */ @media only screen and (-o-min-device-pixel-ratio: 2/1), /* Opera */ only screen and (min–moz-device-pixel-ratio: 2),        /* Firefox 16 之前 */ only screen and (-webkit-min-device-pixel-ratio: 2),    /* Webkit */ only screen and (min-resolution: 240dpi),                    /* 標準 */ only screen and (min-resolution: 2dppx)                      /* 標準 */ { .mod .hd h3{ background-image:url(http://img02.taobaocdn.com/tps/i2/T1t9wzXlxXXXczY8cm-212-310.png); background-size: 106px 155px; } }

兩張圖片的對比效果：

在製作@2x圖片時需要注意一些問題：

如果類似上圖一樣是純文字內容的圖片，不要直接從大圖片縮放為小圖片，這樣文字效果會有些失真，這是 Photoshop 渲染的問題。應該調整字型大小，再重新排版。可以直接看看一淘首頁的效果

藍框內是直接縮放圖片大小的效果，紅框內是把字型大小從32號改成16號的效果。

Demo詳見：http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/

HTML5 響應式圖片

CSS image-set 解決了背景圖片的響應式問題，但是 HTML中的 img 元素怎麼辦呢？正當我一籌莫展的時候，2011年11月 @brucel 提出了HTML5 的一個草案：

?

1 2 3 4 5 6 7

<picture alt=”"> <source src=hires.png media=”min-width:800px”> <source src=midres.png media=”min-width:480px”> <source src=lores.png> <!– 不支援的瀏覽器降級處理 –> <img src=midres.png alt=”"> </picture>

於此同時，其他的一些想法如雨後春筍般湧現出來，於是 W3C 社區討論群組 Responsive Images Community Group 應運而生。最新的規範在這裡：http://picture.responsiveimages.org/ 。截止本文發布時間，最近一次更新是 2013年1月7日，規範樣本：

?

1 2 3 4 5 6 7

<picture width=”500″ height=”500″> <source media=”(min-width: 45em)” srcset=”large-1.jpg 1x, large-2.jpg 2x”> <source media=”(min-width: 18em)” srcset=”med-1.jpg 1x, med-2.jpg 2x”> <source srcset=http://www.webjx.com/css/”small-1.jpg 1x, small-2.jpg 2x”> <img src=http://www.webjx.com/css/”small-1.jpg” alt=”"> <p>Accessible text</p> </picture>

可以看到這裡的「srcset」屬性類似 image-set，通常情況下，srcset 裡面的資源是具有 fallback 特性的，也就是說第一個圖片資源無法載入的時候可以跳過載入後面的備用資源。 但是 Apple 的 eoconnor 提出的方案是這樣的：

?

1 2 3

<img src=http://www.webjx.com/css/”foo-lores.jpg” srcset=”foo-hires.jpg 2x, foo-superduperhires.jpg 6.5x” alt=”decent alt text for foo.”>

誠然，任何一個新標準的提出，都會存在各種不同的聲音，這是好事，作為網頁的最終開發人員其實並不太關心實現文法。有任何問題大家也可以直接到 HTML5 中文興趣小組參與討論。

小結

本來想把新年的第一篇文章寫的歡樂一些，不過貌似沒啥槽點。HTML5 響應式圖片的草案還剛剛開始，不過前景還是很美好的。目前我們能做的就是在CSS 中使用 image-set 屬性值，因為目前大部分 Retina 螢幕的裝置的瀏覽器都是基於 Webkit 核心的，如果有特殊的需求可以使用  Media Queries。