Does bitmap image downscaling by html really affect on mobile battery life?

Question

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.

Answer 1

Gonna go a bit backwards here, my true answer is at the bottom. First part is a personal suggestion.

For ultimate control I would go with canvas if you use something like the jQuery resize event then you can make a responsive canvas that will load/adapt to the environment based on your own choices, CPU in general will always be a little higher going this route, and a fair amount of time setting it up.

This will also let you load a different version of the image based on the screen width, giving you easy access to retina and more mobile friendly images. Generally as long as the image manipulation itself is kept to a minimum and the mobile device/browser can use the canvas element then you should not run into much problems on any supported device.

Typical img tags are automatic, meaning other then some styling controls you have nothing else you can really do to it, so from a developer point of view there is far less controls with the img tag, where the canvas tag may be harder to use but can do all your asking for.

My answer

Downscaling on the client side, while being pretty optimized is still something that takes some resources. However I do not believe it would affect your battery more then any other app, it would also greatly depend on the browser app you are using, the cpu of the phone, and the type of battery the phone uses.

Here is an article I found that has some good info and a number of reference links as well.

How Web Pages Can Extend (or Drain) Mobile Device Battery Life

It goes into explain that smartphones are getting better and better, but batteries are not getting the same treatment, as we get better smartphones we are not really getting better batteries. So if a user runs out of battery to fast browsing the web there is not a whole lot a developer can do. Optimizing the site will only go so far, and following responsive design still has a lot of wasted resources.

Responsive Web Design: What It Is and How To Use It

To recap

1. Is there any heavy CPU/GPU processes required to perform such scalings?

   The CPU/GPU of most modern phones can handle it without breaking a sweat.

2. Do they dramatically affect on battery of mobile devices?

   Everything affects battery life on a phone, even if you think you have it then something you didn't see may drain it.

3. Where can I read about it, or how can I test it?

   Refer to the links I added for some reasonable reading, the first link shows the amount of phones may surpass the population of the planet soon. With that many devices, how can you test every variation of phone/battery? there Is just no way to test it all.