ホームページで画像を軽くする方法
ホームページで画像を軽くするということは
高速データ通信が可能になるネットワーク環境にはなってきましたが、ホームページは軽い方が望ましいです。
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」に対応しないブラウザで見ている人も多いからです。
かつ、ベクター系の画像の場合は「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を実装することをお勧めします。
