グラデーションでの透過がある画像を軽量化するための覚え書き

  • ノウハウ
  • 2014.5.21
  • かいたひと:ゆかと

ゆかとです。今回は制作関連の話を久しぶりにします。

ポッケでは本格占いサイトをたくさん作っていますが、占いのサイトってきれいな画像をたくさん使うんです。
しかもスマホの高解像度画面(Retina等)への対応で素材画像を書き出していると、PC版よりも大きい画像を使う事態に遭遇することも珍しくありません。
背景透過の素材として使おうと書き出してみたはいいものの、境界線がジャギってガビガビになったり、PNG24にしたらやたらと重くなったり。
…ページ容量は軽いほうが良いですよね。特にスマホはスマホとはいえ「phone」なので。

ということで「グラデーションでの透過がある画像を軽量化」する手順を覚え書きします。
↓「グラデーションでの透過」はこのようなものを指しています。
「グラデーションでの透過」の例
具体的に何をするかというと、PNG8で透過グラデーションを効かせます。

※ググればPNG画像を軽量化をしてくれるサイトやフリーソフトなどは見つかりますが、よく知らないところにリリース前の素材を投下するのは「うーん…」な感じなので、自前でやることを前提としています。

こんな感じです

成功例

214KB→59.5KB
…なんと72%の容量削減に成功!
(上2つと下2つは背景色を変えているだけで同じ画像です)

元画像と変換後画像の比較

失敗例

背景色を変えたら大変なことに。
(上と下は背景色を変えているだけで同じ画像です)

Photoshopで書き出したPNG8画像

準備するもの

  • 元画像 …PhotoshopにてPNG24で出力しました(きれい!重たい!)
  • Fireworks …CS5.1を使いました

手順

  1. 元画像(きれい!重たい!)をFireworksで開く
  2. 「最適化」ウィンドウ(※1)でPNG8・アルファチャネルに設定
    Fireworksの最適化ウィンドウ
    ※1 F6を押すと出てきます。
  3. ファイル→書き出し
  4. できあがり(そこそこきれい!軽い!)

注意

出来上がったものをPhotoshopで開くと透過グラデーション部分がガビガビになります。世知辛いですね。

あとはPNG8なので、あまりにも色数が多い画像に対しての場合や画像の綺麗さに厳密にこだわる場合は避けるほうが良いです。


IE6対応が必須だった時代にPNG画像を避けてきたので…という言い訳をしつつも、まだまだ勉強が足りないなぁと痛感しています。
そんな感じで試行錯誤しつつも、ポッケの占いサイトは続々とスマホ最適化中です!ぜひ覗いてみてくださいね。

↓例として使った素材はこのサイトのものです。※ガラケー・スマホからご覧ください。
haruka.pocke.bz

株式会社ポッケ

株式会社ポッケ採用情報

ポッケでは、楽しく働いて世の中を笑顔に出来る仲間を募集しています。興味のある方はこちらをご覧ください。

最新記事

ブログ記事を検索