How to Prepare Photos for the Web in Lightroom

« Ballerinas by Eduardo |  The Visual Imagination »

You have reached the archive of articles posted on my personal blog. This blog is no longer updated, but you can read my latest articles at my new website The Creative Photographer and find my photography ebooks at my new store.

Thanks for reading! Andrew.

Preparing photos for web in Lightroom

Lightroom isn’t just a tool for processing Raw files. The power of the program comes from its ability to organise your photos in the Catalog and help you export them in the size and format best suited for the intended use.

I was reminded of this the other week when a friend mentioned she uses Photoshop to prepare photos for a website she manages. I immediately thought that would be quicker and easier in Lightroom. Today I will show you why.

As an example I am going to show you how I prepared the images for last week’s article Ballerinas by Eduardo. Eduardo gave me permission to download photos from his websites for the article. Doing so gave me a folder of images that look something like this:

Preparing photos for web in Lightroom

The photos all have weird names (like tumblr_mnbg00owOG1qzawmno1_r1_500.jpg) and are different sizes. I needed to resize them all so that the length of the longest edge is the same (600 pixels for my website) and change the names to something that made more sense. In Photoshop, you would have to do this one photo at a time. Or you can save time and do it in Lightroom. Here’s how:

1. Import the photos into Lightroom:

In Source select the folder where the photos are stored.

Select Add from the commands at the top of the Import window.

File Handling: Set Build Previews to minimal. The quality of the previews isn’t important, so select the smallest setting to save time.

Apply During Import: Set Develop Settings and Metadata to None so that you don’t alter the photos in any way.

Preparing photos for web in Lightroom

2. Create a Collection to store the photos in.

Optional: It’s up to you whether this is worth the time. If you think you may come back to them in the future, or it’s handy to be able to view photos that you’ve used on your website, then create a Collection. It’s much easier to view photos in the Collections panel than it is to use the Folders panel.

3. Export photo files

Select all the photos you’ve just imported and go to File > Export. This lets you export all the files you’ve just imported to a new folder on your computer. Most importantly, you can resize and rename the photos as you do so. These are the important settings:

Export Location: This is where you select the folder where you want to save the photos.

Preparing photos for web in Lightroom

File Naming: Select Custom Name – Sequence from the drop down menu and type in the file name you want to use underneath.

Preparing photos for web in Lightroom

The file name is important because Google notes it when it indexes your website. It helps people find your website in Google if you use relevant keywords in your file names. I entered ballerina-portrait-eduardo-izq because I want people to find my article when they enter these keywords into Google. Note that your file names should contain no spaces. If you’re curious to see how well this worked, click this link to see the results.

File Settings: Set Format to JPEG and Color Space to sRGB.

For Quality there are two approaches. The first is to set the Quality slider to around 60-80. That will reduce the images to smaller files so that your web page loads quicker. The second is to tick the Limit File Size To box and enter something like 150kb. Then Lightroom greys out the Quality slider and adjusts Quality on a per image basis to keep your photos under the 150kb limit. I tend to use the first approach as at 600 pixels wide most of my photos fall well under the 150kb threshold.

Preparing photos for web in Lightroom

Image Resizing: Set Resize to Fit to Long Edge and enter the required size in pixels. Resolution should be 72 pixels per inch.

Preparing photos for web in Lightroom

Output Sharpening: If the photos have already been sharpened then leave the Sharpen For box unticked. In this example I didn’t want to change the images at all, so I didn’t apply any additional sharpening.

Preparing photos for web in Lightroom

Does all that sound like a lot of work? I suppose it is, at least the first time you do it. You can speed the process up by creating an Export preset. Do that by clicking the Add button in the bottom left of the Export window. Name the Preset something like Website preset and click Create. Now, next time you want to export photos for this website, you can select this preset to load all the settings. The only ones you may need to change are the destination folder and the image size.

Preparing photos for web in Lightroom

Note that this method works well as long as you need all your images to be the same size and using the same naming format. If names or sizes vary then you should export your photos in smaller batches or one at a time.

Other applications

This method works well for exporting photos in batches for nearly any purpose, not just website use. You can create multiple Export presets to speed up the process.

Further reading

If you are interested in creating a photography website that you can export directly from Lightroom, you might be interested in the Koken Content Management System (CMS) and Lightroom plug-in. My article Create Your Own Photography Website with Koken explains how to do it.

You may also be interested in uploading photos directly to Facebook, Flickr or 500px from Lightroom. I wrote an article about this for Digital Photography School called How to Upload Photos to Flickr and 500px using Lightroom 5.

The Mastering Lightroom ebooks

Mastering Lightroom ebooksMastering Lightroom: Book One – The Library Module  shows you how to use the Library Module to import, organise and search your images. This important task lays the foundation for the work you do in Lightroom. Mastering the Library module and learning to use Collections to organise and sort your photos ultimately saves you time, which you can spend either in the Develop module or with your camera.

Mastering Lightroom: Book Two – The Develop Module explains how to use the tools in the Develop module to get the most out of your Raw files. It builds on the lessons learnt in Mastering Lightroom: Book One – The Library Module and shows you how to use Lightroom’s powerful features to creatively process your images. You’ll be amazed how easy Lightroom is to use once you’re familiar with it and just how much it speeds up your workflow compared to other applications.



Related Posts Plugin for WordPress, Blogger...

2 Responses to “How to Prepare Photos for the Web in Lightroom”

  1. Janice says:

    Thanks for showing how to do this in Lightroom. For me, when creating pictures for a website, I tend to only be doing one at a time, as I develop each page and see which pictures I need accordingly. However, I do sometimes use the batch processing feature in Photoshop, which allows you to set up a pre-defined set of image edits (such as size change, filters, save-as using ceratin prefix on the file name etc) and I then process all images from one folder in the desired manner. The process can also involve saving for web, so I think Photoshop does also provide a neat way to do what you’ve shown above. Of course Lightroom is much cheaper so if you’re ONLY doing basic filtering and saving images for various purposes then Lightroom would be the way to go!

« Ballerinas by Eduardo |  The Visual Imagination »

Sign up for the free Mastering Lightroom email course