How to pixelate images, without resize (Nearest Neighbour)

[Intenzi]

Hello, this is a short question and I believe it does not require any code example. Please do read, thankyou!
I am looking to utilise the python equivalent of css's image-rendering: pixelated

My current workaround is to utilise Image.resize() with Image.Resampling.NEAREST as the filter
Which works properly.

The issue:

I currently resize to a fixed size for all images.
However, this does not work for images that are the same size as the size I specify for resizing.. (they don't get pixelated)

I have tried resizing the images to a larger size using Image.resize and then resizing back with nearest neighbour filter, but it does not render the pixelated image.
Thus, how can I perform resampling with nearest neighbour on images that I can't resize, as their dimensions are the same as I require.
Should I just go for a gimmick currently by utilising +1 width and +1 height so that Image.resize occurs and performs the resampling?

[radarhere]

Have you tried resizing them to a smaller size and then resizing them back?

[nulano]

By changing the CSS, you change the default upscaling method (for the browser, when displaying that particular image). It is not a property of the image.

That is controlled by Pillow beforehand. It does not depend on what software I am using to view.

The only way to change this (i.e. achieve the difference between those two images) is by resizing the image. If you are worried about the image not fitting the background, remember that you can also resize the background.

Edit: For a fair comparison of sharpness, you could look at the image at 100% zoom (number in the bottom right of Windows Photos; not sure if you can do it in Discord). I imagine that those two images will have a very different size, but both will look perfectly sharp.

[Intenzi]

Thankyou for clearing my doubts!
I appreciate it a lot ^^

[Intenzi]

Pillow does not support changing the default upscaling method I believe?
Could I use something like photoshop to change the default upscaling method of my images.

The only way to change this (i.e. achieve the difference between those two images) is by resizing the image. If you are worried about the image not fitting the background, remember that you can also resize the background.

Do you perhaps have any insights on how the css is managing to do this then, without even resizing the images at 100% zoom level? Maybe it can be implemented into Pillow :>

[nulano]

When a browser is displaying an image, it first calculates the size that is required to fill the HTML image tag. Usually this is the same as the image size, but it can be different (e.g. in Discord).

If the image size is different that the size of the HTML image tag, the browser has to resize the image to display it.
The CSS tag is simply telling the browser which scaling method to use instead of the default.

So you cannot change the default scaling method with any image editor, you can only do it by changing the CSS.

---

The workaround you found with upscaling the image before adding it to a page works by changing how much resizing the browser has to perform to fill the HTML tag (less resizing with the default method gives sharper pixel art).