The internet is a very visual medium and the graphics and photos you use will go a long way to setting the tone and branding of your charity online. You’re going to need to at least add photos to your website, and most probably make some simple graphics of your own. Using a graphics programme is likely to be a daily part of your website management so taking the time to learn the basics now (and the keyboard shortcuts) will really pay dividends. The programmes that come bundled with Windows (i.e. Paint and Photo Manager) aren’t up to the job so you’ll need to get your hands on something else.
Photoshop is the most famous programme and is used by most professional web designers, however it is very expensive and you’ll probably only ever use about 5% of its functionality. For everyday resizing, cropping, photo retouching and creating text graphics it’s not necessarily the quickest or best tool, but if you’re serious about designing some professional looking graphics then you might prefer diving into Photoshop from the beginning. You can get a free 30 day trial, and there’s also a cheaper ‘Photoshop Elements’ programme with scaled-down features. That’s more suited to photographers than web designers though.
The alternatives:
Cheap: Fireworks is the other popular graphics editing programme. It’s aimed more squarely at web graphics than Photoshop and although it can be integrated with Dreamweaver, it also works fine on its own. The latest versions are also really expensive but you can pick up an older one for under £50. I’ve always used Fireworks 8 and much prefer it to Photoshop. With a few keyboard strokes you can resize an image and export it ready for use in under 10 seconds (see below).
Free: GIMP. Yes, you read that right. GIMP (GNU Image Manipulation Program) is a poor man’s Photoshop (actually it’s free). It can easily handle all the resizing and cropping you need to do, it’s just that its interface doesn’t look so nice. There’s plenty YouTube tutorials to get you up to speed though. Try this out before buying something else.
Online (and free!): If you just want to make simple resizes and crops to your images so they will appear in your site in exactly the right way then it’s worth bookmarking www.pixlr.com It all works in your browser so you don’t need any software on your computer – which is great because it means you can use it from pretty much anywhere. It’s a bit slower and has far fewer features than products like Fireworks or GIMP, but it’s well worth taking the time to get the hang of it.
Image formats
Photos should be saved/exported in .JPG format. Icons and other graphics are usually best saved in .PNG format. You can also save images with transparent backgrounds using the .PNG format. If you’re not sure – use the ‘save as’ wizard in your programme to preview how it will look in different formats.
Where to find images to use in your site
A search on Google images is often a good starting place. There are rules about copyright and crediting the original source or photographer. To be honest, I think you’re better off using a bit of common sense and an “it’s easier to get forgiveness than permission” approach. You can also get stock imagery from websites like iStock, but they can be quite expensive if you want a lot of them and they can make your site look a bit like a generic corporate one. If you’re in International Development then you can get some images from IRIN or Alertnet.
Shrink to fit, and don’t hotlink
As you’ll read in my blog about speeding up your site, images can be one of the big things that unnecessarily slow down the loading time of your web pages. You should resize your images with your graphics programme to the minimum size, rather than let a web browser do it. Let me give you an example. You could take a 3 Megabite sized photo from your camera and upload it to your website. The photo could be 4,000 pixels wide and you can use the inbuilt CSS to display it at 600px wide so that it fits into your design properly. When someone looks at their site on their phone or computer they see the image that has been shrunk down by their browser but it has still had to spend ages downloading that 3MB file from your server. Instead you could have resized it yourself using Fireworks down to 600px wide and it will likely be about 100kb in size.
Another no-no is ‘hotlinking’ images from other sites. That basically means that you’re telling your site to display the image but in fact it still sits on someone else’s server. It’s pretty easy to do by just copying the image location when you right-click on it and then pasting that into the dialogue box in your CMS. It’s bad form though, as well as bad for your SEO and if the image is deleted from the other site then it will instantly disappear from yours.
You’ll want to keep your image file sizes as small as possible so that your web pages load quickly – remember that some people will be looking at them on a slow mobile phone connection.
Photos should be saved/exported in .JPG format. Icons and other graphics are usually best saved in .PNG format. You can also save images with transparent backgrounds using the .PNG format. If you’re not sure – use the save as wizard to preview how it will look in different formats.
The 10 second resize
Once you get the hang of your keyboard shortcuts and workflow, you can prepare an image for your site in no time. Let’s say that I know that the images in the content column of my site are a maximum of 600px wide and I want to add a new one. Here’s how it works in my graphics package (Fireworks 8):
- Find a suitable image on a Google image search that’s larger than the size you need.
- Click to open it, then right-click and select ‘Copy Image’.
- In Fireworks, hit Ctrl+N to create a new File. It will automatically create one with a canvas size the same size as the image in the clipboard.
- Hit Ctrl+V to paste in the image.
- Hit Ctrl+Shift+T (the ‘Transform’ shortcut) and press tab to change the dropdown from ‘Scale to Resize’.
- Enter 600 into the width box. The height will auto-adjust as it is maintaining the aspect ratio. Press enter.
- Now the image is smaller than the canvas. Press Ctrl+Alt+F to ‘Fit’ the canvas to the image.
- In the top-right, choose an Export format. As it’s a photo I’m using a .jpg one.
- Now hit Ctrl+Shift+R to Export the image. Give it a keyword-rich filename. That’s good for your SEO.
- You’re done – the image is ready to add to WordPress or wherever else you need it.
