Generating Content Images

There are some cases where there are not enough resources to generate an HTML page. In that case there is an option to create a static image that will include the desired content and effectively replace an HTML page.

In that case the image zoom should be set to “page width”.

      

 

Guideline for Desktop

The screen sizes differ from each other and there is not one image ratio that will fit perfectly to all screens. However, the following fits well to most:

 

  • The preferred width / height ratio is 3:2 (1.5)



    * It is recommended that your content appears above the fold. However, in case your content will also appears below the fold, then the ratio is not
    relevant and the user will scroll down to view the content.



  • The width of the image should be a minimum of 1600px (height 1066px).

  • The image should take up as little space as possible for fast loading, it is best for your image to be less than 1MB.

    It is recommended to shrink the images sizes using a service that doesn't damage the image quality. For example: app.imagify.io or http://compresspng.com/

 

The logic for this ratio is based on the below screen size table:

 

Guideline for Mobile

 

  • The preferred width / height ratio is 5:8 (0.625)  



    * if your content will appear below the fold, then the ratio is not relevant and the user will scroll down to view the content.

  • The width of the image should be a minimum of 640px (height 1024px). Although most popular mobile screen's width is 320px, due to the iPhone retina screen, the amount of pixels should be doubled.

  • The image should take up as little space as possible for fast loading, it is best for your image to be less than 0.5MB. 

    It is recommended to shrink the images sizes using a service that doesn't damage the image quality. For example: app.imagify.io or http://compresspng.com/

  • In case your audience mostly use tablets you should define also how they will probably hold the device (For certain use case people tend to hold the iPad horizontally and for other use cases vertically).
    • For vertical use case - the recommended ratio for the image should be: width/height 0.85
    • For horizontal use case - the recommended ratio for the image should be: width/height 1.58

 

 

 

 

 

Have more questions? Submit a request

0 Comments

Article is closed for comments.