mod_pagespeedはGoogleが開発しているページ高速化のためのWebサーバ用プラグインですが、使用すると画像の画質が悪くなってしまう時の対処法。
前述のとおりmod_pagespeedはGoogleが開発しているページ高速化プログラインで、ApacheプラグインやNginxプログラインといった使いやすい形で配布されています。
HTMLのコードの改行などの削除から画像データの埋め込み、CSS Sprite作成、Javascriptと連携して画像の遅延読み込みなどをやってくれる優れものです。
https://code.google.com/p/modpagespeed/
詳しい使い方は省略しますがApacheの場合、設定に以下のように書くとフィルターを適用することができます。
ModPagespeedEnableFilters lazyload_images,sprite_images,defer_javascript
lazyload_imagesは遅延読み込み(最初に空白の画像を読み込ませて後からJavascriptで読み込む)
sprite_imagesはCSS Spriteを自動的に生成します
defer_javascriptはJavascriptの実行をHTMLがロードされるまで遅延させます
この設定でサイトを表示してみると画像が以下のようになってしまいました。
設定前
設定後
これはひどいです…JPEG特有のノイズが出てしまっています。
これの原因なんですが、いろんなフィルタをオフにしてみましたが結論として画像関連(lazyload_imagesでもsprite_imagesでも)をPagespeedで扱おうとするとPagespeed側で圧縮をかけるようです。
解決方法として画像圧縮時の圧縮率を設定で変えることができます。
ModPagespeedImageRecompressionQuality 100
デフォルトだと85になっています。
ちなみに…
画像関連のmod_pagespeedについて調べている記事がサイバーエージェントにありました。
mod_pagespeedの概要と導入について
http://www.cyberagent.co.jp/recruit/techreport/report/id=7992
それにしてもmod_pagespeed関連のサイト少ないですね…
Pagespeedと調べると別の方が出てきてしまいますし…
