Home > Design - Imagery, Banners & Landers >

How To Make Your Images Load 90% Faster (10)

10-27-2012 03:40 AM #1 qhead (Member)
How To Make Your Images Load 90% Faster

I'm not sure if this tip has been shared before but at least based on the images from POF Ad Scraper, people don't do this.

Did you know that PNG file contains a fuckton of unnecessary data and that just by ripping that out, you can get PNG quality but GIF/JPG/smaller sizes? I have seen cases where image size drops by over 90%!

Why do this? Isn't it obvious? With banners; if your image loads faster than the next guy's, your ad is going to be displayed sooner. With your own site; your LP loads faster, you save bandwidth (money) and get better ROI.

Did you know this (based on Amazon's study):

Read more here.

If you are a Mac user, go to ImageOptim.com and download a free tool. Rips out unnecessary crap from GIFs and JPGs also, very cool.

If you are a Windows user, 1) think about changing to Mac, it's just so much better and 2) check out PNGOptimizer - I have no idea if this tool does JPG and GIF also.

Disclaimer: I have absolutely no affiliation with either tools - just a helpful tip.

10-27-2012 03:45 AM #2 usernameistaken (Member)

Great tip qhead! Make sure you host your landing page images on a cloud and you are all set

10-27-2012 04:32 AM #3 zeno (Administrator)

Also, for a large lander with many images, CSS sprites can give a significant performance boost. Basically compiles all images into one big image and then calls upon sections of that large image to display. E.g. http://draeton.github.com/stitches/

10-27-2012 05:00 AM #4 qhead (Member)

Originally Posted by zeno

True. Though from personal experience the hassle with sprites is always too much when I just want to whip something together

Another thing why sprites are in many cases impractical is testing. If you keep all your images inside one image (I have actually seen many cases), you'll have a bad time when you try to split test an image.

If you want to see how your current site could be "sprited", check out SpriteMe bookmarklet. Though this works only if you have used CSS background images so it doesn't work for regular img tags.

10-27-2012 05:05 AM #5 qhead (Member)

Originally Posted by usernameistaken

Great tip qhead! Make sure you host your landing page images on a cloud and you are all set

I generally agree with this but before anybody goes "into the cloud", they better read what cloud means when their specific provider says it. "Cloud" is a buzz word that's now being used so freely that in majority of cases what the hosting company offers is different what the customer thinks he or she is getting.

Actually there's only handful of "real" cloud providers because "real" cloud is technically way more difficult than your average hosting setup. The rest are just repackaging their VPS offerings. Also in many cases IO performance in "the cloud" is worse than traditional VPS/dedi.

10-27-2012 10:16 AM #6 zeno (Administrator)

Never thought of those points, nice. Have never used sprites but I can see why the hassle is a turn off.

10-27-2012 10:47 AM #7 hd2010 (Member)

@qhead : agree with what you've said, the only things I go for cloud solution is to backup my stuff in case my hard disk fail

10-27-2012 11:00 AM #8 babystacking (Member)

Thanks OP for sharing this. This is definitely important when we are working on international traffic while most of us get our hosting in US. When lots of small optimization added up together, and with huge volume we will see significance increase in ROI.

10-27-2012 11:39 AM #9 wonnick (Member)

Hey mate. Thanks for information. I also noticed there is a Windows version for optimizer at ImageOptim site.
Its the link http://trimage.org/

10-27-2012 05:18 PM #10 leber026 (Member)

for sprites try http://www.spritecow.com/ it makes stuff alot easier.

Also for the images does smushit.com (from yahoo) remove the junk? I've used that in the past and it seems to work pretty well.

Home > Design - Imagery, Banners & Landers >