【画像】 ファイルの圧縮とサーバー 【CSS】

ADSLや光回線での接続の場合、その多くが通信容量無制限でインターネット接続できます。
(実際には、あまりにも回線に負担をかけたら、他の利用者の負担を減らすため、制限をかけられてしまいますが)

でも、スマートフォンで通信容量無制限でインターネット接続できるコースはまだまだ高く比較的安価な、通信容量を制限しているコースが人気です。

ですので、画像や CSSファイルや HTMLファイルの圧縮ができる場合は、できるだけ圧縮した方がお客さんのためになります。

また、表示速度も速くなりやすいです。
(サーバーで圧縮している場合サーバーのCPUの負荷が高まりますので、サーバー圧縮をした場合、必ず速くなるわけでもないとは思いますが)

圧縮の種類

圧縮には、手作業での圧縮と、サーバー側での自動圧縮の2種類があります。

手作業での圧縮では、画像加工ソフト自動改行消去ツールでの改行消去をします。



サーバーでの圧縮は、htaccess ファイルに圧縮コードを書いて、Apacheの機能で圧縮させます。



手間やメンテナンスを考えると、サーバーでの圧縮が便利です。
一々手作業で圧縮せずとも、サーバーの方で適当にやってくれるからです。

ちなみに、ヘテムル ではサーバーによるファイルの圧縮ができていたんですが、さくらのレンタルサーバ ではなぜかできなくなってしまいました。(´・_・`)

理由は不明です。
あれやこれや頑張ってみましたし、さくらのレンタルサーバーで使えそうな Apache のコードも試してみたんですがやっぱりダメでした。

設定が更新されて、さくらのレンタルサーバーでも圧縮できるようになったと言う話も見たのですが、試してみたところやはりダメでした。
(ひょっとして、WAFが入ってるとダメとか?)

ちなみに、サーバー移転直後も思ったんですが、さくらのレンタルサーバーは安くて優良なレンタルサーバーだとは思いますが、やっぱりヘテムルの方が色々と使いやすかったです。
(include や HTMLファイルをPHPファイル化対応させる時のコードや仕様が他所のレンタルサーバーとちょっと違って癖があるため)


【ついに完成】 さくらでもincludeをする方法

【実験結果】さくらでphpのincludeするための方法を詳しく解説

【php.cgi】さくらインターネットのインクルード実験の詳細 【htaccess】


ですので、さくらのレンタルサーバー独特 『 癖 』 を回避したいのであれば、ヘテムルの方が良いかもです。(;´∀`)

圧縮する場合は、htaccess ファイルに以下のように記述します。

# ファイル圧縮指定
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/php
AddOutputFilterByType DEFLATE text/htm
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE image/svg+xml

# ファイル圧縮指定(できるだけ手動で圧縮)
AddOutputFilterByType DEFLATE image/png
AddOutputFilterByType DEFLATE image/gif
AddOutputFilterByType DEFLATE image/jpg
AddOutputFilterByType DEFLATE image/jpeg
AddOutputFilterByType DEFLATE application/pdf
AddOutputFilterByType DEFLATE image/x-icon

サーバーで圧縮されているかどうか確認する方法

サーバーで圧縮されているかどうか確認するには、GooglePageSpeed Insightsを利用すると良いです。

ここでチェックすれば、まだ圧縮されておらず、圧縮したほうが良いデータがあれば指摘してもらえます。


PageSpeed Insights



どこまでサーバーで圧縮するのか?

サーバーでファイルを圧縮すると言うことは、圧縮の度にサーバーのCPUに負荷をかけます。

常時、CPUに強い負荷がかかっている場合、サーバーの利用を一部制限されてしまうこともありますので、CPUの負荷の状態がわかる場合は、CPUの状態を見ながら、圧縮するファイルを決めると無難かと思います。



CSSやテンプレートなど、恐らく1年ほどは更新は無いだろうと思われるファイルがある場合は、手動で圧縮してしまうとよいかもしれません。

また、画像ファイルはPhotoshopや無料の画像圧縮ツールを使って、最大限圧縮してから転送するのもありかと思います。


PhotoshopのWeb用画像の保存方法

1. メニューバーのファイルをクリックする
2. Web用に保存をクリックする

 ショートカットキーの Shift+Ctrl+Alt+Sキー でも保存できる

3. 保存するファイル形式を選ぶ

3. 保存する画質を選ぶ
   (高画質ほどファイルサイズが大きくなる)


次ページ

【レスポンシブで必須】 横並びと縦並びのスタイルをマスターする

前ページ

【高さを変える】リンクとリストのレスポンシブ化

広告