Images can enhance the experience and appeal of your design system. Here are some quick tips for adding images in your styleguide.

Static images

• Images can be added using the Image/Gif block or Design Uploads block
• Uploaded images shouldn't exceed 150 MB, which can cause slow loading time.
• zeroheight supports the following image files:
  • jpg
  • jpeg
  • gif
  • png
  • svg

Cover page images

• Pick a cover page image that looks good on different screen sizes. The cover image will resize itself based on what device you're viewing your styleguide from 
• Optimize your images for the web before uploading them into zeroheight.
• Uploaded images shouldn't exceed 150 MB, which can cause slow loading time.
• If you want to make the cover image look sharp on most monitors, you should choose a size of at least 1920 width. The height will depend on how tall your cover page is. If it's full height, then we recommend going with a height of 1080.

Images in Shortcut Tiles

• For the standard shortcut tiles, the best image ratio is 2:1.
• For the different-sized shortcut tiles, the best image ratios are:

  • Small 4 column = 2:1
    Small 3 column = 3:1
    Small 2 column = 4:1
    Small 1 column = 8:1

  • Medium 4 column = 1:1
    Medium 3 column = 3:2
    Medium 2 column = 2:1
    Medium 1 column = 4:1

  • Large 4 column = 4:5
    Large 3 column = 1:1
    Large 2 column = 8:5
    Large 1 column = 4:1

Images in Rules

• There is no image ratio for Rules blocks as the height will adapt to your image.