Choose category images that make each section recognizable at a glance, accurately represent what visitors will find, and remain clear when cropped and reduced to mobile-card size. Judge the whole set—not just individual pictures—then check accessibility, file weight, licensing, and metadata before publishing.
Start with what each category means
A category image is part of the navigation. Its job is to help a visitor understand what is behind a link, not merely to make a card look attractive. Begin by writing down, in plain language, what a visitor should expect after selecting each category. Then choose imagery that communicates that expectation quickly and represents the actual destination content.
Google Search Central recommends relevant, representative images and cautions against generic previews. For example, if a category contains hiking equipment, an image of a trail may suggest the outdoors but not the products inside. A picture of relevant gear—or a consistent illustration of it—may communicate the destination more directly. Check the category page itself: an image that promises something the page does not deliver is misleading, even if it is visually strong.
- Recognition: Can someone infer the category without reading a long caption?
- Relevance: Does the image depict or clearly signify what the linked page contains?
- Distinctiveness: Can a visitor tell this card apart from neighboring categories?
- Representation: Does it show a meaningful example of the category rather than an unrelated decorative scene?
Do not assume an image improves clicks or conversions by a particular amount. The guidance available from Google, W3C, and web.dev addresses relevance, accessibility, responsive handling, and metadata; it does not establish a universal conversion lift for category images.
Recommended Free Tools
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Evaluate the grid as a set
A collection can feel coherent without using identical images. Set a visual system before choosing the final files: decide how closely subjects are framed, where the focal point tends to sit, how much background is acceptable, and whether photographs, illustrations, or a deliberate mix suit the site. Apply the same standards across the row or grid.
Choose a treatment that fits the content
Photography can make real products, places, or people immediately concrete. Illustration can make categories with different source material feel like parts of one system, and it can give you more control over color and composition. Neither is inherently better. Compare both against the same criteria: does the image identify the category, match the destination, fit the visual system, and remain understandable at the smallest display size?
Set crop and focal-point rules
Use a consistent crop logic—such as keeping the primary subject at a similar scale—rather than forcing every source into an identical crop when that would cut off meaningful content. Keep important subjects away from areas likely to be clipped by the card layout. If the site uses fixed-aspect-ratio cards, preview each image in that actual crop, not only in its original proportions.
There is no universal category-card crop ratio established by the cited guidance. The right dimensions depend on the design and responsive layout. Check the complete grid at desktop and at the smallest mobile rendering you support. A subject that is clear in a large preview can become an indistinct patch after responsive resizing.
The Tool Desk
Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Keep the category label in HTML
Use visible text for the category name and for any essential instructions. Do not bake the only version of a label into the image. Google’s image guidance notes that explanatory text embedded in images can harm accessibility and searchability; W3C guidance requires a text equivalent when an image of text conveys information. Real HTML text is also easier to resize, translate, restyle, and keep consistent with the destination page.
The image and the label can work together: the label names the category, while the image gives a useful visual cue. Avoid making the image carry information that the page fails to express elsewhere.
Rank #2
Write alt text for the image’s actual purpose
Alt text is not a caption or a place to repeat search terms. Decide what the image does in context, then choose its alternative accordingly. W3C WAI’s core principle is that images need text alternatives describing the information or function they represent. Google’s stated test is that replacing images with their alt text should not change the page’s meaning.
| Image purpose | What to put in alt | Category-card example |
|---|---|---|
| Informative | A concise description of the essential visual meaning. Put the key detail first. | For a card whose image meaning is not otherwise conveyed, describe the relevant subject, such as “Red hiking backpack on a trail.” |
| Decorative | An empty alternative: alt="". |
If the image adds atmosphere but the adjacent category label fully conveys the link’s meaning, an empty alt may avoid repeating that label. |
| Functional | Describe the action or destination, not just the appearance of the image. | If an image is the only content inside a link, its alternative should identify the destination or action, such as “Browse hiking equipment.” |
| Complex | Provide a complete text equivalent for the information conveyed; a short alt alone may not be sufficient. | A detailed diagram used to explain category relationships needs its information available in text as well. |
In a card containing an image and a visible link label, avoid needlessly announcing the same words twice to screen-reader users. Consider the whole link and its accessible name, not the image in isolation. For an image that is purely decorative in that context, an empty alt attribute is generally the appropriate choice. Use concise, specific wording where the image adds information, and leave out phrases such as “image of” when they add no useful meaning.
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 →Prepare the image for responsive delivery
Start from a good-quality source, but do not send a full-size original to every small card. Export files appropriate to the largest size at which that version will appear, and use responsive image selection such as srcset where supported so browsers can choose a suitable resource. Keep the rendered dimensions and the delivered file in mind together: a sharp source is useful, but oversized downloads add avoidable weight.
There is no single best file format established for every category image. Choose a format supported by your site and delivery setup, then check the result for visual quality and file weight. Pay particular attention to images with fine detail, gradients, transparency, or text-like marks; compare the actual exported file rather than assuming an extension guarantees an acceptable result.
Lazy loading can be appropriate for category cards below the initial viewport, but do not let optimization make the first visible navigation content arrive too late. After implementation, test the page with a normal browser load and confirm the expected image candidate is selected at desktop and mobile widths.
Use a repeatable review before publishing
- List each category and its promise. Describe what a visitor should find after clicking, then identify the most representative visual cue.
- Gather candidate images with documented rights. Record the source and license internally. Publish only images you have permission to use; no particular stock provider is established as the right choice for every site.
- Compare candidates using the same criteria. Score category recognition, fit with destination content, distinction from adjacent cards, crop safety, small-screen legibility, alt-text purpose, rights, and file weight. A simple shared checklist is more useful than choosing each image by taste alone.
- Preview the actual component. Put candidates into the site’s real card design. Inspect the whole grid at desktop and narrow mobile widths, including the smallest responsive rendering. Confirm the focal subject survives the crop and neighboring cards remain distinguishable.
- Write the accompanying text and alternatives. Keep labels in HTML. Decide whether each image is informative, decorative, functional, or complex, and provide the matching alternative treatment.
- Inspect the delivered assets and metadata. Check file weight, responsive source selection, filenames, surrounding page copy, and—where appropriate—structured data or
og:imagefor the preferred representative image. - Recheck after layout changes. A new card width or breakpoint can change crop and legibility. Revisit the grid whenever its responsive behavior or image treatment changes.
Check category cards in the browser
The design file is not the final test: the browser’s responsive layout, crop rules, and selected image resources determine what visitors see. A practical manual review is to open the category page, use the browser’s responsive device toolbar, inspect the full grid at the widths your layout supports, and reload after each viewport change. Look for cut-off subjects, cards that become visually indistinguishable, labels that wrap awkwardly, and images that appear soft or unnecessarily large. If you use a CMS, preview its published page rather than trusting only the upload thumbnail.
For repeatable reviews, capture the same category page at a desktop viewport and a narrow mobile viewport and compare the cards side by side. A screenshot is useful for checking composition and consistency; it does not replace keyboard, screen-reader, or accessibility testing.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Or skip the browser setup
ScreenshotNeo can capture a page from one GET request, which is useful when you want a saved view of a category grid without setting up a headless browser. Its capture options include viewport and device presets, full-page capture, custom CSS, and hiding selectors; for this review, use the page’s real card layout and compare the relevant viewport sizes. The API also accepts the parameter names used by other screenshot APIs, which can make switching easier.
One-call cURL example (replace the example target with your category page URL):
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpMore examples and API options are in the ScreenshotNeo documentation. The same GET request can be made in Python or Node.js:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
import requests
r = requests.get("https://api.screenshotneo.com/v1/shot", params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"}, timeout=90)
open("shot.webp", "wb").write(r.content)const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' });
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`);ScreenshotNeo accepts cookie or consent banners like a visitor and removes more than 60 known consent platforms, newsletter popups, and chat widgets before capture; each of those steps can be turned off. Bot checks or CAPTCHAs, blank pages, timeouts, failed loads, and cache hits are not billed, and response headers report the page verdict and billing status. Its MCP server offers take_screenshot, get_page_info, and capture_pdf for Claude, Cursor, and other MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to capture up to 1,000 screenshots a month without a card.
Troubleshoot common category-image problems
The image looks good alone but weak in the grid
Compare it with its neighbors at the same rendered size. Its subject may be too small, its colors may blend into surrounding cards, or its focal point may be cropped out. Adjust the crop or choose a more representative candidate, then recheck the entire set rather than judging that card by itself.
Rank #4
Several categories are hard to tell apart
Revisit the category meaning and make each image’s subject or visual cue more distinct. A consistent style does not mean every card should use the same composition. Keep the common art direction, but vary the element that identifies each destination.
The mobile crop removes important content
Check the responsive card’s crop behavior and focal position. Choose a source with safer composition, adjust the focal point or crop for that breakpoint if the site supports it, or use a different image. Do not solve the problem by shrinking every image until the card no longer works as navigation.
The alt text repeats the label or adds a keyword list
Reassess the image’s purpose in the complete link. If the visible category label already provides the name and the image contributes no additional information, use an empty alt for a decorative image. If it adds meaning, describe that meaning briefly rather than restating the card or stuffing in search phrases.
The page feels slow or the images look soft
Inspect the actual delivered resource and responsive selection. Avoid shipping an unnecessarily large original to a small card, but confirm the browser is not selecting an image too small for its rendered size. Re-export or revise the responsive candidates, then compare both download weight and visual quality in the page.
You are unsure whether an image may be published
Check the license and source before using it, and retain that record with the asset. If the rights are unclear, choose an image whose permission to publish can be established rather than assuming that availability online means reuse is allowed.
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.
