【ブログの画像圧縮】おすすめはパンダが笹食うあのツール

記事の内容のレベル

ブロガーなら誰でも

パンダが笹食うツールなんて知らんわ。

今から紹介するわ。

ブログの画像圧縮の必要性

アイデアマンズ株式会社さんが7866サイト調査した結果によると、
ブログ・ニュースサイトの1ページあたりのデータ量の平均は、
「1.43MB」だそうです。

またGoogleも、1.6MB以内に収めると良いと言及しています。

平均はいったんおいといて、ページのデータ量は軽ければ軽いほどいい！

なぜかと言うと、ページの表示速度が早くなるからです。

いつまで待たせるんだよぉ〜。
早く表示しろよぉ〜。

ってページ、遭遇したことありますよね？

表示の遅いページだと、読者さんが内容を見るまえにブログを閉じてしまいます。

あばよぉ〜。

そういう読者さんの行動を少しでも減らすためにも、
ぼくらはページを軽くすることに注力すべきなのです！

（結果、自分たちに返ってきますしね）

で、一番データ量が多いのが、「動画」次いで「画像」ですね。

↓たとえばこの記事のアイキャッチ画像。

サイズは730×436ピクセルで、データ圧縮なしだと、430KBです。

おなじくらいのサイズの画像を4枚つかっただけで、ふとっちょページへ仲間入り・・・

ダイエットしなきゃですね、これは。

そこで登場するのが例のパンダ。

だから知らんわ。

今から紹介するわ。

ブログの画像圧縮ならコレ！ TinyPNGで劇的圧縮

なんでも、バクバク笹を食うかのように重たい画像の余計な部分を食って、
画像のデータ量を70〜80%も圧縮してくれる、不思議なパンダがいるそうな。

↓そのパンダがこちらです。

いやめっちゃ食いそうやん。

めっちゃ食うよ。

このパンダを飼ってるのが、「TinyPNG」という動物園・・・

いや、Webツールです。

TinyPNGの特徴

このパンダ、本当によく食ってくれます。

たとえばこの記事のアイキャッチ画像だと、
もともとのデータ量430KB→101KBまで軽量化！

PNG形式って、JPEG形式よりも劣化がなくてキレイなんですが、
その分データ量も大きくなりがち。

しかしこのパンダに食わせれば、安心してブログに投稿できます。

もちろんJPEGのが軽いのですが、PC画面でみたとき（スマホは問題ないです）の劣化具合が気になるので、

ってのが、ぼくのルーティンですね。

おまえのルーティンになんか興味ないわ。

じゃあ使い方の解説にうつりますね。

TinyPNGの使い方

・圧縮したいファイルをドラッグ＆ドロップ
・パンダがバンザイしたら「ダウンロード」をクリック

↓ちなみに、パンダにパンダを食わせたらこうなりました。

オイ、完全にスペースとデータ量のムダづかいだろ。

macをお使いの場合は注意点があります。

【mac使ってたら注意！】画像圧縮前にやる作業アリ

これはmacをお使いの方限定ですが、
スクリーンショット（⌘+Shift+4／⌘+Shift+control+4）を撮ったときの画像サイズに注意してください。

macに搭載されている、Retinaと呼ばれる高解像度ディスプレイは、
ディスプレイの2倍サイズのピクセルを圧縮して表示して、
従来のディスプレイサイズのまま、2倍の解像度を実現しています。

なので、Windowsの感覚でスクリーンショットを撮ると、
たんじゅんに画像サイズが2倍になります。

つまり、データ量も2倍です。

スクリーンショットで保存した画像は、TinyPNGで圧縮するまえに、
画像サイズを半分くらいにしておきましょう。

macのRetinaディスプレイでスクショした画像をリサイズする方法

保存した画像をプレビューで開き、「ツール」＞「サイズを調整」をクリック

画像サイズを変更

この手順はちょいと面倒ですが、スクショしたままの画像サイズだとデータ量がかさむので、
リサイズしておいたほうが良いです。

パンダを圧縮したときの画面をスクショした画像をパンダに食わせてみたら・・・

ややこしいわ。
あとそんなことに見出しつかうな。

こんな結果になりました。

ムダは美しいなぁ〜。
アンタもそうおもうだろぉ〜？

ムダをなくすための記事なのにムダばっかだな。

画像圧縮のノウハウは以上です。

ではまた！(｀・ω・´)ゞ