This topic is definitely one of the most often asked about in our Facebook Group. With good reason, photographers need to know how to properly save, size, compress, and optimize their image metadata for their websites. We have a podcast episode that dives into this topic, if you’d like to listen as well.
Saving Your Images (Exporting from Lr, etc)
The first step in the optimization process starts when you create the image file. We’ll be discussing most of these variables in more detail later in this guide, but we should mention the typical export settings first.
The typical workflow will likely involve renaming the images on export. If exporting a set of images, the filename will usually be the main topic of the page/post the images will be embedded on.
You’ll then need to set the export size (pixel dimensions). In most situations, a long-edge or max-width around ~1500-2500px will work great.
Then, you’ll decide on quality/compression. If you’re using another tool for final web compression, you should test how the tool handles different quality original files. I’ve found full or high quality images to compress better than lower quality images.
Lightroom quality ~70 is fine for final web use if you don’t have another compression tool. Quality ~90-100 works great as the first step for my compression tool of choice, Shortpixel.
Other Filetypes ( WEBP, AVIF, ETC)
Google recommends that webmasters use next-generation image formats. These formats provide similar quality to jpeg, at smaller file sizes. Depending on your website platform, this can either be easy to implement (a WordPress Plugin) or near impossible without the platform changing what image files they allow.
In my testing, the file size difference was not always significant, when compared to a properly compressed jpeg. I would only use these new filetypes if you are chasing the absolute edge of performance and understand the trade-offs in comparison to jpegs in the web ecosystem (and if they prove to actually create smaller file sizes!).
Image Pixel Dimensions and Resolution
One common issue that we see on photographers’ websites, is image files that are much larger than they need to be for how they’re displayed on the page. In the worst cases, we see full resolution images from the camera that are simply resized via CSS to fit the web design. These are often many megabytes each.
In this section, we’ll show how to find out the image size for your web platform and size your images accordingly.
Finding the Dimensions for Your Site
Let’s quickly go over the steps to finding the correct image sizes for your website. If you’re on Squarespace, just upload 2500px wide images.
1. In Google Analytics, go to the Audience section, then Technology, Browser & OS, and select the Screen Resolution Primary dimension.
This will tell you the most popular screen resolutions. I selected the three most popular for desktop and mobile. It is key to understand how your website will handle these screen resolutions.
2. Use this Chrome Extension, Page Ruler Redux, to quickly see the image size being used on the page.
Alternatively, you can hit f12 in Chrome based browsers and use your browser’s developer tools to see any element size.
Retina / 2x Images
If you’re testing from a retina device, you will see image file sizes that are potentially double that of regular screens. This can be a somewhat technical topic, but you can read more about enabling 2x images inside responsive srcset here: https://wpmudev.com/blog/make-images-retina-ready/
One important point to remember is that screen sizes and resolutions tend to grow over time. It’s best to future proof your site by uploading large image file sizes and then use properly sized srcset thumbnails for today’s usage. You can always change those thumbnail sizes in the future and regenerate the new thumbnail sizes.
Compressing Your Images
One of the most important optimizations you can make is to properly compress your image files so they download quickly. If you’re on WordPress, the Short Pixel plugin makes this simple. It can go through your entire media library and re-compress all of your images properly. (We recommend testing, but that the Glossy setting is typically our favorite.) They also have a web based tool for use on other website platforms.
We have a full post on image compression here: https://www.fuelyourphotos.com/reduce-picture-file-size/
Image Metadata Optimization
This is one of the most popular questions that we see in our Facebook Group. Our biggest recommendation is to not spend too much time and effort on this, but to concentrate your optimizations to your home page and most popular pages/posts.
It’s also a great idea to setup the proper workflow to easily optimize your image metadata going forward.
In our experience, these tasks can be extremely time consuming and not lead to business changing results in most cases. We’d much rather you spent that valuable time working on content for your site.
Simply set a descriptive filename for the main topic you’re targeting on the page/post. You can pick a few images to create custom file names that match secondary terms, but I wouldn’t recommend crafting unique filenames for every image on your site.
On my homepage, it’s great to have: portland-wedding-photographer.jpg, portland-wedding-photographer-2.jpg, oregon-wedding.jpg, etc
In our testing, we’ve seen keyword usage in alt text to correlate with better image search rankings.. but you should keep in mind the purpose of ALT text is accessibility. Here is our post specifically on ALT Text w/ examples.
You should follow accessibility best practices and make sure to include alt text on any images that add context to your content or is needed to navigate and understand your site.
Make sure to use short and descriptive text that gives context to the contents of the image. Don’t add “photo of” or “image containing” to the start.
Writing unique alt text for hundreds of images in a wedding blog post is not recommended for many reasons.
- It isn’t a best practice for accessibility, that would typically be an overwhelming number of images for most users. It’s okay to leave redundant image alt text tags blank.
- It’s not the best use of your valuable time. Image traffic for photography sites is typically quite low in comparison to web traffic.
- Google will typically only rank a small number of images from your site for a certain topic.
- There are much stronger ranking factors, like the content surrounding the image, that will dictate an images ranking.
Note, if you’re on Showit, there are a few details about adding alt text mentioned in our SEO guide here: https://www.fuelyourphotos.com/showit-seo-guide/
There are other factors that can theoretically be optimized, like your images exif data, geocoordinates, caption, etc. We don’t typically recommend taking the time to pursue these, as we’ve not seen worthwhile results from those efforts.
Image Display and Rendering on your Site
It’s important that your site properly displays images. Many of these issues are going to optimize the performance and user experience for the potential clients interacting with your site and its images.
Modern lazy loading is great and understanding what content is visible to the user and loading the next images in the background so they’re showing on the screen just before they enter the browser’s viewport. Most browsers even have lazy loading built in, using the new load attribute.
Most platforms, performance plugins, or themes will offer lazy loading for images as an option to enable sitewide.
Including Image Dimensions
Your platform/theme should include the dimensions for images used on the page. This fixes any content layout shifts as the browser renders the page and images download simultaneously.
Preloading Hero Images
This can get more technical, as most platforms do not offer this option out of the box. If you have the skillset or have hired a developer to help with your site, you should test preloading the hero image on your pages. This can significantly improve performance in key performance metrics, like First Contentful Paint.
Here is Google’s dev guide on preloading responsive images: https://web.dev/preload-responsive-images/
Hosting on CDN
Many performance audits will recommend hosting your images on a CDN. We’ve found those to not always improve performance of your website. It can add additional complexity and create issues that can be tricky for most to troubleshoot.
Unless you have a truly international audience and significant technical background, it’s often best to just host your images on your single server.
Responsive Images with Resolution Switching
We mentioned Retina images before. If you want to take responsive images to the next level, you can specify larger resolution versions of your images to be used for high resolution displays. Here are the technical details. There are WordPress plugins that make this quite simple to implement: https://wordpress.org/plugins/wp-retina-2x/