Add a Photo to the Wordpress Banner

This extra credit activity is worth 2 points.

It is due any time during the term.

1. Find and Optimize a Photo.

1. Find one of your own photos and crop it to fit the suggested height and width of your theme's Banner area. The Theme Customizer will tell you how tall and wide to crop the image.
2. Open the file in your favorite editing applications: Photoshop, Paint, iPhoto, Preview, Pixlr, Preview, SumoPaint, Gimp, etc.
3. Use the Canvas size, Image Size, or Cropping tool to reduce the file's dimensions to fit a horizontal format, such as 1200 × 280 pixels.
4. Save the file as .JPG in a reduced resolution, such as 50% quality.
5. The goal here is to use the least file size possible to maintain just enough quality in the image. This reduces the time it takes to load the file on a phone with low bandwidth (as well as on desktop computers with high bandwidth). The process of reducing the size, resolution, and dimensions is called Optimization.
6. View the file's 'file size'. If it is larger than 40k, then re-save the file with a lower quality.

Optimized images meet these specifications:

Small file size

Keep file size less than 30k if you can.

Exact dimensions

Crop and reduce the size of images to fit the dimensions of the space in your site.

Correct file format

Online photos are usually .JPG. (Flat-color images like logos and clipart are usually .GIF and sometimes 8-bit .PNG.)

Reduced resolution

Older monitors render 72 pixels per inch (ppi) and newer monitors render at least 227ppi.

Color Mode

RGB for .JPG.

2. Add the image to Wordpress.

1. In the Dashboard, click the Themes Customize button.
2. Click the Header Image button.
3. Click the Add new image button.
4. Locate the image and click Upload
5. Crop as needed.
6. Add more optimized images if you like, then click the Randomize... button.
7. Click Save & Publish.