By bloid
via borkweb.com
Published: Apr 26 2007 / 22:30
When designing web applications, icons and images are used to enhance the user experience, give visual cues, and simply look sexy. For complex web apps, the quantity and resulting latency of icons and images used can greatly impact page load times...and developers, in most cases, generally try to reduce page load time with a sweet web app rather than increase it. To reduce latency in my apps, I use Image Concatenation! Coupled with a bit of CSS magic, performance improves and life is great.
Comments
sand1024 replied ago:
Oh, that's great and very useful article! Actually, it just shows the correct way of working with media on pages which includes many images.
Just like to add that dynamic behavior of UI components could be combined with images concatenation - for example, such a technique could be used to implement tabs on tabbed pane which should change the image on mouseOver() event. Moreover, it allows to eliminate images reloading even if "every visit" option is set in IE.
bdonlan.livejournal.com replied ago:
Another possibly useful technique would be to place the images on different (virtual) hosts, to allow the browser to fetch them in parallel. This'd be a far cleaner use of CSS, too :)
unchqua replied ago:
Without browser CSS support or in case of user CSS trickery (Stylish Firefox plug-in for example), this technique will produce such a mess on a page... Nevertheless +1.
Alexey Luchkovsky replied ago:
Cool article.
Sometimes programmers forget old good ideas.
I'd like recommend look at great site devoted CSS technique which contains
huge quantity of examples: http://css.maxdesign.com.au/listamatic/
Voters For This Link (17)
Voters Against This Link (0)