WEBサイトの読み込み速度を改善する画像圧縮の方法とは？

画像圧縮の重要性

誰でもWebページを作れる世の中で、品質が重要視されていますがその中でもページの読み込み速度を早くすることはサイトの離脱率に関わり非常に重要です。
ここでは簡単にサイトの読み込み速度をあげることができる画像圧縮の方法をご紹介します。

画像圧縮方法

WEBサイトにアップする簡単なやり方とコマンドで大量の素材を圧縮する方法をご紹介いたします。

無料のWebサイトツールを利用した画像圧縮方法。

TinyPNGという画像圧縮のサイトに画像をアップロードすることで画像を圧縮することができます。

TinyPng画像圧縮サイト

コマンドでの画像圧縮方法

枚数が多い場合はターミナルのコマンドを利用することをオススメします。まずHomebrewというmacOS用のパッケージマネージャーをインストールします。ターミナルを開いて下記のコマンドを入力してください。

$/usr/bin/ruby -e “$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)”

jpg圧縮方法

#インストール
$brew install jpegoptim
#圧縮コマンド
$jpegoptim [options] [ファイル名]
#メタ情報を削除
$jpegoptim –strip-all *.jpg
#品質90%でメタ情報を削除
$jpegoptim –strip-all –max=90 *.jpg

png圧縮方法

#インストール
$brew install pngquant
#256色で上書き
$pngquant –ext .png –force 256 *.png

まとめ

画像圧縮することでWEBサイトの読み込み速度が簡単に上がります。
Googleウェブパフォーマンスツールを利用して検証してみると目に見える形で改善されてるのがわかります。