もみじろぐ

とある男の、心のほんの一部

画像の圧縮と画像形式についてまとめてみた

みんな!画像の圧縮しないとサイトとして致命的だよ!!

特に最近はほとんどの人がスマホからアクセスするから、見てくれる人がいなくなるよ!

だって画像が重いほど読み込みが遅くなるんだもん!!

f:id:momijitan:20160917000852j:plain
あーこの糞ブログの読み込み遅いわーありえねーまじムカつくんだけどー

圧縮とはなんぞや

そもそも「圧縮」ってなんだ…?

以前俺は「ブログに貼る画像のちょうどいい大きさ」に興味を持ちまして、トリミングについて調べました。

そこで今回のテーマ、画像の圧縮という概念にぶつかり、「え?圧縮?なにそれ?知っとかないとやばいやつ?!」ってなったのです。

だいぶ時間がかかってしまいましたが、とりあえず俺の中で説明できるだけの知識がまとまってたので報告しますね。

圧縮とは余分を取り除くこと

「情報の余分な部分(冗長性なんて言ったりします)、なくなったところで人がほぼ知覚できない部分を取り除いて、データ量を減らすこと」

これが圧縮です。

基本的に削っても問題ないデータを削っていくものなので、画像だとパっと見「あっこれは圧縮済みだな!」とか分かりません。

もちろん何重にも圧縮かけたら分かるけどね

なので、広い意味で、トリミングも圧縮に含まれます。*1


実は普段みんな圧縮に触れている

みなさん、SNS使ってますよね?

少なくともTwitterFacebookは使ってるはず。

実はSNSにアップロードするその写真、圧縮されてるんです!

f:id:momijitan:20160917005047j:plain
な…なんだってーーー!!


そうなんです、特にスマホで撮影した写真とかって結構重いので、そのままのサイズで投稿しちゃうとSNSのサーバーに負荷をかけちゃうんですよ。

だって世界中のあちこちから一日何千万枚(もっとかな?)と写真がアップロードされてるんですよ?!そんなん普通に考えてパンクするわ!

そりゃあSNSも「申し訳ないけど勝手に圧縮させてもらいますね」ってなりますわ。

てなわけで皆さんはSNSに写真をアップロードするとき、知らず知らずのうちに圧縮を体験してるんです。


参考記事
2016年版 Twitterに高画質な画像をアップする方法【透過PNG】:どMなキョンのブロマガ - ブロマガ

Facebookにシェアする画像を高画質に保つ方法 | ライフハッカー[日本版]


可逆圧縮不可逆圧縮

ちょっと専門的な話をすると、圧縮には二種類あって

  • 可逆(逆にすることが可能)、圧縮しても元のデータに完全に戻せる圧縮。
  • 不可逆(逆にすることが不可能)、一度圧縮したら完全には元に戻せない圧縮。

があります。

そもそも「余分なもの」を取り除いたんだから、なんで元に戻す必要あんだよ
とか思っちゃうんですけど、

例えば、ファイルの圧縮形式として有名な「ZIP」なんかは可逆圧縮です。

テレビ番組の方じゃないからね?!?!*2


ファイル圧縮というのは、画像の圧縮とは意味が少し違って、データの転送や蓄積するために一時的に軽くするだけであって、元に戻すことを想定しています。

そう、ご存知ZIPなどの圧縮されたデータは「解凍する」という作業が必要になります。

可逆圧縮なんで解凍、元に戻せばしっかり元通りです。
逆にデータに欠損あったら困っちゃいますよね。

f:id:momijitan:20160910043942j:plain
やっちまった…

一方、画像(特に写真)の圧縮はそんな元に戻す前提のファイル圧縮とは違って、単純に「軽く」したいだけなんで不可逆なことが多いッス。


画像のファイル形式

圧縮がうんぬん…と語るには一応画像のファイル形式に触れておかないとね。サクッと紹介。

ネットで主に出回る画像形式は3種類しかありません。

JPEG(ジェイペグ)

写真、デジカメとかスマホで撮影した写真はほぼ間違いなくコレ。拡張子は「.jpg」です。
ブログで使う画像もほとんどJPEGになると思います。

フルカラーで表示できる形式で、不可逆圧縮

ソフトによっては圧縮具合(クオリティ)を調節でき、圧縮率を上げれば上げるほど(画質を下げれば下げるほど)ファイルを軽くできます。しかしその分画像は粗くなるので、ほどほどに。

GIF(ジフ)

最近はTwitterのアニメーションとかで有名かな?
GIFもれっきとした画像形式です。

色数が256色(結構少ない)に限られた画像形式。イラスト、アイコン、ロゴなど色のハッキリした画像向け。色が少ないので軽い分、色が多い写真などを無理やりGIFにすると凄い粗くなる。可逆圧縮
最近はあんまり見ないかも。

PNG(ピング)

スクリーンショットはコレ。フルカラーで可逆圧縮
上の2つより新しく、どちらの良さも持っている優れた画像形式。

…かと思いきや、フルカラー写真をPNGで保存するとJPEGより重くなってしまうという欠点も。

ブログで使う写真にはJPEGの方がいいですね。


実際に画像を圧縮しよう!

さてさて、ようやく具体的な圧縮の仕方のお話です。

はてなブログの懐は深い

ちなみに、はてなブログに投稿できるサイズは月間300MBまで、なんです。無料ユーザーなのに。

「写真を投稿」機能を改善し、画像サイズを大きく、位置情報を削除するようにしました。また、無料ユーザーの写真容量を10倍に増量しました - はてなブログ開発ブログ

つまり一日10MBに収めれば問題ない。
10MB=1万KBなので、例えば画像1個200KBと考えたら、500枚…

めっちゃ投稿できるやん!余裕やん!!
やりますね公式様。

まぁ当然一日そんな枚数投稿できるはずもなく、公式さんの意図としては「高画質のおっっもい写真でもそれなりに載せてあげるよー」って感じでしょうな。

だから、はてなブログを運営されてる方は、サイトそのもの容量的にはそんなに心配しなくていい


でも圧縮しような?!容量的には載せられても読み込みは遅いからな!!

無料で利用できる圧縮サービス

俺は普段、圧縮に有料ソフトのPhotoshopを使っています。しかし、PhotoshopではPNGファイル(ほとんどスクショ)を圧縮してもかなり重いことがあるんです。圧縮しても200KBとか。

いやいや重いって。俺的にはせめて100KB圏内にはおさめたい。

そんなときに使っているサービスがこれ。

tinyjpg.com

パンダが特徴の圧縮サイト。巷(ちまた)ではけっこー有名らしい。
JPEGPNGに対応しています。

英語ですが、特に設定は必要なく、ただ圧縮したい画像を放り込むだけ。
最大サイズ5MBまでの画像を同時に20個まで圧縮してくれちゃいます。

ここのパンダくんなかなか優秀で、同時に複数投げてもすぐ圧縮してくれちゃう。

圧縮済みのファイルはまとめて全部ダウンロードできるんだけど、その際ダウンロード場所にちゃんと「tinified(圧縮済み)」という名前のフォルダを作って圧縮済みのファイルを入れてくれるのが便利。どこに保存されたか一目瞭然でわかりやすい。


その他にも無料で使えるサービスは沢山あるそうな。
他も試してみたいよ!って方はこちらを参考に↓

JPEG軽量化ツール10選-画像圧縮変換後の容量を比較してみた



最後に一言

画像って奥が深いね…(小並感

調べたらいろんな情報が出てきて頭パンクしそうだったよ…でも情報学部のくせに圧縮も理解してなかった自分が恥ずかしい…

たまにパソコン系(IT系)の知識をまとめていこうかな…

*1:画像のサイズを小さくする、動画のフレームレートを下げるなども一種の非可逆圧縮と言える。 データ圧縮 - Wikipedia より

*2:ZIP!|日本テレビ