This tutorial describes how you can display images stored in your Google Drive on your website or emails. All image files on Drive have a high-resolution thumbnail that you can embed on any webpage.
Looking for a place to host images so you can embed them on your website? The most popular image hosting services are imgur.com
and imgbb.com
but did you know that you can also use Google Drive to host images.
It works something like this. You upload an image file to Google Drive and make that file public. Google Drive will now generate a high resolution thumbnail image of the uploaded file that you can directly embed on your website or emails.
Generate Google Drive image links
1. Share the file
Go to Google Drive and upload the image you want to embed on your website. Then right click on the image and choose Get link
to get the shareable link of the downloaded file.
2. Change permissions
In the sharing dialog, choose the permissions drop-down menu and select Anyone with a link
. This will make the file visible to anyone on the internet who has access to the sharing link. The file will be available even for users who do not have a Google account.
Click it Copy link
to copy the file link to your clipboard.
3. Generate a link
Next, open the Google Drive Embed page and paste the file link into the text input box. Click it Generate
button to grab the direct image link that you can place in your website or emails.
How Drive image links are generated
Internally, the tool takes the image’s public link from your Google Drive and fetches the Open Graph image from the HTML. He then changes the s
OG image setting to switch to high resolution thumbnail. It’s a similar technique we use to get direct links for Google Drive photos.
Alternative approach
If you’d rather edit the URLs yourself, here’s an alternative approach that will help you generate direct links for your player images.
Make the image file in your Google Drive public as described previously and enter the link to the public image file. The URL will look like this:
https://drive.google.com/file/d/13XE4Ah1aK5kSGniMbeard9DJ1iuroR_K/view?usp=sharing
The part 13XE4Ah1aK5kSGniMbeard9DJ1iuroR_K
in the Google Drive link is the unique identifier of the file. Take this file ID and replace it in the URL below:
<img src="https://drive.google.com/uc?id=DRIVE_FILE_ID" alt="Google Drive Image" />
You can use this link to easily embed images into Google Sheets. The only downside to this approach is that you have no control over the size of the generated image. In the previous example, you can easily modify the width parameter to generate images of any specific size.
See also: Tips for Google Drive URLs