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

イトカズです。

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

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]私もこれまでとても使いやすくて重宝していました!

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

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

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

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

[aside type=”warning”]今回のツールで可能なのはPNG画像の圧縮のみです

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

あくまでもPNG形式のファイルを小さくする手ですのでご理解の上お読みください。[/aside] [voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]※追記※

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

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

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

TinyPNGの使い方を簡単に解説

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

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

①ブラウザでTiny PNGを開く

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

https://tinypng.com/

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

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

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

tinypng_mac1

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

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

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

がわかりますね。

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

tinypng_mac2

[aside type=”normal”]

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

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

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

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

[aside type=”boader”]

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]アップロード前の段階で充分に画像のサイズダウンをし、プラグインは補助的に使うという考え方が良いと思います。

[keikou]アップ後の画像を圧縮するのはかなり面倒で手間がかかります[/keikou]。[/voice]

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

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

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

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

[kanren postid=”1614″]

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]しかし、便利さを感じると同時に

画像圧縮の作業の度にちょっとした煩わしさも感じていました。[/voice] [aside type=”boader”]①ブラウザの新しいタブを開いて

②TinyPNGへアクセスして

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

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

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

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]TinyPNGを使うのにブラウザを開く(つまりネット環境が必要な)こと

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]この方法はオフラインで作業可能、なおかつ2クリックでできるので1秒くらいの操作で終わります。[/voice]

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

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l big”]つまり、pngquantというツールをPC内で動かすことができます

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]マッカーのあなたはこのブログの通り設定すればPNG画像の圧縮が[keikou]〝より〟簡単[/keikou]になります[/voice]

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

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

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

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

tinypng_mac3

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

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

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

tinypng_mac4

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]次はダウンロードしたファイルを開きます![/voice]

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

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

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

tinypng_mac5

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

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

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

tinypng_mac7

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

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

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

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

tinypng_mac8

tinypng_mac9

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

tinypng_mac10

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

次に[keikou]「選択」をクリック[/keikou]します

tinypng_mac11

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

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

tinypng_mac12

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

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

tinypng_mac13

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

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

tinypng_mac14

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

tinypng_mac15

[aside type=”normal”]

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

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

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

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

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

[/aside]

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

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

tinypng_mac16

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

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]私の場合、圧縮後画像の大きさ(横幅)の調整を忘れてしまいがちなので

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

tinypng_mac18

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

tinypng_mac19

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

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

tinypng_mac20

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l big icon_blue”]これで設定完了です!お疲れ様でした!

次はこのツールの使用方法です[/voice]

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

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

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

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

tinypng_mac21

画像圧縮完了です

tinypng_mac22

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]

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

早いですよね!

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

[/voice]

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

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

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

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

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

[colwrap] [col3]
tinypng_mac23

圧縮前 (609KB)

 [/col3] [col3]

tinypng_mac24

2クリック圧縮(165KB)

[/col3] [col3]
tinypng_mac25

TinyPNG圧縮(141KB)

[/col3] [/colwrap]

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

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

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

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

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

今回はあくまでPNG画像を圧縮する方法として読んでください[/aside] [voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]今回の記事を書いて、ブログにアップロードする画像は表示速度を考えるとJPG形式が一番良いと感じました。

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

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

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

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

[voice icon=”https://itochannel.com/wp-content/uploads/2017/08/IMG_4726.jpg” name=”イトカズ” type=”l icon_blue”]TinyPNGをそのまま使った場合の作業時間と

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

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

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

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

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