All the yarn things…right to your inbox. Sign up here.

10 Tips on Best Image Size for Your Blog

by | Blog

What is the best image size for your blog?  Are you inadvertently slowing down your blog’s load time?  What is this PPI/DPI thing?  I’ve heard the questions being asked on different forums so I thought I’d try to explain a little of what I know, especially as it pertains to my own blog.  Who knows, maybe you’re in the same boat and have some of the same questions, and these little tips might come in handy!

I’m not a graphic designer and I’m not a photographer, although I dabble in fun printables occasionally and take photos for my blog.  In terms of software, I use Adobe Lightroom and a free program called Gimp.

One Dog Woof: What is the best image size for your blog and how to display beautiful blog photos


Tip #1:

Size your images only as large as your blog content width.  For example, my blog content area is 690 pixels wide.  There is no need for me to size my photos any larger than 690 pixels, since the content area will only display up to 690 pixels.  An image of 800 pixels will automatically be shrunk when shown on screen.

crane_mobile-11This image is actually 800×533 pixels.

Tip #2:

There is no concept of “per inch” in a web layout.  So PPI (pixels per inch) and DPI (dots per inch) are not relevant when editing your photos for your blog, even though they may be available as options in your software.  The 3 images below are saved at different PPIs, but you can see there is no difference in picture quality!

crochet_flower_72ppi640×427 pixels at 72 ppi

crochet_flower_300ppi640×427 pixels at 300 ppi

crochet_flower_1000ppi640×427 pixels at 1000 ppi

Tip #3:

An image at 600 pixels wide by 400 pixels in height will have the same file size regardless of what the PPI is set to.  This image will have 240000 pixels of information, and that’s what determines the file size.  However, an image at 800×600 will have a larger file size than one at 600×400 because it contains 480000 pixels of information.  Since the larger image contains more data and the file is larger, this will slow down your page load time – See Tip #1.  The 3 images above are all 102 KB in size.

Tip #4:

PPI and DPI are not relevant to web displays, but they are important when creating printables.  Images that are meant to be downloaded and printed should be created at 300 PPI.  If you download the photos above and try to print them, you’ll see they print at different sizes, with the 1000 PPI image printing at under 1 inch wide.

Tip #5:

Save your JPEG images somewhere around the 80% quality range.  This would mean about a 20% compression.  Do some experiments with different JPEG qualities to see what works best for you. The image below was saved at 30% quality, or a 70% compression.  The file size is now 43 KB as compared to the 102 KB of the photos above, but you can see the quality difference.


Tip #6:

Do not scale your photos too small, and then try to re-enlarge them for display on your blog, as this will result in pixelation and blurriness.

crochet_flower_72ppi_scaledbyhalfThis photo is the original image from above, scaled down in Gimp by 50%.  Enlarging this image back up to 640×427 pixels gives the below result, which shows slight blurriness.


Tip #7:

Adjusting the width and height attributes in an <img> tag in HTML does not affect the image size stored on the server.  It only affects the display size seen on the website.

Tip #8:

When using the <img> tag to adjust image size, only specify either the width or height attribute, not both.  This allows you to keep the same ratio.  Specifying both width and height attributes could distort the image being displayed.

Tip #9:

WordPress stores multiple copies of your uploaded images in different sizes – a thumbnail, a medium copy and a full size copy – and they are different in file size.  If you need to display an image at a particular size, pick the smallest copy that is the same or larger than your desired display size, and use the <img> tags to adjust display size.   To display an image at 400 pixels wide, use the full size copy and shrink down to fit – do not enlarge the medium copy, as that will result in pixelation or blurriness – See Tip #5.

crochet_flower_72ppi400 pixels wide, shrunk from full size copy

crochet_flower_72ppi400 pixels wide, enlarged from medium size copy

Tip #10:

Make all edits on your original photo.  Do this prior to scaling/cropping/compressing so you’re working with all of your data.


Whew, that was a lot of information!  If you’d like to read more on this topic, I found this website to be very useful, if a little bit technical.  Or, ask questions in the comments below and I’ll try my best to answer them!


  1. melody98

    One of the best stuff I read. thanks to you

  2. Kyle

    Thanks for the tips. I just started a new blog myself and am learning. I immediately thought of you and your blog as the post I did today was from Houston’s Art Car Parade. There was a car there wrapped in yarn…. yes, the entire car! Check it out and thanks again for the tips on how to make my photos smaller for the web.

  3. Megan Ann

    Thanks for wonderful tips. I often wonder what image size is suitable for my post. And this is my answer.

  4. Annabelle

    Helpful stuff! I am going to bookmark this for further assistance. I was very hesitant about uploading the images until this article was read. Thanks!

  5. katy

    good luck…

  6. negin

    hi, thanks so much for your amazing tips. can i know if you take RAW pictictures for your blogs please?

  7. jannatul

    hi, thank you so much for your Excellent tips for images.

  8. Jennifer Fennell

    One day you are on the top! your posts are so helpful peoples learn many things from your blog. your blog is too appreciable.

  9. Ashish

    Thanks for the tips. I just started a new blog myself and am learning. And that’s really helpful for me. Thanks for it.

  10. Johann Schokman

    Thanks that c;eared a lot of the confusion and will help with my blog posts.

  11. Leo

    I love the direct approach to answer the questions quickly, awesome stuff!

  12. dslr wale

    I was looking for this question on the internet and I found your article. I was very confused about the image size. What the image size should be. But now I get it.
    A very helpful article for me.
    Thank you very much

  13. Ali

    wow, you solve so many problems for me, but i have a question that how can i check content width on my blog so i can export same image size, currently i am using 1000 width for all my images.

  14. Kunal Singh

    thank you for sharing this information

  15. Louise Rodgers

    So good to read your blog. So genuine and practical.

  16. Ngan

    Thanks for the article. It is very helpful. However, I’m still struggling with this. My photo size is about 1200×800, about 200KB, but somehow the quality looks really bad, nowhere to be as nice as the photo you posted above. Do you know what could be the reason for it? Any tips to fix this? The original size is about 3M to 4M.

    • ChiWei

      For a photo of that size, 200KB is too small a file size, which means you’re degrading the quality too much. When you export the photo, make sure to export it at a higher quality so that the file size comes out closer to 1M.

  17. lana

    Thanks a lot i am starting my new blog and this article solved my confusion about pic sizes ???? …Thanks

  18. Techmaan

    Good information. In my opinion any size image we prefer we should use one standard size image to maintain uniformity. Especially if we are using a grid view because different size images look odd.


Submit a Comment

Your email address will not be published. Required fields are marked *