History 402A (Dr. Cawthra): Working with Image Files

Use Local Files Instead of Linked Images

Although most image features in StoryMaps allow you to link to a publicly-viewable image file located on another website, I recommend downloading a local copy of that image file and then uploading that to StoryMaps so that you still have a copy of that image in case the original website goes down or changes.

Recommended Image Properties

When selecting digital images to include in your StoryMaps story – whether photos, illustrations, graphics, maps, image copies of documents, etc. – there are several image properties you want to take into consideration.

• Image File Format: For image content displayed on the web, you generally want to use a .jpg file for photos and .png files for graphics, but either file format will work well for digital exhibits.
• Image File Size: Try to download images or resize the images at about 300 KB maximum. This helps your story web page load faster. Large image file sizes take longer to load.
• Image File Dimensions: Understanding how to read an image file's dimensions can help you select images that display the best in your digital project. You want to select and upload an image that is large enough for your project visitors to see well. Image file dimensions on the web are displayed in pixels, as width x height. If image dimensions read as 700 x 400, we interpret that as 700 pixels wide by 400 pixels high. For StoryMaps projects, I generally recommend selecting an image dimension that is at least 300 x 300.

The above example is a photo item record from Wikimedia Commons, for a Creative Commons-licensed photo of Yosemite National Park. Underneath the image preview box, we can choose to preview and/or download that photo in multiple image file dimensions. For an StoryMaps project, I would probably select the 884 x 760 option or the 552 x 480 option. The 1,178 x 1,024 and the original file size of 2,000 x 1,738 will be larger file sizes and might load too slowly. If you were using this photo in a print panel for a physical exhibit, you would want to choose the largest file size with the highest resolution since that will look best on print materials.

Learning Activity: Visit that Wikimedia Commons item record and click on each set of image file dimensions to gain a better understanding of how each of those those photos look in your web browser.