Web Browser Barcode Resolution FAQ

< Back
You are here:

Web Browser Barcode Resolution FAQ

This IDAutomation FAQ document describes how web browsers display and print barcodes with various image resolutions and X dimensions.

Web Browser Barcode Resolution Overview

Web browsers display and print images at 96 DPI in most cases, which is usually the resolution of the screen. This is why many web-based barcode products generate images at 96 DPI by default, such as the IDAutomation Online Barcode Generator Service and the ASP Barcode Server for IIS. A few other products, such as the IDAutomation ASP.NET Barcode Server ControlAJAX JavaScript Barcode Generator, and ActiveX Barcode Control print at the resolution of the printer.

In most cases, the default resolution of these products is not an issue. The smallest dot on a webpage is 1/96 of an inch and is limited to increments of .0104″ because 1″ / 96 = .0104, 10 mils or .026 cm (rounded up to .03 cm). ISO and AIM standards for many barcode types indicate that the minimum X-dimension should be 10 mils for open systems, which means compatibility with different barcode scanner brands. In most IDAutomation web barcode image products, changing the X-dimension (or narrow bar width) will have no effect unless increments of .03 cm are used. For example, the X-dimension of .02 cm will print the same as .04 cm; however, choosing .06 cm doubles the X-dimension in the printed barcode.

Achieving a Precise X-Dimension

In the event that a specific X-dimension is needed which is not in increments of 10 mils or .03 cm, determine if the IDAutomation ASP.NET Barcode Server ControlAJAX JavaScript Barcode Generator, or ActiveX Barcode Control can be used. When these products cannot be used, the formula below will expand or compress the image by pixel size in HTML to achieve the desired size:

X dimension wanted * image size / Actual X dimension  = Image size needed (converted to integer)

To create a 17mil barcode (used in an online FedEx shipping form) when the barcode image width is 217, the following formula may be used to stretch the barcode to the correct size:

17 mils * 217 pixels / 10.4 mils = 355 pixels

It is necessary to determine the barcode image size of the web barcode creation component when using this method. Below is the implementation of the example in HTML assuming the image generated is 217 pixels wide. The barcode image may not look correct until it is printed:

<IMG alt=”Bcgen.com Barcode Image” src=”https://www.bcgen.com/demo/linear-dbgs.aspx?D=12345678123456781234567″ width=355>

Printing Accurate Barcodes to Low-Resolution Printers

Small barcodes may not print accurately from web-based applications to low-resolution printers less than 300 dpi. To accurately produce barcodes on the web, implement the IDAutomation ASP.NET Barcode Server Control with the resolution property set to match the dpi of the printer.

In the event it is not possible to use the IDAutomation ASP.NET Barcode Server Control, another option is to compress the image so that the pixels align properly to the printer.

Print accurate barcodes on low-resolution printers with web products:

  1. Double the height and width of the symbol. This usually means increasing the X-Dimension (narrow bar width) to .06 or 2 pixels and the height to 2.
  2. Determine the size in pixels of the generated image.
  3. Use the following formula to compress the height and width of the image by pixel size in HTML:
    Actual Size of Image / (DPI of the printer / 96) = size to specify in HTML (rounded up to integer value)
    Width (326 / 2.114 = 155)
    Height (121 / 2.114 = 57)

For Example:
To create an image for a 203 DPI printer with a barcode image width of 326 and a height of 121, use the following HTML:

<IMG alt=”Bcgen.com Barcode Image” src=”https://www.bcgen.com/demo/linear-dbgs.aspx?X=.06&BH=2&D=1234567812345678123456″ width=”155″ height=”57″>

The Web Barcode Thermal Printing Example may be used to print this example to a thermal printer.