Table of contents.
I stumbled upon this 2012 Stack Overflow thread when searching for a simple and, more importantly, free method to host some images online.
Turns out, you used to be able to host images and even static HTML pages using Google Drive. Unfortunately, that feature had been discontinued since 31 Aug 2016, with alternate options suggested for consideration. However, it is still possible to host / serve images in Google Drive by changing its link sharing structure.
Since the answers in the aforementioned thread are rather messy with outdated information strewn all over, I thought I’d write a summary along with a simple tool of my own concoction to convert sharable Google Drive links into image URLs.
Why you might want to host images with Google Drive.
- You need a reliable image host that doesn’t delete your files.
- You need a way to serve images online for free without paying for hosting.
- You have a paid hosting plan but it has stringent bandwidth limits. Hosting high-resolution images can eat through your bandwidth really quickly.
Not all image sharing websites are happy to provide image hosting for free. If you look at the Terms of Service from Imgur, you are explicitly forbidden from:
Stuff not to do
… don’t use Imgur to host image libraries you link to from elsewhere, content for your website, advertising, avatars, or anything else that turns us into your content delivery network. If you do – and we will be the judge – or if you do anything illegal, in addition to any other legal rights we may have, we will ban you along with the site you’re hotlinking from, delete all your images, report you to the authorities if necessary, and prevent you from viewing any images hosted on Imgur.com. We mean it.
Imgur.com Terms of Service, last viewed 13 Nov 2022.
Google Drive comes with 15 GB of free storage, which makes it perfect for the situations listed above. If need be, you can even create a new Google account for free, meant solely for image hosting!
The only downside here is that there are no explicit bandwidth limits for downloads from Google Drive. If an image gets viewed or downloaded too many times and exceeds a certain limit, it may become temporarily unavailable to prevent abuse.
A quick search online indicates that some kind of download limit does exist with Google Drive, but it falls into a bit of a gray area. Certain answers quote Google’s Gmail bandwidth limit of 1250 MB per day, but other answers seem to suggest that you can go up to 10 TB of downloads per day.
So your mileage may vary when it comes to hosting images with Google Drive.
Step 1: Upload your image to Google Drive.
Simply navigate to drive.google.com in your browser, then drag and drop your file into the browser window.
I recommend creating a folder dedicated for storing images in Google Drive. It helps to keep things organized.
It might also be a good idea to compress the image beforehand using online tools like ShortPixel or Squoosh. A smaller file size can help save on your Drive storage space and bandwidth.
Ideally, the image should not take up more than 3 to 5 MB in size, even for high resolutions. If you want fast load speeds, I recommend compressing your images to around 200 to 600 KB or less depending on its dimensions.
Step 2: Change access permissions to share the image publicly.
Simply right-click on the image in Google Drive to bring up its context menu, and then select the “Share” option.
A popup will then appear on the screen, which allows you to make the selected image public by setting its general access permissions to “Anyone with the link”.
Step 3: Copy the link of the shared image and extract the image ID.
You can copy the link to the image by clicking on the “Copy link” button in the bottom left. You can then paste the copied link down into any text editor using the keyboard shortcut “CTRL + v” (on Windows) or “CMD + v” (on Mac).
The link should look something like this:
https://drive.google.com/file/d/1M24-Uk9mtI1xNRqydKtFXJL_nw6171vv/view?usp=share_link
The only part of the link we are concerned about comes after /file/d/ and before /view. This garbled-looking string of text in the middle is a unique ID assigned automatically to your image by Google Drive.
In my case, my image was given the ID “1M24-Uk9mtI1xNRqydKtFXJL_nw6171vv”.
Step 4: Create a new URL using the image ID.
The URL for images hosted on Google Sites comes in the following format:
https://drive.google.com/uc?id=[unique image ID]
Update 17 Oct 2024: For some reason, Google has disabled the above URL format around early to mid 2024 – I just never got around to updating this blog post. The alternate URL format as shown below in Miscellaneous discoveries appears to still work for our purposes.
https://lh3.googleusercontent.com/d/[unique image ID]
All you need to do is replace [unique image ID] with the actual ID assigned to your image, which in my case looks like this:
https://lh3.googleusercontent.com/d/1M24-Uk9mtI1xNRqydKtFXJL_nw6171vv
And there you have it, a URL to an image hosted on Google Drive, which can be added to any website that allows you to hotlink or embed external images using some simple HTML code like so:
<img src="https://lh3.googleusercontent.com/d/1M24-Uk9mtI1xNRqydKtFXJL_nw6171vv" alt="An image hosted on Google Drive."/>
This trick should continue to work so long as you can still view the image below:
And it works with vector graphics or .svg files as well, although the image served by Google will be automatically converted into a pixelated, raster-based format.
Miscellaneous discoveries.
An alternate option to Step 4 is to append the unique image ID to the following:
https://lh3.googleusercontent.com/d/[unique image ID]
Which in my case would result in a URL that looks like this:
https://lh3.googleusercontent.com/d/1M24-Uk9mtI1xNRqydKtFXJL_nw6171vv
You can try checking this alternate option if the URL in Step 4 fails to work.
Another interesting thing to note is that it is also possible to host CSS stylesheets using this method. This opens up the possibility of building static HTML websites using Google Sites with images and stylesheets linked externally to Google Drive.
It’s still a very impractical way to put static HTML sites online, since you are still subject to a bunch of limitations, but hey, at least it’s something.
Unfortunately, you can’t link to external JavaScript files hosted on Google Drive. It appears to treat all external JS files as potentially malicious executables.
Automatic Google Drive link conversion tool.
For the sake of convenience, I have written a simple script to extract the Google Drive image ID in Step 3 and convert it into an image URL in Step 4.
If it succeeds, the URL will be copied to your clipboard automatically.