The internet is full of images - big, small, weird and wonderful. In fact, you’d be hard pressed to find ANY website these days without at least a handful of images. Images help us to visualize data, add value, provide information and in general just make everything look a little bit nicer. But images can be a double edged sword for many websites.

Finding the balance between an image that looks good AND works well for your website can be difficult, but here are a few tips. The most important lesson here is…

Size DOES matter!

One of the most common mistakes we see when it comes to images on the internet is file size. Ever visited a site where the text loads quickly but you’re left waiting as the images slowly load pixel by pixel? This is usually because the image is not optimized for the web.

Total file size

The general rule when saving an image file for use on the internet is to make sure that the file size is 100kb or smaller. This may seem tiny, but really anything larger than this and images start to make your website run slowly and eat up your sites bandwidth.

Resolution

Resolution is measured in DPI or dots per inch. Lower resolution images have fewer ‘dots’ of colour per inch, meaning that images are not as detailed when zoomed right in, but they also have a smaller file size (remember the 100kb rule from before?). If you are printing or scanning, resolution is usually quite high (around 300dpi). The normal resolution for viewing on a computer/laptop monitors is 72dpi. Anything higher is a waste, as this is the highest resolution that computer monitors can display. Resolutions of 100dpi+ are only useful in specific circumstances on modern smartphones and tablets which have high resolution screens.

Display size

How wide or tall does your picture need to be to sit well on your site? On the internet, size is measured in pixels, so your image should be measured in pixels too. If you’re uploading images from a digital camera then it is likely that your image is going to be WAY too big to be uploaded straight onto the web. Now, the rule for display size is to always save the image at the size you actually need it, not the size it is currently. Uploading a thumbnail? Your image should be around 100px X 100px. Need a banner image? Try 800px X 100 px. The actual size you need will vary depending on your site, so play around with this part and you’ll be able to work out the size you want.

 

Some examples of display size images that are regularly used on websites.

 

That’s all well and good, I hear you say, but I’m not a fancy web designer, how do I actually DO these things?!

The good news is that it has never been easier to make your images web ready. There are literally hundreds of programs that are capable of saving image files for the web. Here are some easy options:

Microsoft Paint

Yes, the program that you use to draw stickmen is useful for sizing your images too! Open your image and just press ‘resize’, select the size you want in either pixels or as a percentage of the original size (remember the display size rule above) and hit save. Simple!

Picasa

This free image editing software from Google is also able to help you optimize your images for the web. Firstly you will need to download Picasa (available from http://picasa.google.com/). Now, open your image and select file then export picture to file. Here you can resize the image by pixels and select the resolution you need.

Adobe Photoshop

If you have Photoshop installed on your computer you have probably the best possible tool for saving images for the web. Open your image in Photoshop and then go to file and Save for Web. This nifty instrument will give you complete control over how your image will be saved, it even gives you a preview in your web browser! You can control the size, file type, resolution all from the one menu.

And there you have it! Beautifully optimized images that make your website look great WITHOUT slowing it down or chewing up your bandwidth allowance!

If you would like more information on how to make your website even more effective, contact us today for a free web strategy session.