Advertisement
  1. Photo & Video
  2. Compression
Photography

How to Export JPGs for the Web from Adobe Photoshop Lightroom

by
Difficulty:BeginnerLength:MediumLanguages:
This post is part of a series called Adobe Photoshop Lightroom for Beginners.
New Course: Adobe Lightroom CC for Photographers
Best Practices: How to Deliver Digital Image Files to Your Clients Over the Internet

Perhaps the greatest joy of photography is sharing your work with others and showcasing your creations. The path to getting the image online, however, can be difficult. In this tutorial, I'll show you how to export web-ready images with the best results.

The Compression Dance

Whether your images are being loaded onto a website or emailed to family and friends, compression is necessary. Creating images for the restricted capacities of the web means weighing the trade-off between the quality of the image and the file size of the image. As our image quality increases, so too does the file size of the image.

One key part of designing for the web is the consideration of user experience (Tuts+ has a fantastic course on UX, if you're interested), or prioritizing the viewer's ability to comfortably view and navigate the site. Quick page loads, which is in part determined by the file size of the web page, is a big part of user experience. Images are now 62% of the weight of web traffic. Keeping images small in file size greatly helps sites load quickly.

As photographers, we're constantly pushing against this barrier. We want big, glorious pictures. And though we want our images to appear great on the web, you don't want to force slow load times on anyone. Balance is key.

When we export images for the web from Adobe Photoshop Lightroom, we have to consider two key aspects: size and quality.

Exporting in Lightroom

Before we dive into optimizing our exports, let's walk through a basic export in Lightroom. 

Choose an Image

To begin an export, pick an image or series of images to export. I prefer choosing the images I want to export from the film strip. After you've selected the images to export, you can right click on Windows or control + click on Mac to choose Export > Export from the contextual menu.

Export  export
To export an image, choose Export > Export from the context menu.

After starting the export, a new window will appear with a variety of options. Let's take a look at the key settings you'll choose with each export.

Export Location

The export location designates where the finished images will be saved. You can choose a folder form the dropdown, and tick the "Put in Subfolder" box if you want the images placed all in the same folder.

File Naming

Each export can also feature its own rename settings. If you stick to the default option, your images will have the same name as the original files, but saved as a standard image type, just as JPEG. You can also tick the "rename to" box and choose one of the many renaming templates that Lightroom offers to customize the exported images.

File naming

File Settings

The file settings panel is one we'll discuss a little more in depth when we're seeking to strike the balance of quality and file size. On this screen, here are my suggestions for each option:

  • Image format: almost always JPEG, particularly if the images are bound for the web
  • Color space: always sRGB
  • Quality: this slider allows you to choose the quality of the image that is exported; a low number is a low quality, small file; dragging the slider to the right increases both the image quality and file size
  • Limit file size to: We can also check the "limit file size" option to put a limit on the file size of the saved image
File settings

Image Sizing

Image sizing is another panel that controls the size of our images. You can choose the dimensions as well as the DPI of your exported images.

Image sizing

Exporting for the Web

When it comes striking the balance between file size and image quality, here are the key things to consider:

Size

The first part of an efficient export is to consider the size of the image on the web. The size of an image is the actual pixel dimensions of the image.

When your images come out of the camera, their dimensions are huge. For example, the 22 megapixel images from the Canon 5D Mark III measure out to 5760 × 3840 pixels. However, the screen of my laptop is just 1440 x 900 pixels. See the issue? Factor in the fact that web images are again smaller than the width of our monitors and the need for resizing is clear.

Image size
You can show the raw dimensions of an image in Lightroom by pressing "i" on the keyboard. It will display the pixel dimensions of the image captured. You can see here that images that come out of camera will be much larger than is necessary for the web, where images are typically 1000 pixels wide or less.

For tutorials on Tuts+, our images are resized to 600 pixels and have a maximum file size of 200 kilobytes. This ensures a quick load and, for most people, this does the job. If you're reading this page on your smartphone, chances are good it loaded pretty quick, even if you were on a slow connection.

Export - Long Edge
My favorite way to export images from Lightroom is to choose the "Resize to fit -> Long Edge" option in the export dialogue. This will size all images to be 600 pixels on their largest side, whether it's portrait or landscape oriented. The other side is automatically calculated. This is a great option when I'm exporting for Tuts+, where all images are 600 pixels on the long side.

Quality

In a perfect world, we could always export images at maximum quality. In reality, we find out that maximum quality exports aren't always needed. At web sizes, the differences in quality are often hard to perceive, and that means we can drop the quality slightly and reduce the file size greatly.

On the upper end of the quality scale there are diminishing returns. The difference in perceived quality between a 90 and 100 quality setting is hard to see, but it increases the file size significantly.

Web Quality Comparison
The above image shows the comparison in quality with the various slider settings. In the lowest quality setting, you can definitely see some banding in the sky. As the quality increases, so too does the level of detail in the treets and home, but it comes at the cost of a larger file as shown below.
Lightroom Quality Setting Image File Size on Export
25 91kb
50 122kb
75 168kb
100 366kb

Given the above results, I would likely select the export of 75 quality. It strikes the correct balance of quality and fitting Tuts+ limit of 200kb images.

Embedded Profiles for The Web

One important check step for exporting images for the web is to include the proper color profile in your exports. Daniel Sone has a great write up on Tuts+ all about color spaces, but for the purpose of exporting in Lightroom, ensure that we embed the sRGB color profile.

Export with sRGB
When exporting for the web, I always ensure that I have selected "sRGB" as my color space for the best results.

Presets for Exporting

Even when exporting for the web, there are a number of different scenarios that will affect your settings. Even though we're optimizing for file size, there are occasions that higher quality or higher resolution images are required. That's why export presets are incredibly useful; you can build several different options and use them for the different target sizes.

On the export window, saving your current settings for export is very easy. After you've chosen all of your export settings, press the "+" button and save your web-ready presets.

Save Export Preset
After you've added your resize and quality rules, don't forget to save some "Export Presets" by pressing Add. It will save all of your rules; I recommend building several for your various web targets.

The Take Away

In this tutorial you learned some best practices and ideas for efficient exporting for the web. Compressing your images for the web ensures that viewers will load them quickly. With the right settings, we can still maintain high quality.

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.