Losing image quality for png images

Losing the quality of png images after uploading to prismic

I have 2 questions

  1. 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 )
  2. 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 ?

I have already gone through following documents

  1. https://user-guides.prismic.io/en/articles/3309829-image-optimization-imgix-integration
  2. https://user-guides.prismic.io/en/articles/4275245-transform-edit-your-images-coming-from-prismic
  3. Image Quality Goes Awry
  4. https://docs.imgix.com/apis/url/format

Can you share a link for one of your images?

I’m not seeing much difference between:

The picture is 804 x 590px, what size are you displaying it at?

can you see the difference between this ( compressed one from prismic)

and this ( and the original one that i uploaded in prismic )

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

Hi Mokriya,

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:

const newUrl =`${img}&auto=enhance`

Let me know if this helps.

1 Like

Hey @Phil / @team-education ,

Yes I had tried this as well and it works too, but I see two problems with this approach:

  1. It increases the size of the image, in my case it increased the size from 16 kb image to 44 kb .
  2. 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 ?

Thanks
Ujjwal

Hey @Ujjwal,

Can you send me the link to your image after it comes from Prismic?

@Phil shared the links in a personal message.

1 Like

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:

img = image-url-coming-from-prismic

cleanimg = img.substring(0, URL.lastIndexOf("?"))

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:

https://images.prismic.io/example-repo/70aaf798-51e0-4442-a1ac-0b30cab56167_DS_Change_Password.PNG?auto=enhance,compress,format

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.

Thanks.

Hey @Phil,

  • First of all image original image size is 16 kb ( not 12 kb, i think aws compression on community portal makes it 12 kb)
  • Using ?auto=enhance,compress,format increase size to 22.6 kb from 16kb ( still image has few distortions .
  • it's 41.25% increase in this specific image, for bigger images the size increase is very significant

both problems not solved (size and distortion) . Also is there a way to get the original image without any compressions.

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.

https://images.prismic.io/vuejs-blog-example/a475241e-bda9-4c96-a6ed-adf4aefe7ccf_change-password.a1060aca.png

(I've removed you repo name above.)

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 )

images.zip (28.1 KB)

Sorry discourse was doing it's own compression too :upside_down_face:

I took your original image and upload it to my server, with no formatting it's returned at 16kb, please confirm:
https://images.prismic.io/vuejs-blog-example/08448055-3d89-45ca-b1cc-13433ef75f41_orignial-change-password.png

In the examples folder you sent me the bigger file has a white border which makes me think there was some sort of formatting done before upload.

1 Like

This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed.