Continue reading to learn about theory and my research or jump right to the response gallery.
Weigh Our Options
- Do nothing.
- Do something.
- Kindly contact the websites hosting the hotlinks and ask them to remove/modify them.
- Threaten the websites hosting the hotlinks with legal action.
- Modify the HTTP response.
- Send nothing.
- Send a modified image back.
- Send a clear, gentle indicator that the image is the result of a hotlink, in the hope that the site will notice it and take it down.
- Send a carefully crafted image that disrupts the page and/or offends those browsing as much as possible.
Through the Looking Glass
Now that we've decided to substitute hotlink responses with an image of our choosing in place of the original image, what do we send? We're still communicating... so what properties should an effective hotlink image contain?
In essence we are weaponizing an image; we want maximum impact for minimum cost. An assault on the senses.
Maximize probability of delivery
An effective response is one that is heard; we must ensure that the intended recipient is actually capable of viewing the response. In terms of the web this means that the response must be compatible with the browsing software of those viewing the resulting page.
In terms of image types there are two that are overwhelmingly, widely supported: JPEG and GIF. Many other formats exist (PNG, BMP, etc).
Maximum visual impact
An efficient response should stand out clearly from the surrounding page. We cannot know beforehand exactly what the layout/colors of the page are, so we must make an intelligent guess.
In order to best determine how to draw attention, let us study the opposite art: camoflage.
Strategies to maximum visual impact:
- Large size
- High color contrast with the containing page
Given that our goal is to convince the offending sites to remove the hotlinks, we should give them as much information as possible as to which link it is.
Annoying/disturbing to view
An effective image should be as annoying and/or disturbing, in and of itself, as possible. This will help in goal #1; but will prioritize the removal of the hotlink from the site; lest the site continue serving pages containing this image.
How does one most effectively annoy?
- High contrast colors
- Jerky motion
- Advertising - We can learn something from existing banner ads, whose job is also maximum visual impact.
How does one most effectively disturb? Disturbance is more in the realm of psychology... by definition in order to disturb someone we need to show them something they think is wrong in some way. What systems do people use to decide what is right and wrong? The physical world provides the possible and impossible (for example, we would never see someone walking on the ceiling). Society provides the concept of taboo, cultural conduct guidelines.
Disrupt the normal flow of any including page
An effective response will not only be itself disruptive, but maximize its visual impact by disrupting the including environment as much as possible.
As small as possible
We still have to serve these responses, so we should try and minimize the impact on our own server/bandwidth; serving a small image will also ensure that it loads quickly.
But how small is small, filesize-wise? What is the smallest an image can be, and what is the relationship between image size, load time and bandwidth?
Web pages and embedded content is sent via HTTP (HyperText Transfer Protocol), which itself is embedded within TCP/IP (Transfer Control Protocol / Internet Protocol). Most (but not all) TCP/IP is transferred over Ethernet. Ethernet consists of distinct frames of 64 to 1518 bytes. This means that an TCP/IP/HTTP message of <= 1518 bytes should be contained within a single frame; whereas one of 1519 or more bytes would be split into two or more frames.
MAC Frame IP TCP HTTP Data bytes 14 20 20-60 ~400 ~1000
What does this mean in laymen's terms? It means that there is a diminishing return concerning the efficiency / speed gain regarding an image's size. there is little additional benefit to shrinking an image beyond the point where the HTTP response containing it can fit in a single Ethernet frame. We'll assume for simplicity's sake that the Ethernet, TCP/IP and HTTP headers is ~500 bytes; so that leaves us with approximately 1000 bytes for a most-efficient image payload. As a rule of thumb, each 1000 bytes / ~1k of an image's size translates to a single ethernet frame.
After reading some color theory we decide to throw it all away and go with bright, high-contrast combinations like pink and green and blue and red .
OK, now that we've laid out our goal and priorities, let's try generating some images and then evolving them into efficient responses.
Call Them Out On ItOften all that is required is for you to publicly address a person's private misdeed, and they will be shamed (and socially pressured) to change their ways. Sadly, online, this doesn't appear effective.
- domain asks you to please stop hotlinking. the high-constrast and mangled text makes the image smaller and hopefully adds to the annoyance. this doesn't seem to be effective.
- "fuck off" (favicon-sized)
- "what the fuck" in russian. One of the sites hotlinking me is a .ru domain; I thought i'd try offending them in Russian. I have no idea if the translation is accurate.
AdvertisementPerhaps impersonating an advertisement will annoy them. Site owners may notice...
For one's own site
Faux real advertisements
ErrorsPerhaps we can annoy/confuse viewers by showing them an image that is associated with errors
Logic BombScience fiction abounds with logic bombs, weapons against conscious computers designed to trigger an infinite loop or other destructive behavior. How about trying the same with the human brain?
Optical IllusionsDue to the way human vision works, it is possible to construct images to fool the mind into perceiving something incorrectly. Unfortunately these images need to be pretty large. Someday I may come up with a small example, but IU haven't been able to find/construct one.
Intentionally Unintelligible Image ContentsHumans naturally attempt to make sense of any images presented to them. How about constructing an intentionally damaged/unintelligible image?
...the problem with these annoyances is that they are too subtle. The sites that often include these images are often cluttered, trashy forum sites anyways, strewn with image garbage. These will likely not be noticed amid the clutter.
Pokémon styleFlashing red and blue has been linked with epileptic episodes in the popular Pokémon television show. Inspired by this I tried a pokémon-style hotlink response. I think this is the most effective so far: it fits within a single ethernet frame, is 300px on each side giving it a formidable size if not resized, and if it is resized it still retains its power. This image, when embedded at full size within a page makes it nearly impossible to read any surrounding text; multiple instances on a single page give me a headache.
Repetitive High-Contrast Patterns
- horizontal stripes, black and clear
- vertical stripes, and and clear
- a closeup of LCD pixels
Dazzle CamouflageThese I found surprisingly effective; their high contrast and high repetition confuse and disturb viewing, as the human mind tries to make sense of the senseless pattern.
Interrupt Page FlowNext I tried extreme sizes. HTML pages have a "flow" to them; the more complex the page the more it relies on the cooperation of its many components. We try to design a component that will disrupt the natural flow of the page, stretching and distorting it, maybe even pushing parts of it off the screen.
GIF x and y sizes must fit in a 16-bit signed integer, and thus the maximum dimension is ~32,000. So I created images with the minimum and maximum size for each dimension:
- 30000px x 1px tall image designed to stretch page beyond the bottom of the screen
- 1px x 30000px wide image designed to stretch page beyond right edge of monitor
widthattributes; and the images are not being loaded in divs that hide their overflow, which some sites have.
DiscomfortThe site of other people under duress or pain.
Unpleasant Human Bodily FunctionsTODO: plenty
ShockAt first I attempted to harness infamous internet shock pictures; their content and resulting notoriety helps make it clear these are not the intended images and should provoke a response. I cropped, shrunk and down-sampled the photos to get them under 1k.
Standard Shock Images
- 2 girls 1 cup
- Yvette Bova : Another less-infamous but still shocking image of a female body builder; shocking perhaps because of its challenge of traditional gender roles.
GoreDisturbing images of mangled bodies. TODO:
SwastikaThere are few symbols more identifiable and reviled in the west than the Nazi swastika.
- a penis hotlink image. frankly the other stuff hasn't been working so well, so I took a little inspiration from Fight Club and tried splicing in a picture of an erect penis. people seem to notice.
- Mr. Penis. sends the same message in possibly a slightly friendlier way.
- penis icon. meant for replacing a hotlinked favicon.ico
Combinations of Taboos
- homosexual rainbow flag containing nazi swastika
- homosexual rainbow flag containing nazi swastika hotlink image. only 5k, hard to ignore and pretty offensive.
- homosexual hitler hotlink image. pretty darn offensive. seems popular.
MiscellaneousI tried a myriad of different images; you can browse them
Hopefully after peeking at some of the images above you are shocked, offended, even neaseous. That is the point. The purpose of the images is to convey that feeling.
I hope my research and experimentation can help you in dissuading your own hotlinkers.