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.

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.

Kraken.io has a free web interface for compressing and optimizing images. Photoshop has a save for web feature that allows you to easily compress images while still retaining quality.

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 unless they are used in a large slideshow or callout banner. See recommended image dimensions below.

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. If you don't have Photoshop, you can add an image to PowerPoint or Google Slides and use the cropping tool. After you've cropped the image, right-click on the image to save it as a new file.

In PowerPoint, click on the image to show the Picture Format toolbar, then click on Crop:


In Google Slides, click on the image and click Crop:


Drag the handles that appear on the image border to crop it.

The aspect ratio for OpenScholar homepage slideshows are as follows:

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

Recommended image dimensions

The OpenScholar platform will automatically crop and resize your images after you upload them for use in different scenarios - thumbnails, teasers, slideshows, etc. For best results, use the following minimum dimensions:

  • Callout Banner backgrounds: 1920x1280 pixels
  • News images: 480 pixels wide
  • Person profiles: 480x480 pixels
  • Publication images: 220 pixels wide
  • Slideshows, standard: 1280x658 pixels
  • Slideshows, widescreen: 1520x500 pixels