Web端高分屏圖片加載方案

語言: CN / TW / HK

前言

隨着顯示器的快速發展,越來越多的用户更換了高分屏,我們作為Web開發者,網站內的圖片尺寸都是適配普通屏幕的,如果在高分屏上圖片將會變得模糊不清。

我觀察了幾個網站,發現他們的做法是直接用了@2x的圖片,這種做法在普通屏幕上圖片的一些細節會丟失。那麼有沒有什麼辦法可以兼顧普通屏幕和高分屏呢?本文就跟大家分享一種解決方案,歡迎各位感興趣的開發者閲讀本文。

基礎概念

在前言中,我們提到了高分屏@2x,本章節就跟大家聊一聊這兩個概念。

高分屏

高分屏是指高分辨率的顯示器,通常情況下我們把大於1080P分辨率的顯示器稱為高分屏,例如:2k、4k顯示器,屏幕分辨率越高,能顯示出來的像素點就越多,我們看到的畫面也就更細膩。

視頻的分辨率

設備像素比

上個章節中,我們講了高分屏的概念,高分辨率下可以顯示更多的像素點,那麼操作系統的UI和字體就會變得非常小。

為了解決這個問題,操作系統提供了縮放選項,可以讓系統UI看起來跟普通屏一樣,但是顯示效果更細膩。在macos中,有一個HIDPI的概念,簡單來説就是用4個像素渲染1個像素。

如下圖所示,我們渲染了圓的1/4,需要4x4個邏輯像素(下圖左側)。如果我們先將畫面放大4倍,這個1/4的圓就要對應8x8個邏輯像素了。再將畫面渲染到8x8的邏輯像素上(下圖中間),最後一一對應的顯示到8x8個硬件像素上(下圖右側)。

hidpi-5.png

我們用8x8個硬件像素來渲染一個四分之一的圓,圓的面積依然沒有發生改變,但是輪廓處虛化像素的數量變少了、圓的邊緣顯得更鋭利了,肉眼看起來也就更清晰了。

4x4個邏輯像素用8x8個硬件像素來渲染,剛好擴大了2倍,我們把這個比例稱為:設備像素比,可以通過window.devicePixelRatio來獲取。高分屏上獲取到的值就是2,普通屏上獲取到的值就是1。因此,我們就需要準備2個尺寸的圖片,分別針對普通屏和高分屏。設備像素比是2,我們的圖片命名後綴就可以用@2x來標識。

本文只粗略的講一下HIDPI,想更進一步瞭解的開發者請移步:談談 HiDPI —— 是什麼,為什麼,怎麼做

解決方案

在web端我們要顯示一個圖片有兩種方式:img標籤、background-image屬性。

img標籤

大多數情況下,我們顯示一個圖片會用src屬性,如下所示。

html <img src="img/more.png" alt="" style="width: 18px; height: 18px">

在普通屏幕上這個圖片看起來很正常,但是在高分屏上就會有些模糊。

image-20220720220139981

我的設備像素比是2,因此我把圖片的尺寸擴大2倍,顯示出來的效果就是正常的。

html <img src="img/[email protected]" alt="" style="width: 18px; height: 18px" >

image-20220720220403314

如果都用@2x的圖片,會造成額外的帶寬消耗。有沒有什麼方法能做到動態加載呢(高分屏用@2x,普通屏用正常圖片)?

經過一番查找後,發現img標籤有一個名為srcset的屬性,它的用法如下所示:

  • 不同尺寸的圖片用逗號隔開
  • 每個尺寸的圖片路徑後跟一個空格寫設備像素比(1x、2x)

html <img src="img/more.png" alt="" style="width: 18px; height: 18px" srcset="img/more.png 1x,img/[email protected] 2x">

這樣子寫了後,瀏覽器會根據當前屏幕的設備像素比,自動選擇要加載的圖片,如下所示

  • 普通屏加載1x的圖片

image-20220720223135753

  • 高分屏加載2x的圖片

image-20220720222819149

background-image屬性

css的background-image屬性也可以用來顯示一張圖片,它提供了image-set()方法,會根據當前屏幕的設備像素比,自動選擇要加載的圖片。它的用法如下所示:

  • image-set方法內部用url來加載圖片路徑
  • url方法後跟一個空格寫設備像素比(1x、2x)
  • -webkit-為兼容寫法

```html

```

同樣的,瀏覽器會根據設備像素比選擇合適的圖片來加載。

  • 普通屏加載1x的圖片

image-20220720225444753

  • 高分屏加載2x的圖片

image-20220720225208927

寫在最後

至此,文章就分享完畢了。

我是神奇的程序員,一位前端開發工程師。

如果你對我感興趣,請移步我的個人網站,進一步瞭解。

  • 文中如有錯誤,歡迎在評論區指正,如果這篇文章幫到了你,歡迎點贊和關注😊
  • 本文首發於神奇的程序員公眾號,未經許可禁止轉載💌