白話文解說響應式圖片(responsive images)

由於現代螢幕尺寸相當多元,為了讓網頁能夠在各式各樣尺寸的螢幕上能夠正常顯示,所以網頁設計越來越講求響應式網頁設計(responsive web design)。

但這個議題目前各種前端 CSS 框架都有實作各自的響應式設計方案(不外乎 Grid, Column 等等),所以實作響應式網頁設計的門檻也降低很多。

可是,你有沒有想過網頁上的圖片怎麼做到響應式設計呢?畢竟不管任何尺寸都用同一張大圖的話,對於小螢幕的裝置來說,肯定是一種流量的浪費。

仔細一查,還真的有相關的解決方案。

也就是 <img> 標籤的 2 個屬性 srcsetsizes

先講講 srcset 屬性,這個屬性是告訴瀏覽器可以根據情況自己決定要載入哪一張圖,而非預設的 src

先簡單以 pixel density 為 1 的螢幕舉例,例如 <img src="1600x200.png" srcset="800x100.png 800w, 1600x200.png 1600w" /> 就是告訴瀏覽器如果螢幕寬度在 800 px 以下,可以下載 800x100.png 來用,如果是在 800 px 以上,可以改用 1600x200.png ,而預設的 src="1600x200.png" 則是給不支援 srcset 屬性的瀏覽器使用的(是的,就是 IE …)

另一種 srcset 的方式則是根據螢幕的 pixel density 來決定,也就是我們常常看到視覺設計師會針對手機特別出 1x, 2x, 3x 的圖,這個也可以在 srcset 中指定,例如 <img src="600x600.png" srcset="400x400.png 2x, 600x600.png 3x" />

srcset 中的圖下載好之後,這時不管螢幕再怎麼縮小,都還是顯示已經下載好的那張圖(因為瀏覽器不需要再為小螢幕下載圖,它已經有一張大圖可以用了),這時可以進一步搭配 sizes 屬性,在裡面寫好 media query, 讓它根據螢幕大小調整圖片尺寸,例如 <img src="600x600.png" srcset="400x400.png 400w, 600x600.png 600w" sizes="(max-width: 520px) 400px" /> 讓螢幕尺寸在 520px 以下都自動改用 400px 呈現 。

以上就是響應式圖片的簡單說明!

延伸閱讀

Responsive Images

img: The Image Embed element

Make Your Site Lightning Fast With Responsive Images

FOLLOW US

對抗久坐職業傷害

研究指出每天增加 2 小時坐著的時間,會增加大腸癌、心臟疾病、肺癌的風險,也造成肩頸、腰背疼痛等常見問題。

然而對抗這些問題,卻只需要工作時定期休息跟伸展身體即可!

你想輕鬆改變現狀嗎?試試看我們的 PomodoRoll 番茄鐘吧! PomodoRoll 番茄鐘會根據你所設定的專注時間,定期建議你 1 項辦公族適用的伸展運動,幫助你打敗久坐所帶來的傷害!

贊助我們的創作

看完這篇文章了嗎? 休息一下,喝杯咖啡吧!

如果你覺得 MyApollo 有讓你獲得實用的資訊,希望能看到更多的技術分享,邀請你贊助我們一杯咖啡,讓我們有更多的動力與精力繼續提供高品質的文章,感謝你的支持!