Add a Photo to Your Google Site

Many people use Google Sites to create their very own websites. These are great for expressing yourself, or selling items to customers. However, many of the Google Site help pages are notoriously vague and hard to navigate. Adding images will vastly improve your website and make it look far more professional. Luckily, in a few easy steps, you can add a great image onto your Google Site page.

Steps

Uploading Your Google Site Image

  1. Take a picture. Use your camera and take a picture of your house, your friends, or your favorite pet. You can also find almost any picture imaginable online. Because the Google Site is open to the public, you will want to make sure the picture is appropriate.
  2. Download the image. If you are using an image from your digital camera, first plug in your camera to the computer using a USB port. A screen should pop up, depending on the program you use. Choose "import images." You can select certain images, or a whole entire album. If you are downloading an image from online, left click (PC) or two finger click (Mac) the image.
    • A drop-down box will appear, and click "Save As." It will ask you to label the image, so make sure you name it something easy to remember.
  3. Go to your Google Sites online page. Type in the address or click on the bookmark. You can do this from any browser, such as Google Chrome, or Internet Explorer. Click on the "Edit" button (looks like a pencil) on the top right of your window. This will bring you to "Edit Mode" so that you can change/add images.[1]br>
  4. Click the right edge of the object or text that you want the image to sit below. Hit Return to create a break. This will give your image some space so that it is not directly next to another object or block of text.[2]
  5. Select the "Insert" button. This is located at the top left of your browser screen. A drop-down menu will appear. Scroll up the menu and click "Image."[2]
  6. Click "Choose File" or "Browse." Select the image you want to add from your computer. A preview of the image should appear in the window. You can upload multiple photos by clicking on the new "Choose File" button to the right of your photo preview. Once you have found the correct image(s), simply double-click, and it will begin uploading to your Google Site.[1]
  7. Link to a web URL. Instead of adding an image from your computer, you can link to a web address. Rather than clicking "Image" from the "Insert" tab, click "Web Address." You'll be reminded to use your own image, not a copyrighted image. copyright After you have checked, simply type the URL into the text box that pops up.[2]
    • Provided your URL is correct, the image should appear within the box for you to check, although you may need to give large images a bit of time to appear. If you are still experiencing difficulty, double check your URL.
  8. Click the "OK" button in the lower left corner of the pop-up window. This will bring the image to your Google Site screen. After the image, close all other windows, and align your image.[1]

Formatting Your Google Site Image

  1. Move the image to the preferred position. Click on the image, and move it around. After you have done that, a blue rectangle will appear floating on the photo, offering several options. These include your image URL, an option to change your image position, an option to wrap text, and an option to change the size of the image. Feel free to play around with these options.[2]
  2. Create a border for your image. Click the "HTML" tab located to the upper right of your Google Site page. When the address of your image pops up, add in a series of code, corresponding to the border you would like. Your address will appear between two symbols like this: <(image address)>. You will want to add the code at the end of the address, but inside the last symbol.[3]
    • Example: <(image address) style ="border:1px solid black; padding:5px;"> This code will give you a border that is solid black, and 1 pixel in width. It will also separate your border from the image 5 pixels in length.
    • Example: <(image address) style ="border:5px dashed blue; padding:15px;"> This code will give you a dashed blue border that is 5 pixels in width. There will also be 15 pixels that separate your image from the border.
  3. Align your image. Get into "Edit Mode" and click on the image. An edit window will pop up. You will see bars lined to the left, lined in the middle, and lined to the right. Click on any of these, depending on where you want your image. Click "Save" when you are finished.[3]
  4. Change the size of your image. Get into "Edit Mode" and click on the image. Click S, M, L, or Original. These mean small, medium, large, or the original size of the image. You can click on different ones to pick your favorite. After you have chosen, click "Save."[3]
  5. Save. If the draft hasn't already been saved for you, go ahead and click on "Save" in the top right corner. Your image is now safely inserted. Always remember to save, otherwise you will have to start the process over again.

Video

Tips

  • Check out different forms of code to create intricate borders. You can go from really simple, to extremely complex, depending on the level of code you use.
  • Play around with your options. Nothing is set into stone, so feel free to change the size of your image, or align it to the other side of the page.

Warnings

  • Remember to save everything. Double and triple check.
  • Always make sure that the image you use is suitable for the public eye. This image will appear when people search your Google Site address.

Sources and Citations