Skip to main content

Zoom

The zoom API and the zoom-levels attribute accept two different formats: An absolute and a relative one.

Relative zoom​

By default, the maximum level zoom is determined to display all picture details, without compromising on quality. As a consequence, the default maximum level of zoom depends on specific factors, notably the viewer size and the device pixel ratio.

Using a relative zoom value is recommended when you prioritize visual quality over visual consistency across a wide range of devices. Those are expressed as a percentage string. Here are some values:

  • "100%": default maximum zoom level (achieved by clicking on the zoom button twice)
  • "50%": default intermediate zoom level (achieved by clicking on the zoom button once)
  • "0%": default zoom level
  • "150%": above maximum level (this will result in a blurry image)

The relative zoom value uses a base 2 logarithmic scale. This means that going from "0%" to "50%" will result in the same relative zoom than going from "50%" to "100%".

Absolute zoom​

The absolute zoom value is the one used internally by the viewer. You can access it by using the zoom API. This value is absolute, and will result in the same zoom level regardless of the size or the pixel ratio of the used device.

Using a relative zoom value is recommended when you prioritize visual consistency over visual quality across a wide range of devices. Those are expressed as a positive number. Here are some values:

  • 1: default zoom level
  • 2: 2x zoom
  • 4: 4x zoom

The absolute zoom value uses a linear scale. This means that going from 1 to 2 will result in a much bigger relative zoom than going from 4 to 5.

Material swatch zoom​

When displaying a material swatch item, the maximum zoom is limited in order to preserve image quality. In that case, a value of 100% will result in a visually smaller zoom than if applied to another item type.