# How do I smoothly reduce the size of a large image?

**URL:** <https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624>\
**Category:** Coding Questions\
**Created:** [June 18, 2022, 4:20pm UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624 "2022-06-18T16:20:55Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![Chi3010](https://avatars.discourse-cdn.com/v4/letter/c/8491ac/32.png) [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Post date:** [June 18, 2022, 4:20pm UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624/1 "2022-06-18T16:20:56Z")

</div>

Hello!!!  
I am having a simple problem.  
When I generate a large image with p5.graphics and then display it at a reduced size, it does not display nicely.

For example, the following code generates p5.graphics with a size 10 times larger than the canvas size, draws a circle, and then reduces the size to 1/10 on the canvas. As a result, the edges of the circle are jagged. The original image is anti-aliased, but when the image is scaled down, it inevitably becomes jagged.

```auto
function setup() {
  createCanvas(400, 400);
  
  let offscr = createGraphics(4000,4000);
  offscr.background(200);
  offscr.noFill();
  offscr.stroke(0);
  offscr.strokeWeight(100);
  offscr.circle(2000,2000,3000);
  
  image(offscr,0,0,400,400,0,0,4000,4000);
}

```

![スクリーンショット 2022-06-14 195644](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/8/7/8702acb52b5e7a5a4a1049a6f72c716b26463814.png)

If I save an output image 10 times larger than the original and display it smaller in windows photo, it is beautifully anti-aliased.

I think there is a difference in the reduction algorithm between the two.

Is there any way to shrink the image cleanly with the standard p5.js functionality?

Or do I have to insert a known shrinking algorithm myself?

Thank you!

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [June 19, 2022, 7:18am UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624/2 "2022-06-19T07:18:52Z")

</div>

Hi @Chi3010 ,

Have you tried to use [smooth function](https://p5js.org/reference/#/p5/smooth).

Cheers  
— mnse

---

<div class="post-metadata">

**Author:** ![Chi3010](https://avatars.discourse-cdn.com/v4/letter/c/8491ac/32.png) [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Post date:** [June 19, 2022, 3:05pm UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624/3 "2022-06-19T15:05:46Z")

</div>

Hello @mnse !

Thank you for your reply!  
I also tried SMOOTH but the situation remained the same. Apparently the p5js reduction algorithm is a perfect thinning. I would like to try to calculate the weighted average with pixel array.

Thanks!

---

<div class="post-metadata">

**Author:** ![GoToLoop](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/gotoloop/32/86_2.png) [@GoToLoop](https://discourse.processing.org/u/GoToLoop)\
**Post date:** [June 19, 2022, 3:44pm UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624/4 "2022-06-19T15:44:23Z")

</div>

Dunno if it’s any good, but you can try out this alternative resize algorithm:

> <https://gist.github.com/GoToLoop/2e12acf577506fd53267e1d186624d7c>

---

<div class="post-metadata">

**Author:** ![Chi3010](https://avatars.discourse-cdn.com/v4/letter/c/8491ac/32.png) [@Chi3010](https://discourse.processing.org/u/Chi3010)\
**Post date:** [June 21, 2022, 12:22pm UTC](https://discourse.processing.org/t/how-do-i-smoothly-reduce-the-size-of-a-large-image/37624/5 "2022-06-21T12:22:40Z")

</div>

Thanks for the code. I am surprised to see such a smart way of writing the code. It’s too awesome!!!

The nearest neighbor algorithm caused moiré for some images. For this reason I am in the process of implementing Pixel Mixing.

But your code is really beautiful and I am learning a lot. Thank you!