Page 1 of 1

Many copies of the same image on a page

Posted: Tue Mar 17, 2009 6:04 am
by batfastad
Hi everyone

I've been developing an intranet solution which lists various information about companies and contacts that we deal with.
But there's many panels of information where there's a whole list of information, eg about invoices where a particular icon like a PDF symbol gets repeated on every row.
This can be repeated a few hundred times, and obviously this could represent a few hundred HTTP requests. But luckily most browsers are clever enough to spot this and load a cached copy.

But I started to think about different solutions to this.

At the moment I have all the icons displaying using regular HTML code:

Code: Select all

<img src="/img/pdf.png" alt="PDF" title="View Invoice" border="0" />
But in many things now it seems fashionable to use the CSS background property. Especially for skins and stuff where you can have your entire image set as a single mega-wide PNG and just adjust the part of that displayed by the browser.

Is there any advantage to doing this instead of using the HTML img tag?

Code: Select all

<a href="/invoices_view_pdf.php?invoice_id=$invoice_id"><div style="background : #FFF url('/img/pdf.gif') no-repeat; height : 16px; width : 16px;"></div></a>
Thanks, B

Re: Many copies of the same image on a page

Posted: Tue Mar 17, 2009 12:36 pm
by kaszu
If '/img/pdf.gif' is just that pdf icon, then I don't think there is any advantage.
But using sprites is a good idea because of a lot less http requests and almost always sprite image size < sum of all images separately. Sprites can be used not only with css "background", but also with img tag and setting 'overflow: hidden' style to container.

Re: Many copies of the same image on a page

Posted: Tue Mar 17, 2009 2:55 pm
by pickle
If you moved that styling out into a separate CSS file, it would cut down on the bandwidth (not necessarily a big deal in an intranet), download time, and clock cycles to both generate & render the page. All in all, the page load will be quicker.