Download Working with Images Guide - Site-in-a

Site-in-a-Box User Meeting – Images
Uploading an Image to a Basic Page
1. Add a new Basic Page or click on the Edit tab at the page you wish to add an
image to.
2. Find the Add media icon located in the WYSIWYG editor toolbar and click on
it.
3. A pop-up box will appear. To upload an existing file from your computer click
on the Browse button. Files must be in one of the following formats: JPG,
JPEG, GIF or PNG.
4. Another pop-up will appear showing files on your computer. Locate the
image file you would like to upload and click on the Open button and then
the Upload button.
5. Click Upload and then click the Next button.
6. Enter the Alt Text and Title Text for your image then click Save. These
should just be descriptions of the actual image. These are used for screen
readers and search engines.
7. A new window will pop up showing the image and a few options. Be sure
that Display as is set to Responsive so the image works across all devices.
8. At the bottom of the popup, click Submit.
Images and Web Accessibility
What is Web Accessibility?
Web accessibility means that people with disabilities can use the Web. More
specifically, Web accessibility means that people with disabilities can perceive,
understand, navigate, and interact with the Web, and that they can contribute to the
Web.
Why is Web Accessibility important?
The Web is an increasingly important resource in many aspects of life: education,
employment, government, commerce, health care, recreation, and more. It is
essential that the Web be accessible in order to provide equal access and equal
opportunity to people with disabilities. An accessible Web can also help people with
disabilities more actively participate in society.
How do I make sure my images are Accessible?
All you need to do is make sure each image on your website has an Alt Tag and Title
Tag which was outlined in a previous slide. The alt tag and title tag can be the same
wording. It needs to be descriptive of the image and relevant to content of the page
so people with disabilities know what the image is showing.
Recommended Image Sizes for Different Page Elements
Here are some sizes that we recommend for different page elements on Site-in-aBox websites:





Slideshow – Tall (Standard): 670 x 300px
Slideshow – Short (Available on Request): 670 x 200px
Sidebar: Any height with maximum width of 220px
People/Staff Pages: Any size but must be square
Content Areas: Any dimensions with 400px width max
Different Types of Image Formats
Digital images can come in many formats but the main ones we use for web are JPG,
GIF, or PNG.
JPG
•
•
•
•
GIF
•
•
•
•
PNG
•
•
•
•
•
Most commonly used format in web
“Lossy” – image data is discarded according to degree of compression
Millions of colors
Medium file size
256 colors
“Lossy”
Can support animations
Smaller file size
Alternative to JPG and GIF
“Lossless” – no image data discarded during compression
Supports transparency and millions of colors
Larger file size – longer load times
Recommend using PNG’s for logos
Resizing and Saving Images – Windows
1. After opening the image in Microsoft Paint, click Resize.
2. Click the Pixels radio button and resize the Horizontal value of the image.
Be sure that Maintain aspect ratio is selected.
3. Click File, then Save As and choose the format you would like to save the
image in.
Resizing and Saving Images – Mac
1. In iPhoto, click the Photos tab and scroll to the photo you wish to edit. Then
double click on it to focus on it.
2. After you have double clicked your photo and the photo is taking up the
majority of the screen, click the File button in the top menu and select
Export.
3. Now just choose the format you want in the Kind section, fill out the
dimensions you want the image to be in the Size section (Use the “Custom”
preset with Max set to “dimension” so you can specify the size), and then
click the Export button.
Where to Find Images
So, you’ve got a beautiful new website but you don’t have any photography or
artwork of your own to add. Here’s where to go and where not to go to find images
for your website.
Where to Go
Stock Photography
• iStockphoto
http://www.istockphoto.com
• Getty Images
http://www.gettyimages.com
• ShutterStock
http://www.shutterstock.com
University Resources
• Redbar – http://redbar.arizona.edu
Where NOT to Go
Google
• Unfortunately, you can’t just copy and paste images directly from Google. If
you do, you run the risk of copyright infringement and/or cease and desist
letters. Trust us, it happens!
Tumblr and Other Social Photo Sites
• Same reasons as above.