Workflow: Blog Image Optimization

When I first started blogging I didn't know which way was up.  At times I feel like I still don't but thankfully with the power of internet I am always able to google just about anything (which at times can be somewhat disastrous--re: WebMD) and have schooled myself.  I like to  dub myself a Youtube Graduate and have figured out everything from painstakingly designing my blog with html and .pngs to trial and error before researching most efficient web sizing.  THANK HEAVENS someone told me about Blogstomp a while back, a photoshop action that resizes all of your blog images for you and, if you wish, watermarks them as well.  My workflow isn't spectacular and could use some sprucing up, but for now these steps treat me well!  

Blog Workflow.  Alternatively Titled See Marshall THIS Is What I Do All Day:

1.  Select images for blog:

From Lightroom (or Photomechanic, depending), I flag my favorite images for my blog post.  I try to be selective and choose my absolute favorite images to showcase.  This can get tricky since I wind up loving everything from shoots, so I stick to the rule that if I would frame it on my wall I will blog it.  As clients love images with meaning to them,  I must be a curator of my own work and as an artist must say "can this image stand alone?".  If it passes the test, it gets blogged!

2.  Edit images:

I tweak the selected photos for slight changed in color, sharpness (although I love a good 'soft focus' image and resist this urge nowadays!), straighten it out because for some reason my eyeballs must be crooked when I shoot, etc.  I try my darnedest to keep my edits super minimal so that they are truly reflective of the day and perfectly overexposed and dreamy.

3.  Rename & Export:

From Lightroom I rename the images for blogging (for better SEO--or so I'm told.  I'm a doofus at this!) and export the blog images to a folder inside the Session folder titled 'Blog'.

4.  Visual organization:

"...why do you have  [all the image files] open?"-Alicia

This could be where you think I am ridiculous.  WHATEVER, I am a visual person, SO BE IT.  I open ALL of the blog images in photoshop.  From there, I shrink them down so they will all fit on my screen (from in photoshop it's command + (-) ).  I then move the images around on my computer and organize them as a blog post would look.  This way I can see which photos I would like to pair up via a diptych, showcase first, etc.  I don't have a real rhyme or reason to the ordering of my images, however I DO try to stick within a sequential timeline (getting ready to reception) but am not opposed to using images in varied order.  I just go by what I think looks good paired next to one another.  I try not to duplicate similar same poses in a diptych (I used to, but I think it dilutes both of the images) and I try to vary up the sizing of photos i.e.: I avoid posting 3 vertical images in a row.  I don't have a rule of the number of images I post, I just pick what I absolutely positivity LOVE!  Once I have all of my images laid out in a mock-up blog post, I take a screen shot.  I do this because if I don't, I will spend forever rearranging images in the wordpress photo gallery and never get it right.  Here I also do another run through and edit the post images once again down to photos that make my heart go pitter patter.  Just like a body of work it's important to edit, edit, edit!  CHECK OUT THAT GNARLY DESKTOP.  Yeah, I know you're scooping it out.  Don't hate.  Nothing mysterious there.

5.  Image Resizing:

"Do you use templates for your blog layouts or do you just drop them in Wordpress?  They always look so uniform, I thought maybe it was a template."--Kristin

Depending on the pairing of photos, I resize them for web using 'Blogstomp', an awesome and easy action in photoshop.  Blogstomp will resize my images to a single vertical or horizontal photo optimal for blogging, or pair two vertical photos up into a 'diptych'.  My version of the action is outdated so this is the extent of it's abilities, although I hear the newer versions have lots more layout options.  I stick to this layout because of all of the Graphic Design and photographer's blogs that I see  it's the layout without watermarks that is personally most appealing.  However you may like the new storyboard options, so check it out!

6.  Uploading:

Once an image is 'stomped' via Blogstomp, it will automatically save it under it's original file name in a specific folder on your computer.  From my Wordpress post I upload the stomped photos into the photo gallery and arrange according to my super organized screenshot.  (It wasn't until recently that I found out you could organize images via dragging and dropping in Wordpress.  LIFE CHANGER!  I know I am so behind...).  Once they are arranged in the order I would like, I save!  SAVE SAVE SAVE the changes.  Nothing makes me cry harder than loosing a blog post I just spent eons on.

7.  Tagging:

In the image gallery, I individually describe and keyword the photos.  I don't go crazy keywording them and probably should, it just takes forreverrrrrrr and I don't think it's one of my strong suits. This helps with google juice SEO and Pinterest (you know when you 'pin' a photo, this is where the description comes it.  It's helpful to put your website and description in the image because most Pinners don't.  PLUG THAT ISH!).  Then, save all your hard work of course.

8.  Inserting:

Get your mind outta that filthy gutter.  Click "insert All" and your images will line up-- perfectly curated and organized into your blog post!  WOOHOO!


Things to note:

Kristin also uses blogstomp and was curious about the uniformity of my images because of this:  depending on your blog's width, Blogstomp images can line up differently.  Blogstomp photos are somewhere around 940 pixels wide (for horizontals) and 600ish pixels for verticals.  So, if your blog page is 900 pixels wide, the horizontal and vertical photos will not show up as the same size, the vertical will be narrower.  I like for all of my images to be the same width and the foods in my cabinets and fridge to line up.   I'm OCD to the max.  Considering the optimal webpage size is 924 to 966 pixels wide, it's all good.  However, I personally like the appeal of sidebars (even if they DO make me look like a write a LOT...that's my story and I'm stickin' to it), I chose to allow 620 pixels of posting area.  This way, not only do I have room for a fun 300pixel sidebar with contact information and cool links but then all of my Blogstomped images automatically resize to fit without any added work.  Win-win.


If you have any input that may save more time or is just a cooler way of doing things, I'd love to hear!