# Image Quality Goes Awry

**URL:** <https://community.prismic.io/t/image-quality-goes-awry/712>\
**Category:** Developing with Prismic\
**Created:** [June 8, 2020, 8:04am UTC](https://community.prismic.io/t/image-quality-goes-awry/712 "2020-06-08T08:04:05Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![christopher.rotunno](https://avatars.discourse-cdn.com/v4/letter/c/ecae2f/32.png) [@christopher.rotunno](https://community.prismic.io/u/christopher.rotunno)\
**Post date:** [June 8, 2020, 8:04am UTC](https://community.prismic.io/t/image-quality-goes-awry/712/1 "2020-06-08T08:04:05Z")

</div>

I have an image that's 480px \* 480px. The quality goes bad after adding my image into Prismic--even with the same dimensions...

---

<div class="post-metadata">

**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:** [June 9, 2020, 8:00am UTC](https://community.prismic.io/t/image-quality-goes-awry/712/2 "2020-06-09T08:00:08Z")

</div>

Could you add a screenshot/link?

Prismic uses Imgix I believe, so you can try adding quality parameters.

---

<div class="post-metadata">

**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:** [June 9, 2020, 9:04am UTC](https://community.prismic.io/t/image-quality-goes-awry/712/3 "2020-06-09T09:04:45Z")

</div>

Hi Chris,

Welcome to the community!

Like Max says we use Imgix so your images are auto-optimised. The best practice is to upload the original full size, full quality image so not to compress the image twice. Imgix will then deliver this image at the right size, based off of the image view you have created, and optimised in the best format based on your users browser.

You can remove the default compression rate by editing the url string. So for example if you return you url string in your project as a variable called ‘img’ then you can remove the auto compress and edit this string to set the quality to 100% of maximum like so:

const newUrl =`${img}&q=100`

This example is using javascript, which technology or framework are you using?

Thanks.

---

<div class="post-metadata">

**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:** [September 18, 2020, 4:06pm UTC](https://community.prismic.io/t/image-quality-goes-awry/712/4 "2020-09-18T16:06:43Z")

</div>

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

---

<div class="post-metadata">

**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, 5:36pm UTC](https://community.prismic.io/t/image-quality-goes-awry/712/5 "2021-12-09T17:36:56Z")

</div>



---

<div class="post-metadata">

**Author:** ![samlittlefair](https://dub1.discourse-cdn.com/flex013/user_avatar/community.prismic.io/samlittlefair/32/696_2.png) [@samlittlefair](https://community.prismic.io/u/samlittlefair)\
**Post date:** [February 2, 2022, 4:17pm UTC](https://community.prismic.io/t/image-quality-goes-awry/712/6 "2022-02-02T16:17:01Z")

</div>

An update on this: `@prismicio/helpers` v.2.1.0 now includes helper methods for formatting images, including customizing sizes and disabling Imgix compression. More info in the technical reference:

> **[@prismicio/helpers Technical Reference](https://prismic.io/docs/technical-reference/prismicio-helpers#asimagesrc)**
>
> @prismicio/helpers provide a set of helpers to render data from the Prismic API. These helpers help to render the following Prismic fields: Date, Timestamp, Link, Content Relationship, Rich Text, and Titles.