最近の私のimgタグ事情（2021）
ほとんどのwebサイトの遅い原因は画像ですネ。
高速化を意識しつつなるべくめんどくさくない方法を最近は採用しています。
width と height をさぼるべからず
width と height を指定しないと、画像が読み込まれた時にレイアウトがガクーンとズレます。ユーザー体験的によろしくない。したがって必須です。
最新の画像フォーマットを使おう
webp使いましょう。めっちゃ軽くて早いです。
webp converter で探すとpngやらjpgをwebpに変換できるオンラインツールもたくさん出てきます。こちらは一例。
ちなみに私は Apple謹製Automatorを使って、pngファイルを右クリック一括でwebpに変換できるようにしいます。
また、IE11や古いSafariではwebp非対応なので、 webp-hero というpollyfilを併用することをお勧めします。非対応ブラウザでみたときにwebpをpngに強制変換してくれるモノです。pictureタグで出し分けするよりも楽ですネ😇（ただしbackground-imageには使えないので注意。）
SVGだって圧縮できる
オンラインの圧縮ツールを使いましょう。
decoding="async"をつける
画像を非同期的にデコードします。なので体感速度が上がります。
なおIE11は非対応ですがこれはスルーしてOKでしょう😇
こちらのサイトが詳しいです。
装飾用画像には rel="none" で altを省略できる
altはSEOのためのものではありません。スクリーンリーダーでブラウジングする視覚障害者の方がWebページを読みやすくするためのものです。スクリーンリーダーはaltを読み上げます。
しかし、装飾用の画像（例えば装飾のための風船の画像）に「alt="風船"」と書いてもスクリーンリーダーの利用者にとってはいきなり文脈と外れたことを言われて困惑するだけです。
したがって rel="none" を使い、スクリーンリーダー向けに要素を無視させます。
アクセシビリティの第一歩はまずここから〜！
そんなわけで最近のimgタグはこんな感じになります
<img src="xxxx.webp" role="none" decoding="async" width="200" height="100">
<img src="xxxx.svg" alt="SVG画像" decoding="async" width="200" height="100">
手間が増えて面倒ですがやる価値は大いにあります！
ではまた〜！ツッコミ・コメントお待ちしてます😇
Discussion