響應(yīng)式圖片(自適應(yīng)圖片)

klinson 發(fā)布于2019-08-02 14:21 / 2117人閱讀

摘要：雖然在簡(jiǎn)單圖形圖案界面元素等方面較好，但如果是有大量的細(xì)節(jié)的照片，創(chuàng)建矢量圖像會(huì)變得非常復(fù)雜。為了兼容老舊瀏覽器，我們可以在標(biāo)簽當(dāng)中指定類(lèi)型，使用屬性，并在當(dāng)中指定相應(yīng)格式的圖片

在這篇文章中討論的新特性 — srcset/sizes/ — 都已經(jīng)被新版本的現(xiàn)代瀏覽器和移動(dòng)瀏覽器所支    持（包括Edge，而不是IE）。

解決的問(wèn)題

分辨率切換問(wèn)題：小屏手機(jī)屏幕上顯示網(wǎng)頁(yè)，那么沒(méi)有必要在網(wǎng)頁(yè)上嵌入pc端的大圖片，浪費(fèi)帶寬

藝術(shù)方向問(wèn)題：當(dāng)網(wǎng)站在狹窄的屏幕上觀看時(shí)，顯示一幅包含了重要細(xì)節(jié)的裁剪版圖片，而不是顯示pc端的大圖，這樣會(huì)顯得圖片縮小，重要地方不突出

分辨率切換問(wèn)題 不同分辨率加載不同尺寸的圖片

需要說(shuō)明的幾點(diǎn)如下:

srcset語(yǔ)法: "圖片路徑物理像素, 圖片路徑物理像素, ....."

size: "媒體查詢(xún) css像素"

src: 當(dāng)瀏覽器不支持上面的屬性的時(shí)候，默認(rèn)加載這里

加載的流程如下:

查看設(shè)備寬度

檢查sizes列表中哪個(gè)媒體條件是第一個(gè)為真

查看給予該媒體查詢(xún)的槽大小

加載srcset列表中引用的最接近所選的槽大小的圖像

在很多pc端上，1px=1w

不同的分辨率加載相同的尺寸


     
img {
    width: 320px;
}

一般情況下當(dāng)我們給img設(shè)置固定的寬的時(shí)候,為了在不同的dpr設(shè)備上顯示相同的大小，可以配合x來(lái)，例如1.5x代表dpr為1.5的設(shè)備

藝術(shù)問(wèn)題

需要說(shuō)明的幾點(diǎn):

source當(dāng)中的也可以使用srcset、sizes屬性

必須提供一個(gè)img元素，以備瀏覽器不支持的時(shí)候使用

為什么不使用css和javaScript來(lái)完成圖片替換

因?yàn)槟悴荒芟燃虞d好元素后, 再用 JavaScript 檢測(cè)視圖的寬度，如果覺(jué)得大小不合適，就動(dòng)態(tài)地加載小的圖片替換已經(jīng)加載好的圖片，這樣的話, 原始的圖像已經(jīng)被加載了, 然后你也加載了小的圖像, 這樣的做法對(duì)于響應(yīng)式圖像的理念來(lái)說(shuō)，是很糟糕的。

另一種方式svg

位圖由以像素為單位的寬和高表示，如果位圖顯示的尺寸大于原始尺寸，一張較小的位圖看來(lái)會(huì)有顆粒感（然而矢量圖不會(huì)這樣）

但是它不適用于所有的圖片，在某種程度上是這樣的——它們無(wú)論是文件大小還是比例都合適，無(wú)論在哪里你都應(yīng)該盡可能的使用它們。

雖然在簡(jiǎn)單圖形、圖案、界面元素等方面較好，但如果是有大量的細(xì)節(jié)的照片，創(chuàng)建矢量圖像會(huì)變得非常復(fù)雜。加載會(huì)消耗更多的帶寬。

使用現(xiàn)代圖像格式

有很多令人激動(dòng)的新圖像格式（例如WebP和JPEG-2000）可以在有高質(zhì)量的同時(shí)有較低的文件大小。然而，瀏覽器對(duì)其的支持參差不齊。

為了兼容老舊瀏覽器，我們可以在標(biāo)簽當(dāng)中指定MIME類(lèi)型，使用type屬性，并在srcset當(dāng)中指定相應(yīng)格式的圖片