アンテナメニュー開閉
←前の記事 次の記事→

【画像圧縮】高速で強力なWordPressサイトを構築する5

高品質で効率的な画像を生成する。

【画像圧縮】高速で強力なWordPressサイトを構築する5
より高品質で効率的な画像を生成する。(HomeSpot HQ)

良質な画像エンコーダの導入

前回の記事ではWordPressの導入推奨プラグインとfunctions.phpの設定を紹介しました。

今回の記事ではよりパフォーマンスを向上させるために『ImageMagick(Imagick)』『mozjpeg』『OptiPNG』『pngquant』の導入方法を説明していきます。

(本文前に)簡単な3行まとめ

  • 高品質な画像を生成する画像エンコーダの紹介。
  • これらを導入することでよりパフォーマンスが向上する。
  • アップロード時に自動で圧縮を行う方法も紹介。

記事目次

ImageMagick

ImageMagickは画像の編集に使用されるライブラリの一種で、Imagickとも呼ばれています。

WordPressはデフォルトでGDというライブラリが使われていますが、ImagickはGDよりも優先的に使用されるように設定されています。

ImagickはGDよりも質の良い画像編集を行うことが出来るため、導入することをおすすめします。

Imagickの導入

まずはImageMagickのパッケージをインストールします。

最新版はhttp://www.imagemagick.org/download/から確認可能です(2017/3/28現在、最新版は7.0.5-4)。

必要なパッケージをインストールします。

$ sudo apt-get install pkg-config
$ cd /usr/local/src/
$ sudo wget http://www.imagemagick.org/download/ImageMagick-7.0.5-4.tar.gz
$ sudo tar xvfz ImageMagick-7.0.5-4.tar.gz
$ cd ImageMagick-7.0.5-4/
$ sudo ./configure
$ sudo make
$ sudo make install

次にImagickをインストールします。

$ sudo pecl install imagick

使用可能にするためにphp.iniへ記述します。

$ sudo vim /etc/php/7.0/fpm/php.ini
php.ini

[imagick]                                                                       
extension=imagick.so

これでimagickが使用可能になりました。

この時点でWordPressがGDを使用しなくなり、Imagickを代用することになります。

mozjpeg

mozjpegはウェブブラウザFirefoxでお馴染みのMozillaが開発したJPEGエンコーダの一つです。

mozjpegは従来のJPEGエンコーダよりも性能が良く、良質な画像(低サイズ高画質)を生成することが可能となります。

良質な画像を生成することはサーバの負担を減らすだけでなく、サイト訪問者のユーザビリティの向上にも繋がります。

mozjpegの導入

まずはtmpへ移動します。

$ cd /tmp

次にgithub内のmozjpegページからパッケージをダウンロードします(2016/6/20現在、最新版は3.1)。

$ wget https://github.com/mozilla/mozjpeg/archive/v3.1.tar.gz

ダウンロードしたファイルを展開します。

$ tar -xvf v3.1.tar.gz

サーバにgitが含まれていない場合はここでインストールしておきます。

$ sudo apt-get install git

mozjpegに必要なファイルを導入します。

$ sudo apt-get install autoconf automake libtool nasm make

mozjpegをインストールします。

$ cd mozjpeg-3.1
$ autoreconf -fiv
$ mkdir build && cd build
$ sh ../configure
$ sudo make install

シンボリックリンクの作成

簡単にmozjpegを利用出来るようにするため、シンボリックリンク(ショートカットのようなもの)を作成しておきます。

jpegtran(非可逆圧縮)をmozjpegtranとしてシンボリックリンクを作成します。

$ sudo ln -s /opt/mozjpeg/bin/jpegtran /usr/local/bin/mozjpegtran

cjpeg(可逆圧縮)をmozcjpegとしてシンボリックリンクを作成します。

$ sudo ln -s /opt/mozjpeg/bin/cjpeg /usr/local/bin/mozcjpeg

使用方法

以下は簡単な使用方法です。

詳しい使い方はhttps://github.com/mozilla/mozjpeg/blob/master/usage.txtに記述されています。

// 非可逆圧縮
$ sudo ln -s /opt/mozjpeg/bin/jpegtran /usr/local/bin/mozjpegtran

// -copy noneは内部情報削除。 -outfileの後が圧縮後ファイルなので注意(左:圧縮後ファイル 右:圧縮するファイル)。
mozjpegtran -optimise -copy none -outfile /var/www/example.com/gazou-comp.jpg /var/www/example.com/gazou.jpg


// 可逆圧縮
$ sudo ln -s /opt/mozjpeg/bin/cjpeg /usr/local/bin/mozcjpeg

// -qualityの後の数値は品質を表す。
mozcjpeg -quality 80 /var/www/example.com/gazou.jpg > /var/www/example.com/gazou-comp.jpg

OptiPNG

OptiPNGはPNG用のエンコーダの一つです。

OptiPNGは優秀なエンコーダで、サイズの大きいPNG画像でもかなりの圧縮率を誇っています。

更にOptiPNGは可逆圧縮ということもあり、画像が劣化して低画質になるということがありません。

なお、mozjpegはJPEG形式しか対応していないため、OptiPNGも導入しておくことが望ましいでしょう。

OptiPNGの導入

先程と同じく、まずtmpへ移動します。

$ cd /tmp

次にOptiPNGをダウンロードします(2016/6/20現在、最新版は0.7.6)。

$ wget http://downloads.sourceforge.net/project/optipng/OptiPNG/optipng-0.7.6/optipng-0.7.6.tar.gz

ダウンロードしたファイルを展開します。

$ tar xvf optipng-0.7.6.tar.gz

OptiPNGをインストールします。

$ cd optipng-0.7.6
$ ./configure
$ sudo make install

使用方法

以下は簡単な使用方法です。

詳しい使い方はhttp://optipng.sourceforge.net/optipng-0.7.6.man.pdfに記述されています。

// 通常圧縮
$ optipng /var/www/example.com/gazou.png

// 高度な圧縮
$ optipng -o7 /var/www/example.com/gazou.png

// 最高レベルの圧縮
$ optipng -o7 -zm1-9 /var/www/example.com/gazou.png

pngquant

pngquantはPNG用のエンコーダの一種です。

OptiPNGは可逆圧縮でしたがpngquantは非可逆圧縮となっており、より画像を圧縮したい人向けとなっています。

pngquantの導入

まずはpngquantに必要なパッケージであるlibpngをインストールします(2016/6/20現在、最新版は1.6.23)。

$ cd /tmp
$ wget -O libpng-1.6.23.tar.gz https://sourceforge.net/projects/libpng/files/libpng16/1.6.23/libpng-1.6.23.tar.gz/download
$ tar xvzf libpng-1.6.23.tar.gz
$ cd libpng-1.6.23
$ ./configure
$ sudo make install

次にpngquantを導入します(2016/6/20現在、最新版は2.7.1)。

$ cd /tmp
$ wget http://pngquant.org/pngquant-2.7.1-src.tar.gz
$ tar xvf pngquant-2.7.1-src.tar.gz
$ cd pngquant-2.7.1
$ ./configure
$ sudo make install
$ sudo ldconfig -v

使用方法

以下は簡単な使用方法です。

詳しい使い方はhttps://github.com/pornel/pngquantに記述されています。

// 非可逆圧縮(効果大・負荷中・品質65~80・レベル最大1~11レベル最小)
pngquant --ext .png --quality=65-80 -s1 --force /var/www/example.com/gazou.png

画像アップロードごとに自動圧縮を行う

以上で紹介したエンコーダは非常に便利ですが、これを毎回手動で行うのは非常に面倒です。

そのため、WordPressで画像をアップロードした際に自動で圧縮を行ってもらうよう設定します。

設定はWordPressの『functions.php』に記述します。

functions.php

// ※無駄に圧縮されるため、WordPress側の自動圧縮は無効化しておきましょう
// WPによる自動画像圧縮を無効
add_filter('jpeg_quality', function($arg){return 100;});
add_filter( 'wp_editor_set_quality', function($arg){return 100;});


// 圧縮率等は適宜変更して下さい

// 画像のアップロード後に画像を圧縮(可逆or非可逆)
function compress_images($metadata, $img_id){

	// 元画像のフルパス
	$org_path = get_attached_file( $img_id );

	// 画像のファイルタイプを取得
	$img_type = get_post_mime_type( $img_id );

	// ファイルタイプが [JPEG(JPG)] の場合
        if( $img_type == 'image/jpeg' ){

		// 元画像を圧縮 START

			//非可逆圧縮後に可逆圧縮(品質80パーセント)
			$output = shell_exec("mozcjpeg -quality 80 '$org_path' > '$org_path.jpg' && mozjpegtran -optimise -copy none -outfile '$org_path' '$org_path.jpg' && rm '$org_path.jpg'");

		// 元画像を圧縮 END

 		// 全てのサムネイルを圧縮
		foreach ( $metadata['sizes'] as $size => $value) {

    			// 全てのサムネイルのフルパスを取得
			$thumb_path = dirname($org_path).'/'.$value[ 'file' ];
 
			// 全てのサムネイルを非可逆圧縮後に可逆圧縮(品質80パーセント)
			$output = shell_exec("mozcjpeg -quality 80 '$thumb_path' > '$thumb_path.jpg' && mozjpegtran -optimise -copy none -outfile '$thumb_path' '$thumb_path.jpg' && rm '$thumb_path.jpg'");
			
		}
        }

	// ファイルタイプが [PNG] の場合
        if( $img_type == 'image/png' ){

		// 元画像を圧縮 START

			// 可逆圧縮(効果小)
			//$output = shell_exec("optipng '$org_path'");

			// 可逆圧縮(効果中)
			//$output = shell_exec("optipng -o7 '$org_path'");

			// 最大レベルの可逆圧縮(効果中~大・負荷大)
			//$output = shell_exec("optipng -o7 -zm1-9 '$org_path'");

			// 非可逆圧縮(効果大・負荷中・品質65~80・レベル最大1~11レベル最小)
			$output = shell_exec("pngquant --ext .png --quality=65-80 -s1 --force '$org_path'");

		// 元画像を圧縮 END


 		// ↓サーバの強度によって使用するタイプを選んで下さい↓

 		// 全てのサムネイルを圧縮
		foreach ( $metadata['sizes'] as $size => $value) {

    			// 全てのサムネイルのフルパスを取得
			$thumb_path = dirname($org_path).'/'.$value[ 'file' ];

			// 可逆圧縮(効果小)
			//$output = shell_exec("optipng '$thumb_path'");

			// 可逆圧縮(効果中)
			//$output = shell_exec("optipng -o7 '$thumb_path'");

			// 最大レベルの可逆圧縮(効果中~大・負荷大)
			//$output = shell_exec("optipng -o7 -zm1-9 '$thumb_path'");

			// 非可逆圧縮(効果大・負荷中・品質65~80・レベル最大1~11レベル最小)
			$output = shell_exec("pngquant --ext .png --quality=65-80 -s1 --force '$thumb_path'");


		}
        }

	return $metadata;

}
add_filter( 'wp_generate_attachment_metadata', 'compress_images', 10, 2 );

以上の設定を行うことで、アップロード時に自動で元画像および全てのサムネイル画像が圧縮されます。

次回はSSLの導入方法を紹介

今回の記事では、より効率的な画像の圧縮方法を紹介しました。

次回ではLets Encryptを使用してSSL(TLS)をウェブサイトに構築する方法を紹介します。

なお、公開された関連記事は以下より閲覧することが可能です。

シリーズ目次

記事内でのサンプルは『さくらVPS4G・Ubuntu14.04・Nginx・PHP7・MariaDB・Wordpress・+α』となっています。

記事の執筆時、参考となった情報はここのtxtで公開しています。

暗号通貨アドレス

寄付されたコインはサイト運営やコミュニティの発展のために使用されます。

Bitcoin:1NEh5GY6GyY3NZ3bY4ZUtu1CWhRcGhErwc

NEM:NDBEQJ-7XIF6P-46AST5-2JQVLP-JIJS43-VOY5L7-LWA5

アンテナサービス運営中

当サイトでは現在アンテナサービス(プリズムアンテナ)を運営しています。

様々なジャンルのサイト(200以上)を取り扱っているので、よろしければ暇つぶしにどうぞご利用下さい。

アンテナのジャンルについては『アンテナについて』をご覧下さい。