This is a ‘Back to Basics’ sort of article, talking about techniques that we know are good to use, but sometimes forget to implement.
I browse the web on a very fast connection. One might assume that sites load super fast for me. Not really. The amount of times I hit a website that takes forever to load is just ridiculous considering my connection. When you think about the fact that the majority of the world is still on dial-up, I can’t imagine how slow it is for them. (I remember my dial-up days, with much happiness that they are gone.)
One of the biggest culprits I see is the slice-n-dice. You know what I mean, the people who design in Photoshop, and make big chunky slices. Don’t get me wrong, people who are true graphic artists can create beautiful sites, but sometimes those fall in the category I call ‘the prettiest site you never saw.’ Why? Cause it took too long to load and your visitor moved on.
I’m not entirely certain why gradient/logo headers are such a culprit for extra loading time, but they seem to be. I work in web, so within 1 minute on your site I’ve probably checked the code already. It’s just a habit. Anyway, I find ALOT of people who have these big header images that are built of a linear gradient background with a pretty title text. Usually the title text is some sort of unique font, with drop shadows and other stuff.
I see a couple of things happen a lot of the time. Either people just chunk everything in one graphic and save it like that, or they are too afraid of the crop tool to really slim down the gradient. Seriously folks, learn to be merciless with the crop tool, it’s not gonna bite you. Linear gradients are the easiest to crop and the most common on the web.
Let me give you a working example of something I’ve seen a million times.
That’s a sized down version of a 800px (wide) by 200px (high) site header. It has a unique font for the title, with drop shadow and a mild stroke effect. In original form that header is just tossed into the HTML as an image, and has 9.64k chunk of the loading time.
For this very simple header, there is no reason for it to take that much of the load time.
So then, I’ve seen people do the following as an alternative:
They decide to use CSS for the background and cut out the title and put it on top. So they get two images…
A gradient (1.22K) :
And the logo (5.63K) :
They use some HTML like:
<div id="header">
<h1><img src="color-logo.jpg" alt="Website Title." /></h1>
</div>
And some CSS like:
body {margin:0 auto; width:800px;}
div#header {background: rgb(19,75,123) url(gradient-bg.jpg) top left repeat-x; height:200px; text-align:center;}
div#header h1 {padding-top: 90px;}
Which works fine really, as long as:
a) You measure the distance from the top of the logo to the top of the gradient to know how far down the logo needs to be to match the gradient (in this case, note the 90px top padding) … and
b) You don’t mind reworking your title image if you ever change the background. To be honest, I’m a PNG fan, but in this case, using a PNG instead of a color JPG like this would actually create a title graphic double the size.
Okay, so, those two combined take up 6.85K, which is better. But here is where I get on people about not cropping the gradients enough. Why does it need to be that wide? It just repeats. We know this, you are repeating it to make it go the full 800px wide.. so why not make it smaller to start. I see this all the time, and I’m not entirely sure why.
Do not be afraid to crop, and crop some more. Wring every bit of load time out of those images as you can.
Keep the title image made, and then crop your gradient down to 1px on the repeating direction:
If you have a gradient that repeats vertically instead of horizontally - make it 1px high and the full width. There is no reason for it to be any bigger.
So here’s comparison of the how they look in the browser (the top is the full image graphic, the second is the big gradient and separate image title, and the bottom one is the skinny gradient and the separate image title). Remember that this is a scaled down (for the article) version of the actual headers at 800×200px :
For a loading time comparison:
The difference from the 9.64K original all image to the 5.99K mini gradient and logo combo is a savings of 3.65K. Now that may not SEEM like alot, but it’s 1/3 the loading time of the original. If you could decrease all your instances of your gradient use by at least 1/3, wouldn’t it be worth the loading time savings?
So, in a nutshell, my parting words to you are: Crop and Crop Some More!
~Nicole
I adore using PNG graphics in my designs, but I hate the way IE6 handles them. We know all about needing a PNG fix and using one, but recently I encountered my first major problem using one.
