Website Imagery: How to Choose Images That Work for Your Site

Pick the wrong photo and a page feels off, even when the copy reads well. Website imagery covers every photo, illustration, icon and graphic on your site, and the right imagery does four jobs at once: it supports your message, fits your brand, looks sharp on every screen and loads quickly. Choosing well means thinking about the source (custom photography, stock or illustration), how each image will be cropped and sized, and how it’s prepared for search engines and accessibility.

Supporting the content comes first, and a good image adds something the words can’t. But web images also need to scale to fit both mobile and desktop screens, carry enough resolution for 2x and 3x (retina) displays, and sometimes handle overlaid text. Our designers spend a lot of time sizing, cropping and adjusting images for the web. Below is where projects most often get hung up, and how to avoid it.

What makes good website imagery?

Good imagery earns its place. Every image should have a clear purpose, like showing the product in use, introducing the people behind the business, explaining a process or setting the mood for a section. Images added just to fill space make a page longer and slower without making it better.

• Relevant: it relates directly to the content next to it and to your audience.
• On brand: its color, lighting, composition and mood match your brand personality.
• Consistent: it looks like it belongs with the other images on the site, in style, cropping and treatment.
• Authentic: it feels specific to your business rather than generic.
• High quality and web-ready: sharp, well lit and prepared at the right size and format.

Consistency is easiest when the rules are written down. A photography and illustration section in your brand guidelines (subject matter, color treatment, crops, do’s and don’ts) keeps everyone choosing from the same playbook. We cover how to build one in the importance of digital style guides.

Stock photos vs. custom photography vs. illustration

If you already have imagery, let the design team know at the beginning of the project so they can start working on creative uses for it. If you don’t, these are the main ways to get it, and what each one trades off:

• Custom photography: unique to you and made for your exact layouts; costs the most and takes planning.
• Paid stock: high quality, affordable and fast, with good search filters; other sites may use the same image.
• Free stock: no cost and often beautiful; widely reused, with more time spent searching.
• Illustration and icons: highly ownable and great for abstract ideas; needs a skilled illustrator and a consistent style.

Hire a photographer

In 2017, we collaborated with Bravium Wines and Pittman & Brooks to shoot custom photography for their sites. If the budget allows, we recommend it. The imagery on your site will be unique to your business and shot for your site’s exact needs. You (or your designer) also avoid spending hours searching stock libraries for the right “non-stock” looking images. Share the wireframes or a shot list with the photographer so they can capture horizontal, vertical and wide versions with room for text.

Paid stock photography

Paid stock is good quality and affordable, and there are plenty of large libraries with different plans and pricing. A few of the stock sites we’ve had success with are iStock, Shutterstock and Getty Images. Most have good search filters, including orientation and color, which helps, because the search can take a while. To make stock feel less generic, choose images that match your brand colors, crop them deliberately and apply a consistent color treatment.

Free stock photography

For projects with tight budgets, there are many good free stock sites. One our designers have enjoyed using is Unsplash. It has excellent imagery, as do others, but because the photos are free, you’ll run into the same ones all over the web. You’re also likely to spend more time searching, since quality control and filtering aren’t as refined as on paid stock sites.

Illustration, icons and SVG graphics

Illustration works well for abstract services, software and processes that are hard to photograph, and a distinctive style is very hard for competitors to copy. Icons and simple illustrations are best delivered as SVG, which stays crisp at any size and usually weighs very little. Our guide to SVG vectors on the web explains when to use it.

Can I use AI-generated images on my website?

You can, with care. AI image tools are useful for concepts, backgrounds and mood boards, but check each tool’s terms for commercial use. Also know that copyright protection for purely AI-generated images is unsettled, so you may not be able to stop others from reusing them. Avoid AI images of real-looking people, products or places that could mislead visitors, and review every image for odd details before it goes live.

How to choose images of people

People connect with faces, which makes photos of people some of the most powerful images on a site, and the easiest to get wrong. Visitors can usually tell a posed stock model from a real customer or employee, so where you can, show your real team, clients and spaces.

• Reflect the real range of people you serve and employ in age, ethnicity, gender, body type and ability, without tokenism.
• Skip the clichés: handshakes, headset-wearing call center smiles and people laughing at salads.
• Prefer natural moments and real environments over studio-white backdrops.
• Get signed model releases for anyone identifiable in custom photos, and check that stock images of people are cleared for commercial use.

Image licensing: what you need to know

Finding an image on Google doesn’t mean you can use it. Every image on your site needs a license that covers how you’re using it, and unlicensed use can lead to takedown notices or demands for payment.

• Royalty-free: pay once (or by subscription) and use the image broadly under the license terms; most paid stock works this way.
• Rights-managed: priced and limited by use, duration and territory; more common for premium editorial imagery.
• Editorial use only: fine for news and commentary, not for marketing, ads or anything that implies endorsement.
• Free licenses: generous, but read them; some restrict selling the image itself or using recognizable people and trademarks.
• Custom photography: confirm in the contract who owns the images and where you can use them.

Keep a simple record of each image’s source, license and any releases. It saves a scramble if a claim ever arrives.

What size should website images be?

Provide images to your designer at the highest resolution available. As a rule of thumb, find out the pixel dimensions an image will be displayed at and supply one at least double that. This gives the designer creative elbow room to crop and adjust the image to fit your site, with enough resolution to stay sharp on 2x screens.

What gets published is different from what gets supplied. The site should serve several sizes of each image and let the browser pick the right one for the screen, using responsive images (srcset and sizes). That way a phone doesn’t download a desktop-sized hero. Most modern CMSs, including WordPress, generate these sizes automatically.

Image orientation and cropping

When choosing images, look at the wireframes to see how each image will be cropped and whether it will be presented horizontally, vertically or square. If an image will be horizontal, find a horizontal image, or at least one that can be cropped that way. If you’re sourcing stock photography, many sites have an orientation filter to refine your search.

Full-width images can be trickier, depending on how they scale. If the image scales proportionally, it’s cropped the same on every screen size. If there’s text over the image, the height is sometimes fixed (to keep the text from being squeezed), which crops the top and/or bottom of the image as the screen gets wider. In that case you need an image that still works when very short and very wide, with the subject near the center. Some layouts also allow a separate, taller crop for mobile.

Choosing images for text overlay

Overlaying text on an image is visually compelling, but it takes extra attention to balance the legibility of the text with the visibility of the image. The image often needs to be lightened or darkened to contrast with the text, which means it may not appear at full brightness. Images with some blur or less detail in one area work best, because that open space keeps the image from competing with the copy.

Check legibility at every screen size, since the crop changes what sits behind the words. For accessibility, W3C’s guidance calls for a contrast ratio of at least 4.5:1 for normal-size text, and the busiest part of the image is what counts.

Image SEO: file names, alt text, formats and speed

Images can bring in traffic from Google Images and help pages rank, but heavy images are also the most common reason pages load slowly. Google’s image SEO best practices cover the essentials.

Use descriptive file names

Rename files before uploading. willamette-valley-vineyard-harvest.jpg tells Google something; IMG_4821.jpg doesn’t. Use short, lowercase, hyphen-separated words, and make sure the file extension matches the actual format.

How do I write alt text?

Alt text describes an image for people using screen readers and for search engines. Describe what matters about the image in context, in a short sentence, without stuffing keywords or starting with “image of”. If an image is purely decorative, give it an empty alt attribute (alt=””) so screen readers skip it. W3C’s images tutorial walks through each case.

What is the best image format for websites?

Google Search supports BMP, GIF, JPEG, PNG, WebP, SVG and AVIF. In practice, the choice comes down to five (MDN’s image format guide goes deeper):

• WebP: the everyday default for photos and graphics, smaller than JPEG and PNG at similar quality, with transparency support.
• AVIF: often smaller still for photos, and supported by current major browsers; serve it with a WebP or JPEG fallback.
• JPEG: the universal fallback for photographs.
• PNG: for screenshots and graphics that need lossless quality or transparency, when WebP isn’t an option.
• SVG: for logos, icons and simple illustrations that must stay sharp at any size.

Compress and lazy-load

Compress every image before it goes live. Most photos can lose a large share of their file size with no visible difference. Use native lazy loading (loading=”lazy”) for images further down the page, but don’t lazy-load the main hero image, since it’s usually the largest element visitors wait for. Setting width and height on images also stops the layout from jumping as they load. For the bigger picture, see the process of site performance.

Making website imagery accessible

Accessible imagery helps everyone, including people with low vision, people on slow connections and search engines. Beyond alt text and contrast, a few habits go a long way:

• Don’t put important text inside images. Screen readers can’t read it, and it can’t be translated or resized. Use real HTML text over the image instead.
• Don’t rely on color alone to convey meaning in charts and diagrams.
• Give complex images like infographics a text summary nearby.
• Avoid auto-playing motion in background images and video, or let visitors pause it.

Our post on why web accessibility matters covers the wider picture.

Website imagery checklist

• Does every image have a clear purpose on the page?
• Does it fit the brand and match the style of the other images?
• Does it fit the orientation and crop in the wireframes, on desktop and mobile?
• Is the source file at least twice the display size?
• Is any overlaid text legible at every screen size?
• Is it licensed for this use, with releases for identifiable people?
• Does it have a descriptive file name and meaningful (or empty, if decorative) alt text?
• Is it compressed, in WebP, AVIF or SVG where possible, and served in responsive sizes?
• Is it lazy-loaded if it sits below the fold?

Screens and formats keep changing, so the considerations when selecting imagery will keep changing too. When in doubt, ask your designer or design team. Image direction is a core part of our design services.

Choose each image for a reason, make sure it fits the brand, crop it for every screen and prepare it to load fast and read well for every visitor. Get those right and your images will work as hard as your words.