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
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.
Next, use the Save for Web feature to optimize the file size. Go to File>Save for Web
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.
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!