Discuss Scratch

fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

Have you ever noticed that when you import an image that is bigger than 480*360 into the Scratch paint editor, it looks absolutely horrible? Or have you seen screenshots that you can barely even read on Scratch? For demonstration purposes, I made this image that is 992 pixels wide by 496 pixels tall. In case it is shrunken to fit in within the forum post, you might want to open it in a new tab at 100% zoom to appreciate its original quality.



The image has simple art, photographs, text, and pixel art. Now, when I import this image into Scratch, this is what I get:



It looks terrible. The chess pieces are all deformed, the fruit looks all pixelated, the text is barely even legible, and Peter's mouth has broken into pieces. But this is to be expected, right? After all, how else could you compress an image to fit into the stage? Well, it turns that whatever Scratch uses to shrink its images is awful. Here's what this image should look like if it were to be shrunk using something nicer, like supersampling.



Much better, don't you think? Even though a lot of quality was sacrificed, it still looks decent. It's much more smoother than what Scratch uses, has much fewer jagged edges, and the text is somewhat readable. So, why does Scratch use its method? Supersampling isn't some hyper-advanced technology, it's been around since the early 2000s. Quite frankly, I'm sick of seeing these ugly images in projects and having to resize the image myself so it looks decent.

Last edited by fdreerf (Feb. 5, 2021 02:12:03)


Hyped for MS-DOS 11.0
han614698
Scratcher
1000+ posts

Resize images in the editor in a better way

(long unnecessary quote removed by moderator - please don't spam)

Yes, I do agree. Support. (Although it may be hard for the ST to incorporate this.


Oops this got edited by a mod

Last edited by han614698 (Aug. 11, 2021 00:55:48)


<Scratch Wikian | Forum Helper | Almost to 6000 Posts! | Please be aware I may mistype things, my wrist is fractured>

Credit to -gge for the icons in my signature | I condensed all this code into five lines using [p] tags, idk why




the2000
Scratcher
1000+ posts

Resize images in the editor in a better way

Support. I'd prefer if they didn't have the automatic resize at all and instead uploaded images to vector (there was another thread for that) but this is important as well.

han614698 wrote:

Yes, I do agree. Support. (Although it may be hard for the ST to incorporate this.
Why on Earth would you quote four paragraphs of OP with multiple huge images just to write a one-sentence response!?!?

fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

the2000 wrote:

Support. I'd prefer if they didn't have the automatic resize at all and instead uploaded images to vector (there was another thread for that) but this is important as well.
You can't import an image into vector; it will just be a vector object that will still have to be rendered in bitmap (using the same garbage Scratch-scaler), which might make the quality even worse.

Last edited by fdreerf (Feb. 5, 2021 02:20:42)


Hyped for MS-DOS 11.0
the2000
Scratcher
1000+ posts

Resize images in the editor in a better way

fdreerf wrote:

the2000 wrote:

Support. I'd prefer if they didn't have the automatic resize at all and instead uploaded images to vector (there was another thread for that) but this is important as well.
You can't import an image into vector; it will just be a vector object that will still have to be rendered in bitmap (using the same garbage Scratch-scaler), which might make the quality even worse.
Vector images can reach outside of the bounds of the canvas. Even if they couldn't, vector images can be scaled down without losing image quality, so the image could be imported in full quality and then scaled down to the screen size in vector. IIRC there are even third-party tools that do this for you already, which would prove that my hypothesis is correct.

CARTOONPFP222111
Scratcher
36 posts

Resize images in the editor in a better way

the2000 wrote:

fdreerf wrote:

the2000 wrote:

-snip-
-snip-
Vector images can reach outside of the bounds of the canvas. Even if they couldn't, vector images can be scaled down without losing image quality, so the image could be imported in full quality and then scaled down to the screen size in vector. IIRC there are even third-party tools that do this for you already, which would prove that my hypothesis is correct.
The only time you would get a quality image is if it's posted online and it has a large radius. Small bois can't handle this pressure and get lower quality like that one 64 bits meme.

However you are only limited to a rectangle-square shape, so it is pretty unfair (however use this right and you create good content.)

(Highlight anything and press Down+Shift to see the rest of my signature!)


Wha-?! DEATH WATER!!!

Pico's Speedrun | …that's my only popular project, stop expecting more
the2000
Scratcher
1000+ posts

Resize images in the editor in a better way

CARTOONPFP222111 wrote:

The only time you would get a quality image is if it's posted online and it has a large radius.
…Yes, that's how image quality works.
Small bois can't handle this pressure and get lower quality like that one 64 bits meme.
ew bad meme

lHatr
Scratcher
57 posts

Resize images in the editor in a better way

the2000 wrote:

fdreerf wrote:

the2000 wrote:

Support. I'd prefer if they didn't have the automatic resize at all and instead uploaded images to vector (there was another thread for that) but this is important as well.
You can't import an image into vector; it will just be a vector object that will still have to be rendered in bitmap (using the same garbage Scratch-scaler), which might make the quality even worse.
Vector images can reach outside of the bounds of the canvas. Even if they couldn't, vector images can be scaled down without losing image quality, so the image could be imported in full quality and then scaled down to the screen size in vector. IIRC there are even third-party tools that do this for you already, which would prove that my hypothesis is correct.
Could you link to one?

Using the top search result from google resulted in the image being butchered to terrible quality and it just looks god-awful.


This is Ihatr’s account for mobile usage.
fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

the2000 wrote:

Vector images can reach outside of the bounds of the canvas. Even if they couldn't, vector images can be scaled down without losing image quality, so the image could be imported in full quality and then scaled down to the screen size in vector. IIRC there are even third-party tools that do this for you already, which would prove that my hypothesis is correct.
Your screen is a bitmap, so the image eventually has to be rendered as bitmap and thus lose quality.

Hyped for MS-DOS 11.0
CARTOONPFP222111
Scratcher
36 posts

Resize images in the editor in a better way

fdreerf wrote:

the2000 wrote:

Vector images can reach outside of the bounds of the canvas. Even if they couldn't, vector images can be scaled down without losing image quality, so the image could be imported in full quality and then scaled down to the screen size in vector. IIRC there are even third-party tools that do this for you already, which would prove that my hypothesis is correct.
Your screen is a bitmap, so the image eventually has to be rendered as bitmap and thus lose quality.
No one can escape the bitmap virus once you get your image rendered

But still, I support, not only it would help a lot of content makers, but it would be very cool for everyone if Scratch could use supersampling (however Scratch would have a hard time implementing this.)

(Highlight anything and press Down+Shift to see the rest of my signature!)


Wha-?! DEATH WATER!!!

Pico's Speedrun | …that's my only popular project, stop expecting more
fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

CARTOONPFP222111 wrote:

(however Scratch would have a hard time implementing this.)
Anti-aliasing of any kind, not just supersampling, would improve the image quality greatly and are usually standard in most renderers, i.e. they shouldn't be that difficult to implement.

Hyped for MS-DOS 11.0
gosoccerboy5
Scratcher
1000+ posts

Resize images in the editor in a better way

Anything that increases image quality gets a support in my book. some mockups I've made have been absolutely horrible in terms of image quality when I try to import it.

the2000
Scratcher
1000+ posts

Resize images in the editor in a better way

fdreerf wrote:

the2000 wrote:

Vector images can reach outside of the bounds of the canvas. Even if they couldn't, vector images can be scaled down without losing image quality, so the image could be imported in full quality and then scaled down to the screen size in vector. IIRC there are even third-party tools that do this for you already, which would prove that my hypothesis is correct.
Your screen is a bitmap, so the image eventually has to be rendered as bitmap and thus lose quality.
You don't need to get philosophical about this. Yes, if the pixel size is smaller than the viewer's computer screen supports then it will lose quality. The thing is that occasionally I need to import a bitmap image that would be bigger than the screen (i.e. importing an image for a scrolling background), so having it import small in vector would be a necessary first step before I size it up.

fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

the2000 wrote:

You don't need to get philosophical about this.
That's not philosophy, that's just a fact.
Yes, if the pixel size is smaller than the viewer's computer screen supports then it will lose quality. The thing is that occasionally I need to import a bitmap image that would be bigger than the screen (i.e. importing an image for a scrolling background), so having it import small in vector would be a necessary first step before I size it up.
Why, though? It will look the same if you size it up through bitmap or through vector if you do the “change to an invisible costume” trick.

Hyped for MS-DOS 11.0
the2000
Scratcher
1000+ posts

Resize images in the editor in a better way

fdreerf wrote:

the2000 wrote:

You don't need to get philosophical about this.
That's not philosophy, that's just a fact.
Yes, if the pixel size is smaller than the viewer's computer screen supports then it will lose quality. The thing is that occasionally I need to import a bitmap image that would be bigger than the screen (i.e. importing an image for a scrolling background), so having it import small in vector would be a necessary first step before I size it up.
Why, though? It will look the same if you size it up through bitmap or through vector if you do the “change to an invisible costume” trick.
Uh, I don't think it's that complicated, but I guess I'll do the “parallel universe” thing again…
Current implementation
  • I import an image into the editor with the plans to make it a moving background, which has to be bigger than the screen size.
  • Scratch notices that it's bigger than the screen size and smushes it to fit it in the 480x360 resolution.
  • I scale it up to make the custom background
  • It comes out smushed and ugly.
Suggested fix
  • I import an image into the editor with the plans to make it a moving background, which has to be bigger than the screen size.
  • Scratch notices that it's bigger than the screen size and imports it as a vector object to preserve the original resolution.
  • I scale it up to the size that I want it to be
  • It looks as high quality as possible because the image quality has been preserved.
See the difference?

fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

the2000 wrote:

-snip-
Ah, you're right. I didn't think about the whole “image being larger than the stage and then being resized” thing enough. Still, an option to either import the image normally but with a better resizer or as a vector object (through that old “Import” button in Scratch 2.0) in the vector editor would be nice.

Though, if I recall correctly through my countless hours and failed attempts of making animations from 2014 to 2018, I thought that images were resized horribly then made a vector object in 2.0.

Last edited by fdreerf (Feb. 5, 2021 03:38:00)


Hyped for MS-DOS 11.0
the2000
Scratcher
1000+ posts

Resize images in the editor in a better way

fdreerf wrote:

Ah, you're right. I didn't think about the whole “image being larger than the stage and then being resized” thing enough. Still, an option to either import the image normally but with a better resizer or as a vector object (through that old “Import” button in Scratch 2.0) in the vector editor would be nice.
I agree. Giving the user a choice between importing in bitmap or vector would be the best option along with this suggestion.

gosoccerboy5
Scratcher
1000+ posts

Resize images in the editor in a better way

the2000 wrote:

fdreerf wrote:

Ah, you're right. I didn't think about the whole “image being larger than the stage and then being resized” thing enough. Still, an option to either import the image normally but with a better resizer or as a vector object (through that old “Import” button in Scratch 2.0) in the vector editor would be nice.
I agree. Giving the user a choice between importing in bitmap or vector would be the best option along with this suggestion.
Ok, there's a good solution. It's awkward to be forced into vector mode on import but I also don't want my image to be terribly smashed up.

MrDonutSDS
Scratcher
33 posts

Resize images in the editor in a better way

Scratch team should reply.
fdreerf
Scratcher
1000+ posts

Resize images in the editor in a better way

your

Hyped for MS-DOS 11.0

Powered by DjangoBB