Best Image Format for Thumbnail Images
JPG or WebP at quality 75-85 are the best image formats for thumbnails. At thumbnail sizes (typically 150-400 pixels), compression artifacts are invisible and file sizes are tiny. WebP produces the smallest files, while JPG has the broadest compatibility across all contexts where thumbnails appear. For PNG-based thumbnails (screenshots, graphics with text), WebP lossless is the optimal choice.
Thumbnails are high-frequency images. A single page may display 20, 50, or even 100 thumbnails in a grid. Each individual thumbnail file is small, but the cumulative weight adds up fast. Optimizing thumbnail format and quality settings has an outsized impact on page performance because there are so many of them.
Here is how to choose the right format and settings for thumbnails in different contexts.
Why Format Matters Less at Thumbnail Size
At thumbnail dimensions (150-400 pixels), the visual difference between formats shrinks dramatically. Compression artifacts that are obvious in a full-size image become invisible at thumbnail scale. This means you can compress more aggressively than you would for full-size images.
A 300x200 JPG at quality 75 looks virtually identical to the same thumbnail at quality 95 when viewed at intended display size. The file size difference is significant: quality 75 might produce an 8KB file while quality 95 produces a 25KB file. Multiply that by 50 thumbnails on a page and you save 850KB for zero visible quality difference.
WebP vs JPG for Thumbnails
WebP produces 20-30% smaller files than JPG at thumbnail sizes, which is meaningful when a page loads dozens of thumbnails simultaneously. A gallery page with 40 WebP thumbnails at 8KB each totals 320KB. The same gallery with JPG thumbnails at 11KB each totals 440KB.
The decision between WebP and JPG for thumbnails depends on context. For your own website, use WebP. For thumbnails that will be used in email, RSS feeds, Open Graph social previews, or shared across platforms, JPG is safer due to broader compatibility.
- Web galleries and product grids: WebP at quality 75-80. Smallest files, universal browser support.
- Video thumbnails on your site: WebP at quality 80. Captures enough detail for video preview recognition.
- Email thumbnails: JPG at quality 80. Universal email client compatibility.
- Open Graph and social media previews: JPG. Social platforms re-compress anyway.
- Search result snippets: Whatever your CMS generates. Most use JPG by default.
Thumbnail Dimensions by Context
Different contexts call for different thumbnail sizes. Using the correct dimensions avoids browser resizing and ensures consistent visual weight in grid layouts.
- E-commerce product grid: 300x300 to 400x400 pixels (square). Consistent aspect ratio across all products.
- Blog post cards: 400x225 (16:9) or 400x267 (3:2). Match your content layout aspect ratio.
- Video thumbnails: 320x180 (16:9). Standard video aspect ratio.
- User avatars: 48x48 to 96x96 pixels (square). Small enough that even PNG is tiny.
- Gallery previews: 200x200 to 300x200 pixels. Balance between recognizability and grid density.
- Open Graph images: 1200x630 technically, but platforms display them at thumbnail sizes on feeds. Provide the full size and let platforms handle resizing.
Lazy Loading Thumbnails
For pages with many thumbnails, lazy loading is essential. Only load thumbnails that are in or near the viewport. As the user scrolls, new thumbnails load just before they become visible.
The native loading="lazy" attribute works in all modern browsers and requires no JavaScript. For more control over loading behavior (intersection margins, placeholder sizing), use the Intersection Observer API.
- Always set width and height attributes on thumbnail images to prevent layout shift during lazy loading.
- Use a low-quality placeholder (LQIP) or solid color background while thumbnails load.
- First row of thumbnails should NOT be lazy loaded. They are above the fold and need to load immediately.
- Set appropriate fetch priority. Hero thumbnails get fetchpriority="high", below-fold thumbnails get default or low priority.
Generating Thumbnails from Source Images
Always generate thumbnails by downsizing from a larger source, never by cropping a small portion of a full-size image. Downsizing preserves the full composition while reducing file size. Most CMS platforms and image CDNs generate thumbnails automatically when you upload the full-size source.
If you need to generate thumbnails manually, use imageconvert.co to convert and resize images directly in your browser. Convert HEIC photos from your phone to WebP thumbnails, or batch convert a folder of product photos to optimized JPG thumbnails.
Frequently Asked Questions
What quality should thumbnails be?
Quality 75-80 for JPG thumbnails and 70-80 for WebP thumbnails. At thumbnail display sizes, higher quality settings produce no visible improvement but significantly larger files. Only go higher (quality 85+) if thumbnails are displayed at larger sizes or if fine detail recognition is critical.
Should thumbnail images be square?
It depends on your layout. Product grids and user avatars work best with square thumbnails. Blog post cards and video thumbnails use rectangular aspect ratios (16:9, 3:2). The key is consistency: use the same aspect ratio for all thumbnails in a given grid.
How do I prevent layout shift when thumbnails load?
Always set explicit width and height attributes on thumbnail image elements. Use CSS aspect-ratio as a backup. Provide placeholder backgrounds that match the thumbnail dimensions. These techniques reserve space before the image loads.
Can I use AVIF for thumbnails?
AVIF produces the smallest thumbnail files but encoding is slower and browser support is slightly lower than WebP at 95%. For server-generated thumbnails where encoding speed matters, WebP is more practical. For static thumbnails pre-generated at build time, AVIF is worth considering.