Image upload resizing can sometimes cause blurriness

[Carlosongit]

Describe the bug
Images inserted on bookstack page loses it's resolution. The content becomes blurry. Every time I add an image to a page the quality is inferior to the JPG or PNG or the screen shot.

Steps To Reproduce
Steps to reproduce the behavior:
Just add an image on whatever way possible

Expected behavior
I would expect to have the same quality of image than the original screenshot or jpg

Screenshots
If applicable, add screenshots to help explain your problem.

Your Configuration (please complete the following information):
Lastest bookstack version

Additional context
Add any other context about the problem here.

[LazyLama]

+bump

[edenpc]

This

[jeromequintard]

Same issue with retina screen.

[Carlosongit]

Hi everyone. I found a way around by saving the screen shots as image to my computer and then adding to the page by using the "Insert an image" feature that you find in the edition tools of every page.

The only issue remaining is the fidelity of the size of the image. when trying to make it bigger it loses its resolution.

The positive feature that bookstack has is that the image becomes clickable so when you are reading the page and then you click on it a sharper version appears.

As explained, this is only available when the image is inserted as image by the button and not by pasting the screenshot.

Cheers, Carlos.

[nmehlei]

It seems like all images are automatically scaled to 840px width directly after upload and persisted in this format. Probably because the default view shows the content with a 840px wide container, which makes absolutely sense in a 72dpi environment. In my case, I have a screen with a resolution of 2560x1440 and a 125% scaling setting (which is getting more common each year) and thus the resulting scaling makes my images look blurry. Which is very sad since my diagram that I'm trying to include in my page has an original resolution of 4655x1590 px, gets scaled down to 840px just to be scaled up because of DPI scaling (with obviously quite terrible results). In my opinion, it should not be required to limit all images to 840px and 72dpi.

[ssddanbrown]

@nmehlei Yeah, That's exactly what happens.

Maybe we just double the resizing to support up to 2x DPI devices.
Still could get a slight blur as per any resize operation.

I still want this base functionality to remain though, as a preventative measure to users just uploading 10MB images.

[nmehlei]

@ssddanbrown I agree that there should be a limit, as most users wouldn't make sure that the used resolution and compression values are reasonable.

I think the combination of doubling the limit for raster graphics to support 2x DPI devices as well as allowing svg images would be great. As an example, my 4655x1590 source png was 339 KiB, a 840px resized png was 54 KiB and the svg variant 8.36 KiB.

[nmehlei]

Not sure if this shouldn't be a separate issue, but images in exported PDFs are very blurry as well. I would guess that the web images (with max. 840px width) are being used for these. As PDFs are nearly always zoomed/scaled in some way during display (thus yet another scaling) and because PDFs would also be used for Printing where we have way higher DPI values, we might use the original images here to avoid the extreme blurriness (even worse than in web view).

Might also be an option to allow for exporting PDFs with the web-oriented and the HQ-oriented images but this would probably create quite a lot of overhead.

[ssddanbrown]

As of v0.26.2, Uploaded images should now be inserted at double the previous resolution (If available).

[nmehlei]

As of v0.26.2, Uploaded images should now be inserted at double the previous resolution (If available).

Awesome! Thanks

[ssddanbrown]

Since there's been no further complaint of this since we changed to double resolution I'll close this off.

[TurieE90]

Hi,

I just came across this thread and am new to Github thanks to this issue. I have been uploading documentation and manuals to Bookshelf for my organization and am finding that images in Bookshelf are still scaled down when I upload them.
I upload screenshots and images using the "insert an image" function, but both come out blurry on the site and also when I export to PDF.

I will be very grateful if someone could help me with resolving this issue.

Thanks so much for your help in advance!