A practical browser checklist for testing small transparent images

#webdev

Small icons and emotes often look fine in a design file but lose detail on a busy page. A useful test is to review the exported asset at its final display size, on both light and dark surfaces, before sharing it. This checklist works with any image editor and a modern browser.

1. Keep a source and an export

Keep the original artwork separate from the version you resize. Export a PNG when you need transparency, and use a clear filename such as wave-32.png. Check the target platform's current size and file rules before exporting; different products have different limits. Avoid repeatedly resizing the same already-small image, because each resampling pass can remove detail.

If you need a quick set of emote sizes, Emote Resizer is one option. I build it, so this is a product mention rather than an independent endorsement. Check the downloaded files against the destination's current requirements.

2. Test on contrasting backgrounds

Put each asset on white, near-black and a mid-tone background. Look for pale halos at the edges, accidental opaque rectangles, and important details that disappear at small sizes. A quick local HTML file can help:

<div class="samples">
  <div class="light"><img src="wave-32.png" alt="Waving hand"></div>
  <div class="dark"><img src="wave-32.png" alt="Waving hand"></div>
  <div class="mid"><img src="wave-32.png" alt="Waving hand"></div>
</div>
<style>
  .samples { display: flex; gap: 1rem; }
  .samples > div { padding: 1rem; }
  .samples img { width: 32px; height: 32px; object-fit: contain; }
  .light { background: white; }
  .dark { background: #171717; }
  .mid { background: #888; }
</style>

Replace the filename and description with your own. View the page at normal zoom and on the devices you expect people to use. A larger browser zoom is helpful for finding edge artifacts, but it cannot substitute for checking the real display size.

3. Check dimensions and meaning

Open the image in a browser or image viewer and check its actual pixel dimensions, not just the CSS display dimensions. If the image conveys information, give it a useful alternative description. If it is purely decorative next to equivalent text, an empty alt can prevent repeated announcements. For an emote picker, make sure the control itself has an understandable name and can be reached with a keyboard.

4. Prepare a review sheet

Place variants next to each other so a reviewer can compare them quickly. Label each variant and keep an untouched copy of the individual export; a contact sheet is for review, not a replacement for the required files. Free Image Merger can combine images in a browser. I also build this tool. Before using any service, check its current privacy information and avoid uploading sensitive artwork unless you are comfortable with the handling described there.

5. Final pass

Compare each export with the source and check for unwanted cropping.
Test the smallest intended size against light and dark backgrounds.
Confirm dimensions, transparency, filenames and any platform-specific limits.
Keep the original files so you can revise without degrading a small export.

The goal is a repeatable visual check, not a guarantee that an image will pass every platform's review.

DEV Community