How To: Optimize Photos for the Web
We can optimize it. We have the technology.

Design Master

Quick Tip: Want your photos printed beautifully? Check out our reviews of the best photo printing services. Prices start at $0.09/photo!

Displaying your photos in print is very different than on the Web. As you would expect, preparing photos for printing also is very different from getting them optimized for web viewing.

In this guide, we will explain how you can prepare your pictures for showing them on your blog, website, social network or for any online use .


Depending on your camera and settings, your image files will have different  resolutions.

  • Average resolution for digital camera: 300 pixels per inch
  • Average resolution for mobile cameras: 72 pixels per inch

TIP: Mobile resolution is not always enough for printing, but it is more than adequate for web use.

In the case of higher resolution images, resave the photo after applying the necessary edits to it (brightness, contrast and saturation adjustments, perspective correction, cropping, filters, etc.)

You can set the resolution to a value between 72 and 96 manually either when resizing or saving. Some programs have a “Save for Web” feature you can use for this purpose.

TIP: Note that setting higher resolution will not make a great difference for web viewers, but it will consume more bandwidth and take longer for the pictures to load.

How To: Optimize Photos for the Web - Step 1


Not all file types are suitable for the Web. Formats like TIFF are great if you want to preserve as much information from the original files as possible, but they are useless for web use.

Usually, saving files in JPG is recommended.

TIP: If you have specific needs, like when your image displays transparencies and animations, other file types might be appropriate, specifically PNG and GIF formats.

How To: Optimize Photos for the Web - Step 2


When working with any kind of images, you have a choice of color modes to ensure they will look as good as possible depending on their end use.

Your camera will already produce files in the RGB mode, which you can later convert to CMYK (for print display), Greyscale and so on.

RGB is specifically conceived for screen viewing, which also includes web use. Keeping the file in RGB is recommended. There are different RGB options, though. The most common is sRGB and Adobe RGB.

TIP: Unless you are an experienced photo editor, the safest choice is to save the file in sRGB, which is the standard and most widely compliant color mode.

How To: Optimize Photos for the Web - Step 3


Many images on the Web don’t include metadata (EXIF, IPTC, XMP, etc.), which are bits of information related to the file. This can be a problem if somebody uses your photo without your permission.

TIP: Metadata can contain information regarding the image and its maker, like name, contacts, title, location and tags. Most importantly it can specify who is the copyright holder.

You can easily edit metadata from most image editing programs. With some of them, like Lightroom and the software that comes with your camera, you can automatically add some of the data to all of the photos in a batch when importing them. Some mobile apps come with this feature, too.

TIP: If you value your photos, you should always take the time to edit your metadata before sharing.

How To: Optimize Photos for the Web - Step 4


Resizing will take away some of the crispness from your images. Apply additional sharpening to photos to enhance them and preserve details for web viewing.

TIP: If you are using one of the latest versions of Photoshop, you can choose the “Bicubic Sharper (reduction)” preset when resizing (Image>Image Size>Bicubic Sharper). If you want more control or if you are using other software, you can just apply a sharpen filter, making sure to choose the right settings for your specific image and web requirements.

How To: Optimize Photos for the Web - Step 5


After saving, your photo is ready to be published on the Web. Remember to double-check that everything is in order before uploading your images. Happy sharing!


Edited in Photoshop CC. Photo source: Ned Horton, designyoutrust.com

RELATED TOPICS:
About the Author
Kristi Maddox is a master of graphic design, on-site design and ordering, and is the go-to for template and design tool usage.
Kristi and the team order print jobs from every major printer to test quality, value, customer service, and more. See their reviews here:

0 Comments

Be the first to leave a comment!