PSA: Hey if you don't like hotlinking, do this instead

[Rubbereon]

Decided to make this thread because for the third time time now, somebody thought it was a smart idea to put a text area field with an invalid img tag to copy right under their button.

If you do not want folks to hotlink your button that's fine you've got a viable alternative, which is to embed an image through text. There is even an online tool that encodes images into base64 text for you, so you don't need to install any particular app off github.

https://base64.guru/converter/encode/image

After you've uploaded your button, you can then select "HTML image <img />" and it will give you a ready-to-use img element to paste into the textarea field. The base64 text is identical to your decoded image, whether it's png, gif, jpeg or some other filetype it will display exactly as it should.

Comparison:



My button on my website ^(hotlinking)

Code

<a href="https://rubbereon.nekoweb.org/"><img alt="" src="https://rubbereon.nekoweb.org/img/button.gif"/></a>

My button on my website if I wanted to be annoying

Code

<a href="https://rubbereon.nekoweb.org/"><img alt="" src="YOUR IMG HERE"/></a>

My site button converted to base64

Spoiler

Code

<a href="https://rubbereon.nekoweb.org/"><img alt="" src="data:image/gif;base64,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" /></a>

[close]

^ My button is 4K, so that's why it's so long, in part due to it being a gif. your button will be smaller if it's a compressed png.

A suggestion I can make is to keep everything on one line because if you beautify it, like I've seen on a couple of buttons, it will create an immeasurable mess due to image files being large, base64 can't really help with that.


Also this "INSERT IMAGE HERE" stuff irks me more than if they had just placed their button in the open and that's it, done, end of the story, but it's the fact they added a text area with an invalid img tag with an "src" attribute that is just plaintext and not immediately noticeable is what annoys me. One time, past midnight where I live btw, I copied one of these for my directory page, dropped it into the html just to notice that it wasn't a valid img, I literally went searching for a random temporary button as a substitute until the next day because I didn't feel going back to their website, all I wanted is to close the browser and go to sleep.
So now that you know how doing that makes people feel, I hope you consider this alternative if you want no hotlinking.


On a personal note (you're free to leave, there's nothing especially important down there), I do not understand what's so bad about hotlinking, like the only arguments I will ever accept are "what if the domain gets purchased by an attacker?" and "what if the server is self-hosted" in regards to bandwidth, but besides these 2 I haven't heard any good arguments. I'm gonna list 5 of the ones I seem to notice often:

• Hotlinking steals bandwidth all the while using nekoweb, neocities or any other host. First, they can handle it, they have the infrastructure for it. Second, I use nekoweb too if that's your host so they're stealing bandwidth from themselves?!
• What if the website goes down? No more button, right? Huge benefit actually! You know when a website is down since their button won't load. otherwise you gotta rely on something like this: https://ahrefs.com/broken-link-checker (still have to since I have old regular text hyperlinks on my directory page, but still you get the point) Just set an alt text on the image as fallback.
• But that's stealing! Different from the bandwidth one, somehow that one came up a bit often. Read this, downloading and reuploading your button would just count equally as stealing if we go off the dictionary definition of the word. I will say that it's only morally objectionable if you use actual art without credit on your webpage (at least the signature should be visible on the drawing or the name of the artist should be in the filename, that's the bare minimum if you ask me), or copy an entire website's appearance because that took a lot of effort to make too, but a small blinkie made in 30 minutes tops isn't even comparable. I also have no idea if you stole your graphics (obviously not your own button, but anything else on your page), so that wouldn't make you any better. I really have no idea why that's even being used as an argument.
• This is bad practise! Ok and? <center>, <marquee> and <font> are bad practise too, but people use them anyway. Yeah sure if you're making a professional site that might be something to consider, but it's a personal website that almost nobody in the world will ever see.
• What if they move the button? If they rebrand that skips the need to reupload the button. I'll say that yes it's annoying if they move the button, but that's so easily fixable I generally don't mind it given the above positive.

The funniest part is when somebody uses filegarden, catbox.moe, imgur, google drive or anything else except their own site to host their images, while they simultaneously complain about hotlinking, like brother aren't you literally hotlinking off them?!

[Dan Q]

A further (tiny!) problem with hotlinking is it's necessarily slower, because the web browser does the following:

1. Where is firstsite.example.com? (DNS)
2. Connect to firstsite.example.com (HTTP/HTTPS handshake).
3. Ask firstsite.example.com for the web page.
4. Parse the web page and see an externally-hosted hotlinked image.
5. Where is secondsite.example.net? (DNS)
6. Connect to secondsite.example.net (HTTP/HTTPS handshake)
7. Ask secondsite.example.net for the hotlinked image.
8. Etc...

Steps 5 and 6 can be completely skipped for images hosted on the same domain! And they're not nothing: DNS takes an arbitrary amount of time, and a HTTP (and especially HTTPS) handshake can involve a whole round-trip. There are mitigations (prefetch etc.) to mitigate their impact, but none are perfect. Hosting secondary resources (images, CSS, JS, whatever) on the same domain as the page that references them is generally good for performance.


But yeah, data: URLs are cool. For small files (little icons, SVGs, etc.) you can embed them into e.g. your CSS, for performance benefits too (shorter resource chains). Thanks for sharing!

[poesu]

Hotlinking steals bandwidth all the while using nekoweb, neocities or any other host. First, they can handle it, they have the infrastructure for it.

The bandwidth limit is set for every individual user. The limit both Neocities and Nekoweb give is generous, but it's still there and it bothers some people.


I don't understand either the point of the textarea if one does not want it just copypasted as is. I guess they just saw others do it and did the same?

I have my button in the footer. If someone wants to have it, I expect them to just right-click on it and save it. Regardless, I don't really participate in the button-linking culture.

The funniest part is when somebody uses filegarden, catbox.moe, imgur, google drive or anything else except their own site to host their images

I know right??

[Dan Q]

I know right??

LOL; you're doing it in your forum signature!

I can tell because you're using Imgur and I just see a generic "Content not viewable" image, because Imgur isn't available in the UK.

Another argument against hotlinking! If you put images on your own site, it means that anybody who can see your site... can see the images. If you use images on somebody else's site, there's a real possibility that you'll get visitors who can see your pages... but not the images!

[Rubbereon]

LOL; you're doing it in your forum signature!

I can tell because you're using Imgur and I just see a generic "Content not viewable" image, because Imgur isn't available in the UK.

Another argument against hotlinking! If you put images on your own site, it means that anybody who can see your site... can see the images. If you use images on somebody else's site, there's a real possibility that you'll get visitors who can see your pages... but not the images!

That's because they're using this website https://idbuttons.neocities.org/ and the website hosts all the graphics on imgur directly. So when you copy any of their embed codes, it will necessarily hotlink back to imgur.

I personally wouldn't use them because the font on these is so tiny (this alone might be a problem for folks with eyesight issues) that I might as well put any of the relevant information into my bio instead!

[poesu]

LOL; you're doing it in your forum signature!

Whoopsie daisy! Gotta upload them to my site ig. Didn't think about it when I took them from the  Flight Rising forum for the sole purpose of using them in the signature.

[Dan Q]

@poesu Another option would be to put them into File Sneeze. That way they're hosted on Melonland, which solves for almost all the problems we've discussed with hotlinking! 

[knifex]

Ooooh I love hotlinking I do it all the time.
To me, its quite opposite of stealing- by hotlinking, you are basically baking in credit for the image by providing anyone curious enough to right click it the original source. (Granted, when I do it, I usually also add a link to the source on click but that not the point.)
If someone specifically requests not to hotlink, its 50/50 chances I download the image / just skip out on it, sorry.

I've seen a few vehement hotlink haters but I'm glad to read that its frankly not that big of a deal!
I do it most in my little decorative shrines, so even if the images dont end up loading, theres most likely something else to look at. Plus, most of those images come from tumblr, so they def. have the bandwidth.