Ipad Website Image Performance And Memory

On iPad safari, is it better to include images as CSS background images or use the html tag ? Do you have any ressources about it ? thanks

Solution 1:

I just runned this test on my iPad Safari. And looks like CSS is faster.

Try it yourself on you iPad.

3 tests: Image tag src:

img.onload = loadHandler;
img.src = getUrl();

CSS Background

bg.style.background = "url('" + getUrl() + "') no-repeat";

Image tag src without onLoad

img.onload = null;
img.src = getUrl();

Here I got the following result:

Image tag src: 5,369 Operations/Sec.

CSS background-image: 19,554 Op/S.

Image Tag Src (without OnLoad): 2,757 Op/S.

BTW, this test was not created by me.

Edit: As pointed to me, I did a new test to test the performance in another way.

To be more consistent, I tried to see each solution in a different way. I used the following code.

var count = 1;
function add(){
  var p = document.getElementById("parent");
  if (false){
    var d = document.createElement("div");
    p.appendChild(d);
    d.style.background = "url('" + getUrl() + "') no-repeat";
  } else {
    var d = document.createElement("img");
    p.appendChild(d);
    d.onload = null;
    d.src = getUrl();
  }
  d.style.position="absolute";
  d.style.top=0;
  d.style.left=0;
  d.style.zIndex=count;
  d.style.width=256;
  d.style.height=256;
}
function getUrl() {
  var base = "http://a.tile.openstreetmap.org/16/";
  base += count + "/" + count + ".png";
  return base;
}   
function init(){
  while(count <= 10){
    add();
    count++;
  }
}

note 1: Im using z-Index so the new add element is always on top.

note 2: Im loading different imgs so the browser doesnt cache.

note 3: I know that I tested it on a common browser. Although, we can see its behavior and discover what to expect in the iOS/Safari.

Here's what happened.

Memory: Both solutions kept the resource in the same way. So theres no different in memory.

Calls: Both solution called the same amount of paint and load. Although, the IMG always called an event. Even when I explicitly put "onload = null;".

Here's is the calls for DIV

Here's the calls for IMG

Solution 2:

Not directly an answer, but since others might end up here while searching, I figured I would share some insight:

I had a rather large css-sprite in png, that performed quite badly on ipad. Switching from png to jpg had a massive impact on the rendering performance (to the better). There seems to be some hints as to why on this page: https://gist.github.com/KrofDrakula/3639830