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 first tried â€œBicubic Sharper,â€ then all other resampling options, but they all came out blurry).
When I let the browser do the scaling (by stating the smaller width in my CSS), they come out perfectly sharp. How can that happen? I would like to reduce my original images though. How can I make them smaller without quality loss? (I have Photoshop and Illustrator, both CC 2015)
The image has transparency in it, so I can't save it as a JPEG.
The Bicubic Sharpener didn't help.
Here are the pictures:
This one is a screenshot of the original image scaled by the browser/CSS:
This one is a screenshot of the smaller image (showing at 100% in the browser):
This is the original image (not a screenshot):
Here is the image resized in Photoshop with Bicubic Sharpener (as shown in the second screenshot):
Thanks for your replies! I'm looking at it from my laptop, which has a touchscreen, but I don't think it compares to iPhone displays... (The specs say 16:9 IPS FHD (1920x1080) if that helps.) However, I would like it to look good on iPhones since I'm trying to make the website responsive.
That's what lead me to the problem in the first place. I'm using Bootstrap, and responsive images are automatically displayed at 100% for the largest possible screen size, but I want them to be smaller than that (63%). I thought making them smaller would be a good idea anyway as a smaller file size seems like a good idea as well.
I'm sorry if my picture explanations were confusing, that's probably because I am confused... I'll try to explain it better:
Both the 2nd and the 4th picture show the same smaller picture, with the 2nd one showing it on the website.
The 4th (which also looks bad to me) is shown at 100% width in the browser.
The 1st picture shows the 3rd picture (original size) scaled to 63% in the browser. At least that was what I intended.
@AndrewH Your explanation sounds right to me except that I wasn't trying to scale it larger (at least not on purpose). The 2nd image (screenshot) is just shown on top of the website background, so it has a different width that includes that background. Or what am I missing?
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)
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.
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: