What color profile should I use for web images?

sRGB is the standard color profile for the web. All browsers support it, and it is the assumed default when no profile is embedded. Using sRGB ensures the most consistent appearance across devices and platforms.

Why do my screenshots look different on another monitor?

Different monitors have different color gamuts and calibration settings. If a screenshot is captured in a wide-gamut profile (like Display P3) and viewed on a standard sRGB monitor, colors may appear muted or shifted because the monitor cannot reproduce the wider color range.

What is the difference between sRGB and Display P3?

sRGB covers approximately 35% of visible colors and has been the web standard for decades. Display P3 covers about 25% more colors, enabling more vivid reds, greens, and oranges. Modern Apple devices and many flagship monitors support Display P3.

Do PNG and JPEG support color profiles?

Yes. Both formats can embed ICC color profiles in their metadata. PNG preserves profiles losslessly. JPEG preserves them through standard metadata fields. However, some image processing tools strip profiles during optimization, which can cause color shifts.

Should I strip color profiles to reduce file size?

Stripping the profile saves a small amount of file size (typically 3-5 KB), but the image will be interpreted as sRGB by browsers. If the image was created in a different profile, stripping it will cause colors to render incorrectly. Only strip profiles from images that are already in sRGB.

What Is Color Profile? | Glossary

A color profile is a set of data that defines how colors in an image should be interpreted and displayed — ensuring consistent color appearance across different screens, browsers, and print devices.

Common color profiles

Color profiles — formally called ICC profiles — map the colors in an image to a standardized color space. The three most relevant profiles for screenshots and web images are:

sRGB (Standard Red Green Blue) is the default color space of the web. Created in 1996 by HP and Microsoft, it covers approximately 35% of the visible color spectrum. All modern browsers, operating systems, and displays support sRGB. When a web image has no embedded profile, browsers assume sRGB.

Display P3 is a wider-gamut color space used by Apple devices (iPhones, iPads, Macs with Retina displays) and an increasing number of flagship monitors. It covers about 25% more colors than sRGB, producing more vivid reds, greens, and oranges. macOS captures screenshots in Display P3 on supported hardware.

Adobe RGB covers a similar range to Display P3 but with emphasis on cyan-green tones. It is primarily used in print photography and prepress workflows. Adobe RGB is rarely relevant for web screenshots but appears when working with images from professional cameras.

The relationship between these profiles matters: an image created in Display P3 contains colors that sRGB cannot represent. When displayed on an sRGB monitor without proper conversion, those out-of-gamut colors are clamped — resulting in muted or shifted tones.

Why profiles matter for screenshots

Screenshots inherit the color profile of the display they are captured on. On a modern Mac, this means Display P3. On most Windows machines, this means sRGB.

This creates a practical problem: a screenshot captured on a Mac in Display P3 may look slightly different when viewed on a Windows machine with an sRGB display. The vivid colors captured in P3 get compressed to the narrower sRGB range, and the result can appear less saturated.

For teams sharing screenshots in documentation, design reviews, or client presentations, this inconsistency can cause confusion. A designer captures a screenshot showing vibrant brand colors, but the client viewing it on a standard monitor sees slightly different tones.

Automated screenshot tools that run headless browsers on servers typically render in sRGB by default, producing consistent output regardless of the operator's display hardware. This server-side rendering avoids the profile mismatch problem entirely.

Color profiles and the web

Modern browsers are color-managed — they read embedded ICC profiles and convert colors for accurate display on the current monitor. This means a Display P3 image will display correctly on both P3 and sRGB monitors, as long as the profile is embedded and the browser supports color management.

CSS now supports color functions for wide-gamut colors: color(display-p3 1 0.5 0) specifies a color in the P3 space directly. The color-gamut media query lets developers detect whether the user's display supports wide-gamut colors and serve appropriate assets.

For most web use cases, sRGB remains the safe default. It is universally supported, requires no special handling, and produces predictable results. Wide-gamut profiles like Display P3 add visual richness on supported displays but require careful handling to avoid color shifts on standard monitors.

In repeatable screenshot reviews

Color profiles become a workflow problem as soon as multiple people review the same capture on different hardware. If one teammate exports wide-gamut screenshots from a P3 Mac and another compares them on an sRGB display, the discussion quickly turns into "why does this look different here?" Standardizing capture and export rules avoids that noise and makes visual review more trustworthy.

Common mistakes

Mixing profiles in a single project. Combining sRGB and Display P3 images in the same design or document creates inconsistent color rendering. Standardize on one profile — typically sRGB for web content — and convert all assets to match.
Stripping profiles during optimization. Image optimization tools sometimes remove embedded ICC profiles to reduce file size. If the image was created in Display P3, stripping the profile causes browsers to interpret the colors as sRGB, shifting them toward desaturation.
Ignoring profile differences in screenshot comparisons. Visual regression testing that compares screenshots captured on different hardware may produce false positives due to profile mismatches. Ensure all captures use the same color profile and rendering conditions.
Assuming all monitors display the same colors. Even with correct profiles, monitor calibration varies. A screenshot that looks perfect on a calibrated design monitor may appear different on a laptop screen or budget display. Use standardized profiles and communicate that color accuracy depends on the viewer's hardware.

Color Profile