Websites for Photographers: Image Sizes

Published on 2021-03-12

Despite spending a lot of time recently sharing photos I've taken of pets, by profession I'm a Frontend web developer where I also strive to constantly learn and improve. In the various photography forums, there are frequently requests for constructive criticism about websites and often the advice includes things like:

  • Add a call to action
  • Add more photos of your work
  • Improve the website's copy

And while these are all good pieces of advice for improving SEO and customer action, there are some other points that I see called out less often that matter as much or more. I want to cover a few of these, the first I want to address what I think is the hardest for photographers to hear - using smaller image file sizes.

The Photographer's Dilemma

As photographers, we love huge files with lots of data so we can show off images in their most crisp form.

As consumers of the web, there's nothing we love more than fast loading websites. (And starting in May 2021 Google is going to rank websites based on performance - it's not just about SEO anymore)

These two things are at odds with each other - large files lead to slow load times lead to users leaving your website before it even loads! This is why sites like Facebook, Twitter, and Instagram compress our beautiful images sometimes destroying them in the process (something I'm sure every photographer will run into at some point). Additionally, you don't want an end user on mobile to be downloading a bunch of huge files and possibly destroying their data plan for the month!

So what is a photographer to do?

Option 1: AVIF Files

This option will most likely only be available if you're using a custom website

If you want to optimize your images in both quality and performance you'll want to look into AVIF files - they provide the least quality loss and some of the best image size savings.

Sounds too good to be true? That's because as of the time of writing it's still being fine tuned and added to browsers, so you need to add a fallback for users that can't view AVIF images. This also means you'll most likely only be able to use this option if you're using a custom website instead of a website builder like Wix, Wordpress, Squarespace, or any of the other platforms out there.

Click here to learn more about AVIF files and fallback options

Option 2: Progressive Images

This option will most likely only be available if you're using a custom website

Another way that you can improve your performance metrics without compromising image quality is to load images in a progressive format where it initially loads with very low quality, then loads in medium quality, then loads the full quality image.

This is a good way to help prevent content from "jumping" if you were to load everything except the images, then load the images into the page - an experience that can be off-putting to users (and Google's metrics).

Option 3: Use lower quality images

I know, I know - this seems super obvious, but let's look at how to use lower image quality without losing too much of your beautiful image.

Introducing Squoosh! A web app from Google to compare how an image will look once compressed before compressing the file.

If you decide that you can't live with your images losing any quality, you can still decrease your file size a bit by converting the file type to something more web friendly like webp and use Squoosh's lossless compression to remove excess metadata.

Consider this

Moving forward, Google has shown that it is putting an emphasis on web performance. That doesn't mean that you should compromise your image quality just to rank in search though. All of this is about balancing tradeoffs to optimize between clients visiting (and staying on) your website and client's seeing your work and wanting to get in touch.

One way you could balance this is to include minimal images on your home, about, and contact pages while including more high quality images on a gallery page - the assumption being that anyone clicking on the gallery page will be willing to wait a beat longer for the page to load (You should still ensure this page doesn't take too long to load or send too much data to the user).

Additional Resources