TinyPNGの使い方 画像圧縮でWebPやJPEG、PNGを軽くする

画像:画像軽量化ツールTINY PNGでサイト表示速度改善

TinyPNGは写真や画像の画質を綺麗に保ったままデータサイズを圧縮、軽量化する為のツールです。JPEGやPNG、WebPといったファイル形式に対応しており、制作の現場でも活用される安全で無料のウェブサービス。使い方も簡単です。

圧縮された画質は綺麗でしかも軽量、数ある画像圧縮サービスの中でもクオリティの高さはトップクラスです。

基本的にウェブサイトやブログで使う画像ファイルは圧縮し、データサイズを極力小さくして使います。

理由は、サーバー負荷の軽減、ページの読み込み速度向上によるユーザーのストレス軽減。これらはSEO的にも好ましい事です。しかし、圧縮させ過ぎると画質が荒くなるのが心配ですよね。

画像を圧縮して軽量化出来るツールは沢山ありますが、中でもTinyPNGは画質の綺麗さや圧縮率ともに高く、一番おすすめ出来るツールです。

使い方を解説しますので、まだ使った事が無い方はTinyPNGを試してみては如何でしょうか?

TinyPNGとは?

TinyPNGとありますが、PNGだけでなくJPEGやWebPも圧縮出来ます。いくつかの圧縮ツールを試してきましたが、冒頭で書いたように、画質や圧縮率はあきらかに一番良いです。

ファイル形式の変換や細かい設定は出来ませんが、難しく考えずに使えるので簡単です。

WordPressならプラグイン版もありますが無理に使う必要はありません。プラグインが増えるデメリット、登録・設定の難しさがあります。また、よく分からないまま使ってしまうとデメリットにもなり得ます。

TinyPngに限らず、無料で優秀な画像圧縮サービスは他にもあるので、併せて使っても良いと思います。

画像:Squooshで画像を圧縮。素材サイトやスマホ画像はそのまま使わずに軽量化が大事です。

TinyPNGの使い方

Tinypngでの画像圧縮手順と画面の説明。

リンクはこちらから:https://tinypng.com

圧縮手順

画像をドラッグ&ドロップ

1日20ファイル、1枚が5MBまでのファイルを圧縮出来ます。無制限に使える訳では有りませんが、計画的に圧縮していればそこまで困る事は有りません。

圧縮手順

ダウンロード

圧縮後のデータをダウンロード出来ます。ボタン左の緑の数字が圧縮後のファイルサイズです。
複数のファイルを一括でダウンロードしたい時は中央にある緑のボタンからどうぞ。

圧縮手順

③ 圧縮率を表示

どれくらい圧縮、軽量できたのか表示されます。

ツールの特長 良い点・残念な点

さすがに万能ではありません。ツールを使う上での参考にしてください。

良い点: 高い圧縮率

極力画質を保ったままサイズダウンしたい訳ですが、沢山試した中で圧縮率と画質の綺麗さ共に一番でした。

ちなみに、圧縮させたい元画像のファイル形式が最適なものでないと効果が薄い事もあります。その場合はPhotoshopなど画像ツールで保存しなおすのも有りです。

画像:ウェブで使う画像ファイル形式はどれがいい?特徴と使い分け方

インストールする事なくブラウザ上で済ませられるのは有難いです。

フエル

僕はウェブ制作の仕事でも使っています。仕事で使えるクオリティでないと評価に値しません。

残念な点: ファイル枚数に制限がある

無料版なので仕方ないですが、1日あたり20ファイル、1枚のサイズが5MBまでの制限があります。
ブログ等であれば、記事を書きながら利用すればそんなに困らないとは思います。

実はJPGも圧縮出来ます。JPGに関してはPhotoshopで調整したほうが良いと思いますが、他のツールよりは使えるかと思います。

またGoogleが提供する「squoosh:スクーシュ」というウェブサービスなら無制限で利用出来るので、良ければ記事を参考にして下さいね。

画像:WebPとは?pngやjpgからの変換方法や対応ブラウザまで解説

圧縮したほうが良い理由は2つ

① GoogleがSEOの評価基準にしているから

データが重いと表示に時間が掛かるのでユーザーが困りますよね。
スマホで見る方や回線が遅い人も居ますので、当然Googleの評価も悪くなります。

GIF、PNG、JPEGといったファイル形式はご存じだと思いますが、インターネットの画像トラフィック全体の96%を占めると言われています。

サイトではHTMLファイルやCSSファイル、JSファイルをはじめ沢山のファイルが読み込まれています。それらのファイルも軽い方が良いのですが、やはり画像のサイズが圧倒的に大きいんです。

画像を軽量化すればページ表示速度が上がり、SEOとしても効果的なので軽量化しない手はありませんね。

② ウェブでは画質を制限されるから

例えば、「素敵な写真を撮ったから、高画質なものをそのままブログで見て欲しい」なんて思っていませんか?

ブラウザで表現できる画質には当然ながら制限があります。つまり「高画質=重たい画像」をアップした所で見た目は変わりません。
ただ単にデータ容量だけが大きい画像を使っている事になりデメリットしかありません。

一概に何キロバイトだったら良いとは言えませんが、自分の目で見て画質が荒れていない程度にサイズダウンさせれば大丈夫です。

Photoshopを使ったことがあれば想像は付くでしょうが、WEB用にファイルを作る際はあらかじめ以下の様になっています。

  • Windows版 72dpi
  • MAC版 96dpi

画像データ容量は、解像度と縦横のピクセルサイズで変わります。

まとめ

ブログやウェブサイトで画像を使うなら軽量化はSEO対策においても必須。画質を極力綺麗なまま圧縮するならTinyPNGが一番良い結果になります。

フエル

ブログなら記事を書くのと画像軽量化をワンセットくらいに考えた方が良いですよ。

画像:WebPとは?pngやjpgからの変換方法や対応ブラウザまで解説
画像:ウェブで使う画像ファイル形式はどれがいい?特徴と使い分け方