1

Heyo, I'm learning web optimization. I needed to scale a large image down from over a thousand pixels... originalBadge ...to 51x72 pixels. I used GIMP, and simply changed the resolution to 72 ppi (naturally, no effect) and the size to height 72 (with the width being constrained to 51 as a result; height was the limiting factor) using the Image>Scale Image Tool: badBadge It looks excessively blurry. My friend did it in photoshop, saying he just did "Resize Image" or such: goodBadge I'm not a graphics designer, and have only worked tangentially with such graphics concepts, however image optimization is important for web development, so it would help a lot if I had insight on why these two images are so radically different. I tried Cubic and Linear interpolation as well, to no effect (I'm guessing those are matrix functions that determine the processing of the image whilst scaling, I have no idea otherwise). Is it likely I'm using the wrong tool? Or is it simply that Photoshop costs $$ thus will produce better results? Thank you in advance for any guesses/answers. I understand if it's too vague to answer.

  • ppi is more important for printing there are a lot of different scaling algorithms some are better for enlargments other for reduction some are better for working with pixelart other with gradients there are also some new one developed that use artificial inteligence for scaling. In PS you can choose form one of few algorithms not sure about gimp. You can check this for more details – Xesenix Jun 14 at 17:22
2

All image scaling introduces some blur since pixels are interpolated. You can mitigate this by sharpening the image after the scaling. For instance, just using Gimp Filters>Enhance>Sharpen (unsharp mask) with default values:

enter image description here

  • What exactly does sharpening do? After it is blurry, you've "lost" the data associated with the higher quality image, right? So how would any algorithm make it look nicer with that data gone? – Seraphendipity Jun 17 at 17:49
  • It actually adds a bit of contrast along the edges. See Wikipedia for the gory details. – xenoid Jun 17 at 20:24
1

Ok so scaling is a signal processing thing. Conceptually it works as follows*

  1. Discrete image is converted into a continuous image. This is called rebuilding it is done by convolving the discrete signal by a continuous function.

    Here you can see two different examples.

    enter image description here

  2. Then the signal is re sampled into a new image, Although the scaling up is shown you can sample any which direction you want.

    enter image description here

Now the convolution shape affects how you image looks. And there are many many convolution shapes to choose from. The shape you choose is a trade-off between having a more blurry image and having a sharper image (also called ringing). Sometimes you want one over the other which is why you can choose differently in most editors.

* although there are methods that don't work this way, most processes can be reduced to the basic design of this form. Although steps 1 and two are usually baked into one to save time.

  • Thank you, I like learning theory behind things. Q: where did you get those pictures from? Did you create them yourself or is there a tutorial on these? – Seraphendipity Jun 17 at 17:47
  • @Seraphendipity I drew them a while back, you can find the same image on 3 different posts. But yeah idea for images of my memory from a document labeled "Lore of a TD" a talk in sigraph ages ago by Tony Apodaca. Offcourse i dont remember what convolutions he used, i just convolved the kernel in mathematica or did it manually dont remember exactly. – joojaa Jun 17 at 19:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.