Learn Performance - Images

Lossy compression

This demo uses lossy compression (MozJPEG) to reduce the images' file size. The <img> element uses the srcset and sizes attributes and each image was compressed manually with different settings used for each.

I compressed the image-1920.jpg image with a quality of 50 and reduced the color palette slightly. The image-1280.jpg and image-640.jpg images were compressed with a quality of 80 without a reduced color palette.

Photograph of a group of pedestrians crossing the street.

Image details:

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

Compare the image's file size with the previous demo while also observing the image quality. For example, the image-1280.jpg image was reduced from 1622 KB to 283 KB. That's more than 500% savings! Are you able to see any compression artifacts? Does it still look good on your current device?

View Source Code 
<img
  alt="Photograph of a group of pedestrians crossing the street."
  width="640"
  height="426"
  src="../image-640-lossy.jpg"
  srcset="../image-640-lossy.jpg, ../image-1280-lossy.jpg 2x, ../image-1920-lossy.jpg 3x"
/>