2014年8月23日土曜日

ブログの画像は圧縮して使うべし

今回もブログに関する内容です。


1.いまさらだけど気がつきませんでした

前回の投稿からブログについて勉強しています。その中で気になったのが、画像を掲載するときに圧縮すべきという点です。
圧縮とは画像ファイルのサイズを小さくするということです。例えば100kバイトのファイルを50kバイトに変換することを言います。
もちろん画像ファイルの解像度そのものを小さくする場合もあります。

画像ファイルを圧縮するメリットとして以下のことがあります。
・ページの表示を速くする
・使用できるサーバーの容量を節約する

私はこのブログの他に、「White Wolf with Golden Eyes」という、PCゲームのプレイ日記のブログをやっています。
(更新が止まっていますが、そのうち再開するつもりです。)
そのゲームのブログでは、スクリーンショットを圧縮せずにそのままのサイズ(ディスプレイと同じ解像度)で掲載しています。
どうやらこれは良くないみたいですね。

私の環境(PC)では全然気にならないのですが、環境によっては表示に時間がかかるのかもしれません。
それに、Bloggerで掲載できる画像ファイルの容量にも上限があります。


2.ブログに最適な画像サイズって?

では、画像をリサイズする場合に、どれくらいの大きさにすれば良いのでしょう?

やはりスマートフォンで閲覧してもらう前提で考えた方が良いですね。

iphone5sの解像度は、横640×縦1,136ピクセルだそうです。

ちなみに私はいまだにガラケーですが、カメラの画像サイズの設定をみると、VGA(横480×縦640ピクセル)がブログに最適なサイズだそうです。

ということで、ブログに使う画像は、横480~640ピクセルぐらいが良いかと思います。


3.どんなソフトがあるの?

というわけで、ブログの画像を改善したいと思います。

じゃあ、画像の圧縮に何を使えば良いのか?
できれば劣化が少ないものが良いです。
それと複数の画像を一括で処理できないと困ります。

そこで参考にしたのが以下のサイト。
画像サイズ圧縮ソフト - k本的に無料ソフト・フリーソフト
画質の劣化を抑えつつ画像を圧縮するオンラインツールのまとめ - NAVER まとめ

この中から、Caesium、Optimizilla、mozjpegを使ってみようと思います。


4.実際に使ってみた

1)Caesium
それでは、Caesiumをダウンロード。
ポータブル版とインストール版がありますが、私はインストール版を使うことにしました。
インストール版は特にいじることなく日本語になりました。

圧縮したい画像をドラッグアンドドロップ、操作画面の下のところで品質、リサイズする大きさ、保存場所と保存時に末尾につけるファイル名を決定します。
品質とリサイズについては、画像ファイル一つずつセットする必要があります。
「圧縮開始」のボタンを押すと圧縮できます。




試しに209Kバイトの画像(1920×1200ピクセル)を、480×300ピクセル(品質80)に圧縮してみると16Kバイトになりました。93パーセントのサイズ減です。

2)Optimizilla
次にOptimizillaを使ってみます。

「Drop Your Files Here」のところに画像ファイルをドラッグアンドドロップすると、圧縮前と圧縮後の画像が表示されます。


同じく16Kバイトの画像(480×300ピクセル)を、圧縮してみると15Kバイトになりました。5パーセントのサイズです。

「SAVE」のボタンにカーソルを合わせて、右クリックから名前を付けて保存します。(私の環境だと、ダブルクリックで保存すると、保存場所が選べないのです。)

ファイルの保存する際のファイル名は、デフォルトでは元ファイルの末尾に「min」が付いたものになります。

3)mozjpeg
mozjpegも試してみました。
操作方法はOptimizillaとほぼ同じです。


一つ違いがあるのが保存する際のファイル名です。
元ファイルとは全然違う名前で保存しようとするので、どのファイルを圧縮したものかが分からなくなってしまいます。きちんと管理が必要ですね。

プレビューを見ずにだいたいどんな画像か検討ついた方がいいので、私の場合はOptimizillaの方が使い勝手がよいです。
でも、Caesiumだけでもいいかな。

というわけで、これからブログで画像を使う場合は圧縮してあげていこうと思います。
さて、今までのブログの画像を見直したほうがいいのかな?
ちょっとめんどくさい。

(関連記事)

【Bloggerいじり】ブログの画像の表示サイズを調整してみる


0 件のコメント:

コメントを投稿