Google Sites Basics: Adding Images and Embeds

Learning Objectives

By the end of this chapter, you'll be able to:

• Upload images from your device or Google Drive to Google Sites
• Embed various media types like documents, slides, and forms on your site
• Manage and troubleshoot basic embed issues on your site

Introduction

Adding images and embedded content is one of the most important skills for building effective Google Sites. Images break up text and make your site more engaging, while embedded content like forms and documents adds functionality that keeps visitors on your page longer.

This chapter covers the practical steps to upload and manage images, plus how to embed dynamic content such as documents, slides, forms, and calendars. You'll also learn how to fix common problems when things don't work as expected.

Lessons

Uploading Images to Google Sites

Adding images to your site helps break up text and makes your content more engaging. Here's how to do it:

Step 1: Click where you want to add an image on your page.

Step 2: Click the "Insert" button in the toolbar, then select "Image" from the dropdown menu.

Step 3: Choose whether to upload from your device or select from Google Drive. Browse and select your image file.

Step 4: Once uploaded, you can resize the image by dragging the corners or use the formatting options to adjust alignment and spacing.

Important: Optimise your images before uploading. Large image files slow down your site. Aim for images under 1MB where possible, and use web-friendly formats like JPG or PNG.

Embedding Content on Google Sites

Embedded content makes your site more interactive and useful. You can embed Google Docs, Sheets, Slides, Forms, and Calendars directly into your pages.

Step 1: Open the Google service containing your content (Docs, Sheets, Slides, Forms, or Calendar).

Step 2: Click "Share" in the top-right corner, then look for "Embed" or "Publish to web" options.

Step 3: Copy the embed code provided.

Step 4: Go back to your Google Site and click "Insert" then "Embed".

Step 5: Paste the embed code into the text box and click "Insert".

The embedded content will appear on your page, and visitors can interact with it directly without leaving your site.

Troubleshooting Common Embed Issues

When embeds don't work, here are the most common fixes:

Problem: Embed shows an error message or blank space.
Solution: Check that the embed code is complete and copied correctly. Make sure there are no extra spaces or missing characters.

Problem: Content shows "Permission denied" or similar error.
Solution: Go back to the original document and change sharing settings to "Anyone with the link can view".

Problem: Embed appears but looks wrong or cut off.
Solution: Adjust the size parameters in the embed code, or use the resize handles in Google Sites to change the display size.

Problem: Content doesn't update when you change the original.
Solution: Wait a few minutes for changes to sync, or try refreshing your browser cache.

Always use the "Preview" button to check how your embeds look before publishing your site.

Practice

Complete these tasks to practise what you've learned:

1. Add an image to your Google Site homepage. Try uploading one from your device and one from Google Drive.

2. Create a simple Google Form with 3-4 questions, then embed it on a new page of your site.

3. Add a Google Slides presentation to your site using the embed feature.

4. Preview your site to check all images and embeds display correctly.

5. Test your embedded form by submitting a response and checking it works properly.

FAQs

Why can't visitors see my embedded Google Form?
The form sharing settings are probably set to restricted access. Go to your form, click "Share", and change the permissions to "Anyone with the link can view".

How can I make my images load faster?
Compress your images before uploading. Use tools like TinyPNG or resize images to appropriate dimensions (usually no wider than 1200px for web use).

Can I embed YouTube videos on my Google Site?
Yes, use the "YouTube" option in the Insert menu rather than the general "Embed" option. This gives you better control over video settings.

My embedded document looks too small. How do I fix it?
Click on the embedded content and drag the corner handles to resize it, or edit the embed code to change the width and height values.

Why does my embedded calendar show the wrong time zone?
Check the time zone settings in your Google Calendar. The embedded version will use the same settings as your original calendar.

Jargon Buster

Embed: Adding content from another source (like a Google Doc or YouTube video) directly into your website page, so visitors can use it without leaving your site.

Google Drive: Google's cloud storage service where you can save files and access them from any device with internet access.

Optimise: Making images smaller in file size and appropriate dimensions for web use, so they load faster without losing quality.

Embed code: The HTML code that tells your website how to display content from another source.

Permissions: Settings that control who can view, edit, or share your Google documents and files.

Wrap-up

You now know how to add images and embed content to make your Google Sites more engaging and functional. Images help break up text and add visual interest, while embedded content like forms and documents add practical value for your visitors.

Remember to optimise your images for faster loading, and always check your sharing permissions when embedding content. Use the preview feature to test everything before publishing.

Next, you'll learn about customising the design and layout of your Google Sites to make them look more professional and match your brand.

Ready to build more advanced Google Sites? Join our membership for step-by-step tutorials and expert support: https://www.pixelhaze.academy/membership