Preparing Images for the Web

OpenScholar has built-in features to help you scale images, but it is still best to start by uploading images that follow web standards. Below are some resources to help with choosing the correct format, compressing, scaling, and cropping images.

Choose the Correct Image Format

There are three image formats used on the web:

  • JPG: used for photos, since they support millions of colors.
  • GIF: used for simple logos, charts, illustrations and icons with high contrast, GIFs also support transparency.
  • PNG: a newer format that is now generally preferred for logos, charts, illustrations, and icons. PNGs support transparency, as well as more complex use of color, gradients, and shading.

Learn more about web image formats in this quick Lynda tutorial:

 

 

Keep File Sizes Small

Upload images with a small file size to ensure fast downloads across platforms. If your image is multiple megabytes, always compress it before uploading to OpenScholar. Even images with large dimensions should have a file size of 200-300 KB or smaller when properly compressed.

Photoshop has a save for web feature that allows you to easily compress images while still retaining quality, as shown in this Lynda tutorial.

Important tip: When saving for web, always work from a copy of your original high-quality image. Keep the original in case you need it again. Once an image is compressed, the extra data (and image quality) is discarded.

Don't have Photoshop? Other basic photo editing tools will allow you to manually adjust the following settings to make your image web-ready.

  • Resolution: set to 72 pixels per inch
  • Color profile: set to RGB
  • Image dimensions: reduce the dimensions of images that are thousands of pixels wide. For OpenScholar, images typically do not need to be more than 1,000 pixels wide.

 

Resizing and Cropping Images

When resizing an image, avoid stretching small images to a larger size, which creates pixelation. Large images can always be scaled down, but small images cannot be made larger without sacrificing image quality.

Need more control over the appearance of your images? Try cropping them before uploading them to OpenScholar. The Lynda tutorial below shows how to use the crop tool in Photoshop, which includes the ability to crop an image to a specific aspect ratio. This is particularly useful when sizing images to fit in a widescreen slideshow, or when you want to crop images to consistent dimensions for all of your pages. 

The aspect ratio for OpenScholar homepage slideshows are as follows:

  • Widescreen overlay slideshow: 3:1
  • All other slideshow styles: 16:9

Updated: 7Aug15