-
-
Notifications
You must be signed in to change notification settings - Fork 36
Image Hosting Tips
You are here: Home > Image Hosting Tips
Before anything else, I highly recommend re-hosting random images you find onto a trusted image hosting service. Using links from random websites can work, but the image may break, change, or have bugs when other people view it. I've seen it many times. Instead, you should save the image to your PC and upload it to a host that you trust to not change.
Speaking of, your PC is not a file host! You must upload files from your PC to a valid image host. If your URL begins with file:///
then the image will not work.
If you don't have a preferred image host already, try one of these.
- Pros: Proven image host with a long history.
- Cons: Does not allow NSFW. Hard to find the direct link. Does not support webp or svg.
- Notes: Only upload images with an account! As of May 2023, Imgur may delete any images not tied to an account, so be sure you're logged in!
- Pros: Supports webp. Easy to find the direct link.
- Cons: Unproven history, having only existed a couple of years. Does not support svg.
- Pros: Easy to find the direct link, supports webp and AVIF.
- Cons: Website has quirks which can make it hard to use.
- Pros: Has a long history. Easy to find the direct link. Supports webp.
- Cons: Large image files can get downsized when served directly, causing quality loss. Does not support svg. Large image files can get downsized when served.
- Pros: Supports any file.
- Cons: Being a file host, you must have an account with a storage limit and sharing is more convoluted.
When using an image in CSS, it must be the direct link to an image. It cannot be a link to a webpage. This means that when you visit the URL it should only display the image. No navigation bar, no ads, nothing. Just the image.
You can often tell just by looking at an image if it is a direct link. While not an absolute rule, it will generally end in a file extension: png, jpg, gif, etc. For instance: https://i.postimg.cc/abcd1234/example.png or https://i.imgur.com/abc1234.png.
On PostImage, you can find the direct link quite easily after uploading. It will be in the "Direct link" text field, as seen here:
On ImgBB, you can find the direct link quite easily after uploading. You may have to select "Direct links" from the dropdown but it remembers your choice.
On Imgur, it is a bit more complex. Once you've uploaded an image, find the dropdown menu inside the three dots button. Once viewing that menu, click "Get share links".
Then, copy the "BBCode (Forums)" option.
The copied text should look something like this:
[img]https://i.imgur.com/axwPirp.png[/img]
Just remove the [img]
and [/img]
text from the start and end. The output should look like this:
https://i.imgur.com/axwPirp.png
And you've got the direct link to your image!
ImageChest has a similar UI to Imgur, but it's much easier to get the URL. Once you've uploaded your image, open the dropdown at the top right of your image. Click "Get Links".
Then find the "URL" field and click "Copy". Easy as that!
For help sharing files from Dropbox, see the "Upload to Dropbox" section of Shishio's tutorial.
If you can't find the direct link, most images allow you to right click the image and select "Copy Image Link", "Copy Image Address", or even "Open Image in New Tab" then copy the URL from the address bar.
These right-click options may be worded slightly different depending on your OS and browser.