網頁中的圖片無疑是用戶體驗中最重要的主題之一。所謂“一圖胜千言”，貼切的用圖不但能使用戶更容易理解內容，並且能夠在像Google這樣的搜索引擎中展現出“吸睛”的縮略圖，增加點擊率（根據美庫爾的實踐統計，Google結果首頁的縮略圖比率高達7成，如果你的頁面排名很高但卻無法出圖，那麼獲得的最終流量甚至會不如排名靠後的結果）。
宜：通讀並轉發官網開發攻城獅；忌：百無禁忌。以往碰到技術類文章我都會理解讀者棄我而去，可是今天請務必堅持。這必能有助於你提升上網速度。
網頁中圖片元素的處理
然而大量的圖片和過分大尺寸的圖片又使得網頁的讀取速度大打折扣，給用戶體驗造成負面影響。於是，在通常的做法中，有兩種普遍的處理方法。
其一是對不同的請求終端展現不同的圖片尺寸。要么在服務器端進行“自適配設計”返回適合客戶端瀏覽的必要尺寸圖片，要么使用“自適應設計”，在客戶端利用HTML5的新特性srcsetsizes或者是HTML5的新元素<picture>為不同尺寸、分辨率的屏幕羅列出各種圖片讓瀏覽器來決定使用哪個。
其二是使用Lazy-Load，對第一屏以下的圖片進行延遲加載。當圖片滾入用戶視圖後再進行加載，我們常見的微信公眾號圖片便都是使用這種方式。市面上有許多Lazy-Load的第三方庫如lazysizes，HubSpot One也曾經介紹過WordPress使用的插件a3 Lazy Load，你可以閱讀原文體驗一下這種方式。
Lazy-Load的做法一般是在<img>元素中添加data-src屬性（你也可以使用別的屬性名字，但建議你使用這個名稱），然後對原本的src屬性附上一個正在讀取的gif小圖片（有的網站連src屬性都省了，這就變成一個不合規的<img>元素）。待到圖片進入視野後你就看到gif顯示正在讀取，同時JavaScript會下載data-src裡的真實圖片地址，並對src進行替換。
它的缺點很明顯，那就是src屬性要么丟失，要么沒有使用真實的圖片地址。這本身對用戶不影響，但是在SEO上特別是GoogleSEO上可真是要了命的。況且，一旦JavaScript被禁用，這圖片就歇菜了。
原生Lazy Load
蒼天啊！終於可以進入正題了。
2019年8月6日，谷歌在Web.Dev正式宣布原生Lazy-Load降臨Chrome76！
https://web.dev/native-lazy-loading
從這個版本的Chrome開始，原生Lazy-Load已被搭載。說是被搭載而不是被啟用時因為你需要手動開啟這個仍然在試驗階段的特性。開啟的方式很簡單，在你的Chrome地址欄內輸入chrome://flags/#enable-lazy-image-loading
這樣你就可以大幅增強上網體驗了，而且沒錯，你必須先開啟這個功能。咦，那麼你的訪客會不會自己去手動開啟呢？難道要你一個個去教嗎？不不不，等該功能出了試驗就會在新的Chrome中自動啟用。至於是7X還是8X我們就不得而知了。
嗯，你可能還要問如果訪客不用Chrome呢？萬一用個斬斷所有Cookie的iOS呢？筆者也不知道。一是不知道什麼時候iOS會支持這個騷操作，二是不知道為什麼有的人還要用iOS。但是我知道所有用Chomium內核的瀏覽器，包括新微軟瀏覽器Edge都會支持這個特性，別忘了還有新版的安卓。而且有意思的是，有“好事者”竟然去Firefox報了一個Bug！說是你咋不支持這個捏？
鑑於台灣廣大網民還多在6X的版本上要普及這個功能至少還需要一兩年。但是我們至少可以大膽期待這個能夠顯著增強網頁瀏覽效果的特性了。
題外話，在筆者碼這篇文章的時候BugZilla竟然掛了！
使用原生Lazy Load
我們說了半天還沒有介紹原生Lazy Load的使用方法。要說使用方法實在太過於簡單，只要你會一丁點HTML基礎就行。你只要在你想要進行Lazy Load的圖片標籤<img>中添加屬性loading=”lazy”即可。如：
<img src=”cat.jpg” loading=”lazy” width=”400″ height=”300″ alt=”King of Internet”>
驚不驚喜，意不意外？ ！谷歌還提供了一個demo讓你體驗一把全裸誘惑，前提是你必須啟用Lazy Load（我剛教過你是不是）。
當我們改造網站後就不再需要使用JavaScript庫來實現Lazy Load了。但是有幾點你還是需要注意一下，別怪HubSpot One未提醒：
- 當然是不支持的瀏覽器或者未開啟該特性的瀏覽器不能享受此特性。
- 如果你需要Loading圖片的gif效果的話，原生Lazy Load尚未支持。
- 打印頁面的時候，還未被讀取的圖片不能被打印，Chrome團隊正在修復。
Lazy Load進入原生時代之後我們就不必依靠JavaScript來實現該功能了。 Google等其他對JavaScript支持尚不充分的搜索引擎也可以更好地發現網頁中包含的圖片，這才是本文的重點。
如果瀏覽器尚未支持?
Web.Dev的谷歌官方對不支持的瀏覽器給出了建議。
利用HTMLImageElement.prototype屬性可以知道當前瀏覽器是否支持，如若支持則將data-src中內容賦給src，若不支持，那麼按照原來的JavaScript方法進行。
上述方案對我們解決JavaScript執行能力很差的爬蟲蜘蛛並沒有什麼卵用，存粹多此一舉，且不倫不類。筆者在此就不展開了。
iFrame的Lazy Load
文章的最後我們講一下iFrame的Lazy Load。注意下圖中的edge://flags/
這個特性和上面的img的Lazy Load並不是捆綁在一起的，需要分別開啟，用法卻一樣。只需要在<iframe>元素中增加屬性loading=”lazy”即可。不過，有許多iframe被用來做跟踪pixel。 Chrome自己會判斷，條件是：
- 如果iframe長寬均小於等於4px
- 如果iframe不可見，應用了CSS display: none或者visibility: hidden
- 如果iframe所在坐標軸x或y為負
那麼iframe大多情況下不會被Lazy Load，即便被標了lazy。
以上就是本篇的全部內容。快去你的瀏覽器中試一下飛速上網吧！