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

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

記事の内容のレベル

評価 :1/5。

ブロガーなら誰でも

マメな
ずーかま

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

美しめの
ずーかま

今から紹介するわ。



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

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

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

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

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

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

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

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

あばよぉ〜。



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

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

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

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

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

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

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

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

マメな
ずーかま

だから知らんわ。

美しめの
ずーかま

今から紹介するわ。

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

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

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

注:イメージです。
マメな
ずーかま

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

美しめの
ずーかま

めっちゃ食うよ。



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

いや、Webツールです。

TinyPNGの特徴

  • インストール不要! Web上でカンタン圧縮
  • PNG画像ファイルの圧縮率脅威の70〜80%
  • まとめてアップロード&ダウンロード可



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

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

↑これくらいは食ってくれます。



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

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

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

画像をつくったらPNGで保存→パンダ(TinyPNG)に食わせる

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

マメな
ずーかま

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

美しめの
ずーかま

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

TinyPNGの使い方

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

複数ファイルを同時にアップロードできます。

それらをまとめてダウンロードもできますが、ZIPファイル形式でのダウンロードとなります。

(解凍するのがめんどいので、ぼくはポチポチダウンロードボタンを押してます)

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

マメな
ずーかま

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

美しめの
ずーかま

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

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

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

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

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

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

↑これはパンダを圧縮したときの画像をスクショしたものですが、
1.5MBとかなり大きいです。



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

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

保存した画像をプレビューで開き、「ツール」>「サイズを調整」をクリック
↑画像サイズがかなり大きいです。
画像サイズを変更

リサイズの目安

〜2000ピクセルまで : 50%にリサイズにする
2000ピクセル以上:1000ピクセルを限度にリサイズする

あまり小さくしすぎると画像が劣化するので、お好みで調整してください。



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

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

マメな
ずーかま

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

美しめの
ずーかま

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

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

マメな
ずーかま

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



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

ではまた!(`・ω・´)ゞ

このブログがおもろかったら
クリックして応援してね☆

↓  ↓  ↓  ↓

 

にほんブログ村 小遣いブログ 副業・副収入へ

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

ABOUT US

ずーかま
30代社畜。妻子あり。副業ブログで月2万円の不労所得をつくりました。・・・でも、自動収入は捨てました。理由は、「楽しくなかったから」です。売り込みばっかして、ブログを続ける目的を見失っていたからです。なので今は、ブログを楽しみながら、「ブログやってるけどなかなか稼げない人、ブログ始めて間もない人、これからの人」そういう(特にサラリーマンの)ブログ仲間が、月1万の壁を超えられるようになるための情報ダダ漏れで運営しています。