WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] Images sized in Photoshop are still blurry in blog post (8 posts)

  1. mpickup
    Member
    Posted 2 years ago #

    I'm using theme Twenty Eleven 1.3. I sized an image in Photoshop to 592x400 pixels prior to uploading it, which has always worked for me in the past, and for some reason it appears blurry in the "add new post" and on the actual blog. I tried clearing the cache and the cookies too because when I searched for solutions that was suggested. I also checked to make sure I had the most recent update/version for my browser which is firefox.
    Here is a link to my blog - I kept an image up as an example of what is happening. The image is a jpeg file and it's 72 dpi. Please help.

    Thanks for your time,
    Melissa

  2. mpickup
    Member
    Posted 2 years ago #

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

  3. YouON
    Member
    Posted 2 years ago #

  4. mpickup
    Member
    Posted 2 years ago #

    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?

  5. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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.

  6. mpickup
    Member
    Posted 2 years ago #

    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.

  7. WPyogi
    Volunteer Moderator
    Posted 2 years ago #

    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?

  8. mpickup
    Member
    Posted 2 years ago #

    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!

Topic Closed

This topic has been closed to new replies.

About this Topic