So I spent about three hours last weekend rebuilding the images on my sister's bakery site (still doing that as a side favor, still regretting agreeing to "just a quick favor") and it reminded me how many people I know who still have zero idea what they're doing with image compression. This isn't advanced stuff. It's just stuff nobody ever explains properly, so I'm explaining it.
Here's the thing that matters most: page weight is still a real problem in 2012. I know it's easy to forget that when you're sitting on cable broadband or you just picked up a Galaxy Nexus with LTE, but plenty of people are still on DSL, still on 3G that caps out around 1-2 Mbps on a good day, and every unnecessary kilobyte you ship is time they're staring at a half-loaded page. My mom is on DSL out in the suburbs and I watched her load a friend's Wordpress blog last month, a blog, not a photo gallery, and it took like eleven seconds because someone exported a header image straight out of Photoshop without touching a single setting.
Pick the right format, not just whatever your camera spits out
- JPEG for photos. Anything with gradients, lots of color variation, real-world texture. This is 95% of what you're putting on a blog.
- PNG for screenshots, logos, icons, anything with flat color or text. PNG-8 if you can get away with a limited palette (way smaller file), PNG-24 if you need real transparency.
- GIF basically only for simple animations at this point. If you're using GIF for a static image you're doing it wrong and probably have been since 2004.
The mistake I see constantly is people using PNG for photographs because "PNG is lossless so it's better quality," which, sure, technically, but your visitor doesn't care about lossless, they care about the page loading before they die of old age. A photo saved as PNG-24 can be four or five times the file size of a JPEG that looks basically identical at 80% quality.
Actually compress the thing
Photoshop's "Save for Web" dialog has been sitting right there this whole time and most people just hit regular Save. Save for Web strips out a bunch of metadata cruft (EXIF data, color profiles you don't need, thumbnail previews embedded in the file) and lets you preview quality vs. file size side by side. For most photos, JPEG quality around 60-70 in that dialog looks completely fine to a normal human eye and cuts file size dramatically compared to 100.
If you don't have Photoshop, TinyPNG does a genuinely impressive job on PNGs, it's a free web tool, you drag your file in, it comes back noticeably smaller with basically no visible quality loss. I started using it a couple months back for icon work and it's become part of my regular routine now. There's also Smush.it from Yahoo if you want something that batch-processes a whole folder.
A few other things that actually matter
Resize before you upload, not after. Don't upload a 3000px wide photo straight off your camera and then set width="600" in the HTML. The browser still has to download the full 3000px file, it just displays it smaller. I still see people do this constantly and it drives me a little nuts.
Strip EXIF data. Your camera embeds a ton of metadata in every photo, GPS coordinates sometimes included, and none of it needs to ship to your website visitors.
Use sprites for small repeated graphics, icons, buttons, nav elements. Combining a dozen small images into one sprite sheet means one HTTP request instead of a dozen, and with everyone still dealing with connection latency (especially on mobile), fewer round trips genuinely adds up.
Don't sleep on caching headers, though that's a whole separate post. Get your web host to set proper expires headers on images so repeat visitors aren't redownloading your logo every single page load.
None of this is complicated once you actually sit down and do it once. My sister's bakery site went from about 2.8MB on the homepage down to under 600KB just from resizing photos to actual display size and running everything through Save for Web at 65% quality. You could not tell the difference looking at it. She could absolutely tell the difference in how fast it loaded on her phone standing in the shop.
Anyway. Go check your own site's homepage weight sometime, Firebug's Net panel will tell you exactly what's dragging you down, image by image. I'd bet money it's not what you think it is.