: Image quality loss with size reduction I'm trying to make the images on my website smaller in their px dimensions, but I'm having issues with quality loss when I resize them in Photoshop (I

@Ogunnowo857

If I understand correctly, the 2nd and 4th screen shots are created using the same source file.

If that is correct, then you will notice that when the image is used on the page (2nd) it is bigger than its actual dimensions (4th). That is why it looks blurred. The browser is making up pixels that don't exist in order to be able to render a smaller image at slightly larger dimensions.

I have downloaded your image (4th) and used it in a web page over a black background. I did not specify any dimensions, so it is rendered at its original dimensions. This is how it looks (screenshot of Chrome on a regular monitor).



Notice it is perfectly crisp. Compare with yours. Yours is larger, so the browser is stretching the source file resulting in blurriness.



I don't know what you mean exactly when you say you have made your image 100%. It can mean different things.

I think your image is being displayed at 100% width of its container element. If that is the issue (you want to know how to code the image so it shows at is real size and not at the dimensions of its container or you are confused about how to code for Bootstrap) then that is not a question for this forum. You will find better advise in stackoverflow, since that is a coding question.

Here are a few questions about that topic: (click here)

Too sharp

I think you are overthinking the resizing. By selecting a sharpening method to resize the image you are making the edges too crisp. In order to look smooth the edges need to be a bit blurry.

So this is what I did.


I opened your original PNG in PS
I opened the resize windows Menu->Image->Image Size
I keyed in the dimensions you wanted and left everything else as the default method. Clicked on OK.
I saved the file with a different name. I left the PNG options as the default ones.


These are the two windows with the options I selected





This is the result used in a web page at its original dimensions. The one at the top is yours (using the Bicubic Sharpener). The one at the bottom is mine, using the default method.



It looks a bit smoother. You could play with all the different resizing methods until you find the one that gives you the best result.

Digression:

If your goal is responsiveness (hence, to support as many devices out there) you should make the source file 2x the needed dimensions so it does not look blurry on high definition monitors. A high resolution display needs a square of 2x2 pixels for every single pixel that it will display.

Take a look at these answers:

Do I need to create my images at twice the pixel dimensions on a retina display?

DPI/PPI resolution for product zoom images

Vote Up Vote Down

@Ogunnowo857

In my experience, because of the discarded of pixels in the process of reducing the size of an image, if I am making the image very small, I got better results by blurring the image slightly before reducing it.

I wrote a tutorial about how to create "teeny photo icons" about 16 years ago. It's long gone, but through the miracle of web archiving you can still view it at here. The icons I produced were 256-color GIFs and would be considerably smoother - and probably smaller in file size - if they were saved as PNG files, which are now universally supported.

Vote Up Vote Down

@Reiling762

File > Export > Save for web
Preset: JPEG High
Progressive
Image size: Set the desired size
Quality: Bicubic Sharper
Compare Original to Optimized in the preview window


Also check out Smush Pro, Kraken and Ewww if your image is for a WordPress website.

Vote Up Vote Down

@Debbie163

Just resample your photo to the real needed dimension. I recomend Bicubic Sharper.

After that apply some aditional sharpening.

P.S. That is not "quality loss". Quality is a process, a methodology, a workflow. You do not loss quality, you loose information, detail; with the sharpening you simulate some new detail.

Vote Up Vote Down