正しいWEBメディア運営

軽い画像は絶対正義!PNG画像のデータサイズを1/3に軽量化する方法

このエントリーをはてなブックマークに追加
level001
PNG画像のデータサイズを1/3に!
bnr_松山式#1

『WEBメディア』上では、テキストに加えて画像を使用することも多い。特に何らかのカスタマイズを行っていくような場合、背景を透明にすることができるPNG形式の画像は重宝する。(JPGでは、背景を透明にできない)

「そしたら、JPGよりPNGの方が便利じゃん!全部PNG使えばいいんじゃね?」

という意見もあるかもしれないが、そういうわけでもない・・・。なぜならば、PNGは他の画像形式に比べて、データサイズが大きくなりがちなのだ。

データサイズが大きくなると何が起こるのか?

読者が『WEBメディア』に訪れた時の表示速度が落ちる。日本ではすでにインターネット関係のインフラが整っているので、昔ほどイライラしてしまうほどの影響はないかもしれない。でも、画像を多用していると1ページのサイズが大きくなり、表示速度が低下。読者が待ちきれずに他のサイトへ移動してしまう・・・というようなマイナスの要因になってしまう。どう考えてもプラス要因ではないことは確かだ。

加えて、サイトの表示速度はSEOの面でも影響してくる。検索エンジンが高い評価を行って検索上位に持ってくるのは、いかにユーザーのためになるか?というところが基準。その基準の中では、サイトの表示速度が遅いとやっぱりマイナスになってしまうのだ。

PNG画像のデータサイズを1/3にしてしまおう!

今までぼくは、Photoshopの「WEB用に保存」という機能を利用してPNG画像を作成していた。けれども実は、同じPNG画像でもさらに軽いPNG画像にしてしまう神プラグインを見つけてしまったのだ。(もちろん、画質が悪くなったりしない!)

 見つけたのはこれだ!『pngquant』

Mac/Windows共に対応!ご丁寧にPhotoshopのプラグインまで用意してくれている(感謝!)。早速『Photoshop plug-in for Mac』をダウンロードして使用してみた。

STEP01: プラグインのダウンロード

まずはここから、 pngquantのプラグインをダウンロード

STEP02: プラグインをインストール

「pingquant-plugin.zip」がダウンロードされるので、普通に解凍すると、以下の2つのファイルが入っている

  • pngquant.plugin
  • README.txt

この内、「pngquant.plugin」を /Applications/Adobe Photoshop C*/Plug-ins/ に移動させれば、インストール完了。Photoshopを起動させていた場合は、一旦再起動する。

ちなみに、 /Applications/Adobe Photoshop C*/Plug-ins/ というのは、Applicationsフォルダの中にある、Adbe Photoshop CCフォルダの・・・さらにPlug-insフォルダの中。ということ。

早速pngquantを使ってみる。

pngquantの使い方

テスト用に、ぼくのイラスト画像を使用。幅500px、縦300pxで、背景を透明にしている画像だ。普通にPhotoshop上で「WEB用に保存」した場合が以下の画像。

pngquant実証実験

結果、71kbのデータサイズになった。

次に、「pngquant」を使ってみる。「pngquant」を使うには、「別名で保存」でフォーマットの欄から「PNG for WEB(pngquant)」を選択する。

pngquantの使い方

「pngquant」を使って書きだした画像が以下。

pngquant

結果、21.7kb。なんとデータサイズを1/3にすることに成功!!他の画像でも試してみたが、ぼくの環境ではほぼ1/3のデータサイズに縮小することが出来た。見比べても分かる通り、画像の劣化などは見られない。

個人的には感動ものだ!!ありがとう製作者さん。これでまだ地味なところではあるけれども、すばらしい「WEBメディア」構築に磨きが掛かりそうだ!!

追伸

Photoshopを利用していない場合は、アプリ版もあるようだ。

 『pngquant』 同じく、このサイトからダウンロード可能なので、ぜひ試してみて欲しい。

このエントリーをはてなブックマークに追加

人生の向かう先が見えず悶々とした日々から抜け出したくて、転職を決意したぼく。主将宮本。勤務先はなんとマレーシアだった。。。ぼくは愛する妻と生まれたばかりの子供を日本に残し、単身マレーシアへいくことを決断した。

マレーシアに来て、WEBメディアに関わるようになり、日本よりも物価が低い国での暮らしも知り、アジア各国を回って経済を知り・・・投資を知り、騙されたりもして、辿り着いた先。

ぼくは『マーベリックWEBメディア部』を創り活動を始めた。ぼくが知り得るWEBメディア運営の情報を、メルマガという形で部員全員に共有させていただき、部員全員で「好きを仕事に」を目指していくWEB上の部活動だ!

どんなビジネスをするにしろ、これからはWEBメディアの運営が不可欠。期間限定で無料登録公開中。

マーベリックWEBメディア部 部員登録(メルマガ登録)

お名前(姓)*
お名前(名)
メールアドレス*
follow us in feedly

このカテゴリーの関連記事
正しいWEBメディア運営
Mindnode vs Scapple

MindNode(マインドノード) VS Scapple(スキャプル)!軍配はどっちだ?

考えをまとめるってことは、毎日生きていく上で必ず必要な能力ですよね。 新しいビジネスを考えている時。 新しいWEBサイトのアイ

正しいWEBメディア運営
Todoist

神ツールTodoist!これでタスクは10倍早く処理できる!

いかに自分は仕事をせずに、仕事をするか? 怠け者なぼくにとっての永遠のテーマ。。。 仕事したくないのに、仕事したい? 怠け者な

正しいWEBメディア運営
iPad mini Retinaモデル

新型「iPad mini(Retinaモデル)」初代と比較してどっちが買い?スペック徹底比較

新型「iPad mini」が発表されましたね。これまで、初代iPadで粘ってきましたが、新型「iPad mini」は買いたいと

正しいWEBメディア運営
1409928061_featured.png

期待のWordPress(ワードプレス)ブログエディタ『Blogo』!MarsEditから乗り換えてみた!

マーベリック部員のひとりから、『Blogo』というブログエディタがいいでー♪ ということを聞きつけ、早速試してみた。 使ってみ



Leave a Reply

*