How to Optimize Your Images for the Web

Lori Halley 20 April 2010 0 comments

 

After yesterday’s little chat about the importance of website speed to your nonprofit’s audience, to search engines (notably Google), and to the health of the Internet in general, several Wild Apricot readers came back with one big question: What can we do to make our website faster?

For a small nonprofit without the tech resources to muck about with website code or server stuff, three key actions come to mind that will help to pep up a sluggish website:

  1. Keep your pages short
  2. Cut back on the number of sidebar widgets
  3. Optimize your images for the Web

The first two points are a matter of judicious editing. (What do you really need on each page? For each section of text or Facebook badge or Twitter widget or other element on each web page, ask yourself: Does it help our readers to do what we want them to do on this particular page?)  The third suggestion is arguably the most effective, for a time-strapped admin, and it won’t call for fiddling with your site layout:

Image Optimization = Smaller Files = Faster Website

smush.it

Image file size is determined by a combination of image size (dimensions), resolution (pixels per inch) and compression (how much data about the image is contained in the file.  Cameras produce photographs at a gigantic size, in Web terms, so that the images can make the transition to high-quality prints, should you want to print them. Computer screens don’t know what to do with all that extra “information” about color and detail – only a fraction of the available detail can be displayed, even when the picture is sized down to fit the screen. And that’s where “optimization” comes in, a technical process that aims for a happy compromise between image size and image quality.

But all you want is to get a picture of the new Board of Directors onto your nonprofit’s website and get on with your day – am I right?

So let’s keep this simple.

First and foremost,  do fill in the “height” and “width” attributes in your website builder or blog editor. That helps a browser to understand how much space the images are going to take up on the page, so the text appears in front of your readers’ eyes while the photo may still be loading.

But do fill in the real numbers for the original size of your image – don’t put in smaller measurements to try to force-shrink big images to fit your page. The images may display at the smaller size you’ve called for, using this method, but it’s still the whole big original image that has to load onto the page. You’ll get no savings in load time or bandwidth there.

Instead, make your images smaller before you upload them to your site.

One of the free image online editors we talked about earlier will work just fine for this, if you don’t have appropriate software installed on your computer. Some blogging platforms may help you out with this, by resizing your uploaded photographs “on the fly” – WordPress blogs, for example, and Windows Live Writer (desktop blogging tool) are handy that way. You give them your image, then choose a pre-set size of image to include in your blog post. And if you’re using a Creative Commons-licensed photo from Flickr, it too will offer you a selection of pre-set sizes from which to choose.

That one step – down-sizing your images before you upload them – will go a long way to speed up your website or blog. When you’re showing a number of photographs, however, those bytes can still add up. The solution here is to “optimize for the Web” before you upload and post those images.

To reduce file size while maintaining image quality, Adobe PhotoShop users can use the “Save for Web” option, for example, and your own preferred image-editing software may have a similar function. Alternatively, here are 3 popular image optimizing tools that are free and easy to use, with no special photographic or tech skills required:

 

ImageOptimizer

imageoptimizerGeeks Litd.’s online service lets you resize, compress and optimize your image files with one button click. The desktop version enables right-click to bulk optimize all the pictures of a folder (upgrade to remove ads).  If there’s a file size limit, I haven’t seen it mentioned.

Online Image Optimizer

Dynamic Drive’s Image Optimizer lets you easily optimize images in GIF, animated GIF, JPG, or PNG format – and easily convert from one image type to another. Upload size limit for this free online service is 300 kB.

Smush.it

A powerful image optimizer, Smush.it (one of the Yahoo! developer tools) is now included with the Firefox add-on YSlow, as well as available as a free online service. After Smush.it runs on a web page it reports how many bytes would be saved by optimizing the page's images and provides a downloadable zip file with the minimized image files. Handles GIF, JPG, PNG files up to 1 MB in size.

Do you have a favorite tool for web-optimizing your images? If so, please share it in the comments!

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.
Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Tuesday, 20 April 2010 at 5:54 PM

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.
Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.