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

WEB動画配信に最適な録画セットを揃えてみた!

お疲れ様です。【マーベリックWEBメディア部】主将の宮本です。 今日はですね、『もっと動画でも情報を発信できるようにしよう大計

正しいWEBメディア運営
amazons3-transmit

転送量が多くて悩んでいるのでAmazonS3 に移行!Transmit でアクセスできるようにしてみた。

最近の悩み・・・それは転送量。 転送量っていうのは、レンタルサーバのプランによっておよそ決められていて、それをあまりにも超過し

正しいWEBメディア運営
ツールに埋もれないために

ツールやサービスに埋もれないために

「WEBメディア運営」を続けていくにつれて「記事を書く」以外にやることが次第に増えていきます。 中には本当はやらなくてもいいこ

正しいWEBメディア運営
Mindnode vs Scapple

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

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



Leave a Reply

*