Prepare Images That Work on Both Light and Dark Backgrounds

A disappearing logo and a white box are different problems. A dark logo on a dark page may have perfectly valid transparency but insufficient visual contrast. A white box may be part of the source image, a JPEG matte, or the CSS background of its container. A pale halo usually comes from edge pixels blended with an earlier light background. Inspect the source against several backgrounds in an editor and inspect the element's computed styles on the page. Do not repeatedly convert formats until one seems different; identify which layer actually supplies the unwanted color.

Separate interface assets from photographic content. A monochrome navigation icon should remain legible and may need a theme-aware color. A product photograph should usually preserve the product's real colors, even if that means a light photographic rectangle on a dark page. A chart may need its labels and grid lines redesigned for each theme. The right policy depends on what the image communicates. For the fundamentals of alpha channels and permanent backgrounds, use the transparency guide before deciding which file format to export.

Use PNG when you need a broadly editable transparent raster. WebP also supports alpha in both lossy and lossless modes; losing some color precision does not inherently remove transparency. The PNG to WebP converter can create a smaller delivery candidate, but compare its edges and actual file weight rather than assuming a fixed saving. JPEG has no alpha channel. If you use PNG to JPG, select the intended background deliberately because the resulting matte becomes part of every pixel around the subject.

A transparent asset is most flexible when its foreground remains readable on both backgrounds. For example, a midtone illustration with clear outlines may work across themes, while black lettering cannot. When transparency is unnecessary, a designed card can be more robust than forcing a cutout into every context. A light photograph in a softly bordered container is not an error merely because the surrounding page is dark. Make the container intentional and consistent. Avoid encoding a near-black matte to match one theme token unless you accept that changing the token later may reveal the rectangle.

Prefer official light-on-dark and dark-on-light brand assets where available. Do not invert a multicolor logo automatically: skin tones, familiar brand colors, gradients, and embedded shadows can become incorrect. A one-color vector icon can sometimes inherit a CSS color when embedded appropriately, but an SVG loaded as an external image does not simply inherit the parent's currentColor in every embedding arrangement. Treat the rendering method as part of the implementation. Keep the original vector master and export any required raster variants from it using SVG to PNG.

Use consistent proportions and optical size across variants so switching themes does not make the header jump. If the light version includes an outline for contrast, inspect the outline at the smallest display size; it can fill small counters and make lettering heavier than intended. Give both versions the same accessible purpose. A theme change does not justify changing the logo's alt text into a description of its colors when the logo functions as a home link. The alternative-text guide explains why function and context matter more than decorative appearance.

Soft edges contain partially transparent pixels. If their colors were previously blended against white, placing them over a dark background reveals a light fringe. Saving the same pixels as WebP or PNG does not reconstruct clean edge colors. Return to an original with intact transparency, rebuild the mask in an editor, or refine the cutout against several test backgrounds. The background removal guide explains why hair, glass, and soft shadows need particular care. Do not promise that a format switch alone will repair a matte-contaminated edge.

Check both extremes and a saturated color such as magenta behind the export. Black reveals pale contamination; white reveals dark fringes; a saturated background helps distinguish actual transparent regions from painted neutral pixels. View at 100% and at the final display size. A one-pixel fringe that looks severe when magnified may be invisible in use, while a broad halo around hair remains obvious. If the only available source was flattened onto white, decide whether a deliberate white container is more faithful than aggressive removal that damages the subject's silhouette.

Test the page's own theme switch as well as system color preferences. A site can let users override the operating-system preference; media queries alone may then select an image inconsistent with the page theme. Confirm that the implementation chooses the intended asset for the actual theme state. Set width and height or an aspect ratio so switching sources does not shift nearby controls. Avoid downloading both large photographic variants unnecessarily. Small logo duplicates may be acceptable, but a full-page hero duplicated for each theme deserves a measured loading strategy.

Accessibility requires more than making everything brighter. Check meaningful graphic boundaries and text against their immediate backgrounds, not just against the page canvas. Charts should not rely on color alone; use labels, patterns, or an accompanying explanation. Keep headings and body text as real text instead of burning them into themed banners. Finally inspect mobile and high-density layouts, cached visits, and pages printed or captured in screenshots. The image SEO checklist remains relevant: descriptive context, appropriate dimensions, stable layout, and a useful image matter more than whether its filename includes dark-mode.