Originally published in 2021. Substantially updated on
to reflect current image formats, performance practices, accessibility guidance, and AI-generated imagery.
You might think choosing images for a website is a fairly simple process.
Find a photograph that looks good, upload it, and move on to the next page.
But website images have more jobs than people sometimes realize. They help visitors understand what your company does. They shape the way people perceive your brand. They can build trust, explain an idea, and make a page easier to follow.
They can also slow down your website, create accessibility problems, or expose your business to licensing concerns when they are not handled correctly.
So how do you choose the right images and prepare them for the web?
Let’s take a closer look.
Start With What the Image Needs to Do
Before discussing file formats, compression, or image dimensions, think about the purpose of the image.
Is it showing an actual product?
Is it introducing members of your team?
Is it helping visitors visualize a service?
Is it explaining a technical process that would be difficult to describe with words alone?
Or is it simply there to add atmosphere to the page?
These are different assignments, and they do not necessarily call for the same kind of image.
For example, original photography may be the best choice for a company’s team page because visitors want to see the real people behind the business. A custom diagram may work better for explaining a complicated service. A carefully selected stock photograph might be perfectly suitable for supporting a general blog topic.
The important thing is to avoid choosing an image merely because it fills an empty space.
A picture can be attractive and still be wrong for the page.
Where Should Your Website Images Come From?
Businesses now have more image sources available than ever before.
You can arrange original photography, commission custom illustrations, purchase licensed stock images, use certain Creative Commons materials, create diagrams, capture screenshots, or generate conceptual images with artificial intelligence.
Each option has strengths and limitations.
Original Photography
Original photography gives your company something that stock libraries cannot provide: your actual people, products, offices, equipment, and work.
This can be especially valuable for service businesses.
Let’s say two contractors have websites with similar service descriptions. One uses generic photographs of anonymous workers. The other shows its actual team completing projects in recognizable locations.
Which business feels more established and credible?
Original photography requires planning and an initial investment, but the resulting images can often be reused across the website, social media, advertising, brochures, presentations, and other marketing materials.
Licensed Stock Photography
Stock photography can be practical when original photography is not available or when the subject is conceptual.
The key word here is licensed.
Buying or downloading an image does not automatically give a business unlimited rights to use it in every context. Licenses may restrict modification, resale, commercial use, distribution, or the number of people who can access the original file.
Creative Commons images also require attention. Some licenses permit commercial use, while others do not. Many require attribution, and certain licenses restrict editing or require adapted work to be shared under similar terms. You can review the different options on the Creative Commons license information page.
So yes, there are free and low-cost images available. But “free to download” and “appropriate for commercial use” are not necessarily the same thing.
Keep records of the source, creator, license, purchase receipt, and any required attribution.
That small administrative step can prevent a much larger problem later.
Raster and Vector Images Are Different, Not Better or Worse
This is an area where people sometimes get confused.
Raster images are made from pixels. JPEG, PNG, WebP, AVIF, and TIFF are common raster formats.
Photographs are normally raster images, and that is exactly what they should be. A photograph does not need to be converted into a vector file before it can be used in a professional website or design project.
Vector images are built from mathematically defined shapes and paths. SVG, EPS, and AI files are common examples.
Vector files are particularly useful for:
- Logos
- Icons
- Simple diagrams
- Line drawings
- Geometric illustrations
Because the shapes are calculated rather than stored as a fixed grid of pixels, vector graphics can be enlarged without becoming blurry.
Think of it this way: a company logo may need to appear on a small mobile screen, a business card, a trade show banner, and the side of a building. A vector version makes that possible.
A photograph, on the other hand, contains complex color and texture information. Raster formats are the appropriate tool for that job.
Which Image Format Should You Use?
There is no single best image format for every situation.
The right choice depends on the image and how it will be used.
JPEG
JPEG remains a practical format for photographs. It offers broad compatibility and can produce relatively small files when properly compressed.
The main limitation is that JPEG uses lossy compression. Some image data is discarded to reduce the file size. At reasonable quality settings, that may be difficult to notice. Compress the image too aggressively, however, and you may begin to see blocky edges, color distortion, or blurry details.
WebP
WebP supports both lossy and lossless compression, along with transparency. It is widely supported by modern browsers and often produces smaller files than comparable JPEG or PNG images.
For many websites, WebP is a strong general-purpose delivery format.
AVIF
AVIF can produce excellent image quality at very small file sizes. It supports transparency and works particularly well for many photographic images.
It can require more processing time and may not always be the most convenient format during editing. But it is increasingly useful for final website delivery.
WebP and AVIF generally offer better compression than older raster formats, while JPEG and PNG remain useful as fallbacks or for particular workflows. For a technical comparison, see Choose the Right Image Format from web.dev.
PNG
PNG is useful when you need transparency, crisp interface graphics, or lossless image quality.
However, PNG photographs can become unnecessarily large. A format that technically works is not always the most efficient choice.
SVG
SVG is usually the preferred website format for logos, icons, and relatively simple vector illustrations.
Because SVG files are code-based, they should come from a trusted source and be handled securely. They also need appropriate accessibility treatment when they communicate information.
TIFF
TIFF is commonly used as a high-quality master or production format in photography and print workflows.
It is not normally the format you would publish directly on a website.
That does not make the original TIFF useless. It can serve as the high-quality source from which properly sized website images are created.
Image Dimensions Matter as Much as the Format
Imagine uploading a 6,000-pixel-wide photograph to display it in a 700-pixel-wide area.
The browser may visually shrink it, but that does not necessarily mean the original download has become small or efficient.
This is one of the reasons website image workflows should include resizing and compression.
The goal is not to reduce quality until an image looks bad. It is to remove unnecessary data while preserving enough detail for the image’s actual display size.
Responsive image techniques can also provide the browser with several versions of an image. The browser then chooses an appropriate file based on factors such as the visitor’s screen size and display density.
Google recommends using standard HTML image elements and supports responsive techniques using attributes such as srcset and the <picture> element. You can learn more in Google’s image SEO best practices.
Image dimensions should also be declared in the page markup so that the browser can reserve the proper space before the file finishes loading. This helps reduce the distracting page movement that occurs when images suddenly push text and other content downward.
Images farther down a page can often be lazy-loaded so that they are not downloaded until the visitor approaches them. But the main hero image visible when the page first opens should normally load immediately rather than being delayed. Web.dev provides additional guidance in Browser-Level Image Lazy Loading.
Do Not Forget Accessibility
Alt text is not simply a place to insert an SEO keyword.
It provides a text alternative for people who cannot see the image or who use assistive technology.
Good alt text describes the purpose or useful meaning of the image in its page context.
For example:
Web designer reviewing responsive versions of a business website on desktop, tablet, and mobile screens.
That may be appropriate when the image supports a discussion of responsive design.
But suppose the same image is used only as a decorative background behind a heading, and the surrounding text already communicates everything important. In that case, repeating the description through a screen reader may add unnecessary noise.
Informative images generally need meaningful text alternatives. Purely decorative images should usually use an empty alt attribute, written as alt="", so assistive technology can ignore them.
The context determines the correct treatment. The W3C Web Accessibility Initiative Images Tutorial provides practical guidance for informative, decorative, functional, and complex images.
Images Can Also Support Search Visibility
Search engines use information from the image and the surrounding page to understand what the image represents.
That includes:
- The filename
- Alt text
- Captions
- Nearby headings and paragraphs
- The overall page topic
- Structured data and social metadata
A filename such as commercial-roof-inspection-fairfax-va.webp gives more useful context than IMG_8472.webp.
That does not mean every filename and alt attribute should be stuffed with keywords. It means they should be understandable and relevant.
Google recommends descriptive filenames, useful contextual alt text, relevant surrounding content, and standard <img> elements for images that should be discovered and indexed. Images used only as CSS backgrounds are not indexed in the same way.
What About AI-Generated Images?
AI-generated images have changed the conversation considerably.
A business can now create a customized conceptual illustration without searching through hundreds of stock images and finding the same photograph that appears on several competitors’ websites.
This can be useful for:
- Abstract technology topics
- Blog illustrations
- Marketing concepts
- Hypothetical business scenarios
- Visual metaphors
- Scenes that would be difficult or expensive to photograph
But AI-generated does not mean ready to publish.
Look closely at people, hands, signs, interfaces, architecture, reflections, and background objects. A strong composition can still contain an extra finger, a twisted leg, nonsensical lettering, or a piece of equipment that could not function in real life.
The image also needs to fit the company’s brand. Generating a different visual style for every article can make the website feel inconsistent, even when the individual images look impressive.
There are legal considerations as well. The U.S. Copyright Office has stated that AI-assisted work may qualify for copyright protection when sufficient human-authored expression is involved, but prompts alone do not automatically establish copyright in purely generated output. The Copyright Office maintains current reports and guidance on its Copyright and Artificial Intelligence resource page.
This is an evolving area, so businesses should keep records of the tools, source materials, edits, and human creative work involved.
AI imagery is another tool. It does not eliminate the need for review, judgment, and design expertise.
Create a Repeatable Image Workflow
The easiest way to avoid image problems is to establish a process before dozens or hundreds of files accumulate.
A practical workflow might look like this:
- Identify what the image needs to communicate.
- Confirm that the organization has the right to use it.
- Keep the highest-quality original as a master file.
- Crop and resize copies for their intended placements.
- Select an appropriate delivery format.
- Compress the files and test their visual quality.
- Add descriptive filenames and suitable alt text.
- Check the result on desktop and mobile screens.
- Record the source and licensing information.
This may sound like additional work, but it becomes much easier when everyone follows the same system.
It is certainly easier than trying to identify the origin of an unlabeled image three years after it was uploaded.
Bring the Pieces Together
The right website image is not necessarily the most expensive image, the newest format, or the one with the most dramatic visual effects.
It is the image that supports the page, represents the organization accurately, loads efficiently, works across different screens, and can be used legally and accessibly.
That requires a combination of creative judgment and technical preparation.
WebSubstance helps businesses bring those pieces together through original photography, web design, image optimization, accessibility, SEO, content strategy, and custom visual development.
Your website images should do more than fill space. They should help your business communicate clearly, load quickly, and make the right impression.
