Working with images in the WCMS

The WCMS will take just about any PNG, GIF, or JPG that you throw at it, but just because it works doesn’t necessarily mean it’s the best way to do things. Here are some tips and tricks for working with images in the WCMS.

Upload the image at the size it’s going to be used

If you don’t, the WCMS will automatically resize the image for you. It doesn’t do a bad job (unless you’re dealing with fine lines or text in your image), but this gives you total control over the output and ensures that the image you see on your computer matches the image you see on the web.

Use the right file format for the job

It’s tempting to just use JPG for everything because it “just works”. But JPG is a “lossy” format, and is really only suitable for use with photographs; using it for anything else can lead to blurry edges and “JPG artifacts”.

So what should you use? Well, JPG is still the best format for photographs, but for everything else PNG is generally the answer. GIF is largely a legacy format and should be avoided unless you are an advanced user with a very good reason to use it.

Don’t “convert” a file from one format to another by renaming the file

If your source image is a BMP or other graphic format not supported by the WCMS, changing the extension will allow you to upload it but it will not work properly, even though it may display in your browser. Instead, open the source image in an image editing program such as Photoshop, and save it as a supported image format (using the right file format for the job, of course). (This is actually true for all images, not just unsupported ones. You can’t convert a file by renaming it.)

Don’t embed colour profiles or use greater than 24-bit images

Colour profiles and greater than 24-bit images are not universally supported amongst all browsers, so what you see on your screen may not be what other people see. Some browsers may display the image by discarding the additional information; others may simply refuse to display the image. And if the WCMS has to resize the image, it will discard the extra information as well (or refuse to work with the image).

Make sure to provide meaningful alt text for your images

Not everyone will be able to see your images. Make sure that the alt text has meaning, and if there are meaningful words in your image, make sure that they are included in your alt text.

If your image contains complex information, use the “longdesc” attribute to link to a page where you explain the image in full. Also, include a visible link ("Figure name: accessible version") under the image to that page. Learn how to create a long description.