Using Images on Google Sites
Insert images from a local file or add images from a Picasa Web Album
Liane St. Laurent
lstlaurent@mansd.org
First Things
Pixels and Image Size
Resize an Image in Picasa Web
Choosing a Page Layout in Your Google Site
Insert and Image on a Google Site
Image Attributes and Text Wrap
Advanced Tip: Image in a Text Box
Insert from Picasa Web
Picasa Web and Image Visibility
Copyright and Citation
Things to consider when using images on a web site, blog or other digital project:
- How big is your image? Modern cameras produce images with very large file sizes and you should consider resizing prior to uploading your image.
- Image size - how should it look? fill the page or constrain to a smaller space?
- Insert a single image or a slideshow?
- Insert from a file or from a Picasa web album?
- Finally - but very important: copyright - do you own the image? Remember to treat digital images with the same respect we treat text. Remember give attribution to the owner. Look for images labeled for reuse or that have Creative Commons licensing.
How big is a pixel? Here is a screen shot of an image in a Picasa web album.
This image is 3072 x 2304 pixels and would fill my screen if displayed full size!
Let's resize the image in Picasa:
Learn how to upload images to Picasa Web here:
http://support.google.com/picasa
The "Creative Kit" will open:
TIP: enter a width and check "Keep Proportions" to automagically resize the height.
700 px
400 px
and 200 px
GOOD TO KNOW: When you use File > Insert from the menu in a google site, the "real size" image is inserted. You can downsize a very large image by making it large, medium, or small. This will change how your image displays on the web page, but the full image will be reloading in the background which can slow down page loading.
This is why it's good to resize images before uploading!
In a Google Site: Choose Page Layout
Example: single column
Example: two columns
Insert an image in your Google Site:
"Alt text" is optional but recommended. If you add a very brief caption this makes your images accessible for visually-impaired individuals who browse web sites through a text reader. The text reader reads the caption.
Choose an image that has already been uploaded to your Site or click "Choose File" and browse to the file on your computer.
Image Attributes: alignment, size, wrap on/off.
Click the X to delete the image.
Tip: if someone clicks on your image it will open in a new window or tab in the web browser. If you "Remove" the link, the image is still on your original page, but it is no longer a "clickable link".
Image with text wrap 'on':
Image Attributes and HTML
TIP: HTML is a markup language for displaying web pages. You can click 'HTML' in the Google Sites page editor to edit the HTML for your image. You might want to do this if you want your picture to display in an exact size other than the default S, M, L sizes in the image tool.
Advanced Tip:
To further control placement on a page in a Google Site you can first insert a text box and then insert an image into the textbox. See next slide!
Image directly inserted and an image in a text box:
Insert from a Picasa Web Album:
Insert a single image or choose "Picasa Web slideshow" to display an entire "album" of images.
IMPORTANT: In order for others to view the pictures on your web site you will need to adjust the "visibility" of your Picasa Web album.
Your Picasa Web Albums are by default visible only to you. If you would like to embed a web album on a Google site, you need to change the visibility options so that others can see your pictures.
First, select the album you would like to "publish". Then select Actions > Album properties.
Change the album visibility to the level of access you wish to grant.
What do the access levels mean?
Only you: private, nobody else can see your pictures
People at [Your Organization] and People at [Your Organization] with a link: this requires a login with a user ID and password. NOTE: Staff and students are in two separate organizations so if you would like pictures to be viewable without an organizational login, choose one of the next levels.
Anyone with a link: this setting is like an "unlisted" phone number. Your items are visible on a web site you publish, but can't be found or indexed by a search engine. No sign-in required to view your pictures or slideshows.
Public on the web: Your items might show up in search results.
Copyright
We all agree that images make projects more interesting and engaging, but we need to treat images with the same respect we give to text!
If someone copy and pasted text into a term paper or report without giving attribution to the author we'd call it... plagiarism
Sign up for a free account at www.commonsensemedia.org to download free lessons on digital literacy and digital citizenship.
Image Citation:
The Online Writing Lab (OWL) at Purdue University has easy to use guides for MLA and APA Styles: https://owl.english.purdue.edu/
This page gives information on citing many electronic media including sound recording, television shows, movies and images:
https://owl.english.purdue.edu/owl/resource/747/09/
How to find images:
Take your own pictures!
Use Google advanced image search.
Look for images Creative Commons licensing in Flickr or other web-based photo sharing sites.
Look for public domain image repositories.
