IGARASHI BLOGホームページで画像を軽くする方法

  1. TOP
  2. 技術ブログ
  3. 五十嵐 技術ブログ
  4. ホームページで画像を軽くする方法

ホームページで画像を軽くする方法

ホームページで画像を軽くするということは

高速データ通信が可能になるネットワーク環境にはなってきましたが、ホームページは軽い方が望ましいです。
Googleもデータを軽くすることを推奨し、SEOでも優位になることを公表しています。

そこでホームページを軽くする一番いい方法としては、画像データ容量を小さくすることです。
スマホやデジカメのカメラも高機能なものとなり、綺麗な画像を見せたいとなると、どうしても画像容量が大きくなりがちです。

その画像をホームページで使う時、大きなサイズの画像のままでアップしたり、圧縮なしでアップすると、どうしても画像容量は大きくなり画像1点の容量が10MBとか、それ以上のサイズになったりします。
ホームページで画像を使う場合、1点の容量が10MBというのは、さすがに重いです。

そこで、画像のサイズを小さくリサイズしたり、圧縮率を高めて(多少画像は粗くなりますが)画像容量を1MB以下にするようにして、画像をアップするようにするのが一般的な考え方です。
それでも、1ページに1MBの画像を10点使用すると、全体で10MBにもなってしまいます。

そこで、最近ではGoogleが開発した画像圧縮率の高い「WebP(ウェッピー)」という画像フォーマットが注目を集めています。

WebPの開発元であるGoogleは、ほぼ同等の画質でPNGよりも約26%、 JPGより約25〜34%軽くできると発表しています。
https://developers.google.com/speed/webp

ただ、Googleが開発したということで、当初はMicrosoftやAppleが提供しているブラウザ(EdgeやSafari)では「WebP」画像は対応していませんでした。しかし、その後徐々に対応されるようになり、今ではiOSのSafari、最新MacOSのSafariでも「WebP」画像に対応しました。

では、全ての画像フォーマットを「WebP」にすればいいのか?


WebP

そうではありません。
「WebP」に対応するブラウザは増えては来ていますが、それでも「WebP」に対応しないブラウザで見ている人も多いからです。
かつ、ベクター系の画像の場合は「SVG」の画像の方が圧倒的に軽いですし、色数の少ない画像の場合はGIF画像フォーマットの方が軽くなります。

一番いいのは、JPEGやPNG画像をホームページ内で使用している場合で、「WebP」に対応するブラウザで見ている人には、自動的に「WebP」画像フォーマットの画像を配信することでしょう。

a-blog cmsは画像をアップするとWebP画像を自動生成

a-blog cmsでVer. 2.11.22以上であれば、メディアで画像(.jpg、.pnp)をアップロードすると、自動的にサーバー上に.webp画像も生成してくれる機能が搭載されています。
なので運用者側で、これまでのJPEGやPNG画像の他に、WebP画像も用意して、その2つをアップロードする必要はありません。

もちろんアップする画像が大きな画像容量だと、いくらWebP画像を自動生成してくれると言っても、生成された画像容量も大きくなってしまいます。
ですので、表示する画像サイズにもよりますが、モニタの画面いっぱいに画像を表示する場合でも、幅2,000px(ピクセル)くらいにしておけばよいでしょう。
しかも、a-blog cmsでは、大きな画像ファイルをアップロードする際、ブラウザ側で縮小処理を行った後にアップロードする仕様になっていますので、あらかじめ画像の大きさを小さくしておく必要もありません。
さすがよく考えられています。
(この際の縮小サイズは、管理ページ > コンフィグ > 編集設定 にあるイメージサイズの「拡大表示時の最大サイズ」の数値となります)

アップロードする画像のファイル名を仮に「abc.jpg」とします。
その「abc.jpg」の画像を、a-blog cmsでアップすると、サーバー上には「abcdef.jpg.webp」という「WebP」画像も自動生成されます。

その画像を配置したページを、「WebP」対応のブラウザで見ると「abc.jpg.webp」画像が表示されます。
ただし、ソース上のファイル名は変わらないので反映がわかりにくいですが、ChromeなどのデベロッパーツールのNetworkタブで確認し、「Type」の列が「webp」になっていれば「WebP」画像で配信されています。

この切り替えは、.htaccessファイルに書かれている記述で切り替わっています。

WordPressだとplug-inで対応ですが、a-blog cmsでは標準搭載

WordPressでも同じようなことは出来るのですが、plug-inで対応しなくてはなりません。
そうすると、今後WordPressのバージョンアップで、そのplug-inが対応しなくなったり、またはplug-inのセキュリティーホールが突かれてハッキングされたりという、危険性を伴ってしまいます。

それでは安定したホームページ運用はできませんね・・。
a-blog cmsなら「WebP」画像の自動生成と、「WebP」に対応したブラウザでの表示機能は標準搭載です。

ホームページで画像を軽く表示したいのなら、a-blog cmsを実装することをお勧めします。

タグ:a-blog ホームページ WebP