黄色い壁を背に喜ぶ女性

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

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

 

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

関連記事

  1. 郵便受け

    WEB

    要素の高さを揃える 『matchHeight.js』の使い方

    float させた横並びのカラムの高さをそろえたい!! だけど、ボック…

  2. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法

    せっかく取得したドメインですが「もう使わないから削除したい!」そう思っ…

  3. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法

    幅が 960px の inner の中に、幅が 300px、右側のマー…

  4. 広告

    WEB

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

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

  5. タイプライター

    WEB

    font-weight プロパティについて

    font-weight とは、フォントの太さを指定する際に使用するプロ…

  6. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法

    私も大のお気に入りで、このブログでも使用しているTCDさんのテーマ『M…



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

wordpress

よく読まれている記事

  1. シャットダウン
  2. カメラ
  3. 歩道を歩く男性
  4. 郵便受け
  5. ドメイン
  6. チェックリスト
  7. ドアに差し込まれた封筒
  8. チェーン
  9. タイプライター
  10. 海に浮かぶ男性

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

アフィリエイトサイトにはDiverもお勧め!!

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

パソコンを覗き込む二人の女子
  1. ブランコに乗る女の子

    WEB

    エックスサーバーで『サブドメイン』を設定して、WordPressをインストールし…
  2. 窓

    WEB

    TCDのテーマ『MAG』で『関連記事カードリンク』を新しいタブで表示する方法
  3. 歩道を歩く男性

    WEB

    DIVERのAMPページに『リンクユニット広告』を表示させる方法
  4. シャットダウン

    WEB

    XSERVER(エックスサーバー)で設定したドメインを削除する方法
  5. 洗濯物

    WEB

    横並びさせた要素の端のマージンを調整する方法
PAGE TOP