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.
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.
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.
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.
Optimize Your Photos
Reduce image size without reducing quality
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).
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.