Losing the quality of png images after uploading to prismic
I have 2 questions
Can you help me with the query to be appended in img URL with which i can extract best quality image ? by default I get auto=compress,format in URL, do i need to remove this and then add q=100 ( no success even after trying different suggested combinations of query for img url )
Does this q=100 work for png format ? if not, what is the format in which i should upload image to get the best quality images ?
Note: I am not comparing image formats I’m just comparing original png image uploaded with the prismic returned image. I can see a little blur in compressed images returned via prismic i need original quality image. ( mentioned png specifically because it is lossless and as far as i know q=100 would work on lossy formats ( jpeg, webp etc ) only
I saw some issues with PNGs in the past which I resolved by adding auto=enhance to the string:
You can do this in your project by adding this to the end of your image url strings. So if you return your image URLs in a variable call img you can append the parameter like so:
Yes I had tried this as well and it works too, but I see two problems with this approach:
It increases the size of the image, in my case it increased the size from 16 kb image to 44 kb .
We do not get same quality in which we uploaded image it basically enhances the quality more than original.
Is there a way to get same image that I had uploaded (in same size as well) ? Also is there a preferred/prescribed format of images which we should use in prismic for best results ?
OK, I'm looking in to how we can handle PNG images so that they are compressed & delivered better.
For the moment, as a workaround, if you want to remove the default compression settings and return the original image you can remove the parameters from the URL string like so:
It's not ideal, but until I can figure out what the correct settings should be for PNGs this might help.
Even better for now would be if you could use JPEGs and/or webp. You can also specify for the images to be returned as webp when possible ?auto=format&fm=webp
I'm also contacting the Imgix team to see if we can get some help with this.
OK, so I talked with the team at Imgix and we managed to figure it out that it's a combination of the compression and enchance to return a high quality image at a low file size for PNGs.
So if you view the image below, which has ?auto=enhance,compress,format appended, it comes back at 12kb:
So if you return you default Prismic URL, which has ?auto=compress,format in your project and append enhance to the URL string, it should look like this:
newUrl =${img}&auto=enhance,compress,format
This should return a sharp image with a small file size. Let me know if this works for you.
Are doing any compression on your side to the image at all before you upload it to our servers?
Because I took the original image that you added above and added it to one of my repos and it's being returned untouched at the right size. Also there is no white border on the sides like in the examples that you showed me above.
Please try uploading this original image again to see if that helps.
Image that you are using (12 kb ) this is not original (seems like this is already compressed). And I'm also not doing any kind of compression before uploading to prismic.
I am sharing a zip folder with the two images original one and compressed one with ?auto=enhance,compress,format ( hoping that uploading the zip here doesn't alter the size of images )
The issue here is that the Prismic API automatically adds the ?auto=compress,format to the image URL. We do not want that. We want to get the original image, without any modification. The only way that works is the one mentioned above, stripping the suffix from the URL provided by Prismic. It would be nice to have a built-in way to get the clean URL, without any compression nor enhancement.
Hello @soeren, welcome to the community.
I understand your suggestion. We implemented Imgix auto compress settings automatically to improve the API experience and the performance of your project. Here are all the details about this decision:
@Pau I have an issue also losing the quality of the uploaded images but in my case I lose the quality when doing the upload to prismic media library. I have an png image that is 1920x960 that when I open it locally it looks fine but when I see a preview after uploading it to the media library it looks all blurry, same as when I use it in my site, even with the enhance argument. Is prismic compressing the images at when uploading ?
