この記事では、画像圧縮パンダこと『TinyPNG』での画像ファイル容量削減について紹介します。
本ブログのようなWordPressで使用する多数の画像たちは、何も対策しないとせっかく書いた記事やサイトの表示速度が遅くなる原因となり、検索順位まで下げてしまいかねません。
とはいえ、画像を1つ1つソフトで読み込んで対応するのは大変ですよね。
そのような煩雑な作業がいらず、ドラッグアンドドロップだけで機能してくれる素晴らしいwebサービスがTinyPNGなんです。
この記事を読めば、今後はTinyPNGを使って最小限の労力で画像圧縮ができ、超簡単にWordPressの高速化に貢献することができますよ。
以前の記事で紹介したRalphaもそうですが、手を加えることが付加価値にならないような作業は極力自動化して省力化するべきですね！
TinyPNGとは
TinyPNG
https://tinypng.com/
読み方は”タイニーピーエヌジー”です。
サイトにアクセスすると、少々不気味なCG風パンダがお出迎えしてくれますが、このサイトの素晴らしさを体感するとこのパンダも可愛く見えてくるはずです。
以下に簡単にサイトに記載されている英文について日本語訳して概要を説明したいと思います。
Smart PNG and JPEG compression
More than 1 billion PNG and JPEG images optimized and still counting!
スマートなPNGとJPEG圧縮
1ビリオン（10億）以上のPNGとJPEG画像が最適化され、なお増えている！
”10億以上”ですよ。日本の人口が1億2000万人程度ですので、赤子から老人まで含めた全国民が8回ずつ使用したくらいの利用率ですね（よくわからない）
What does TinyPNG do?
TinyPNG uses smart lossy compression techniques to reduce the file size of your PNG files. By selectively decreasing the number of colors in the image, fewer bytes are required to store the data. The effect is nearly invisible but it makes a very large difference in file size!
TinyPNGが何をしてくれるのか
TinyPNGはあなたのPNGファイルのファイルサイズを減らすために、スマートな非可逆圧縮技術を使用しています。画像から選択的に色数を減らし、データを保存するのに必要なバイト数をより少なくします。これによる影響は目視できない程度ですが、ファイルサイズにおける違いはとても大きなものとなります！
ここ、本当にすごいです。
正直、圧縮前と圧縮後の画像を並べて見比べても違いがわかる人は基本的にいないと思います。
それなのにファイルサイズは70％強小さく圧縮できたりするのだから驚きです。
Why should I use TinyPNG?
PNG is useful because it’s the only widely supported format that can store partially transparent images. The format uses compression, but the files can still be large. Use TinyPNG to shrink images for your apps and sites. It will use less bandwidth and load faster.
なぜTinyPNGを使うべきなのか
PNGは便利です。なぜならPNGは部分的な透過画像の保存を広くサポートされた唯一のフォーマットだからです。このフォーマットは圧縮をしていますが、なおファイルサイズが大きくなりがちです。TinyPNGを使い、あなたのアプリやサイトの画像ファイルサイズを縮小しましょう。それによって少ない帯域幅の使用で済み、読み込みがより速くなるでしょう。
ここではPNGファイルの特性を取り上げて、PNGを使わざるを得ない事情があるのはわかるけどファイルサイズが大きくなりがちだから、TinyPNGを使ってみなよ というお誘いになっています。
ここではPNGに限定した話になっていますが、前述のとおりサイトはJPEGの圧縮にも対応しているのでご安心を。
なぜTinyPNGを使うのか
筆者がなぜTinyPNGを使いだしたのか、簡単に説明します。
何もダウンロード・インストールしなくて良い
TinyPNGはwebで処理が完結するサービスです。
つまり画像の圧縮処理において何もダウンロードする必要も、インストールする必要もありません。
年齢を重ねていくと些細な手間がどんどん億劫になっていきますよね。
用途に応じて色々なソフトをダウンロードしたり、インストールしたり、ファイルを管理したり等、面倒な作業は極力避けたいのです。
しまいにはクリックするのも面倒くさいとか。
TinyPNGのパンダはそんなズボラ人間にも優しく手を差し伸べてくれます。顔は怖いけど。
操作が単純明快で簡単
下の項目で詳しく使用手順を説明しますが、使用方法は本当に簡単です。
何も設定する必要もないですし、正直説明しなくても直感でわかるくらいです。
処理が鬼のように速い
サイトやブログに画像を掲載したいときとなると、必要な画像が1つではないことがほとんどです。
画像1つの処理に何分も待たされていたら、せっかくの執筆意欲も冷めてしまいますよね。
なんとTinyPNGでは画像を一つずつ処理する必要がなく、20個までの画像ファイルを一気に処理してもらうことができます。
実際に使ってみるとわかりますが、TinyPNGでの圧縮処理はほぼ数秒で終わります。
圧縮処理の合間だけしか飲めないホットコーヒーがあったら火傷しそうなくらい鬼速いです。
チャレンジしたい人はアイスコーヒーにしておきましょう。
鬼は襲ってこないので大丈夫です。
圧縮後の画像がキレイなまま
先程の公式サイトの説明でも書いたことですが、圧縮後の画像はキレイなままです。
ファイルサイズが30％くらいまで圧縮されてもボケボケで汚くなっていたらダメですが、TinyPNGなら人間の目には変化がわからないクオリティのまま、ファイルサイズを一気に圧縮してくれます。
TinyPNGの使い方
TinyPNGの使い方は、上の参考画像で赤く囲った部分に圧縮したい画像ファイルをドラッグ＆ドロップするだけです。複数のファイルを同時に選択して入れることも可能です。
※一度に処理できる画像は20ファイルまで、1つあたりの最大ファイルサイズは5MBまでですが、いったんブラウザを更新して処理を分けて行えば良いだけなので1日に処理できる画像量などの制限は特にありません。
画像のドラッグ＆ドロップではなくPCのディレクトリからファイルを選択したい場合は、赤く囲った点線部分をクリックするとファイルを1つずつ選択することもできます。
2024年現在、対応しているファイル形式はPNGとJPG(JPEG)だけではなくWebPやAPNG(animated PNG)にも対応しています。
圧縮したい画像ファイルがサイトに読み込まれると、自動的に圧縮が始まり一気に処理が完了します。
圧縮後の画像ファイルは、赤丸で囲んだ「download」というリンクからであれば1つずつダウンロードができ、「Download all」というボタンからは圧縮後の画像ファイルをすべてまとめたzipファイルでダウンロードすることもできます。
※現在は「ドキュメントの絵とJPEG等の文字が一緒になった四角のアイコン」をクリックすることで個別に圧縮後の画像がダウンロードできます。
zipファイルでダウンロードした場合は”tinified”というフォルダが自動で作成されてファイルが収納されるので、圧縮前の元ファイルを上書きしてしまう事故が防げます。
ただしzipファイルは中身の画像を使用する際に解凍するひと手間が生じるため、画像のファイル数が少ないときは個別にダウンロードしたほうが楽です。
※個別にファイルをダウンロードする場合でも、保存先のディレクトリに圧縮前のファイルがあると”ファイル名 (1).png”というように一応自動でファイル名を変更してくれます。
元ファイルを保存しておきたい場合は、くれぐれも圧縮後のファイルで上書きしないように気をつけてください。
圧縮前のファイルサイズと、圧縮後のファイルサイズ、その圧縮率の見方も一応説明しますが、一目瞭然ですよね。
583.5KBだったファイルが157.6KBに圧縮され、その圧縮率は-73%。つまり元のファイルサイズと比べて27％の大きさになったということ。
“Panda Just saved you”という下の方の部分は、複数圧縮処理した画像ファイルの結果をまとめた成績の総括です。
上の画像では2つの圧縮で73％のファイルサイズ圧縮ができ、合計で688KBのファイルサイズを節約したことを示しています。
まとめ
このブログでは、最初の記事の画像からとにかくTinyPNGを使っています。
本当に簡単に処理ができるので、私のような面倒くさがりズボラ人間でもめげずに継続使用できています。
TinyPNGで画像圧縮処理が完了すると不気味なパンダが嬉しそうにバンザイをするのですが、その変化が面白くて、つい餌やり的な感じで画像圧縮を依頼したくなるんです。
ならないかなぁ？
コメント