DEV Community

Compress image in browser? Easy!

Anton Reshetov on February 12, 2019

First of all I want to thank people who are interested in the project MySigMail - UI Email Signature Generator. In repo came an interesting PR whe...

Read full post

Mihail Malo • Feb 13 '19

Just a note, the width > height check only works correctly when maxHeight === maxWidth:

{
      let width = 200
      let height = 200
      const maxHeight = 200
      const maxWidth = 10

      if (width > height) {
        if (width > maxWidth) {
          height = Math.round((height *= maxWidth / width))
          width = maxWidth
        }
      } else {
        if (height > maxHeight) {
          width = Math.round((width *= maxHeight / height))
          height = maxHeight
        }
      }
console.log(width,height)
}

{
      let width = 201
      let height = 200
      const maxHeight = 10
      const maxWidth = 200

      if (width > height) {
        if (width > maxWidth) {
          height = Math.round((height *= maxWidth / width))
          width = maxWidth
        }
      } else {
        if (height > maxHeight) {
          width = Math.round((width *= maxHeight / height))
          height = maxHeight
        }
      }
console.log(width,height)
}

Alex Lohr • Feb 13 '19

It's more resize than compress. If you wanted compression, try something like squoosh.app - transpiling image codecs and running them in the front end.

Anton Reshetov • Feb 13 '19

Why only resize? This is resize and compression, though not some advanced as squoosh. But the goals of the application is enough

canvas.toDataURL('image/jpeg', 0.7) 0.7 - is compression rank

developer.mozilla.org/en-US/docs/W...

Alex Lohr • Feb 13 '19

Actually, it is a percentage of signal quality for the quantizer to aim for. While the result is compression, what you set there is the amount of signal loss you deem acceptable.

Anton Reshetov • Feb 13 '19

I can not confirm your words, but I trust the documentation

A Number between 0 and 1 indicating the image quality to use for image formats that use lossy compression such as image/jpeg and image/webp.
If this argument is anything else, the default value for image quality is used. The default value is 0.92. Other arguments are ignored.

Alex Lohr • Feb 13 '19

That is exactly what I was referring to: you set the quality of the image in a lossy codec, not the compression factor (though both might coincide).

Anton Reshetov • Feb 13 '19

Got it )

rhymes • Feb 12 '19

I wonder if this would be the perfect thing to delegate to WebAssembly, what do you think? It might become slow with big images (also it's going to happen in the calling thread, right?)

Anton Reshetov • Feb 13 '19

Sadly, but i'am dummy in WebAssembly 😬 So I can't say anything about that.

rhymes • Feb 13 '19

Well, it's not like I'm an expert either. But we can learn things 😉

In the meantime you can test what happens to the function if you give it a truly massive image

Mihail Malo • Feb 13 '19

Definitely