【Webエンジニア向け】画像変換によるWebサイトの最適化を解説

公開日
更新日

こんにちは！【初心者向け】CDNとは？メリット、注意点等を徹底解説 では、一般的なCDNについての説明を行いました。

今回は、Webサイトやアプリの画像を作成したり画像をたくさん扱う方向けに、画像最適化や画像CDNサービスについて説明します！

本記事でわかること

この記事では主に以下のことを説明します。

  • 画像最適化について、それが重要な理由
  • WebPフォーマットについて
  • 画像変換サービスについて

また、本記事では用語の定義を以下とします。

  • 画像最適化･･･画像の大きさ（表示サイズ）やファイルサイズをデバイスに合わせて最適に表示させること
  • 画像CDN･･･画像変換・最適化と画像配信が出来る、画像に特化したCDNサービスのこと

対象者

本記事では、主に以下のような方が対象です。

  • Webサイトで画像ファイルを多用しており、運用に悩んでいる
  • 画像の大きさや画像のファイルサイズを最適化することに悩んでいる
  • CDNについては知っているけど、画像CDNって何？

画像最適化とは

画像最適化を行うことで、特に画像を多く使うWebサイトや、画像のアップロードが頻繁に発生するサービス等では顧客体験が向上します。

ではそもそも画像最適化とはどんなもので、なぜ大きな効果をもたらすのでしょうか？

Webサイトには文字だけでなく画像も表示させることができますよね。文字にフォントサイズがあるように画像にもサイズがあります。そして、画像のサイズは見た目の大きさを示す「画像の大きさ（表示サイズ）」とデータの量や大きさを指す「ファイルサイズ」があります。

これらのサイズが大きいほど、読み込みに時間がかかります。読み込みに時間がかかる＝ユーザの待ち時間となり、"読み込みが遅いサイトだな・・もういいや"と離脱することにつながってしまいます。

サイトの見た目と表示速度を改善するために、上記に記載した「画像の大きさ（表示サイズ）」と「画像のファイルサイズ」を最適化することを「画像の最適化」と呼びます。

画像最適化が重要な理由

そもそもWebサイトは最適化しなくても表示させることはできます。しかし、下記の理由から最適化したほうが望ましいです。それでは理由を説明していきましょう。

表示速度を上げて、Webサイトの訪問者の離脱防止に

大きいファイルサイズの画像が多いと読み込みに時間がかかり、ページの表示が遅くなっていきます。一説によると、ページの表示速度が5秒になると40％のユーザーが離脱すると言われています。魅力あるWebサイトでも表示が遅いだけでユーザが離れてしまいます。

画像は、Webサイト内のデータとしては非常に割合が大きく、画像のデータ量を軽くするだけでページの表示速度は大きく向上します。画像を多く使用しているサイトでは、最適化は必須ですね！

ユーザのデバイスに合わせた画像を表示し、UXの向上を

画像の表示サイズを調節することで、ユーザにとって見やすいWebサイトにすることができます。横幅が大きすぎる、逆に小さすぎる、どちらも見づらいですよね。それぞれのWebサイトにあった表示サイズが重要です。

また、PCユーザ用の表示サイズ、スマホユーザ用の表示サイズなど見る側の気持ちを考慮した画像設計にしていくことが重要です。

画像最適化はSEOの向上にも繋がる

表示画像を最適化することでユーザビリティが向上し、SEO対策となります。

検索結果の上位に表示されるようにすることを、検索エンジン最適化（Search Engine Optimization, SEO）と呼びます。

Googleが掲げる「10の事実」で「Fast is better than slow（遅いより速い方がいい）」という理念があります。この理念に基づき、表示の遅いWebサイトはペナルティを受け、Google検索結果の上位に表示されないと言われています。 Googleは指標として、Webページのデータ量を1.6MB以下にすることを推奨しています。これは理論上、3G回線でWebページのコンテンツを読み込むのに10秒以下を実現するためのデータ量です。

Webサイトの表示速度は、 Googleが提供している「PageSpeed Insights」というWebサイトのパフォーマンスを計測するツールで測定することが可能です。画像サイズの最適化や、CDN利用、次世代フォーマット（後々解説するWebPフォーマット）への対応という評価項目があります。

しかし、Googleの指標（1.6MB）に反し、Webサイトのデータ量は年々増加傾向にあります。 コンテンツの割合も画像が多くを占めているので、画像のデータ量やサイズを最適化することで大幅な表示速度の改善が可能となり、SEO対策にもつながります。

「PageSpeed Insights」についてはこちらの記事でも解説しているので参考にしてみてください。

あなたのWebサイトを多くのユーザに見てもらうために、SEOは非常に重要です。検索エンジンは検索結果において「ページの読み込み速度」を順位付けの一つの要素としています。読み込み速度が速いと一番！というわけでなく、読み込み速度が遅いと減点対象、ととらえていただけたら良いと思います。

WebPフォーマットについて

画像最適化に重要な次世代フォーマット、WebPについて説明します。

WebP（ウェッピー）とは、Googleが開発している画像フォーマットで、拡張子は「.webp」です。Webサイトのトラフィック軽減とパフォーマンス向上を目的として作られました。

WebPはビットマップ画像であるため、画像を拡大すると画質が落ちるのはJPEG、PNG、GIFなどと同じです。では、WebPは他フォーマットと比べて何が違うのか解説していきます。

圧縮方法の違い

  • 可逆圧縮（ロスレス圧縮）
    圧縮によって元のデータを損失させないため、完全に元通りに復元することができます。非可逆圧縮に比べて、圧縮率が低いのが難点。PNGやGIFがこの形式です。
  • 非可逆圧縮
    圧縮する際に、データの損失を許容するため、可逆圧縮とは異なり元のデータに復元することはできません。その分、ほとんど違いの分からない画質で圧縮率を高めることができます。JPEGがこの形式です。

WebPは上記の可逆圧縮と、非可逆圧縮のどちらにも対応しています。また、透過した画像の書き出しや、GIF同様にアニメーションにも対応しています。

画像形式圧縮方法透過アニメーション
WebP可逆・非可逆圧縮〇〇
JPEG非可逆圧縮××
PNG可逆圧縮〇×
GIF可逆圧縮△〇

WebPで画像圧縮を行うと、一般的なJPEG形式と比べて約25～34％のデータ量圧縮が可能のためトラフィックを軽減できるメリットがあります。

デメリットとして、WebP非対応のブラウザに対しては他の画像フォーマットを代替表示する対応が必要です。

※詳細は、WebPフォーラムをご参照ください。

画像最適化の方法について

画像最適化の概要や、有用性についてはお分かりいただけたかと思います。ここからは画像最適化の方法についてみていきましょう。

対策0. 対応しない

現状のまま何も対応しない場合は、冒頭で述べた通りWebサイトの表示速度が低下し、それによるユーザの離脱率が高まります。Webサイトのデータ量が大きいと、サーバ側にも負荷がかかりデータの転送量・コストも大きくなります。

対策1. 画像アップロード時に手元で変換をする

画像アップロード時に1つ1つ、人力で手元で変換をするという対応があります。心温まる手作業ですが、手間がとてもかかります。本来の開発に注力したくても画像のチューニングに労力がかかってしまう、ということもあるかと思います。

また、画像をアップロードする人がサイト運用者（開発者）以外の場合、例えばサイトユーザがアップロードするというケースでは、運用者の手元で画像最適化を行うことができません。

あとからWebサイトのデザインを変更した場合、既存の画像をすべて再変換するといった対応も必要となります。

対策2. 画像アップロート時にサーバサイドで加工する

対策0や1に比べて楽ではありますが、サーバ負荷への対応が必要になり、その分メモリを多めに搭載したサーバやCPUの性能が高いサーバを用意する必要があるなど、お金もかかります。サーバの管理や運用の手間も発生します。

ImageMagickという無料の画像加工ソフトを使うといった方法もありますが、脆弱性の対応や、メモリを大量に使うためメモリ対策が必要といった課題があります。

また対策1の場合と同じく、あとからWebサイトのデザインを変更した場合、既存の画像をすべて再変換するといった対応も必要となります。

対策3. 画像CDNサービスを利用する

画像CDNサービスを利用すると、画像最適化は画像CDNサービス側で自動で行ってくれます。画像変換用のサーバの運用管理はサービス側に任せられるので、サーバの負荷などを心配する必要がありません。あとからWebサイトのデザインを変更した場合でも、既存の画像をすべて再変換するといった作業も不要です。

また、WebPフォーマットを配信する際に、あらかじめ未対応ブラウザではWebP以外を表示させる設定をしておくことで、WebP対応ブラウザと未対応ブラウザでの配信の振り分けも自動で行ってくれます。

画像CDNサービスについて

本記事では冒頭で定義したように、画像変換の機能も付いたCDNサービスを画像CDNサービスと呼びます。

画像最適化の方法を理解いただいたところで、あらためて画像CDNとは何か、使うことによるメリットと気をつけるところを、弊社が提供するImageFlux（イメージフラックス）画像変換・配信エンジンを例にご紹介します。

ImageFluxは、オリジナル画像をもとにデバイスに最適化された画像を簡単に生成でき、画像変換・最適化とキャッシュ・配信までを一括で行うクラウドサービスです。

ご利用中のオリジンサーバ（画像のサーバ）は変更不要です。ImageFluxの管理画面からオリジンサーバを設定すると、画像変換用のURLが発行されます。変換用URLにパラメータを追加するだけで画像の最適化・配信が可能です。

一度アクセスがあった画像は２回目以降キャッシュ配信されるため、高速な画像配信をすることができます。

画像CDNサービスのメリット

画像CDNサービスを利用することで、さまざまなメリットがあります。

Webサイトの表示速度が向上し、さらに転送量も削減される

Webサイトの表示速度の向上のためにCDNを導入するといった方法があります。しかしPVが増加するとトラフィックも増加し、CDNの利用料が高くなってしまいます。CDNの導入だけではWebサイトのページのサイズ自体は変わりません。

画像CDNサービスを使うことで画像はキャッシュされ、専用の高速回線から配信されます。 これにより、オリジンサーバーからの転送量の削減とWebサイトの表示速度向上が期待できます。

デバイスにあわせた画像の最適化が簡単にできる

同じ1枚の画像でも、例えばPCから見る画像、モバイルから見る画像、サムネイル画像、詳細画像など、デバイスや用途にあわせて複数の画像の作成が必要です。また、スマートフォンと一口にいっても機種によってサイズが異なる最適な画像を用意する必要があります。

画像CDNサービスを使えば、1枚のオリジナル画像をもとに、URLのパラメータを追加するだけでさまざまな画像を生成できるので、画像の最適化が簡単に行えます。画像の枚数自体も減り、画像の生成や、最適化といったチューニングに割くコストの削減にもつながります。

サーバ調達や運用管理が不要

ImageMagick等の無料の画像ソフトを使ったしても、それを運用するためのサーバの確保と運用が必要です。メモリ消費が激しいため運用管理が大変で、脆弱性への対策も考えなくてはなりません。

一方で、クラウド型の画像CDNサービスはクラウド事業者側のリソースを利用します。Webサーバ側に負荷がかかることがなく、画像変換用のサーバ構築も不要です。 画像CDNサービスを使えば画像関連のシステム開発コストはゼロになり、エンジニアの作業量も減り、エンジニアは本来の開発業務に注力することができます。

顧客体験の向上

画像最適化が重要な理由でも述べましたが、Webサイトの表示速度は、ユーザの離脱率にも関係しています。SEO対策や広告などで自社サイトに集客しても、表示速度が遅ければユーザは他のWebサイトに流れてしまう可能性もあります。

画像CDNサービスを利用することで、Webサイトやアプリ内に表示される多くの画像をデバイスごとに動的にリサイズしたり、WebPフォーマットへ変換することで、データ通信量を大幅に削減し、ユーザビリティの向上を実現できます。

画像変換サービスを使う際に気を付けること

このように便利な画像CDNサービスですが、使う際に気を付けることもまとめておきます。

キャッシュコントロールの設定をしないと、画像CDNサービスを利用する恩恵を正しく受けられない

ImageFluxの現在の仕様では、オリジンからのレスポンスヘッダに指定がない場合、キャッシュは行われません。

※HTTPの仕様上、オリジンが「Cache-Control」ヘッダを返さない場合は、プロキシ側にキャッシュを行うかどうかの選択権があります。将来ImageFluxも、「Cache-Control」がない場合でも自動でキャッシュを行うようになる可能性がありますのでご注意ください。

ImageFlux上でキャッシュを行わない場合、クライアントからのリクエストがあるたびに、オリジンへの元画像の取得リクエストが発生してしまい、速度的にも転送量的にも、画像CDNサービスを利用する恩恵を正しく受けることができません。そのため、キャッシュコントロールの設定を忘れないようにしましょう。

※設定の詳細はドキュメントをご確認ください。

障害のポイントが増える

障害の発生などにより画像CDNサービスがダウンすると、サイトの画像の一部もしくはすべての画像で表示に問題が生じるリスクが存在します。もちろん、画像CDNサービス事業者はこういったことがないように複数サーバー・複数拠点など可用性を高めていますが、外部サービスを利用することで障害のポイントが増えるリスクは覚えておきましょう。

まとめ

この記事では、画像最適化が重要な理由についてや、画像CDNサービス、メリット・気を付けることについて解説しました。

  • 表示速度の改善や、SEO対策のためには画像最適化も重要
  • 画像CDNサービスを利用すれば、画像の最適化とキャッシュ配信が同時に解決できる
  • 画像CDNサービスを利用する際には、キャッシュコントロールの設定を行う

最後まで読んでいただき、ありがとうございます。

ImageFluxについて

ImageFluxは、さくらインターネットがピクシブ社と共同開発した画像最適化とキャッシュ配信ができるサービスです。

ピクシブ社といえば、みなさんご存じの通り大量のイラストを扱っており、本気で画像処理にコストと労力をかけられています。ImageFluxはそんなピクシブ社の画像処理のノウハウと、さくらインターネットのインフラや運用リソースを組み合わせたサービスです。

日本語のサポートやドキュメントも対応しており、メルカリ様、STORES様、資生堂様等多数の企業にも利用いただいております。

サービスの詳細は、以下から資料をダウンロードいただけます。是非ご検討ください！

よくわかるImageFluxサービス紹介資料をダウンロード