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. This feature doubles the resolution for sharper previews, making it particularly useful for high-resolution display setups.
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.
Troubleshooting
When dealing with image-related problems, here are some common challenges and their solutions:
Image Quality Appears Poor: Activate the "@2X" option in image block settings to enhance preview resolution. Use SVG format for logos or graphics to maintain quality during scaling.
Images Fail to Load or Display: Occasionally, images might not load due to outages from external providers. This usually self-resolves after the provider fixes the issue, requiring no immediate user action.
Newsletters
In general, Frontify's Newsletters are set to be 600px wide and there are 2 types of content blocks that support images:
The "Image" block:
The image will take the full width of the newsletter, meaning 600px.
(It's possible to apply some padding around the image that would potentially decreases the width of it).The height of the image will depend on its aspect ratio, as the block will just place the whole image. This means portrait pictures can take up quite a lot space, requiring users to potentially scroll a bit. Therefore, you may want to opt for landscape formats when using the image block.
The "Text & Image" block:
This block splits the space 50/50 between text and image, meaning the image will be 300px wide. The height adjusts based on the aspect ratio of the image.
Portrait pictures may work well with this block but it really depends on the amount of text that you will be placing next to the image. In order to have a nice balance, portrait pictures will likely look best when there is a lot of text next to them. Whereas landscape pictures may work nicely next to shorter text (i.e. a call to action).
When it comes to image resolution or file types, you will want to follow general best practices for images in email campaigns (you can find many helpful articles about this topic online). A few key takeaways:
Make sure that your images are 2x the size of the space that they will be placed into, in order to ensure crisp resolution on different devices. That being said, don't use unnecessarily large images either.
Choose a file format that is appropriate for your use case:
PNGs support lossless compression if you require higher resolution. But they will be larger files than JPGs.
JPGs offer the benefit of a smaller file size but may not show quite as much detail as a PNG.
GIFs are a great way to introduce animated content into your newsletter but they come with a higher file size and too much animation can also be distracting.