hits counter

How to Resize your Images to Share on the Web | Day 28

One of the most rewarding thing about learning to take a better a photo is sharing it with family and friends online.

Your camera takes huge resolution images. Huge. Like you could wallpaper your house with it, huge. This is fantastic for printing, since we want all those pixels for clear, sharp images. However, when it comes to blogging those huge photos are not a good thing.

Over time, uploading all those huge images at full size can slow down your blog significantly. Since SEO theorists believe Google rewards fast-loading blogs with high page rank and therefore more traffic, it a good idea to resize your images before you upload.

“Yeah, but Blogger or WordPress has a way to allow me to show a smaller size.”

That’s not the same thing. In fact, that’s even worse because then your blog must load both the full size image AND the web size image every time someone visits that post. If you get a lot of traffic or display several posts on your main page your blog will be very cumbersome to load.

Resize your images before you upload them to your blog.

I’ve created very brief tutorials for 3 common image software options – Picnik.com (free!), Lightroom and Photoshop. Learn how easy it is to resize your images for sharing on the web.

How to resize your photo using Picnik.com:

How to resize your photo using Lightroom:

How to resize your photo using Photoshop:

Please visit these awesome girls who are sharing this 31 Days journey with us:

31 Days of Grace :: Chatting at the Sky
31 Days to an Inspired Table :: My First Kitchen
31 Days to a Less Messy Nest :: Nesting Place
31 Days of Living Simply :: Remodeling This Life
31 Days of Autumn Bliss :: The Inspired Room
31 Days to More. . .With Less :: Beauty and Bedlam
31 Days to a Better Photo :: My 3 Boybarians
31 Days to Stress Free Entertaining :: Reluctant Entertainer

Comments

  1. Excellent advice Darcy. I’ve run across this problem many times when trying to help clients figure up why their site is running so slow. I love the fact that you included three options! Well done as always! 🙂

  2. If you use Picasa (Google’s free photo software) you can resize through the “Export” function under “File.”

  3. THANK YOUU SO MUCH FOR THE PICNIK TUTORIAL… I LOVE PICNIK, I HAVE PHOTOSHOP BUT AM COMPLETELY IGNORANT TO IT. WOULD LOVE TO SEE SOME MORE POSTS ON SOME TECHNIQUES YOU CAN DO ON PCNIK THAT ARE SIMILAR TO PHOTOSHOP ; )

    • Nothing on picnik is similar to Photoshop. Everything there is one-click edits. It’s a great option for those who don’t want to learn Photoshop or cannot afford it, but I won’t be doing much along the lines of tutorials there, since everything is one-click edits.

      I recommend just allotting yourself about 15 minutes to get accustomed to it. Everything you can do in picnik can be learned in 15 minutes. 🙂

  4. Thank You so much for all this info lately 🙂
    I had a question maybe you can answer about changing the resolution for print. I use photoshop and usually go to image size then click on resample image so that they are all checked off. Then go in and change it to 350. Am I doing that right?

    • Your image should be print resolution by default, unless you’ve told your camera to take photos otherwise.

      Most at-home printers cannot print above 300 dpi. Those that can are usually pretty expensive. Web res is typically about 72 ppi. There is a noticeable print quality difference when printed above 300 dpi – but you cannot control that in photoshop. Only your printer can determine that. It’s also why pro photographers choose such labs, while cheap $0.19 prints are often much lower.

      Some printers can handle 600 dpi and beyond – but magazines, last I checked, print at 300 dpi and have pretty acceptable print quality by today’s standards.

  5. I use paint.net or Microsoft photo editor to resize mine, since you told me to when you did my site 🙂 Before that, I was using full-sized images!

  6. Tell me if I’m crazy (my kids already do) but I’m on a Mac and I just take my photos from iPhoto and prepare them for e-mail, I select large or medium or small, (depending on what I’m doing) and then once the e-mail is prepared, I don’t send it to anyone, I just drag the now resized image off the e-mail and put it onto my desktop, and then when I am preparing a blog on wordpress, I upload the photo from the desktop.

  7. Hi Darcy

    I have been following your posts very closely. Thank you for all the wonderful advice.

    I haven’t opened any of the tutorials above as I am working in Picasa at this stage. I do resize my images before uploading using the export function, but think I have been making them too small. What size would you recommend I resize too?

    Many thanks!!
    Georgia

    • Georgia –

      Your blog can only display images as large as 400px wide. 🙂

      Hope that helps!

      • Thanks Darcy! Oh my, I have so much to learn!!

        When talking about size above, I was thinking in terms of kilobytes and megabytes…but I realise there is dpi/ppi (resolution) and pixels all to consider with sizing!? I find this all very confusing! May I ask, how big are your images on this blog in terms of kilobytes?

        Thanks again!

        • If you aim to have your images below 100kb each, your blog will load fast. I don’t honestly pay much attention to that.

          I resize images to 700 pixels wide at 72 ppi and let them be what they are.

          I use a cacheing plugin on my blog to help with performance , so my blog should load pretty quickly for you.

  8. I needed this SO bad you have no idea!! I have been designing a blog for a friend, and her site loads REALLY slow. Come to find out, it’s because she has tons of photos (she is a photographer) that aren’t optimized for the web. This is just what she needs!

    • So glad it’s helpful! 🙂

      • OK, so I gave the info to my client and she says that she has already resized her photos, and that she will loose resolution if they go smaller. This is all so new to me. This is her site. http://www.pmbyrory.com it loads REALLY slow.

        • Her photos are way too big. Most of them are 1936px by 1296px and over 7M in size and the resolution is set to nearly 400ppi.

          And there’s a ton of them – 28 currently on her front page alone. Her blog is one of the slowest-loading blogs I’ve experienced, and if I’m being honest – most people wouldn’t stick around that long to see it load.

          Her header and her small image links won’t even load for me.

          I just dragged one of her images into Photoshop. The file size is 7.18M. Ideally for web they are under 100Kb. Hers is about 69 times that file size. Each one. Huuuuge.

          She is displaying them smaller but not resizing them before she uploads, so WordPress has to upload the full size one and the display size and will continue to get slower and slower the more she blogs.

          I’ve refreshed 3 times and still cannot get the header to load.

          I recommend that she resize her images to 800px at 72ppi before uploading them to WordPress, choosing to display only 1 or 2 posts at a time will help.

          Lastly, she should install a page caching software. Maybe then we’d be able to see her header and graphic categories.

          Good luck!

  9. Darcy, You are a mind-reader! I put some pics in the sidebar of my blog the other day and couldn’t figure out how to make them not hang over the side. Perfect timing! Thank you! How about a few more exclamation points?!

  10. Thanks to you, I’m aware of how big my pictures are but sometimes I get lazy and load big ones. It takes time to resize but like you said, it’s better for bloggers. Thanks for the tips!

  11. Yep, I still have that underlined in my notes from your blog orientation for Anna K. Originals. 😉

    I have taken the advice to heart and have made it a part of my photo editing routine before I post to my blogs. It makes a huge difference in the loading times!

    Thanks, Darcy…you rock!

  12. Thank you so much for this! I was guilty of letting blogger do the work for me & will do it correctly from now on 🙂

  13. This one tip has helped me so much. My blog was taking too much time to load since I love to use lots of photos. I subscribed to the free site you mentioned: picnik.com. I was able to resize my photos and it’s so much better.

    I’m slowly making my way through your 30 days (a bit late). But I love to take photographs but have never really learned the ‘how to’s’. I just seem to wing it with my awesome Nikon camera. The camera is so cool; it seems to take the best photos. But I really want to learn more.

    Thanks for doing this.
    Debbie

  14. Good to Know~I usually save them at 4mb or less by lowering the quality or resizing them to 4×6 or 5×7~definitely have to try this tyvm!

  15. Darcy,
    When you save your image for the web as a smaller size, do you replace the original? I don’t want to loose my large size.
    Thanks!

    • Nope. That’s why you choose “save as” and save as a new file name. Don’t rewrite your existing file. 🙂

Trackbacks

  1. […] do your edits and resize for web. This will work best if you do not skip this […]