正しい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メディア運営
951842182_257517221_o

Synology DS412+でバックアップ環境を最強にしてみた

午前中にふと思いつき、気がつけば国境を超えて来てしまったシンガポール(行こう!と思ったらすぐシンガポールにいけるのが、ジョホー

正しいWEBメディア運営
wordpressとアメブロ。最強ツールを手に入れた!

アメブロとWordPressを連動させる必殺ツール

アメブロで情報発信を始めた。WordPress(ワードプレス)も作ってみた。でも、どうやって使い分けていけばいいんだろう? そ

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

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

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

正しいWEBメディア運営
Todoist

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

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



Leave a Reply

*