Mike's right on the money. Your images file sizes are out of control.
You need to reduce the file sizes significantly and there are a few tricks you can use to do this.
Before saving your .jpg files, make a marquee selection outlining the focal point in the image.
Using an image editor, such as PhotoShop, Make a maquee selection of the most important parts of the image.
Feather the selection by at least 4 pixels, invert the selection and blur it by .2 pixels. Try to achieve an acceptable balance between the parts that are in focus and the background or less important parts of the image.
The more you blur the image, the lower the file size will be when you save it as a .jpg.
Set your image quality to between 35-60 before saving the file. You don't want any jaggies or distortion. Just move the slider back and forth to a point where you think the majority of those viewing the image would be satisfied.
Apply a .19 blur to the entire image and save it as a progressive image, You won't notice the small amount of blur but this further reduces the file sizes while allowing the image to load in stages.
Messing with the hamburger image using a quality setting of 40 allowed me to save it out at 26.78k and there's still room to tweak.
Additionally, do the same for the larger images on the linked pages (350Kb is ridiculously large for any image on a web page).
Finally, try to implement a CSS stylesheet to cut down on the amount of code in all your pages.
Good Luck
|