Images can be added to all section types in various forms, as outlined below.

TITLE / TEXT OVER MEDIA / REVEAL SECTION

Full-screen landscape image:
2560px wide x 1440px tall JPEG at 100% quality

Full­-screen portrait image:
1080px wide  x 1920px tall JPEG at 100% quality

Additional tips:

  • In Title and Text Over Media sections: ensure the image is prepared and cropped with a text area in mind. You can use the Section Options overlay slider to apply a semi-opaque layer above the background media to help your text stand out.
  • Images will be automatically cropped to the centre on your reader's screens if their browser is a different aspect ratio than the original image.   If that's not ideal you can also choose a focus point on the image, as outlined here. Choosing a focus point ensures that if the image needs to be cropped, the section you selected will remain visible. This is especially useful if key parts of your image are close to the edges.
  • Your uploaded landscape-format image is also used to automatically create a portrait-oriented version for use on tall screens such as phones.  The automatically-created portrait image is a centre-crop of your uploaded landscape image.  If this is not suitable, consider uploading a different image specifically for portrait screens, and/or selecting a focus point on the portrait image to ensure that important parts of the image aren't cropped out on taller screens. 
  • Please refer to our safe area guides (as the images will get cropped across different aspect ratio browsers).
  • Shorthand will automatically make additional smaller and compressed copies 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.


MEDIA SECTION 

  • Any size up to 2560px wide JPEG at 100% quality


TEXT SECTION

  • You can add images inline only
  • The widest that inline images will appear is 800px (apart from in tablet portrait view, when they are shown at 110% the width of the text column). To ensure your inline images fill the full width of the column, upload them at at least 800px wide.


BACKGROUND SCROLLMATION SECTION

Full-­screen landscape Scrollmation image:

  • 2560px wide x 1440px JPEG at 100% quality

Full-screen portrait Scrollmation image:

  • 1080px wide x 1920px JPEG at 100% quality

Inline image:

  • Same as text section above.

Additional tips:

  • The use of multiple images in a Scrollmation section requires that the section has considerable text.  Generally, the more images you wish to display, the more text the section will need to ensure that each image gets time on-screen as the text scrolls past.  If you have limited text, you may only be able to use one image in Scrollmation sections. Experiment with the number of images until you are happy that they don’t change too rapidly when reading the story.  You could also artificially increase the length of the text column by inserting extra space between text blocks.  
  • Shorthand will automatically make additional smaller and compressed copies of your JPEG images (without changing file type) for multiple device sizes so that your readers will be served an image close to their device ideal.


SCROLLMATION SECTION

Image for two-column view (portrait-orientation images work best):

  • Recommended width: 800px
  • Recommended max. height: 1422px
  • JPEG at 100% quality


Image for two-row view (landscape-orientation images work best) :

  • 1422px wide x 800px high

Inline image maximum dimensions:

  • Portrait: 800px x 1422px
  • Landscape: 1422px x 800px

Additional tips:

  • The use of multiple images in a Scrollmation section requires that the section has considerable text.  Generally, the more images you wish to display, the more text the section will need to ensure that each image gets time on-screen as the text scrolls past.  If you have limited text, you may only be able to use one image in Scrollmation sections. Experiment with the number of images until you are happy that they don’t change too rapidly when reading the story.  You could also artificially increase the length of the text column by inserting extra space between text blocks.  
  • Shorthand will automatically make additional smaller and compressed copies of your JPEG images for multiple device sizes so that your readers will be served an image close to their device ideal.
NB: We recommend JPEGs across Shorthand stories. Except where you may have an image with data or text, where fidelity is paramount, we would suggest a PNG which often helps with crisper areas of solid colour such as text as we don't run compression on them. It's important to test the story on different devices and check load time and image clarity. If you find that the images still aren't as clear as you were expecting, please let us know.

Please make sure all images have a sRGB colour profile. If this is not the case, you may experience color or saturation loss (i.e. they may look gray or faded). This issue is not confined to Shorthand and will also affect services like Wordpress. 
More info can be found here