1. Preparing your images

1.1Cropping and resizing

Always keep the original image and work on a copy.

Although the best tool for working with images is Adobe Photoshop, there are plenty of other tools such as the free program, GIMP. There are also online services you can use to resize and compress images, such as http://apps.pixlr.com/editor/

Cropping images in Photoshop is carried out using the ‘Crop Tool’.

image002

The next thing to do is to reduce the pixel dimensions. This is achieved through the ‘Image’ and then ‘Image Size’ menu. Remember to ‘Constrain Proportions’ and change one of the dimensions to retain the original shape.

image004

The dimensions should match the dimensions of your text column on your website (e.g. 725 pixels). There is little advantage to making the dimensions larger as the browser will resize the image as it renders the page; this will slow down response times.

image006

(Although it is recommended to resize your images prior to uploading them to WordPress, alternatively you can use the WordPress Media Library to edit the dimensions of your image.)

1.2 Saving for the Web

 

Choose the appropriate format to save your image.

Gif

You mainly use a gif file format for logos and graphics with solid areas of colour. Using a gif for photos is not recommended. They support transparency, which allows you to place the gif over any colour background or even photos, and you won’t see a border or background in the image. Gifs support animation which allows you to add movement or transitions to your site, without a lot of programming or coding. Gif files are compressed, which gives them a small file size.

Jpeg

Jpegs support up to 16.7 million colors, which makes them the right choice for complex images and photographs. With the wide range of colors, you can have beautiful imagery without a bulky file size. JPEG uses a lossy compression format. During compression, information is thrown away and cannot be recovered.

PNG

PNG files were developed to build upon gifs. PNG-8 does not support transparency, but PNG-24 and PNG-32 do. PNG transparency is different from Gif transparency, because they can have different levels of transparency. Gifs are either transparent or opaque. PNG files tend to be larger than jpegs, because they contain more information, and are lossless. PNG files do not support animation. For this purpose, a Gif should be used.

You should keep the file sizes of your images as small as possible. It is recommended that large high quality images should ideally be around 60-100KB while smaller images should ideally be 30KB or less.

If using Photoshop use the ‘Save for Web’ option rather than simply ‘Save As’. ‘Save for Web’ will give you a wide range of options and a preview of the potential results. The controls are fairly self-explanatory.

Check the ‘Progressive’ option so that that people on slow connections will at least see the image begin to appear.

You should note the potential file size below the preview image as you adjust the size and compression of the image in JPEG mode, but look closely at the image to ensure that the quality is still acceptable.

Give your images detailed, informative filenames. The filename can give search engines such as Google clues about the subject matter of the image. Try to make your filename a good description of the subject matter of the image. For example, my-new-black-kitten.jpg is a lot more informative than IMG00023.JPG.

Good practice in choosing filenames is:

  • Not including any spaces in the filename;
  • Separating words with a hyphen (not an underscore);
  • Using lowercase throughout (your web server may treat John-Smith.jpg and john-smith.jpg as different filenames);
  • Appending the dimensions if you have different versions of the same image (e.g. canal-boat-700×400.jpg and canal-boat-315×180.jpg).

image008

Remember always to work with copies of your files. Every time you save an image to JPEG format you are throwing away image information that can’t be recovered.

Some examples:

  1. Original image
  2. 960px image
  3. Cropped 960px image

1.3 Further reading

 

See: http://www.sitepoint.com/optimizing-your-images-for-wordpress/