Be smart with online pics

The dos and don’ts of images for your website

The internet may have started its life as a text-only medium, but today it’s capable of all kinds of wonders - and that means you aren’t limited to mere words

to get your message across. You can add photos or videos, music or maps – the range of available content to make your site sing is truly massive. Last issue you discovered how to make words that work for your website. This time you’ll find out how to supplement those words to make your site a multimedia marvel.

We’ll look at two kinds of content. The first is content you provide, such as the images you use to illustrate your site’s pages. The second is content you embed from another site. Here, we use a map from Google Maps, yet you can embed all kinds of things: Twitter feeds, Facebook videos, YouTube clips, SoundCloud and Bandcamp music, and much more.

The big advantage of embedding content is that you don’t need to reinvent the wheel. We’re sure you’re perfectly capable of making a wonderful map, but why bother when Google has already done the work for you, and when it can also offer your visitors live traffic info, satellite views, driving directions and locations of nearby points of interest?

Scratch my back…

Embedding content is particularly useful when somebody else owns the copyright. Upload an Adele video to your site and you’ll receive a nastygram from her record company for copyright infringement. Embed the official clip from YouTube or Vevo and the company will be delighted; you get the video and it gets details of the number of views, what platforms were used to access the video, and so on. It’s a win-win situation, with free content for your site and useful data for the company.

Another kind of embedded content is that which you’ve uploaded somewhere else. It may sound daft to record a video on your iPhone, upload it to YouTube and embed the YouTube version on your own site, but it’s actually a very good idea. It means your video can be discovered, shared and commented on by

YouTube’s many millions of users, and if your video becomes a huge success you won’t need to worry about paying the bills for all that data transfer. That’s YouTube’s problem, not yours.

Embedding is usually set up by the thirdparty website that provides the content, but there’s another way to use content from others: linking directly to files on servers. That’s okay if you’re linking to something like a PDF file on a big company’s website, but it’s a bad idea for content such as images; doing so without the owner’s permission is called hotlinking, and it’s a no-no for several reasons. It’s usually copyright infringement; you’re expecting the owner to cover bandwidth costs of serving the image to your visitors. Also, it’s easily defeated by them replacing the image. As many unscrupulous hotlinkers have found, that something else can be the kind of image you really don’t want to appear on your site.

When using other people’s content on your site, stick to a simple philosophy: if there’s a big “Add this to your site!” or embedding option, go ahead and use it; if there isn’t, don’t.

Often, the best place to get pictures is your own photo library. The internet’s also great, of course, but don’t just grab whatever you fancy from Google Image Search. There’s an attitude that if something’s online, you can use it for free. That isn’t true, and every image remains the property of its copyright holder – usually the image creator or photographer, or the company for which they made it.

You can get free images online, though. Google Image Search can filter its results by usage rights to only see what you can reuse. There are entire sites of free pics, such as unsplash.com and flickr.com; at the top left of Flickr’s search results, click Any License: ‘Commercial use allowed’, ‘Modifications allowed’ and ‘No known copyright restrictions’ are the categories to browse.

Online image dos and don’ts

It’s tempting to throw a bunch of images on to your pages and hope for the best, but a few simple steps can make your life a lot easier in the long run. A sensible naming convention is good for organisation and being Googlefriendly – ‘Bath Cathedral front.jpg’ is more helpful than ‘IMG003129.jpg’ – and it’s wise to fill in alt(ernative) text for important images in your site (do so by double-clicking the image in RapidWeaver) to show visitors alt text if the image isn’t shown, to assist people with vision impairments, and automated systems such as Google’s website indexers. You needn’t use alt text for purely decorative images, and you shouldn’t stuff it with keywords you hope will raise your site in Google’s results. They won’t.

Otherwise, add alt text and descriptive captions. For our earlier example, a file named ‘Bath Cathedral front.jpg’ with alt text ‘Picture of Bath cathedral in daylight’ and a similarly descriptive caption is useful and Googlefriendly; ‘IMG003129.jpg’ without alt text isn’t. Whatever you do, don’t make important text part of an image without also adding it to a page’s body copy, or it might go unseen by those with sight issues or poor connections. Left to your own devices It’s also important to consider mobile devices. They’re increasingly used, rather than Macs or PCs, as people’s main web browser, often on mobile networks with limited data usage. Optimise your images to make them as small as possible without becoming unrecognisable. As well as reducing visitors’ data usage, it also makes your pages load more quickly. You can resize images in Preview: open them all, select them all and pick Tools > Adjust Size. There are batch image editors in the Mac App Store, should you need more advanced tools.

The trick to choosing online images or any other kind of media is to keep it focussed, relevant and appropriate. One well-chosen image or useful bit of embedded media can be more effective than a page plastered with all kinds of things. Always ask yourself: does this make my site better for visitors? If the answer is no, it’s got to go. Gary Marshall