Image recommendations

Chi
Chi
  • Updated
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 20 MB, as larger files cannot be uploaded.
  • Images file sizes should be as low as possible while retaining clarity and quality. The larger the image files you upload, the slower the load time of your page.
  • For fast loading times, aim to keep images under:
  • 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.
  • Follow the same rules for image sizing for cover page images as for static images above.
  • 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.

Was this article helpful?