Optimizing Photos for Web

Image Optimization 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.

Optimizing Photos for Web Ello Optimized
Ello Optimized by Aileen Yo

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.

Optimizing Photos for Web Compression

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.

Image Optimization Videos
Top 10 Tips For Optimizing Photos in Lightroom

Photoshop: How to optimize JPEG photos

Optimize Images for Website