How & Why to Optimize Image Size

SMS Text

Images are a great way to make your content more engaging and interactive. Unfortunately, in an effort to make your pages more appealing, webmasters often forget about the size of the images and the page load time. Taking care of the image size, you:

Here are a couple of simple tips to optimize your images without (almost) any loss of quality:

1. Photoshop "Save for web" option:

I am no Photoshop professional, I only use its most basic features to beautify my screenshots but I love this option: image optimization for web. After you are done with editing your image, just:

  • Click "Save" and then select "Save for web" (or use "CTRL+Alt+Shift+S" shortcut);
  • Choose the image quality (based on the image size you want to achieve) – mind that the image quality is satisfying while you are adjusting the size.

Photoshop: image optimization

2. Use Simple Web-Based Tools

Smush.it is a web based tool (as well as a FireFox addon) that optimizes images right within your favorite browser:

It uses image format specific non-lossy image optimization tools to squeeze the last bytes out of your images – without changing their look or visual quality.

Its best features include:

  • Upload images in a bulk and download the zipped folder of all of them;
  • Upload images right from the URL.

Smush.it

Image Optimizer is another option to use. It allows to choose the optimized image extension, but the visual quality of the optimized image seems to be higher with Smush.it tool.

Ann Smarty
Ann Smarty is the blogger and community manager at Internet Marketing Ninjas. Ann's expertise in blogging and tools serve as a base for her writing, tutorials and her guest blogging project, MyBlogGuest.com.
Ann Smarty
  • http://www.localinternetusa.com Steven Brier

    nice tip. thanks

  • http://golden-joy.blogspot.com Alrady

    Some of this I knew but the reminder is awesome. I love the site that you included. It’s new to me and looks to be very useful. I sometimes use PIcassa for adjustments too.

  • http://www.seemyspots.com Seemyspots

    As always Ann, good post. This is one for my “favorites.”

    When I took my web design courses many years ago (on a Dreamweaver platform) I was taught to slice my photos and upload them into separate cells (kind of like a CSS format). I don’t know if this is an archaic technique but this method was intended to speed up load time.

    Does anyone know if this is still a good method?

  • http://robbyhakim.com Robby Hakim

    nice info, i will try it

  • Hirvesh

    Nice article! You might also want to check my 16 Impressive Image Optimization Tips Post:

    http://codefusionlab.blogspot.com/2009/07/16-impressive-image-optimization-tools.html

  • http://www.lohithamruthappa.com Lohith

    @Seemyspots, Yes just few months back I was talking about quality of images with a web designer, he said to slice image for better quality, surprisingly he is using coreldraw that is supposed to do for print media. I am not sure about loading time….

  • http://www.tag44.com Tag44

    Hmmm pretty good info, even i like to save the image after making certain change in save for web rather than only save option.

  • http://www.rankuno.com Kruti

    Thanks Ann! Adding to the above points, one can also use thumbnails. Thumbnails are miniature versions of a picture that are hyperlinked to its actual size version. They load faster, and by clicking on it, visitors will be able to see the actual size version. Not exact on-image optimization but just another way to ensure faster load time and add to optimization efforts :).

  • http://translatorpower.wordpress.com Amadou M. Sall

    Ann is awesome, as usual. I’ve tweeted it and asked my followers to retweet :-)

  • http://www.launchpad-sf.com Carter Edsall

    A very helpful topic. Anybody out there have any general guidelines for Flash files (SWF)? I know smaller is better for any media, but I hadn’t considered that file size might actually inhibit Google crawls. My site features several portfolio galleries of still images, all of which are automatically optimized when imported into Flash.

  • http://fruitionmedia.net TheConsumerJournal

    Are the aforementioned photo optimization softwares compatible with MAC? Also, do these products introduce spyware. (I’d like to share this information with my audience at TheConsumerJournal.com) Thanks.

  • https://www.searchenginejournal.com Ann Smarty

    The web-based tools should work on MAC just fine. Photoshop can be on MAC either:
    http://www.adobe.com/support/downloads/product.jsp?product=39&platform=Macintosh

    As for the spyware, not as far as I know. Please, anyone, share your bad experience if any…

  • http://www.arborseo.com Jay

    Good stuff. Image size is something that is often overlooked.

  • http://www.herbalade.com Herbalife

    Smush.it…I have yet to use this…thanx

    I usually use dreamweaver coupled with Illustrator and do use the save as web trick.

    I sometime place a placeholder via dreamweaver to know exactly what size i want to hit. Love this site, Knowledge is power!

  • http://garmahis.com Michael Garmahis

    Check out ultimate guide How to Optimize Images for Web with all tools and techniques for PNG, JPEG and GIF optimization in one place. Free Photoshop action for download is included.

  • raul

    You should also try imgOptimize. It will show you how much you can save directly from your web page.