How To: Resize Images for Web

In the past week a few of my non-photographer friends have asked me how to downsize their high resolution images for web purposes like actor castings, blogs, Facebook, etc. while perserving the image’s orignal quality. This inspired me to share my process for how I prepare my images for online viewing. Let’s start off with my jumping photo of dancer/actress Julie Zhan.

MellyLeeBlog-Resize1

Step 1: Open the desire image you’d like to shrink.

Step 2: On Photoshop’s top bar go to Image  > Image Size.

MellyLeeBlog-Resize2

The Image Size menu box should open. This is where you’ll make your adjustments.

Step 3: Change the image’s resolution for 72 ppi. Monitors (unless you’re on a fancy spancy retina display) have a resolution of 72 ppi, so you want to match your image to its setting. This will result in a smaller file size and therefore save web space and load faster.

Step 4: Set the pixel dimensions of your image. I size all my blog photos to a width of 700 pixels.

Step 5: Change the resample from Bicubic Automatic to either Bicubic, Bicubic Smoother, or Bicubic Sharper (depending on your preference). When I upgraded to Photoshop CS6 I noticed that when this setting is left on Automatic Photoshop will compress the image and make everything appear over sharpen and pixelated. Yuck!

MellyLeeBlog-Resize5

MellyLeeBlog-Resize3

Step 6: Save for web!

MellyLeeBlog-Resize4

 

Finally: Adjust the quality and file type you want to save you images as. I usually set mine as a jpeg and a quality at 80. This is mainly to perserve my photos’ original high quality at a smaller size that would be easy to view and not take forever and a year to load online.

Double check to make sure “Covert to sRBG” is checked. sRBG is the color profile web browsers, cell phones, and most devices use. If your color profile is left in its working profile like ProPhoto RGB the colors will display completely off. Yuck!

Click Done and you’re done! Hope this was helpful 🙂

Note: If you’re posting images often it would be helpful to make a Photoshop Action of your save process for workflow efficiency  …or download mine if you’re lazy.

Tags from the story

2 Comments

Leave a Reply

Your email address will not be published. Required fields are marked *