Google Sites Examples




Add to your Google Plus 

Google Sites Examples for Mobile
Mobile Site Version - Google Sites Examples


.9. Image


 Prev:
8. Text Alignment
Menu: 
WYSIWYG HTML
 Next:
10. Table of Contents


Image Html

Upload Images to Google Sites through the WYSIWYG Insert HTML menu.

Google Sites supports the Image formats - jpg, png and gif.transparent Gifs/pngs are also supported. 

Animated gifs must be hosted outside your Google Site. ie. Picasa , Flickr

Image WYSIWYG Menu


Image Html Example

Transparent Gif Example:
WYSIWYG image example

The image format png also supports transparency (alpha channel).

Standard Image HTML Code

<img alt="image example" src="https://www.example.com/example_image.gif">


Google Sites Image HTML Code

Google Sites create the Image HTML code, and uses a CDN (Content Delivery Network) to host the uploaded image.

<div style="display:block;margin-right:auto;margin-left:auto;text-align:center"><a href="https://sites.google.com/site/drupalvsgoooglesites/drafts/wysiwyg-html-examples/html-image/customLogo.gif?attredirects=0" imageanchor="1"><img alt="WYSIWYG image example" border="0" src="https://sites.google.com/site/drupalvsgoooglesites/_/rsrc/1318775769267/drafts/wysiwyg-html-examples/html-image/customLogo.gif"></a></div>

WYSIWYG Image Properties


Once uploaded, the image can be adjusted uses the following menu:

WYSIWYG Image properties

Adjust an Images...
  • Alignment
  • Size
  • Text Wrapping
  • Link
The Inline CSS style attribute can also be edited manually, by clicking the <HTML> button in the Menu Bar .

<div style="" >Inline CSS </div>

Inline CSS







Image Html - Live Example

Edit your HTML live here: