網絡上的大多數圖像都是多餘的。如果我可能有點混蛋，那麼其中99％的人甚至根本沒有幫助（儘管有極少數例外）。那是因為圖像通常不補充他們應該支持的文本，而是用戶，將永遠加載和炸毀像某種績效稅之類的數據上限。 值得慶幸的是，這主要是一個設計問題，因為使圖像表現效果和更易於用戶友好比以前要容易得多。我們具有更好的圖像格式，例如Webp（也許很快，JPEG XL）。我們擁有反應式圖像的魔力。那裡有很多很棒的工具，例如ImageOptim，以及Addy Osmani的新書等資源。

儘管我最喜歡改善圖像性能的方法是大量加載：

此圖像僅在用戶向下滾動頁面時加載，因此用戶可以看到它 - 從初始頁面加載中將其刪除，這真是太好了！使網頁LightningFast的初始負載很重要。

。

所以！如果我們可以在網站上顯示圖像，但是只有在單擊或輕拍它們後才顯示圖像怎麼辦？如果我們可以在單擊時展示佔位符並將其交換為真實圖像，那不是很整潔嗎？這樣的東西：

好吧，我在這裡有兩個想法，即如何構建這個小伙子（黃金規則是，從來沒有一種方法可以在網絡上構建任何東西）。 方法＃1：使用沒有SRC屬性 我們可以刪除標籤的SRC屬性以隱藏圖像。然後，我們可以將映像文件放在屬性中，例如data-src之類的東西，例如：

默認情況下，大多數瀏覽器都會顯示您可能熟悉的損壞的圖像圖標：

好的，所以它可以訪問。我猜？您可以自動看到屏幕上呈現的Alt標籤，但是使用JavaScript的輕段，我們可以將SRC與該屬性交換：

現在我們可以添加一些樣式，ugh，哦，不：

啊

。在某些瀏覽器中，當圖像未加載時，底部會有一個微小的損壞圖像圖標。這裡的問題在於，瀏覽器並沒有給您一種使用CSS刪除損壞的圖像圖標的方法（無論如何我們可能不應該被允許）。為Alt文本設計了造型，這有點煩人。但是，如果我們完全刪除Alt屬性，則損壞的映像圖標消失了，儘管這使得無JavaScript的無法使用。因此，刪除alt文本是不做的。

如我所說：

ugh

document.querySelectorAll("img").forEach((item) => {
  item.addEventListener("click", (event) => {
    const image = event.target.getAttribute("data-src");
    event.target.setAttribute("src", image);
  });
});

方法＃2：使用鏈接來創建圖像

我們擁有的另一個選項是從謙虛的超鏈接開始，例如：

Musab al Rawahi的熱氣球照片。 144KB

哪個，是的，還沒有什麼明智的事情 - 這只會呈現到圖像的鏈接：

在可訪問性方面起作用，對嗎？如果我們沒有任何JavaScript，那麼我們所擁有的只是人們可以選擇單擊的鏈接。從性能方面，它的速度不能比純文本快得多！

，但是從這裡，我們可以訪問javaScript以阻止鏈接在單擊上加載，抓住該鏈接中的href屬性，創建一個映像元素，最後，將圖像扔到頁面上並刪除舊鏈接：

我們可能可以為此佔位符鏈接設計，以使其看起來比下面的鏈接好一些。但這只是一個例子。繼續並單擊鏈接再次加載圖像：

，你有它！這不是開創性的，或者我敢肯定有人在某個時候或其他方面做到了這一點。但是，如果我們想對第一個油漆和初始負載以外的性能非常激進，那麼我認為這是一個很好的解決方案。如果我們正在製作僅文本網站，那麼我認為這絕對是必要的。

Photograph of hot air balloons by Musab Al Rawahi. 144kb