BannerAd

Tech Tip – Best Picture Size for your Blog

techtipbutton

For today’s tech tip, we’re going to talk about the best picture size for your blog. This is one of those tips I wish I had known when I first started, as it’s been a pain to go back and resize pictures for old posts.

When I first started blogging, I was of the opinion that more was more. This only got worse when I got my DSLR camera – those photos were even bigger! But after all, more pixels/inch always print better pictures, so the same should apply online, right? Wrong.

Now realize, I’m not talking about how big the photos appeared on your screen – I’m talking file size here. Because eventually I realized that no matter how big the photos were that I uploaded, they appeared as 700 px wide unless I hit Original Size, and then they didn’t even fit on the screen! In addition, those large file sizes didn’t add any more detail, all they did was slow down the time it took to load my webpage.

These realizations were solidified when I saw this infographic that compares print to web photos. Really, it’s great, but go to that site to pin it. So, I started approaching my picture processing differently.

Now what I do (Remember, I use Photoshop Elements to edit) after I tweak my photo and finish whatever edits I want is to resize.

To resize, select Image>Resize>Image Size

picturesize01

A pop up box will open. In this box, first change the resolution (last box). 72 pixels per inch is enough, don’t go more than 150 pixels per inch or you’re getting into huge file sizes. Once you change the resolution, you’ll see the other values change. After you change the resolution, then go change the width so it’s no more than 700 pixels. Then hit OK.

picturesize02
Next, use the Save for Web feature to optimize the file size. Go to File>Save for Web
picturesize03
This will open up another pop up box. I always set my files to high or very high, but even then it reduces the file size drastically. If you look closely at the example, I reduced my file size from 1.4 MB to 70K! And remember smaller file=faster web page upload. Another nice thing about this box is that it will show you your original picture on the left and your reduced size picture on the right – so you can see exactly how much (if any) detail you’re going to lose. Tip: look particularly at the blank spaces – that’s often where you’ll see weird pixellation at lower file sizes.
picturesize04

Once you’ve changed your settings, hit OK, and specify where you want the file saved. That’s it! Now you can have great pictures and a speedy loading page, because you’ve made sure to use the best file size for your blog.

Do you have a friend whose pictures are slowing you down? Share this article with them!

Hooray - you read the whole post! Wanna hang out more? Check out the best sewing pins with me on Pinterest, join our Facebook discussions, get your daily sewing fix and behind the scenes scoops on Instagram, and your weekly updates/free pattern access through the newsletter

Comments

  1. says

    hey do you use marsedit? check it out. i upload my photos to flickr then use marsedit to write my posts. it syncs with flickr and i set the photo size so it’s consistent with every post. works pretty darn well. great for blogging efficiency too.

  2. says

    Thanks for this great tip. I am revising my blog and from beginning to end, including a new template, focus and audience. The blog took a long time to load and now I know why! Going back to resize all images today.

Share Your Thoughts:

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