This article goes through the best practices and recommended sizes for images uploaded to Happeo Channels or Pages.
Happeo is designed to be responsive no matter which device you use and therefore adapts to any screen size you're working with. This means that you cannot fully control how the end-user sees the image you've added to Happeo - how it looks depends on if they are on their phones, tablets or desktop computers.
Along with this to keep in mind, here are some best practices and suggestions:
To decrease file size and loading time we recommend using optimised JPG-, PNG- or GIF-images. For example, TinyJPG is an easy and free optimising tool.
As a base principle, JPG is good for photographs, but if the image has simple colour surfaces, line drawings, text, or iconic graphics then GIF or PNG is usually a better option for reaching better quality with smaller filesize.
PNG is a lossless format which means it will have a big file size on photographs and similar images.
Images that are added to Posts and Comments can be any size up to 10Mb as Happeo will shrink images that are too large to ensure that they won’t exceed the loading times. Resised images will sustain their original aspect ratio.
Image size recommendations are always defined by the biggest possible context and appearance. In other words, if the image will be shown big on a desktop computer screen and the smallest of a mobile device, we recommend choosing big enough images to fill the requirements needed for that big desktop image.
Happeo takes care of reducing the image size when needed. When you upload the image, Happeo downsizes the image and makes multiple versions of it which then are displayed depending on which device is used. Happeo also automatically crops the image previewed if it’s too big. You can read more about image cropping in the next section.
Today many devices offer high-resolution displays. For that reason, we recommend uploading twice the size of the physical pixel-sized image (e.g. if the physical size is 140 x 140 pixels, the recommended image size is 280 x 280px (140@2x density).
The maximum image size for uploads in Happeo is 2560 X 640px. For that reason, in most cases, we recommend using such images with the longest side of 2560px. If not otherwise mentioned, this is the default recommendation.
Note that when images are added to a Drive folder, Happeo does not resize them.
For more information on image sizes, please check out this article on recommended image sizes.
Image cropping in responsive layouts
Because of the responsive design mentioned above, images are cropped in some cases, depending on the aspect ratio of the image and the containing context. When choosing or preparing the image for publishing, it’s good to know how the cropping occurs.
In a nutshell, please place the important subjects close to the centre of the image since the image will be cropped either from the top and bottom or from both sides equally.
Note that an image where the main subject is either too high. low or aside might be cropped poorly, see the examples below.
For that reason, try to emphasize images that are not too tight and have some space around the main subject. One option can be cropping the image and placing the subject in the centre of the image using an image editing software before uploading it.
Horizontal and square images are supported better in Posts, Feeds and Feed Widgets whereas portrait images have to be cropped or scaled down to make sure they won’t take too much space from the feeds.
In the posts, it is always possible to preview the full image by clicking the image. On a post with multiple images, the algorithm sustains the aspect ratios and organizes the image grid in a way that images usually are displayed without problems.