Some tips to ensure your media is optimised for use in Shorthand, and consumption across the web.
When preparing images:
Use JPEGs or WEBPs where possible (see below).
Refer to our size guidelines.
Use the safe area guides to ensure important parts of your image aren't cut out on differently sized screens.
Consider setting focal points for your images to aid auto-cropping, or uploading 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. This can be used to add a semi-opaque layer or gradient between the image and text that can help the text to stand out against a complex bacground image.
Sections render differently on devices and screens of different sizes, so be sure to test your story at multiple resolutions.
PNG vs JPEG vs WEBP vs GIF or SVG
We generally recommend JPEGs or WEBPs across Shorthand stories as they offer the best balance between fidelity and file size. When you upload an image of these formats, we'll automatically produce versions at different sizes and compression rates and serve the most appropriate size and compression to your readers depending on their device size and network speed, etc.
For images comprised primarily of just a few flat colours (think graphics, graphs, logos or simulated text) 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. Use it if you need transparency and more colour than is possible with a PNG-8 image.
Alternatively, an SVG image also works well for flat-colour images. As a vector format, if your image is comprised of limited detail, SVGs can produce crisp images with small file sizes. Be aware though that some SVG images may not scale as expected due to how they have been encoded. Some SVG files contain in-built scale information, while others don't, so test accordingly.
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.
GIFs, while not as optimal as the similar PNG-8 format, can be great for flat graphics and text. Similarly, Shorthand does no further file size compression to images in GIF format.
Animated GIFs can also be used, however those with large file sizes may result in poor page performance.
When preparing background video:
Use the safe area guides.
Consider how the fallback image will get cropped across screen sizes where shown (for example, on mobile browsers). A fallback is created by default from the first frame of your video, though you can upload a custom fallback image if preferred.
Refer to size guidelines (for example, 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 (1280 x 720 is usually plenty).
Use a compelling poster / fallback image. We generate one by default from the first frame of your video, but you can upload a custom jpg of your own.
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 with our Developer Tools, or post-export, ensure thorough self-testing ahead of your deadline.