Skip to main content

Images and Photography

Photography for Use on Your Site

Photos of campus events, buildings, etc. can be found on the sites below. Do not use images downloaded from google or other places that you have not paid for or gotten permission to use.

Learn more about photography usage and scheduling here.

Web Image Sizes

For examples of how these image sizes work with each theme, you can review our example sites for an Academic College Site, Academic Site or an Administrative Unit Site.

College Banner

1350 x 325 pixels, compressed for web jpg file.

Top Medium Image Banner

Also the Department Homepage Banner and Unit Homepage Banner
1140 x 325 pixels, compressed for web jpg file.

Top Image Banner

820 x 345 pixels, compressed for web jpg file.

Content Images

For Photo Galleries, Cover Images, Media & Text Blocks
450 x 300 or 300 x 450 pixels, compressed for web jpg file.

Portraits

151 x 240 pixels, compressed for web jpg file.

Photography Sizing Tips

When looking through what to delete or reupload, remember to check the actual sizes of the images you are deleting

You have 150MB to use. When looking through your image sizes remember that 1MB = 1,000KB.

You could delete 20 photos and feel like you’ve done a lot but if each was only about 20kb you’re only saving 400KB which isn’t going to make a great impact on your storage space which can be frustrating.

See the following screenshots to see what to be on the lookout for. You will notice that just one of these images is 1MB and the other is a whopping 2MB. Deleting these images or resizing them will have a great impact on your storage limit. As a good rule of thumb, nothing uploaded to your site should exceed 1,000 pixels wide. The first one is 3088x2068px and the second is a similar size.

You should not be uploading full quality or storing print-quality images in your WordPress site. Please create a folder in your departmental google drive for backup of photos.

Example Image 1 - 1mb
Example Image 2 - 2mb

Resizing Images

Resizing images can be done easily without special software. See the instructions below for various options available to you for resizing and optimizing images for the web.

Using Online Tools

  1. Navigate to an online image resizer tool.
  2. Upload the image you want to resize or edit.
  3. In the right sidebar, change the pixels to the size you want. 1000px wide is generally plenty wide for web use.
  4. When you’re finished resizing, click the resize images button in the bottom right.
  5. Click the download compressed images button to download your images.
  6. To further compress the image, upload it to the Online Image Compressor site then download the compressed image to your computer.
  7. Upload to WordPress.

Adobe Photoshop

  1. Open your photo in Photoshop.
  2. Edit it as you would like to see it on your site.
  3. Go to File → Export → Save for Web (Legacy).
  4. Change the preset to JPEG High.
  5. Change the width of the image to 1000px or less. You will be able to see an estimate of the size in the bottom left.
  6. To further compress the image, upload it to the Online Image Compressor site then download the compressed image to your computer.
  7. Upload to WordPress.
Photoshop Application View

Windows 10

  1. Navigate to the image you want to resize. Right click the image and open with “Photos”
  2. Right click the image in the Photos application. Select “Resize”
  3. Select “Define custom dimensions”
  4. In the “Width:” area, input a value less than 800 or if resizing a banner image consult the sizes above.
  5. Make sure “Maintain aspect ratio” is checked. A quality of 80% should be good, if you want the file size to go down a bit more (take up less space) you can reduce the quality but be careful of going too far.
  6. Click “Save revised copy” and save the image.
  7. To further compress the image, upload it to the Online Image Compressor site then download the compressed image to your computer.
  8. Upload to WordPress.

Windows 7

  1. Navigate to the image on your computer, right click and select “Edit” to open the Paint editor.
  2. In Paint, click “Resize” in the top toolbar and an options panel will appear.
  3. Select the radio button to resize by “Pixels” and then enter a new value (less than 800) for “Horizontal.” You will see the Vertical value will automatically be calculated to maintain the aspect ratio.”
  4. Click the “Ok” button to apply the changes.
  5. Save the resized image to your computer.
  6. To further compress the image, upload it to the Online Image Compressor site then download the compressed image to your computer.
  7. Upload to WordPress.

Mac

  1. Navigate to the image you want to resize. Right click the image and open with “Preview”
  2. Go to “Tools” at the top of the screen. Select “Adjust Size…”
  3. On the pop up that appears over your image, next to the lock icon, make sure the dropdown is set to “pixels” (it is probably set to inches when you first look at it.)
  4. In the “Width:” area, input a value less than 800 or if resizing a banner image consult the sizes above.
  5. Make sure the “Resolution:” is set to 72 pixels/inch and make sure “Scale proportionally” is checked then click ok.
  6. Go to “File” and click “Save” if you want to save over the original image. Go to “File” and click “Duplicate” to create a copy of the original file then click “Save” to save the file and rename if you wish.
  7. To further compress the image, upload it to the Online Image Compressor site then download the compressed image to your computer.
  8. Upload to WordPress.

WordPress Media Library

  1. Click “Media” in the left sidebar. Upload the image you want to resize. (if the image is larger than 2mb you will have to resize the photo outside of WordPress)
  2. Click on the image you want to resize. (if you are resizing an image already uploaded, it is recommended that you download the image and re-upload it so that you do not edit the existing image that may already be on other pages)
  3. On the popup, click on “Edit Image” under the image.
  4. On the right side you will see a column that shows the current dimensions. Under “New dimensions:” change the left number (the width) to be less than 800 or if resizing a banner image consult the sizes above.
Edit Image Step 1
Edit Image Step 2
Edit Image Step 3

Want to get your images as optimized/small as possible?

Upload the image you want to compress to the Online Image Compressor site. You can tweak how compressed you want the image depending on the subject. Download the compressed file and upload to WordPress.

Last updated: 8/26/2022