Yes, that's about 10000 times bigger than it should be—seriously.
One thing you need to do with images is use the Save for Web feature, which strips out all of the unnecessary data. You should be able to get the images to well under 100kb each. Also, be careful not to use more images than necessary. The word "slice" is kind of out of date, in my opinion, as you mostly shouldn't need to slice images at all with modern CSS.
I don't use Fireworks, but yes, it does have a Save for Web option, and you can choose any format—jpg, gif, png etc. I usually choose whicherver version turns out smaller.
I used to do that but now make a special point of saving all web images as JPGs. The reason is that the PHP thumbnail software I use reduces the dimensions of a PNG but the file size is huge compared to an equivalent JPG formatted imagel.
the PHP thumbnail software I use reduces the dimensions of a PNG but the file size is huge compared to an equivalent JPG formatted imagel.
Yeah, usually pngs are bigger, but only by a little bit in Ps/Fw. So I tend to use them only if I need a crisper image or transparancy. I alwasy like to check the versions, just to see what's available.
It might sound obvious but are you sizing the images to be the right size? Usually when I come across vast pages they have images 3000px wide for 100px thumbnails, all they need to do is size the images properly and the file size comes right down.
If you have linear gradients in your background, try slicing an image 1px wide (if vertical) or high (if horizontal), and use with CSS background repeat property. This can dramatically reduce the size of images for the background. There's another way to do it without images in CSS3, but some old browsers won't support it.
Put as much text as possible in the HTML as text instead of image. This would probably save you lots of megabytes. You can format it with CSS also.
If you have a large image that really has to be left as an image, try saving it as JPG (lower the quality if possible to get an optimal file size) and turn Progressive on. If it's still too large, slice it into smaller images so they could load separately, but in most cases this is unnecessary.
There's another way to do it without images in CSS3, but some old browsers won't support it.
But the only older browsers that are still in use are all versions of Internet Explorer which have their own proprietary way of creating linear gradients and so if you use IE conditional comments you can create linear gradients in all modern browser without needing any images at all.
Try to turn on gzip compression on your webserver. Also nginx with LAMP most likely will improve speed of website loading.
yes used gzip compression, the use page cache for your website..I've write in brief on this here if you want to read.
Next thing is, separate image file with high size in different location. I always use 3rd party storage provider to store images, then place the link to the images on your website. This means you will have just a lines of code to refer to the image instead of store the image with you main website.
You can test your website performance here, I always test using this site SEO site Checkup
Last edited by TechnoBear; Dec 3, 2012 at 10:04.
Reason: Self-promo link removed