Many copies of the same image on a page

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
User avatar
batfastad
Forum Contributor
Posts: 433
Joined: Tue Mar 30, 2004 4:24 am
Location: London, UK

Many copies of the same image on a page

Post 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
User avatar
kaszu
Forum Regular
Posts: 749
Joined: Wed Jul 19, 2006 7:29 am

Re: Many copies of the same image on a page

Post 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.
User avatar
pickle
Briney Mod
Posts: 6445
Joined: Mon Jan 19, 2004 6:11 pm
Location: 53.01N x 112.48W
Contact:

Re: Many copies of the same image on a page

Post 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.
Real programmers don't comment their code. If it was hard to write, it should be hard to understand.
Post Reply