Blurry JPG on Web

Thanks all.

The image I'm using is a headshot, and it's meant to be a small thumbnail in the email. 

Here are some of the methods I've tried using the original image: 

- Switch from "Save for Web" to "Export As"

- Ensure that "Resample" is selected in the Image Size dialog box

- Click "Bicupic Sharper (Reduction)" in the Resample dropdown

- Try "Quick export as PNG"

The above methods have given me different results, but none have resulted in a clear image on Outlook for mobile. I'm currently using a template to send an email and there are other placeholder images that have the same dimensions (160 x 160) that look great on both desktop and mobile. What I'm trying to do is simply replace the placeholder with an image of my own, but every method I've tried has resulted in a blurry image on mobile. That being said, I'm not sure if the issue has to do with Outlook or if I'm prepping my image incorrectly in Photoshop. 

Regardless, I'm hoping to follow best practices for prepping images on the web, and to ensure I'm not missing any steps in Photoshop. Thanks again for your help 🙂 

"Do not go to extreme when optimizing using JPEG compression"

That's right. The quality setting (jpeg compression level) is often misunderstood. The "maximum quality" setting doesn't really give you maximum quality, very far from it. It's still compressed, destructively and irreversibly. It will still ruin your images if you save multiple times in succession.

On the other hand, the compression is incredibly effective at reducing file size on disk (and transfer), down to maybe just 1-5% of original size. And here the setting makes a big difference. Quality 5 can be 20% the size of quality 8.

Armed with that knowledge, it actually makes little sense to go for any of the extremes. It's a compromise anyway. Maximum qaulity almost defeats the whole purpose of jpeg, all the downsides without the upside. But too much compression will turn it to mush extremely quickly.

If quality is important, PNG may be a better choice. The PNG compression is not destructive (albeit less effective).

All that said - compression is not the problem here. The 160 x 160 pixel size is.

Should I be changing something in the "save for web" dialog box?

Do not go to extreme when optimizing using JPEG compression. Go with 50 or more quality settings, that is only advice when it comes to quality which can affect image. Otherwise you have good answer above.

Check again about requirement of 160px. What it is? Thumbnail or regular image? How much space occupies your image? Can you post screenshot? If you display image 160px on screen with 320ppi density then it is good for 1/2 inch on display, everything larger displayed will be enlarged what causes blurrines.

You're right racheld, ppi doesn't matter on screen/web. It could be 1 ppi or 3000 ppi and it wouldn't matter the slightest. Ppi is a parameter for defining the print size, because a piece of paper doesn't have a pixel array like a screen does.

So it's just pixels. And 160 x 160 pixels is an extremely small image. It's not even an image, it's a thumbnail. There are only 160 pixels to define the image that was previously 900 pixels. And even that was a small image already.

To put it in context, modern digital cameras (even phones) make images around 6000 to 8000 pixels on the long side.

Hi , it is due to size when you make it put resolution to 300 dpi it looks fine at 100% as size is small.....regards