Thumbnail Generator Free - Create Optimised Image Thumbnails

Common conventions: list or avatar thumbnails 64-80 px, grid card thumbnails 320-400 px, open graph / social preview images 1200x630 px, YouTube-style widescreen thumbnails 1280x720 px, Instagram square 1080x1080 px. For responsive sites, generate 2-3 sizes (small, medium, large) and use HTML srcset to let the browser pick the right size for the viewport rather than serving one large thumbnail to all screen sizes.

Center crop cuts to the middle of the image - fast and predictable but can miss subjects near edges. Cover fills the target dimensions exactly, cropping the longer axis - always produces the requested size, may cut important content. Contain fits the full image within target dimensions maintaining aspect ratio, adding padding to fill the remaining space. Use cover for uniform grids, contain for product images where showing the complete item matters more than a clean fill.

Thumbnails display at small sizes where quality reduction is imperceptible. Export as PNG for lossless thumbnails (larger files), or JPG at 80-90% quality for web use (smaller files, no visible difference at small display sizes). Always generate thumbnails from the original high-resolution source - never from a previously downsized copy.

Build time (pre-generate all sizes during deployment) is simpler and faster for users - ideal for static sites, portfolios, and product catalogs where images are known in advance. Runtime generation makes sense for platforms with user-uploaded content where you cannot know image dimensions ahead of time. For most small-to-medium sites, pre-generating thumbnails and serving them from a CDN is the right approach.

Add loading="lazy" to your img tags - modern browsers handle the rest natively with no JavaScript required. Also add explicit width and height attributes to prevent layout shift while images load. For above-the-fold thumbnails visible on initial page load, use loading="eager" (or omit the attribute) to prevent a visible delay in the first viewport.

No. All thumbnail generation uses the Canvas API in your browser. Your original images never leave your device.