TinyPNGは写真や画像の画質を綺麗に保ったままデータサイズを小さく出来るツール。JPEGやPNG、WebPといったファイルに対応しています。もちろん安全で無料のウェブサービスです。
基本的にウェブサイトやブログで使う画像ファイルは圧縮し、データサイズを極力小さくして使います。
理由は、サーバー負荷の軽減、ページの読み込み速度向上によるユーザーのストレス軽減。これらはSEO的にも好ましい事です。しかし、圧縮させ過ぎると画質が荒くなるのが心配ですよね。
画像を圧縮して軽量化出来るツールは沢山ありますが、中でもTinyPNGは画質の綺麗さや圧縮率ともに高く、一番おすすめ出来るツールです。
使い方を解説しますので、まだ使った事が無い方はTinyPNGを試してみては如何でしょうか？
この記事の目次
TinyPNGとは？
TinyPNGとありますが、PNGだけでなくJPEGやWebPも圧縮出来ます。いくつかの圧縮ツールを試してきましたが、冒頭で書いたように、画質や圧縮率はあきらかに一番良いです。
WordPressならプラグイン版もありますが、プラグインを増やしたくない方や、WordPressを使っていない方はこちらのウェブサービスを使って見てくださいね。
TinyPNGの使い方
リンクはこちらから：https://tinypng.com
① 画像をドラッグ＆ドロップ
1日20ファイル、1枚が5MBのサイズまでが使えます。それ以上大きいサイズはPro版をどうぞ。
② ダウンロード
圧縮後のデータをダウンロード出来ます。ボタン左の緑の数字が圧縮後のファイルサイズです。
複数のファイルを一括でダウンロードしたい時は中央にある緑のボタンからどうぞ。
③ 圧縮率を表示
どれくらい圧縮、軽量できたのか表示されます。
ツールの特長 良い点・残念な点
さすがに万能ではありません。ツールを使う上での参考にしてください。
良い点： 高い圧縮率
極力画質を保ったままサイズダウンしたい訳ですが、沢山試した中で圧縮率と画質の綺麗さ共に一番でした。
ちなみに、圧縮させたい元画像のファイル形式が最適なものでないと効果が薄い事もあります。その場合はPhotoshopなど画像ツールで保存しなおすのも有りです。
インストールする事なくブラウザ上で済ませられるのは有難いです。
残念な点： ファイル枚数に制限がある
無料版なので仕方ないですが、１日あたり20ファイル、1枚のサイズが5MBまでの制限があります。
ブログ等であれば、記事を書きながら利用すればそんなに困らないとは思います。
実はJPGも圧縮出来ます。JPGに関してはPhotoshopで調整したほうが良いと思いますが、他のツールよりは使えるかと思います。
またGoogleが提供する「squoosh：スクーシュ」というウェブサービスなら無制限で利用出来るので、良ければ記事を参考にして下さいね。
圧縮したほうが良い理由は2つ
① GoogleがSEOの評価基準にしているから
データが重いと表示に時間が掛かるのでユーザーが困りますよね。
スマホで見る方や回線が遅い人も居ますので、当然Googleの評価も悪くなります。
GIF、PNG、JPEGといったファイル形式はご存じだと思いますが、インターネットの画像トラフィック全体の96%を占めると言われています。
サイトではHTMLファイルやCSSファイル、JSファイルをはじめ沢山のファイルが読み込まれています。それらのファイルも軽い方が良いのですが、やはり画像のサイズが圧倒的に大きいんです。
画像を軽量化すればページ表示速度が上がり、SEOとしても効果的なので軽量化しない手はありませんね。
② ウェブでは画質を制限されるから
例えば、「素敵な写真を撮ったから、高画質なものをそのままブログで見て欲しい」なんて思っていませんか？
ブラウザで表現できる画質には当然ながら制限があります。つまり「高画質＝重たい画像」をアップした所で見た目は変わりません。
ただ単にデータ容量だけが大きい画像を使っている事になりデメリットしかありません。
一概に何キロバイトだったら良いとは言えませんが、自分の目で見て画質が荒れていない程度にサイズダウンさせてアップすれば大丈夫です。
WEBの場合、解像度は72dpiで大丈夫です。
Photoshopを使ったことがあれば想像は付くでしょうが、WEB用にファイルを作る際はあらかじめ以下の様になっています。
- WINDOWS版 72dpi
- MAC版 96dpi
画像データ容量は、解像度と縦横のピクセルサイズで変わります。
まとめ
ブログやウェブサイトで画像を使うなら軽量化はSEO対策においても必須。画質を極力綺麗なまま圧縮するならTinyPNGが一番良い結果になります。
ブログなら記事を書くのと画像軽量化をワンセットくらいに考えた方が良いですよ。
note
僕はウェブ制作の仕事でも使っています。仕事で使えるクオリティでないと評価に値しません。