派遣で働くエンジニアのスキルアップを応援するサイト

PRODUCED BY RECRUIT

トップ > ITスタッフィング エンジニアスタイル > 連載・コラム > 画像表示の速度を上げるシンプルな方法

画像表示の速度を上げるシンプルな方法

連載・コラム テクニカルスキル HTML・CSS

HTMLやCSSを使い、Webサイトの更新・修正は一通りできるようになった。そこからもう一段できることを増やしたい、そんな方に向けた新連載。
人気連載「HTML・CSSのいろは 」からほんの少しステップアップした内容を、書籍『スラスラわかる HTML&CSSのきほん』の著者・狩野 祐東さんが解説します。
今回は「画像の表示を少しでも速くする方法」をご紹介。画像フォーマットを変えたり、HTMLを書き換えたり、いろいろできることがあります。

Webページの表示が遅い？

Webページの表示が遅いように感じます。HTMLや画像を調整して、少しでも速く表示できるようにする方法はありますか？

Webページの表示が遅い場合、本当ならWebサーバーをアップグレードするのが一番です。しかし、それ以外にも工夫できることがあります。とくに画像の調整は効果が大きく、試す価値があります。

INDEX

1. 画像ファイルサイズが大きくなると表示が遅くなる
2. 画像ファイルサイズを小さくする方法
3. HTMLの改善で表示速度を上げる方法
さいごに

1. 画像ファイルサイズが大きくなると表示が遅くなる

スマートフォンをはじめとしてさまざまな端末で、高精細な、ピクセル数が多いディスプレイ（高解像度ディスプレイ）が普及しています。そうしたディスプレイで高画質な画像を見せるために、Webページで使用する画像のサイズも大きくなっています。

高解像度ディスプレイに対応するためには、実践的には表示サイズの2倍のピクセル数を持つ大きな画像を用意します。たとえば、300px×200pxで表示するのであれば、600px×400pxの画像を用意します。

しかし、画像が大きくなればファイルサイズも大きくなります。縦横のピクセル数が2倍の画像は、単純計算で元の画像の4倍のファイルサイズになってしまいます（JPEGやPNGはデータ量が圧縮されるので単純に4倍にはなりませんが、それでもだいぶ大きくなるのは間違いありません）。


▲標準解像度と高解像度のJPEG画像のファイルサイズを比較（幅・高さが2倍で面積は4倍）。JPEGの場合ファイルサイズは4倍にはならないが、それでも2倍以上になっている

■ファイルサイズが大きくなれば、ページの表示速度が遅くなる

ファイルサイズが大きくなるということは、データ量が増えるということです。 データ量が増えるとダウンロード時間が増えて、Webページの表示も遅くなりますし、より多くの通信容量を消費します。ページを見ているユーザーにはうれしくない状況です。
そこで、画質は維持しながら画像のファイルサイズを小さくし、そのうえでHTMLの機能を駆使して少しでもWebページの表示を速くするテクニックを考えます。

2. 画像ファイルサイズを小さくする方法

Webページに表示でき、かつ広く普及している画像ファイルフォーマットは、線や塗りを数式で表現するSVGを除いて4種類あります。

Webページに表示できる、現在普及している画像フォーマット

  • JPEG (.jpg)
  • PNG (.png)
  • GIF (.gif)
  • WebP (.webp)

これら4つのうち、画質が良好で、ファイルサイズも小さいのは「WebP」です。「ウェブピー」または「ウェッピー」と読みます。WebPは従来のファイルフォーマットに比べて効率的に画像を圧縮できるフォーマットです。JPEGが得意としている写真のような階調の多い画像にも、PNGが得意としている色数が少なく、輪郭もはっきりしているグラフや図のような画像にも対応しています。

JPEGやPNG画像をWebP形式に変換するだけで、ファイルサイズは3割〜4割以上小さくできます。主要なブラウザすべてで表示できるので、互換性も問題なく安心して使える画像形式です。画像の読み込みやWebページの表示が遅いときは、まず画像をWebP形式に変換することを検討してみてください。

■Adobe PhotoshopでWebP形式の画像に変換する方法

画像をWebP形式に変換する（書き出す）方法はいくつかあり、検索すればいくつかアプリが見つかります。気に入ったアプリを使ってかまいませんが、ここではAdobe Photoshopを使ってWebP画像を書き出す方法を説明します。

  1. Adobe Photoshopで画像を開く
  2. ［ファイル］メニュー─［コピーを保存］の順にクリック
  3. 「複製を保存」ダイアログで保存したい場所を選び、「フォーマット」メニューから［WebP］をクリック
  4. ［WebPオプション］ダイアログが出てきたら画像の書き出し設定
  5. 基本的にはそのまま［OK］をクリック


▲PhotoshopでWebP形式の画像に変換する

3. HTMLの改善で表示速度を上げる方法

画像のファイルサイズを小さくする以外にも、Webページの表示を高速化する工夫が3つあります。どれもHTMLのテクニックです。

  • width属性、height属性を指定する
  • 遅延読み込みの設定をする
  • 標準ピクセル密度、高ピクセル密度の画像を用意して、ブラウザに自動判別させる

ここから、それぞれを詳しく見ていきましょう。

■width属性、height属性を指定する

レスポンシブデザインが当たり前になり、ほぼ常に画像が伸縮して表示されるようになったことで、<img>タグのwidth属性、height属性を指定しないことが多くなったかもしれません。しかし、ページの表示を高速化したいなら指定すべきです。

ブラウザは、width属性とheight属性が書かれている場合、その値から縦横比を計算して、画像を表示するためのスペースをあらかじめ確保します。そのおかげで、ページのレイアウトが安定し、高速化すると言われています。

これらの属性がないと、画像のダウンロードが完了したあとに縦横比を計算してページ全体のレイアウトをし直すため、ページの表示速度に影響します。

 

具体的には、<img>タグのwidth属性、height属性には、表示サイズではなく、画像の実サイズを指定します。そのうえで、実際の表示サイズを調整するためにCSSを記述します。
ページのレイアウトによって記述すべきCSSは異なりますが、以下では基本となる例を紹介します。

今回の例では、1280px×847pxの画像を使用して、ページ上では幅640px以下で、画面サイズに合わせて伸縮表示しています。

サンプルデータも用意しましたので、以下のリンクからzipファイルをダウンロードして解凍し、ブラウザでimg-wh.htmlを開いて確認してください。

▼クリックするとzipファイルがダウンロードされます
サンプルデータのダウンロードはこちらから

▼ソースコード）imgタグでwidth/heightを指定する例

<div class="img-parent">
  <!-- imgタグのwidth属性・height属性には画像の実サイズを指定する -->
  <img src="images/1280.webp" alt="" width="1280" height="847px">
</div>

▼ソースコード）表示サイズはCSSで指定

<style>
  /* 画像を伸縮可能にするCSS */
  img {
    max-width: 100%;
    height: auto;
    vertical-align: bottom;
  }
  /* 表示サイズを指定するには
     画像の親要素にmax-widthプロパティを設定 */
  .img-parent {
    max-width: 640px;
  }
</style>


▲<img>タグにwidth属性・height属性を指定したうえで、表示サイズはCSSで指定する例

■遅延読み込み

遅延読み込みとは、「ページをスクロールして、本当に表示する必要があるまで、画像の読み込み（ダウンロード）を遅らせる」テクニックです。
遅延読み込みを使えば、ダウンロードのタイミングを分散させることができます。そうすることでブラウザの処理の負担が軽くなって、スクロールがカクカクしたり、クリックできなかったりといった、反応が悪くなることを防ぎます。とくに、画像が多いページで有効です。
「遅延読み込み」の設定をするには、<img>タグにloading属性を追加して、値を "lazy" にします。すべての<img>タグにloading属性を追加すると効果的です。

▼ソースコード）遅延読み込みの設定例。「loading="lazy"」を追加する

<img src="images/image.webp" width="600" height="400" alt="" loading="lazy">

■標準解像度と高解像度の画像を用意してブラウザに自動判別させる

閲覧する端末のディスプレイ解像度に合わせて、ファイルサイズが小さい標準解像度の画像か、高画質な高解像度画像のどちらをダウンロードするかをブラウザに自動判別させるテクニックがあります。
ディスプレイ解像度だけでなく、通信状況が悪く、ダウンロードに時間がかかりそうなときも標準解像度の画像をダウンロードするので、ページの読み込みができるだけ遅くならないようにする効果が期待できます。
低解像度画像・高解像度画像を表示し分けるには、<img>タグにsrcset属性を追加して、属性を以下のように設定します。

  • src属性：標準解像度の画像のパスを指定
  • srcset属性：高解像度ディスプレイ向けの、ピクセル数が2倍の大きなサイズの画像のパスを指定。パスの後ろに半角スペースで区切って「2x」と書く。
  • width属性、height属性：標準解像度の画像の幅と高さを指定すればOK。

▼ソースコード）ディスプレイの解像度に合わせて異なる画像を表示する<img>タグの書き方

<img
	src="標準ピクセル密度の画像のパス"
	alt="代替テキスト"
	width="標準ピクセル密度の画像の幅"
	height="標準ピクセル密度の画像の高さ"
	srcset="高ピクセル密度の画像のパス 2x"
>

＊ソースコードが長くなるので属性ごとに改行しています（HTMLタグは属性間で改行できます）。

■srcset属性の動作がわかるサンプル

srcset属性の動作がわかるサンプルを用意しました。
最大幅400pxのボックスに画像を表示します。2種類の画像をディスプレイの解像度によって表示し分けます。画像は標準解像用のサイズが400px×266pxの「400x266.webp」と、高解像度用のサイズが800px×533pxの「800x533.webp」を用意してあります。違いがわかるように、画像にはそれぞれ「1x」「2x」と書いてあります。

▼ソースコード）ディスプレイの解像度に合わせて異なる画像を表示する

<div class="sample">
  <img 
    src="images/400x266.webp" 
    width="400"
    height="266"
    alt="サンプル画像"
    srcset="images/800x533.webp 2x">
</div>


▲標準解像度ディスプレイでの表示


▲高解像度ディスプレイでの表示

標準解像度のディスプレイと、高解像度のディスプレイを両方お持ちの方は、先程ダウンロードしたサンプルデータ内の、srcset.htmlをブラウザで開いてみてください。ディスプレイによって表示される画像が変わります。

▼クリックするとzipファイルがダウンロードされます（前述と同じファイル）
サンプルデータのダウンロードはこちらから

さいごに

Webページの表示を高速化するために、画像を最適化する方法を紹介しました。
スマートフォンを中心に高解像度ディスプレイが当たり前になり、それに合わせてWebサイトでも高解像度画像を用意することが多くなりました。
「画質は良くしたい」でも「ファイルサイズは小さくして、ページの表示速度を速くしたい」という、矛盾した課題をクリアするために、まずは、JPEGやPNGフォーマットの画像をWebPフォーマットに変換してみてください。これだけでもかなりの効果が得られます。

【筆者】 狩野 祐東さん
UIデザイナー、エンジニア、書籍著者。アメリカ・サンフランシスコでUIデザイン理論を学ぶ。帰国後会社勤務を経てフリーランス。2016年に株式会社Studio947を設立。Webサイトやアプリケーションのインターフェースデザイン、インタラクティブコンテンツの開発を数多く手がける。各種セミナーや研修講師としても活動中。著書に『スラスラわかるHTML&CSSのきほん』『これからのJavaScriptの教科書』(SBクリエイティブ)『WordPressデザインレシピ集』 (技術評論社)など多数。 https://studio947.net
@deinonychus947

※本記事に記載されている会社名、製品名はそれぞれ各社の商標および登録商標です。
※本稿に記載されている情報は2025年10月時点のものです。