アニメ.エ口ゲーなどの感想が多いです。 ↓メニューバーです

TOP > ブログまわりを快適にするよ! > 画像を圧縮してページの表示速度を改善しよう!イメージ品質を落とさず最大52%も軽量化できる!

    assyuku karukus   
     

    画像を多く使ってるサイトは、そのせいでページ表示が遅れがちです。あまりにも遅く重いサイトは、読者が逃げてしまうので注意が必要です。

    そこで画像を圧縮して、サイトの軽量化をはかりましょう。画像一枚一枚が軽くなればその分ページの表示がぐぐんと速くなりますから。


    もちろん画像の品質を落としませんよ!

     

     

     

    圧縮ソフトCaesiumを使って、画像をスリムダウン

     

    caesuum_s_cads


    わたしも愛用している「Caesium」というフリーソフトを使って画像をスリムダウンしていこうと思います。


    Caesiumの特徴は、
    ・BMP、PNG、JPG形式を圧縮できるが、圧縮後はすべてjpg形式になる。

    ・圧縮品質を100~0で選べる。 (ただ事実上、圧縮品質80より上は逆に画像サイズが大きくなることが多いので使いません)

    ・複数のイメージを一括処理できる。


    導入しちゃえばドラッグ&ドロップで画像を選んで、圧縮ボタンを押すだけなので簡単です。
    (もし「フリーソフト導入とかメンドクサイ、一枚だけ圧縮したい」っていう人は「JPEGmini」Webサービスがあるのでこちらでどうぞ)



    圧縮後も、見た目はキレイなまま!

     

    以下の写真はiphone4で撮ったものです。
    元データの解像度は2592×1932、形式はJPEG。

     

    それを解像度1200にリサイズし、Caesiumで圧縮しました。圧縮品質は80。「-○○%」というのは、元データからどれくらい圧縮できたかの値です。


     

    余談ですが、写真は三重県に旅行に行った時のものです。「半分の月がのぼる空」巡りしに行ったときのものですな(・ω・。)ハンハン

     

    207KB

    iseise

     

     

    ↓↓↓↓圧縮後↓↓↓↓

     

    138KB [-34%]

    ise ni itte (1)

    ※クリックで原寸大

     

    圧縮したことで若干色が変わりました。でも問題ないですよね? パッと見全然わかりません。

     

     

     

     

    271KB

    iseise (1)

     

     

    ↓↓↓↓圧縮後↓↓↓↓

     

    183KB [-33%]

    ise ni itte

    ※クリックで原寸大 

    拡大率を200%くらいにして目をこらさないと違いが解らないレベルですね。

     

     

     

    402KB

    iseise (3)

     

     

    ↓↓↓↓圧縮後↓↓↓↓

     

     

    270KB [-33%]

    ise ni itte (2)

    ※クリックで原寸大


    わたしの肉眼じゃ、違いなんてを見つけられないッ/(^o^)\
    というかiPhone4のカメラ、意外に頑張ってます。晴れた日に撮るとここまで違うのか。

     

     

    それではCaesiumを導入してみましょう

     

    Caesium - Downloadに行ってソフトをDownloadします。

    システム条件はWindowsXP、VISTA、7で使えるので、おそらく問題はないと思います。

    caesuum_ssetumei2_cads

     

    あとは、ダウンロードしたEXEファイルを解凍して起動するだけです。



    起動

     

    では圧縮したい画像を、Caesiumに突っ込みます。

    cassowa_cads

     

    圧縮品質のバーをぐりぐりと動かして、出力先を選んだら圧縮ボタンを押して完了です。

     

     

     

     

     

    おまけ:圧縮品質のギリギリを攻めてみる

     

    Caesiumで写真の品質を落とさずに、どれくらい圧縮できるか実験してみます。圧縮品質を80をはじめとし、70~1と下げていきます。

     

     

    まずは元データ。

    389KB  元データ

    iseise (4)

     

     

    元データの拡大画像。

    iseise (4)

    圧縮品質80 :262KB [-33%]

    iseise (4)80

    拡大すると違いが少しわかりますね。元データのほうがコントラストが高いです、黒が黒で白が白となってます。

    大して圧縮品質80では、黒が薄くなり白が飛んじゃってますね。
    ディティール(細部)はまだ失われてません。

     


    圧縮品質70 :188KB [-52%]

    iseise (4)70

    よーく見ると写真のディティールがつぶれてしまってます。


    圧縮品質60 :162KB [-59%] iseise (4)60

    ノイズが若干増えてきました。

     


    圧縮品質50 :138KB [-65%] iseise (4)50

    圧縮品質50までくると、ノイズがだいぶ目立ってきました。竹の切り口部分とか顕著です。

     


    圧縮品質40 :119KB [-70%]

    iseise (4)40

    圧縮品質30 :102KB [-74%] iseise (4)30

    圧縮品質40~30は画質は気にしない、サイズを落としたい人向けですね。実用ギリギリラインです。

     

     

     

    圧縮品質20 :80KB [-79%] iseise (4)20

    圧縮品質20までくると、シャギってますし、ブロックノイズが遠めでもわかります。ここまで来るとサイト上で、使いたくはならないかなー。

     

     

     

    圧縮品質10 :51KB [-87%]

    iseise (4)10

    圧縮品質1 :23KB [-94%]

    iseise (4)1

     

    こいつあー論外ですね(・。・;

     

    実験結果。

     

    画質重視なら圧縮品質70[-52%]を選んで、画像サイズ重視なら圧縮品質40[-70%]で選べばいいと思います。

     

    まとめ

    ・Caesiumを使うことで、画像の質を落とさずサイズを60%以上減らすことが出来る。

    ・画像一枚一枚を軽くすれば、ページ表示が改善するのでユーザビリティもUP!

     

    簡単なのでぜひ使ってみてください。



    ● 記事を共有する


    よく読まれている新ブログの記事。

















トラバ














         template by SEO