Highlighted

Blurry JPG on Web

New Here ,
Aug 03, 2020

Copy link to clipboard

Copied

Hello,

 

I'm in the beginner stages of learning Photoshop, and I'm trying to prep an image for email. The email requires the image to be 160 x 160 pixels, and I've changed my image to be that size. The orginal image had the following properties: 

 

638 x 900

300 dpi 

Bit depth: 24

 

However, the image is blurry when I put it in the email, and it looks even blurrier on mobile. To my understanding, the dpi doesn't influence what happens to web images, so I haven't made any changes there. Should I be changing something in the "save for web" dialog box?

 

I'd love any input on what other steps I could be taking to ensure my photo isn't blurry in the email. 

 

I'm new at this, so I'd really appreciate your help if there's an obvious step I'm missing. 

 

Thanks!

TOPICS
How to

Views

71

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

Blurry JPG on Web

New Here ,
Aug 03, 2020

Copy link to clipboard

Copied

Hello,

 

I'm in the beginner stages of learning Photoshop, and I'm trying to prep an image for email. The email requires the image to be 160 x 160 pixels, and I've changed my image to be that size. The orginal image had the following properties: 

 

638 x 900

300 dpi 

Bit depth: 24

 

However, the image is blurry when I put it in the email, and it looks even blurrier on mobile. To my understanding, the dpi doesn't influence what happens to web images, so I haven't made any changes there. Should I be changing something in the "save for web" dialog box?

 

I'd love any input on what other steps I could be taking to ensure my photo isn't blurry in the email. 

 

I'm new at this, so I'd really appreciate your help if there's an obvious step I'm missing. 

 

Thanks!

TOPICS
How to

Views

72

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Aug 03, 2020 0
Adobe Community Professional ,
Aug 03, 2020

Copy link to clipboard

Copied

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

Ali Sajjad

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2020 0
Adobe Community Professional ,
Aug 03, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2020 0
Adobe Community Professional ,
Aug 03, 2020

Copy link to clipboard

Copied

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.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 03, 2020 0
Adobe Community Professional ,
Aug 04, 2020

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2020 0
New Here ,
Aug 04, 2020

Copy link to clipboard

Copied

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 🙂 

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Aug 04, 2020 0