黄色い壁を背に喜ぶ女性

WEB

画像圧縮なら『TinyPNG』、使い方とその実力を検証します

画像を圧縮するならパンダでおなじみの『TinyPNG』、画質を落とさずに容量を小さくしてくれると評判です。

名前に「PNG」とありますが「JPG」ももちろん圧縮できます。

こちらの記事では『TinyPNG』の使い方と、その実力について検証してみたいと思います。

TinyPNG の使い方

1. TinyPNG にアクセスする

TinyPNG 
 

無料で利用できますので、ログインは不要です。

2. 圧縮したい画像をドラッグして放り込む

TinyPNG

3. 圧縮された画像をダウンロードする

TinyPNGの使用説明

これだけで、63%も圧縮することができました!!

 

圧縮前後の画質を比べてみよう

では次に、画質の違いがどれだけあるのか、圧縮前、圧縮後を比べてみましょう。

圧縮前の画像は、無料素材サイトからダウンロードしたものを shutterstock さんの『写真のサイズを変更する方法』 を元に、私の使用しているテーマに適切なサイズである 1580px に調整したものです。

関連記事

 

では早速、検証開始です!!

圧縮前(516kb)

木に登っているパンダ

圧縮後(191kb)

木に登っているパンダ

縦だと比べにくいので、横に並べて確認します。(スマホの方はなりません。ごめんなさい…)

圧縮前(516kb)

木に登っているパンダ

圧縮後(191kb)

木に登っているパンダ

ほとんど変わりませんよね?

ちなみに、圧縮したものを再度圧縮してみましたが、6%しか減りませんでした

TinyPNGの使用説明

 

では次に、Photoshop の『Web用に保存』の機能を使って、TinyPNG で圧縮したものと同程度の容量になったものとを比べてみましょう。

TinyPNG で圧縮(191kb)

木に登っているパンダ

Photoshop で圧縮(190kb)

木に登っているパンダ

ほぼ変わらなくないですか?

 

画像を変えて、もう一度画質を比べてみよう

今度はちょっと違った雰囲気の画像で比べてみましょう。

こちらの画像は無料素材サイトからダウンロードしたものを、Photoshop で色調だけ補正、JPEG の最高画質で保存したものです。

圧縮前(810kb)

黄色い壁を背に喜ぶ女性

これを、まずは『TinyPNG』で圧縮してみます。

圧縮後(244kb)

黄色い壁を背に喜ぶ女性

比べにくいので、横に並べてみましょう。

圧縮前(810kb)

黄色い壁を背に喜ぶ女性

圧縮後(244kb)

黄色い壁を背に喜ぶ女性

パンダの画像と同様、肉眼ではあまり差は感じられませんよね?

 

では次に、Photoshop の『Web用に保存』の機能を使って圧縮してみます。

ちなみに、Photoshop の画質は

  1. 低画質
  2. 中画質
  3. やや高画質
  4. 高画質
  5. 最高画質

の5段階に分かれています。

『やや高画質』で保存(210kb)

黄色い壁を背に喜ぶ女性

一段階画質を落として『中画質』で保存(103kb)

黄色い壁を背に喜ぶ女性

拡大しないと分からないレベルですが、『中画質』まで画質を落とすと、黄色い壁やGジャンの際のノイズが気になり始めます・・・

偶然かもしれませんが、ノイズが発生する一歩手前の Photoshop の『やや高画質』と同じレベルに圧縮してくれた『TinyPNG』、すごいかもしれません!!

 

では、最後に『TinyPNG』で圧縮したものと、Photoshop で同程度の容量になった『やや高画質』に保存したものとで画質を比べてみましょう。

TinyPNG で圧縮(244kb)

黄色い壁を背に喜ぶ女性

Photoshop で圧縮(210kb)

黄色い壁を背に喜ぶ女性

ほとんど差は感じられないですよね?

 

まとめ

2枚の画像を使って、『TinyPNG』と『Photoshop』で圧縮し、その画質の差を検証してみました。

偶然かもしれませんが、『TinyPNG』はノイズが発生する一歩手前のところで圧縮してくれる優れたツールであることが分かりました。

無料のツールでここまでできてしまうなんて、すごいですよね。

 

ちなみに『TinyPNG』には、記事を投稿すると自動で圧縮してくれるプラグインバージョンもあるのですが、今回ご紹介した一つ一つ手動でできるブラウザ版の方が私は気に入って使っています。

あなたもぜひ、試してみてくださいね。

 

 
スポンサードリンク
 
スポンサードリンク

カメラWordPressで最低限おさえておきたい画像処理について前のページ

お名前.comの自動更新の設定を解除する方法次のページいいえ、結構です。

関連記事

  1. ドアに差し込まれた封筒

    WEB

    Contact Form 7 のメールが届かない?『WP Mail SMTP』で即解決!!

    WordPressでは『Contact Form 7』というプラグイン…

  2. 広告

    WEB

    『DIVER』で、AMP対応のディスプレイ広告を表示させる方法と注意点

    WordPressのテーマ『DIVER』で、グーグルアドセンスの AM…

  3. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法

    私は普段からレンタルサーバーはエックスサーバーを利用しているのですが、…

  4. 3匹のカエル

    WEB

    アメブロの見出しをカスタマイズする方法

    今更ながらアメブロデビューしました。そこで気づいたのですが、ア…

  5. Google Search Console
  6. pencils

    WEB

    さあ、WordPress(ワードプレス)でブログを始めよう!!

    全くの初心者さんでも分かるように、WordPress でブログを始める…

== WORDPRESS 完全マニュアル ==

wordpress

よく読まれている記事

  1. コントローラー
  2. 海に浮かぶ男性
  3. ペンを持つ手
  4. ケーブル
  5. mistake
  6. ドメイン
  7. ネットショッピング
  8. ガネーシャ
  9. 郵便受け
  10. 腕を交差させる草原に座った男性

当サイトで使用しているテーマはこちら!!

Gutenberg 完全対応のテーマならコレ!!

Adobeを買うのならどこよりも安い?!

WordPressでブログ始めてみませんか?

パソコンを覗き込む二人の女子
  1. wordpress,ワードプレス

    WEB

    エックスサーバーで WordPress をインストールする方法
  2. サーバー

    WEB

    エックスサーバー(XSERVER)でサーバー契約してみよう!!
  3. パン

    WEB

    MAGでトップページのみ、パンくずリストを非表示にする方法
  4. ガネーシャ

    コラム

    大きな病気を抱えていても、他人のことを応援できる人
  5. パソコンを前に困っている女性

    WEB

    WordPress簡単移行ができずに手動で移行作業を行う方法
PAGE TOP