Transparent web assets that belong in the layout

Transparency is an alpha channel, not a checkerboard

A checkerboard baked into an image is still an opaque rectangle. A useful transparent PNG or WebP stores opacity separately so the page background can show through every empty region and, when intended, through soft edge pixels. Inspect the exported file itself rather than trusting the preview in an image editor.

Test the asset on light, dark, saturated, and patterned backgrounds. A pale halo often means the subject was matted against white before export. Colored fringe can come from a chroma-removal step. Both defects become obvious when the page background changes, even if they looked acceptable on the production canvas.

Keep shadows attached to the right thing

Internal shading helps an object keep its volume and usually belongs in the asset. A large cast shadow that assumes a particular floor or card often does not. It can make the object look detached when the website places it on another surface, and it expands the transparent canvas far beyond the visible subject.

For layered or animated work, decide whether a shadow belongs to the moving object, the stationary base, or the page. Exporting a shadow onto the wrong layer causes it to slide, duplicate, or disappear during motion. A static illustration can hide that mistake; implementation exposes it immediately.

Crop for placement, not just for storage

Remove accidental empty borders, but preserve intentional breathing room required by the composition or animation path. Record the intrinsic width and height so the browser can reserve the correct aspect ratio before the asset loads. Incorrect dimensions can move surrounding copy even when the image file is small.

A hero, a feature-side illustration, a decorative corner object, and a social image should not share one arbitrary canvas. Export each at the proportions it needs. When the same subject must serve several placements, create intentional variants rather than relying on aggressive CSS cropping.

Place transparent art responsively

Use an image element with explicit dimensions and a responsive display width. Preserve the silhouette with proportional height and a containing fit when cropping would remove meaning. Below-fold artwork should load only as it approaches the viewport; the image that establishes the first screen may need higher priority.

Keep decorative objects out of the reading and focus order. If several transparent pieces combine into one meaningful scene, give the composed figure a concise description and leave redundant constituent layers with empty alternative text. If each asset communicates a different product step, describe each step instead.

Run a small production checklist

Before shipping, inspect the alpha edge at high zoom, view the asset on representative page backgrounds, confirm its crop and intrinsic dimensions, and test the narrowest supported layout. Check that the file name describes its placement or subject and that the source record identifies whether it is informative, decorative, or a motion layer.

Finally, read the section with images hidden. The product decision should still be understandable. Transparent artwork should make the idea clearer and the page more distinctive; it should not be the only place where essential meaning exists.

See the system in context

Its indigo 3D family uses isolated transparent objects for product search, product selection, feature explanations, plan choices, and growth. See the anonymous ecommerce automation artwork case study.

Continue with A performance workflow for generated website artwork, or apply the method to your own public page in the free art-direction preview.

Ready to produce a coordinated pack? Start free with three credits.