Recommended Free Tools
Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
A thumbnail in web development is a small visual preview of an image or other content. It helps people recognize or navigate to a larger item, but it is a design and content-management term—not a special HTML element or a universally fixed pixel size. To build one, use ordinary image markup, choose image files that suit the displayed space, and use responsive-image features when the layout needs them.
What “thumbnail” means on a website
A thumbnail is a reduced-size preview used in places such as article cards, product grids, galleries, or lists of videos. It may be a small image displayed in the design, a smaller image file generated by a content management system (CMS), or one candidate among several files that a browser can choose from. Those approaches can be combined, but they describe different things: the thumbnail’s role, the file supplied, and how the browser selects it.
HTML has no dedicated “thumbnail” element. An image preview is embedded with the regular <img> element. MDN describes the distinction this way: “The <img> element lets you embed images into an HTML document, while the <picture> element enables responsive images.” MDN Web Docs
Is there a standard thumbnail size?
No. The right dimensions depend on the image’s job and the space where it appears. A small square preview in a compact list has different requirements from a wide image in an article card. The cited HTML and WordPress documentation does not establish one best pixel size or aspect ratio for every thumbnail.
#1 Best Overall
WordPress documentation gives a useful example, not a web-wide standard. For an uploaded image of 1500 × 706 pixels, its responsive-images handbook lists Full Size as 1500 × 706, Large as 500 × 235, Medium as 300 × 141, and Thumbnail as 150 × 150. The square thumbnail example crops the original’s proportions; installations and themes may configure sizes differently. WordPress Developer Resources
Before preparing files, decide how wide the image will actually render at each relevant layout size, whether it needs the same crop everywhere, and what source dimensions can serve that display without routinely sending an unnecessarily large original.
How to add a responsive thumbnail in HTML
For an image that stays in the same composition but has multiple file sizes, use srcset to list the available candidates and sizes to describe the image’s expected display width. This gives the browser information it can use to select an appropriate resource for the viewport and display conditions. The candidates should be real files at the widths you declare, and the sizes hint should reflect your actual layout.
Quick wins for a faster PC:
Scan for outdated or missing drivers - takes under a minuteDriver Scan →Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →<img
src="card-480.jpg"
srcset="card-320.jpg 320w, card-640.jpg 640w, card-960.jpg 960w"
sizes="(max-width: 600px) 100vw, 320px"
width="640"
height="400"
alt="Description of the image"
>This is an illustrative pattern, not a performance benchmark. Here, the browser is told that the image may occupy the viewport width up to 600 pixels and otherwise a 320-pixel slot. Change that hint to match the card’s real width in your design. Keep the width and height attributes in the source image’s aspect ratio; the example’s 640 × 400 dimensions correspond to a 1.6:1 ratio.
Rank #2
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The width and height attributes communicate intrinsic proportions so the browser can reserve the right amount of layout space while the image loads. They do not resize the downloaded source file. Use CSS when you need to control visual sizing or fit an image into a layout box. MDN Web Docs: HTML images
When to use <picture> instead
Use <picture> when the browser may need a different image version, such as a deliberately different crop on a narrow screen, or when you want to offer alternatives conditioned on media or format support. Keep an <img> inside it as the fallback. The browser evaluates each <source> element’s srcset, media, and type values to find a usable candidate. MDN Web Docs: <picture>
<picture>
<source
media="(max-width: 600px)"
srcset="card-portrait.jpg"
>
<img
src="card-landscape.jpg"
width="640"
height="400"
alt="Description of the image"
>
</picture>This example offers a portrait alternative on narrow screens and uses the landscape image in the nested <img> otherwise. Supply image dimensions that reflect the relevant source’s proportions, and ensure the alternative crop communicates the same essential content. For more ordinary size variants of one composition, srcset and sizes are the more direct tools.
How “thumbnail” works in WordPress
In WordPress, “thumbnail” is a named image size managed through media settings; it is not a universal measurement. A theme can also use the separate post-thumbnail size for featured images. WordPress’s function reference distinguishes the theme’s post-thumbnail from the thumbnail size managed in Media settings. WordPress Developer Resources: the_post_thumbnail()
Rank #3
WordPress can generate responsive markup containing srcset and sizes, allowing browsers to select among the available image files. Its handbook notes that the default sizes hint may need a theme-specific adjustment. Do not assume every site will produce the example dimensions above: settings and themes can add or configure sizes. WordPress Developer Resources: Responsive Images
Choose the image variant for the actual layout
- Rendered slot: Work out the image’s displayed width at each breakpoint rather than selecting a file by habit.
- Source dimensions and display density: Provide candidates suitable for the slot and avoid routinely downloading an oversized original for a small display.
- Crop and aspect ratio: Use one composition if it works at all sizes; consider art direction with
<picture>if a small-screen crop needs different framing. - Browser selection: Use
srcsetandsizesfor candidates that share a composition; use<picture>for alternative versions or conditional sources. - Layout stability: Set accurate image dimensions and use CSS for visual presentation rather than treating HTML dimensions as a file-resizing operation.
Responsive image features can help avoid delivering an unnecessarily large source for a small slot, but the candidate widths and layout hints need to match the files and design. Neither the cited documentation nor the WordPress example supports a universal “best thumbnail size.” MDN Web Docs: responsive images
Common thumbnail problems and fixes
The thumbnail looks stretched
Check that the HTML width and height describe the source image’s actual proportions, and inspect CSS rules affecting the rendered box. If the design intentionally crops an image, use a suitable crop or CSS presentation rather than distorting its ratio.
The page downloads a much larger image than it displays
Check that srcset candidates point to appropriately sized files and that the sizes hint describes the real rendered slot. A responsive hint cannot make a large source file smaller; the candidate files themselves must exist at useful dimensions.
Rank #4
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
The wrong crop appears on a narrow screen
If the narrow layout needs a different composition rather than merely a smaller version, offer an alternative with <picture> and a suitable media condition. Keep the nested <img> for the fallback.
WordPress uses an unexpected thumbnail dimension
Check the site’s media settings and theme configuration. The WordPress handbook’s 150 × 150 value is an example size, not a guarantee for every installation. Also distinguish the Media-settings thumbnail name from a theme’s post-thumbnail size.
Capture a thumbnail preview of a live web page
If by “thumbnail” you mean a visual preview of a web page rather than an image embedded in your page, one option is to open the page in a browser and capture the desired area. For an automated browser workflow, choose a viewport that matches the card or preview slot, wait until the page is ready, and capture the page or a selected element. The result is a new image file; it is separate from HTML’s responsive image selection.
Or skip the browser setup
ScreenshotNeo is a website screenshot API and MCP server. Its GET endpoint can return an image or PDF; for a page preview, request an image and set the output format as needed. This cURL example saves a WebP screenshot of a page; replace the URL and supply your API key:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo documentation for request parameters. Cookie banners are accepted and removed before the shot, along with supported newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, and failed loads are never billed, and response headers report the page verdict and billing status. Its MCP server lets AI agents use take_screenshot, get_page_info, and capture_pdf. The free plan includes 1,000 screenshots a month with no card; paid plans start at $5 for 3,000 screenshots.
Sign up for ScreenshotNeo free to get 1,000 screenshots a month without a card.
Frequently Asked Questions
Is a thumbnail the same as a preview image?
A thumbnail is one kind of preview image: specifically, a reduced visual used to identify or navigate to fuller content. “Preview image” can describe images that are not reduced thumbnails.
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Repair Windows errors before they cause bigger problems3Fix the driver behind crashes, sound loss and screen glitchesDoes every image on a web page need srcset?
No. Use responsive candidates when multiple source sizes suit different rendered slots or display conditions; a single appropriate image can use a regular img element.
Is the WordPress thumbnail always 150 × 150 pixels?
No. That is the size in a WordPress handbook example; media settings and themes can configure image sizes.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
