最新のイメージパフォーマンスの最適化とエクスペリエンスの最適化のガイドライン - イメージリソースのフォールトトレランスとアクセシビリティ処理

写真のパフォーマンスの最適化とエクスペリエンスの最適化は、今日特に重要です。この記事では、今日のさまざまな新機能の世界で、画像リソースのパフォーマンスとエクスペリエンスを可能な限り最適化する方法をさまざまな側面から説明します。

この記事は、シリーズの第 5 章であり最終章です。一連の記事:

最新の画像パフォーマンスの最適化とエクスペリエンスの最適化のガイド - 画像の種類と画像タグの使用[1]
最新のイメージパフォーマンスの最適化とエクスペリエンスの最適化ガイド - レスポンシブイメージソリューション[2]
最新のイメージパフォーマンスの最適化とエクスペリエンスの最適化ガイド - # 細かい表示をズームし、レイアウトオフセット、ストレッチを回避[3]
最新の画像パフォーマンスの最適化とエクスペリエンスの最適化ガイド - 遅延読み込みと非同期画像デコードスキーム[4]

画像リソースは、私たちのビジネスの非常に大きな部分を占めていると言えます。特に、帯域幅の消費は非常に膨大です。

写真のパフォーマンスの最適化とエクスペリエンスの最適化は、今日特に重要です。この記事では、今日のさまざまな新機能の世界で、画像リソースのパフォーマンスとエクスペリエンスを可能な限り最適化する方法をさまざまな側面から説明します。

画像リソースの耐障害性とアクセシビリティ処理

では、前の章で、フォールトトレランスと画像リソースのアクセシビリティについて簡単に説明しましょう。

画像のアクセシビリティ

私たちのウェブサイトのアクセシビリティ (A11Y) は非常に重要な部分ですが、ほとんどの学生はそれを無視する傾向があります。

インタラクティブでロジックが多いWebサイトでは、ユーザーの利用習慣や利用シナリオを考慮し、アクセシビリティの高さの観点から検討する必要があります.例えば、ユーザーがマウスを持っておらず、キーボードのみを使用している場合、当社のウェブサイトをスムーズに使用できますか?

非常に重要なことは、アクセシビリティを向上させることで、一般のユーザーが Web コンテンツを理解しやすくなるということでもあります。

ユーザビリティと Web アクセシビリティに基づく - 画像[5]

画像情報については、次のアクセシビリティ原則に大まかに従う必要があります。

すべての意味のある img 要素には alt 属性が必要です
alt 属性に代わるものを提供する
支援技術を使用して装飾画像を非表示にする

最初のポイントは非常に理解しやすく、すべての意味のある画像要素は alt 属性を提供する必要があります。

2 番目のポイントはもっと興味深い. A11Y には、実際に一連の WAI-ARIA 標準 [6] があります。WAI-ARIA は、障害のある人などに動的でインタラクティブな Web コンテンツへのアクセスを提供するための技術仕様です。

つまり、タグのセマンティクスと動作を強化するためのいくつかの属性を提供します。

要素がフォーカス可能かどうか、および要素が順次キーボードナビゲーションに参加するかどうか/どこで参加するかは、tabindex 属性を使用して制御できます。
<div id="saveChanges" tabindex="0" role="button">Save</div> を使用してボタンをシミュレートするなど、role 属性を使用して要素のセマンティクスと機能を識別することができます。
要素の属性または状態を表す aria-* 属性も多数あり、要素のセマンティクスをさらに特定して実現し、バリアフリー体験を最適化するのに役立ちます

alt 属性に代わるものを提供する上記の 2 番目のポイントの意味は、aria-label や aria-labelledby などの WAR-ARIA 仕様によって提供される属性を使用して、画像にアクセス可能な名前を提供することです。

これらの属性が存在する場合、支援技術 (スクリーンリーダー) は画像の alt 属性を無視し、ARIA タグを読み取ります。

3 つ目のポイントは、支援技術を使用して装飾的な画像を非表示にするとはどういう意味ですか?

上記の最初のポイントのすべての意味のある img 要素には、alt 属性が必要です. 逆に, ページには意味のない装飾的な画像もあります. これらの画像の内容は、支援技術 (スクリーンリーダー) に対して実際には無視できます.

機能的または情報的なコンテンツのない装飾的な画像は、さまざまな方法でスクリーンリーダーから非表示にすることができます。

空の alt 属性を使用する
ARIA 属性 role="presentation" を使用して、画像要素が装飾的で画像を無視することを示します
CSS の背景を使用してこれらの画像をレンダリングする

タイトルと混同しないように

OK、ここにいくつかの興味深い詳細があります。

簡単に言えば、非常に基本的な知識があります。つまり、画像要素の alt と title の違いです。

画像の alt 属性は、画像が正常に表示できない場合に表示されるテキストプロンプトです。
画像の title 属性は、マウスが要素の上に移動したときのテキストヒントです。

alt 属性を正しく使用する

スクリーンリーダーを使用している場合、画像が正常に表示・閲覧できないことを踏まえて、alt属性や、前述のaria-label、aria-labelledby属性をうまく活用する必要があります。

では、これらのプロパティ内のコンテンツには何を入力する必要があるでしょうか? 画像の特徴に基づいて区別する必要があります。

Informative image [7]: 概念と情報をグラフィカルに表現するイメージ (通常は写真、写真、イラスト)。alt 代替テキストは、少なくとも画像が示す基本的な情報を伝える短い説明である必要があります。
装飾画像 [8]: 画像の唯一の目的が、ページを理解する上で重要な情報を伝えることではなく、ページに視覚的な装飾を追加することである場合は、前述のように、alt="" などの空の alt を使用します。
機能的な画像 [9]: リンクまたはボタンとして使用される画像の代替テキストは、視覚的な画像ではなく、リンクまたはボタンの機能を説明する必要があります。このようなイメージの例としては、印刷機能を表すプリンターアイコンや、フォームを送信するためのボタンがあります。
テキスト画像 [10]: 画像内に判読可能なテキストが表示されることがあります。画像がロゴでない場合は、画像内のテキストを避けてください。ただし、テキストの画像を使用する場合は、代替テキストに画像と同じ単語を含める必要があります。
グラフやチャートなどの複雑な画像: データまたは詳細な情報を伝えるために、代替テキストとして画像に表示されているデータまたは情報に相当する完全なテキストを提供します。[11]
画像のグループ [12]: 複数の画像が 1 つのメッセージを伝える場合、1 つの画像の代替テキストは情報のグループ全体を伝える必要があります。
画像マップ [13]: 複数のクリック可能な領域を含む画像の代替テキストは、リンクセットに全体的なコンテキストを提供する必要があります。さらに、個別にクリック可能な各領域には、リンクの目的または宛先を説明する代替テキストが必要です。

実際、alt については多くの知識があり、私たちのページがこれを行うことができれば、根本から考え始め、ユーザーエクスペリエンスの最適化を開始できます。

img 要素と background 要素のトレードオフ

さて、これについて言えば、当然言及すべき興味深い点がもう 1 つあります。

つまり、いつ <img> 要素を使用し、いつ背景埋め込み画像を使用する必要があるのでしょうか?

パフォーマンスと機能の 2 つの側面から考えることができます。

タイプ	画像	背景画像
レイヤー位置	見込み	バックグラウンド
デフォルトの初期サイズ	不定	修理済み
リフロー再描画は発生しますか?	ミーティング	しません
画像を読み込めませんでした	要素の onerror イベントをトリガーして、alt 属性を表示できます。	例外処理シナリオを効果的に設定できない
使用シーン	ロゴ、商品画像、広告画像	装飾的な非セマンティックコンテンツなど

実際、パフォーマンスは重要な考慮事項ではありません。前述のとおり、現在、loading="lazy" 属性を大規模に使用でき、ネイティブサポートにより画像を遅延読み込みできるからです。

<img> と background-image のどちらを選択するかを検討する場合でも、画像機能をより重視します。一般的に、background-image は変更された非意味的な装飾画像として使用され、<img> タグはより重要な Web ページコンテンツに使用されます。

セマンティックイメージは <img> を使用して表示されるため、その利点の 1 つは、イメージの読み込みに失敗したときに、要素の onerror イベントをトリガーできることです. これを効果的に使用して、イメージの例外を処理できます.

イメージの例外処理

画像リンクがダウンして読み込みに失敗した場合、どのように対処すればよいでしょうか?

それに対処する方法はたくさんあります。Zhang Xinxu 氏によるこの記事 -- 画像の読み込みに失敗した後の CSS スタイル処理のベストプラクティス [14] には優れたプラクティスがあります。

核となるアイデアは次のとおりです。

画像の読み込み失敗を利用して <img> 要素の onerror イベントをトリガーし、読み込みに失敗した <img> 要素にスタイルクラスを追加します。
新しく追加されたスタイルクラスと <img> 要素の疑似要素を使用して、デフォルトのボトム画像を表示しながら、 <img> 要素の alt 情報を表示できます。

<img src="test.png" alt="Alt Info" onerror="this.classList.add('error');">

img.error {
    position: relative;
    display: inline-block;
}

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

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

デフォルトのエラーマップをロードするために before 疑似要素を使用し、画像の alt 情報を表示するために after 疑似要素を使用します。

OK、この時点で、完全な画像処理が完了したとしても、セマンティクスと代替情報を含む画像の場合、 <img> 要素を使用して達成する必要がある理由の良い説明です。これは、エラーが発生した場合に、ユーザーが代替コンテンツを直感的に確認できるように、画像をより包括的に表示できるようにするためです。

ここをクリックして、完全なデモを表示できます。

CodePen デモ -- 画像処理[15]

もちろん、上記のスキームには 2 つの小さな問題があります。

<img> 要素ごとに、少し繰り返しのある notallow="this.classList.add('error');" コードを記述する必要があります。したがって、この作業は JavaScript によってグローバルに行うこともでき、alt の値が空かどうかを判断し、空の場合はデフォルトの画像 alt をカバーレターとして使用する必要があるかもしれません。
初期の頃は、 <img> などの置換要素には疑似要素がありませんでしたが、その後、Chrome/Firefox ブラウザーは、<img> の src プルが失敗したときに、徐々に <img> 要素の疑似要素の表示をサポートしました。ただし、Safari はまだこの機能をサポートしていないため、Safari では次の結果が得られる場合があります。

効果はOKなのですが、下の地図が表示されないので、実際の使用過程で知っておく必要があります。

結論は

この章では、画像リソースの耐障害性とアクセシビリティ処理について説明します。コアコンテンツは次のとおりです。

画像情報については、次のアクセシビリティ原則に大まかに従う必要があります。

すべての意味のある img 要素には alt 属性が必要です
alt 属性に代わるものを提供する
支援技術を使用して装飾画像を非表示にする

alt 属性を正しく使用して、さまざまなシナリオでどの alt を入力する必要があるかを理解する
img 要素と background 要素のトレードオフ
画像例外処理のベストプラクティス

これまでのところ、Modern Image Performance Optimization and Experience Optimization Guide [16] 全体が成功裏に終わりました.一連の記事全体には、実際の状況に応じて柔軟に選択して使用する必要がある多くの新しい仕様と機能が含まれています.実際には。

同時に、フロントエンド技術はこの小さな分野に過ぎず、常に革新を繰り返していることもわかるはずです。難しいことではありますが、新しいトレンドについていくためには、常に自分自身を豊かにする必要があります。相互励まし。

やっと

これでこの記事は終わりです。この記事がお役に立てば幸いです :)

参考文献

[1] 最新の画像パフォーマンスの最適化とエクスペリエンスの最適化ガイド - 画像の種類と画像タグの使用: https://juejin.cn/post/7198182873366888509 .

[2] 最新のイメージパフォーマンスの最適化とエクスペリエンスの最適化ガイド - レスポンシブイメージソリューション: https://juejin.cn/post/7202266382841495611 .

[3] 最新の画像パフォーマンスの最適化とエクスペリエンスの最適化のガイド - # 細かい表示をスケーリングし、レイアウトのオフセットとストレッチを回避: https://juejin.cn/post/7203012367180185661 .

[4] 最新の画像パフォーマンスの最適化とエクスペリエンスの最適化ガイド - 遅延読み込みと非同期画像デコードスキーム: https://juejin.cn/post/7204860462240170040 .

[5] 使いやすさと Web アクセシビリティ - 画像: https://usability.yale.edu/web-accessibility/articles/images。

[6]WAI-ARIA 标准: 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] 複雑な画像: データまたは詳細な情報を伝えるために、画像で提供されるデータまたは情報に相当する全文を代替テキストとして提供します。: 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 スタイル処理のベストプラクティス: https://www.zhangxinxu.com/wordpress/2020/10/css-style-image-load-fail/ .

[15]CodePen デモ -- 画像処理: https://codepen.io/Chokcoco/pen/WNGgNqv?editors=1100 .

[16] 最新の画像パフォーマンスの最適化とエクスペリエンスの最適化ガイド: https://github.com/chokcoco/cococss/issues/36#top .

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