Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
For a website card, place an <img> inside a frame with a chosen aspect-ratio, then use object-fit: cover to fill the frame or contain to keep the whole image visible. Add the image’s intrinsic width and height so the browser can reserve space while it loads. CSS changes how large an image appears; it does not create a smaller image file.
This guide covers thumbnails made from image files for cards, grids and previews. If by “website thumbnail” you mean a screenshot of a live webpage, that is a different workflow: the page must be rendered and captured. A screenshot API option appears after the HTML and CSS method.
Build a basic thumbnail card
Start with a meaningful image element and a container that defines the card. The example below uses an article card; change the URL, image path, dimensions and alt text to match your own content.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
<a class="card" href="/articles/example">
<img
src="/images/example-640.jpg"
width="640"
height="400"
alt="A person arranging plants beside a sunny window"
loading="lazy">
<h2>A guide to indoor plants</h2>
</a>.card {
display: block;
color: inherit;
text-decoration: none;
}
.card img {
display: block;
width: 100%;
aspect-ratio: 8 / 5;
object-fit: cover;
}
.card h2 {
margin: 0.75rem 0 0;
}The image fills the card’s available width. The aspect-ratio establishes a preferred 8:5 frame, while object-fit: cover fills that frame by cropping any overflow. display: block avoids the small baseline gap that inline images can leave below themselves. The link wraps both image and heading, so the card’s image and title belong to the same destination.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
The width and height attributes describe the source image’s intrinsic dimensions. They help the browser determine its ratio before the file has loaded; the CSS width controls the rendered size. Providing those dimensions lets the browser reserve layout space and can reduce content shifting as images load. This is particularly useful when images are lazy-loaded. See MDN’s <img> reference and its guide to CSS aspect ratios.
Choose between cropping and showing the whole image
The right object-fit value depends on what matters more: a consistently filled frame, or keeping every part of the source visible.
| Value | What happens | Use it when |
|---|---|---|
cover |
The image fills the frame; overflow is cropped. | A uniform set of card images matters more than showing every edge of each source. |
contain |
The complete image remains visible; empty space may remain in the frame. | The whole image must be seen, such as a diagram, product image or other content where cropping would hide useful details. |
These behaviors are described in MDN’s aspect-ratio guide. With cover, different source shapes can produce different crops even when the cards are the same size. If the important subject is not centered, adjust the crop with object-position:
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →.card img {
width: 100%;
aspect-ratio: 8 / 5;
object-fit: cover;
object-position: center 30%;
}That example shifts the visible area toward the upper part of the image. Preview the result with the actual source images: a crop that works for one photograph may cut off the subject in another.
aspect-ratio is a preferred ratio used when at least one dimension remains automatic. If CSS explicitly fixes both width and height, those dimensions take precedence over the preferred ratio. For this reason, set the rendered width and ratio rather than forcing both dimensions to unrelated fixed values when you want a flexible thumbnail frame.
Make the card grid responsive
A thumbnail can have a consistent shape while its displayed width changes across a grid. Let the grid determine the card width, and let the image keep its ratio:
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 1rem;
}
.card img {
display: block;
width: 100%;
aspect-ratio: 8 / 5;
object-fit: cover;
}Here, each column has a 220-pixel minimum and can expand to share the available space. The image width follows its card, while the aspect ratio preserves the chosen frame shape. Adjust the minimum and the ratio to suit the content and your layout; 8:5 is an example, not a universal thumbnail standard.
Do these 3 things before closing this tab:
1Repair Windows errors before they cause bigger problems2Scan for outdated or missing drivers - takes under a minute3Clear out junk files and repair common Windows errorsServe an appropriately sized source with srcset and sizes
CSS controls the display dimensions, but it does not by itself tell the browser that a smaller image file exists. If a card displays at a modest width but its only source is a very large file, the browser may still download that large file. Prepare several image widths and offer them using srcset. Use sizes to describe the slot width the image is expected to occupy at different viewport widths.
<img
src="/images/example-640.jpg"
srcset="/images/example-320.jpg 320w,
/images/example-640.jpg 640w,
/images/example-960.jpg 960w"
sizes="(max-width: 600px) 100vw,
(max-width: 1000px) 50vw,
320px"
width="640"
height="400"
alt="A person arranging plants beside a sunny window"
loading="lazy">The width descriptors (such as 640w) describe the pixel width of each candidate file. The sizes value describes the image’s expected layout width: this example says the slot is full viewport width up to 600 pixels, half the viewport width up to 1,000 pixels, and otherwise 320 pixels. The browser uses that information together with device characteristics to select a candidate. CSS still controls the layout; responsive source selection does not replace it. Keep the fallback src useful for browsers that do not use the responsive candidates.
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
See MDN’s responsive images guide and web.dev’s guide to serving responsive images for further explanation. MDN illustrates the possible difference with an 800px image of 128KB and a 480px image of 63KB, a 65KB saving in that documentation example. Those are example file sizes, not a general performance benchmark; actual savings depend on the images and candidates you serve.
Generate smaller image files when needed
If you only apply CSS sizing, the source file remains the same. To reduce the bytes transferred, create appropriately sized image files and point your markup at them. For a batch workflow, web.dev identifies Sharp; for a one-off resize, it gives ImageMagick as an option. It also names Thumbor and Cloudinary as image services. The suitable choice depends on whether you want a local image-processing step, an automated pipeline or a service.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →Responsive-image guidance commonly uses 3–5 sizes, according to web.dev, but there is no single correct number. More candidates can give browsers a closer match to the display slot, while increasing storage needs and markup to maintain. Begin with the widths your layouts actually use, then add variants when they solve a real mismatch rather than generating every possible size.
Best Value
For a large catalogue, keep the original asset and make generation reproducible: a consistent naming scheme and repeatable resize step make it easier to update candidates later. Keep the image proportions in mind when generating files, too. If every card will use cover, the displayed crop may not match the full source; review focal points and choose a suitable crop or alignment for images where the subject is near an edge.
Write useful alternative text
Choose the alt text based on the image’s purpose in context. If the thumbnail conveys information not already present in the card title, describe that relevant content briefly. If it is purely decorative and the adjacent title already communicates what the link is about, decide deliberately whether the alternative text should be empty rather than repeating the title. The example uses descriptive text to demonstrate an informative image; it is not a rule that every thumbnail needs that exact treatment.
Or skip the browser setup
If by “website thumbnail” you mean a screenshot of a live webpage rather than an image file in a card, HTML and CSS can lay out the thumbnail display but do not render and capture the target page for you. ScreenshotNeo is a website screenshot API and MCP server for developers. One GET request can return a PNG, JPEG, WebP or PDF. For example, this cURL request saves a WebP screenshot of Stripe:
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 API details. ScreenshotNeo can accept cookie and consent banners like a visitor and remove more than 60 known consent platforms, newsletter popups and chat widgets before capture; each step can be turned off. Bot checks, blank pages, timeouts, failed loads and cache hits cost nothing, and response headers identify the page verdict and billing status. Its MCP server provides take_screenshot, get_page_info and capture_pdf for Claude, Cursor and other MCP clients. 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: 1,000 screenshots a month, no card required.
Troubleshoot common thumbnail problems
- The image looks stretched. Check for CSS that sets both width and height to values that do not match the source. For a flexible frame, use a width plus
aspect-ratioand choosecoverorcontain. - The subject is cut off. That is expected when
covercrops overflow. Tryobject-positionto shift the visible crop, or usecontainif the full image must remain visible. - The card moves as images load. Provide accurate intrinsic
widthandheightattributes so the browser can reserve space before downloading the image. - The page downloads more image data than expected. CSS display sizing does not create a smaller source. Generate suitable file widths, provide them in
srcset, and makesizesreflect the card’s actual layout. - The wrong responsive candidate seems to load. Check the width descriptors against the real file widths and check that each
sizescondition describes the rendered slot. Those values inform browser selection; they do not set the CSS layout. - An image is missing or broken. Verify the fallback
srcand each candidate URL directly, including letter case and file extension. Keep a working fallback even when you provide responsive sources.
Frequently Asked Questions
Should I use an image file or a CSS background for a thumbnail?
Use an <img> when the image is content that should have alternative text or participate in responsive image selection. A CSS background is better reserved for purely decorative artwork that is not the card’s meaningful image.
Can a website thumbnail show a live page inside the card?
A live-page screenshot is a generated image, not an image-card layout technique. Capture the page first, then display the resulting file using the same <img>, aspect-ratio and crop choices described above.
Recommended Free Tools
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.
