Images

Images help communicate ideas, provide context, and support written content. They should be chosen carefully and optimized to work across devices and connection speeds.

When to use images

  • To illustrate information that is difficult to explain with text alone.
  • To support key messages and help people understand context.
  • To represent real people, places, or services when it improves clarity and trust.

When not to use images

  • To decorate a page without adding meaning.
  • To replace text that users need to read or copy.
  • To communicate information such as charts or graphs without also providing accessible text alternatives.

Accessibility

  • Always include meaningful alt text that describes the image for screen readers.
  • Use empty alt (alt="") for decorative images that do not add meaning.
  • Avoid putting text inside images. Use real text so it can be resized, translated, or read by assistive technology.

Performance

  • Use responsive images with srcset so browsers download the right size for the user’s device.
  • Compress images to balance quality and performance.
  • Prefer modern formats like WebP where possible, and always provide fallbacks for compatibility.
  • Set explicit width and height to prevent layout shift.
  • Use lazy loading (loading="lazy") for images that appear below the fold.

Consistency

  • Follow a consistent aspect ratio such as 16:9 across different breakpoints.
  • Apply .img-fluid so images scale within their container.
  • Ensure images work well with both light and dark backgrounds.

Aspect Ratios

Aspect ratios are the ratio of the image or video’s height and width to determine the proportions. Aspect ratios may be fixed to preserve the cropping of images across devices, or they may be flexible to accommodate responsive layouts. If aspect ratios are not assigned by the website’s design, we recommend using consistent aspect ratios as much as possible. It’s also a good idea to consider the context of the image for choosing the aspect ratio.

Common aspect ratios:

  • 16:9 – landscape 

  • 1:1 – square

  • 3:4 – portrait

Basic Example

This basic image example shows how to include an image with essential attributes for accessibility and performance. It uses an alt description for screen readers, explicit width and height values to prevent layout shift, and the .img-fluid class to ensure the image scales within its container. This is the simplest and most common way to add images to content.

Person watching northern lights in a snowy forest at night
Open example in a new tab

Responsive Image with Srcset and Sizes

Responsive images help make sure users get the best quality image for their device without downloading more data than they need. By combining srcset and sizes, you can provide different image versions for different screen widths and pixel densities.

When using responsive images:

  • Use srcset: Provide multiple versions of the same image at different widths (for example, 480px, 768px, 1024px, and 1200px).
  • Add sizes: Tell the browser how much space the image will take up at different breakpoints so it can pick the right file to load.
  • Keep images flexible: Apply the class .img-fluid so images scale to fit their container.
  • Lazy load: Defer loading images until they are about to appear on the screen using loading="lazy".

This approach improves both performance and visual quality, especially on smaller screens or devices with high pixel density.

Person watching northern lights in a snowy forest at night
Open example in a new tab

Optimizing Performance with WebP

WebP is a modern image format that can make pages load faster by reducing file size without a noticeable drop in quality. Most modern browsers support it, but you should always provide a fallback (such as JPEG or PNG) for compatibility.

When using WebP:

  • Provide fallbacks: Include JPEG or PNG sources so older browsers can still display the image.
  • Balance quality and size: Test compression settings to keep images lightweight while still looking clear.
  • Use srcset: Serve the right size of image for each device to avoid downloading unnecessary data.
  • Lazy load where possible: Defer loading of images that are not immediately visible on the screen.
  • Set width and height: Prevent layout shifts by defining dimensions up front.
  • Load critical images early: For important images at the top of the page, consider loading="eager".
Person watching northern lights in a snowy forest at night
Open example in a new tab
Updated: Jan 14, 2026