1

I am attempting to scale down a logo that contains text. Original size is 336 x 336 and wish to scale down to 75 x 75. No matter what settings I use in GIMP, the image comes out pixelated with illegible text. Original file is png but converts to xcf when opened in GIMP, and quality is degraded before exporting back to png.

Now, if I upload the original png image and scale to 75 x 75 with CSS, the browser renders the image crystal clear.

My question is this: What is going on with the browser scaling that I can't reproduce in GIMP? And how would I workaround this?

I've attached a Firefox screenshot to show the browser-scaled image (far left) vs GIMP-scaled image (far right). Middle image was scaled 50% in GIMP, then down to 75 x 75 with CSS.

Logo Capture

Any insight would be greatly appreciated.

Improve this question
2
  • 1
    If you have a 400x400 image, and tell CSS/HTML to display it as a 100x100 image, and then zoom the page to 200% what you are shown isn't the original image, scaled down 4x and then re-scaled up 2x, but the original image, scaled down 2x. By contrast, if you use Gimp (or any other image editor) to create a 100x100 image from the 400x400 image, if you zoom it 200 in the browser you really get the original image, scaled down 4x and then re-scaled up 2x, so it's not the same quality.
    – xenoid
    Commented Jun 27, 2017 at 19:17
  • I appreciate the explanation. The pieces were there, I just wasn't putting them together right.
    – michaeldan
    Commented Jun 27, 2017 at 23:31

1 Answer 1

Reset to default
1

You appear to have zoomed in on the image. You need to view them at 100%. You can't expect to zoom in on images and not see pixels, since they are raster images, and they are made of pixels!

Also when resampling/rescaling an image smaller in GIMP using Image > Scale Image, set the interpolation method to "Sinc(Lanczos 3)" - it's the best method in GIMP for resizing smaller.

However if the image is really very small like yours and the text is small like yours, then there will be a severe degradation in quality, and the text will more or less be unreadable. Nothing you can do about that except perhaps make the text bigger, or perhaps use a vector image editor and make an SVG logo. Of course that might not help either because monitors have pixels, and ultimately all images are rendered as pixels when viewing on a computing device.

This is what your logo looks like at 75 x 75 px @ 100%

enter image description here

Improve this answer
3
  • Thanks for the reply. That image was captured using snipping tool with browser at 100%. And interpolation method used in GIMP was indeed Sinc(Lanczos 3). Even when zooming our farther, the css scaling is noticeable sharper. I guess I'm just confused about the processes behind css image scaling and if I can duplicate that sharpness manually in GIMP or any other software. I obviously would prefer to upload the image at the needed size.
    – michaeldan
    Commented Jun 27, 2017 at 17:34
  • Scaling the image in CSS is not the same as resampling. It's basically reducing the size of the image in the browser - the image file itself is not changed. Resampling a raster image in GIMP/Photoshop means removing pixels (data and information), and reinterpolating them - it's destructive.
    – Billy Kerr
    Commented Jun 27, 2017 at 18:31
  • Ok, I believe you were right the first time Billy! At the current resolution on my laptop (3200 x 1800) Firefox needs to be at 40% zoom in order for 1 css pixel to equal 1 device pixel. So at 100% zoom, the logo image was actually displaying at 188x188, not 75x75. For the CSS-scaled image, this was no problem since it was using a 336x336 file anyway. For the GIMP scaled image, though, it had to scale up to 188px from 75px, thus the severe quality loss. When zooming the browser out to 40%, image sharpness between the two was indistinguishable. Thank you for helping me wrap my head around this!
    – michaeldan
    Commented Jun 27, 2017 at 23:26

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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