日本综合一区二区|亚洲中文天堂综合|日韩欧美自拍一区|男女精品天堂一区|欧美自拍第6页亚洲成人精品一区|亚洲黄色天堂一区二区成人|超碰91偷拍第一页|日韩av夜夜嗨中文字幕|久久蜜综合视频官网|精美人妻一区二区三区

RELATEED CONSULTING
相關(guān)咨詢
選擇下列產(chǎn)品馬上在線溝通
服務(wù)時(shí)間：8:30-17:00
你可能遇到了下面的問(wèn)題
關(guān)閉右側(cè)工具欄

新聞中心

這里有您想知道的互聯(lián)網(wǎng)營(yíng)銷解決方案
現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南-圖片資源的容錯(cuò)及可訪問(wèn)性處理

10年積累的成都網(wǎng)站設(shè)計(jì)、成都網(wǎng)站制作、外貿(mào)網(wǎng)站建設(shè)經(jīng)驗(yàn)，可以快速應(yīng)對(duì)客戶對(duì)網(wǎng)站的新想法和需求。提供各種問(wèn)題對(duì)應(yīng)的解決方案。讓選擇我們的客戶得到更好、更有力的網(wǎng)絡(luò)服務(wù)。我雖然不認(rèn)識(shí)你，你也不認(rèn)識(shí)我。但先做網(wǎng)站設(shè)計(jì)后付款的網(wǎng)站建設(shè)流程，更有密云免費(fèi)網(wǎng)站建設(shè)讓你可以放心的選擇與我們合作。

本文是系列第五篇，終章。系列文章：

  1. 現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - 圖片類型及 Picture 標(biāo)簽的使用[1]
  2. 現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - 響應(yīng)式圖片方案[2]
  3. 現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - # 縮放精細(xì)化展示及避免布局偏移、拉伸[3]
  4. 現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - 懶加載及異步圖像解碼方案[4]

圖片資源，在我們的業(yè)務(wù)中可謂是占據(jù)了非常大頭的一環(huán)，尤其是其對(duì)帶寬的消耗是十分巨大的。

對(duì)圖片的性能優(yōu)化及體驗(yàn)優(yōu)化在今天就顯得尤為重要。本文，就將從各個(gè)方面闡述，在各種新特性滿頭飛的今天，我們可以如何盡可能的對(duì)我們的圖片資源，進(jìn)行性能優(yōu)化及體驗(yàn)優(yōu)化。

圖片資源的容錯(cuò)及可訪問(wèn)性處理

OK，最后一個(gè)章節(jié)，我們簡(jiǎn)單聊一聊圖片資源的容錯(cuò)及可訪問(wèn)性處理。

圖片的可訪問(wèn)性處理

可訪問(wèn)性（A11Y），在我們的網(wǎng)站中，屬于非常重要的一環(huán)，但是大部分同學(xué)都容易忽視它。

在一些重交互、重邏輯的網(wǎng)站中，我們需要考慮用戶的使用習(xí)慣、使用場(chǎng)景，從高可訪問(wèn)性的角度考慮，譬如假設(shè)用戶沒(méi)有鼠標(biāo)，僅僅使用鍵盤，能否順暢的使用我們的網(wǎng)站？

非常重要的一點(diǎn)是，提高可訪問(wèn)性也能讓普通用戶更容易理解 Web 內(nèi)容。

基于 Usability & Web Accessibility - image[5]

對(duì)于圖像信息，我們需要大致遵循如下可訪問(wèn)性原則：

  • 所有有意義的 img 元素必須有 alt 屬性
  • 提供替代 alt 屬性的其他方式
  • 使用輔助技術(shù)隱藏裝飾圖像

第一點(diǎn)非常好理解，所有的有意義的圖片元素都必須要提供 alt 屬性。

第二點(diǎn)比較有意思，在 A11Y 中，其實(shí)有一套 WAI-ARIA 標(biāo)準(zhǔn)[6]。WAI-ARIA 是一個(gè)為殘疾人士等提供無(wú)障礙訪問(wèn)動(dòng)態(tài)、可交互Web內(nèi)容的技術(shù)規(guī)范。

簡(jiǎn)單來(lái)說(shuō)，它提供了一些屬性，增強(qiáng)標(biāo)簽的語(yǔ)義及行為：

  • 可以使用 tabindex 屬性控制元素是否可以聚焦，以及它是否/在何處參與順序鍵盤導(dǎo)航
  • 可以使用 role 屬性，來(lái)標(biāo)識(shí)元素的語(yǔ)義及作用，譬如使用 
    Save
    來(lái)模擬一個(gè)按鈕
  • 還有大量的 aria-* 屬性，表示元素的屬性或狀態(tài)，幫助我們進(jìn)一步地識(shí)別以及實(shí)現(xiàn)元素的語(yǔ)義化，優(yōu)化無(wú)障礙體驗(yàn)

上述第二點(diǎn)，提供替代 alt 屬性的其他方式 的含義就是使用 WAR-ARIA 規(guī)范提供的諸如 aria-label 和 aria-labelledby 屬性為圖像提供可訪問(wèn)的名稱。

當(dāng)存在這些屬性時(shí)，輔助技術(shù)（屏幕閱讀器）將忽略圖像的 alt 屬性并讀取 ARIA 標(biāo)簽。

而第三點(diǎn)，使用輔助技術(shù)隱藏裝飾圖像，又是什么意思呢？

上面第一點(diǎn) 所有有意義的 img 元素必須有 alt 屬性，反過(guò)來(lái)說(shuō)，頁(yè)面上也會(huì)存在無(wú)意義的裝飾性的圖片，這些圖片內(nèi)容對(duì)輔助技術(shù)（屏幕閱讀器）而言，其實(shí)是可以忽略的。

對(duì)于沒(méi)有任何功能或信息內(nèi)容的裝飾圖像，可以通過(guò)多種方式對(duì)屏幕閱讀器隱藏：

  • 使用空的 alt 屬性
  • 使用 ARIA 屬性 role="presentation" 標(biāo)明圖片元素是裝飾可忽略圖片
  • 使用 CSS background 的方式呈現(xiàn)這些圖片

alt 不要與 title 混淆

OK，下面來(lái)講一些有意思的細(xì)節(jié)內(nèi)容。

有一個(gè)非?；A(chǔ)的知識(shí)，簡(jiǎn)單過(guò)一下，也就是圖片元素中，alt 與 title 的差異：

  • 圖片中的 alt 屬性是在圖片不能正常顯示時(shí)出現(xiàn)的文本提示。
  • 圖片中的 title 屬性是在鼠標(biāo)在移動(dòng)到元素上的文本提示。

正確使用 alt 屬性

對(duì)于使用屏幕閱讀器的用戶而言，圖片是無(wú)法正常展示或者被的瀏覽的，基于此，我們需要利用好 alt 屬性，或者是上述的aria-label 和 aria-labelledby 屬性。

那么，這些屬性內(nèi)的內(nèi)容應(yīng)該填充什么呢？我們需要基于圖片的功能加以區(qū)分：

  • 信息性圖像[7]：以圖形方式表示概念和信息的圖像，通常是圖片、照片和插圖。alt 替代文本應(yīng)該至少是一個(gè)簡(jiǎn)短的描述，傳達(dá)圖像所呈現(xiàn)的基本信息。
  • 裝飾性圖像[8]：當(dāng)圖像的唯一目的是為頁(yè)面添加視覺(jué)裝飾，而不是傳達(dá)對(duì)理解頁(yè)面很重要的信息時(shí)，如上述所言，使用空的 alt，譬如 alt=""
  • 功能圖像[9]：用作鏈接或按鈕的圖像的替代文本應(yīng)該描述鏈接或按鈕的功能，而不是視覺(jué)圖像。此類圖像的示例是表示打印功能的打印機(jī)圖標(biāo)或提交表單的按鈕。
  • 文本圖像[10]：可讀文本有時(shí)會(huì)出現(xiàn)在圖像中。如果圖片不是徽標(biāo)，請(qǐng)避免圖片中出現(xiàn)文字。但是，如果使用文本圖像，替代文本應(yīng)包含與圖像中相同的詞。
  • 圖形和圖表等復(fù)雜圖像：為了傳達(dá)數(shù)據(jù)或詳細(xì)信息，提供與圖像中提供的數(shù)據(jù)或信息等效的完整文本作為替代文本。[11]
  • 圖像組[12]：如果多張圖像傳達(dá)一條信息，則一張圖像的替代文本應(yīng)傳達(dá)整組信息。
  • 圖像映射[13]：包含多個(gè)可點(diǎn)擊區(qū)域的圖像的替代文本應(yīng)該為鏈接集提供整體上下文。此外，每個(gè)可單獨(dú)點(diǎn)擊的區(qū)域都應(yīng)該有替代文本來(lái)描述鏈接的目的或目的地。

其實(shí) alt 的學(xué)問(wèn)是非常之多的，如果我們的頁(yè)面能做到這一點(diǎn)，那真的算是從根上開(kāi)始思考，開(kāi)始優(yōu)化用戶體驗(yàn)。

img 元素與 background 元素的取舍

OK，那么，講到這里，還有一個(gè)有意思的點(diǎn)就很自然的應(yīng)該被提及。

那就是我們應(yīng)該什么時(shí)候使用  元素，什么時(shí)候使用 background 內(nèi)嵌圖片？

我們可以從性能及功能兩個(gè)方面進(jìn)行考慮：

類型

img

backgroud-image

圖層位置

前景

背景

默認(rèn)初始尺寸

不定

固定

是否會(huì)產(chǎn)生回流重繪

會(huì)

不會(huì)

圖片加載失敗

可以觸發(fā)元素的 onerror 事件，展示 alt 屬性

無(wú)法有效設(shè)置異常處理場(chǎng)景

使用場(chǎng)景

Logo、產(chǎn)品圖片、廣告圖片

裝飾性無(wú)語(yǔ)義內(nèi)容等

其實(shí)性能上并不是核心考慮的點(diǎn)，因?yàn)樯衔奈覀円仓v到了在今天可以大規(guī)模使用是 loading="lazy" 屬性，圖片可以進(jìn)行原生支持的懶加載。

我們?cè)诳紤]選取  還是 backgroud-image 的時(shí)候，更多的還是從圖片功能上進(jìn)行考慮。一般來(lái)說(shuō)，作為修飾的且無(wú)語(yǔ)義的裝飾性圖片選擇使用 background-image，而比較重要的與網(wǎng)頁(yè)內(nèi)容相關(guān)的就使用  標(biāo)簽。

由于有語(yǔ)義的圖片使用  展示，它的一個(gè)好處在于，當(dāng)圖片加載失敗的時(shí)候，可以觸發(fā)元素的 onerror 事件，我們可以有效的利用這一點(diǎn)，對(duì)圖片進(jìn)行異常處理。

圖片的異常處理

當(dāng)圖片鏈接掛了，加載失敗了，我們比較好的處理方式應(yīng)該是怎么樣呢？

處理的方式有很多種。在張?chǎng)涡窭蠋煹倪@篇文章中 -- 圖片加載失敗后CSS樣式處理最佳實(shí)踐[14] 有一個(gè)不錯(cuò)的實(shí)踐。

核心思路為：

  1. 利用圖片加載失敗，觸發(fā)  元素的 onerror 事件，給加載失敗的  元素新增一個(gè)樣式類。
  2. 利用新增的樣式類，配合  元素的偽元素，在展示默認(rèn)兜底圖的同時(shí)，還能一起展示  元素的 alt 信息。
Alt Info
img.error {
    position: relative;
    display: inline-block;
}

img.error::before {
    content: "";
    /** 定位代碼 **/
    background: url(error-default.png);
}

img.error::after {
    content: attr(alt);
    /** 定位代碼 **/
}

我們利用偽元素 before ，加載默認(rèn)錯(cuò)誤兜底圖，利用偽元素 after，展示圖片的 alt 信息：

OK，到此，完整的對(duì)圖片的處理就算完成了，這也比較好的闡述了為什么，對(duì)有語(yǔ)義，有 alt 信息的圖片，我們應(yīng)該使用  元素來(lái)實(shí)現(xiàn)。這是因?yàn)?，我們可以在錯(cuò)誤發(fā)生的時(shí)候，比較好的對(duì)圖片進(jìn)行兜底展示，讓用戶直觀的能夠看到 alt 內(nèi)容。

完整的 Demo 你可以戳這里看看：

CodePen Demo -- 圖片處理[15]

當(dāng)然，上述方案存在兩個(gè)小問(wèn)題：

  1. 對(duì)于每一個(gè)  元素，我們都需要寫(xiě)一段 notallow="this.classList.add('error');" 代碼，有點(diǎn)重復(fù)。因此，這個(gè)工作也可以交給 JavaScript 全局性的完成，并且，我們可能需要判斷 alt 的值是否為空，在為空時(shí)，使用默認(rèn)圖片 alt 兜底文案。
  2. 早年間， 等替換元素是沒(méi)有偽元素的，后面 Chrome/Firefox 瀏覽器逐漸支持了當(dāng)， 的 src 拉取失敗時(shí)，支持  元素的偽元素展示，這才有了上述的方案，但是，目前 Safari 仍不支持這個(gè)特性，所以，在 Safari 下，我們可能得到如下的結(jié)果：

效果仍然還是 OK 的，只是沒(méi)有了兜底圖的展示，在實(shí)際使用過(guò)程中，需要知道這一點(diǎn)。

總結(jié)一下

本章節(jié)，對(duì)圖片資源的容錯(cuò)及可訪問(wèn)性處理進(jìn)行了闡述。核心內(nèi)容在于：

  1. 對(duì)于圖像信息，我們需要大致遵循如下可訪問(wèn)性原則：
  • 所有有意義的 img 元素必須有 alt 屬性
  • 提供替代 alt 屬性的其他方式
  • 使用輔助技術(shù)隱藏裝飾圖像
  1. 正確使用 alt 屬性，了解不同場(chǎng)景下 alt 應(yīng)該填充什么內(nèi)容
  2. img 元素與 background 元素的取舍
  3. 圖片異常處理的最佳實(shí)踐

至此，整個(gè)現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南[16]到此就圓滿結(jié)束，整個(gè)系列的文章囊括了非常多的新的規(guī)范及特性，需要大家在實(shí)踐中根據(jù)實(shí)際情況靈活選取使用。

同時(shí)，我們也應(yīng)該能看到，前端技術(shù)僅僅在這一小個(gè)領(lǐng)域，都在不斷的迭代創(chuàng)新。雖然很難，還是需要不斷充實(shí)自己跟上新的潮流。共勉。

最后

OK，本文到此結(jié)束，希望本文對(duì)你有所幫助 ????

參考資料

[1]現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - 圖片類型及 Picture 標(biāo)簽的使用: ??https://juejin.cn/post/7198182873366888509。??

[2]現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - 響應(yīng)式圖片方案: ??https://juejin.cn/post/7202266382841495611。??

[3]現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - # 縮放精細(xì)化展示及避免布局偏移、拉伸: ??https://juejin.cn/post/7203012367180185661。??

[4]現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南 - 懶加載及異步圖像解碼方案: ??https://juejin.cn/post/7204860462240170040。??

[5]Usability & Web Accessibility - image: ??https://usability.yale.edu/web-accessibility/articles/images。??

[6]WAI-ARIA 標(biāo)準(zhǔn): ??https://www.w3.org/TR/wai-aria-1.1/。??

[7]信息性圖像: ??https://www.w3.org/WAI/tutorials/images/informative/。??

[8]裝飾性圖像: ??https://www.w3.org/WAI/tutorials/images/decorative/。??

[9]功能圖像: ??https://www.w3.org/WAI/tutorials/images/functional/。??

[10]文本圖像: ??https://www.w3.org/WAI/tutorials/images/textual/。??

[11]復(fù)雜圖像：為了傳達(dá)數(shù)據(jù)或詳細(xì)信息，提供與圖像中提供的數(shù)據(jù)或信息等效的完整文本作為替代文本。: ??https://www.w3.org/WAI/tutorials/images/complex/。??

[12]圖像組: ??https://www.w3.org/WAI/tutorials/images/groups/。??

[13]圖像映射: ??https://www.w3.org/WAI/tutorials/images/imagemap/。??

[14]圖片加載失敗后CSS樣式處理最佳實(shí)踐: ??https://www.zhangxinxu.com/wordpress/2020/10/css-style-image-load-fail/。??

[15]CodePen Demo -- 圖片處理: ??https://codepen.io/Chokcoco/pen/WNGgNqv?editors=1100。??

[16]現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南: ??https://github.com/chokcoco/cococss/issues/36#top。??

[17]Github -- iCSS: ??https://github.com/chokcoco/iCSS。??


當(dāng)前題目：現(xiàn)代圖片性能優(yōu)化及體驗(yàn)優(yōu)化指南-圖片資源的容錯(cuò)及可訪問(wèn)性處理
URL分享：http://www.dlmjj.cn/article/cdpdpde.html