Thumbnails appear in blog lists, galleries, product grids and search results. When they’re inconsistent, with different shapes, sizes and sharpness, the whole page looks messy. A simple system fixes that.
Choose a shape and stick to it
The most important decision is the aspect ratio. Common choices:
- 1:1 (square): clean for product grids and profile galleries.
- 4:3 or 3:2: traditional photo shapes, flexible for most content.
- 16:9: good for video-style or blog post thumbnails.
Pick one for each context and use it everywhere. Mixed shapes make grids look ragged. See what is aspect ratio.
Common thumbnail sizes
These are typical display sizes, not strict rules:
- Small thumbnails: 150 x 150 pixels
- Medium cards: 300 x 300 or 400 x 300 pixels
- Blog list images: 600 x 338 or 800 x 450 pixels
For sharp results on high-density screens, create each at roughly double the displayed size.
Crop deliberately
Automatic center cropping works until your subject sits off-center. A face chopped in half makes a thumbnail look careless. Crop manually with the subject in mind, then resize. Crop first, resize second, as described in crop vs resize. For the layout side in CSS, see CSS object-fit.
Keep the files small
Thumbnails are loaded in bulk, so their combined weight matters more than any individual file. A page with 24 thumbnails at 100 KB each is 2.4 MB before anything else loads. Aim for about 15 to 40 KB each. Use JPG or WebP at quality 70 to 80. The tactics are in how to compress images for a faster website.
Don’t use the full image as the thumbnail
A common mistake is loading the 2000-pixel original and shrinking it with CSS. The browser still downloads the whole file for every thumbnail. Create a proper smaller version. WordPress does this automatically for you, as covered in compressing images in WordPress.
Make thumbnails readable
- Choose images with a clear subject.
- Avoid tiny text, which becomes unreadable when small.
- Use consistent filters and color treatment.
- Write alt text for each one. See alt text guide.
Video thumbnails
These deserve extra attention since they heavily influence clicks. See YouTube thumbnail size for the specifics.
A repeatable workflow
- Decide on a ratio and display size.
- Crop each image to that ratio, centering the subject.
- Resize to double the display size.
- Export at quality 75 or so.
- Name files clearly.
Listing items for sale? See eBay photo sizes.
Process a whole set at once with the free image resizer and its batch options.