Optimizing Image Size, Quality, and Quantity for Websites

by [email protected] on Sep 14, 2021

Whether you’re a photographer or web designer, choosing the perfect image resolution, size, quality, and quantity can be tricky when placing photos on the page. Websites are more visually focused than ever, and getting any of these aspects wrong can leave viewers with a poor impression. Fortunately, you can use several great tools to make sure that the images you pick look their best and leave viewers with a great experience across any device.

In this guide, we’ll be taking a look at a number of factors that go into choosing the optimal image count and quantity for a website, including factors like:

Throughout this guide, we’ll be looking at the use case of a gallery of images for photographers. Still, fortunately, this advice will apply to almost any application of images on websites, as the optimal viewer experience is the same regardless of whether it’s a wedding photo or product photo. If you’re already receiving these finished images from a source like another photographer or studio, don’t be afraid to ask for these specifications. They’ll often be working with a source image, like a raw file, and can therefore produce the best-finished version. If you already have a resized JPEG, for instance, don’t worry. Instead, you can still take a number of these actions and get great results.

How Many Images Should I Put in a Gallery?

The number of images you should put in a gallery varies based on what you’re shooting and the type of business you operate. A gallery for a high-end watch photographer might look a lot smaller than the gallery of a lifestyle portrait photographer, who needs to encompass a variety of clients and looks. With that in mind, I’d avoid stretching one gallery much beyond 20 images. Few viewers are going to scroll through 100 images, and overloading a gallery is just going to increase page loading times, regardless of how well optimized the images are (an important point we’ll discuss later in this section).

At 10 to 20 images per gallery, I believe you can cover an ample range of work, provided you keep a bit of focus. If you photograph multiple styles or niches, consider having one overall gallery and a few sub-galleries to cater to those different niches. Not only does this let you focus on the individual galleries better, but it also provides more content for your viewers to explore.

Of course, for client delivery galleries, don’t worry about these factors. There, you’re free to present as many photos as you wish. The idea behind a more constrained exhibition gallery is only to highlight your five-star photos, the ones that make a WOW impression. By reducing the clutter from just 3-star photos, you can produce a stronger reaction from the viewer.

All the following sections will focus more on the technical aspects of exporting an image efficiently. A well-designed output file will be large enough to show viewers the great image quality you strived for while still quickly loading. Importantly, it’ll be compatible with a wide range of devices and not take up too much space on your website. Those aspects make the experience better for the viewer, but did you know that they can also directly impact your business? Google’s search ranking algorithm, which they use to determine whether you’re the first result for “LA wedding photographer” or stuck on page 8, places a lot of importance on how well your site loads.

I’m sure you’ve felt the pain of clicking on a site just to wait for ages for the content to load. Google’s metrics try to track these things, using terms like “First Contentful Paint” and “Largest Contentful Paint.” As you might guess from those terms, SEO or the art of optimizing for those Google metrics is a science and art all on its own. Fortunately, you don’t have to be an SEO ninja to create a well-performing site. You can test how your page performs with Google’s tool, available at web.dev/measure. From that report, you can see how Google’s algorithm might view your site in terms of performance.

As images can make or break your site’s performance on those metrics, getting an intelligent setup for exporting images and placing them on your page can make a big difference. It’s also one of the easiest ways, in my opinion, to optimize your site. Just a few smart choices in saving the image can make a massive difference, and as we’ll see at the end, several tools can make it almost automated, all at a reasonable cost.

How Big Should Each Image Be?

One of the most fundamental choices when saving an image for the web is to ask, “How big should it be?” A few years ago, web-sized images might be 1024 pixels long. These days, that size probably won’t cut it for a significant image on many devices, like 4K monitors, Retina iPads, or even some big phone screens. As a result, the temptation is to export a significantly larger image, perhaps 4000 pixels long. Unfortunately, there’s still a number of those legacy devices out there that won’t deal with that size well. Furthermore, that could mean significant load times on mobile devices and in applications where that full resolution isn’t needed, like the thumbnails of a gallery.

One of the best options is to use a dynamically sized image when possible with those factors in mind. While this feature may go by a few names, the core concept is simple: give the server a large, original version of the image at the time of upload. Then, the server can prepare several smaller sizes of the image, showing a slightly smaller version to a laptop, and a significantly smaller version to a phone, for instance. This gives you the best of both worlds, including a large image when possible and a small image when necessary.

If your service, website, or application doesn’t support this setup, all isn’t lost. Instead, consider looking at where you’re using an image, what your clients may be like, and what your use case is. If you’re using the image as the centerpiece of your landing page, it might be worth making sure that it’s as sharp and impressive as possible and might be viewed at 3000 pixels wide in the “worst-case.” For a small image used to illustrate a point in a blog post, you might be able to get away with 850 pixels wide. If you use something like Google Analytics to track your website’s statistics, you can look at the data to better understand what devices your users are viewing your site with.

If you have to pick a single value for most purposes, I believe 2000 pixels long is a good compromise for image sizes for a website. It may be a bit big for the oldest devices and slowest connections, but for most applications, it’s sharp enough and large enough to work. As devices get faster and resolution requirements to change, this might become as outdated as the 1024px web size of yesteryear, but I believe this will be good for at least another few years.

How Does DPI Affect the Image?

The secret to saving images for website use is that DPI doesn’t affect the image at all. Photoshop’s Save for Web feature even goes so far as to discard DPI information entirely. While this makes things very easy when saving an image online, it’s something to remember when using those same images for printing.

Keep in mind that many programs will default an image to 72 DPI when that information isn’t present. If you use a gallery service that provides prints to clients, both DPI and resolution are essential factors to keep in mind when uploading, assuming the service uses those gallery images to create the prints directly.

If that’s the case, consider uploading your originals and serving the clients a resized version of that image.

What Color Space Should I Use Online?

Things are also pretty simple when it comes to color space, at least right now. Color space, and the color science behind images, can get very messy, but for 99% of applications online, sRGB is the appropriate choice for an online image. sRGB is the color space equivalent of the JPEG file type, being understood and handled well by almost every device out there. Like AdobeRGB or DCI-P3, alternative color spaces offer niche features to high-performance use cases but aren’t well supported across web browsers and devices. Choosing the wrong color space, as in one not supported by a viewer’s device, can result in colors appearing garish or just plain wrong. Going with sRGB instead of a broader color space, on the other hand, won’t degrade the viewer’s experience, making it a much safer choice.

Just like resolution, this point may change in the future, with devices and browsers increasingly supporting wider color spaces, including monitors that can benefit from a wider color gamut.

That point isn’t here yet for the vast majority of users, and these devices gracefully handle sRGB files when present.

What Can Compression Tools Make Easier?

It’s not just enough to choose the proper resolution and color space for your image – for a compressed format like JPEG, you also have to make the right choice in terms of compression factor. The compression factor, often represented by something like a “Quality slider,” represents the key compromise in a compressed file. This compromise, the tradeoff between final file size and subjective viewing quality, can make the difference between an image looking fantastic or terrible.

If you’re using a program like Lightroom or Photoshop, there’s a quick rule of thumb that about 80%, or roughly 10/12 on Photoshop’s scale, is virtually indistinguishable from the uncompressed image. That means you can shrink a file to nearly half the size of a “maximum quality” JPEG without any visual degradation.

In some cases, this setting can still produce slight banding in the sky, but this is very rare. Values lower than this can produce even more savings in file size but will eat into your image quality. This makes choosing the resolution and compression a bit of a balancing act, as for some applications, a compressed but larger image may be better than an uncompressed but small image. Typically, you can get a lot more file size savings by compressing harder than shrinking the resolution to the same extent.

The advantage of compression over resolution changes is even more apparent when you consider the power of dedicated compression tools.

Speed Up Your Website with Envira Gallery’s Compression Tool

The Compression Tool directly inside Envira Gallery lets you to optimize your images and reduce their file sizes.

The image compression tool is available for users with any paid Envira Gallery subscription (Pro tier or higher).

If you’re using Envira Gallery Lite, head over to our documentation to learn more about upgrading your Envira Gallery license.

If you’ve already upgraded, you’ll just need to update the Envira Gallery plugin before you can begin compressing your images.

Learn how to set up the new Compression Tool inside Envira Gallery so that you can speed up your website and page loading times.

Last but not least, ShortPixel, Imagify, and Smush are WordPress plugins dedicated to optimizing and compressing your images to make them visually identical to the uncompressed file while still saving a ton of space. JPEGMini offers a similar tool for desktop use, available as a standalone app or plugin for Photoshop, Lightroom, and Capture one.

JPEGMini lets you set multiple export presets, and makes it as easy as dragging and dropping your files onto it, all while producing considerable savings in space at a visually equivalent level of quality.

Whether you’re setting the dials manually in Photoshop or using a great automated compression tool, don’t ignore the enormous impact compression can have on both performance and visual quality. If you’ve got all the preceding settings right, you still have to find the right level of compression for your image and application.

In conclusion, by just learning a few things about how your viewers might work, as well as how Google views your webpages, you can produce visually stunning images that’ll fill a gallery page, all while keeping your website working quickly and smoothly. Take a few minutes during your next export to double-check your settings, and you might be amazed at what you can produce.