How to embed images from Google Drive on your website


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.

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.


Make the file public

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.


Google Drive image link

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.


OG Image from Google Drive

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

Previous Arena Group (NYSE:AREN) rating downgraded to stay at Zacks Investment Research
Next Pharmaceutical Autoclave Market Size and Share [2022-2028] |