There's no one specific rule for working with image resolutions in Frontify - it depends on how you want to use the platform. Do you document your brand to show your employees how everything should look like? Or are you making the assets available for reuse? Will the assets even be used for printing? Is it a combination of everything?
Overall, all the images uploaded to the platform are intended as previews (web usage) and not for print.
Our image manipulations are targeted for web usage and are thus in a lower resolution than the original image you uploaded. The quality used is lower than the original. This is mainly to save bandwidth and reduce loading times when displaying them online. Of course, the original file is available for download.
In general, when uploading images to Guidelines, we recommend optimizing for the most commonly used screen sizes. For example, 1920x1080 (Desktop, Landscape) was the most commonly used in 2021.
A few recommendations for specific areas to get the best result:
Style Guide Header Image
Background image for the header (the smallest option):
Should be at least 90px in height. Because the design is fluid it should be as wide as the monitors are of the people viewing it.
For example 1920px * 90px would be perfect for a full-HD screen.The image is zoomed to the center if there’s not enough size, cropping the oversized portion of the image.
It’s always better to upload it too big as we do optimization on every image if it’s too big.
For the bigger headers there is only a difference in the height for the 3 different header settings:
S: 90px
M: 380px
L: 900px
Style Guide Image Block
Previews are generated automatically for the best balance between loading speed and image quality.
Use an image with at least 1600px width for the best result
Use the @2X toggle in the block settings to increase the quality.
Login Page Background and Logo
The following minimum sizes for your assets are recommended:
Background image with at least 1600px in width.
Your logo with a size of at least 200px in width.
Get the best result by using your monitor’s resolution.
Favicon
For customization of the browser tab icon please make sure that
file size below 2 MB
.png format
the best size is 16x16 or higher resolution 32x32
However, if you have any unanswered questions or feedback, please do not hesitate to contact us.