How to Crop Images and Optimize in Photoshop to Save Time

Previous Next 1 of 3

Ever wondered how to save time and make your site look consistent by cropping your images and optimize in Photoshop?

Ever needed to crop an image down to a certain size and save for web? This is something everyone who manages or populates content to the web needs to be able to do at some point to keep their site clean and organized. This simple tutorial will help you do this effortlessly using photoshop CS through CS6

I know photoshop to a lot of Small Business Owners can seem daunting, however like this tutorial on how to crop images and optimize in photoshop to save time, it can be quite simple.

1. Simply start by opening photoshop and clicking File>>>Open>>>then select the photo you which to work on.

Tip: One note, it is important to start with an image that is quite large, as cropping to a smaller size will produce a crisp image, however cropping to a larger size will create poor pixelation.

2. Once the photo is open in photoshop, click the crop button.

Tip: If you hover over each tool in photoshop it will tell you which tool it is. The crop tool looks a picture frame crossed over.

3. Once the crop tool is selected a bar appears at the top that asks you the pixel dimensions you want to crop the image to. See figure 2 above. You will notice the bar at the top of photoshop that says Width and Height and Resolution.

Tip: Most images for web need to be a screen resolution of 72 DPI (Dots Per Inch).

In this case I want to crop the image at 600px Width and 480px in Height.

Tip: make sure to type “px” at the end of the number if you want to crop to pixels. Type “in” if you want to crop to inches etc etc.

4. After you select the size and resolution for the crop, simply click hold and drag your crop tool over your image, release when it covers the part of the image you want to crop. The box that appears is the same size ratio as the numbers you crunched in. You can make it as big or small as you want but you cannot change the aspect ratio unless you change the numbers.

Tip: After you drag it out, you can move the crop box around to select the best crop for the image. Click enter once you release the box and the image will crop for the size you specified.

How to optimize and save the image for web.

5. Deselect the crop tool by clicking on the top arrow tool. Then go to File>>>and click “Save for Web and devices”. A save box appears like figure 5.

Tip: Jpeg will usually give you the best image quality for a normal photo or image so make sure Jpeg is selected. Next right under JPEG you will see a bar, in figure 5 this bar says “High”. This is referring to the image optimization quality. I usually select high as it is still a relatively small file and maintains good pixel depth. Medium and down will start to create poor pixelation, but for small images less than 300px this can be a good option.

6. Once you’re done choosing your optimization preferences it is time to save. At the bottom of the save for web and devices you will find three buttons, Save, Cancel, and Done.
If you want to save the image with the preferences you chose, click save. Your file directory will come up and then simply select the folder on your computer you wish to save the image file to.

And you’re done, you have successfully navigated Photoshop’s many features to create this simple how to task and make your images whatever size you want.

We appreciate you reading this post, and hope this makes your life a little bit easier as you benefit from photoshops many useful but simple tasks.

We look forward to posting some more How To photoshop tutorials to help you manage your webpage better.

Thanks for reading!

Kind Regards

Simon | CEO | Designer | Consultant


Simon Cox

About Simon Cox

After earning his BFA at world renowned Ringling School of Art and Design, Simon began his career with a bang, working for a variety of notable firms, on key projects and visualizations. Due to his drive for excellence he founded Matchwork Studio, based on the core elements of design, marketing and development. Simon saw the need to create a Studio that offered the best in creative design and practical functionality built with the sole purpose of supplying Matchwork Studio clients with results.

Comments (5)
  • 3ds emulator for android

    October 2, 2014

    However, a number of reasons make it impossible for a large numbers of
    lovers of the game to experience all the benefits on the console.
    If you aren’t aware, Usenet is actually older than the
    web and is the grand daddy of today’s current data sharing programs like limewire.

    This includes a hundred minutes and five hundred text messages.

  • Web Directory

    October 9, 2014

    The more links you have the better you rank with Google will be.
    Ask about the production process and their sourcing.

    If not, then you can move on to another web directory on the list.

  • camel scooters friends

    October 17, 2014

    I do not even know how I ended up here, but I thought this post was good.
    I do not know who you are but certainly you
    are going to a famous blogger if you aren’t already ;) Cheers!

  • hoodie fashion medium

    October 19, 2014

    It’s wonderful that you are getting thoughts from this piece of writing as well as from our argument made here.

  • chicken brown rice

    October 20, 2014

    I have been exploring for a bit for any high-quality articles or blog posts
    on this kind of house . Exploring in Yahoo I eventually stumbled upon this website.
    Reading this info So i’m glad to exhibit that I’ve an incredibly
    excellent uncanny feeling I found out just what I needed. I such a lot definitely will make sure to do
    not omit this website and provides it a look regularly.

Leave a Comment

* 5+3=?

* required