Image Preview drop in quality. How can I maintain quality of the original photo.

[mnoor984]

Hi.
@rikschennink
I am using filepond to upload images and to preview them. But I am facing a major problem. The quality of the images in image preview seems to drop significantly (especially when I make the image preview size small). However, if I compare the smaller image to another smaller image from elsewhere, there is a quality difference ,which means something is wrong with filepond. Is there a way I can have the best quality photo in image preview?

Generally speaking, the quality of images in filepond preview is lower in comparison to a normal way of file upload and preview.

test.css

Original photo:

Dropped quality:

Same smaller image but not from filepond image preview. No dropped quality

Quality Difference between normal file upload and filepond upload (same image sizes):

[rikschennink]

FilePond scales down image before previewing as this turned out to be more performant, this is done with canvas and especially for vector graphics can look pixely.

When using FilePond with Pintura the poster plugin renders the preview which renders it at a higher quality. I'm hoping to address this in the near future with FilePond v5.

[raineycd]

I added the scaleFactor = 5; after this line around line 3279 and that helped solve my problem with blurry images on previews in the filepond-plugin-image-preview.js file:

    // imaeg scale factor
    var scaleFactor = zoomFactor * pixelDensityFactor;
    scaleFactor = 5;