JSFiddle - React, Tailwind, and code Playground

JavaScript

fetch('https://s.gravatar.com/avatar/02f476ed950384700afba952f6efaa28?s=500').then(async res => {
  const blob = await res.blob()
  const bitmap = await createImageBitmap(blob)
  const canvas = document.createElement('canvas')
  const ctx = canvas.getContext('2d')
  canvas.width = bitmap.width
  canvas.height = bitmap.height
  alert('blob size in bytes: ' + blob.size)
  ctx.drawImage(bitmap, 0, 0)
  canvas.toBlob(blob2 => {
    console.log(URL.createObjectURL(blob))
    alert('canvas blob size with lossless compression: ' + blob2.size)
    alert(`canvas increase: ${(blob2.size / blob.size).toFixed(2)}%`)
  }, blob.type, 1)
})