Optimizing Photos for Web

Your photos have a better chance of ending up on the web these days than being printed. It is embarrassing to have your image take longer than 10 seconds to download onto a page. In this tutorial, Optimizing Photos for Web, we will teach you how to optimize your photos so that people can easily see your photographs and also so that your photographs are protected.

Optimization in Photoshop

The first thing you need to know about optimizing your photos for the web is that images on the web are only 72 pixels per inch. For a high quality print you want your pictures to be around 300 pixels per inch. Most digital camera will default to 160 to 313 pixels per inch. It is up to you to find out the resolution of your photographs and make them optimized for either print or web.

How do I find image size and Resolution

Image>Image Size or option+ctrl+I for a pc; or option+command+I for a mac will bring up the image menu. The image menu displays the current image resolution and dimensions.

For photography, you will want to keep Scale Styles and Constrain Proportions checked. If you are looking to make your image ready for the web you will want to have the re-sample Image check box checked. Then it is as easy as changing the resolution to 72 and the pixel dimensions to your desired settings. Keep in mind that most computer screens are less than 1300 pixels wide so there is little reason to ever make pictures a larger width than 1300 unless you are inviting the world to print your images. So you get a feel for the size of a pixel- the image of the Image Size box to the left is 300 pixels wide.

Compression

After you have your images sized correctly you need to have them compressed or saved for web use. In Photoshop, this can be done by simply going to file>Save for web and devices or the shortcuts ctrl+s+shift+alt on a PC and option+control+shift+s on a pc. For photographs, the best format is typically a jpg. The more compression on an image the less smooth it will look. You will begin to see blocks instead of smooth transitions from color to color. Slide the compression bar to the left, until right before you start to notice the image looking worse.

Copyright Note

Many social networking sites have you give up some or all of your rights to an image as you upload them onto their site. Be cautious of who you are sharing your photos with and what format they are in. If you typically end up putting your photographs on social networking sites that compress your photos you will find the process goes quicker when you optimize photographs before uploading them. It also gives you better control over the final image size.

Batch Photo Optimizing

When you want to repeat the same function to a bunch of photos it is called a batch process. You can quickly process a large batch of photos to be ready for web use within a few minutes. Fireworks is Adobe’s solution to batch processing photographs for web.

2 COMMENTS

  1. Hi, I have a question on the batch issue. You mention it is better done with Fireworks but I see that option both in Photoshop and Bridge (never use it though). So is it possible to set batch proc in this apps as well? How you to set a batch process?
    Thank you,
    P.S. Love this website and all information on it! Keep going and update it!

LEAVE A REPLY

Please enter your comment!
Please enter your name here