Does bitmap image downscaling by html really affect on mobile battery life?
In short:
Is there any research/data/analysis that proves that image downscaling in
html dramatically eats battery on mobile devices? and therefore image
downscaling is strictly prohibited?
In full:
As a designer I am looking for easy way to make images look beautiful and
good for all type of screens including Retina.
As a developer I am looking for best, optimised and efficient ways of
serving code.
Well, as a designer I've found out that easy way of making retina ready
images is to use double sized images, and downscale them in html But
before you jump on me saying that it is bad practice and so on, listen to
this.
Double sized images can have reduced quality up to 60% without any visual
compromising of quality. No artefacts at all.. And the final size can be
even smaller than standard images with 80% quality. That works as long as
the size of the source was bigger that required image. I hope that makes
sense for you.
Here is an example:
   <!-- 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>
http://jsfiddle.net/UXjny/
My questions are:
1. Is there any heavy CPU/GPU processes required to perform such scalings?
2. Do they dramatically affect on battery of mobile devices?
3. Where can I read about it, or how can I test it?
All what I've found is some notes from Wikipedia:
Scaling is a non-trivial process that involves a trade-off between
efficiency, smoothness and sharpness.
With bitmap graphics, as the size of an image is reduced or enlarged, the
pixels which comprise the image become increasingly visible, making the
image appear "soft" if pixels are averaged, or jagged if not.
With vector graphics the trade-off may be in processing power for
re-rendering the image, which may be noticeable as slow re-rendering with
still graphics, or slower frame rate and frame skipping in computer
animation.
So I assume only vector graphics like SVG may have overhead on CPU and
GPU. Bitmap seems not that bad.
 
No comments:
Post a Comment