How to optimise images for the web

In a previous blog I covered how and where to find images for your website. Now you probably want to know what to do with them and how to optimise them (unless you get your friendly website designer to do that for you…).

Three of the main things to consider are:

 

  1. Make them the Right Size
  2. Make them Searchable
  3. Make them Pinnable

 

1. How to make images the right size for the web

 

When we talk about sizing images on the web, there are 2 factors to consider.

 

  1. There are the dimensions of an image and how much screen space it uses, generally referred to in pixels (eg. 800 x 600px)
  2. There’s also the file size and its resolution affecting how much space it consumes on the web server and the bandwidth used to serve it up, generally referred to in KiloBytes (eg. 352KB).

The “right size” is a balance between these so that your images still look clear while loading quickly. Generally the larger the dimensions, the larger the file size. And the larger the file size, the slower they will load. Aim to go no larger than 100KB on even your best images.

 

example of effect of high and low jpeg compression
The image at left is very low (5%) Jpeg compression whilst the right is at very high (80%) – note the pixelation (blurring) on the left. Image from the divine design-seeds.com

If you are downloading stock images from the web, especially if you have to pay to download them, make sure you get the minimum size you need.  Bear in mind that most websites are less than 1024 pixels wide, so an 800 pixel (or 800px) wide image will use a fair amount of your screen.  An image of 250-300 pixels wide is still viewable and you can use even smaller than this as a ‘thumbnail’ to be clicked on if someone is interested in seeing a larger copy.

 

Also, if possible, note the image’s density. Images formatted for printing are often 300 dpi (dots per inch) and should be reduced to the standard 72 dpi used for the web.

 

If you’ve taken your own photos, make sure you resize them before loading them on your website or blog page. With even the simplest camera these days offering high megapixel photo resolution, most images are too large for web use. Photos from my own camera can be 4MB in size and I reduce them to under 50KB for the web.

 

Help, I hear you say, I have a CMS but I don’t have Photoshop to resize my photos.

 

No problem, there are lots of tools around to help you, and many of them are free.

 

  • If you use Picasa from Google, it has plenty of editing options
  • On PCs, the Microsoft Photo Editor can be used for basic operations on images
  • http://pixlr.com provides various options from Express if you just want to crop and resize, to Advanced which employs Photoshop-like techniques (working with layers, etc).
  • http://sumopaint.com/app/ has an amazing free version that works very much like Photoshop (which can be overwhelming for newbies)
  • If you don’t mind downloading new software to your PC, try http://www.getpaint.net/
  • http://tinypng.org/ – easy upload and will process up to 20 PNG images of up to 3MB each

 

 

2. How to make images searchable

 

Google can’t actually ‘see’ what an image portrays. But just as there are ways to optimise your webpages for the search engines to index and rank them (a process known as SEO or Search Engine Optimisation, which you can read more about here and here), images can also be optimised for search. Images rate quite highly on Google search results, and there is an option to specifically search just on Images. The resulting images will link back to their source page, thereby sending more traffic to your website.

 

The basics for making your images searchable include:

 

  • Using a meaningful filename that describes the content of the image, eg. blue-vintage-teapot.jpg rather than DSCF1234.jpg. It’s best to use hyphens (dashes) between the words as the search engines interpret these as spaces.
  • Always adding ‘alt’ text (short for alternative), which is a description that appears if images are not displayed in a browser. Alt=”descriptive text” on the image tag is machine readable and is one of the only ways that Google can understand what an image contains.
  • Use of the ‘title’ tag on an image also offers more of a description and can create a small floating display in some browsers (known as a ‘pop-up tooltip’ but I didn’t want to use the term ‘popup’ and scare you off).

 

When adding a description, whether via ‘alt’ or ‘title’, consider keywords that people might be searching for. Rather than just repeating your filename such as alt=”blue vintage teapot”, you could expand that to alt=”collectors item blue vintage teapot, late 19th century with floral pattern”.

 

If your images have strict copyright (eg. your site is about your photographic services) then make sure you have an obvious watermark across all images (thumbnails and full-size) so that even if copied they can’t be used.

 

3. How to make images Pinnable

 

Pinterest is a great way of getting your photos seen by more people.

 

You might think this third one is optional, especially if you don’t actively use Pinterest or maintain your own Pinterest boards. But you might be surprised who does want to Pin your pictures, and why. Even if your products are not particularly photogenic, people don’t only Pin items because they’re attractive. Some people use Pinterest to create a wishlist, a mood board, or a collection of objects, for any number of reasons.

 

pinterest and pin it buttons are optional but recommended
Pinterest is proving very successful for driving traffic and converting sales via Pinned images.

Pinterest is said to lead to more sales conversions than any other online marketing, so don’t let your images get left behind. Test by making sure your website’s images can be saved when they are viewed (you’ll find some lightbox displays don’t actually allow this) and, to go one step further, you can add a “Pin It” button.

 

 

JPG, PNG, GIF – what are the differences in file types?

 

You probably know that there are different file types around for images, with filename extensions like JPG (or jpeg), PNG and GIF. They each have different attributes in the way they display colour, pixels, etc. You can convert images from one type to another when you alter and save them. The main things to remember are:

 

  • Use JPG when you want to compress a file (ie. reduce its resolution and filesize while maintaining a good degree of clarity). Jpeg is also the best option for photos and for images that contain a mix of graphics and text.
  • Use PNG when you need a transparent background within an image. PNG is also the best option for text-only images.
  • Use GIF for simple images with a small number of basic colours, eg. an icon or stylised bullet point. It is good for producing a very small filesize. GIF also supports animated imagery (although I strongly suggest you avoid using that feature, unless you’re producing a website for small children).

 

Spend the time to optimise your images and reap the rewards of having them found, enjoyed and shared by your website’s visitors.

 

Author: RobynRHD

I'm a small business web design specialist with interests in social media and other online marketing methods. As my blog intro states: "Steering small businesses in the right direction with what I hope is practical, realistic advice and useful tips, amidst the constantly changing noise and hype. I'd like to help you sort out what you really need and how to go about it." I'm a proud Aussie, living in Sydney, and an avid fan of Column 8 in the Sydney Morning Herald.

Leave a Reply

Your email address will not be published. Required fields are marked *