TinyPNGの画像圧縮をオフライン&2クリックで実行できるようにする設定手順

tinypng_mac26

イトカズです。

みなさんブログ運営をしていると画像の圧縮は必ずされていると思います。

画像の圧縮をすることで、ファイルサイズが小さくなりブログの表示速度も早くなります。

画像のファイルサイズを小さくするツールは多くありますがTiny PNGを活用している方は多いと思います。

 

このTinyPNGは開いてウェブページ上に画像をドラッグするだけ。

自動で画像サイズを圧縮してくれるとても便利なツールです。

 

イトカズ
私もこれまでとても使いやすくて重宝していました!

しかし、オンライン上でしか使えないというストレスを(少しですが)感じていました

 

というわけで、今回はTinyPNGと同じ画像圧縮をオフライン&2クリックで実行するツールの設定手順を解説していきます。

イトカズはオフラインで画像圧縮するツールを手に入れ作業時間が格段に上がりました

設定する際に多少の手間はありますが、今後の作業時間をかなり短縮してくれるのでオススメです!

今回のツールで可能なのはPNG画像の圧縮のみです

同じ操作をJPG画像で行うとPNG形式の画像を作成し元のJPG画像よりもサイズが大きくなります。

あくまでもPNG形式のファイルを小さくする手ですのでご理解の上お読みください。

イトカズ
※追記※

恥ずかしい話ですが、今回の記事かき上げてから初めてJPGとPNGの違いを意識しました…

日頃、ファイルサイズを意識してアップしているブログ運営者の方は読む必要のない記事だと思います。笑

ブログの画像の大きさなんて意識してなかった方向けの記事です

 

TinyPNGの使い方を簡単に解説

まずはオフラインで画像サイズを圧縮する前にTinyPNGの使い方を簡単に解説します。

3ステップで解説します。本当に簡単です。

 

①ブラウザでTiny PNGを開く

まずはTinyPNGを開きます以下リンクをクリックしてください

https://tinypng.com/

 

②圧縮したい画像ファイルをドラッグ&ドロップする

画面上にあるDrop your .png or .jpg files here!と書かれている点線の枠内に画像をドラッグ&ドロップします

これで、自動的に画像を圧縮してくれます。数秒待つだけです!

tinypng_mac1

③圧縮された画像をPC内に保存する

画像の圧縮が完了しました。

・元の画像のサイズ
・圧縮後の画像サイズ

がわかりますね。

画面右側のdownloadはファイルを個別にダウンロード
画面下のSave to DropboxDownload allでまとめて保存が出来ます

 

tinypng_mac2

ドロップボックスに保存する場合、事前にドロップボックスアカウントを準備しておく必要があります。

 

ここまでがTinyPNGを使う簡単な手順です。

正直これだけでもかなり使えるツールです。

TinyPNGを使うことはメリットだらけです。

  • 登録やダウンロードの必要なし
  • シンプルなサイトで直感的な操作で使える
  • 画質をそこまで損ねずにサイズダウンできる
  • 20枚まで一斉に圧縮可能

これらのポイントを考えると、これ以上のツールはなかなかありません。

 

一方で、画像を圧縮する手段としてプラグインを使用するという方法もあります。

しかし、プラグインでは満足いくサイズダウンができていなかったり、逆に圧縮しすぎて画質が悪くなるなんて場合もあるようです。

イトカズ
アップロード前の段階で充分に画像のサイズダウンをし、プラグインは補助的に使うという考え方が良いと思います。

アップ後の画像を圧縮するのはかなり面倒で手間がかかります

 

画像圧縮はサイトの表示速度を改善するのに必要不可欠で

表示速度を上げるとブログ訪問者の満足度をあげることができます、

表示速度を理由に離脱するのは防げるとブログから得られる収入にも直結します。

 

詳しくはワードプレスを高速化しなければいけない理由と具体的な対策の記事でも書いてます。

【2017年版】WordPress高速化しなければいけない理由と具体的な対策7選

2017.07.15

 

TinyPNGを使う時の〝ちょっとした手間〟がストレス

ここまでTinyPNGの使いやすいさやメリットについて書いてきました。

この手軽さと便利さを超えるツールはないと思っていました。

イトカズ
しかし、便利さを感じると同時に

画像圧縮の作業の度にちょっとした煩わしさも感じていました。

ブラウザの新しいタブを開いて

②TinyPNGへアクセスして

③画像をドラッグ&ドロップして

④圧縮したファイルをダウンロード

⑤まとめてダウンロードしたらZIPファイルだから解凍

⑥デスクトップとダウンロードフォルダに画像やフォルダが散乱

この流れを何回も体験すると・・・・

 

ちょっとモヤッ!!っとしませんか?

 

そしてたまにイラッ!!っと・・・

 

イトカズ
TinyPNGを使うのにブラウザを開く(つまりネット環境が必要な)こと

そしてオンライン上にファイル上げて、落とす、その作業の繰り返しにストレスを感じました

 

便利で多用するツールであるがゆえ、もっと効率使う方法はないかと感じました。

そこで、今回の記事の本題のTinyPNGと同じことをPC内でも出来ないかと思って調べてみました

 

そこで見つけたのが、今回の方法です。

イトカズ
この方法はオフラインで作業可能、なおかつ2クリックでできるので1秒くらいの操作で終わります。

今回の設定は9ineBBさんの記事がヒントになりました

TinyPNGをオフラインのデスクトップで使う方法 PNGoo

TinyPNGをオフラインで使う方法

TinyPNGはpngquantというツールをサーバー上で稼働させて
画像のファイルサイズを小さくしているみたいです
pngquantのサイトに行くと、TinyPNGが紹介されています

出典:TinyPNGをオフラインのデスクトップで使う方法  PNGoo|9ineBB

イトカズ
つまり、pngquantというツールをPC内で動かすことができます

それによってTinyPNGを使わずにネット環境なしでも画像圧縮ができる!

 

しかし、9ineBBさんの記事で紹介されていたのはウィンドウズの設定手順が紹介されていました。
(2013年の記事なのでOSのバージョンが違うと設定時のイメージも多少違うかもしれません)

この記事を参考にして、イトカズはこれからMacOSでの設定手順をお伝えします!

イトカズ
マッカーのあなたはこのブログの通り設定すればPNG画像の圧縮が〝より〟簡単になります

 

TinyPNGと同じ圧縮作業オフラインでできるようにする設定手順

pngquantをMacにインストールします

まずはpngquantのサイトに移動します。

※英語ばっかりで意味がわからなくても大丈夫です。きちんと解説します!

tinypng_mac3

 

 

ページを下の方にスクロールしていくとダウンロードのメニューが現れます。

「Command-line」内にある「Binary for macOS」をクリックしてダウンロードしてください

「pngquant.tar.bz2」という名前のファイルがダウンロードされていれば成功です。

tinypng_mac4

 

イトカズ
次はダウンロードしたファイルを開きます!

 

ダウンロードしたファイル開いてをアプリケーションフォルダへ移動する

 

Finderを開いてDownloadsフォルダにある「pngquant.tar.bz2」を探します。

この「pngquant.tar.bz2」は圧縮ファイルなのでダブルクリックをして解凍します。

tinypng_mac5

 

圧縮ファイルが解凍されると「pngquant」というフォルダが現れます。

この「pngquant」フォルダをドラッグ&ドロップでアプリケーションフォルダへ移動させますtinypng_mac6

 

アプリケーションフォルフォルダ内を見て「pngquant」フォルダがあればOKです!

tinypng_mac7

 

画像圧縮をMac内で実行できるように「Automator」で設定する

 

ここからAutomatorというアプリケーションで画像圧縮を実行できるように設定していきます

※見慣れない画面が続くと思いますが、無心でこの記事を追っていけば簡単にできます

 

まずはLaunchpadからAutomatorを開きます。見つからない場合は検索すれば簡単に出てきます。

tinypng_mac8

 

tinypng_mac9

 

ファインダーの画面が現れるので新規作成をクリックします

tinypng_mac10

 

書類の種類は「サービス」をクリックします

次に「選択」をクリックします

tinypng_mac11

 

今回は「シェルスクリプトを実行」というものを組み入れます

「シェル」と言うワードで簡単に見つかります

tinypng_mac12

 

「シェルスクリプトを実行」が表示されます。

「シェルスクリプトを実行」をドラッグして右側のスペースにドロップします

tinypng_mac13

 

矢印の箇所をすべて以下の内容に設定します。

  • ファイルの種類→「イメージファイル」
  • 検索対象→「すべてのアプリケーション」
  • シェル→「/bin/bash」
  • 入力の引き渡し方法→「stdinへ」
tinypng_mac14

 

大きい枠(初期にcatと記述されてる箇所)に以下のテキストをコピペします
※catは削除してコピペしてください

 

tinypng_mac15

 

上の記述をコピペした通りだと圧縮された画像が圧縮前の画像を上書きします。

つまり圧縮前の画像は消えます。

圧縮前と圧縮後の画像のそれぞれを残したい場合は

–ext .png –force ←ここを削除します

これで圧縮後の画像はファイル名を変えて出力され、元の画像も残ります

 

 

確認のために右上の実行をクリックします

記述や設定が正しければ下部のログの枠で緑のチェックマークが表示されます。

tinypng_mac16

 

次に作業完了時に画面上に完了通知が表示されるようにします。

「通知」と検索して「通知を表示」をドラッグ&ドロップします

 

 

「タイトル」「サブタイトル」「メッセージ」を入力します

「圧縮完了しました」程度のメッセージならタイトル欄のみの入力でOKです(他は空欄でも可)

他にも通知させたいメッセージがあればサブタイトル欄、メッセージ欄に入力しましょう

イトカズ
私の場合、圧縮後画像の大きさ(横幅)の調整を忘れてしまいがちなので

リサイズする旨をサブタイトルに入力しました。

tinypng_mac18

 

「ファイル」→「保存」をクリックで今回登録する画像アクションを保存します

tinypng_mac19

 

サービスの名前はお好きなようにつけて下さい

私はわかりやすく「オフラインでTinyPNG」という名前で保存します

tinypng_mac20

 

イトカズ
これで設定完了です!お疲れ様でした!

次はこのツールの使用方法です

 

実際にTinyPNGなしで2クリックで画像圧縮する手順

 

ここからは具体的な圧縮方法を解説します。

2クリックでTinyPNGと同じ画像圧縮ができると何度も言ってますが、本当にできます。

圧縮したい画像を左クリック(1回目)→圧縮のアクションを右クリック(2回目)

tinypng_mac21

 

画像圧縮完了です

tinypng_mac22
イトカズ

右上に画像圧縮完了しましたのメッセージが出たら。これで画像圧縮完了です。

早いですよね!

正直この方法ができるようになったらTinyPNG使えなくなっちゃいます笑

フォルダに圧縮したい画像全部入れて全選択して一斉に圧縮すれば20枚以上でも圧縮可能です。

TinyPNGを使用した時よりもはるかに早く作業できます!

 

圧縮前・圧縮後(TinyPNG)・圧縮後(2クリック)で画像を比較

ここから各画像を並べて比較してみようと思います。

イメージサイズは横幅728px高さ485pxで比較しています。

tinypng_mac23

圧縮前 (609KB)

 

tinypng_mac24

2クリック圧縮(165KB)

tinypng_mac25

TinyPNG圧縮(141KB)

パッと見、差なんてわからないですよね?

横に並べたら若干の差があるかもしれませんが、

大きな差を感じないならサイズは小さければ小さい方が良いです。

 

冒頭でも言いましたが、PNG画像はあまりサイズを小さくできません。

サイズの小ささにこだわるならJPG画像にするだけで簡単に100KB以下になります。

今回はあくまでPNG画像を圧縮する方法として読んでください

イトカズ
今回の記事を書いて、ブログにアップロードする画像は表示速度を考えるとJPG形式が一番良いと感じました。

JPG画像の圧縮方法はまた勉強して記事を書きます

 

まとめ:2クリックの画像圧縮は「PNG画像を圧縮する場合」にはオススメします

今回はブログに使う画像サイズを圧縮する時短テクニックの設定手順をご紹介しました。

日頃TinyPNGを利用していてPNG画像でアップロードしていた方には参考にしてもらいたいです。

イトカズ
TinyPNGをそのまま使った場合の作業時間と

2クリックで圧縮できた時の差

これは処理する画像枚数に比例して実感できます。

ブログ記事を作成している文字だけじゃなくて、画像作成や加工に取られる時間が大変だったりします。

画像の作成はもちろん大切ですが、時短できるところはとことん時短したいですね!

画像サイズが気になった方はぜひ参考にされてください!

 

 

この記事を書いた人- WRITER PROFILE -


“読んだ人が得をしないとブログじゃない”をモットーに書きます。
個人ブログでは“内容”よりも“誰が話しているか”が大切と思います。
iPhone修理、SEO、ライティングについて書いています。
沖縄出身福岡在住の30歳。ソフトバンクホークス応援してます。
好きな食べ物はちゃんぽん。
詳しいプロフィールはこちら

イトカズユウタ

tinypng_mac26

↓↓フォロワーさんにシェアするSNSボタン↓↓

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です