It is important not to take the high-resolution 20MB photo from a digital camera and attempt to upload it straight to a website. Although it is possible for browsers to resize according to proportion, it's best to avoid having your page slowed down by making site visitors' browsers render an enormous graphic and then resize it within the browser. Visitors on mobile devices who may be using cellular data (usually a slower connection) will not appreciate super-large images either.
Here are a few best practices for images intended for the web:
- Choose images that are high quality and give a professional representation of UAB. Photos should be sharp.
- Images must be original and free of copyright unless you've been granted permission for use. It is your responsibility to ensure that photos you've purchased can be used without limit on your website.
- People in photos must have a signed release on file.
- The recommended resolution for web use is 72 dpi.
- Full-width banner images should be a minimum of 1400px wide and up to 1860px wide. But be mindful of image file size — usually measured in kilobytes, abbreviated as kb — which can be high at these dimensions.
- Maximum suggested size for any single image is less than 300kb.
- For most other photos and images, a minimum of 60px by 60px or a maximum of 400px by 400px is suggested.
- Do not use flashing, flickering, blinking, or other animated images.
- Do not embed the text of your website in web images; it impairs search engine ranking and, without proper use of alt text, could make your site inaccessible to visitors who use screen readers.
- There are three main file types for web images — JPG, GIF, and PNG. GIFs are used for simple graphics and have a low file size, but are limited to 256 colors. GIFs are great for illustrations and non-photo graphics. PNGs support a better level of background transparency than a GIF, but at the cost of larger file sizes. JPG works best for photographs as it offers a good balance between file size and image quality.
- Give your photos/graphics descriptive file names. Captions are recommended but not required.
Can't seem to find the perfect image for your website? Check out UAB's Image Gallery. The Image Gallery is for use by official UAB administrative units only.