From Lightroom to WordPress

WordPress is a piece of software that powers as much as 25% of the web’s websites. Major websites like The New York Times, CNN, and Forbes all use WordPress to power their websites.

From Lightroom to WordPress: How to Create SEO-Optimized Images

Major websites like The New York Times, CNN, and Forbes all use WordPress to power their websites.

What WordPress is to web developers, Adobe Lightroom is to photographers. In this tutorial you’ll learn how to use these two powerful tools together. You’ll learn how to take your images from Lightroom and into a WordPress driven site quickly and easily. Most importantly, we’ll do it in a way that’s SEO-friendly so that your images get discovered.

Image SEO For Beginners

Search engine optimization (also known as SEO) is a set of inter-related design, publishing, and data management practices that help web pages to be found. The truth is, there isn’t really any magic to SEO when it comes to images. It all boils down to adding context to your pictures in a way that that makes sense to computers.

Semantic Information

Think of it this way: you enter a search query into the search engine of your choice. The search engine shows you a list of pages that match what it thinks you’re looking for. Search engines use crawlers—computer programs and algonrhithms— that explore the web automatically and build listings of sites that match keywords.

A search engine can tell that images are on a webpage, but it can’t easily determine what’s an image depicts, so we need to supplement it with additional data, a kind that it can understand. This kind of data is called semantic information: it’s information that helps build meaning for individual photographs in context to each other and the rest of the webpage. We use metadata fields to transmit this sematic data.

Google looks to some of the tags hidden in our HTML to help find images. We can add things like titles, tags, and alt text in our website’s code to help a search engine index our site as easily as possible. There’s no guarantee that by adding sematic informating you’ll be able to move your site to the first page of Google’s results, but taking a few basic SEO steps can definitely help your chances. It’s also just good data hygene!

Here are four key pieces of SEO optimization information to add to your images:

File names

If you do nothing else, make sure that you rename your images in a way that describes them. A simple filename like “resizing-images-tutorial.jpg” is a massive improvement over “IMG_9052.cr2.” Using a filename with some words that describe it will improve its chances of being found.

When exporting from Lightroom, my favorite way to do this is to use the “File Naming” section of the export window. Keep in mind that we want to rename the exported image, not the original file. Find the File Naming section and check the Rename To box. Then choose a dropdown option that includes “custom name” so that we can add our own custom text.

The last step is to add the custom text. For the web, it’s best to separate the words in a filename using dashes instead of spaces. Customize each image’s file name for the best results.

Custom Name - Sequence

Use a custom name option to give your file names a better chance of being found. A few words that describe the contents of an image go a long way!

Alt Text

Alternative text, or “alt text”, is used to provide a text description of the contents of an image. Remember that a search engine can’t determine what’s in an image (yet) so we need to help it by using alt text.

You’ll probably never see alt text; the important part is that a search engine will.

Image alt text

An image’s alt text should also be set in HTML. The alt text should briefly describe the image. We can set this alt text in the WordPress Media Library, and WordPress will automatically add it.

Alt text is placed in the same bit of HTML that contains your images. Use it to add a description of the image. A short description of the contents of an image is critical for SEO-friendliness. If writing code isn’t you’re thing, no worries; we’ll look at how to add this alt text using WordPress in the next section of this guide.

Having alt text for your images is also crucial to the visually impaired. Screen reading software designed to help those who have full or partial loss of sight will read the alt text in place of an image. Amherst College has a great guide to optimizing your web pages for accessibility.

Titles

An image’s title should also be contained in the HTML tag. The title should be an even shorter version of the description, with only a few words that signal the content of an image.

Image title text

You should also set an image title in HTML with the “title=” tag in the same image block. Again, WordPress makes this easy to add.

Titles are another piece of the puzzle for helping search engines index our site. WordPress contains a title field that will help our SEO efforts.

Captions

Think of a caption as the text that shows immediately after an image that provides further commentary. Captions aren’t added directly to an image tag directly, but certainly do supplement it. In HTML5, the <figcaption> tag is part of the <figure> group, which is even better. You can learn more about how to write effective captions in Dawn Oosterhoff’s Caption, Description, Title, ALT: How to Add Semantic Information to Images. Writing a strong caption is one of the most under-rated skills, one that’s useful for every photographer!

Mapping Metadata from Lightroom to WordPress

Now that we understand the pillars of image SEO, let’s look at how to add them easily and quickly to our WordPress-driven site. We can carry forward an image’s title and caption from our Lightroom catalog to WordPress.

In the Lightroom Library module, find the metadata panel on the right side. You can see the image title and caption.

When you’re exporting an image from Lightroom, make sure that you’re including “all metadata.” This will ensure that the title and caption are saved to the JPEG image and will be read and included by WordPress.

Include metadata on export

Make sure that when exporting an image, you include metadata in the file. This will make that metadata available in WordPress.

Upload to WordPress

Once you’ve exported a neatly named image file with a title and caption set, you’re ready to upload it to WordPress. Go to the WordPress Media Library and upload this image as you normally would. The uploaded image will carry through the same title and caption that we set in the Lightroom metadata panel!

Image Uploaded to WordPress

Finally, the fruits of our labor! The title and caption that we

You’ll need to manually add alt text to images once they reach WordPress. Unfortunately, there isn’t a field in Lightroom that maps to “alternative text” in WordPress. Remember that this is the text hidden in the HTML code that will help search engines find and index our images.

Alt text

Alt text will need to be added to images within the WordPress Media Library.

After setting the alt text, press Update to save the image. When you insert it into a post or page, WordPress will carry through the metadata and include the metadata we’ve added in the HTML code.

These steps are a major aid for optimizing an image for the web. We can also go one step further by resizing and compressing images for the web.

Resizing for the Web

Getting images ready for the web is about more than just loading them up with keywords and dropping them in WordPress. We also need to think about the file size and dimensions. Remember that a huge portion of the internet connected population isn’t lucky enough to be on a great broadband connection, and we should consider their experience as well.

mobiForge recently wrote that the average webpage file size is larger than the entire 1993 classic video game Doom. This isn’t inherently a bad thing, but is a great reminder that webpages are more full of multimedia and large images than they’ve ever been. It serves as a great reminder that we should always optimize your image file sizes.

When we’re ready to send images to the web, there are two key factors to optimize for: dimensions, and quality. Let’s look at how to perfect both.

Dimensions

The dimensions of a digital image are the length and width of the image, measured in pixels. An image said to be “600 by 400 pixels” is inferred to be 600 pixels in width and 400 pixels in height.

Images captured with my Canon 6D are 5472 x 3648 pixels. By the time you see them on Tuts+, they’re constrained in the layout to 850 pixels on the long side. Theoretically, I could upload the full image, but no matter what it’s going to appear at a maximum of 850 pixels.

This effect is exactly why I always resize my images to a web-friendly format. My viewers don’t have monitors that show every single pixel, so it only makes sense to resize the image and save them the load time.

Web Size Simulation

This simulation illustrates just how large an original 10 megapixel image is versus how it will appear on the web. The large image preview you see is scaled version of the full, 10 megapixel image I captured. In the inset, the size has been compared to how it appears on Tuts+. A full-width 10 megapixel image is over 4000 pixels in width, while it appears in Tuts+ articles at just 850 pixels on the long side. This is a great illustration of why resizing is so important.

What’s the correct dimensions for an image on the web? The answer is, “it depends on where it’s going.” If you’re using WordPress, check the documentation for your theme for the image widths supported. The developer determines how images will appear in a WordPress theme. If documentation isn’t available, try out a site like PiliApp to do your own measurements on an image on the site you’ll be publishing to.

High quality images use more disk space. The more detailed and colorful an image is, the larger the file will be. Although our image archive should include these full quality images, preparing an image for the web means making trade-offs between quality and file size. Giving up a bit of quality leads to a much faster load time for the viewer.

When exporting in Lightroom, you can use the Quality slider to adjust the output quality of an image. It’s a 0-100 scale, with a 0 quality image rendering the smallest file size. A 100 quality image maximizes both quality and file size.

Image quality comparison

This image quality comparison shows some subtle difference between the various quality settings. Some differences can be observed in the finer details, as well as the colors in the sky. Note that in the lowest quality image, there’s some “banding” in the sky (subtle lines) while the higher quality images. The 25 quality image gave me a 91kb image, while 100 quality image was a 366kb image. It’s all about finding the balance of quality and file size.

One of my favorite ways to control file size is to use the “Limit File Size To” option. I frequently use this option when I’m exporting images to publish on Tuts+, given that Tuts+ has a limit of 150 kilobytes for images in articles.

Using the “Limit File Size To” option bypasses the quality slider altogether. Instead of choosing a quality between 0 and 100, you can simply set a maximum file size (in kilobytes) and Lightroom will choose a quality setting for you.

Limit File Size screenshot

The “Limit File Size To” box can be used instead of the quality slider. When you check the box in the export window, choose the maximum file size for your image and Lightroom will make it work.

From my experience, when using the quality slider for web images, I typically will leave the quality setting in the 60-75 range. This seems to be the sweet spot for file size and image quality. Increasing the slider far beyond that yields a much larger file without much visual difference.

If you want to learn more about the keys to resizing images for the web, check out my write-up from last year, How to Export JPGs for the Web from Adobe Photoshop Lightroom. While the focus of this tutorial is the metadata for SEO, image size is still an essential part of being search-friendly.

Recap & Keep Learning

In this tutorial, we’ve covered how to pick the low-hanging fruit for exporting images from Lightroom to a WordPress website. Make no mistake; this won’t instantly shoot your site to the top of Google for common terms, but it will go a long way in helping someone find your images.

It’s worth noting that there are several WordPress plugins, or add-on’s, that can automate this process. However, plugins that aren’t frequently updated can open your site to security vulnerabilities. You also have to count on a developer maintaining the plugin’s compatibility with new versions of WordPress. Two popular plugins include WP/LR Sync and LR/Blog.

If you want to learn more about WordPress, the Tuts+ code section has a wealth of content for modifying and extending WordPress. The photo and video section also has some extensive coverage of Adobe Lightroom if you want to sharpen those skills.

Finally, SEO is an ever-changing area of research. Google constantly updates their algorithm used to find the pages that they think match the search query the best. There’s a ton of bad advice and “tips” for SEO out there. My go-to source for SEO is the Moz Blog. The geniuses at Smashing Magazine also have a great write-up on how to build an SEO optimized website.

What are you doing to get your images ready for the web? Let me know in the comments section.