Skip to main content

What are the requirements and best practices for adding custom images to the no-code applications?

  • Updated

To ensure the best display quality of your custom images, you will be asked to follow just a few simple requirements and best practices. In this article, we will examine: image requirements, image dimensions, and color contrast.

Image Requirements

We strongly recommend uploading all of your illustrations in SVG file format. SVG image files are vector graphics; this means that they can be scaled to any resolution, and will retain their quality and crispness.

PNG formats are also accepted, however, for better results and readability, make sure that the background of any PNG illustration you upload is transparent. 

We will not accept any JPG, GIF, or PDF file formats.

Custom-Illustration_-_Unauthorized_format.png

Image Dimensions

  • SVG image: if the illustration you have uploaded is a SVG file, you do not need to worry about their dimensions. 
  • PNG images: if the illustration you have uploaded is a PNG file, please make sure that your illustration abides by one of the following ratios listed below:
    • 1:1 ratio, with an illustration size NOT smaller than 343px wide by 343px tall
    • 2:1 ratio, with an illustration size NOT smaller than 552px wide by 276px tall

Custom-Illustration_-_Dimensions_ratio.png

Color Contrast

You are given control over the CSS of the no-code applications. Thus, you can have either a light or dark background color. Please read the following guidelines to ensure the best user experience.

Light Backgrounds

This will be the default within the Hydrogen no-code applications. Very light illustrations, or illustrations designed for Dark Mode of a website or mobile app, will cause aesthetic and accessibility problems for your users.

Here is an example of an illustration created for Dark Mode. As you can see in the middle pane, the color contrast is extremely off when applied to Hydrogen no-code applications that have light backgrounds. Make sure you convert your custom illustrations to fit lighter backgrounds. 

Custom-Illustration_-_Color_Contrast.png

Dark Backgrounds

You may choose to customize the CSS of your no-code component or white label application to have dark background. The design principles here will be the inverse of the light background default shown above. Please make sure you have illustrations that pop on darker backgrounds. 

Custom-Illustration_-_Article_Image_-_Illustrations_color_contrast_-_darkbackground.png

Related articles