As creatives in the tech industry, we rely on our digital portfolios to showcase our skills and expertise. A picture can speak a thousand words, but it can also take up valuable space on our websites or Notion pages. As a solution, many of us turn to cloud storage services like Google Photos to save and organize our images. Although Google offers no option for you to embed the uploaded pictures onto your website, did you know that there's a way to easily embed single photos from your Google Photos album directly onto your website or Notion page? In this post, I'll share with you two simple ways to generate an embed link that you can use to display your photos without having to sacrifice precious storage space or worry about Notion's 5MB picture size limit. 🥇__ __ Labnol's embed link generator tool This is by far the easiest and my favorite way to get embed links and code for my web design and Notion projects. Labnol is a free web-based tool that easily generates embed links for any photograph hosted in your Google Photos album. With Labnol, you can quickly embed photos in your websites, email messages, Notion pages, or blogs in just three simple steps. Steps Open your preferred photo in Google Photos and click on "Share" then "Create Link" to get a shareable link for that image. Copy the link and paste it into the "Google Photos link" box on the Labnol homepage. Confirm that you are human and click "Generate Embed Link," and your link will be ready. Why I love Labnol 🏆 ✅ Aside from being extremely easy to use and fast, this tool also generates links tailored to your specific needs. Labnol allows you to copy the generated link as a direct link (great for Notion page cover and email messages) or as an embed code for your HTML page (complete with the < and < tags. Prefered for Notion image embed). a> img> ✅ Lanbol also has other tools and guide videos that are very useful for automating your workflow and maximizing your Google tools. It's worth noting that Labnol's embed link generator only works for embedding single photos from your Google album. For embedding albums, you'll need a different tool entirely. The Downside 💔 ❌ The site can be unreliable at times as there may be times when the website is down or inaccessible. This can be frustrating when you are overflowing with inspiration and the tool is unavailable. This specific experience is what led me to discover the alternative method I will be talking about next. 🥈 The Manual Route This next step is one I learned on stack exchange sometime back. Although it's hardly as fast or straightforward as using Labnol, it does the job efficiently. With the link to your photo and a few open tabs on your browser, you can generate your embed link whenever you want. Here's how! Steps Open your preferred photo in Google Photos and click on "Share," then "Create Link" to get a shareable link for that image. Copy the link and open a new browser tab. Paste the link address into the new browser window. This will bring you to a new shared album with just that photo in it. Click the image to zoom in and right-click on the image. Select "Copy image address" from the menu. You now have your embed link, which can be used on your Notion page (both for your covers and image embed), email messages, and HTML website. The links generated here don’t have the added < and < tags you get from using Labnol. You have to add that in by yourself. a> img> Why I love the Manual Route 🏆 ✅ It's always available! You never have to worry about service outages. The Downside 💔 ❌ The manual route can be time-consuming and tedious, especially if you have to embed several photos. ❌ You have to manually add the < and < tags to the embed link, which can be challenging for users unfamiliar with HTML coding. a> img> ❌ Since the manual route involves copying and pasting links, there is a higher risk of errors or broken links if you accidentally copy the wrong link or make a mistake in the process. Conclusion These are my tried and tested methods using Google Photos to embed photos on a website, Notion page, email message, or blog. I hope that you have found the tips and tools that I have shared to be helpful. If you have any other methods or tools that you have found to be useful, please share them in the comments below. I look forward to reading them 😃 Photo by on Hal Gatewood Unsplash

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

How To Embed Single Photos From Google Photos on Your Website and Notion Page

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Creating an Immersive AR Experience: Lessons From a Hackathon

7 Websites That are Useful for Web Developers

A Beginner's Guide to Making a Career As an HTML/CSS Developer

How a Beginner can Learn HTML in 4 Hours

HTML & CSS: How to Gain Programming Confidence as a Beginner?

Web Development for Beginners - Key Concepts, Roles and Tools

Creating an Immersive AR Experience: Lessons From a Hackathon

7 Websites That are Useful for Web Developers

A Beginner's Guide to Making a Career As an HTML/CSS Developer

How a Beginner can Learn HTML in 4 Hours

HTML & CSS: How to Gain Programming Confidence as a Beginner?

Web Development for Beginners - Key Concepts, Roles and Tools

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps