1

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)

EDIT I:

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:

enter image description here

This one is a screenshot of the smaller image (showing at 100% in the browser):

enter image description here

This is the original image (not a screenshot):

enter image description here

Here is the image resized in Photoshop with Bicubic Sharpener (as shown in the second screenshot):

resized image (not a screenshot)

Edit II:

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?

Improve this question
8
  • 1
    FYI, CSS doesn't do a perfect job of this, especially at certain proportions. When you develop you should still try to avoid changing the width of an image from its original dimensions whenever possible
    – Zach Saucier
    Commented Mar 17, 2016 at 4:50
  • It may not be perfect with CSS, but it's a lot better than what Photoshop is giving me. And I am trying to avoid it, that's why I posted this question. I just don't know how I can make the original image smaller without losing so much quality.
    – user3504783
    Commented Mar 17, 2016 at 15:47
  • Can we see a couple of examples of the originals, the good results (screenshot of image scaled using CSS) and the bad results (scaled using Photoshop)? What you call "blurry" can be caused by many different artifacts (pixel grid misalignment, JPG compression, etc)
    – cockypup
    Commented Mar 17, 2016 at 16:02
  • 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: !screenshot browser scaled This one is a screenshot of the smaller image (showing at 100% in the browser): !screenshot smaller width This is the original image (not a screenshot): !original image (not a screenshot) And here is the image resized in Photoshop with Bicubic Sharpener (as shown
    – user3504783
    Commented Mar 17, 2016 at 17:35
  • 1
    Can you clarify if "at 100% in browser" means "100px image at 100px wide" or "100 px image at 100% of browser viewport size"?
    – Yorik
    Commented Mar 17, 2016 at 21:22

4 Answers 4

Reset to default
1

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.

Improve this answer
1

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).

enter image description here

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

enter image description here

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

enter image description here

enter image description here

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.

enter image description here

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

Improve this answer
5
  • Thank you so much for making this clear for me. Yes, the 2nd and 4th pictures are from the same source file. I can see now what you (and probably also AndrewH) mean - the screenshot (2nd) does look larger than the source file (4th). I'm not sure why my screen shot turned out that way (and I'm sorry I didn't realize it earlier!), but on my website, it's actually the same size (as Pic 4 and as yours). Pic 4 does not look good to me though. It's not super blurry, but also not as crisp as the browser-scaled version of Pic 1. Even in your example, it looks bad to me.
    – user3504783
    Commented Mar 18, 2016 at 16:06
  • When you compare Pic 3 and Pic 4, look at the red lines, especially the long bottom right one. It's easier to see on a dark background like the black background you chose. Can you see the difference? Or is it just all in my head? Or is it just my computer screen?
    – user3504783
    Commented Mar 18, 2016 at 16:07
  • You're also right about the image being displayed at 100% width of its container element. That makes a lot of sense. I'll try to figure that part out and get help at StackOverflow if I can't. Aside from that, I still think it would be a good idea to make the original image smaller when I never want to display it at bigger than 63% of its original size, but it just doesn't look good anymore when I reduce its size. Should I just leave it bigger, or is there a better way to make it smaller other than Bicubic Sharpener?
    – user3504783
    Commented Mar 18, 2016 at 16:13
  • Oh and thank you for all the links! I will definitely follow your advice there!
    – user3504783
    Commented Mar 18, 2016 at 16:14
  • @user3504783: No problem. Take a look at my latest edit.
    – cockypup
    Commented Mar 18, 2016 at 16:41
0

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.

Improve this answer
0
  • 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.

Improve this answer

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