Some tips to ensure your media is optimised for use in Shorthand, and consumption across the web:
When preparing images:
- Use JPEGs where possible (see below)
- Refer to our size guidelines
- Use the safe area guides to ensure important parts of your image aren't cut on different sized screens
- Consider using different images for portrait screens
- If your image will sit under text, consider methods to help text clarity such as blurring all or part of the image. Title and Text Over Media sections offer an 'Overlay' setting that adds a semi-opaque layer between the image and text layers that is an easy method for helping text to stand out.
- Sections render differently on devices and screens of different sizes, so be sure to test your story at multiple resolutions.
PNG vs JPEG vs GIF
We generally recommend JPEGs across Shorthand stories as they offer the best balance between fidelity and file-size.
We don't provide a retina option as it's almost always an over-optimisation in Shorthand.
For images comprised primarily of just a few flat colours (think 'graphics', graphs, logos or simulated text) then we suggest using the PNG-8 format.
The PNG-24 format allows for more colours, but results in substantially larger file sizes, especially where the image contains complex elements.
To retain the fidelity of your text and data, Shorthand does no further compression to PNGs (they are served to your readers at their original file size) so they should be used as sparingly as possible and aren't suitable for photographs. Test the story on different devices and check load time if you are adding multiple PNGs.
If you find the PNG is still not high enough quality please let us know.
GIFs, while not as optimal as the similar PNG-8 format, can be great for flat graphics and text. Similarly, Shorthand does no further filesize compression to images in GIF format.
Animated GIFs can result in poor page performance and in some cases cause a mobile browser to crash so we advise against their use. Where possible, converting an animated GIF to MP4 video will result in smaller files and better page performance. Or you may wish to achieve the animated effect by instead using multiple static frames in a Scrollmation section.
Please make sure all images have a sRGB colour profile. If this is not the case, you may experience colour or saturation loss (i.e. they may look faded). This is true for any image viewed on-screen, not just at Shorthand. More info can be found here
When preparing background video:
- Use the safe area guides
- Consider how the fallback image will get cropped across screensizes where shown (e.g. on mobile browsers) and upload man alternative portrait version if required
- Refer to size guidelines (e.g. max 2MB per 5 seconds)
- Using video in your title section? Keep the clip as short as possible to improve load time
- Consider how to deliver a smooth loop from the end to start of the video.
When preparing foreground video:
- Refer to size guidelines (avoid 1080px)
- Use a compelling poster image
- Check performance across devices using the preview and the share function.
While building stories:
- Check across devices and screen-sizes using preview and the share function
- If you're doing any custom work via developer mode features, or post-export, ensure thorough self-testing ahead of your deadline.