I still think it's heresy. :-) But my hand is forced, all the time. Today's web is driven, in many cases, not by accessibility and portability as it should be but by graphics and coolness. Full page background images and hundreds of tiny graphics per page are fairly commonplace, I recoil a little bit every time a new one comes across my desk . . . I make a small noise, no one listens . . . and on we go.
My point is, the straight answer would be yes, that's huge, I mean, it's
half a megabyte and likely far too many object requests. But as long as you're doing all you can do to control it, well, it's all you can do, isn't it?
- Optimize images - experiment with different formats, and how much "quality" can you lose while still maintaining integrity? One good example is the proliferation of png images, which in my experience have been far larger than their gif counterparts - BUT - one thing you can't do with gif is render the image itself transparent over other page objects. Compare a jpg, against say, a 16 color .gif, against a png - what's smallest? Note that the overpowering advantage of .gif is that when you reduce the color palette, you can reduce the file size, sometimes exponentially.
Can you reduce the number of images? Look at this oldie but still well used:
<a href="#" onmouseover="swap_image('myimage','mouseover.gif')"><img src="nonmouseover.gif" id="myimage" alt=""></a>
What we have here is two images. Now look at this.
<a id="some-nav" href="#">some text</a>
...
<style type="text/css">
#some-nav { display: block; width: 100px; height: 50px; background: url(nonmouseover.gif) top left no-repeat; text-indent:-50000px; }
#some-nav:hover { background-position:bottom left; }
</style>
One image, stacked,
nonmouseover part of image
--------------------------
mouseover part of image
We've done not two, but three things here.
- reduced the number of objects
- reduced code bloat, leaving static html - which makes the document itself smaller
- reduced Javascript dependency, and reduced the document even more by removing it
(The argument can be made is that all we've done is move the code into CSS - but the CSS gets cached, once, and for all pages on a site. So while that's valid argument, it's only valid on the first load and is still faster.) The last thing is stripping **all** inline styles and presentation elements from the document and addressing them with CSS or external scripts. You should have nothing but paragraphs, divs, anchors, UL's, and other semantic elements in your document. This forces your hand to learn how to externalize the presentation elements in CSS, the behaviors in external Javascript.
Multiply small concepts like this over a 500K page . . . . and you'll have it under 200K in no time. :-)
