Save Time and Get Your Blog Loading Faster

Annie Pancake // Save Time & Get Your Blog Loading Faster  

Hi everyone! So today I wanted to show you how to make a super quick Photoshop Action to make your blogging life easier, your photo editing shorter and your site load faster. I've talked about using photoshop actions for photo editing before on the blog, but today I'm going to go into a little more detail.

Photoshop actions are automated tasks that you can create (or download for) Photoshop. They carry out a specific task automatically, so that you don't have to go to the trouble of doing the repetitive, menial things yourself.

I'm going to show you how to create a simple action in Photoshop, that will help you re-size your images to fit your blog size, but first I'm going to tell you why you need it.

Huge photos slow down loading time on blogs - who knew, eh? It's not enough to simply take, edit, upload and paste in your photo. If you're shooting with a DSLR camera or even most realtively modern digital cameras, your photographs will be huge, and therefore slow up your blog. (Think about how many photos a blog accumulates!)

Some people think that changing the Width and Height in the HTML code of the photo after it's uploaded is enough, but your website usually stores them at their original size, simply displaying smaller. This means that they still take the same amount of time to load. (For context, my dslr photos start at over 3000px wide, I size them to 600px)

It's therefore necessary to save your images to a smaller size before uploading, which can be tedious if you have many photos per-blog post, or are batch-shooting photos for your blog. This is where the Photoshop Actions come in! With a click of the button the repetitive re-sizing is done for you. Bliss. So..

Step 1: Find out the size of your 'content box'. (The area that all your pics and writing display in) It is super easy to find this out as it will specify somewhere in your site's HTML (or if not, here's a page that tells you how to find the dimensions of your blog theme ) It will probably be somewhere between 600px and 800px.

Step 2: Open Photoshop, and select Window > Actions.

Step 3: Open your first image that you are planning to resize, or you can just do it with a 'new canvas' to record the action.

Step 4: Go over to the 'Actions' box that has appeared in the bar on the right hand side, and click the post-it-note looking button (New Action). Rename your action something like 'Blog Image Resize' or whatever will help you remember what it does and click 'Record'.

Step 5: From the taskbar at the top, choose Image > Image Size and change the width to the same width as your content box from step 1. Both Width and Height should change in order to keep your image in proportion. If not, you need to make sure the little chain-shaped icon to the right of these numbers is clicked. Click 'OK'.

Step 6: Go back to the 'Actions' box on the right hand side and choose the square icon, like a 'stop' button. Save your image. Done!

Step 7: To use your action in the future, simply select the correct action 'Blog Image Resize' (or whatever) and select the play button beneath. It will automatically change the size of your image in an instant.

Note: you might want to save the images as a different name in case you find yourself needing the larger, original image, although I generally just save over the original image. 

Also: If your 'Actions' box ever goes away, simply go to Window > Actions and it will reappear.

Other photo editors such as GIMP will be capable or resizing images in the same way, though I am not sure how or if you can create actions in these programmes as I only use Photoshop!