Low quality of bubble storage images when loading PDF

Hi everyone!

My application has the functionality of downloading a PDF with data from a page. This data also includes pictures. But I ran into a problem: if a PDF contains an image stored in the internal Bubble storage, then the quality of this image in the downloaded PDF file is much worse than on the page.
For example, here is a screenshot from the last downloaded file. On the left is a dynamic picture from the bubble storage, on the right is exactly the same picture, but inserted with a link to an external storage. And the difference in quality is noticeable.

Link to example PDF file: test s3 (6).pdf - Google Drive
By the way, different plugins for PDF produce the same result.
I used the Imgix processing parameters, set the quality to 100 and checked the box, but it didn’t help. And if I add ignore_imgix=true at the end, the image will not be displayed in the PDF file.

Is it possible to do something in this case so that pictures from the bubble’s internal storage do not lose their quality in PDF files? Maybe someone had a similar case.

Yea somehow you need to grab the original file, not the one processed with anything.

Have you tried making the image element’s source the image's URL? instead of just image or image:processed with imgix

Yes, I tried to use image’s URL and this gives results only on the page. In a PDF file, the quality of such a picture is still lower. I also tried using a link to an image uploaded in my other bubble app, and its quality was also low.
Therefore, there is a feeling that this is some kind of problem with the internal storage of the bubble as a whole.

Try doing the image's URL:split by "?" :first item to strip all the parameters off :slightly_smiling_face: I agree something is going on where they are doing more processing than we are asking for (maybe in an effort to speed up the page)

Thank you for your desire to help, the proposed solution is really interesting, but unfortunately this method also did not help fix the poor picture quality.
For now, I see the only way out of this situation is to use a third-party storage for images :frowning:

1 Like

Have you done a test with images from external storage? Just to make sure it is not your PDF generation method that is doing it. If it comes down to it external storage is pretty easy to implement.

Yes, I used images from different external storages and their quality remains high when downloaded. Perhaps bubble does not process such images in the same way as images from its storage, so the quality is preserved.
Adding third-party storage is not a problem from a development point of view, but in this case you will most likely have to upset the customer with the news that they will have to use another paid resource. Although it is possible that with a small volume of downloaded images we will not have to pay additionally if we decide to use Google Drive; I still have to look into this issue of what external storage to use.
In any case, thank you very much for taking the time to solve my problem!

Yea, also try storing your images as regular file fields in Bubble, not as image fields :thinking:

1 Like

Unfortunately, if you upload a picture to a field file, the quality will still remain low. You can improve the quality of the image only by adding ?ignore_imgix=true to the image URL, but the images will not be displayed in the PDF file.
But your last sentence led me to think about saving the file in an image field in base64 and decoding it on the page. And it worked! Pictures now do not lose quality and are perfectly displayed in PDF files.
However, in the end, I decided not to save images in base64 directly to the database, but to use a plugin to convert URLs to base64, which gives me the full base64 text, ready to be displayed in the image element.
Thank you very much again for this little brainstorming and interesting suggestions! It was very helpful!

1 Like

This topic was automatically closed after 70 days. New replies are no longer allowed.