How to process photos for the web

How to process photos

Photographs of blank books by Laurel Tree Bindery

This guide on how to process photos is just the tip of the iceberg for photo editing and post-processing, but I hope it will give you a great foundation for processing your photos for posting online. We'll start with photographic file types and the critical difference between lossy and lossless. We'll examine best naming conventions and tips for organizing files. Finally we'll look at processing raw files and bulk processing files in Photoshop.

When you process photos for the web, it's good to keep multiple versions of your files. The highest resolution and best quality of your images is the original file. I like to think of that file like a negative and keep it safe and backed up. If your camera or phone shoots raw files, that’s always going to be the best option.

Handling and processing those original files can be challenging. Making files look good and load quickly is a critical balance to achieve. When uploading files to your website, the goal is high quality and fast speeds for users.

Lossy vs. Lossless

Images in GIF and JPEG formats are lossy, while TIFF, PNG, BMP and raw are lossless. What this means is that GIF and JPEG images are compressed by averaging the information. They become even more compressed each time you open and save them. 

GIF and JPEG should only be final versions. When you need new files sizes or output, go back to your lossless original. If your original photos are in GIF or JPEG your first step should be to copy those files somewhere safe and never open the originals.

Naming conventions

Before we get into the steps to process photos, let’s talk about naming image files.

I'm picky, picky, picky about my naming conventions and you should be too for multiple reasons. First, the name stays with your file if it’s downloaded or shared. It’s also a claim of ownership. Finally, it is a ranking factor in SEO.

Google extracts information about the subject matter of the image from the content of the page, including captions and image titles. Wherever possible, make sure images are placed near relevant text and on pages that are relevant to the image subject matter. 

Likewise, the filename can give Google clues about the subject matter of the image. 

From: Google Images Best Practices 

Because of this blog post, I’ve revisited my own naming conventions. Up until today, I named my files using a combination of snake and Pascal cases. Kebab case is the new best practice for the web. 

EXAMPLE: I’ve gone from MessageInABottle_LaurelTreeBindery01.png to message-in-a-bottle-laurel-tree-bindery-01.png.

TLDR 

  • camelCase
  • PascalCase
  • snake_case
  • kebab-case

Source

TIP: If you want to really optimize your SEO, consider having your keyword phrase in your image title and alt tags as well.

Process photos in bulk with Photoshop

Process RAW images into TIFF

Open your raw photos in Photoshop. The raw image file type is camera maker dependent. Here’s a list over on Wikipedia. I have a Nikon, so you’ll see that my files are nef. Personally, the Photoshop raw processor is the main place I edit.

Step one of how to process photos. Screen shot of photoshop raw processing screen.

This is the time to look at and adjust how your photo looks.

  • White balance
  • Exposure
  • Levels
  • Crop 
  • Basic rotation or /horizon correction

Here's a guide to processing raw files from Adobe. If my file needs additional touch up, I open it and do non-destructive editing in Photoshop. Alternatively, GIMP has a raw plugin that makes it a good, open source, free substitute. 

You can adjust each photo individually, or select multiple to make adjustments to an entire group. 

Step two of how to process photos. Screen shot showing bulk exposure on multiple photos.

When saving each raw photo, you get the option to change the name. Utilizing my new naming convention, I’ve set up the first part of the to be changed if needed, the second to be my company name, and let Photoshop add automatic numbering. I’m saving these as full sized, lossless TIFF files which will become my new working originals.  

Step three of how to process photos. Screen shot of photoshop showing naming conventions and automatic numbering.

Organize folders for bulk processing

I move my TIFF files into their own folder.

Step four of how to process photos. Screen shot of folder re-organization with TIFF files in their own folder.

Steps to bulk process photos.

I predominantly use bulk processing to save different sizes of my images and to add copyright information int he metadata. 

Go to file menu -> Scripts - Image Processor 

Step five of how to process photos. Screen shot selecting image processor in Photoshop menus.

Choose size and file options

1. Navigate to the  folder with the TIFF images. 

Step six of how to process photos. Screenshot choosing the TIFF folder in Photoshop.

2. In the second step I use "save in same location” and move them later.

Step seven of how to process photos. Screen shot of the image processing options in Photoshop.

3. In the third step choose your final file type and size: 

The options I’ve chosen here: JPEG, Quality 12, Resize to 1080px wide. Height is large enough to be irrelevant. This will not stretch your photos.
TIFF is lossless and a good idea if this is still an interim stage.
Native PSD is really not recommended unless just for your own use.

4. This is where I add copyright information.

After you process your JPEGs will be in their own folder.

Step 8 of how to process photos. Screen shot of folder organization showing location of bulk processed JPEGs.

Photo processing results

Your final image size is really dependent on where the file is being uploaded. For example, for Laurel Tree Bindery I actually use a 1080 x 1080 square format. The website then creates and serves up smaller versions for different screen sizes.  

Step nine of how to process photos. Screen shot of folder organization with JPEG folder moved out of the TIFF folder.

I often do end up creating a couple different JPEG end sizes. I will always go back to the TIFFs to create new sizes to submit to shows or to upload to different platforms. I never, ever open and re-save a JPEG. A JPEG is always a final image. 

Final thoughts

This is just a basic guide on processing and bulk re-sizing images with Photoshop. Let me know what questions you have or if there are any tips you would like to share. 

Let's discuss:  Slack,  Facebook, or  Twitter.