Cropper or Proper Image Preparation?

You may find that images you re-size after uploading  into your WordPress.com blog lose some color and sharpness. If you want better image quality use an image editing application to re-size copies of your images to the specific dimensions required then upload and insert those copies.

©All Rights Reserved – Any content reblogged from one cool site must adhere to the terms of © Copyright

Prior to uploading any image into your blog, regardless if it’s a header image, a featured image, an image in a post or page, in a Post format (Gallery or Image), an image for sidebar display in an image widget or a text widget, you can optimize and re-size it in either a desktop image editing software or online image editing software to fit the space you intend to use it in.

You can create an image gallery and display thumbnail images attached to a particular post or page. When clicked, thumbnails display in a full-size carousel.  For more on Galleries. You can easily create a slideshow and display a set of images attached to a particular post or page.

Preparing and resizing your images means you will also not be wasting your space for media and you won’t experience any problems so you won’t end up  troubleshooting images.

Discussion

  1. Do you prepare your images before uploading them into your blog?
  2. If so, which image editing software do you use?
  3. Can you name the top 5 reasons bloggers have issues with images in their blogs?

Related posts:
A Photo Collage for Your Blog
Images: Optimizing, Pre-Sizing and Resizing
How good is WordPress at resizing and resampling your images?
Image editing and preparation tips part 1
Image editing and preparation tips part 2

52 thoughts on “Cropper or Proper Image Preparation?

  1. oops. My photos are often 3-5mb each. No wonder that I have just run out of space on my WP site. I don’t suppose that there is a simple way to go back and re-size the several thousand photos that are already in my Media Library? PS, why does my library often have 10 or more copies of the same photo, with the same name, attached to the same post? I wonder if that uses 10 or more times the space of a single photo?

    cheers,
    pete

  2. Your article is very helpful. I am signing up to follow you. By the way, my blog is triumphoverdepression.org. It’s what I’m using WordPress for.

  3. Friwan, you are right about calibrating different monitors for correct brightness, sRGB etc. But imagine: there’s several million folks out there with screens that are seriously not calibrated properly right.

    So you’ll never be perfect. :) Your comments actually point to the value of static print colour photos.

  4. Thanks for a great post.

    There are so many variations in controlling the colour of images and how they appear in different monitor screens that its near impossible for any two screens to show how the images were intended. From my studies in photography the tunnel goes deeper and deeper the further you look into it and you can get into a crazy state of constantly calibrating monitors, adjusting monitor angles/brightness/contrast, managing sRGB and web optimisation conversions, etc.

    My physical prints of photos look correct but on the web I still struggle to make look how they are supposed to be. I’m new to wordpress, and am experimenting with the images and layouts, so this advice really helps me how to get it right.

  5. Wow! So much to learn here . . . you also helped me resolve my Error 324 situation with Google Chrome over at Forum. thank you again timethief!
    I do crop in WordPress but as I see here there are other options to look into.
    Thank you.
    Oh, I also like your new gravatar image too.

  6. Most of the images I post are lowres and if it’s a photo, it’s already rubbish quality from my phone. But I do resize to 600px width (proporional height) in Photoshop before posting if I need more detail. Alternatively, I recommend IrfanView for Windows users if they need a good free image editor/viewer.

    As a side note :
    If the WordPress thumbnail auto sizes (small, medium, large) aren’t working for you, you can tweak it a bit in the HTML view of the post. Note: This is so you don’t want to mess with the full size image by using the WordPress image editor, but only the thumbnail on your post.

    Let’s say you took a nice full size photo of which you want the thumbnail to show plenty of detail when you post on your blog, but don’t want to take away from the full width and height of the original image visitors see when they click on it.

    E.G. You often find this in the resized thumbnail image src
    myimage.png?w=300

    This is the thumbnail size. If you change that to :
    myimage.png?w=600 , You can make the thumbnail a bit bigger. You can also change the width of the image tag.

    E.G.
    src="image.png myimage.png?w=300" width="300" height="400"
    Into
    src="image.png myimage.png?w=600" width="600"

    Browsers proportionally compensate for the height automatically when you set the width attribute on images, so you can make the image a bit bigger or smaller if it’s thumbnail is too small or too big for your taste without worrying about it looking skewed. By giving the w?= value, you tell WordPress to retrieve the appropriately resized thumbnail image.

    Might come in handy if you’re like me and are slightly OCD about stuff like that.

    1. Thanks so much for your contribution to this post. I appreciate it. I’ve also been known to change the width and height dimensions in the HTML code.

  7. Hi Timethief,

    Thanks for your informative and insightful post on images. I have a lot of graphical content to support my posts (pictures, photographs, screenshots, word clouds), and it’s nice to have suggestions on making pages load quicker for potential readers. I’ll definitely keep that in mind for future entries!

  8. hi
    how can i add images many in my side bar the widget shows only 1 just in case i want to display my award certificates pls do help thankyou

    1. First you need to know what the width of the sidebar of your theme is. http://wpbtips.wordpress.com/2010/01/11/sidebar-width/ Once you know that you can presize the image either a desktop image editing software http://en.support.wordpress.com/media/image-optimization/#image-editing-software or online image editing software http://onecoolsitebloggingtips.com/2009/11/28/ten-free-online-image-compression-and-optimzation-programs/ to fit the space you intend to use it in. Instead of using image widgets you can use a single text widget to display multiple badges in it. http://en.support.wordpress.com/widgets/text-widget/#adding-an-image

  9. I always resize and adjust photos for colour balance, exposure, etc. Besides I want to economize my use of free wordpress.com memory for image storage. :) I use ACDsee photo software.

    1. Hi Jessie,
      I don’t have a mobile or iPad so when it comes to image preparation tools I haven’t a clue which ones are best. I’m so glad you shared here what you use. Thanks for doing that.

  10. One thing I forgot . . . I try a lot of software. A free (for non-commercial use) program that works very well, allows for all sorts of advanced options (change dpi, sharpen, adjust contrast, saturation, and stuff, add borders, and more) is FastStone Photo Resizer.

    I try to export the sizes I need right from Lightroom, but when I don’t, this is the program I use.

    Note: I am not associated with this outfit, and I don’t get anything for recommending it.

    http://www.faststone.org/FSResizerDetail.htm

  11. Excellent points, TT.

    I always, always resize and properly crop my images before uploading them – have to otherwise they look dreadful.

    I use Photoshop Elements (which is a cheaper version of the full program), but I expect a free program like GIMP will do it as well and there are lots of other free and less RAM intensive programs out there too. The only problem with all this is it takes time but with a program like Photoshop a ‘process multiple files’ facility exists that can do all sorts of things including resize and change file format. Best to use it with flattened images though as it can often flatten ones that should remain as separate layers without one realising it!

    One thing I will say though about images stored in WordPress media library is that – certainly on slower connections like mine, which is broadband but not the highest speed one can get, as I’m in a rural area – is that they load progressively (in other words, in several ‘swipes’) so if someone’s looking at them and is in a hurry they might still not see them in their best condition. It’s actually better for this, to host them elsewhere but the problem with that is many picture hosting sites insist that one links to the site, and they often also put the dratted blue outline round them! I used to store my pics on Flickr but don’t for a couple of reasons, that being one of them (or should I say ‘two of them’!)

    I’m a bit wary of people, by the way, who upload huge images to be seen in those sizes – not everyone has a fast enough or stable enough internet connection to cope with them.

    1. Slow connections do present viewing difficulties and when that’s combined with the images being oversized waiting for them to load and display properly can become an supreme annoyance. I’m not on a slow connection but what I have noticed is those who do not upload images into their blogs, but link to them on the third-party image hosting sites have slower loading images. Sometimes I simply click out rather than waiting. In the forums we often find people have uploaded huge 3000 px wide images into their blogs. Hello! One wouldn’t try to park a Mac truck in a Vespa parking space and there are no themes that are 3000 px in width.

  12. Reblogged this on Cheryl Andrews and commented:
    I waste a lot of time troubleshooting images in my posts. Timethief explains how proper image preparation changes all that.

    1. Hi there Cheryl. All the issues bloggers have can be avoided by simply preparing images befor we upload them into our blogs. Doing that is easy. Having to resize images after uploading and correct the issues is not always easy. It’s usually a time consuming PITA.

  13. I have tried a number of approached to prepare the images for WordPress.

    From talking to the support group the best way is to import images that are not any larger than the maximum that will be displayed in the blog. Unfortunately images still seem to get “softer” and acquire a degree of “blah” that is not present in the original.

    I have tried a number of different approaches, playing with size, sharpness, contrast, brightness, and color space. The fact remain that even at native resolution to the blog template I use (maximum size is 640p across), the photo on my drive looks different from the same photo displayed on the blog. Busy photos (landscapes) suffer the most, while macros and photos with few details fare the best.

    My current process involves uploading photos which are 1024p wide, have slightly more sharpening, and exported as Adobe RGB as opposed to sRGB. I’m still not satisfied, but it’s better than other approaches I’ve tried.

    I also link each photo to the corresponding photo on my SmugMug account for those people who want to see the what the picture is supposed to look like. Sometime it’s night and day.

    1. Hello there,
      I enjoyed viewing the landscapes on your blog. I’m surprised you are uplaoding images of that size into Twenty Ten as the maximum displayed image width in the theme is 585 pixels. If you optimize and presize you images you will get better image quality and lose the “softness” you are getting now. Linking to the better quality images on your SmugMug account is a good idea and I’m surprised to hear you see such a dramatic differences on some images. .

      1. I did try a number of different sizes, both below, at, and above the maximum displayed. Going larger seems to give me better results than using the exact size. Although, it does depend a bit on the subject itself.

        I can try again with the maximum size, but my trials still point to WordPress modifying the image too much to show it at its best. I should also mention I see both what it is and what it could be . . . my readers don’t seem to have a problem with what is displayed, although they too remark a significant change when viewed in SmugMug.

        1. Thanks for commenting again. I’ve done some expriementing with featured images on various themes using various approaches. Featured images that are too large will display. The software will scrunch them to fit but images that are undersized aren’t stretched and won’t be displayed.

  14. Excellent advice.

    I use Photoshop to prepare all images before posting them. It’s nice to know exactly what you’ll be seeing. I frequently color correct photos, and combine images for comparison purposes.

    Visual elements always jump out at visitors, and I think they create a vital first impression. Making sure your images look their best is just part of building credibility and a good reputation.

    1. Hi Mark,
      I love what you do with photoshop and have been enjoing your tutorials. The way you integrate images and layer them is fascinating to me as believe it or not I have never used photoshop. I have used several desktop porgrams and online programs too. I tend to select which one to use randomly. I do agree that preparing imagess o they will look their best on your blog is a good time investment. There’s little doubt that they catch the eye and create a lasting first impression.

  15. I prepare photos in Photoshop in sRGB. I used to shoot in AdobeRGB and then convert, but I have been shooting in sRGB for a while.

    I then save JPEGS using the ‘Save For Web and Devices’ facility in Photoshop. I save images at the final pixel size at around 40% compression. For an image that is say 600x400px I expect a file size around 35 to 45KB.

    This seems to give me a good balance between a small file size and a good looking image.

    I check the box to strip out all the EXIF metadata (to help keep files sizes small), and I usually use the ‘Bicubic Sharper’ option when saving for the web.

    If the image is mostly text (or anyway not a photo) I might save as a PNG or sometimes as a GIF.

    I don’t know what the biggest reasons people have trouble with images is, but if I had to guess I would think – too big file size, wrong color space, not setting the default image size on the blog the same as the image size that is uploaded. That’s three – can’t think of any more.

    1. Hi David,
      Thanks for sharing your process here. Your guesses are right on. These six are most frequently the cause of image problems when people post to the support forums for help:
      oversized un-optimized images;
      slow connections;
      not saving your images in sRGB before you upload them;
      browser issues;
      trying to upload images that aren’t accepted file types (Images .jpg .jpeg .png .gif are the accepted types);
      not resizing images when changing themes.

      P.S. I love your iris photo. :)

  16. Good points, timethief. I use Photoshop Elements to prepare and crop my photos. Once the photo is saved as a copy, I open it in Faststone Image Viewer where I use ‘Tools – Batch Convert – advanced options’ to resize the photo to 600X400 pixels and add Text and a Border (my preselected choices and I can batch convert).
    With the border, the photo will be 614X414 pixels, and will be 60 to 100 kb in size.
    This means I have to choose themes that have a wider main column.
    To be honest, I don’t know if what I am doing is optimal or not. When I asked a Happiness Engineer, all they said is that I should keep the images in ‘native size’. When I asked what ‘native size’ was, they said I should keep them on the smaller size. Smaller than what? That is what I should ask next…

    1. Hi there,
      You are right on track! If you do want to change themes one day I linked to a post that has all the maximum displayed image width listed by theme.

      “Native size” is a refernce to aspec ratio. The aspect ratio of an image describes the proportional relationship between its width and its height. The highest picture quality available by using the image’s native size … full size of the monitor while maintaining the aspect ratio of the image size.

      I choose not to have wide images because I do change themes frequently. I like making new headers I’m not into resizing other images in posts and pages to fit into a new theme.

  17. I have a standard size for my images and resize them Office 2010 before I upload them. I do wish there was a way to unilaterally change my Featured Images size now that I changed my theme – they seem so big.

    I love the photo in the background.

    1. Aha .. presizing is on some blogger’s agenda. Good for you. Changing themes can bring about image resizing issues like I referred to above but I do like your new theme. You are doing such a great job with your blog.
      P.S. I get tired of backgrounds and headers very quickly and have been considering changing again. :) This one could have been taken where I live.

      1. Thank you timethief – I just finally found out from the forums what my image size should be – having the edges shaved should be resolved soon.

        Thank you so much for the kind words :-)

          1. You are using the Forever theme and the theme description is here > http://theme.wordpress.com/themes/forever/

            Quick Specs (all measurements in pixels):
            The main column width is 560 except in a full-width layout where it’s 890.
            The header image is 885 by 252.
            The sidebar width is 263.

            Featured Images
            Forever – Sticky Posts Featured Image Slider: at least 888 pixels wide
            Setting a Featured Image > http://en.support.wordpress.com/featured-images/#setting-a-featured-image
            sticky posts > http://en.support.wordpress.com/posts/post-visibility/#sticky-posts

            That should do it.

  18. i am embarassed to say this has never occurred to me to do, apart from for header images which don’t display unless they are spot on to start with since WordPress changed something a while ago. This would explain a lot! Is this why I don’t get the option for the small and medium size photos when I have uploaded a photo to my media library, only large and thumbnail, and they often lose quite a bit of something in the process? Will investigate forthwith. Many thanks :) Jo

    1. I found out about these things I blog on the hard way. At first I had no idea what image optimization was and why it was a service to your visitors. “When you decrease the file size for images before you insert them, uploads and pages will load faster.”
      http://en.support.wordpress.com/media/image-optimization/
      1. Oversized images
      I didn’t even think about the maximum displayed images widths in posts, pages and widgets. I was uploading Mac Truck sized images into Vespa size parking spaces. I had a real mess on my hands when I changed themes to one that was narrower. I had to resize images in posts and pages and in my sidebar as well. I learned from that experience. ;)

Comments are closed.