Images sized in Photoshop are still blurry in blog post

I should mention too that when you click on the image(s) it then shows up crisp.

I see it correctly here https://dpictphotography.ca/blog/?attachment_id=796

Did you click on the image?
Ideally I would like people to view nice crisp images as soon as they come to my blog, not after they click on each image. Any idea how I can get them to show up properly right away?

Hey Melissa,
First off, your photos are absolutely stunning — especially the babies.

The differences in the bike photo between the page linked above (when you click on the photo it goes to the page that has Photography above the photo and a comment form below it) and the blog page alone seem to be because the photo is getting “scaled” in the blog (but not the other page). It looks like the scaling is because there is a margin and padding around the photo so the photo itself is scaled to 571 x 385. If you look at the two photos in the Page Info window of Firefox (click on the media tab ) – you’ll see the different info. Hope that makes sense — I’d take a screenshot of the windows, but I can’t attach those here. If you want more info, post again.

WPyogi – thank you for the compliment!
I uploaded a new image below the previous one at the dimensions you said and there is a definite improvement but it’s still not quite as crisp as the image above the comment form.
I’m not 100% sure what you mean by the “Page Info” window of firefox or the media tab. Sorry. I’m also working on a mac not a pc – does that make a difference? I’d still appreciate your help and more info if your still up for it. Thanks.

Hi again, had to go to bed last night LOL! I’m on a Mac too. If you are using Firefox (presumably you are as it’s the best for web dev), when you are on any webpage you can use “command I” (or go to Tools –>Page Info) to get a lot of useful info about the page. A window will pop up with tabs (buttons) along the top. Click on the media tab — then you see a list of images displayed on that web page — scroll through them until you get to the one you want to see — then a lot of useful info is displayed about that image (or other form of media). You can see that with the three test photos you uploaded, the dimensions are a bit different (and the top one one is “scaled”). Hopefully, this explains it sufficiently. (Using this tool is also an easy way to download images or videos or whatever from a webpage — as you can see there is a Save As button just above the images.)

It may be that the blurriness is simply due to the resizing you did in Photoshop — did you reduce the resolution a lot?

Hey WPyogi, Thanks for all your help! I was able to follow your instructions and find the page info and media info. That will come in handy if I ever change the blog theme and have to start this process all over again. I’m actually quite happy with the third image and will run with that size from now on. All three of the images were sized in Photoshop and apparently the key is to be absolutely bang on size wise – any modifications having to be made by WordPress result in blur!
Thanks!