image size in Photo

[KarinC]

I just got Photo to use to redo an old website for a client. I used to use Paintshop pro to do this and it seemed easy enough, but I am getting the wrong size in Photo. I have not used Photo at all so this is probably a stupid question.

I open a png image that I captured as a screen shot (the only way to get these real estate photos) from a different website. I crop it then resize it smaller using Document>resize document. It looks nice and clear and the size I want is showing up in the tool bar. I export it as a png, but it looks out of focus and larger (to the eye) on the website. Somewhere in Photo I thought I found that it is using 96 dpi (?) but I can't find where that was.

Am I doing this correctly?

[RichardMH]

Document->Resize Document lets you specify the dpi. Export should send out whatever dpi you've specified. Assuming you're on Windows, opening the png in Paint and File->Image Properties lets you check the dpi.

[John Rostron]

If you are using these images in a website,  then the dpi is irrelevant. What counts is the xizein pixels.

John

[Alfred]

17 hours ago, KarinC said:

I open a png image that I captured as a screen shot (the only way to get these real estate photos) from a different website ... Somewhere in Photo I thought I found that it is using 96 dpi (?) but I can't find where that was.

The 96 dpi probably comes from your use of a screenshot. Why was a screenshot ‘the only way’ to get a photo from the other website. Couldn’t you right-click on the image in your browser and save it via one of the options (‘Save Image As...’, or similar) on the context menu?

As @John Rostron has pointed out, the dpi is irrelevant for a website. Browsers only know about pixels.

[KarinC]

30 minutes ago, Alfred said:

The 96 dpi probably comes from your use of a screenshot. Why was a screenshot ‘the only way’ to get a photo from the other website. Couldn’t you right-click on the image in your browser and save it via one of the options (‘Save Image As...’, or similar) on the context menu?

As @John Rostron has pointed out, the dpi is irrelevant for a website. Browsers only know about pixels.

The images are in a slideshow on a large commercial real estate website. This will change in the near future when I will receive the images as a png from the realtor's phone.

I'm not sure what is going on then. When I export the png image and place it in the website assigning it the right height and width, it looks pixelated (a better description than out of focus). I started sharpening them which improves them somewhat.

[Alfred]

5 hours ago, KarinC said:

I'm not sure what is going on then. When I export the png image and place it in the website assigning it the right height and width, it looks pixelated (a better description than out of focus). I started sharpening them which improves them somewhat.

I’m not sure what’s going on, either! I do wonder why you’re using PNG instead of JPEG for photos, but that by itself doesn’t explain the pixelation.

[nickbatz]

7 hours ago, John Rostron said:

If you are using these images in a website,  then the dpi is irrelevant. What counts is the xizein pixels.

John

...because the screen resolution is what counts.

But resampling while you resize sharpens the image, and - correct me if I'm wrong - it never creates artifacts.

[David in Яuislip]

The screenshot below shows an image in Chrome with the same image in Irfanview at 100%. The Chrome image is larger because the browser uses the Windows system/display/scale settings which is set here at 125%. If you run the attached html file it will display window.devicePixelRatio which shows here as 1.25 hence the pixellation through browser upsizing. If you're using Mac I suppose there is something similar

retinacheck.html

[KarinC]

The first image is the size I get when I crop the screenshot. The second image is when I resize it much smaller. Is it just the extreme resizing that is making it look so fuzzy?

 

[KarinC]

1 hour ago, Alfred said:

I’m not sure what’s going on, either! I do wonder why you’re using PNG instead of JPEG for photos, but that by itself doesn’t explain the pixelation.

I realized a couple of hours ago that I should have been using jpeg. I re-exported all of them as jpg.

[Alfred]

1 hour ago, KarinC said:

The first image is the size I get when I crop the screenshot. The second image is when I resize it much smaller. Is it just the extreme resizing that is making it look so fuzzy?

I think so. You’re discarding a huge amount of detail when you shrink it so much.

7 hours ago, KarinC said:

it looks pixelated (a better description than out of focus)

It looks out of focus (or just plain blurry!) to me. Pixelation looks like this:

[RichardMH]

As well as the resize settings there are settings in Export. What jpeg quality did you select?

Maybe post a screen shot of your resize settings and your export settings.

[KarinC]

I've done this hundreds of times in an old version (9 I think) of Paint Shop Pro. I would grab a screen shot from the same source as this which is easier in PSP because you can get screen shot within the program. I cropped them then resized them even smaller than this one. I would always get crisp images. I have a few more I did with Photo that are larger and they are blurry too. I still have PSP on my old computer. I may have to go back to it to get this done. 

I will get screenshots of the settings in the morning. I'm too tired right now.

[nickbatz]

 

25 minutes ago, KarinC said:

I've done this hundreds of times in

If the results were good hundreds of times, that just means you started with higher-res pictures. There's no mystery here - the problem is that... this one sucks.

Look at those pixels. Nasty!

I did nothing to the file - I just zoomed in a little.

 

[nickbatz]

Now, here I resized it to 300 DPI and resampled it using the bicubic algorithm. After that i used a very little bit of two sharpening live filters: unsharp mask (very little) and clarity. Had this been real, I'd probably get rid of the unsharp mask.

It's borderline passable when shrunken way down. Borderline. (I had to try this - I was curious why a smaller file would look like total arse, when normally it's when you enlarge questionable images that you run into problems.)

 

[thomaso]

4 hours ago, KarinC said:

The second image is when I resize it much smaller. Is it just the extreme resizing that is making it look so fuzzy?

No, I wonder how you achieved this blurred fuzzyness.

Compare below:      • yours (10 kb)         • JPG (13 kb)         • PNG (34 kb):

[KarinC]

@thomaso So, how did you do that? 

[thomaso]

8 minutes ago, KarinC said:

@thomaso So, how did you do that? 

I opened your large image [Screenshot(485).jpg] in APub + exported this as JPG and PNG with the pixel dimensions of you smaller image [resize.jpg].

While I used the option "Lanczos 3 (non separable)" which appears to do some sharpening also with "Bilinear", the default setting when downscaling, I don't get your obviously blurred look.

[KarinC]

1 minute ago, thomaso said:

I opened your large image [Screenshot(485).jpg] in APub + exported this as JPG and PNG with the pixel dimensions of you smaller image [resize.jpg].

While I used the option "Lanczos 3 (non separable)" which appears to do some sharpening also with "Bilinear", the default setting when downscaling, I don't get your obviously blurred look.

I don't get it either. I just tried opening the screenshot in Windows Photos. Cropped it (which gives me a smaller image instead of the giant sized image I was getting when I cropped it in Photo) and resized it with no bells or whistles and got a good sharp small jpg. I'll just go with that until I can figure it out.

[thomaso]

3 minutes ago, KarinC said:

I just tried opening the screenshot in Windows Photos. Cropped it (which gives me a smaller image instead of the giant sized image I was getting when I cropped it in Photo)

What is the cropping for? – Your initial (and my) smaller result show the same detail as the large screenshot "Screenshot(485).jpg", just downscaled, without any cropping.

[KarinC]

3 minutes ago, thomaso said:

What is the cropping for? – Your initial (and my) smaller result show the same detail as the large screenshot "Screenshot(485).jpg", just downscaled, without any cropping.

I have to get these images off from a slideshow on another website. The large image I posted was the result from cropping the screenshot. I didn't upload the screenshot since it has client information on it.

[Alfred]

10 minutes ago, KarinC said:

Cropped it (which gives me a smaller image instead of the giant sized image I was getting when I cropped it in Photo)

When you say “smaller”, are you referring to file size rather than pixel dimensions? You mentioned PNG earlier: JPEG will generally yield smaller file sizes for photographic images.

[KarinC]

Just now, Alfred said:

When you say “smaller”, are you referring to file size rather than pixel dimensions? You mentioned PNG earlier: JPEG will generally yield smaller file sizes for photographic images.

Smaller in terms of pixel dimensions - about half the size.

[thomaso]

9 minutes ago, KarinC said:

I have to get these images off from a slideshow on another website. The large image I posted was the result from cropping the screenshot. I didn't upload the screenshot since it has client information on it.

So your workflow is different from mine. – What do you get if you just/directly use your "Screenshot(485).jpg" for the exports with reduced size?

And what are your settings in the Context Toolbar when cropping the image in APhoto?

[KarinC]

 

I was using unconstrained when cropping - is that the issue?

I tried using the large image I posted here and resizing it - instead of resizing the result from cropping (unconstrained) then I get good quality.