Image Sizes

How to size your images for success. Image sizes. Picture Ratio. Pixels. Picture Pixels.

Tom O'Dea avatar
Written by Tom O'Dea
Updated over a week ago

Images in your handbook brings it to life! Here are your best practices for making the most of your images and handbook.

File Size

You want your handbook to load as fast as possible, especially for anyone who is accessing it on a mobile device. Try to keep the file size of your large images below 500k, preferably around 300k.

Image Dimensions

In General

Blissbook retains the aspect ratio of your images so that they aren't stretched or distorted. This means that at different browser sizes, parts of your image may be cut off. Using images with an aspect ratio that closely matches the aspect ratio of the container the images sit in keeps the "cut-off effect" to a minimum.

Big Background Images

Most big background images (for heroes, lists, etc) are best with a 4:3 ratio and about 1600px width (so 1600x1200). If you set the height of a hero to short or extra tall, you may need to adjust that ratio to make your images shorter or taller.

Circular Images

The circular images (e.g. the letter image and images for the profile- or tabs-themed list entries) work best as squares (a 1:1 ratio). Somewhere around 400x400px works best to keep the file size down.

Wide Images

The chapter header backgrounds and the images for the cards-themed list entries are best with a ratio of about 3:1.125. For the chapter header background images, try to keep the width under 1600px to keep the file size down.

If you have any other questions for other parts of the handbook, please let us know!

Did this answer your question?