I recently had to create an HTML page as a midterm output for one of my courses.
One of the requirements set by my professor is that the images must be hosted in a different location on the web, since only one file (index.html) can be passed.
To meet this requirement, I looked for an external image host. The first one I used banned me from using their services because I had pointed my assets to their website. I also used Google Drive by sharing the images, but that didn’t end well.
Many image and file hosting websites are very strict about referencing images from their website to other websites. This practice is called hotlinking. Hotlinking is not ideal for many image hosting sites because it takes up bandwidth and resources of their servers. Most of them also prohibit the use of their websites as your CDN. They only allow linking their images on social media sites and forums, but not on an external website or your own site.
So, I kept looking for a hotlink friendly image hoster and finally found a website that meets my requirements. I created my output very well until I submitted it.
When I shared my output with my friends, they noticed the images I used were not loading, even though it was working well for me. With some thorough troubleshooting and investigation, I found out the cause of my problem.
It seems that the website I use is also used by others to host inappropriate images, which causes it to be blocked by our local ISPs through DNS filtering. On my end, there are no problems as I use Cloudflare DNS, which does not block this website.
This really hit me hard because this is my midterm examination. Fortunately, my professor allowed us to resubmit our work if we wanted to change anything about our work. I ended up hosting my images through GitHub since they seem to be lenient about hotlinking images.
To prevent this from happening to you and your project/website, here are my recommendations.
Before using an image hosting service, you should check if the domain is blocked on your local ISP’s DNS. If their website doesn’t load or you can’t access it, it’s blocked by your ISP.
You can also try uploading a test image on your prospect image host and see if you can access it over your normal ISP connection with its default DNS resolver.
Test your site on different devices and connections before sending your work or using it in production or on the web.
If hosting images is important for your project or website, you can use an image hosting site that is tailored to host website assets. There are very well-known providers on the Internet, but they cost money.
You can also use an object storage provider like AWS S3 or Backblaze B2 or a CDN like Bunny CDN, but that also costs money.
GitHub is also ideal if you just want to use a few images. Just upload your assets to a repository and link it to your website. This page is very good at helping you get set up.
Lesson learned on my part. I’ll be more cautious next time.