Page 1 of 1

Image load order.

Posted: Mon Sep 15, 2008 5:15 pm
by JellyFish
On my website I have lots of images in my layout. Some of these images are more important then others, that is, they have more priority then the others. Do any of you guys know of a way to get specific images to load first, before the others following it? I would prefer to do this with css, but if not, then javascript would suffice.

Which images does the browser start downloading and rendering first? Are css background images rendered after img element or what?

Thanks.

Re: Image load order.

Posted: Mon Sep 15, 2008 7:20 pm
by JAB Creations
The first point I'll make is to open your local access log, clear your browser's cache, load up a typical page, count the bandwidth, and ask yourself if the page will load in under ten seconds on dialup (47KB at 4.7KB per second).

I see endless bad practices by people at the client such as very heavy reliance on frameworks for stupidly simple things.

Second point: do you need all those images?

Third point: have you spent time determining the best format for compression and quality? In example on my site's front page the flags for translation services have a grand total combined size of 3,449 bytes with the Polish flag being the smallest individual image at 79 bytes with 38x20 dimensions. Another logo for an ex-client measures 159×300 dimensions with a file size of 1709 bytes. Have you taken a a truly indepth look at your images?

I highly recommend using Photoshop's index color pallet to remove unnecessary colors from simple GUI images which can dramatically reduce the file sizes for images that do not require a high color count.

Fourth Point: An important part of SEO is content weight. A single "large" image that requires more then roughly 64-128 colors (and to make the point simpler would look trashy even with 256 colors) should be the one and only JPEG image on your page as the article's main image. If you have two pages for the article I recommend having extra images on each page, spread them evenly and reduce the user's required bandwidth.

Fifth Point: Are you compressing your (X)HTML output? Are you compressing your CSS and JavaScript files? While not directly related to image load speed you have to consider the client's browser maximum allowed simultaneous connections. A semi-recent Internet Explorer blog post clarified that the maximum allowed simultaneous connections were increased for IE. I also know Yahoo takes advantage of this by merging all of their icons for Yahoo mail in to a single image and then use positioning to display only the image they need to help increase load speed.

If you post a link to your work I'd be happy to help you further. :)

Re: Image load order.

Posted: Mon Sep 15, 2008 10:04 pm
by JellyFish
Well for your first point, dial-up connection users are not my target. This is my decision and I don't want to discuss this. :D

My site doesn't have a heavy frame work other then jQuery, which is very light.

2nd point: I need them, but I have gotten rid of some images so far. The main issue is that my site has background images that need to load first. I need a way to give those images a high priority.

3rd point: My main background is in JPEG format. It once was a PNG at 900KB but I was able to compress it to 50KB in a jpeg! Most of my other images have to be PNGs because they require a 8-bit alpha channel.

I don't have Photoshop, I'm using the GIMP instead. Is there a GIMP equivalent to the index color pallet?

4th point: Not quit sure on what to say about this. Like I said I'm using PNGs with an 8-bit alpha channel, so indexing to 256 colors would be a disaster.

5th point: I'm not compressing my XHTML, CSS and javascript files because they hardly take up any space. There is no issue with these files. I could eventually compress them but that would be another topic.

Your fifth point does remind me on how I could use a CSS sprite for my images though.

I know that the browser is limited to how many downloads can run at the same time, which is why I would like to be able to have control over which images should be downloaded first. This is my main question in this thread. How can I get the browser to start downloading certain images first?

Thanks for your reply, if you'd like to have a look at the site here: http://treasuremaptrading.com/. (I hope you don't have a dial-up connection, hehe. :lol:)

Re: Image load order.

Posted: Mon Sep 15, 2008 10:41 pm
by JAB Creations
I don't though I have a recent client that did and will be hooking up their new DSL service Wednesday. Roughly 10-15% of Americans still use dial-up just as a large portion still use Internet Explorer 6. :|

A few years back I used a JavaScript image preloader for my site's galleries. I'm sure you can look for one online, the one I used let me execute something after all the images finished loading. I would recommend simply triggering a different function which would just change the layers from the "Please wait, loading site..." layer from (display) block to hidden to the actual content from hidden to block.

Re: Image load order.

Posted: Mon Sep 15, 2008 10:50 pm
by JellyFish
So a javascript image preloader is my best bet?

I tried building a javascript image preloader but it didn't preload the images, maybe I wasn't doing it right though. I'll do a google on some tutorials for preloader scripts, although a css solution would be nice, so I'll leave this thread open to more comments.

Re: Image load order.

Posted: Tue Sep 16, 2008 12:14 pm
by kaszu
Firebug shows, that Firefox is loading visible <img> images and background images in a order like they appear in the html (I believe it's like that in all browsers): from the first element to the last one, but of course that doesn't mean that images which browser starts loading first will finish first. Looks like <img> have the same 'priority' as background images.