Create thumbnails that stay useful at a small display size

A card image helps someone recognize a product, article or gallery item quickly. It does not have to show every detail in the larger photograph. Choose a composition that remains understandable when small: a full room shot may be less useful than a closer view, while a product thumbnail must still show the correct item rather than an attractive but ambiguous detail.

Check the card's shape before exporting. Fit within preserves the complete source, but your website may crop it later with its own styling. An exact crop gives you a deliberate composition for that slot. Use the larger source for an expanded gallery or product zoom. Do not replace the only detailed image with the thumbnail and expect enlargement to recreate its detail when a visitor opens it.

The starting preset fits within 800 by 800 pixels, selects WebP and applies Light sharpening. This is an example bound for a card candidate, not a universal thumbnail requirement. Measure the actual display width and responsive density needs, then choose an appropriate export. A wide source will keep its ratio inside the box instead of becoming square automatically.

Inspect the image at the size of the real card. A face, label or distinctive product feature should still be recognizable. Tiny embedded words may be better supplied as real card text. Compare Off with Light sharpening, since strong edge contrast can make a small image busy. Test a JPEG at the same dimensions if WebP is not useful in your workflow. Use PNG for assets that need existing transparency; the current WebP export here is opaque.

Place the file in the real grid and check a phone, a tablet-width layout and a large display. Confirm the browser is actually loading the thumbnail candidate rather than the full-size image. Provide suitable responsive sources and reserved dimensions in the site implementation. A small local export has no effect if the page still requests a different oversized file for every card.

Inspect the whole browsing interaction. A thumbnail used as a link needs a meaningful accessible name through its image or surrounding text. Keep the crop consistent enough for scanning without hiding relevant content. For a gallery, test that opening the item shows an appropriate larger source. Batch only images sharing the same role and inspect outliers such as tall products or wide interiors individually. The converter creates the files locally and does not modify your website or publish a gallery. Keep the original set so thumbnail rules can change later.

Choose a tall product and a wide room photograph as early thumbnail tests. Put them beside an ordinary square-friendly image in the real grid. Check whether the shared styling hides product ends or leaves the room unrecognizable. A deliberate crop or separate candidate may be needed for an outlier, even if most images work with the same rule. Look at labels and faces at normal card size, and confirm that the link still makes sense when the picture is unavailable. This test helps you judge the thumbnail as part of browsing rather than as a small file viewed on its own.