Add media to pages in RapidWeaver

Learn how to add a range of media to your site – and avoid some pitfalls

part 4 of 5 Next issue: Get to the top of the pile with SEO tips and tricks

REQUIRES

RapidWeaver 7

you will learn

How to add images and embed content from elsewhere

IT WILL TAKE

15 minutes The internet may have started life as a text-only medium, but today it’s capable of all kinds of wonders. You can add photos or videos, music or maps – the range of available content is massive. So in this guide, we’ll use RapidWeaver to create a multimedia marvel.

We’ll look at two kinds of content. The first is content you provide, such as images you use to illustrate your 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 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 done the work for you, and when it can also offer visitors live traffic info, satellite views, directions, and locations of nearby points of interest?

Embedding content is particularly useful when somebody else owns the copyright. Upload a Lady Gaga video to your site and you’ll receive a stern message 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, and so on.

Another kind of embedded content is that which you’ve uploaded somewhere else. It may sound odd to record a video on your iPhone, upload it to YouTube and embed the YouTube version on your site, rather than just uploading it to your own site, but it’s a 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 bandwidth. That’s YouTube’s problem!.

Embedding is usually set up by the third-party 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 not so good for 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, and you’re expecting the owner to cover bandwidth costs of serving the image to your visitors. Also, it’s easily defeated as they can replace the image. As many unscrupulous hotlinkers have found, that replacement can be the kind of image you really don’t want to appear on your site.

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

Often, the best place to get pictures is your own photo library. The internet’s also great, of course, but 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: and check “Commercial use allowed,” “Modifications allowed” and “No known copyright restrictions.”

Online image dos and don’ts

When using images, a sensible naming convention is good for organization – and for being Google-friendly – “FlatironBuilding_front.jpg” is more helpful than “IMG003129.jpg” – and it’s wise to fill in alt(ernative) text for important images (do so by doubleclicking 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. For example, for the file “FlatironBuilding_ front.jpg,” alt text like “Picture of Flatiron Building in daylight” and a similarly descriptive caption is useful and Google-friendly. Whatever you do, don’t make important text part of an image

without also adding it to a page’s body text, or it might go unseen by those with sight issues or poor connections.

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. Optimize your images to make them as small as possible without becoming unrecognizable. 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 focused, 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. Ask yourself: does this make my site better for visitors? If the answer is no, it’s got to go.