5 Easy Steps to Optimize Your Images in Photoshop

Before we start, I want to throw a caveat out there: this tutorial excludes other optimization processes such that of selecting the right image formats for your needs as well as optimizing SEO such as alt tags that can improve the search ability of your images in, say, Google Images. This short tutorial will show you how to reduce the final images that you are about to host online.

Step 1: Open Photoshop and Open Your Image

Go to File > Open (Ctrl/Command+O) and bring your image to your workspace.

Step2: Start Photoshop Actions

I want to use Actions to record every command in this process including Save for Web & Devices command so that I can batch process my images without having to open each one later.

Bring up the Actions Panel up by going to Windows > Actions (Alt/Option+F9).

From the Actions Panel, click on Create new set icon: name your new set. I named my Images.

To start the recording process, click on Create new action icon; give your action a name. I named my Image Optimization. Click Record to start.

Remember: from now on all your commands will be recorded to your Actions Panel.

Step 3: Save your image for Web & Devices

Save your image for web and devices by going to File > Save for Web & Devices (Alt/Option+Shift+Ctrl/Command+S).

You should see Save for Web & Devices dialogue window in your workspace. I am going to keep my image at a decent quality, so I’m using the following settings:

  • Preset: JPEG High (selects JPEG with Quality at 60)
  • Optimized: Checked
  • Convert to sRGB: Checked
  • Image Size: change according to your site specifications
  • Percent: 100%
  • Quality: Bicubic

I need to make sure my image does not exceed 600 pixels in width, so I’m going to resize my image with the toggle on (link icon) to retain the original image proportions.

Feel free to do the same if you need to meet a certain width/height requirement.

Tip: Select 4-Up tab from your Save for Web & Devices window to preview your image as well as see the difference in file size and quality comparison. Feel free to play around with the settings to find the quality and optimization that suits your loading needs.

You can also click on the Select download speed icon to change the Size/Download Time to get an estimate on how long it will take to download your image at the selected Size/Download Time.

To preview your image in real size, click on the Preview button to see your image in the web browser.

If you are happy with your image, click Save.

I have chosen to save my images in a different folder as I want to preserve my original images with the larger dimensions for future use (remember I resize my images down to 600 pixels in width).

Close your image file from your workspace.

Go to Actions Panel, click on the Stop playing/recording button to stop your Actions recording. This should record everything including closing your image.

Remember: Since I chose to save my image to a new folder and did not save the original image after I close it, this will reflect in my recorded Actions. If you want to replace your image, make sure you do so as you are recording.

You can see the specifics of your recorded Actions by clicking to expand each Action.

Step 4: Batch Process your Images

It’s time to do the same to the rest of your images. Instead of going through them one by one, lets put our newly created Action to work!

Go to File > Automate > Batch. Use my settings below.

You should have selected the Actions Set and Action we have just recorded.

Make sure you set your Source and Destination Folders, and check Override Action “Save As” Commands.

By checking Override Action “Save As” Commands, we are allowing Photoshop to include our Save for Web & Devices command.

I’m keeping my File Naming as the original document name as well as extension.

Step 5: Use Image Optimizing Tools

We have already reduced our original image quite a bit in Photoshop, but let’s reduce it further by using an image-optimizing tool. There are many to choose from, but the one I like to use is Smush.it! It’s easy, fast, and free.

Go to Smush.it! from your browser (full URL: http://www.smushit.com/ysmush.it/).

Click on the UPLOADER tab.

Now, click on Select Files and Smush. From the file selection window that pops up, navigate to your image files.

Select your images and click Open.

Now watch the optimizer in action!

Once it has completed, you will get a message detailing the percentage and total size saved.

Make sure “Keep directory structure in zip file” is checked—this will allow you to replace images easily if they are under different subfolders when you uploaded them.

Click Download Smushed Images.

Open your zip file and replace your old image with the newly reduced image files.


You’ve just been through a quick run down on how to reduce your image size in Photoshop with 5 easy steps. You also created Actions to optimize your images in one go, saving you valuable time. For a complete in depth guide on optimizing your images from selecting the right formats for your web projects, please check out The Comprehensive Guide to Saving Images for the Web.

  • Wow, thank you very much.
    Smush.it! looks like my new best friend.

  • Maria Wendt

    There is nothing worse than being on a page with 100 images, all of them dragging their feet trying to load. Great tips to help prevent this! I agree with Jonas; Smush.it! is my new best friend. Thank you very much!

  • Wow I hadn’t heard of smush.it. I agree with Maria. There have been times that I have left blog posts because the images were taking too long to load. You’ve definitely turned me on to some features I had not been utilizing in the save for web feature. Thanks for the great info!

  • Thank you for the action tip it saves lot of rework, and thankyou for introducing Smush.it

  • I knew about the plugin smush.it for wordpress, but when it was the reason for some crashes I had to let it go. thanks for pointing me to this new possibility of shrinking images

  • Thanks! the plugin for smushing hasn’t been working so this is a very helpful tutorial for me to do it myself!!!

  • thanks! but the image of the clarity is not good

  • Thanks for this simple and informative tutorial on Photoshop. I am new to this software and this post has helped me a lot to understand the basics of image optimization using Photoshop. I feel more confident using Photoshop now.

  • urmila

    Thanks for giving simple information about that.

  • Very Helpful…I have used another optimizing tool –Lossless Photo Squeezer, easier than PS but not powerful as PS.
    If you are interested in it,you can visit https://itunes.apple.com/app/id704083918 to get more information.

  • Amresh Kumar

    Wow!! Interesting it is very helpful and easily we can optimize image size ..

  • Biswajjt dutta

    thanx and it is very useful step

  • Spot on with this write-up, I truly assume this web site wants far more consideration. I’ll probably be again to read rather more, thanks for that info.

  • Kabaevartz2233

    Thanks for these nice share. Actually image optimization is not so easy task but reading your thread can see it’s not so hard task 🙂 🙂 Thanks.
    Have found same articles in http://managemytraffic.com/blog/7-ways-to-image-web-optimization/ . There views are little different but main theme is same.