Loss of Detail in Image Reduction to 128x128 px in Photoshop

[morganab83119868]

Hi everyone!

I'm currently working on illustrations in Photoshop with dimensions set at 1435x1298 px. But now I need to scale down some of the layers to 128x128 px, but I'm encountering an issue with loss of resolution and detail during the transformation process.

I've tried adjusting the size using "Image > Image Size" and experimented with sharpening filters, but the results are not as detailed as I would like them to be. The fine elements in the illustration seem to be getting lost.

Could anyone provide guidance on how to effectively reduce the image size to 128x128 px in Photoshop without sacrificing too much detail? Are there specific settings or techniques that I should be aware of to maintain the quality of the illustration?

Your expertise and advice would be greatly appreciated!

Thank you in advance.

[Myra Ferguson]

Raster images are made up of pixels. When you reduce the dimensions at the same pixels per inch, the content is interpolated which will create a loss of detail because you are reducing the number of pixels that previously made the detail. 

You could try the different interpolation options in the Image Resize dialog such as Bicubic Sharper which is intended for reduction.

• https://helpx.adobe.com/photoshop/using/image-size-resolution.html

You could first convert your content to a Smart Object before applying the reduction in size.

You could apply any of the Sharpening filters to your reduced image.

Depending on the content of your image, you might want to use Illustrator's Image Trace to convert your content into a vector graphic. Vectors are resolution independent, meaning they can be scaled up or down without losing detail.

[davescm · Accepted solution]

When you go from 1435x1298 pixels to 128x128 pixels you are throwing away 99% of the image information. You cannot discard 99% of the information whilst retaining the detail. At best you will have 1%.

Dave

[Conrad_C]

A 128 x 128 px image has very little capacity for detail. Just imagine being told to build an image with Lego bricks or mosaic tiles, and that it cannot be more than 128 pieces wide or tall. It will be a very chunky looking image, because 128 is just not a lot of blocks to build a detailed image with.

Hopefully you aren’t making the mistake of viewing a 128 x 128 px image at higher than 100% magnification while editing. If this image is for an icon, thumbnail, or button, keep in mind that those are not typically magnified in normal use, so they should be previewed at 100% magnification, and can be made to look good at that magnification.

If you’ve seen an example of a 128 x 128 px image at a level of detail you’d like to achieve, post it here so we can advise on what kinds of sharpening and edge/contrast enhancement it might have had. But chances are, even other good examples you find will look great only at 100% magnification and not higher.

[Bojan Živković]

When you reduce the image size, you will lose some details, especially the tiny ones. For example, a one or two pixel line might disappear as if it never existed. If you share the image before and after resizing, we might be able to give you a better or more meaningful explanation.

[Trevor.Dennis]

The one advantage you have AFAICS is that you are working with illustrations rather than photographs.  If you are able to simplify the illustrations, they might resolve better at the 128 x 128 final resolution. 

You could reduce the number of colours with  Filter > Artistic > Cutout as shown below.

You could remove image elements that were not contributing to the story you need the reduced size icon to portray.  The new Remove tool and Content Aware Fill make that so much easier than even a very few years ago.

But the bottom line is you need to plan your illustration with the final size in mind.  Check out existing 128 pixel icons and 

It seems to me that you can say a lot with 128 pixels square

[didiermazier]

Hi

128/128 px is a thumbnail 10 times smaller than the 1400 original.

Same as in real life : you cannot reduce a 1 meter painting on a letter stamp…

Could you please post a sample of an image to reduce for us to test

Best

[D Fosse]

Pixel art should never be downsampled from bigger images. I would define 128 x 128 as pixel art.

Create it at 100%, actual size, using the pencil tool to avoid random anti-aliasing. To work more easily, zoom in to 200/400/800 % - even ratios that will not resample on screen.

[Trevor.Dennis]

Dag, Bert Monroy creates his illustrations much bigger than their eventual size, but definitely not by a factor of 10.  I do the same thing because it is easier, and errors are diluted when downsized.  The example below was the windmill from #191

construction of an image element

Final Image

[D Fosse]

Yes, but this is about pixel art, icons and so on. It will be softened and blurred by the downsampling and that's what you want to avoid.

Images at bigger sizes is a different matter.