要するに
、html での画像の縮小がモバイル デバイスのバッテリーを劇的に消費することを証明する研究/データ/分析はありますか? したがって、画像の縮小は固く禁じられていますか？
要約:
デザイナーとして、Retina を含むあらゆるタイプの画面で画像を美しく美しく見せる簡単な方法を探しています。
開発者として、コードを提供する最適で最適化された効率的な方法を探しています。
そうですね、デザイナーとして私は、Retina 対応の画像を作成する簡単な方法は、2 倍のサイズの画像を使用し、それらを html でダウンスケールすることであることに気付きました。
2 倍のサイズの画像は、視覚的な品質を損なうことなく、最大 60% まで品質を下げることができます。アーティファクトはまったくありません。最終的なサイズは、80% の品質の標準画像よりもさらに小さくなります。ソースのサイズが必要な画像よりも大きい限り、これは機能します。それがあなたにとって理にかなっていることを願っています。
次に例を示します。
<!-- Standard Image Container. size 500x497, @80 quality and 77KB size -->
<div>
<img src="https://dl.dropboxusercontent.com/u/15137556/500x497%4080.jpg" width="500" height="497" alt="Standard Image. Original size 500, @30 quality and 77KB size">
</div>
<!-- Retina Hi-Res Image Container. size 1000x994, @45 quality and 74KB size -->
<div>
<img src="https://dl.dropboxusercontent.com/u/15137556/1000x994%4045.jpg" width="500" height="497" alt="Hi-Res Image. Original size 1000, @30 quality and 47KB size">
</div>
私の質問は次のとおり
です。1. そのようなスケーリングを実行するために必要な重い CPU/GPU プロセスはありますか?
2. モバイル機器のバッテリーに劇的な影響を与えますか?
3. どこでそれについて読むことができますか、またはどのようにテストできますか?
私が見つけたのは、ウィキペディアからのいくつかのメモです。
スケーリングは、効率、滑らかさ、鮮明さの間のトレードオフを伴う重要なプロセスです。ビットマップ グラフィックス
では、イメージのサイズが縮小または拡大されると、イメージを構成するピクセルが徐々に見えるようになり、ピクセルが平均化されている場合はイメージが「ソフト」に見え、そうでない場合はギザギザに見えます。ベクター グラフィックスでは 、画像を再レンダリングするための処理能力がトレードオフになる可能性があります。 これは、静止グラフィックスで再レンダリングが遅くなったり、コンピュータ アニメーションでフレーム レートやフレーム スキップが遅くなったりすることで顕著になる場合があります。
したがって、SVG のようなベクター グラフィックスだけが CPU と GPU にオーバーヘッドがあると思います。ビットマップはそれほど悪くないようです。