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

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

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

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

解決的問題

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

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

分辨率切換問題 不同分辨率加載不同尺寸的圖片

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

srcset語法: "圖片路徑物理像素, 圖片路徑物理像素, ....."

size: "媒體查詢 css像素"

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

加載的流程如下:

查看設(shè)備寬度

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

查看給予該媒體查詢的槽大小

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

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

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


     
img {
    width: 320px;
}

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

藝術(shù)問題

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

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

必須提供一個img元素，以備瀏覽器不支持的時候使用

為什么不使用css和javaScript來完成圖片替換

因為你不能先加載好元素后, 再用 JavaScript 檢測視圖的寬度，如果覺得大小不合適，就動態(tài)地加載小的圖片替換已經(jīng)加載好的圖片，這樣的話, 原始的圖像已經(jīng)被加載了, 然后你也加載了小的圖像, 這樣的做法對于響應(yīng)式圖像的理念來說，是很糟糕的。

另一種方式svg

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

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

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

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

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

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