Thumbnail
Definition
A thumbnail is produced by resampling an image down to the dimensions it will actually be displayed at — 300 pixels wide for a gallery tile, 150 for a list row, 1200 for a social preview card. The saving is quadratic rather than linear, because halving both dimensions quarters the pixel count: a 4,000 by 3,000 photograph is twelve million pixels, and a 400 by 300 thumbnail is 120,000, one hundredth as many. In bytes that usually means 2.5 MB becoming around 25 KB. Setting a width attribute in HTML or a max-width in CSS does none of this — the browser still downloads every byte of the original and shrinks it on screen, which is the commonest cause of a slow gallery. Thumbnails are also what the srcset attribute chooses between, letting a phone take the small file and a desktop the large one.
Why It Matters
A page of twenty full-size photographs displayed at tile size is not a slightly heavy page, it is a 40 MB one. The same page built from 25 KB thumbnails is around 500 KB, which is the difference between a gallery that paints in under a second and one that is still filling in after half a minute on mobile data. It costs twice over, because the browser must also decode every twelve-million-pixel image in memory, which is where a mid-range phone stalls. Generate thumbnails for anything shown in a grid, a list or a preview — and for the social card image, where platforms ignore anything over a few megabytes and show a bare link instead.
How It Works
Generating one is a resize plus a re-encode in a single pass. ImageMagick does it from the command line, sharp does it inside a Node build, Squoosh does it in a browser tab. Aspect ratio is a decision you have to make: fitting the whole image in a box leaves letterboxing, cropping to fill it loses edges, and for faces a centre crop is often wrong. The files are then referenced from the page directly or through srcset with sizes, so the browser picks the smallest candidate that still covers the display width. None of it happens at request time — a static host has no resizing step, so a thumbnail exists only because you made one and uploaded it. Sites resizing on the fly, for images their own users upload, use an image service or an edge function instead.
Real-World Example
A photographer publishes a portfolio at lens-mkr.99helpers.site with 24 images. The originals are 3 to 5 MB each, so the full set is about 95 MB. They generate 420-pixel WebP thumbnails at roughly 28 KB apiece and link each tile to the full image, which loads only on a click. The grid page is now 700 KB and opens in about a second on a phone; the 95 MB of originals still sits on 99helpers, but a visitor pays for at most one. Adding lazy loading to the tiles below the fold trims the initial load further.
Common Mistakes
- ✕Resizing with a width attribute or CSS instead of a smaller file — the full image is downloaded and decoded either way, and only the display size changes
- ✕Generating thumbnails at exactly the display width — a retina screen at 2x device pixel ratio needs double, so a 300-pixel tile wants a 600-pixel file
- ✕Cropping to a square without checking the result — centre crops decapitate people and cut logos in half across a whole gallery at once
- ✕Expecting a static host to make them — no resizing happens at request time, so the thumbnail has to be generated and uploaded like any other file
Related Terms
Responsive Images
Responsive images means publishing the same picture at several sizes and letting the browser pick the one that fits. The srcset and sizes attributes are how you describe that choice in HTML.
Image Optimization
Image optimisation is the work of making the pictures on a page as small as they can be without a visible drop in quality. In practice it means resizing, choosing a format, setting a compression level and serving the right file to each device.
Lazy Loading
Lazy loading defers fetching an image or iframe until the visitor is close to scrolling it into view, so only what is actually looked at gets downloaded. In a browser it is one attribute: loading set to lazy.
Image Hosting
Storing image files somewhere on the web and serving them at addresses that can be dropped straight into an img tag, an email or a marketplace listing. The useful output is the address, not the upload.
WebP File
WebP is an image format from Google that handles lossy and lossless compression, transparency and animation in one file. At comparable visual quality it is typically 25 to 35 percent smaller than JPEG.
Put a file online in seconds
Drop in a document, an image, a page or a whole static website and share the link — free, with no build step and no server to set up.
Host a file free →