The Best Image Size For Your Blog Post Images

Table of Contents

One of the first questions I ask before I write for another blog is “What’s the maximum width an image can be?”. It’s an important question. If an image is too wide it will probably break the design. The height of an image is irrelevant in this respect but some blog owners don’t want images to be too long vertically either.

I’ve tended to use 550 pixels on my blogs over the last few years. Most of the blogs I have written set the maximum width of their images at between 500 and 600 pixels. There are many blogs that exceed this width. For example, the technology blog Engadget uses a width of 620 pixels and The Verge use full screen images over 1,000 pixels in their reviews.

Many other blogs choose to use small images despite their designs being capable of displaying images much wider. Smashing Magazine tends to show images of either 500 or 550 pixels though their current design would easily accommodate 600 pixels.

The concern is what your website design will be like in the future. You may be using a large one column design just now that easily fits in huge images but who’s to say you won’t add an additional column in the future.

This was an issue I had to address when I recently relaunched this blog. I had been using 500 and 550 pixels before for blog post images however the current design is much wider and can fit images of up to 700 images. My concern was that by using wide images too wide, I am going to restrict what designs I can use in the future (unless I want to do a huge amount of editing).

In the end I decided to use a width of 650 pixels. My reasoning being that smaller images don’t look great in wide content areas and in the future, I’ll probably use a design that accommodates large images anyway. I don’t plan overwhelming visitors here with advertisements so a second sidebar is not a concern. Mobile usage isn’t something that worried me as most good mobile designs reduce the width of an image to fit the screen better.

What is the maximum width you use for your blog posts? I’d love to know whether you are using the maximum width your current design supports or if you are using shorter images so you can choose other designs in the future.

Kevin

21 thoughts on “The Best Image Size For Your Blog Post Images”

  1. I think 600 pixels width and 650 height will be the best image for blog post. Anyway You are also right from some perspective.

  2. just tell the width and height so that on facebook sharing it automatically fatch the picture? thankx

  3. This is a very good post. I can use it as a reference when I need to rethink what the size of image i’ll use on my blog post.

  4. Hi Candace

    Do you mean should post images be smaller than 500 pixels to save space?

    No. I do not believe so. If anything, images should be getting bigger and of a higher quality since people are using devices with a higher pixel density.

    :)

    Kevin

  5. Great post Kevin. I love the WordPress plug in Smush It, so easy to use. Do you think that images throughout the post should be smaller than 500 – 600?

  6. I think many modern images shrink images that are too large so that this isn’t a big issue.

  7. I used MaxCDN on my last blog. I’ve yet to set it up here. Great service….though I did find caching annoying sometimes, particularly when new comments etc didn’t show.

  8. Yes, you’re right. I’m going to research this a bit more, there must be some way of resizing images in posts. Only way I can think of right now is to use a script like timthumb.

  9. That only regenerates thumbnails, not the images within the posts. The problem is with images within the design area, not the featured image.

    I do however love that plugin :)

  10. I use 1200px wide images, especially since high resolution mobile devices are more common. Most of the websites I build have a retina display, mobile-access-first mindset, so the images always look sharp no matter where you view them from. Some may feel that it’s to memory intensive of a size, but i just drop jpeg quality to 50-60% and use services like maxcdn.

  11. I think you should go for the bigger width when in doubt, you can always use a plugin like Regenerate Thumbnails if you need to go for a narrower design.

  12. Yeah it’s something bloggers need to give some serious consideration to. I found out about this early on when blogging because I changed my design so frequently and every design had a different width for the main content area.

    You’re not showing a favicon on your design. I’m sure I saw one there before. You should see look into why it isn’t displaying :)

  13. This is actually something I have never previously had to consider, but just last week while viewing a post of mine (that looked fine on my laptop) on a friends desktop I discovered that the images did not format for everyone like they did for me (stretched beyond recognition). I have now set a max width of 600px.

    It had not crossed my mind about how larger images would effect future design changes, only how they were viewed on my current design – so perhaps catching this early will not only ensure that my images are being viewed as they should be NOW, but may potentially save me hours of resizing them in the future.

    We live & learn!

Leave a comment

Share This