Cookies are used on this site to provide the best user experience. If you continue, we assume that you agree to receive cookies from this site. OK

How to calculate the Ratio correctly?


What is the Ratio?

The ratio is a way of showing the relative sizes of two or more values. In HTML5 Product Designer add-on the Ratio - is used to specify the relation between the real size of the product and the product size on the screen. The correct size of an image which you will get for printing depends on your correct ratio calculation.

In brief, Ratio shows the number of the units of length in pixel for a current product. So, please, be very careful reading this part of the user guide.

How to calculate the Ratio correctly?

Before to calculate the Ratio, you should know:

1. The real dimensions of your product - width and height in inches or millimeters. Define the unit of length, which is the most comfortable for you and specify it in the General options of Product designer (Add-ons -> Manage add-ons -> HTML5 Product Designer add-on -> Edit).

2. Digital dimensions of your product image - width and height in pixels (As a rule, you can view these dimensions in any photo editor).

Please note! For correct ratio calculation, your real product and the image of this product should resemble each other. It means that the image should be a smaller copy (photo) of a real product.


Formulas for ratio calculation:

Real product width (inch or mm) divided by (/) digital product width (px) equals (=) "width" Ratio


Real product height (inch or mm) divided by (/) digital product height (px) equals (=) "height" Ratio

Compare "width" and "height" Ratio and take a bigger number, it will be the final Ratio.

In abbreviated form:

inch or mm / px = Ratio

Note! It is possible to use only five digits after the decimal point for Ratio in Product designer that is why all final calculations which you will see after adding a canvas will have a little inaccuracy.


How to calculate the ratio for a t-shirt (example).

For example, you sell custom t-shirts.

Take a real t-shirt where you will print design and measure it. See the picture on the right how to take measures.

Our example t-shirt has the following real sizes:

T-shirt width = 470 mm (18.5 inch)

T-shirt height = 660 mm (26 inch)


Note! Since t-shirts have different sizes "S", "M", "L", etc., and if you have one product for personalization with the "Size" option to choose, it is better to take the biggest T-shirt as an etalon to measure the real dimensions. In that case, it won't be a problem for us to adapt a printable image for smaller t-shirts. Or you can make separate products for every t-shirt size.  


Digital t-shirt measuring

We've made a t-shirt image in a photo editor tool (we have used Adobe Photoshop), outline the essential area with a rectangular tool and got the necessary dimensions (they are shown automatically in a photo editor). 

Our example t-shirt digital dimensions are

T-shirt width = 252 px

T-shirt height = 460 px


Now, let's calculate the Ratio. Our default unit of length is millimeter.

470 mm / 252 px  = 1.86507 ("width" Ratio)

660 mm/ 460 px = 1.43478 ("height" Ratio)

We see that "width" Ratio and "height" Ratio are a little different, it's a normal thing and it's always better to use a bigger number. Thus, the Ratio for our T-shirt is 1.86507.


Note!In HTML5 Product Designer add-on settings (editing product page -> "HTML5 Product Designer" tab -> 'Settings" link), there are such parameters as "Product side width (px)" and "Product side height (px)". These parameters can be bigger or smaller than real digital dimensions of a product. "Product side width (px)" and "Product side height (px)" define the width and height of the Product area in Product designer. Please, don't confuse them with real digital dimensions of a product. See below:


The formulas that mentioned in this article work excellent not only for t-shirt ratio calculation but for any other products like bags, pillows, shoes and etc. You can get the exact Ratio for such small products like smartphone cases, mugs as usually its digital dimensions and real dimensions coincide.


P.S. If you did not find the necessary information, please, check other sections:


  • The installation/upgrade of CS-Cart "HTML5 Product Designer" add-on
  • Main options of CS-Cart "HTML5 Product Designer" add-on 
  • Admin panel. Features of CS-Cart HTML5 Product Designer tool.
  • How to activate HTML5 Product Designer tool for a specific product?
  • How to set up fonts in CS-Cart HTML5 Product Designer?
  • How to set colors to canvas and elements?
  • How to use cliparts in HTML5 Product Designer?
  • How to create a product for the further customization?
  • How to add a product side and a canvas?
  • How to create and use options for customizable products?
  • The printable image and order details page features.

    This instruction refers to our CS-Cart module Product Designer maker.

    online design maker