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" />