簡単・綺麗に画像を圧縮してくれる[TinyPNG]を使って投稿を軽量化する

こんにちは、なおです!

画像を圧縮してくれるサービス「TinyPNG」をご存じでしょうか。

見た目をほとんど劣化させずに、ファイルサイズを圧縮してくれる便利なサイトです。
しかも無料で利用できます。

画像を圧縮することで投稿を軽量化でき、表示が速くなるなどのメリットがあります。

今回は、私がいつも利用させてもらっている「TinyPNG」をご紹介します。

目次

TinyPNGとは

TinyPNGは、無料で画像を圧縮してくれるウェブサービスです。

画像の形式は、PNG画像とJPEG/JPG画像に対応しています。

簡単な操作で、見た目をほとんど劣化させずに画像のサイズを小さくしてくれます。

画像にもよりますが、20%前後は当たり前、50%以上も圧縮してくれることもあります。

画像のファイルサイズを小さくして投稿を軽量化(投稿ページのデータサイズを小さくする)することで、

サイトの表示が速くなる

その分早く読み込みが終わるので、サイトの表示が速くなってうれしい。

ユーザーの通信量が少なくなる

1ページを読み込むサイズが減り、スマホのユーザーさんなども通信量を節約できてうれしい。

サーバーの容量を節約できる

画像のファイルサイズが小さくなった分サーバーの容量を節約できてうれしい。

など、うれしいことがたくさんあります。

なおのアイコン画像なお

投稿の軽量化は、ユーザーにとっても、管理者にとってもうれしいことですね^^

見た目はほぼ同じなのに読み込むサイズが違うとなれば、圧縮しない手はありませんね^^


画像を圧縮する手段は圧縮サイトの他に、圧縮ソフト、プラグインなどいろいろとありますが、私が「TinyPNG」を使う理由は次のとおりです。

簡単が操作

とにかく操作が簡単!

サイトにアクセスしたら難しい設定などもなく、画像をドラッグ&ドロップするだけです。

無料で使える

TinyPNGは無料で使用することができます

1度に扱える枚数などの制限はありますが、私は十分無料で使用させてもらってます。

ウェブサービス

ブラウザでサイトにアクセスするだけなので、PCにソフトをインストールしたり、WordPressにプラグインをインストールする必要もありません。

また、WindowsやMacといったOSも問いません。

登録が不要

TinyPNGでは会員登録の必要はありません

メールアドレスとパスワードを登録して・・・なんてこともなく、サイトにアクセスすればすぐに使えます。

なおのアイコン画像なお

手軽に使えて、しかも無料。
ありがたいです。

使い方

早速、TinyPNGの使い方をご紹介します。

画像は、PCでTinyPNGを使用するときのものになります。

サイトへアクセス

最初に、ブラウザでTinyPNGのサイトへアクセスします
下のボタンから開くことができます。(外部リンク)

印象的なパンダが出迎えてくれます・・・

TinyPNGトップページ

画像をアップロード

アップロードの方法

Drop Your .png or .jpg files here!」とある点線で囲まれた場所へ、圧縮したい画像をドラッグ&ドロップするだけ!

複数枚をまとめてドラッグ&ドロップしても大丈夫です。(制限枚数内なら)

TinyPNGファイルのアップロード方法

画像をドラッグ&ドロップすると、すぐに画像の圧縮が始まります。

また、点線の枠の中をクリックするとファイル選択が表示されるので、そこから画像ファイルを選ぶことでも可能です。

圧縮できる画像の種類や制限

対応する画像の種類やアップロードの制限は次のとおりです。

  • 圧縮できる画像の形式:「PNG画像」「JPEG/JPG画像」
  • アップロードできる枚数:1度につき20枚まで
  • ファイルサイズ:1枚につき5MBまで

圧縮が終わるのを待つ

画像を複数枚放り込んだ場合は、順番に圧縮が行われます。

すべての画像の圧縮が終わるのを待ちましょう。

TinyPNG圧縮中

画像をダウンロードする

圧縮が終わった画像のダウンロード方法は3種類あります。

TinyPNGダウンロード

(1)1枚ずつダウンロード

それぞれの画像にある「download」をクリックすると、画像を1枚ずつダウンロードすることができます

(2)まとめてダウンロード

Download all」をクリックすると、zip形式で1つにまとめたものをダウンロードすることができます

私はこちらをよく使っています。

(3)Dropboxへ保存

Save to Dropbox」をクリックすると、Dropboxへ直接保存することができます

Dropboxにログインしていない場合には表示される画面でログインします。

後は保存したいフォルダを選んであげるだけです。

実際に使ってみた

実際に画像を圧縮してみます。

画像「photo-sample01.png」

まずはPNG形式の画像から。
先日の「スラッグ」についてご紹介したときに使用したキャプチャ画像です。

ファイル形式:PNG形式
画像の大きさ:1200×700ピクセル

  • 元のサイズ:133.7KB
  • 圧縮後のサイズ:46.7KB
  • 圧縮率:-65%
photo-sample01.pngの圧縮結果

圧縮前

photo-sample01.png圧縮前

圧縮後

photo-sample01.png圧縮後

画像「photo-sample02.jpg」

今度はJPG形式の画像です。
ローストチキンの投稿よりできあがりの写真です。

ファイル形式:JPG形式
画像の大きさ:1200×800ピクセル

  • 元のサイズ:195.5KB
  • 圧縮後のサイズ:129.8KB
  • 圧縮率:-34%
photo-sample02.jpgの圧縮結果

圧縮前

photo-sample02.jpg圧縮前

圧縮後

photo-sample02.jpg圧縮後

なかなかの圧縮率で圧縮してくれましたが、圧縮前と圧縮後を見比べていただくとほとんど画質が落ちていないことが分かります。

特に難しい設定も必要なくドラッグ&ドロップするだけで、簡単に画像を圧縮してくれるなんてすごいですね^^

ただしすべてが万能というわけではなく、ときどき画像によっては細かいところのつぶれが目立つような時があります。

私の場合どうしても気になるような時は、TinyPNGは使わず画像ソフトで画質を少し下げるなどで対処しています。

複数枚の画像を使用した投稿では、見た目はほとんど変わらないのに1ページ全体として考えたら読み込む容量はかなり変わってきます。

なおのアイコン画像なお

投稿の軽量化、おすすめします^^

ぜひぜひTinyPNGを試してみてください^^

私の画像作成の手順

画像を自動で圧縮してくれるプラグインなどもありますが、私の場合は手動で作る方が安心できるので、アップロード前にTinyPNGで圧縮する方法を取っています。

また、アップロード前にもう一度ひととおり目を通すことで、最終確認の意味も込めています。

次のような手順で画像を作成しています。

STEP
画像を作成

画像ソフトなどで投稿に使う画像、アイキャッチ画像を作成する。

STEP
TinyPNGで圧縮

できあがった画像をまとめてTinyPNGで圧縮する。

まとめたzipファイルをダウンロードして展開し、1枚ずつ状態を確認する。

もし気に入らないものがあれば、それだけ画像ソフトで作り直す。

STEP
WordPressにアップロード

WordPressのメディアにドバッとアップロードする。

投稿を仕上げていく。

なおのアイコン画像なお

プラグインやソフトのインストールもいらないので、一手間かかりますがおすすめですよ^^

まとめ

今回は、画像ファイル(PNG形式、JPEG/JPG形式)を圧縮してくれる「TinyPNG」というウェブサービスをご紹介しました。

見た目はほとんど劣化することなく、見事にファイルサイズを小さくしてくれます。

WindowsやMacといったOSに関係なくブラウザで利用できるのでとても便利です。

会員登録や難しい設定も不要。ドラッグ&ドロップするだけで簡単に圧縮できて、しかも無料。

ブログに来られた方に快適に読んでいたけるように、ぜひ画像の圧縮をおすすめします。

ご参考になれば幸いです^^

コメント

コメントする

目次
閉じる