One of the most common questions we get from photographers is about how we get our image quality to look so good on our blog, and especially on Facebook, the site notorious for taking a beautiful photograph and reducing the quality to the stuff of photographers’ nightmares. It’s a challenge to take huge high-resolution files, compress them down to a shareable size, and still maintain the integrity and quality of the original photograph.

Today, we’re going to break down how we prepare our images for the web, and hopefully make the web-optimizing process a little less daunting for anyone who wants to simplify their blogging workflow.

For any image we want to post on the web, we use the greatest little software that ever lived called BlogStomp. We’re pretty convinced that it might just be the best $49 we’ve ever spent in our business (besides the ExpoDisc!). Before BlogStomp, we used to prep our images in Photoshop! WAH WAH WAHHHHH (insert the sound of the Debbie Downer horns here). As with anything in Photoshop, it sucked precious minutes away from our life every time we needed to pair two vertical images together, and getting a watermark on Facebook images was a whole different battle. To top it all off, when we tried to compress the file size to make it acceptable for the web, the color went from terrific to terrible faster than you can say “I quit!” and it left our work looking gray and flat.

Enter BlogStomp. A software that allows you to drag and drop your full-resolution images, then pair, customize, re-order, re-size and save them specifically for your blog or Facebook requirements with the click of a mouse. There are no “actions,” no templates, no wait time. Just easy, fast results.

Here’s how we use BlogStomp to optimize our images for web:

1. The first time you use BlogStomp, you’ll want to make sure the images will be sized and styled correctly for your purposes (we share our settings at the bottom of these instructions), so click the “Settings” button on the top left side (closest to the center) and then click the “Styles” tab.

BlogStomp for Blog_0002

2. Inside the “Styles” tab you can create and save as many “styles” as you want by giving each one a unique name. We name ours based on where it’s going and what it’ll look like, like “Facebook (no border)” or “Blog (no border).” From there you can select the image & border width, make decisions about the margins and also use the “Logo” tool to import your watermark or logo for either some or all of your stomped styles, which you can choose to apply directly onto your images, or onto a frame/border around your images. As you can see from this screenshot, we have a lot of styles saved, so that we can work quickly and efficiently while we’re stomping, no matter what we’re prepping the images for.

BlogStomp for Facebook Instructions_0001

3. Once your styles are set, you can return to the “Freestyle” tab (which is where we spend most of our time in BlogStomp) and use the drop down menu, which will now have all of the custom styles you created in the “Settings/Style” tab saved. Whichever style is selected in the drop down menu is the one BlogStomp will apply to every image you stomp with just one click until you change your selection in the drop down menu.

BlogStomp for Blog_0007

4. The last thing you need to do before you start stomping your entire batch of images is tell BlogStomp where to store your newly stomped images and what to name the new files. This can be done in the “Settings” tab as well, under the “Output” section. This is also where you can choose whether or not you want to sharpen your images. Since we believe images lose some of their original photo quality as they’re being compressed for web, we set our sharpening to 33% inside of BlogStomp.

BlogStomp for Blog_0003

5. Return to the “FreeStyle” menu, select which style you want all of your images to be set to in the drop down menu, and let the stomping begin! You can stomp individual images, or you can pair them together with another image, or even create a grouping of images. For our purposes, we usually stick to either single images or two vertical images paired up. We even order them ahead of time when we’re still in our Lightroom catalog, so when we import them here, they’re already in the order we want them, and we can click the “Stomp It!” button faster than we can blink. To pair two images, all you have to do is select both images, then click “Stomp It.” If you don’t order them in advance like we do, you can simply click the “Mix It Up,” button, and it will switch the arrangement of the photos.

BlogStomp for Blog_0002

For Facebook:

To optimize our images for Facebook, we have special “styles” saved in BlogStomp that match Facebook’s recommend pixels and include our watermark. We stomp our images for Facebook at 2048 pixels wide. We also make sure when we’re uploading to Facebook that the tiny box next to the words “High Quality” in the bottom left corner is checked.

BlogStomp for Blog_0008

So that’s it! That’s how we optimize our photos for web!

Free Newsletter

Want FREE photography and business tips and tricks that you can’t find on our blog delivered straight to your inbox every week? We’ve gotcha covered! Click here to sign up for The Monday Minute, our weekly newsletter for photographers.

Alisa

5-steps-for-sizing-blog-images
19 comments
filed in: Education

    Eric

    We happened across BlogStomp about 5 months ago and it was like the heavens opened up. I think we even heard some angels singing. It really is the perfect tool for uploading images to blogs and all forms of social media. Seriously, the amount of stress and time you'll save is worth the price!!

    Amy & Jordan

    Totally, Eric! It's the best! Ha ha! And, yes, we heard those angels, too!

    Carri Behal

    I love BlogStomp as well! It is so amazing and definitely made life easier. Follow up question though: Do you stomp your images multiple times, like once for the blog, once for Facebook, etc.? I normally just "stomp" them once and then just use that same set across the board. Have you found it's better to use different settings for different medias? Thanks!

    Amy & Jordan

    Hi Carri! Yep! We stomp our images differently for Facebook and our blog because the sizes are different :-)

    Cinnamon Wolfe

    Could not agree more. Blogstomp changed everything about the way that I blog. I don't know how any photographer lives without it!! Thanks for the step by step!

    Amy & Jordan

    You bet, friend! Hope you're well!

    Anna Padilla

    Thanks for this post! It looks like you do your watermark different than I do but, I'm wondering... I do mine in the white tab area and I can never get my logo to look right, any recommendations on sizing or jpeg vs png?

    Amy & Jordan

    Hi Anna! We always use PNG for our watermark and it works great! Give that a try!

    Ashleigh Henning

    thanks for posting this. i have blogstomp as well and love it for making blogging resizing faster but hate it because I feel it makes my images look soft and grainy-- they don't look as sharp as they actually are which frustrates me to no end. maybe my settings aren't good. would you mind sharing your blog settings (perhaps a screenshot). you can see what I mean at www.ashleightaylorblog.com

    Amy & Jordan

    Hey Ashleigh! So sorry we never responded to this comment! Sometimes things slip through the cracks! Would you mind sending an email to info[at]amyandjordan[dot]com and we'll help you if we can?! Thanks!!!

    Kendra Martin Hazelwood

    Y'all thank you sooo much for posting this!! I just got blogstomp and have spent the last few hours just trying to figure out the settings and then I stumbled on y'alls post so thank you!! Would you be willing to share what your settings for your blog posts are (like size and sharpening?)... I tried the settings y'all mentioned for fb on both fb and my blog and while they look great on fb they still aren't great on my blog... Thank y'all again for this post!!!

    Amy & Jordan

    Hey Kendra! We got your email and will be responding in the next few days! Keep an eye out for it!

    Kevin Adams

    For some reason blogstomp does not like certain images here and there, they will come out blurry/fuzzy, definitely not sharp. I tried all sorts and observed that it was specifically landscape images (just a few) for no apparent reason. I set up the same landscape image on top of another (not what I want) and suddenly it looks sharp like it should. Put it on its own again, and its blurry again. Anyone else seen this?

    Susanne

    Is Blogstomp also a great tool for sharing images you took for someone else and want to send hight quality?

    Brandy

    What size do you stomp for your blog? I know the FB size, but what size for the blog? TIA!

    Arielle Peters

    I second Brandy's question :) I see how you resize for Facebook but wondered what the resize is for your blog? Thanks!

    Stacie

    Hey Guys! I'm trolling your education post trying to glean all I can about blogging and anything else that catches my eye. I was wondering since this post was written in 2014 do you still use BlogStomp??

    Amy & Jordan

    Hi Stacie! Great question! Yes! We still use BlogStomp and LOVE it :)