52

PNGファイルサイズを圧縮/軽量する方法[ImageAlphaとImageOptim編]

ブラウザのPNG対応も進み、透過PNGを使うのも怖くない時代になりました。
スマートフォンサイトでは、jpgよりもPNGを使用しておいた方が画像のレンダリングでのバグは安全です。(Retinaサイズに対応する場合に正確に2倍にしてない画像をiOS5/safari環境で縮小するとjpgではレンダリングバグが発生します)

ファイルサイズを軽量化することはWeb/アプリ製作においては基本中の基本です。

ではPNG時代の軽量化はどうすれば良いのか?

自分は下記の2種類のアプリケーションImageAlphaImageOptimの2つのアプリを使って軽量化をしています。


imageAlpha.jpg
http://pngmini.com/


imageOptim.jpg
ImageOptim
http://pngmini.com/


使用方法
  1. まずは、ImageAlphaを使用します。
    ImageAplhaはPNG画像の減色を行いますので、色数が多い画像に対しては、かなりの容量を減らせます。また透過PNGにも対応。


  2. ImageAlphaを使用した画像をImageOptimでさらに圧縮します。
    ここで大事なのはImageAlphaが減色ツールだったのに対して、ImageOptimはメタデータを削除し、画質を劣化させずに画像データを軽量化・最適化する事です。
    そのため、必ず順序はImageAlpha → ImageOptim の順番で行わないと
    ImageOptimの意味が無いです。

ぜひPhotoshopやIllustratorから、「Web用に保存」したスライスをそのまま使用してる方は、試して、より最適化されたWeb製作に役立ててみてください。

51

[iPhoneアプリ開発者の方向け]iicon | iOS/iPhoneアプリアイコンギャラリーサイトに掲載するiPhoneアプリを募集します。

iiconではiPhoneアプリ開発者の方向けに掲載したいアプリを募集しています。
特に個人開発者の方で無料で宣伝をしたい方はぜひご活用ください。

ご応募詳細は下記URLに掲載をしていますので、よろしくお願いします。


iicon | iOS/iPhoneアプリアイコンギャラリーサイト

50

Google Web Designer ベータ版リリース、グラフィックツールとしての可能性

http://www.google.com/webdesigner/index.html

2013年10月1日にGoogle Web Designerというサービスのベータ版がリリースされました。

概要
  • Google Web Designer は、HTML5 で構築された高度なウェブ アプリケーション。
  • HTML5 広告をはじめとするさまざまなウェブ コンテンツをデザインが作成できる。
  • デザイン ビューで描画ツール、テキスト、3D オブジェクトを使ってコンテンツを作成し、タイムラインでオブジェクトをアニメーション化できます。
  • コンテンツの作成が完了したら、人間が解読可能な HTML5、CSS3、JavaScript を出力できます。
最終的には、HTML5、CSS3、JavaScriptで出力できるようですが、軽く作成してみた結果はpositionを多用していて、PhotoshopやFireworksでHTML書き出しした時と同じような状態だったので、もし使用するのであれば、現時点ではiframeで読み込む広告バナーの作成レベルという印象でした。
では、グラフィックソフトとしては、どこまでデザインが出来るのか?

現時点で備わっているグラフィック機能
  • ペン ツール
  • テキスト ツール
  • シェイプ ツール
  • アニメーション ツール
  • コンポーネント ツール
  • 3D ツール
  • イベントツール
が備わっていてますが、レイヤー機能やスポイト機能などは無く、書き出し/保存もhtmlになってしまうので、PhotoshopやIllustratorの代替ツールとしては正直まだ無理かと。

GoogleアプリをPhotoshop/Illustratorの代替ツールにするなら
WebサイトのデザインをGoogleアプリで行うのであれば、図形描画(Drawing)ツールの方がまだ使えると思います。
図形描画ツール(Drawing)
(※個人的にはハッカソン的な開発を行うときは、Drawingでメンバーと画面共有しながらWireFrameとラフデザインを一気にこのツール上で行ってしまいます。)

やはり、Photoshop CCやIllustrator CCほどのグラフィックツールの代替ツールの登場はまだまだ先になりそうですが、Google Web Designerの登場によりGoogleがパワフルなグラフィックツールを開発する可能性が非常に大きくなったのは確実だと思いました。


Google Web Designerヘルプ(日本語版)

49

スマートフォンサイト製作で画像ファイルの最適な実装方法は?Base64変換の可能性

Web制作者のみなさんは、PCサイトだけではなくスマートフォン向けのWebサイトを制作する機会がかなり多くなっていると思います。

スマートフォン向けのサイト製作で気をつけるべき点に、ページ容量とリクエスト数があります。画像ファイルの実装に関しては、以前から2つの実装方法が多く使われてきました。

例としてPC版のYahoo!JAPANを参考に見ていきたいと思います。

  1. 画像ファイルを単体で実装
    ex.Yahooロゴ画像


  2. 汎用的に使用する画像をSprite化して実装
    ex.YahooのSprite画像
この場合、
1は、ロゴ画像が単体ファイルで実装されているので1リクエストが発生します。
2は、SpriteはW:64px H:2720pxとサイズは大きいですが、リクエストはロゴと同じく1です。

ロゴ画像もSpriteに入れた場合は、リクエストは2→1に減ります。
多くのサイトはロゴ画像も汎用パーツなので、Spriteに入れてしまうケースが多いですが、Yahoo!JAPANは単体ファイルにしていました。

では、スマートフォンサイトの場合はどうアプローチすればよいのか?

基本的にはPCサイトと同様の2つのアプローチで問題ありませんが、もう一つ選択肢を増やして考えます。

  1. 画像ファイルを単体で実装
  2. 汎用的に使用する画像をSprite化して実装
  3. 画像ファイルをBase64変換をして実装
Base64変換とは何か?

簡単に言えば、画像ファイルを文字列として表示させることです。
FP(ガラケー)向けのWeb製作をした事がある方は、再配布禁止のために画像ファイルをテキストエディタで開いて、特定のコードをコピペする作業があったので見た事があると思いますが、要するに画像ファイルを分解すると、文字列で構成されています。

画像ファイルを64種類の英数字に変換して、表示させる実装方法が3番目にあげたBase64実装です。

変換の仕方は、ターミナルからコマンドで行う方法もありますが、下記の方法で試してみると良いです。

実装例としては、
imgタグに記載
<img src="data:image/hoge.png;**Base64変換した英数字**" />

backgroundプロパティのurlに記載
hoge{
 background-image:url(data:image/hoge.png;**Base64変換した英数字**);
}


Base64変換をするのに適した画像ファイルは、
  • 色数が少ない画像
色数によって文字列の長さが変わります。
そのため、通常の画像圧縮をした後に変換した方が良いです。

また、色数が多い写真などはそのままjpgかpngの方が1リクエストを減らすよりも容量が小さくなる事があるため、何でもBase64変換した方が良い訳ではありません。


では、Yahoo!JAPANの例に戻ってスマートフォン版のYahoo!JAPANはロゴの部分を、

[PC]画像ファイルを単体で実装
ex.Yahooロゴ画像

 ↓
[SP]汎用的に使用する画像をSprite化して実装

...Spriteに組み込まれていました。。

まとめ
  • スマートフォンサイトでの画像ファイルの実装方法は3つの選択肢から検討する
  • Base64変換して実装する場合は、リクエストを減らせるが、本当に文字列が画像ファイル(jpg or png)よりも容量が減っているのかを確認する
  • Base64変換する画像は、色数が少ないものに限定した方がよい
  • 1.2.3の実装方法の使い分けが軽量化に繋がる

48

[重要なお知らせ]文字数カウント/文字数カウンター:numMojiなんもじが引っ越します。

2013年10月1日より「文字数カウント/文字数カウンター:numMojiなんもじ」は下記のURLへ引っ越しをしますので、ブックマークをしていただいている方は、お手数をおかけいたしますが、ブックマーク変更の程よろしくお願いします。

http://www.nummoji.kenjisugimoto.com/
Page: <<前の5件  1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11