56k? What 56k!? Give me tips to reduce website sizes that are highly graphic!

Man I'm a graphics whore. At least when it comes to website design. This leads to sites that look good (IMO) but they tend to be relatively huge in file size. I'm told people shouldn't go over like 50-70kb for a page. Well with the few sites I've put online so far they're several hundred, one is like half a meg since it's got a huge Flash in it with photos that alternate.

This latest site I'm making is no different though smaller. 150kb! It's still missing 3 medium sized photos which will probably bring it to like 200kb. :O

I've been doing all those crazy things as much as possible like a few pixels being used in the background repeating, etc but I've almost run out of ideas. It's a highly photographic site with a banner that has people, a bottom with lots of the same stuff so already I've got like 100kbs on just two things which I can't seem to lessen the quality of without killing them. I might be able to get this to like 150kb but I'm stuck.

What the crap should I do? So far I'm using JPG a lot since GIF seems to suck for my specific pictures on file size and quality.

I am in no way Web 2.0 lol.

 

with modern day broadband, 200k shouldnt be much of a problem

 

50 - 200k should be ok. Anything above that should be considered... in those cases and unless it is a website focusing on designs where you need to display graphics to prove something you can check these points:

• Ask yourself about those flashy, uber designed images... if they are just a one time wow factor remove them. They will be great the first time... no use after.
• Use flash only if necessary
• Try reducing picture quality
• See if gradients and other repetitive backgrounds can be reduced to a 1px width. No need to have a 1024 x 90 top background if its the same gradient.
• Polish / debug your CSS and Javascript files

 

Cut down the area that has only 1 color in your banner and use table & CSS to fill it.

For example, if there is an 1000 x 90 banner that has images & texts on its left side and has nothing but green on its right side, instead of put it on your web page directly, who not use the following code:

<table border="0" height="90">
<tr>
<td width="200" style="background:#00FF00 url('http://.../1.jpg');">&nbsp;</td>
<td width="800" style="background-color:#00FF00;">&nbsp;</td>
</tr>
</table>

 

There are ways to cut down.

For example, if you have a couple of images which look the same just different sizes, try to resize them using CSS.

 

* Only use graphics with intention, ones that add to the site value.

* Work on compression - you can take a jpg to 65% with no appreciable quality loss; and you really need to think about going lower. When you start burning through bandwidth on a site that gets over 10000 or 100000 visitors a day, trust me, you WON'T CARE as much about the photographic quality as how fast your site can be served up

* Stay away from gradients, which increase file sizes and force you to save them as jpg instead of gif

* Same idea - use a lot of solid colors rather than complex backgrounds

Good luck!
tasty

 

Today's bandwidth will have no problem on solving this.
However, there are still ways to optimize images of your site, for example use css.
Go visit some sites offering online tutorials about css such as w3school.com, I'm sure you'll get what you're looking for.

 

Reduce the quality for JPG to low or medium . Provide your URL so that the people here can help you ..

 

If the people here can examine your url, then they will be able to lend you suggestions more effectively.

 

its called web design.

Anybody can learn to put content online, but design is like engineering. Design begets intention. Your goal is to make a site as small as possible, the rest is a skill we call 'creative problem solving'

The question isn't: How do I fit 500 apples into this 200-apple wheelbarrow

The question is: I have a 200-apple wheelbarrow - what's the most effective way of piling the apples I have?

 

@innovati: i like that question isn't/is comment... very clever