# Losing image quality for png images **URL:** \ **Category:** Prismic for Content Creators\ **Tags:** product-feature-idea\ **Created:** [September 18, 2020, 10:41am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921 "2020-09-18T10:41:07Z")\ **Posts on this page:** 20\ **Page:** 1
**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\ **Post date:** [September 18, 2020, 10:41am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/1 "2020-09-18T10:41:07Z")
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. [Image Field Reference - Documentation - Prismic](https://user-guides.prismic.io/en/articles/3309829-image-optimization-imgix-integration) 2. [Developer Documentation - Prismic](https://user-guides.prismic.io/en/articles/4275245-transform-edit-your-images-coming-from-prismic) 3. [Image Quality Goes Awry - #2 by marcellothearcane](https://community.prismic.io/t/image-quality-goes-awry/712/2) 4. [Format | imgix Documentation](https://docs.imgix.com/apis/url/format) ---
**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\ **Post date:** [September 18, 2020, 11:09am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/2 "2020-09-18T11:09:34Z")
Can you share a link for one of your images? ---
**Author:** ![marcellothearcane](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/marcellothearcane/32/224_2.png) [@marcellothearcane](https://community.prismic.io/u/marcellothearcane)\ **Post date:** [September 18, 2020, 11:48am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/4 "2020-09-18T11:48:50Z")
I’m not seeing much difference between: ![1](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/d021e5ffa32be31d887a878540035270597f8e77.jpeg) ![2](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/c50fc024cca70af9734bf13ceadd25cb2f043e85.png) The picture is 804 x 590px, what size are you displaying it at? ---
**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\ **Post date:** [September 18, 2020, 12:26pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/5 "2020-09-18T12:26:30Z")
can you see the difference between this ( compressed one from prismic) ![](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/c50fc024cca70af9734bf13ceadd25cb2f043e85.png) and this ( and the original one that i uploaded in prismic ) ![](https://europe1.discourse-cdn.com/flex013/uploads/prismic/original/1X/f15a89fc5a6aa8141faadbc4b5cf90a1725f5604.png) 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 ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 18, 2020, 4:34pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/6 "2020-09-18T16:34:13Z")
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: ```auto const newUrl =`${img}&auto=enhance` ``` Let me know if this helps. ---
**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\ **Post date:** [September 21, 2020, 6:13am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/7 "2020-09-21T06:13:28Z")
Hey @Phil / [@team-education](https://community.prismic.io/groups/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 ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 23, 2020, 4:25pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/9 "2020-09-23T16:25:21Z")
Hey @Ujjwal, Can you send me the link to your image after it comes from Prismic? ---
**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\ **Post date:** [September 25, 2020, 6:45am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/10 "2020-09-25T06:45:15Z")
@Phil shared the links in a personal message. ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 25, 2020, 10:09am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/12 "2020-09-25T10:09:55Z")
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: ```auto 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. ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 25, 2020, 4:42pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/13 "2020-09-25T16:42:21Z")
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: ```auto 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: ```auto 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. ---
**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\ **Post date:** [September 28, 2020, 10:43am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/14 "2020-09-28T10:43:36Z")
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. ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 28, 2020, 11:23am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/15 "2020-09-28T11:23:12Z")
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](https://images.prismic.io/vuejs-blog-example/a475241e-bda9-4c96-a6ed-adf4aefe7ccf_change-password.a1060aca.png) (I've removed you repo name above.) ---
**Author:** ![Ujjwal](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/ujjwal/32/914_2.png) [@Ujjwal](https://community.prismic.io/u/Ujjwal)\ **Post date:** [September 28, 2020, 11:38am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/17 "2020-09-28T11:38:25Z")
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](https://community.prismic.io/uploads/short-url/wLdgXhpLgcakCxGGMsdpk0cD9hl.zip) (28.1 KB) ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [September 28, 2020, 11:46am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/18 "2020-09-28T11:46:34Z")
Sorry discourse was doing it's own compression too 🙃 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](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. ---
**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\ **Post date:** [October 1, 2020, 1:31pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/19 "2020-10-01T13:31:47Z")
This topic was automatically closed 24 hours after the last reply. New replies are no longer allowed. ---
**Author:** ![system](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/system/32/1746_2.png) [@system](https://community.prismic.io/u/system)\ **Post date:** [December 9, 2021, 2:59pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/20 "2021-12-09T14:59:58Z")
---
**Author:** ![soeren](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/soeren/32/3924_2.png) [@soeren](https://community.prismic.io/u/soeren)\ **Post date:** [April 5, 2022, 4:24pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/21 "2022-04-05T16:24:06Z")
This is not the solution 😃 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. ---
**Author:** ![Pau](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/pau/32/5422_2.png) [@Pau](https://community.prismic.io/u/Pau)\ **Post date:** [April 5, 2022, 6:30pm UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/22 "2022-04-05T18:30:45Z")
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: > [@Image Optimization Service FAQ](https://community.prismic.io/t/image-optimization-service-faq/5426): > > Here are some of the most frequently asked questions about the [Imgix integration](https://prismic.io/docs/core-concepts/image#image-optimization).\* [[Image optimization with imgix: Fast and optimized images | Prismic tutorial] ](https://www.youtube.com/watch?v=48PNQZvs3SM)I use my own CDN, and it doesn't provide dynamic optimization Image Optimization will not work. Since you're putting a CDN in front of our image API we aren't able get the necessary information to recognize the browser requesting the image and won't provide the right image for your browser. On top of that, you will have t… Thanks for the feedback. ---
**Author:** ![levijesica](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/levijesica/32/233_2.png) [@levijesica](https://community.prismic.io/u/levijesica)\ **Post date:** [April 19, 2022, 1:37am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/25 "2022-04-19T01:37:38Z")
@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 ? ---
**Author:** ![Phil](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/phil/32/14_2.png) [@Phil](https://community.prismic.io/u/Phil)\ **Post date:** [April 19, 2022, 10:20am UTC](https://community.prismic.io/t/losing-image-quality-for-png-images/1921/26 "2022-04-19T10:20:52Z")
Hey Jesica, The images are only compressed when the URL parameters are applied, you can see the original image by removing anything after the `?` character. Are you applying any compression before you upload? I can test this if you send me a zip file with your image (discourse applies compression too). Thanks. [Next page](https://community.prismic.io/t/losing-image-quality-for-png-images/1921.md?page=2)