Webページで画像のサイズを最適化するにはどうしたらよいか
画像のファイル形式という点から基礎知識と改善策・方法について紹介していきます。
画質を下げることでページ表示速度も改善することがあるので、是非試してみましょう。
画像の種類
画像と言っても、さまざまな種類が存在します。
代表的な形式として「ベクター形式」と「ラスター形式」が存在し
ベクター形式は色や形を数値で表し、ラスター形式は小さな点（ピクセル）の集まりで画像を表します。
今回は、Webページなどでよく使われるラスター形式の「JPEG」、「PNG」、「GIF」の3種類について紹介していきます。
JPEG形式
JPEG（ジェイペグ：Joint Photographic Experts Group)とは画像圧縮方法の一つで、色や階調の変化を抑えることで画像を圧縮します。
変化を抑えるため見た目が少し悪くなりますが、ホームページに掲載する分には問題ありません。
拡張子は「.jpg」と「.jpeg」の2種類ありますが、どちらも同じで写真の掲載などによく使われます。
一般的な拡張子は「.jpg」です。
またJPEGは非可逆圧縮なので、JPEGで保存を繰り返した場合、画質はその分だけ劣化していきます。
最近では「JPEG 2000」や「JPEG XR」という形式も登場していおり
通常のJPEGよりも画質がよく、圧縮率を高して画像サイズの最適化をすることが可能となっています。
ただ「JPEG XR」については「Windows Vista」以降でしか対応していないなど、限られたOSやブラウザにて使用されています。
この形式が一般的に使われるようになるのは、まだ先になるかもしれません。
PNG形式
PNG（ピング：Portable Network Graphics）とは画像圧縮方法の一つで、色の数が少ない画像においてファイル容量を減らすことができます。
JPEGは非可逆圧縮での圧縮となるため、ファイルサイズがPNGよりも小さくなりますが
PNGは色の数が少ないイラストやロゴを掲載するときに使われることが多く、背景色を透かして使用できる「透過PNG」が可能という特徴を持っています。
またPNGは「PNG-8」、「PNG-24」、「PNG-32」と3つの種類に分けることができ、各数字は簡単に言うと「扱える色の数」です。
「PNG-8」は色数が最大256色の圧縮形式で、色の数が少ないイラストやロゴに使われます。
「PNG-24」はRGBフルカラーを扱うことができ、色の数が多い場合に画質を劣化せずに保存することができます。
24というのは
R 8bit (0～255階調）
G 8bit (0〜255諧調)
B 8bit (0〜255諧調)
の合計が由来です。
フルカラーを扱える分、画質が大きくなるというデメリットがあります。
「PNG-32」はPNG-24に「アンファチャンネル 8bit (0〜255諧調) 」という透過情報が使えるため、24+8で32と表現されています。
PNG-24と比較すると、アンファチャンネルにより綺麗でなめらかな画像にすることができます。
GIF形式
GIF（ジフ：Graphics Interchange Format）も圧縮方法の一つで、パラパラ漫画のような短いアニメーションに使われます。
色数が「256色」しか使えないため、写真の保存には向かず、長時間のアニメーションにも不向きです。
その分、JPEGよりも圧縮効率が高く、可逆圧縮のため画質の劣化も少ないのが利点です。
また、透過GIFとして背景色を透過させることもできますが、ラスター形式（ピクセル表示）なので線のフチはギザギザとなっています。
以上3つが画像保存形式となります。
画像と言っても、画像の使用用途によって適した圧縮形式を選べると
画像の送受信や表示スピードを速くすることができますよ。
画像圧縮方法
それではWebページに画像を掲載する、あるいは画像サイズを圧縮して送信する際に使える圧縮方法を見ていきましょう。
EWWW Image Optimizer
WordPressでブログを運営している方なら、プラグインの「EWWW Image Optimizer」を使用するという手段があります。
このプラグインは画像を「自動で圧縮」し、アップロードされた画像に対しても圧縮処理がされるので便利です。
インストール方法はプラグインから上記を検索し、ダウンロードするだけです。
しかし限度があるため、個人の判断になりますが他の圧縮手段があることも知っておきましょう。
また設定方法に関しては、検索するとたくさんヒットするので調べてみましょう。
ちなみに、僕はこのサイトが個人的に良かったです。
EWWW Image Optimizerの設定方法と使い方：バズ部
Voralent Antelope
JPEGとPNGファイルなど劣化なしで最適に圧縮するアプリケーションとなっており、ファイルサイズを最大で60～70％程度減少させることができます。
また「非可逆圧縮を有効化にする」にチェックを入れると、画質は悪くなるものの、ファイル容量を効率的に減らすことができます。
Antelopeの使い方は画像ファイルをドラック＆ドロップして、最低化を実行するだけなので簡単に操作することができます。
下記のページにて詳しく解説されていたので、参考にしてください。
STAFF BLOG POST：お手軽画像圧縮ソフトAntelope使ってみた
ImageOptim
macOS用のフリーウェアで、画像をドラック＆ドロップするだけで圧縮処理を行うことができます。
JPEG、PNG、GIFに対応しており、圧縮処理後は上書きされるのでとても便利です。
圧縮方法としては画像にあるメタ情報を消去して画像サイズを減らしています。
ダウンロード方法や使い方は様々なサイトで紹介されているので使ってみてください。
また当サイトでは、画像のリサイズ、トリミング、色調補正、画像圧縮など様々なことができる
フリーソフト「irfanview」についても紹介しています。
以上「Webページ画像サイズの最適化方法と基礎まとめ[JPAG , PNG , GIF] 」でした。
画像ファイルは拡張子の種類によって圧縮性能が異なるので、自分がどのような画像を使っているかは調べておきましょう。
また、フリーソフトでも圧縮できるためメールなどで画像サイズを圧縮したい場合はそちらを使えるようにしておくと便利だと思います。
お疲れ様でした。