X/Twitteアイコンが思いつかない？おしゃれなフリー素材とサイズを紹介
hiroyon
FUERU
TinyPNGの使い方 JPEGやPNGの画像を圧縮して軽くする
hiroyon
記事内に商品プロモーションを含む場合があります
TinyPNGは写真や画像の画質を綺麗に保ったままデータサイズを小さく出来るツール。JPEGやPNG、WebPといったファイルに対応しています。もちろん安全で無料でも使えるサービスです。
TinyPNGはドメイン名で、サイト名はtinify(読み方：ティニファイ)。パンダのキャラクターが目をひきます。
圧縮された画質は綺麗でしかも軽量、数ある画像圧縮サービスの中でもクオリティの高さはトップクラスです。
基本的にウェブサイトやブログで使う画像ファイルは圧縮し、データサイズを極力小さくして使います。
理由は、サーバー負荷の軽減、ページの読み込み速度向上によるユーザーのストレス軽減。これらはSEO的にも好ましい事です。しかし、圧縮させ過ぎると画質が荒くなるのが心配ですよね。
画像を圧縮して軽量化出来るツールは沢山あります。その中でもTinyPNGは画質の綺麗さや圧縮率ともに高くておすすめ出来る画像圧縮ツールです。
画像圧縮ツールとしては、Squooshの機能や使い方の記事で紹介した様にTinyPNGかSquooshを使えば十分です。
今回は、新しくなったTinyPNGの機能や使い方も紹介しますので、まだ使った事が無い方はTinyPNGを試してみては如何でしょうか？
TinyPNGとは？
TinyPNGとありますが、PNGだけでなくJPEGやWebPも圧縮出来ます。私自身も仕事でいくつかの圧縮ツールを試してきましたが、冒頭で書いたように、画質や圧縮率はあきらかに良いです。
サイトやブログで使う画像の圧縮は必須なので、まだ使った事が無い方やおすすめのツールを探している方は是非使ってみて下さいね。
ちなみに、WordPressならプラグイン版もありますが無理に使う必要はありません。プラグインが増えるデメリット、登録・設定の難しさがあります。また、よく分からないまま使ってしまうとデメリットにもなり得ます。
TinyPNGに限らず、Squooshなど無料で優秀な画像圧縮サービスがあるので、併せて使っても良いと思います。
さらに、記事後半では新しくなったTinyPNGの機能や使い方を紹介しています。
TinyPNGの使い方
TinyPNGのサイト上から直感的に画像の軽量化を行う事が出来ます。この辺りは以前と同じです。
新機能として、ファイル形式を変換する事が出来るようになりました。WebP、JPEG、PNG、もしくはこれらのすべてを選択する事が可能です。
以前と同様に、元のファイル形式を単に圧縮させるだけの使い方も出来ます。
圧縮手順
①画像をドラッグ＆ドロップ
画像を枠内へマウスでドロップすれば画像圧縮が自動的に始まります。
1日20ファイル、1枚が5MBまでのファイルを圧縮出来ます。無制限に使える訳では有りませんが、計画的に圧縮していればそこまで困る事は有りません。
圧縮手順
②ファイル形式を変換
新機能として、WebP、JPEG、PNGへファイル形式を変換する事が出来るようになりました。1日あたり3ファイルまでの制限があるので、最適なファイル形式へ変換したい時だけ利用します。
トグルボタンをクリックし、表示された中から変換したいファイル形式をクリックすると自動的にファイル変換が始まります。後から他のファイル形式を追加する事も出来ます。
圧縮手順
③ ファイルをダウンロード
各ファイル形式での画像圧縮率と軽量化後のデータサイズが一覧になって表示されます。キャプチャ画像では、それぞれのファイル形式での圧縮率を見比べる為にJPEG・PNG・WebPで変換しました。実際には必要なファイル形式だけで十分です。
それぞれのファイルアイコンをクリックすればダウンロードが始まります。
TinyPNGの特長
TinyPNGは沢山ある画像圧縮ツールの中でも優秀ですが、無料版だと利用制限があります。ブログなどで画像を掲載する場合、計画的に画像を圧縮していれば問題なく利用できると思います。
良い点： 高い圧縮率
極力画質を綺麗に保ったままデータを軽量化したい訳ですが、色々なツールを試した中でも圧縮率と画質の良さは共にトップクラスでした。
ちなみに、圧縮率は元の画像にもよります。ファイル形式を変える事で最適な結果を得られる事もあります。
インストールする事なくブラウザ上で済ませられるのは有難いです。
残念な点： ファイル枚数に制限がある
無料版なので仕方ないですが、１日あたり20ファイル、1枚のサイズが5MBまでの制限があります。
ブログ等であれば、記事を書きながら利用すればそんなに困らないとは思います。
ファイル形式の変換は1日あたり3ファイルまで。こちらはちょっと制限がキツイです。
Googleが提供する「squoosh：スクーシュ」というウェブサービスなら無制限で利用出来るので、良ければ記事を参考にして下さいね。
サイト全体で画像サイズの問題を分析
サイトURLを入れる事により、画像がサイト全体でどれくらいのサイズを軽量出来るのか分析出来ます。
有料プランのTinyPNGでは、具体にどの画像が軽量化の対象なのかも知る事が出来ます。
残念ながら無料プランではどの画像が対象かまでは判りません。ただ、画像SEOを行う上でサイトの画像の課題を簡単に見つけられるのは便利です。
無料版では制限がありますが、それでも使い方によっては有用だと思います。
圧縮したほうが良い理由は2つ
① GoogleがSEOの評価基準にしているから
データが重いと表示に時間が掛かるのでユーザーが困りますよね。
スマホで見る方や回線が遅い人も居ますので、当然Googleの評価も悪くなります。
GIF、PNG、JPEGといったファイル形式はご存じだと思いますが、インターネットの画像トラフィック全体の96%を占めると言われています。
サイトではHTMLファイルやCSSファイル、JSファイルをはじめ沢山のファイルが読み込まれています。それらのファイルも軽い方が良いのですが、やはり画像のサイズが圧倒的に大きいんです。
画像を軽量化すればページ表示速度が上がり、SEOとしても効果的なので軽量化しない手はありませんね。
② ウェブでは画質を制限されるから
例えば、「素敵な写真を撮ったから、高画質なものをそのままブログで見て欲しい」なんて思っていませんか？
ブラウザで表現できる画質には当然ながら制限があります。つまり「高画質＝重たい画像」をアップした所で見た目は変わりません。
ただ単にデータ容量だけが大きい画像を使っている事になりデメリットしかありません。
一概に何キロバイトだったら良いとは言えませんが、自分の目で見て画質が荒れていない程度にサイズダウンさせれば大丈夫です。
Photoshopを使ったことがあれば想像は付くでしょうが、WEB用にファイルを作る際はあらかじめ以下の様になっています。
- Windows版 72dpi
- MAC版 96dpi
画像データ容量は、解像度と縦横のピクセルサイズで変わります。
まとめ
ブログやウェブサイトで画像を使うなら軽量化はSEO対策においても必須。画質を極力綺麗なまま圧縮するならTinyPNGが一番良い結果になります。
ブログなら記事を書くのと画像軽量化をワンセットくらいに考えた方が良いですよ。
プロフィールの詳細へ
テキストが入ります。
僕はウェブ制作の仕事でも使っています。仕事で使えるクオリティでないと評価に値しません。