Hotlinking Etiquette

And now for some­thing a lit­tle geekier.

A client of mine asked me about hotlink­ing images on her blog, Web eti­quette, and such things; she isn’t online at the moment — I can’t blame her… It is the mid­dle of the night, after all — so I’m tak­ing the oppor­tu­nity to throw an answer together here for anyone’s benefit.

Before we can dis­cuss hotlink­ing, though, it is imper­a­tive to define it to pre­vent any mis­un­der­stand­ings. Basi­cally, hotlink­ing is dis­play­ing an image on your Web­site while the image itself is being ref­er­enced from another Website.

An exam­ple of hotlink­ing can be seen in the com­ments of King­dom Geek; each com­ment includes an avatar image. These images are hotlinked because while they may be dis­played on a [code]rickbeckman.org[/code] page, they are being ref­er­enced from [code]gravatar.com[/code].

This is evi­dent from the HTML used to dis­play the image: [code]<img width=“80” height=“80” class=“avatar avatar-80″ src=“http://www.gravatar.com/avatar/dadc4a075213f0ae6942768eb234f49e?s=80&amp;d=identicon&amp;r=R” alt=””/>[/code]

In a nut­shell, hotlink­ing is dis­play­ing images on your site with­out first sav­ing them to your own server.

You may have heard that hotlink­ing is bad eti­quette, and gen­er­ally, that is true.

You see, while ser­vices such as Gra­vatar or even Flickr are setup to allow remote link­ing of their images on other sites, most Web­sites aren’t. While link­ing to images on oth­ers sites may indeed work just fine, you are caus­ing their band­width to be used to dis­play items on your site.

In a real sense, this is steal­ing, and depend­ing on just how much of their band­width you are using, you could cause them to incur over­age charages with their site host.

Addi­tion­ally, hotlink­ing may be bad for your site as it is plac­ing a reliance upon some­one else’s site. If their server goes down, your site is left with a bro­ken image. If their web­mas­ter decides to dis­cour­age hotlink­ing by dynam­i­cally replac­ing all remotely loaded images with a shock­ing or oth­er­wise embar­rass­ing pic­ture, your site will dis­play it until you replace the image, prefer­ably with one hosted on your own server — for exam­ple, by using Word­Press’ “add media” func­tion­al­ity while posting.

In order to avoid hotlink­ing and ensure that you are not com­mit­ting any online faux pas, here are some things to keep in mind while you add media to your site:

• When­ever pos­si­ble, link to media on your own server(s).
• If upload­ing media to your own server is not pos­si­ble or prac­ti­cal, look for ser­vices that allow hotlink­ing to their con­tent; these include but are not lim­ited to Flickr and YouTube.
• If upload­ing media to your own server is not pos­si­ble or prac­ti­cal and it is unclear whether the media you want to use is on a site which allows hot links, take the time to con­tact the site owner or web­mas­ter to ask per­mis­sion to hotlink the image.
• Do link back to the source of the media you are using, either by wrap­ping the image in [code]A[/code] tags, plac­ing a link below the media, or includ­ing the cita­tion in a footnote.

If you hap­pen to be on the other side of the hotlink­ing fence and would like to ensure that your media isn’t being hotlinked from else­where, check out this tuto­r­ial, just one of the excel­lent resources avail­able at Per­ish­able Press.