Introduction
Images create a powerful impression in the first few seconds a visitor is in your app. Learning how to effectively use images is a great skill and this article will provide tips in getting the most out of images in your app.
Images sizes and aspect ratio
See table below of recommended image aspect ratios.
| Widget type | Layout / image type | Aspect Ratio | Recommended size (px) |
| Article | Small image | 10:7 | 300 x 210 * |
| Large image | 10:7 | 1040 x 728 | |
| Article (with summary) | Small image | Square | 300 x 210 * |
| Large | 10:7 | 1040 x 728 | |
| Review | Small image | 10:7 | 300 x 210 * |
| Large image | 10:7 | 1040 x 728 | |
| Latest widget article | - | 10:7 | 300 x 210 * |
| Product widget | Small image | 10:7 | 300 x 210 |
| Large image | 10:7 | 1040 x 728 | |
| Event widget | - | 15:4 | 1040 x 717 |
| External Link widget | - | 10:7 | 300 x 210 |
| Quote widget | Thumbnail icon | Square | 80 x 80 |
| Quiz | Main image | 3:5 | 342 x 570 |
| Background image | 10:7 | 1040 x 728 |
* Recommended override image size
Note: Articles, reviews and latest widget stories may require a larger image than the other widgets because they will display the image in the content view. Consider using an override image for the timeline to keep image size down.
HOW TO CROP IMAGES FOR ASPECT RATIOS
1. Upload or select an image for the widget
When you add an image to your widget, the standard media library popover will appear.
Select an image and locate the Edit Image link in the media library panel on the far right. Click the link.
2. Open editing mode
From this screen you will be able to edit your image using any of the tools provided.
3. Crop image using aspect ratio
Drag your mouse over the image to highlight an area to crop.
Add your ratio values into the Aspect ratio fields provided in the Image Crop box. You'll notice your previous image selection snap to the new aspect ratio.
Drag the selection into the correct position and click the Crop icon. This will crop the image into your new aspect ratio.
4. Save image
Click save. Navigate back to the article / widget and select the newly cropped image from the media library.
Comments
0 comments
Please sign in to leave a comment.