Skip to content

Adding Images to a Page

Using the image field

Images uploaded using the image field are restricted to the page and cannot be used on other sections of your website unless re-uploaded

Step by step instructions

  1. Under Manage Content -> click on the Page Title you want to edit
  2. Click Edit
  3. In the area with your content click the image button in your WYSIWYG editor above your Body copy OR use the Image box BELOW the Body copy, select Open File Browser
  4. Select the images directory
  5. If you need to upload an image, then choose upload at the top
  6. Click Insert file
  7. Click OK

Best Practices for Adding an Image Online

Images on your site should relate and support the content on your website. While good images can enhance your website, poor quality images will have the opposite effect. It is best to not add an image just for the sake of having an image if you do not have one that supports the content and/or is not the best quality.

Here are some tips for improving your use of images on webpages:

  1. Resize large images: larger file sizes take time to load which will lower your page speeds and access time. Typically, an image on the web should be around 30kb (kilobytes) to 500kb. You should aim to have it 100kb or lower for best SEO results.
  2. Optimize the images before upload: Web Resizer is a very easy and free online tool for optimizing images for your website. Simply browse and upload an image. The image will be automatically resized and you’ll be able to download the newly optimized photo, save it to your local computer, and then use it on your website. Optimizilla can optimize the image to reduce file size while keeping the quality of the image intact.
  3. Physical size: An example of this is a image size of 200px x 200px. It is best to resize the image to approximately what you need it as before uploading. Uploading a large image then resizing the image on the website doesn’t do anything to the file size. The website will still load the large file size.
  4. Avoid pixelated and low-quality images: Just as this suggests, when using an image please make sure it is clear. Quality matters.
  5. Use appropriate alt text: Please use the appropriate alt text on images. More information below regarding alt text
  6. Understand copyright: Do not use images from any search engine or website outside of, unless you have permission from the copyright holder of said image.

Proper Use of Alt Text on Images

The best format for alt text is to use descriptive text that doesn’t contain any keyword spam stuffing. If you can take a look away from your screen, have someone read you the alt text of an image, and take a look at the image and feel like you had a good idea of what the image was then you are doing good.

Let’s review an example of alt tags on the image below:

UC Merced news article image example


<img src="" alt="kids">

This alt text is only "okay" because it's not very descriptive. We do show a picture of kids, but there is a lot more going on in this image.


<img src="" alt="Group of kids playing on top of a tractor">

This alt text is a better alternative because it is far more descriptive of what's in the image. This picture isn’t just a picture of kids, this picture shows five kids playing on top of a tractor.

Not recommended:

<img src="" alt=""> Or having the alt text anything other than what is in the picture

The first line of code doesn’t contain an alt text and you should use this to describe the picture.

Why is Alt Text Important?

1. Accessibility

Alt text on images is very important for the accessibility of a websites. The main reason for it is to describe images to end-users that cannot see or are vision impaired. This also includes screen readers and web browsers that block out images. Having alt text on images ensures that all users can enjoy the content on your site without missing any information.

2. Image SEO

Having alt text on your images will make for a better experience, but it also has major SEO benefits that search images look for.

Search images, like google, cannot “see” images on your website like we do and will interpretate these images differently. Using alt text will ensure that google translates these images as we intend them to.