画像引用元:TinyPNG
みなさん、サイトの画像圧縮して使ってますか?
ウェブサイトの中で使用することも多い画像。
その画像のファイルサイズが大きすぎるとサイトの読み込みが遅くなることも…
そうなるとSEOにも影響が出てきてしまいます。
せっかくサイトを見にきてくれたのに、表示速度が遅すぎて離脱…避けたいですよね。
そんな問題を解決してくれるおすすめのサイトが今回ご紹介する「TinyPNG」です。
この記事を書いている人

画像の適切なファイル形式(拡張子)選んでますか?
TinyPNGの説明の前に、画像のファイル形式について簡単に(本当に簡単)まとめておきたいと思います。画像を圧縮しても、画像に対して適切なファイル形式を選んでいないと効果が最大限発揮されません。そのための基本のファイル形式、拡張子を選ぶ時のポイントご紹介します。
| jpg | 写真におすすめ。 |
| png | 透過が可能でグラデーションなどもきれいに表示可能。 写真以外のイラスト、透過が必要な画像におすすめ。 |
| gif | アイコンなどに使われてきたが、現在はあまり使わない。 (今はアイコンはSVGを使用するのが主流) アニメーションが作成可能。 |
近年はGIFに代わって使われはじめているSVGや新しいWebPなどのファイル形式も存在します。
しかし使える環境や使い方などが少し複雑な点もあるので、基本は(ざっくりですが)JPG(画像)とPNG(画像以外)と使い分けを抑えておけば問題ありません。
サイトにPNG形式の写真ファイルありませんか?もしかしたら画像サイズが大きすぎるかもしれません。適切なファイル形式を選んで、画像を圧縮して容量を軽くしサイトの表示速度アップにつなげましょう!
TinyPNGとは?
TinyPNGはJPG・PNG形式の画像をサイト上で圧縮して軽量化してくれるサービスです。
英語サイトですが、使い方が簡単なので気にせず安心して使えます。
仕事でも何年も利用していますが、TinyPNGで画像を圧縮して劣化してるな…と感じたことはありません。劣化しないけど、きちんと圧縮してくれるので、おすすめです。(念のため、圧縮した画像のチェックは必要)
圧縮率は画像によりますが、大体50%以上は圧縮してくれている印象です。
この圧縮率はすごいですよね。
圧縮が必要な画像の数が増えると手動で対応するのと大きく時間が変わってきそうです。
TinyPNG使用時の注意点
最大容量がある
5MB以上の画像ファイルは圧縮できない為、
別の方法で容量を落とす必要があります。
圧縮画像の枚数制限がある
当時に20枚の画像までしか圧縮できません。
20枚以上圧縮する場合は別の方法で圧縮するか、
数回に分けて利用する必要があります。
同じ画像を何度も圧縮しない
同じ画像を何度も圧縮すると画質が劣化します。
ある程度の画質は担保されますが、注意が必要です。
TinyPNGの使い方
step
1サイトにアクセス
TinyPNGのサイトにアクセスします。
https://tinypng.com/
step
2圧縮したい画像をドラッグ&ドロップ
圧縮したい画像を用意して
「Drop your WebP, PNG or JPEG files here!」と
記載のあるエリア(画像赤枠部分)にドラッグ&ドロップします。

step
3圧縮
画像をドラッグ&ドロップをすると
自動的に画像の圧縮がはじまります。
step
4ファイルをダウンロード
画像単体でダウンロードする「個別ダウンロード」と
アップした画像全てをダウンロードする「一括ダウンロード」が用意されています。
お好きな方法を選んでダウンロードしてください。
① 「Download」個別ダウンロード
②「Download all」一括ダウンロード

step
5完了
zipファイルがダウンロードされるので圧縮した画像を使いましょう。
まとめ
今回は画像の劣化も気にせず、簡単に画像を軽量化してくれる便利なサイト「TinyPNG」のご紹介でした。アップするだけで、劣化なしに画像を圧縮してくれるなんていい時代になりました。(ガラケーサイト用の画像の圧縮に泣かされたこともありました…涙)
サイト名が覚えられない時は、「ぱんだ 圧縮」「ぱんだ png」とかでも検索できるので、この可愛いぱんだ覚えておきましょう〜。