Blogging Help:: Resize Your Photos and Reduce Readers’ Frustration

I don’t make it a regular habit to post these “blogging help” posts.  After all, this is an interior decorating/DIY blog, right?

But when I come across something that I believe can help my fellow bloggers, I like to pass along that info.  I’ve previously spilled the beans on how I do those nifty “quick view” before and after pics.  Then I told you how to get more traffic with “alt” tags on your photos.

Well, today I’m back with more info on photos.

Have you ever been on a blog that takes FOOOORRRRR….EVVVVVV…EEERRRRRRR to load?  There are several culprits that can lead to slow loading, such as third party gadgets on the sidebar, different slow-loading advertising servers, etc.  In fact, on my own blog, I’ve noticed that ever since I installed a third party commenting system, my load times are slower…something I hope to correct in the near future.

But the biggest culprits are photos, especially if the blog is one that utilizes many, MANY photos in each blog post.

Uploading photos directly from your digital camera, without resizing them first, is one of the quickest ways to slow down your blog, and potentially frustrate the heck out of your readers.  There are actually a couple of blogs that I used to really enjoy, but I’ve stopped reading simply because of the frustration I felt every time I had to sit there and wait for all of the pictures to load, and then as I’d scroll down the page, I’d have to wait again as the browser was working overtime to load more pictures.  And I’m on a newer Dell laptop with high speed internet!  I can’t even imagine how frustrated those people on older computers must be, and if they’re one of the 10-15% of home internet users who are still using dial up, then just forget about it!

Well, I don’t have time to sit and wait for slow-loading blogs, and neither do your readers.  I know the tendency is to think, “Well, I want my photos to be clear!  I don’t want blurry, low quality photos!”

Resizing your photos doesn’t make them unclear.  Let me show you the difference between two photos that are vastly different in size (both physical size and file size).

This first photo is straight from my mom’s digital camera.  The picture is 3872px wide X 2592px high.  That’s MASSIVE!  In fact, you should be able to click on the photo to see just how massive it really is.  I uploaded it and then used Live Writer to rescale the photo so that it’s 550px wide.  I left the photo at 300 dpi.  That stand for “dots per inch”, which means that in every square inch of the picture, there are 300 “dots” across, and 300 “dots” down, for a total of 90,000 “dots” in every square inch.  This photo file is a whopping 1.78 MB.

(That photo might also be causing your screen to “jump” as you scroll down…another frustrating thing I experience on blogs that don’t use resized photos.)

Now below is the same photo resized.  I used my Paint Shop Pro program to reduce the actual physical size of the photo to 550px wide X 368px high.  I also reduced the DPI from 300 to 72, which is standard for the internet.  Doing those two things reduced the size of the photo file from 1.78MB to 56.5KB.  In other words, the photo above is about 32 times the size of the photo below.

DSC_2053-edited

While you might be able to tell a slight difference between the two photos, I certainly wouldn’t say that the first photo is 32 times better than the second photo!  Would you?  (In fact, that first photo may even look distorted on your screen because such a large photo is being squeezed into such a small space.)

Of course, if you were to click on the photos above and zoom in, you’d see a vast difference.  I used my photo editing program to zoom in on the candle holder on the coffee table in both pictures, making them approximately the same size on the screen, and then took screen captures to show you the difference.  This is what the large photo file looks like…

large photo file close up

You can see that I actually had to zoom OUT on the large photo (viewed at 80%) to make the candle holder that size on my screen.  Because the photo is so large, if I had it at 100%, it would have been HUGE.

Now here is the zoomed in view of the candle holder on the resized photo…

small photo file close up

As you can see, I had to view that photo at 600% is actual size to get the candle holder to look that size on my screen.  You can see how pixelated it is.

So why would you want the pixelated picture on your blog?  Because the chance that your readers are going to click to see the full-sized photos so that they can view every tiny detail of the photo is slim to none.  Again, if you scroll up and compare the two photos of the living room, you can see very little difference between the two as they appear on the blog.  But the file sizes (and therefore, the time it takes to load on your blog) are vastly different.

So to wrap up, here are the three things that need to be changed on each photo before you upload them to the internet to be used on a blog:

  1. Physical size of the photo:  There’s absolutely no need to upload a massive photo and then rescale it to a smaller size on your blog.  This resizing needs to be done in a photo editing program BEFORE you upload the file.  I love consistency, so each photo that I use on my blog is resized to 550px wide for horizontal pictures, or 550px high for vertical pictures.
  2. The DPI (dots per inch):  Your digital camera probably takes photos at something like 300 DPI, or possibly even higher.  Again, this number represents the number of “dots”, or pixels, that are found in each square inch of the photo.  300 DPI means that each inch of the photo has 300 pixels across, and 300 pixels down, for a total of 90,000 pixels per square inch.The standard for photos used on the internet is 72 DPI.  You will have to learn your photo editing software to find where to change this on your photo.  On my Paint Shop Pro, I click on “Image” on the top menu, and then click on “Resize” to change both the physical size AND the DPI of the photo.
  3. The file size:  Chances are that if you’ve changed both the physical size and the DPI of the photo, the file size will automatically be taken care of.  However, it’s still a good habit to get into to check the file size before you upload your photo.  I’ve seen some pretty massive files being used on blogs, and there’s simply no need for it.A good rule of thumb is that each photo should be less than 100KB in size.  That’s certainly not a hard and fast rule, but it’s just a good guideline.  But if you’re uploading pictures that are 1500KB in size, that’s WAY.TOO.BIG.The process for changing the file size of a photos may differ from program to program, but generally you change it from the “Save As” option.  Click on “Save As”, and then look for a button that says “Options”.  This will generally take you to a screen where you can adjust the file size of the photo.

So those are the keys to faster load times with photos.  Test it out on your own blog, but also keep your eyes open when visiting other blogs.  If you happen upon a blog that loads really slowly, take a peek at their photos.  Right click on a few photos, then click on “View Image Info”.  It will tell you the actual physical size of the photo that was uploaded, and if the photo was “rescaled” to a smaller size.  You can also see the file size of the photo.

So do your readers a favor, and resize, resize, resize!!!

SUBSCRIBE HERE!
Enter your name and email below to receive:

New posts delivered to your inbox * Giveaways exclusive to subscribers
Exclusive behind-the-scenes videos * Additional DIY tips
The occasional DIY project, just for subscribers
A plate of warm, freshly baked cookies

(Okay, probably not that last one.)  :)

Comments

  1. NancyU says

    I am so happy you brought this up. Hopefully other bloggers will listen and down size their massive photos.

  2. Deevaughn10 says

    Kristi, the second photo of Alice& John's is much sharper and clearer than the first. Thanks for the info.-Dee-

  3. Lauralee @ The Eclectic Stitch says

    Oh, thank you for bringing this up!  I too have a few blogs I just don't have time to visit because of the loooooong wait to load.  Irfan View is a free download that I use to resize my pictures ~ super easy to use, even a caveman can do it!  Also, picnik is another free site (not downloadable) that you can use to resize your photos and then add text, frames, etc.  I use it for my etsy shop pics.

  4. Annmarin123 says

    I tested the size thing on my own blog and it said a photo I have is 26519 BYTES…that sounds huge..is it?? Thanks for the tips.

  5. Lisa says

    I appreciate your technical advice since I'm a new blogger and you're an old timer.  I've tried your "quick view" tutorial and haven't been successful in getting it to work.  Don't know if it's Blogger since I tried someone else's tutorial and had the same problem.  I love your bef and after pics so I'm hoping to be able to do it one of these days. 

  6. Kristi @ Addicted 2 Decorating says

    "Old timer" makes me sound so old!  :-D  I use Blogger, so that shouldn't be the problem.  If you want to copy and paste the code you tried to use and send it to me in an e-mail, I'll take a look and see if I can find the problem.  My e-mail is addicted2decorating@live.com

  7. Joni Webb says

    OY.  i feel like you are talking to me. 
    first my ad slows everything down.
    then, i never resize.
    i read what you wrote but i stil don't understand.

    forinstance – i do a Lot of screen caps from online magazines to get these big pix – do i need to resize those – or just the ones from my camera?

    also – did you design that room??????????? it is beautiful!  i neeed to go see the story on that image!

    Joni

  8. Libby says

    Another tip: if you save your photos in iPhoto, then they are still at the original (huge) size. Go up to File and Export. Choose Kind = jpeg ;Quality = Medium;  Size = Medium. Then Export to a file on your computer (I have one on my Desktop called "Blog Images")  I know that everything in there has been resized and is ready to go!

  9. Kristi Sponheim says

    thanks for pointing that out. as a web designer, it is always a pet peeve of mine on some of my favorite blogs.  i want to add another tip, make sure to save the picture with a new name and preserve your original photo. this allows you to crop out some of the details and then reduce those individually like your hurricane lamp above and avoid the pixelation. i typically will resize the original and save as the original file name plus the words resized or simply a number 2, keeping the original as is. Hope that helps someone.

  10. Connie says

    thanks for the great tutorial.  I had a question maybe you can help me with.  I thought that blogger automatically resized photos for web when you upload to them.  Am I incorrect?

  11. Kristi @ Addicted 2 Decorating says

    Blogger does resize really large photos, but not enough.  For example, when I initially uploaded this post from Live Writer, Blogger actually resized the first really large photo, but it only reduced it to about half its size, so it was still almost 2000px wide.  I don't think it changed the resolution at all, and the file size was still much too large.  So it's definitely not a good idea to count on Blogger to resize the photos to the optimum size.

  12. Kristi @ Addicted 2 Decorating says

    Joni, you need to resize all of them, whether they're from your camera or from screen shots.  You don't need a fancy (and overwhelming) program like Photoshop to resize.  I'm perfectly happy with my cheap stripped-down photo editing program called Paint Shop Pro.  Or you can use one of the free ones mentioned in other comments.  But I just took a look at your blog (which is definitely slow-loading for me), and even your screen shots where the resolution is 72dpi (which is what you want for internet), the file sizes are still quite large. 

    You do use really large photos, so for you, it might be a question of whether you want your blog to load quickly and efficiently, or if you want to stick with those huge pictures.  I personally prefer not to have to scroll to see one photo.  In other words, even on really large photos, I like to be able to see the entire photo on my screen without having to scroll down to see the bottom of the photo, and scroll back up to view the top of the photo.  Sometimes on your blog, your photos are so large that I have to scroll to see them.  You might want to double check your stats (if you use something like Sitemeter or Google Analytics) to see what screen resolution most of your visitors are using, and then size the photos so that they're large enough so that your visitors can see the details of the photo, but no so huge that your visitors have to scroll up and down (or even side to side) just to view one full photo.

    Hope that makes sense!!! 

  13. Kristi @ Addicted 2 Decorating says

    Joni, I just went to your blog and timed how long it took to fully load.  It took 135 seconds for the whole blog to load in my browser, and that's on a new(ish) laptop with high speed internet.  Something definitely needs to be done, because I have no doubt that you're losing people on slower internet connections, and people still on dial up (and yes, there are still many on dial up) wouldn't stand a chance at being able to see your blog.

    Wanted to mention that your blog is also so wide that I have to scroll side to side to see then whole thing on my laptop.  It might be a bit more user-friendly if you narrow the entire thing so that the whole blog can be viewed on the screen without scrolling.

    Oh gosh, I feel like I've probably just overwhelmed you with information.  It's fixable, I promise!  It just might take some time and trial and error, but your readers will thank you!!

  14. Miss Charming says

    I really like your "Blogging Help" series.  It brings up points and explains things that I haven't even thought of or didn't know how to do.  (Would you consider doing a post on adding a "You might also like:" at the end of a post?)  Thanks!

  15. says

    Oh wow, this is so helpful! I have a feeling my pictures are way too big, I didn’t realize it could be causing my site to load slow. I had thought the same thing as someone else mentioned, that Blogger re-sized them automatically but sounds like that’s not enough. Is there any way to resize them after they are already loaded by altering the HTML, or is it best to just resize the picture and replace them? Thanks for sharing your blogging advice, I really appreciate it! Sharon

    • says

      Yeah, it can get confusing. When you “resize” a picture in Blogger or WordPress, all you’re doing is telling your blog how big to display the picture within the post, but it doesn’t do anything to change the actual size of the picture file. Unfortunately, the only way I know of to change them out is to edit the picture using a photo editing software, and then re-upload them.

  16. Erin says

    Thanks so much for this helpful information. I’m just starting out (not even sharing my blog yet), and I’ve devoured your blogging help series. Makes me feel much better equipped. I always appreciate your straight talk on various aspects of online community (e.g., pinterest). Thanks again!

  17. says

    I can’t thank you enough for helping me with learning the idea that I had to re-size my photos and then give an explanation of how to do that. Thank you!! I can’t help but think how many people/readers I have annoyed with my large photos.

  18. Sharon says

    I just found this post through Pinterest! I am new to blogging and trying to learn some more before publishing my first post! Thank you for the tip on photo resizing!!!

  19. says

    Hi Kristi,
    I was rereading this post and I have a question. Two developers told me a while back that themes are starting to be made that are “mobile ready” which means that no matter if someone brings up a blog or website on a cellphone, an iPad or a big, big widescreen computer monitor, if you have one of the newer mobile ready themes, it will auto detect the device and will size the view of the blog or website according to the device.

    So I’ve been wondering if I alter the DPI of my pics to the standard 72DPI, when mobile ready themes are the standard and someone brings up my blog on a widescreen monitor, how will the photos look? Will they look bad because they were altered for the old theme sizes.
    Businesses and stores, like say Pottery Barn, are already designed to size according to the device on which they are being viewed. That’s why when I look at the PB size, it fills my entire wide screen monitor, which I love. I just wonder if a 72 DPI pic on my blog will look okay on a readers wide screen monitor, if I one day switch to a new mobile ready theme, which is apparently the direction things are going according to two developers. I just don’t know enough about that part of things to know if it will matter. Would love your thoughts on that.
    Susan

  20. says

    I’ve been wondering how to do this and thought I’d ask you but came across your tutorial first. Thanks so much for creating accessible instructions, Kristi!

Leave a Reply

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

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

«
»