I’m pretty sure most of us know that our images need to be re-sized before uploading to the web. The photo needs to fit within the width of your blog, and it needs to load fast or you will lose readers. True story.
I’m no expert on this subject, but I found a great article at photoshopessentials.com which gives an in-depth look at why, and how to do it. It’s very informative and enlightening and explodes a few myths about size, resolution, etc.
However, I thought I’d go over how I do it and show you how to write an action to automate this task. One click of a button and your image is re-sized and saved in a folder. Perfectly sized and hard for someone to steal it for printing purposes, although they could steal it and use it for the web, but that’s just not cool.
Actions can only be written in Photoshop, but don’t despair, I have a little surprise for you and you’ll find it at the end of this post.
Since Photoshop CC has a bit different dialog box, I wrote this action in CS6. So here we go:
How to Write an Action in Photoshop to Re-size and Save Images for Your Blog
To start with, make sure you have a folder created where you want to save your re-sized images.
- Open a photo that you have already adjusted exposure, white balance, and cropped etc. Make sure all your edits are complete before re-sizing.
- From the Actions panel, make sure that Button Mode is not checked. Actions can’t be written in Button Mode.
- Click on the down-facing arrow and choose New Action. In the Dialog box, type in the name you want to use for your action. I’m using the name “Resize and Save for Web”.
- Choose Default Actions as the Set. This will save the Action in the Default set (of course). You can create your own sets, but I won’t go there right now.
- Choose None for the Function key, and choose a Color if you like. This will give the Action a Color when in Button Mode. For this Action, I did not choose a color.
- Click Record. Everything you do from now until you press the Stop key will be recorded. It doesn’t matter how long you take, PS will sit there and wait all day if it has to so you can go slow and make sure you take only the steps that you want recorded.
- In the Menu Bar, choose Image > Duplicate, and click OK.
- Choose Image > Image Size.
- Make sure that Scale Styles, Constrain Proportions, and Resample Image are checked.
- Click on the down-facing arrow and choose Bicubic Sharper (best for reduction).
- Set the Resolution to 72 Pixels/Inch.
- For the Pixel Dimensions, set the Width. I set the width to 760 Pixels/Inch because that is the maximum width for images that will fit on my blog. Yours will most likely be different. Accept the Default Height to maintain proportions. Click OK.
- In the Menu Bar, choose File > Save for Web. Choose JPEG, Medium with a Quality of 45. Click Progressive. I left the rest of the settings at the Default. Click Save.
- Navigate to folder where you want to save your re-sized images. Accept the default name of your image. If you give it another name, the action will save every image with that name and of course will end up overwriting every image you run the action on.
- Close the duplicate image, then close the original image (do not save the changes).
- Click the Stop key.
Here are the final Pixel Dimensions for my image. Notice that the file size went from 28.7M to 1.11M. The other thing to note is that I do not touch the Document Size dialog box when re-sizing. It gets reduced automatically.
Clean as a whistle and faster than a speeding bullet!
But the fun part today is my little give-away! I will write a custom action for the first 10 people who comment. I can only record it to the point of re-sizing the image since I can’t create a path to a folder on your computer. Once you run this action on an image, you will have to then save it yourself.
If you want a custom action, make sure you say so in the comments, and make sure that I can contact you.
You give me the info – I give you the action!
Want a few more tips on Photoshop? Check out my page “Photoshop Tips”!
Have a wonderful Sunday!