'Safe areas' in your background images are those parts that won't be cropped out regardless of the size or shape of the screen on which they are read.

Desktop computers tend to use wide 'landscape' monitors, phones are typically tall 'portrait' screens, while tablet devices are closer to square and are regularly used in landscape and portrait mode. Even within those device and screen types there is a lot of variation, with many different screen resolutions and aspect ratios for phones, laptops, desktop monitors, and tablets.

In Title, Text Over Media, Reveal and Background Scrollmation sections, your background images remain full-screen regardless of the size and orientation of the device on which they are viewed.

To achieve this without squashing the images out of shape or requiring you to upload many different versions of an image, the outside edges of an image you upload may be cropped to varying degrees when someone views your story. The amount of potential cropping will vary based on how closely the image's shape matches that of a reader's screen.

So that important parts of your image are less likely to be cropped out on differently-shaped screens, detail should be kept away from the edges of your images, in a central safe area. This area is effectively a portion of your uploaded image which is unlikely to be cropped out on the wide variety of screen shapes and sizes.

While it is not essential, formatting your background images to a specific size that renders well across a wide range of screens will also enable you to more easily visualise the safe area in your images.

For landscape orientation images (wider than tall), the size is 2560 pixels wide by 1440 pixels tall.

For portrait orientation images (taller than wide), the size is 1080 pixels wide and 1920 pixels tall.

On landscape images, the default safe area is approximately 1750 x 1035 pixels, and on portrait images the default safe area is approximately 874 x 1340 pixels. The measurements are approximate as they will differ depending on whether your story has a header section, navigation, etc, as well as the many possibilities of your reader's screen sizes. The measurements above and in the templates available below assume your story does have both a visible header and navigation row. If your story doesn't have a header and navigation row, then the safe area will be slightly taller. The area defined in the templates is conservative, and will cover a very wide variety of standard browser resolutions and sizes.

If it isn't possible to have the important parts of your image within the default safe area , for example a person's face at the very edge of the frame, then you can shift the safe area by choosing a 'focus point' in the picture: effectively telling the Shorthand editor which part of the image is important not to crop out at any size.

The png templates show the image safe areas on a transparent background, so if you use a photo-editing tool that supports working with image layers, you can temporarily overlay them on your image to see how the safe areas align with your content before having to upload your images to Shorthand.

If you are familiar with Photoshop, the Photoshop template is a single file with two 'artboards': one for portrait, one for landscape.

If you notice important parts of your uploaded image close to or outside of the safe area, consider recreating your image to give it some more padding on the edges or choosing a focus point other than the default.

On some devices, the safe area may still be very close to the edges of a reader's screen. For images that contain text & or other critical information, you may wish to be extra-sure about placing those parts of the image well inside the safe area, or use a Media Section instead, where the entirety of the image will be shown. We always recommend testing your story on multiple screens and resolutions.

Many people may access your Shorthand story on a mobile device in portrait mode - where the screen is taller than it is wide. In these instances, if you haven't provided a portrait-specific image for the section, your landscape image will be used at an even tighter centre crop, losing more detail on the left and right sides.

If the important parts of your image aren't in the centre, you can specify a focus point that isn't in the middle of the image, or you may wish to upload a portrait-specific image to be used on tall screens.

Shorthand automatically makes additional smaller and compressed copies of of your uploaded JPEG images for multiple device sizes so that your readers will be served an image close to their device ideal. We don't change file type however.

The landscape guide should also be used to check background video for desktop viewing, as this will also be cropped on different aspect ratio screens and browser windows. The fallback image is likely to be shown instead of the video on mobile browsers, so the portrait and landscape guide should both be used to check the at-risk areas of the fallback images on different orientation mobile screens.