The post PNG画像の圧縮率を高める ３つの裏ワザ を一挙公開！ first appeared on Fukuro Press.
]]>
↓PNG画像を使っていて、こう思ったことないですか？
- 「PNG画像の圧縮率をもっと高めたい」
- 「でも画質だけは下げたくない」
- 「あとサーバーにも負担をかけたくない」
ここでは PNG画像の画質を落とさず、なるべく圧縮率を高める方法 をまとめました。
本当にちょっとしたコツですが、
やるとやらないとでは大違いです。簡単にできるので是非お試しください！
１．まずはPNGの特性を理解しよう
まずはPNG画像の特性というか性質について
どういう特性があるか知っておけば、
PNGに向いてる画像とそうじゃないのが区別できるので解説します。
ものすご～く簡単に説明するなら、
PNG画像とは 次のような特長を持つ画像フォーマット のこと
↓IT用語辞典での説明（引用）
色のついた画素を縦横に敷き詰めたビットマップ形式の画像を無劣化で圧縮（可逆圧縮、ロスレス圧縮）することができ、図やイラストなどの画像に向いている。
引用元 : PNGとは - IT用語辞典
最大の特徴は 「無劣化で圧縮できる」 というところ
つまり圧縮しても劣化しないので、きれいに画像を保存するのに向いてる訳です。
ただし無劣化とは言うものの、保存できる色数を減らすことは可能です。
どういう意味かは次の説明参照
画像の色数はフルカラー（24ビットあるいは48ビット）および最大256色（8ビット）のインデックスカラー（フルカラーから選択）、最大65,536段階（16ビット）のグレースケールなどから選択できる。
引用元 : PNGとは - IT用語辞典
この説明みたいに、画像の色数を減らせば、
- フルカラー（約1677万色）
- ８ビットカラー（最大256色）
- ４ビットカラー（最大16色）
↑こういう風に色数を256色とか16色までに減らすことが可能
４ビット（16色）までいくと、さすがに色素が抜けたような画像になっちゃいます。
でも８ビット（256色）なら、フルカラーとほぼ大差ないクオリティーで保存可能です。
つまりPNGを圧縮する極意とは、
「なるべく使用色数が少ない画像を使うこと」
これに尽きるわけですね。
もちろん圧縮時にも色数は減らせるわけですが、
オリジナルの時点で使用色数が少ない方が圧縮率は高くなるんです。
２．PNG保存に向き・不向きな画像を見極める
使用色数が圧縮率・サイズに関わるというPNGの特性
これが超重要なので、画像を保存する時に覚えておきましょう。
そしてこの特性を踏まえると、
PNGに向いていない画像と向いている画像は次みたいに区別できます。
要注意！PNG保存に不向きなのはこういう画像・・・
まず PNG保存が向いてない画像 は次みたいなもの
- 使用色数がものすごく多い画像
- グラデーションがかかってる画像
- 背景がぼやけてるような画像
↑こういう画像はなるべくPNG保存は避けた方が無難です。
なぜならPNG（8ビット）で保存すると色が抜けてしまうから
例えば 次の虹色のグラデーション画像 を見てください。
↓24ビットで保存したオリジナルがこれ
これを８ビットで保存すると、次みたいな画像になります。
↓８ビットで保存した結果・・・
この違い分かりますか？
よ～く見比べてみてください、
８ビットの方はグラデーションが飛び飛びになってるのが分かるはず
この現象（色抜け）は背景がぼやけてる画像でも同じです。
こういうのはPNG保存に向いてません。
多少の劣化が許せるなら JPEG を使うようにした方がいいです。
特に500ピクセル以上で色数が多い画像の場合、
PNGだとサイズがでかくなって、画質も落ちるので注意しましょう。
PNG保存が向いてるのはこういう画像！
そして逆に、 PNG保存に向いてる画像 は次のようなもの
- 使用色数ができるだけ少ない画像
- 複雑なエフェクトがかかってない画像
- シンプルで背景ぼかしがない画像
↑こういう画像なら PNG の特性を最大限生かせます。
つまり画像選びの時点で圧縮率を高められるかが決まる
こう断言しても過言じゃありません。
PNGが向いてる画像とPNG以外（JPEGおか）が向いてる画像・・・
少しでも圧縮率を高めたいなら、それを見極められるようになりましょう。
３．最大幅に合わせて画像をリサイズする
お次は画像サイズ（特に横幅）について
例えば画像を貼り付けるとき、
記事本文の横幅以上の画像を使ったりしてないですか？
それだと画像のサイズ（容量的な意味）がムダにでかくなってしまいます。
あとそういう画像を貼り付けると、次みたいな弊害もあるかも
- なぜか画像がぼやける（WordPressの場合）
- 無駄にサーバー容量を圧迫する、消費する
↑こういう実害が出てしまう・・・
なので必要以上に大きな画像は、
圧縮する前にリサイズしておくのが一番です。
リサイズツールについては自分の好きなものを使ってください。
インストールが面倒なら、
次みたいにWeb上だけでリサイズできるツールもあります。
iLoveIMG : https://www.iloveimg.com/ja/resize-image/resize-png
↑アップロードしたPNG画像をリサイズできるWebツール
あとWordPressユーザーの場合、
次記事で紹介した Resize Image After Upload プラグインもオススメ
アップロード画像が最大幅より大きい場合、
自動的にリサイズしてくれるという優れものです。
この後紹介する画像圧縮プラグインと組み合わせれば、作業がもっと楽になるはず
４．最後はTinyPNGで圧縮しよう！
最後は TinyPNG を使って画像を圧縮するだけです。
画像圧縮といえば超定番、おなじみのWebツールですよね。
| Make your website faster and save bandwidth. TinyPNG optimizes your PNG images by 50-80% while preserving full transparency! TinyPNG – Compress PNG images while preserving transparency - tinypng.com |
↑みんな大好きTinyPNG
でも圧縮する前に・・・今まで紹介したことをもう一度おさらい
- 使用色数が少ない画像を選ぶ
- PNGに不向きな画像はJPEG保存
- 最大幅にリサイズしておく
↑圧縮する前にこれらの作業をお忘れなく
圧縮後に画像編集してしまうと、
せっかくの圧縮がムダになってしまうので気を付けてください。
あとWordPressユーザーの場合・・・
なんとプラグインから TinyPNG を利用することも可能です。
↓その名も Compress JPEG & PNG というプラグイン
TinyPNG開発元が作成したプラグインで、
他プラグインと比較してみても性能はピカイチです。
先ほどのリサイズプラグインと組み合わせれば、作業が楽になること間違いなし
是非WPユーザーの方は使ってみてください！
まとめ - PNG画像の圧縮率は圧縮前で決まる
圧縮自体は TinyPNG を使えば一発です。
でも圧縮率をもっと高めたいなら、
PNGに向いてる画像選びとかリサイズも重要な作業なんです。
以上、PNG画像の圧縮率を高める方法でした。
The post PNG画像の圧縮率を高める ３つの裏ワザ を一挙公開！ first appeared on Fukuro Press.
]]>The post 画像読み込みを高速化するためにWordPressでできる３つの対策 first appeared on Fukuro Press.
]]>
画像はサイズ（容量）がでかいので表示速度低下の原因になりがち
テキストと違って平気で数十KB～数百KBくらいの容量になるので、読み込み速度を落とさないためには画像を最適化しておく必要があるのです。
そこでWordPressで簡単にできる画像読み込み最適化の対策をまとめました。
画像最適化のためにできる３つの対策
画像のサイズと読み込み時間を減らすためにできる対策は次の３つ
- アップロード時にデータ圧縮
- アップロード時に最大幅にリサイズ
- ページ表示時に遅延読み込み
もしこれを全部自力でやろうとすると大変ですが、WordPressならプラグインを使えば全て自動＆簡単に行うことができます。
ではこの３つのやり方について順番に見ていきましょう。
アップロード時の画像データ圧縮
画像の最適化として、一番最初にしておきたいのがデータ圧縮
この対策をしておけば 無駄な部分を減らしてデータサイズを小さくすること ができます。
WordPressの場合は画像圧縮系のプラグインで検索すれば多数出てきます。
例えば代表的なプラグインは次の３つ
- Compress JPEG & PNG images
- EWWW Image Optimizer
- WP Smush
どのプラグインもアップロード時に自動的に圧縮する機能が付いています。
でもこれだけ選択肢があると逆にどれを使えばいいか分からないなってしまいますよね。
そこで次の記事で各プラグインについて圧縮性能を比較しました。
もしどれを使えば悩んでいるならこの記事を見てもらえば選ぶときの参考になると思います。
ちなみに圧縮率が最も高いのはあの画像圧縮サービス TinyPNG の開発元が作った Compress JPEG & PNG images です。
詳しい使い方については次の記事でまとめたのでそちらも是非ご覧ください。
ただし無料会員だと制限があるので不自由なく使いたいなら有料会員になる必要があります。
アップロード時にリサイズ
普段大きな画像をアップロードする時、そのままのサイズでアップしていませんか？
大抵の画像はそれでもいいですが、
記事最大幅を超える画像はアップロード前にリサイズするのをオススメします。
なぜ最大幅にリサイズした方がいいかというと次のメリットがあるから
- データサイズが減る
⇒ 記事幅に収めることでデータを無駄なく小さくできる
- 画像のぼやけがなくなる
⇒ 最大幅を超える画像だと縮小されてぼやけるが、その対策にも効果あり
データサイズが減るのはもちろんのこと、記事幅に収まらない画像がぼやけてしまうのを防ぐ効果まであります。
なのでアップロード前に「この画像は記事幅よりも幅が大きすぎるな...」と感じたらその幅に合わせてリサイズした方が良いでしょう。
でも全部手動でやるのは大変なのでリサイズについても便利なプラグインがあります。
それが次の記事で紹介した Resize Image After Upload というプラグイン
この記事でも書いたように画像アップロード時に指定しておいた最大幅まで自動的にリサイズしてくれる優れものです。
普段から大きめの画像を扱うことが多いなら、このプラグインが重宝すると重いので是非活用してみてください。
画像の遅延読み込み（Lazy Loader）の導入
最後の対策は画像の遅延読み込みを導入すること
これはページの表示時に画像を読み込まず、
画像表示が必要になった時にその場で読み込むという手法になります。
この遅延読み込みを使うことのメリットは次の２つ
- 表示が高速になる
⇒ サイズの大きい画像を全て読み込む必要がないため
- データの転送量を減らせる
⇒ 記事途中で離脱されても無駄なデータ通信が発生しない
すぐに表示しない画像は後読みなので表示速度を高速化できる効果があります。
そしてWordPressの場合、
画像遅延読み込みで有能なのが Lazy Loader っていうプラグイン
ちょうど次記事で使い方とか解説したプラグインですね。
詳しい導入とか使い方・特徴は上記事をご覧ください。
この Lazy Loder の利点は何かというと、
有効化しておくだけで、記事内の画像を全部遅延読み込みしてくれる所
↓面倒な設定不要、有効化するだけでOK！
あとTOC+とかの目次プラグインとも相性がいいです。
質の悪い遅延読み込みプラグインの場合、
目次から見出しにジャンプしたときに位置がずれることがあるんですよね。
その点 Lazy Loader は位置ずれ対策もバッチリです。
ちなみにこのプラグイン、遅延読み込みするのは記事内画像だけじゃありません。
次の画像もしっかり遅延読み込みしてくれます。
- ウィジェット内の画像
- 投稿サムネイル画像
- 投稿者のGravatar画像
- iframe内にある画像
ほぼ全ての場所にある画像を遅延読み込みしてくれるので、ページ表示速度の改善に役立つこと間違いなしです。
もっともっとWordPressを高速化するには
以上がWordPressでできる画像の最適化対策です。
全ての対策をしておけば大分ページ表示速度の改善につながります。
しかしWordPressを高速化するには画像の最適化だけでは不十分です。これに加えて最低限しておきたいのが次のWordPress高速化設定
この５つはやり方も難しくなく、誰でもできることばかりなので簡単です。
詳しいやり方については次記事でまとめたのでそちらをどうぞ
画像最適化に加えて上の記事でまとめたことも実践すれば表示速度が見違えるほど改善します。是非お試しを！
まとめ
ここまでで紹介した画像読み込み最適化対策をもう一度まとめると次の通り
- アップロード時にデータ圧縮
- アップロード時に最大幅にリサイズ
- ページ表示時に遅延読み込み
この３つをやっておくだけでも表示速度の改善につながります。
以上、画像の読み込みを最適化するための３つの対策でした。
これに加えてWordPressの高速化設定も行っていけば表示速度はさらに改善し、結果として読者が快適に見ることができるブログを作るのにつながるはずです。
もちろん記事の質も大事ですが、表示速度で離脱されることがないように読者がストレスなく見れる快適なブログを目指していきましょう。
The post 画像読み込みを高速化するためにWordPressでできる３つの対策 first appeared on Fukuro Press.
]]>The post WordPressでディスク使用量を大幅に減らすための４つの節約術 first appeared on Fukuro Press.
]]>
WordPressでサイト・ブログを作るとき、
気になるのは レンタルサーバーのディスク使用量 だと思います。
大抵のレンタルサーバには容量制限があり、
その中でブログ作りしないといけないので容量を節約したい人は多いです。
特に 1GB や 10GB など制限がキビしいと、かなり切実な問題になります。
そこで WordPressのサーバ使用量を減らす５つの節約術 を紹介！
ディスク使用量を少しでも減らしたい人は是非お試しください。
ディスク使用量を減らす４つの方法
ディスク使用量を減らす方法としては次の４つがあります。
- アップロード済みの画像ファイルの圧縮
- 不要なサムネ画像の削除
- サムネ画像の自動生成の無効化
- 画像アップロード時に自動リサイズ
この４つの方法について順に紹介していきます。
1.画像ファイルの圧縮
画像圧縮は基本中の基本
画像圧縮に便利なのが「EWWW Image Optimizer」というプラグインです。
このプラグインを使って画像圧縮する手順は次の通り。
プラグインの導入
まずメニューから「プラグイン」ー＞「新規追加」を開きます。
そして新規追加画面の検索欄に「ewww」などのキーワードを入力。
すると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。
ちなみに、以下のページから直接ダウンロードして使うことも可。
https://ja.wordpress.org/plugins/ewww-image-optimizer/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、必ずそれを押して有効化するのもお忘れなく
画像ファイルの一括圧縮
まずメニューから「メディア」ー＞「一括最適化」をオープン。
次の画面が出てくるので、「最適化されていない画像をスキャンする」を押して圧縮が必要な画像ファイルをスキャンします。
スキャンが終わると最適化の準備が完了するので、「最適化を開始」を押してください。
次のように画像の最適化処理が始まり、現在の進捗状況が表示されます。
どのくらいの時間がかかるかはファイル数にもよります。
もし千件以上なら数時間程度はかかるので、気長に待ちましょう。
プラグインを使った結果...
このプラグインを使うと最適前と最適後のファイル数とサイズは次のようになりました。
最適化前
フォルダサイズ : 114 MB
フォルダサイズ : 82.8 MB
私の環境では最適化されていない画像が多かったせいか114MB⇒82.8MBまで画像ファイルのサイズが減り、約27.3%（31.2MB）ものサイズダウンに成功 しました。
このように圧縮されていない画像が数千件以上あるときはかなりの圧縮効果が期待できます。
2.不要なサムネの生成を無効化
WordPressでは画像をアップロードしたときにサムネ画像が自動生成されます。
自動生成されるサムネ画像サイズは主に次の４つです。
- thumbnail
デフォルトで150px × 150pxのサムネ画像
- medium
デフォルトで300px x 300pxのサムネ画像
- large
デフォルトで640px x 640pxのサムネ画像
- medium_large_size_w
横が768pxのサムネ画像。WordPress4.4から新たに追加された
これらのサイズの画像は投稿を「マガジン形式」で表示するテーマでは使われることがあるので全く無駄という訳ではありません。
しかしほとんどのテーマではこれらのサムネ画像は使用されないので、ただディスク使用量を圧迫するだけになってします。
このサムネの自動生成機能を無効にする方法については次の記事で紹介してあるので、余計なサムネ画像でディスク使用量を無駄にしたくないなら無効にしておいた方がいいかもしれません。
3.不要なサムネ画像の削除
サムネ画像の自動生成を無効化しても既にアップロードされた画像で自動生成されたサムネは使われないとしてもディスク上に残り続けてしまいます。
そこでアップロード済みの画像の不要なサムネを削除したい場合に便利なのが「DNUI - Delete not used image」というプラグインです。
プラグインが記事内で使っていない画像を自動判別してワンクリックで画像が削除できるのでとても便利です。詳しい導入方法や使い方について次の記事で紹介してあります。
もしサムネの自動生成機能を停止したけどそれ以前に作成された余計なサムネが残っているなら使ってみてください。
４.アップロード時の画像を自動リサイズ
画像を記事内に表示するときあまりにも幅や高さがでかすぎる画像の場合はリサイズしてアップロードすると思います。
ただ手動でリサイズしていると時々忘れてしまうこともあるかもしれないので、それを防ぐために便利なのが次の記事で紹介した「Resize Image After Upload」というプラグインです。
このプラグインを使えばアップロード時にプラグインが自動で指定した画像サイズにリサイズしてくれるのでファイルアップロード時に編集ソフトなどを使ってリサイズする手間が省けるので便利です。
ディスク容量で悩まないためには...
ここで紹介したプラグイン・方法を試せば、大幅にディスク使用量節約になります。
でもディスク容量が少ないサーバーを使っているなら・・・
いくら節約してもディスク容量が満杯になるまでの時間稼ぎにしかなりません。
なのでディスク使用量の問題を根本的に解決するなら、
初めからディスク使用量の多いサーバーを選ぶようにした方がいいと思います。
またWordPressでサイトやブログを運営していくなら、
それに加えて次のような条件も快適な運営をしていくのに必要です。
- 高速でページ表示速度が速い
- サーバーが安定していて落ちにくい
- 高機能で初心者にも使いやすい
詳しくは ↓ コチラのページで解説したので、ご覧ください。
もしこれから WordPressでサイトやブログを作る 、
あるいは サーバーを乗り換える予定 があるならサーバー選びは慎重に…
まとめ
ここではディスク使用量の節約術として次の４つを紹介しました。
- アップロード済みの画像ファイルの圧縮
- 不要なサムネ画像の削除
- 不要なサイズのサムネ画像を生成しない
- 画像アップロード時に自動リサイズ
画像ファイルというのはディスク容量に占める割合が多くなりがちなので、もしサイトやブログで画像を頻繁に使用しているならここで紹介した節約術を試してみるといいかもしれません。
The post WordPressでディスク使用量を大幅に減らすための４つの節約術 first appeared on Fukuro Press.
]]>The post 画像圧縮系プラグイン “TinyPng”、”EWWW”、”WP Smush” の比較 first appeared on Fukuro Press.
]]>
WordPressには画像圧縮系のプラグインがいくつかありますが、その中でもインストール数が多く使いやすいのが次の３つのプラグインです。
- EWWW Image Optimizer
- Compress JPEG & PNG images(TinyPng)
- Smush Image Compression and Optimization
この３つのプラグインを 圧縮率 という点から比較してみました。
各プラグインでの画像圧縮方法
最初に、各プラグインでの画像圧縮方法について簡単に紹介します。
１．EWWW Image Optimizer
まずメニューから「プラグイン」ー＞「新規追加」をオープン
そして新規追加画面のプラグイン検索欄に「ewww」というキーワードを入力
すると検索結果に次のプラグインが表示されるので「今すぐインストール」ボタンを押すとインストールが始まります。
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるのでそれを押すとWordPress内でこのプラグインが使用可能になります。
このプラグインを使って画像を圧縮する方法ですが・・・
まずメニューから「メディア」ー＞「一括最適化」をオープン
すると次画面が表示されるので「最適化されていない画像をスキャンする」を押すと、
プラグインが圧縮するべき画像ファイルをスキャンし初めます。
スキャンが終わると最適化の準備が完了するので「最適化を開始」ボタンをクリック
次のように画像の最適化処理が始まり現在の進捗状況が表示されます。
ファイル数によってかかる時間は異なりますが、
もし千件以上のファイルが最適化対象になっている場合は数時間程度はかかります。
２．Compress JPEG & PNG images
「Compress JPEG & PNG images」は、
有名な「TinyPng」の開発元が配布している画像圧縮系プラグインです。
画像に使われている色数を減らすことで圧縮しているので、
完全なロスレス圧縮ではないものの画質劣化はほとんど分からないレベルです。
このプラグインの導入方法や使い方は ↓つぎの記事で解説した通り
TinyPngはかなり圧縮率が高くなることで有名ですが、このプラグインもTinyPngを使うのでその分かなり時間がかかります。
数百個程度の画像でも数時間かかることがあるので、画像数が多い場合はかなりの時間がかかると思っておいた方がいいかもしれません。
３．WP Smush
このプラグインは Smush Image Compression and Optimization が正式名称。
その導入・方法は次の通りです。
まずメニューから「プラグイン」ー＞「新規追加」をオープン
そしてプラグイン新規追加画面の検索欄に「wp smush」というキーワードを入力
しばらくすると検索結果の一番上に次のプラグインが表示されるので「今すぐインストール」ボタンを押すとインストールが始まります。
ちなみに手動インストールする場合は次ページからzipでのダウンロードも可
https://ja.wordpress.org/plugins/wp-smushit/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、それを押すのも忘れずに
このプラグインによる、画像圧縮方法は次の通りです。
まずメニューから「メディア」ー＞「WP Smush」をクリック
開くと次のようなプラグインページが表示されるので、その中にある「BULK SMUSH」と書かれたボタンを押すと圧縮が始まります。
ただし無料版では一回の圧縮で50個の画像ファイルしか圧縮できないことに注意！
画像数が多い場合は複数回に分けて圧縮する必要があります。
各プラグインの画像圧縮率はこんな感じ
各プラグインを使って 700個ほど画像を圧縮 してみると、次の結果になりました。
１．EWWW Image Optimizer
圧縮前
画像ファイル数 : 714個 合計ファイルサイズ : 約20.2 MB
圧縮後
画像ファイル数 : 714個 合計ファイルサイズ : 約17.9 MB
合計ファイルサイズが 約20.2MB ⇒ 約17.9MB まで減ったので・・・
圧縮率は 約11.3% くらい
圧縮率としてはそこそこですね。
２．Compress JPEG & PNG（TinyPng）
圧縮前
画像ファイル数 : 714個 合計ファイルサイズ : 約20.2 MB
圧縮後
画像ファイル数 : 714個 合計ファイルサイズ : 約11.1 MB
合計サイズが 約20.2 MB ⇒ 約11.1 MB まで減ったので・・・
圧縮率は 約45% ほど
ロスレス圧縮で多少の劣化があるとはいえかなり圧縮率が高いです。
３．WP Smush
圧縮前
画像ファイル数 : 718 合計ファイルサイズ : 約20.1 MB
圧縮前
画像ファイル数 : 718 合計ファイルサイズ : 約18.5 MB
合計ファイルサイズは 約20.1MB ⇒ 約18.5MB まで減ったので・・・
圧縮率は約7.9% ほど。
他の２つと比べるとかなり圧縮率は悪いですね。
あと１回５０個しか圧縮できないので、他の２つより性能は劣るかもしれません。
まとめ
３つのプラグインをここでの圧縮率の結果で順位付けすると次のようになります。
- Compress JPEG & PNG
⇒ 圧縮率約４５%
- EWWW Image Optimizer
⇒ 圧縮率約１１.３%
- WP Smush
⇒ 圧縮率約７.９%
やはりTinyPngプラグインが圧倒的に圧縮率が高いです。
ただTinyPngは高圧縮率の代わりに画像数が数百個でもかなり時間がかかり、
さらに一カ月の画像数はプレミアム会員でなければ５００個まで制限されています。
もし、すぐに画像圧縮したい場合は「EWWW Image Optimizer」を使うのが良いと思います。こちらは画像数に制限はない上に完全ロスレス圧縮なので。
ただ本当にサーバー使用量を節約したいなら、時間や費用がかかっても TinyPng プラグインを使うのがベストですね。
以上、WPの画像圧縮系プラグインの使い方＆圧縮率比較でした。
The post 画像圧縮系プラグイン “TinyPng”、”EWWW”、”WP Smush” の比較 first appeared on Fukuro Press.
]]>The post 画像圧縮率が高い Compress JPEG & PNG ( TinyPNG ) の使い方＆注意点 first appeared on Fukuro Press.
]]>
画像はサイズを少しでも減らすのに有効なのが圧縮すること。
画像圧縮系のサービスやサイトは数多くあります。
その中でもpngやjpegの圧縮率がよくて劣化もしにくいのが・・・
あの有名な「TinyPng」というサービス
実はWordPressでも「Compress Jpeg & PNG images」プラグインを使えば、
TinyPngで一括圧縮したり、アップロード時に自動圧縮させることが可能なんです。
ここではその Compress Jpeg & PNG images を使い、画像圧縮する方法をご紹介！
TinyPngは無劣化圧縮？実は…
まずプラグインの紹介をする前に TinyPngを使うときの注意点 を説明します。
よくTinyPngにありがちなのは「ロスレス(無劣化)で圧縮できる」という誤解です。
ですが TinyPng本家 の説明には、圧縮について ↓こう書かれています。
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files.
はっきりと「lossy compress(不可逆圧縮 = 完全に元の画像に戻せない圧縮方法)」と書いてあります。
一説には24bitカラーを8bitカラーに変更し、使用色数を大幅に減らすことで圧縮しているのではないかと言われています。
ただTinyPngの場合は 不可逆圧縮と言ってもほぼ劣化が気にならないレベル です。
例えば次のようなグラデーション画像(サイズは約15.4KB)があるとします。
これをTinyPngで圧縮するとサイズは約7.84KBになり、次が圧縮後の画像です。
サイズがほぼ半分になったにもかかわらず画質は全く劣化していないように見えます。
実際は使用色数は元画像とは同じじゃありません。
微妙～に色数が変わってるものの、人間の眼ではその違いは分からないです。
このようにTinyPngは不可逆圧縮。
だから完全に元の画像の画質を保てるわけではないです。
でも人間の眼で見るには違いが分からないレベルの劣化 なので、画像が劣化しすぎて丸っきり別物になるという心配はありません。
「Compress JPEG & PNG images」の導入・使い方
「Compress JPEG & PNG images」プラグインを使うと、WordPress内でTinyPngを使って画像を圧縮することができます。
その導入手順と使い方は次の通り。
プラグインの導入
まずメニューから「プラグイン」ー＞「新規追加」をオープン。
新規追加画面が開いたらプラグインの検索欄に「tinypng」というキーワードを入力。
すると検索結果の一番上あたりに次のプラグインが表示されるので「今すぐインストール」ボタンを押してインストールしてください。
ちなみに次のプラグインページから直接ダウンロードすることも可。
https://ja.wordpress.org/plugins/tiny-compress-images/
インストールが完了したら「今すぐインストール」ボタンが「有効化」ボタンに変わるので、必ず押して有効化するのもお忘れなく
これでプラグインが使用可能になります。
TinyPNGアカウントの作成
次にプラグインを使用するための TinyPNGアカウント を作ります。
その作成方法は次の手順です。
まずメニューから「設定」ー＞「メディア」をクリック。
メディア設定を開いたら一番下にスクロールするとTinyPngの設定項目があるはず。
そこの「Register new account」内に名前とメールアドレスを入力し、「Register account」ボタンを押してみてください。
アカウントを登録すると登録したメールアドレス宛に次のようなメールが届くので、
その中にある「Activate your account」ボタンを押すとアカウント確認が完了します。
↓ TinyPNGで見覚えのあるパンダ君の画像つき
これでプラグインを使用するためのアカウント登録は完了です。
プラグインによる画像を圧縮手順
画像を圧縮するには、メニューから「メディア」ー＞「Bulk Optimization」を開きます。
すると次のようなページが開くのでその下に表示されている「Start Bulk Options」ボタンを押すと画像の圧縮が開始します。
数百個以上の画像があると圧縮にもかなり時間がかかるります。
終わるまで気長に待ちましょう。
「Compress JPEG & PNG images」の制限
Compress JPEG & PNG images は画像をほぼ劣化なしで圧縮できる便利なプラグインですが１つ制限があります。
それは無料会員だと１カ月の圧縮画像数は500個まで、という制限
今プラグインを使ってどれだけの画像を圧縮したかは、
TinyPngのダッシュボード画面で次のように確認できます。
もしこういった制限をなくすなら有料会員になる必要があります。
無料会員だと圧縮できる数に限りがあることに注意です。
他の圧縮系プラグインとの比較
この Compress JPEG & PNG 以外にも画像圧縮系プラグインは結構あります。
しかし圧縮率と劣化の少なさで比較すればやはり TinyPng が一番ですね。
次記事でも TinyPng と他の圧縮系プラグイン ( EWWW と WP Smush の２つ ) を比較しましたが、圧倒的に圧縮率が高くかなり優秀です。
有料会員にならないと全ての機能は使えないものの、少しでも画像を小さくしたいという場合はTinyPngを選ぶのが一番いい選択だと思います。
圧縮以外にできる画像最適化の方法
ここまで TinyPNG について紹介してきました。圧縮すれば読み込み速度も速くなるので読みやすい快適なブログが作れるはずです。
そしてこれ以外にも画像を最適化する方法はいくつかあります。
例えばその最適化案をいくつか挙げるとすると・・・
- 圧縮しやすい画像を選ぶ・作成する
- 記事最大幅にリサイズ（特にアイキャッチ）
- 検索エンジン向けに画像の説明を追加する
・・・などなど
記事文章をリライトするのと同じく、画像も最適化すれば読者にも検索エンジンにも評価の高い記事ができます。
ちなみに次がアイキャッチ画像での最適化方法についてまとめた記事です。
特に「アクセスが少ない・・・」「書いた記事が読まれない・・・」という方は最適化しておきましょう。地道に最適化すれば徐々にアクセスが集められるようになります。
まとめ
以上、 Compress Jpeg & PNG images プラグインを使い方についてでした。
本家 TinyPNGと圧縮性能は変わらないので、画像圧縮するならこのプラグインを使っておけば間違いないですね。
The post 画像圧縮率が高い Compress JPEG & PNG ( TinyPNG ) の使い方＆注意点 first appeared on Fukuro Press.
]]>