0

Background I've been doing a bit of image manipulation recently in PHP/JS. The basic functionality is such: Web page loads, an <img> tag points to a PHP script which generates an image "on the fly". Interacting with various parts of the page changes the src via jQuery's .attr('src', 'newsrc').

I had thought about putting the image in as a background image on the div, and using jQuery's addClass() to change the image but jQuery seemed the better option. My question is, which would be quicker? I've ran some tests and they're both around the same performance wise however I did wonder what should theoretically be the quicker method.

1 Answer 1

3

Technically, there is no quicker or slower alternative: it's the same request to the same resource, and the processing and sending of the image would probably take much more time than the displaying on client side.

The only difference is the perception by the user, with a major difference between <img> and background-image. If <img> doesn't specify its width and height, after the image is loaded, the <img> will expand, usually forcing the page re-flow. This won't happen with background-image.

Obviously, if you know the size of the image, you can specify the width and the height of the <img> element. If you don't know the size of the image, it would be difficult to style the <div> element properly.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.