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 optimized JPG-, PNG- or GIF images. For example, TinyJPG is an easy and free optimizing tool.
As a base principle, JPG is good for photographs, but if the image has simple color 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 for 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. Resized 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 on 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.
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 cropping occurs.
In a nutshell, please place the important subjects close to the center of the image since the image will be cropped either from the top and bottom or from both sides equally.
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 center of the image using 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.