Resizing a photo for the web

When you import a photo from your phone or a camera to your computer, it usually arrives as a fairly large file. This large size is great for printing on a sheet of paper, but is too large to load properly on a web page. Changing the size is a pretty easy process:

Open the photo in Photoshop by going to File > OpenScreen Shot 2016-06-12 at 11.48.32 AM
Once you have found the photo you want to resize, go to Image > Image size

Screen Shot 2016-06-12 at 11.48.38 AMThis will bring up a box that looks like this:

Screen Shot 2016-06-12 at 11.48.45 AMAs you can see, this photo taken from my iPhone is 21.8 M in size, which would print at 45″ x 32″ if needed! Since this is a little larger than the average computer screen, we need to reduce the size. To keep the width and height ratio consistent check that the little chain link looks like this:

Screen Shot 2016-06-12 at 11.49.34 AMIf it doesn’t, click on it so the dark grey shadow appears around the chain link.

Change the width to 900 Pixels. (The height will automatically change to keep the ratio¬† correct.) This photo is n ow approximately 12″ x 8″ but only has a resolution of 72 dots per inch, so wouldn’t print clearly at this size, but will look great on a web page – and more importantly, will load rather faster than the original size.

Screen Shot 2016-06-12 at 11.49.40 AMOnce you have clicked on OK to make the change, rename the photo in this smaller format. I use the word “web” to signify I have changed the size for web use.

Screen Shot 2016-06-12 at 11.49.47 AMThe next screen that pops up will ask for more information. For web use I usually save photos at 7-8, but even 6 will be safe if you are planning to include a number of photos on one page.

Screen Shot 2016-06-12 at 11.49.53 AM