Image optimization probably isn’t the first thing on your mind when you’re ready to share a fresh batch of photos. Those of us who just want to focus on making the very best images possible sometimes find things like website design and SEO to be a frustrating distraction, but they’re a vital part of today’s world.

An optimized website is one of the easiest ways to convert potential clients into repeat customers and frankly, the whole process is a lot easier to pick up than I expected. Think of it this way: you probably found the exposure triangle intimidating at first, right? Did you feel a little flutter in your stomach the first time you made the switch to manual for a paid shoot? This is just like that.

In this post I’ll be covering some of the most important reasons you should consider image optimization for the web before uploading a photo to your site, and how to get started doing exactly that. Don’t worry if this is new territory to you! We’ll get there together. 

 

What is Image Optimization for the Web and How Will It Help Me?

To optimize something means to make it the best version it can be. Isn’t that what we all want for our photography? To show it off to its very best advantage whenever possible? But here’s the thing: good optimization isn’t necessarily something that will stand out to your customers.

Done correctly, it will seem effortless. Site visitors will be free to concentrate on making contact with you and booking your services. Poor image optimization, however, sticks out like a sore thumb. 

It seems like common sense that you’d want to upload the highest resolution you have of your work to your webpage, so that clients get the best impression of your skills. Unfortunately, ultra high resolution files tend to be HUGE. They take time to load, and when they do load they’re sometimes unwieldy to place.

That’s a problem, because guess what? About 47% of your clients will come to your page expecting it to load in two seconds or less. 40% of them may even give up and move on to another site after three seconds of load time. Not good for business.

About 47% of your clients will come to your page expecting it to load in two seconds or less. 40% of them may even give up and move on to another site after three seconds of load time.

Neil Patel

That’s the thing you have to understand about image optimization: it’s a trade-off. It’s important to showcase images of great quality, but you also don’t want potential clients to fly the coop before they even get a chance to see those images. So let’s talk about how to find the right balance.

 

Finding the Right Dimensions

Start by opening your image in the editing software of your choice (I recommend Photoshop for this exercise) and view the image at 100%. You might be surprised! If you aren’t usually one to look at the dimensions of your photography, you might not have a true idea of its size.

For those of us who shoot and edit in the highest quality settings available to us, our images tend to end up a lot larger than we’d realistically ever need them to be. It only takes a few of those to significantly slow down a website, especially if your client is viewing it with a not-so-great connection.

Don’t worry, you don’t have to let go of all those nice, safe pixels forever. Just save a separate, optimized version to use on the web. We’ll talk about saving for web in a bit, but first I have a quick checklist for you to refer back to as you’re determining the right size and location for a particular image:

1. Think about where this image will appear on your site. Is it a hero image that will show up front and center the second your site loads, or is it one of many in your portfolio, a couple of pages deep?
2. Look at any info offered by your site host or theme creator. They may have suggestions for optimal image sizing.
3. Remember that when choosing images for a slideshow, maintaining close sizing gives a more pleasing, uniform flow. 
4. Try to stay at 300dpi. Although the effectiveness of this technically depends on how many total pixels you’re looking at, it’s a good rule of thumb. 
5. Consider trying A/B testing for different “high roller” images on your site (like banner images) to see which ones perform better. 

 

Finding the Right File Type

An important factor in your optimization is the file type you choose. File types are a never-ending conversation for photographers. We shoot in RAW, we save our backups as TIFFs or PSDs, and we usually hand images to customers in the form of a JPG.

All those acronyms can make your head spin if you don’t have a good idea of what they do. I recommend a high quality JPG for most web images, but there are some situations where you might want to use a PNG. And of course, your host or theme might only allow certain types. Here’s a chart with the basic file types you’ll need to know for image optimization:

Saving for Web

To get the most out of your optimization, you’ll want to save specifically for the web. As an Adobe user, I’ve developed a workflow for both Photoshop and Lightroom, but you can use some variation of what I’ll be showing you with most image editors. 

If you are a regular Photoshop user, you’re probably familiar with the Save As option, but under File > Export there’s a legacy option called Save for Web. When you click Save for Web (Legacy) a large dialogue box will open with some really helpful settings and the option to view different versions of your image. I’ve found that this option is really good for eliminating those pesky color casts that sometimes happen out of the blue when you save to JPG. 

Here’s what it will look like when you optimize images from Lightroom.

There’s really no saving in Lightroom. The edits you make there work in a slightly different way (but we won’t get into that here). Fortunately, Lightroom’s Export menu is very comprehensive. One feature I really recommend is the Limit File Size To option. If you’re working to a specific set of requirements for your page, this option will keep your file from going over while allowing you to choose the highest quality possible.

You can also use the Resize to Fit field (under Image Sizing) if you want your image to fit in certain dimensions. Lastly, if you need to shave off even more, try going into the Metadata section and remove information from the file that you don’t really need going forward.

Always remember two things when saving an image:

1. Keep an eye on your color space. Don’t change it unless you have a particular reason for doing so (but if you do, sRGB will probably be your safest bet on most screens).
2. Particularly if you’re saving to a JPG format, always sneak in a little bit of output sharpening. Compression is not a friend to sharpness! It’s good practice to add that extra pop of sharpening at the very end of an edit to accommodate what you will probably lose.

 

Other Things to Consider

Some photographers choose to go with an app that will perform smart compression on their images. These apps reduce your file size by eliminating unnecessary data (think geolocation). This way you’re sacrificing less in the actual quality of your image. If you have backups (which you really should) there’s no reason to have that information on your web version, anyway.

One way to optimize your site as a whole is to curate the images you show there. The more photography there is on your site, the more there is to load and the longer it will take. Show a good variety of your best work, but go through regularly to eliminate images that are outdated or redundant. If you want to learn more about how to create a portfolio, check out this blog post.

 

---

 

I don’t think anyone here is going to argue with me that photography is an art form. It attracts creatives and dreamers from all walks of life. I love that about it! But it’s also a very technical art form. Mastering it in the digital age requires a lot of technological know-how. 

Optimization will not only give you a bump in speed, it will help you get that “Wow” reaction from clients when they see your very best work, looking and loading at its very best. Go take a look at your site! Don’t be afraid to ask yourself what needs to be done…because now you know how to do it!

Make sure to sign up for my newsletter so you don’t miss any blog posts! I also share business tips and inspiration for your photo business that you won’t find anywhere else on Frenchly.