Please add optional image compression

[Arturexe]

What problem are you facing?

To ensure that clients do not overload the editor with huge images (25MB+ per image) image compression has to be done before upload. It would be really helpful, if there would be a way in TipTap to do that, maybe in the Image extension options.

What’s the solution you would like to see?

Image extension option to configure compression (target image size)

What alternatives did you consider?

Right now I have to use a crappy self-written function, with canvas.toDataURL that sometimes doesn't work or a third party library.

Anything to add? (optional)

Keep up the great work.

Are you sponsoring us?

• [ ] Yes, I’m a sponsor. 💖

[rfgamaral]

Tiptap doesn't do uploading, that's completely on the consumer side, so it's up to you to do the compressing server-side.

[bdbch]

Hey @Arturexe! Thanks for your issue. As @rfgamaral pointed out Tiptap currently doesn't handle fileuploads. Do you mean the insertion of base64 encoded images?

[Arturexe]

I understand. A followup question. If I'm using tiptap correctly, you use <input type="file"> to upload images and then insert them into the editor via editor.commands.setImage(...). The passed image string is in base64 format, so scaling/compression would not be that difficult. You could use a supported library like compressor.js to enable compression via Image.configure option.

Just an idea.

I'm compressing images during upload client-side. Not sure though if it usually is done server-side.

[rfgamaral]

I'm compressing images during upload client-side. Not sure though if it usually is done server-side.

I don't think there's a right or wrong answer here, it depends on your use case.

In fairness, I never really thought about compression until you opened this issue 😅, and so far this is what we are doing on Twist:

• A user uploads an inline image
• We show a blurry (through CSS) base64 representation of that while uploading
• Once the upload is finished, we replace the src with the final image URL
  • And we also remove the blurry CSS effect

So far this is working great for us, but I did notice a bit of slow typing experience when a very large image is upload. I guess a base64 image for a large image adds a lot of strain to the editor. It could be interesting for us to apply some client-side compression to the temporary base64 data that we show to the user.

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days

[github-actions[bot]]

This issue is stale because it has been open 45 days with no activity. Remove stale label or comment or this will be closed in 7 days