最近の私のimgタグ事情(2021)

1 min read読了の目安(約1200字

ほとんどの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でしょう😇
こちらのサイトが詳しいです。

https://spelldata.co.jp/blog/blog-2019-12-19.html

装飾用画像には 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">

手間が増えて面倒ですがやる価値は大いにあります!

ではまた〜!ツッコミ・コメントお待ちしてます😇