Embed Google Drive Images in HTML as of 2024

Beginning Jan. 10 of 2024, Google no longer allows Google Drive images to be directly embedded on a website within an <img> tag if you were using the old tried and true method of:

https://drive.google.com/uc?id=(Image ID)

A new method to embed is now:

https://drive.google.com/thumbnail?id=(Image ID)&sz=w800

The width parameter can be changed of course.

This issue is related to Google’s new policy regarding third party cookies (https://developers.google.com/privacy-sandbox/3pcd) and personally I’d consider it a bug since it can be replicated without any cookies being used in the first place. Whether the old method will work again or if a more official solution will be made available is unclear. This is all murky territory anyway since I don’t think embedding Google Drive images on a webpage was ever officially supported in the first place without the use of an API.

If you’ve never embedded an image from Google Drive and would like a somewhat more thorough explanation:

  1. Take your image from Google Drive and make sure the sharing settings are set to ‘anyone with the link’ (example URL: https://drive.google.com/file/d/1RG96JE581ctmORB9uNpJBDeI6vzJu_NH/view?usp=sharing)
  2. Grab the ID of the image from the above URL, which in this case is 1RG96JE581ctmORB9uNpJBDeI6vzJu_NH
  3. Reform it like so: https://drive.google.com/thumbnail?id=1RG96JE581ctmORB9uNpJBDeI6vzJu_NH&sz=w800

Below is the embedded image as proof. And if it isn’t working… well Google caught on and you know this avenue is no longer valid. I’m assuming they’re not huge fans of this embed strategy but hey, we have to help each other out RIGHT?!

You may be asking, why the heck would I want to embed images from Google Drive instead of just storing images on my server? Well I won’t tell you how to live your life. In my specific use case, I have created an event calendar that ties into the Google Calendar API. Users create an event on their calendar along with an optional image attachment, and the site displays this image along with the other details. So having all the images suddenly break was not super fun.

Leave a Reply

Your email address will not be published. Required fields are marked *