背景圖像的加載速度比HTML中的嵌入圖像加載速度快嗎？它們如何被屏幕閱讀器讀取？

如果背景圖片和嵌入圖片大小相同，只要大小相同，就可以在HTML頁面上進行加載了嗎？如果我要在一個頁面中使用相同的圖像兩次 - 一次作爲背景，一次作爲正常嵌入圖像，加載速度更快？背景圖像的加載速度比HTML中的嵌入圖像加載速度快嗎？它們如何被屏幕閱讀器讀取？

爲了使網站與屏幕閱讀器兼容，包含圖像的最佳方式是什麼？屏幕閱讀器能夠很好地讀取背景圖像，還是隻是忽略背景圖像？

來源

2013-03-06 user1448031

不同的瀏覽器可能會有不同的優化，但我想象在這兩種情況下的瓶頸將在下載圖像，而不是在輸出中呈現的方式/位置。所以它基本上是一樣的。對於屏幕閱讀器，你會如何期望它讀取圖像？如果圖像是樣式的一部分，屏幕閱讀器可能（並且應該正確）忽略它。如果它是標記的一部分，那麼我想象屏幕閱讀器可能被配置爲指示圖像存在並且可能是關於圖像的一些信息（例如其「alt」標籤）。 – David 2013-03-06 13:41:15

帶有背景圖片的大贏家（少HTTP請求）。至於可訪問性，圖像替換技術可以處理該問題。 – steveax 2013-03-07 06:53:46

如果背景圖像和嵌入圖像大致在HTML頁面上載入大致相同的時間，前提是它們的大小相同？

我會說是，但我認爲這也取決於他們如何加載。過去有一種叫做圖像預加載的做法。我從來沒有親自測試過速度測試，以確定它是否真的是有益的。

爲了使網站與屏幕閱讀器兼容，包含圖像的最佳方式是什麼？屏幕閱讀器能夠很好地讀取背景圖像，還是隻是忽略背景圖像？

屏幕閱讀器不會公佈<body>,<div>等附有背景圖像。在這種情況下，alt屬性沒有神奇的地方。您需要記住，您的圖像和文字顏色之間保持良好的對比。在我看來，WebAIM有很棒的color contrast checker。

如果您使用CSS將文本放置在用作背景的圖像上，那麼您可以給它一個alt，不要。無論如何，該圖片可能應該有空白替換（<img src="..." alt=""/>）。

來源

2013-03-06 13:50:54

'' 我明白了你的意思，但這可能不適合搜索引擎優化？我猜在這樣的情況下，我們無法使它成爲SEO和輔助功能的理想選擇。我們必須優先考慮其中之一。如果圖像是作爲背景的，那麼最好通過CSS將它用作背景，而不是直接將其嵌入到代碼中。 – user1448031 2013-03-06 20:32:41

關鍵字填充是做SEO的壞方法。爲背景圖像膨脹alt的會造成更多的傷害而不是好的。自然搜索引擎優化包括編寫內容，以便您的關鍵字的變體自然出現，認爲它是每200個單詞的1-3倍。巧妙地使用標題標籤，自然再次使用關鍵字。使用關鍵字和描述'meta'標籤。我從來沒有聽說過一個好的來源sying null對你的搜索引擎優化。 AFAIK良好的代碼勝過關鍵字填充垃圾。 – 2013-03-07 12:57:47

如果您使用圖像既作爲背景和圖像（即使用兩次相同的圖像），技術上只需要加載該圖像一次，假設您的圖像正確緩存... 這是一旦你加載圖像使用緩存頭，或下載圖像時，瀏覽器將從緩存中加載它或等待該圖像完成加載。

至於背景圖像和嵌入式圖像是否需要大致相同的時間加載。讓我們來看一些背景。按照谷歌：https://developers.google.com/speed/articles/browser-paint-events

最後，請注意，每個圖像本身呈現逐步，使的用戶開始看到整個圖像完成加載之前的圖像內容。現代瀏覽器逐步呈現HTML標籤中的圖像。相比之下，許多瀏覽器不會渲染使用CSS background-image屬性逐步指定的圖像。若要使支持漸進式渲染圖像，請使用CSS背景圖像屬性的HTML標記代替。

因此，使用<IMG>標籤將加載速度更快，並未有不同於舊的瀏覽器內嵌的CSS背景圖像可能慢下來準備撐起DOM的圖像。

但是，漸進渲染的<img>的注意事項是，如果在widow.onload事件觸發時（即對於大圖像幾乎總是如此）您的圖像未完全加載，則會造成相當醜陋漸進式渲染，以及使用自動寬度和/或100％寬度將圖像設置爲響應時引起塗料迴流。

要使內嵌圖像加載速度更快和更加美好的方式，我做的事是：

首先，預裝載這些非常早在並在頁面<頭> CSS背景。您可以開始預先加載部分或全部css圖像，然後再解析css文件或正文。

其次，爲了解決其他缺點，我使用javascript lazy-load-ish方法在窗口加載之前隱藏交互事件中的圖像。

最後，一旦css調用的圖像加載完成，將圖像作爲淡入。

你可以看到一個活生生的例子：http://www.nptr.net/1614

所以，當一個嵌入式圖像是最好的。如果您關心頁面加載的最佳速度，我強烈建議您儘早通過頭部的CSS背景預加載較大的圖像，特別是如果您必須立即將它們用作背景。

那是因爲否則，在您的身體的圖像將不得不等待，直到您的CSS文件（s）和同步JavaScript（s）完全收到，直到瀏覽器實際上開始檢索它們。這通常會導致100到500毫秒的延遲，最壞的延遲是在首頁加載時。

來源

2013-04-19 07:49:52 hexalys

背景圖像的加載速度比HTML中的嵌入圖像加載速度快嗎？它們如何被屏幕閱讀器讀取？

回答

相關問題