もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化

もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化

外人の少女がシャボン玉を吹いている画像

 

「きれいな画像でとんでゆけ・・」

 

サイト訪問者の方々に、自分の記事を見ていただくにあたり「きれいな画像」で気持ちよく見ていただきたいと考えるのは自然なことです。でも、気づかないうちに「きれいな画像」=「重たいファイル」だったりすることがあるので、なかなか開かないページに、サイトを訪問された方はいらいらしているかもしれません。きれいで早いページを作る技術をご紹介しますので、ぜひ参考にして下さい。

 

 

 

画像圧縮に詳しくなる もくじ

 

 

 

○私が使う画像圧縮ソフトは「これ」に決めた!
  ・GIMP2
  ・JPEGmini
  ・Caesium
  ・縮小専用AIR
  ・TinyPNG

 

○「画像圧縮」で、せっかくなら知っておきたい基礎知識
  ・「基本的な最適化」と「高度な最適化」。ロスレス圧縮とは?
  ・ファイル形式の特徴を理解するとわかりやすい使い分け
   「JPEG」「PNG」「GIF」はどう使い分ける?

 

 

 

私が使う画像圧縮ソフトは「これ」に決めた!

 

 

 

さまざまな画像圧縮ソフトがありますが、
評価の高いものをいくつかピックアップして、
画像の比較をしてみました。

 

 

 

比較の方法

 

 

 

○オリジナル画像を圧縮率が指定できるものは50%に圧縮しました
○圧縮した画像の一部分を切り取り表示しました

 

 

<オリジナル画像>

 

外人の女の子がシャボン玉を吹いている画像。
※クリックすると大きな画像が見れます

 

 

オリジナル画像

GIMP2

外人の女の子がシャボン玉を吹いている画像。オリジナル

オリジナル画像100% JPEGファイル
ファイルサイズ:720KB

外人の女の子がシャボン玉を吹いている画像。GIMP

圧縮率50% JPEGファイル
ファイルサイズ:112KB

JPEGmini

Caesium

外人の女の子がシャボン玉を吹いている画像。JPEGmini

圧縮率-% JPEGファイル
ファイルサイズ:182KB

外人の女の子がシャボン玉を吹いている画像。Caesium

圧縮率50% JPEGファイル
ファイルサイズ:124KB

縮小専用AIR

TinyPNG

外人の女の子がシャボン玉を吹いている画像。縮小専用AIR

圧縮率50% JPEGファイル
ファイルサイズ:124KB

外人の女の子がシャボン玉を吹いている画像。TinyPNG

圧縮率59% PNGファイル
ファイルサイズ:796KB

※ファイルサイズは写真全体のファイルサイズを表示しています。
※PNGファイルのオリジナル画像のサイズは1511KBです

 

 

どうですか?

 

50%ぐらいの圧縮ではほとんど
オリジナル画像との見分けが
つかないのに、大幅にファイル
サイズを減らすことができています

 

また、どのソフトを使っても画質に
大きな違いはないというのも私の
結論です。

 

ただし・・です。

 

「画像圧縮ソフト」とひとくくりに
比較すればいいのかといえば
そうではないと思います。

 

実際に使ってみてはじめて
わかったのですが、ご紹介した
ソフトは使い勝手や、使い方
が全く違うのです。

 

圧縮率とか、画像の見た目に
パッと見で大きな違いがないため
そういう部分で検討したほうが
いいのかな?と思っています。

 

 

 

GIMP2

 

 

 

GIMP 2.8
GIMP2のトップページ

 

 

対応できるファイル形式:JPEG/GIF/PNG/TIFF/PSD

 

「GIMP」は多機能な「画像編集・加工ソフト」
です。ダウンロードも無料です。

 

使える機能も多いため、GIMPを入れておけば
たいていの画像加工がこれだけで対応できます

 

日本語版の使用の手引きもありますし、使い方を
解説したサイトもたくさんあります。

 

 

   公式の「使用の手引き」もあります→使用のてびき : 2.8-Beta

 

 

GIMP2の入力ページ

 

 

肝心な画像圧縮についてですが、
画像を加工した後、最後に画像を
保存するときに、「品質」調整画面
が出てきます。そこでパラメーターを
ドラッグして画質の調整をします。

 

 

GIMP2の入力ページ

 

 

 

圧縮率ごとの画像を比較

 

 

 

圧縮率は1%きざみで圧縮できます。

 

 

オリジナル画像

品質:100

 

ファイルサイズ:65KB

gimpの画像比較100%
品質:80

 

ファイルサイズ:14KB

gimpの画像比較80%
品質:60

 

ファイルサイズ:9KB

gimpの画像比較60%
品質:40

 

ファイルサイズ:7KB

gimpの画像比較40%
品質:20

 

ファイルサイズ:5KB

gimpの画像比較20%

 

 

品質を落とすと画像劣化するのが
わかりますが、品質80ぐらいでは
オリジナルとの違いがあまりわからない
水準です。

 

また品質80でも、相当な圧縮効果
がありますが、40,20となると画像劣化
の割に圧縮効果がなくなります。

 

見栄えが悪くならない程度の圧縮で
十分な圧縮効果があることがわかります。

 

 

画像圧縮以外でも多機能に使える
便利なソフトですのでイチオシです。

 

  →GIMP 2.8

 

 

 

JPEGmini

 

 

 

「JPEGmini」は、JPEG 画像を圧縮する
オンラインサービスです。

 

 

JPEGminiのサイトを開き、圧縮したい

 

画像を下のようにドラッグするだけで、
簡単に画像圧縮できます。

 

 

JPEGminiの入力ページ

 

 

圧縮が完了すると出来上がりを
確認できます。

 

画面上で「オリジナル画像」と
「圧縮後画像」を比較することが
できます。

 

圧縮後も画像にほとんど変化が
ないことがわかると思います。

 

 

jpegminiのトップページ

 

 

圧縮した画像をダウンロードしたら
圧縮した画像を手に入れることが
できます。

 

 

  →JPEGmini

 

 

 

TinyPNG

 

 

 

「JPEGmini」は、JPEG 画像を圧縮する
オンラインサービスでしたが、PNGファイル
のオンラインサービスついてはTinyPNG
いいと思います。

 

 

tinypngのページ

 

 

使い方は「JPEGmini」と同じです。

 

単に圧縮だけしたい時には、手軽な
サービスですよね。

 

 

  →TinyPNG

 

 

 

Caesium

 

 

 

「Caesium」と次にご紹介する
「縮小専用AIR」は無料ソフトを
ダウンロードして使うタイプの
サービスです。

 

「Caesium」の使い方はカンタン!

 

画面を開いて「フォルダを開く」または
「ファイルの追加」ボタンを押すと、
画面上に圧縮対象のファイルが
掲示されます。

 

どれかファイルを選択して、「品質」を
決めて、「プレビュー」を押すと、下の
画像のように「圧縮前」と「圧縮後」
の画像が並んで表示されます。

 

圧縮率と新たなファイルサイズも
圧縮作業前に確認できます。

 

 

Caesiumの入力画面の画像
※クリックすると大きな画像が見れます

 

 

出来上がりを確認しながら使えるので
便利なソフトですよ。

 

大量のファイルをまとめて処理することも
可能ですので、多くのファイルを圧縮する
時には便利なソフトです。

 

圧縮したファイルは出力するフォルダを
指定することもできますので、オリジナル
ファイルと分けて管理することも容易です。

 

ダウンロードはこちらのリンクから
して下さい。

 

  →Caesium

 

 

caesiumのダウンロードページ

 

 

出力できるファイル形式:JPEG/PNG/BNP

 

 

 

縮小専用AIR

 

 

 

画像を縮小することに特化した
とてもシンプルなソフトです。

 

 

縮小専用AIRの入力画面の画像

 

 

「画像サイズ」「画像効果」「保存先」
「ファイルサイズ」or「量子化率」を選択
したあとに、画像をドラックしてくるだけの
単純な操作です。

 

ダウンロードはこちらからどうぞ

 

  →縮小専用AIR

 

 

縮小専用AIRのダウンロードページ

 

 

対応できるファイル形式:JPEG・PNG・GIF

 

 

 

5種類のソフトをご紹介しましたが、
どれか一つに使うソフトを絞るという
ものではなく、「使い方」によって
便利なソフトとそうでないものが
あるということです。

 

 

 

「画像圧縮」で、せっかくなら知っておきたい基礎知識

 

 

 

今回画像圧縮を手がけようと考えた
きっかけはgoogleのPageSpeed Insights
で指摘を受けたため、画像圧縮をして
「サイトの高速化」をしようと考えたからです。

 

画像圧縮(最適化)についてはgoogle
から方向性が示してあります。

 

 

画像を最適化する
PageSpeed Insightsの画像
※google PageSpeed Insightsより抜粋
※クリックすると大きな画像が見れます

 

 

要約すると

 

○「基本的な最適化」と「高度な最適化」がある

 

  「基本的な最適化」は不要なスペースの削除、
  色深度の最小許容レベルへの低減、画像の
  コメントの削除、適切なフォーマットでの画像の保存など

 

 「高度な最適化」はJPEG や PNG ファイルのロスレス圧縮

 

○BMP や TIFF は使用しない。

 

○写真スタイルの画像にはすべて JPG を使用します。

 

○PNG はほとんどの場合、GIF より優れているが、
 非常に小さなグラフィックや単純なグラフィック
 (10x10 ピクセル未満、3 色未満のカラー
 パレットなど)、アニメーションを含む画像には、
 GIF を使用します。

 

 

 

「基本的な最適化」と「高度な最適化」

 

 

 

「基本的な最適化」は、冒頭でご紹介した
画像圧縮ソフトの使用で解決できます。

 

PageSpeed Insightsでは「GIMP」が例示してありました

 

「高度な最適化」と書いてあり難しそうな
印象を与えますが、意外と作業することは
少なくて、簡単なものです。

 

ところで「ロスレス圧縮」とは何か?と言いますと

 

 

<ロスレス圧縮とは・・>

 

ロスレス圧縮とは、圧縮前のデータと圧縮処理後のデータが等しくなる圧縮方式で「可逆圧縮」ともいいます。対となる言葉に「非可逆圧縮」がありますが、これは圧縮前のデータと圧縮後のデータが異なる方法です。人が気づきにくい部分のデータを削除していくことで劣化を目立たなくして、情報量を減らす方法です。ご紹介した画像圧縮ソフトは「非可逆圧縮」を行っているということになります。

 

 

windowsでのロスレス圧縮の方法をご説明します

 

ロスレス圧縮してくれるソフトをダウン
ロード&インストールして、ソフトの上まで
変換したい画像ファイルをドラッグする
だけでOKです。

 

PageSpeed Insightsでは、JPEGは
「jpegoptim」。PNGは「OptiPNG」を
薦めていましたので、その通りにしました。

 

インストールは圧縮ファイルの解凍で
説明してますのでzipファイルをダウン
ロードしてもらったほうがいいです。

 

 

 

jpegoptim

 

 

 

ここからダウンロードします

 

  →jpegoptim

 

 

jpegoptimのダウンロード場所の表示

 

 

 

OptiPNG

 

 

 

ここからダウンロードします

 

  →OptiPNG

 

 

optipngのダウンロード場所の表示

 

 

 

jpegoptim,OptiPNGのインストール

 

 

 

図のように、ダウンロードしたzipファイル
を解凍ソフトにドラッグするだけです。

 

 

jpegoptim,optipngの解凍

 

(解凍されたフォルダはデスクトップに展開されます)

 

 

私は解凍されたフォルダから
jpegoptim,OptiPNGを取り出して
デスクトップに配置しました。

 

 

jpegoptim,optipngの使い方

 

 

圧縮したいファイルをそれぞれ
JPEGファイルは「jpegoptim」へ
PNGファイルは「OptiPNG」へ
ドラッグ&ドロップすると圧縮して
くれます。

 

↓こんな感じで圧縮してくれました

 

 

jpegoptimでロスレス圧縮した結果
※クリックすると大きな画像が見れます

 

 

 

ファイル形式の特徴を理解するとわかりやすい使い分け

 

 

 

なぜ写真がJPEG(JPGファイル)なのか?
PNGファイルではなぜいけないのか、よく
わかるサイトがありましたのでご紹介します

 

 

  →GIFとJPGどう違う - そしてPNGは?

 

 

    「独立行政法人産業技術総合研究所」のサイトです。
    「理化学研究所」と規模が匹敵する組織といえばわかりやすいかも。
    たった1ページ分の説明で図解説明があり、わかりやすいです。
    「へぇー。そうだったんだ」と感心できる内容でした。

 

 

要は、色がはっきりしていて単純な
デザインの場合はPNGやGIFが
きれいに保存できて、容量も小さい。

 

しかし、あいまいな境界の写真の
ような図柄であれば、JPGのほうが
容量が小さくて済む。というもの。

 

だから、写真にはJPGを使用する。
GIFには特許と色数の制限がある。
PNGはGIFの長所に加えフルカラー
使用可能で使い勝手が良い

 

・・ということ。

 

今まで何気なしに使っていたものだなと思いました。

 

 

 

今回の作業の結果

 

 

 

思ったほどスコアは伸びませんでした・・

 

 

before
ページスピード測定結果の画像7行入力圧縮後
after
画像圧縮後のスコア

 

 

ページスピードは作業の甲斐なく
逆に落ちてしまいました。

 

 

ページスピードの推移

 

 

ページサイズは画像圧縮効果で
軽くなっています。

 

 

ページサイズの推移

 

 

スコアはあまり変わっていません。

 

 

ページスコアの推移

 

 

やや腑に落ちない感じですが、
一歩改善!ということで善しと
したいと思います。

 

記事作成の過程で、いろいろ
勉強できたことの方が収穫かも・・

 

 

※その他のPageSpeed Insightsの
「サイトの高速化」改善方法についても
記事にしてます。興味がある方はどうぞ。

 

 

  →【キャッシュの利用】たった1分で劇的に改善!ページスピード高速化の方法
  →【ファイルの圧縮】3行入力するだけ!圧縮によるサイト高速化

 

 

 

 

 

 

 

※もし「よかった」と思う記事がありましたら、あなたが使っておられる
 SNSで当サイトをご紹介ください。どうぞよろしくお願いします。

 

 

よく読まれる関連ページ

たった1分で劇的に改善!ページスピード高速化の方法へのリンク画像

たった1分で劇的に改善!ページスピード高速化の方法

3行入力するだけ!圧縮によるサイト高速化へのリンク画像

3行入力するだけ!圧縮によるサイト高速化

Googleが伝える、適切な「alt属性の入力」のススメへのリンク画像

Googleが伝える、適切な「alt属性の入力」のススメ

webページの画像を取り込む【おすすめ無料ソフト】へのリンク画像

webページの画像を取り込む【おすすめ無料ソフト】


Top相互リンクをいただいているサイトです。

簡単無料ホームページ

簡単に無料でホームページ作成。掲示板、ブログ、アルバム、携帯サイト、メールマガジン、お問合せフォーム、リンク集等の便利機能付き。商用利用もOKです



もっと早く導入すればよかった。画像圧縮ソフトによるサイト高速化関連ページ

絶対に間違いのないSEO最新マニュアル
全13工程でサイト改善!「検索エンジン最適化スターターガイド」
3秒でチェック!!形式的SEO対策をあなたにこっそり教えます
アクセスアップのためにやっちゃった失敗をお教えします
被リンクについて最低限知っておくべき10のポイント
5分でわかる!具体的相互リンクの手順
サイト公開するなら、最低限canonicalタグを使いこなせ!
超簡単!重複コンテンツ整理のための.htaccess設定方法
Googleが伝える、適切な「alt属性の入力」のススメ
あなたは外部Javascriptを利用する目的を知っていますか?
よく考えられた「descriptionメタタグ」は訪問者を誘(いざな)う
301リダイレクトで個別ページのURLを整理できる
みんなに伝えたい!正しいサイトマップの「作り方」「送り方」
クリック率アップ!リッチスニペット導入でライバルサイトに差をつけろ
パンくずリストをリッチスニペットで表現してみた!
お手軽にリッチスニペット!構造化マークアップ支援ツール
進化しているデータハイライターを、あなたにもぜひ体験してほしい
とにかく目立つ!リッチスニペット著者情報の作り方
レシピを出すなら試したい!リッチスニペットを使った目立つ検索表示
rel=”nofollow”使いこなし術を解説!正しい使い方をご存知?
これで安心!URLエラーの大半は簡単に処理できる。修正方法を解説
エラーページを処理する5つの方法
SEOに効果あり!404エラーページのカスタマイズ
クロールの効率性を追求!robots.txt
よくわかる!noindexメタタグの正しい使い方
たった1分で劇的に改善!ページスピード高速化の方法
3行入力するだけ!誰でもできる圧縮によるサイト高速化
正しい対処の仕方をご存知ですか?放置できないソフト404エラー
鳥肌が立つほどカンタン!1クリックで終わる表示速度高速化
「誘導ページ」でペナルティを受けないための5つのチェックポイント
あなたのサイトは「モバイルフレンドリー」ですか?
rel="canonical"をもっともっと知りたい!
ホームページ、ブログの削除のしかた

 
ブログパーツ
トップページ 目次 サイト公開までのプロセス プロフィール お問い合わせ