Inserted images have a fixed 512px width

[manuelleduc]

Describe the bug
Images are always inserted with a width of 512px.

To Reproduce

• open a blocknote editor with an empty content
• create a small (e.g., 30x30px) image locally
• insert an image block, upload the small image
• observe the image

Expected:

• the image is 30x30px
  Actual
• the image is resized to 512px, leady to badly upscaled and pixalted images

Misc

• I'm a sponsor and would appreciate if you could look into this sooner than later 💖

[nperez0111]

Hm, yea this does seem to be the default. I'm not sure what the right thing here to do is:

BlockNote/packages/core/src/blocks/ImageBlockContent/ImageBlockContent.ts

Lines 38 to 41 in c689e4b

	// File preview width in px.
	previewWidth: {
	default: 512,
	},

[manuelleduc]

Hm, yea this does seem to be the default. I'm not sure what the right thing here to do is:

I would just leave the width undefined by default. Unless I'm missing a constraint that would force images to always have a width.

[nperez0111]

That's fine in your case, but if someone uploads a large image, then it takes up too much space. What this should be is more of a maxWidth

[manuelleduc]

That's fine in your case, but if someone uploads a large image, then it takes up too much space. What this should be is more of a maxWidth

Yes definitely! For large image the default I often see is:

• no explicit width constraint
• a CSS with max-width: 100%

That way large image don't overflow the document width.

Though, defining the width and height of images explicitly has several advantages when viewing documents, such as helping browsers avoid vertical shifts, or server side resizing of images to reduce network traffic