Using images with your web content can increase engagement, boost page views, and create an emotional connection with users. With so many resources for photos, graphics and icons, there’s no reason not to include them on your site. Images are very powerful, but they can be overused quite easily. Try to use photographs and graphics only where it makes sense.

 

snarl image

File Names


Use relevant keywords when naming your file. You’ll also want to be sure to use the most important key word first. Instead of ‘img-0904.jpg’, the image above would perform much better with a name like ‘siamese-cat-diet-exercise.jpg’ with ‘Siamese Cat’ being the most important term and ‘Diet’ and ‘Exercise’ being additional descriptors.

File Names info

ALT Text


Always include alternative text with images. The alt text is displayed when the image is not visible to the user. If someone has a screen reader or has their css turned off, instead of seeing the image they’ll get the alt text. Not only will using alt text improve the accessibility of your site, search engines will also be able to read the alt text and will help your images rank in searches.

Alt Text Info

Photo Credit


Although it is easy to find images on the internet, that does not mean that you are allowed to legally use these images. If you don’t have any good original photos of your own, you may want to consider acquiring some stock photography as an alternative to simply “borrowing” images you find on the web. Some of the images do have commercial usage limitations, so please make sure to read the licensing for any image you plan on using. Check out our Resources page where we outline some good options.

Photo Resources

Optimize Your Photos

Reduce image size without reducing quality

 

 

monitor with grid

There are so many ways to retrieve photos from a variety of sources these days, and it's important that every image get the proper treatment that prepares them for being showcased on a website. That includes making them as small as possible with tools like Photoshop ('Save for Web') or online compression/optimization generators. 

Ideally, your images should be no larger than 1MB

Reducing the resolution is one way to drastically decrease file size

Crop or resize images to maximize their impact

Share a unified voice.

If you're in need of campus photography, be sure to check out the UC Santa Barbara Digital Asset Library. The library is curated by the Office of Public Affairs & Communications, updated frequently, and assets are free of charge for staff & faculty members (UCSBNetID required). 

Digital Asset Library Login

collage

File Types

The right file type will package a quality image that loads quickly

JPEG

Images for web with a lot of detail are best saved as a JPEG. This file format was created for saving images with complex colors like photographs. Saving a photo as a JPEG will ensure you have the highest quality image at the lowest possible file size.

GIF

GIFs are mainly small, animated files, but are also useful for minimally-colored images for web like icons and graphics with limited colors. There is generally image loss with GIFs so these should be a last resort option.

PNG

If you have an icon or logo with a transparent background, a PNG is going to be your best bet. Although they are one of the larger file formats you can use, if you have a logo with a transparent background a PNG works perfectly.

 

SVG

Modern sites are using SVGs more than ever, and for good reason. These files, generally used for logos and graphics, are the smallest and can be displayed at any size with no loss.