Learn Performance - Images

Lossless compression

This demo uses lossless compression (OxiPNG) to reduce the image size. The image was compressed using a maximum effort of 3.

To demonstrate lossless compression we are using an image which features sharp edges - such as text. Lossless compression does not perform well on photographs as these tend to have a high frequency and many colors.

Image details:

File
Size
Intrinsic Width
Intrinsic Height
Display Width
Display Height
DPR
Percentage Used

Lossless compression preserves the image quality and does not create any artifacts.

View Source Code
<img alt="web.dev logo" width="1200"
          height="1200"
          src="../image-1200-lossless.png" />