Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Gonna go a bit backwards here, my true answer is at the bottom. First part is a personal suggestion.</p> <p>For ultimate control I would go with <code>canvas</code> if you use something like the jQuery <code>resize</code> 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.</p> <p>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 <code>canvas</code> element then you should not run into much problems on any supported device.</p> <p>Typical <code>img</code> 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 <code>img</code> tag, where the <code>canvas</code> tag may be harder to use but can do all your asking for.</p> <p><strong>My answer</strong></p> <p>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.</p> <p>Here is an article I found that has some good info and a number of reference links as well.</p> <p><a href="http://programming.oreilly.com/2013/05/measuring-the-impact-of-web-page-structures-on-battery-usage-in-mobile-devices.html" rel="nofollow">How Web Pages Can Extend (or Drain) Mobile Device Battery Life</a></p> <p>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.</p> <p><a href="http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/" rel="nofollow">Responsive Web Design: What It Is and How To Use It</a></p> <p><strong>To recap</strong></p> <ol> <li><p>Is there any heavy CPU/GPU processes required to perform such scalings?</p> <blockquote> <p>The CPU/GPU of most modern phones can handle it without breaking a sweat.</p> </blockquote></li> <li><p>Do they dramatically affect on battery of mobile devices?</p> <blockquote> <p>Everything affects battery life on a phone, even if you think you have it then something you didn't see may drain it.</p> </blockquote></li> <li><p>Where can I read about it, or how can I test it?</p> <blockquote> <p>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.</p> </blockquote></li> </ol>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. VO
      singulars
      1. This table or related slice is empty.
    2. VO
      singulars
      1. This table or related slice is empty.
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload