Thumbnails and Previews: Why Small Versions Matter

Every gallery, shop page and search result shows small versions of images. Getting them right makes pages feel fast and professional.

What a thumbnail is

A thumbnail is a small copy of an image, used to preview it. Clicking it usually opens the full-size version.

Why not just shrink the big image in the page?

Websites and apps can display a large image at a small size, but the full file still has to download. That wastes data and slows pages, especially on mobile connections.

A real thumbnail is a separate, small file, so it loads quickly.

Good thumbnail sizes

Use	Typical size
List or gallery grid	150 to 400 px wide
Product cards	300 to 600 px wide
Profile avatars	100 to 200 px square
Video thumbnails	1280 × 720 (16:9) is common

How to make a good thumbnail

1. Crop to the subject. Small images can't show much, so focus on what matters.
2. Use the right ratio for the layout, such as square.
3. Resize to the display size, or slightly larger for sharp screens.
4. Compress moderately. Small images tolerate lower quality, but avoid visible blockiness.
5. Check it at real size. View it as it will actually appear.

Sharp on high-density screens

Many phones use high-density displays that show more pixels per inch. To keep thumbnails sharp on them, some designers supply versions about twice the display size.

Faces and text

• Faces need enough pixels to be recognisable.
• Text in thumbnails is often unreadable at small sizes, so keep it large and short.

Consistency

A grid of thumbnails looks best when they share the same dimensions and style.

For your own use

If you send a "preview" of a photo to a friend or upload one to a listing, make a small copy first. It uploads faster and uses less data.

Batch approach

If you have many images, resize them together to the same dimensions. A batch-friendly tool with cropping and resizing keeps the whole set consistent.

Try Image Compress & Resize Tool →