ウェブキットラスターvsベクトル画像

Question

WebkitブラウザのHTMLを設計する際に、解決の問題に取り組もうとしています。 基本的に問題は、Webkitブラウザが240x320から960x640までの解像度を持つことができ、それぞれの画像/アイコンを個別に設定することはできませんが、すべてのデバイスで同じように見えるようにすることです少なくとも）。

画像（パーセンテージでの作業を）作品スケーリングが、それは、性能劣化です： http://code.google.com/speed/page-speed/docs/rendering.html#SpecifyImageDimensions

他のオプションのWebKitでサポートされていますが、私が起こっているパフォーマンスに与える影響を認識していないですされてベクターグラフィックスを使用していますページ/アプリにあります。

いくつかの標準的なよく知られている解像度のアイコンセットをいくつか用意しています。これらのグループ以外のブラウザを使用すると、ユーザーのネイティブ解像度に最も近い小さなスケールが適用されます。

基本的に私が求めているのは、性能を念頭に置いてこれを達成するための最善のルートは何でしょうか？

おかげ -Assaf複雑な方程式は、それらを作成するために実行されているよう

Answer 1

Vector graphicsは、実行時のパフォーマンスの面で常により高価です。それが言われていますが、フレームごとに再描画されるかどうか、または汚れた状態でない限り結果がキャッシュされているかどうかはわかりません。

私は、よく知られている解像度の場合、いくつかのアイコンセットを用意し、必要に応じてマイナースケーリングを適用することをお勧めします。

Answer 2

最初の回答は役に立たない。ベクターグラフィックスはPNGと同じくらい小さくてもよく、使用権は透明性やその他のさまざまな優れた機能をサポートできます。

唯一の問題は、画像の一部が拡大している完璧なピクセルを探していると問題が発生する可能性があるということです。

また、イラストレーターからhtml5 canvasプラグインを使用して、html5キャンバスに直接エクスポートすることもできます。

行アイコンのWebkitブラウザでは、Webkitがデスクトップブラウザのアイコンの拡大/縮小を許可しないプロパティを設定します。あるいは、いくつかのアイコンには小さなSVGが含まれています。

これらは十分にサポートされており、優れた動作をしています。無料のフォント作成ツールを使用してイラストレーターのベクターグラフィックスをフォントに貼り付けることで、Webフォントを使用して単純なテキストとして任意のサイズアイコンを呼び出すことができます。私たちはこの技術を使用します。