【画像】 ファイルの圧縮とサーバー 【CSS】
ADSLや光回線での接続の場合、その多くが通信容量無制限でインターネット接続できます。
(実際には、あまりにも回線に負担をかけたら、他の利用者の負担を減らすため、制限をかけられてしまいますが)
でも、スマートフォンで通信容量無制限でインターネット接続できるコースはまだまだ高く、比較的安価な、通信容量を制限しているコースが人気です。
ですので、画像や CSSファイルや HTMLファイルの圧縮ができる場合は、できるだけ圧縮した方がお客さんのためになります。
また、表示速度も速くなりやすいです。
(サーバーで圧縮している場合サーバーのCPUの負荷が高まりますので、サーバー圧縮をした場合、必ず速くなるわけでもないとは思いますが)
圧縮の種類
圧縮には、手作業での圧縮と、サーバー側での自動圧縮の2種類があります。
手作業での圧縮では、画像加工ソフトや自動改行消去ツールでの改行消去をします。
サーバーでの圧縮は、htaccess ファイルに圧縮コードを書いて、Apacheの機能で圧縮させます。
手間やメンテナンスを考えると、サーバーでの圧縮が便利です。
一々手作業で圧縮せずとも、サーバーの方で適当にやってくれるからです。
ちなみに、ヘテムル ではサーバーによるファイルの圧縮ができていたんですが、さくらのレンタルサーバ ではなぜかできなくなってしまいました。(´・_・`)
理由は不明です。
あれやこれや頑張ってみましたし、さくらのレンタルサーバーで使えそうな Apache のコードも試してみたんですがやっぱりダメでした。
設定が更新されて、さくらのレンタルサーバーでも圧縮できるようになったと言う話も見たのですが、試してみたところやはりダメでした。
(ひょっとして、WAFが入ってるとダメとか?)
ちなみに、サーバー移転直後も思ったんですが、さくらのレンタルサーバーは安くて優良なレンタルサーバーだとは思いますが、やっぱりヘテムルの方が色々と使いやすかったです。
(include や HTMLファイルをPHPファイル化対応させる時のコードや仕様が他所のレンタルサーバーとちょっと違って癖があるため)
ですので、さくらのレンタルサーバー独特の 『 癖 』 を回避したいのであれば、ヘテムルの方が良いかもです。(;´∀`)
圧縮する場合は、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
サーバーで圧縮されているかどうか確認する方法
サーバーで圧縮されているかどうか確認するには、GoogleのPageSpeed Insightsを利用すると良いです。
ここでチェックすれば、まだ圧縮されておらず、圧縮したほうが良いデータがあれば指摘してもらえます。
どこまでサーバーで圧縮するのか?
サーバーでファイルを圧縮すると言うことは、圧縮の度にサーバーのCPUに負荷をかけます。
常時、CPUに強い負荷がかかっている場合、サーバーの利用を一部制限されてしまうこともありますので、CPUの負荷の状態がわかる場合は、CPUの状態を見ながら、圧縮するファイルを決めると無難かと思います。
CSSやテンプレートなど、恐らく1年ほどは更新は無いだろうと思われるファイルがある場合は、手動で圧縮してしまうとよいかもしれません。
また、画像ファイルはPhotoshopや無料の画像圧縮ツールを使って、最大限圧縮してから転送するのもありかと思います。
PhotoshopのWeb用画像の保存方法
1. メニューバーのファイルをクリックする
2. Web用に保存をクリックする
※ ショートカットキーの Shift+Ctrl+Alt+Sキー でも保存できる
3. 保存するファイル形式を選ぶ
3. 保存する画質を選ぶ
(高画質ほどファイルサイズが大きくなる)
次ページ
前ページ
広告
- 【スマホでもPCでもOK】レスポンシブ・ウェブデザインとは
- 【CSS3編】 サルでもわかるレスポンシブの基本の基本
- 【HTML5編】 サルでもわかるレスポンシブの基本の基本
- 【PC用】レスポンシブでレイアウトを組み替える【スマホ用】
- 【media screen】 IE9以下のレスポンシブ化とCSSの設定 【CSS】
- 【リダイレクト】スマートフォンとタブレットとPCで表示する方法
- 【ロゴ】 タイトル部分のレスポンシブ化 【ヘッダー】
- 【横幅を合わせて表示する】 画像をレスポンシブ化する方法
- 【h1】 レスポンシブの見出しのスタイル 【h3】
- 【高さを変える】リンクとリストのレスポンシブ化
- 【画像】 ファイルの圧縮とサーバー 【CSS】
- 【レスポンシブで必須】 横並びと縦並びのスタイルをマスターする
- 【誤操作&誤表示防止】 レスポンシブ対応で気をつけた方が良いこと
- 【無料で使える】 レスポンシブデザインをチェックするためのツール
- 【PC用】レスポンシブでレイアウトを組み替える【スマホ用】
- 【レスポンシブ化の準備】忍者メールフォームの作成&設定方法
- 【CSS】 忍者メールフォームをレスポンシブ化する方法 【HTML】
- IE9以下のブラウザでHTML5とCSS3を対応させる