画像の最適化
画像の多いページを速く感じさせる。
速いページは最小のファイルではなく、適切な画像から始まります。画面ごとに形式、寸法、読み込み方法、配信経路を選びます。
遅いページを1つ送ってください。何をなぜ変えるかを示します。
ページ速度の問題
大きな画像は訪問のたびに待ち時間を生みます。
画像がレイアウトより大きいと、ブラウザは読者に見えないデータまでダウンロードします。画像、画面、表示するタイミングをそろえることが解決策です。
重要な画像を見つける
最初の画面と主要な内容を確認してから、残りに手を入れます。
用途に合わせて画像を選ぶ
ヒーロー画像、商品写真、図、サムネイルにはそれぞれ別の調整が必要です。
変更後のページを確認する
必要な細部を残し、ページが早く読み込まれることを確認します。
4つの実用チェック
すべての画像は、その容量に見合う価値を持つべきです。
形式
品質を落とさず軽くできる場合は WebP または AVIF を使います。必要なら代替形式も用意します。
サイズ
スマートフォンを含め、表示サイズに近いファイルを配信します。
読み込み
最初の画面の画像は早く読み込みます。下にある画像は遅延読み込みにします。
品質
変更前と変更後を比べます。見た目が悪くなるなら、小さいほど良いとは限りません。
大きなファイルを送るだけなら、 Devenia Send を使ってください サイトを変更する必要はありません。
結果
ページは速く、画像は鮮明に。変化を確認できます。
小さなファイル、同じ画像。
ブラウザはレイアウトに必要な大きさに近いデータを取得します。
画面ごとに適切なサイズ。
各画面に役立つ元サイズを用意します。
見える成果。
変更前後を比べるので、効果を簡単に確認できます。