How & Why to Optimize Image Size

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 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.

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 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,
Ann Smarty

Comments are closed.

16 thoughts on “How & Why to Optimize Image Size

  1. 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.

  2. 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?

  3. @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….

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

  5. 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 :).

  6. 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.

  7. 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 Thanks.

  8.…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!

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