Image and CSS checks: dimensions, color, contrast and layout

Example: prepare assets for one page

A product card looks polished in a large desktop mockup: a soft shadow, a pale label and a photographic cover. At a narrow width the label wraps, the cover crops the subject and the shadow no longer separates the card from its background. The issue is not the validity of the generated CSS. It is that the acceptance conditions were defined for only one static view.

Choose dimensions for the display context

Start with the content and the intended image ratio. Crop a copy around the subject, resize to the display needs and compare encodings before accepting a file-size reduction. Inspect small text, transparency and gradient edges at the real display size. A contact sheet can gather 2–20 images into one PNG review grid with optional numbered filenames, but long names may be shortened in the cells; keep the full filename list and open any doubtful image at full detail.

Review colors and styles on the page

Finally test the exported rules in the interface. For fluid type, verify both endpoint sizes against the chosen root font size, the midpoint, narrow-screen wrapping and 200% browser zoom. Grid layouts need narrow-screen behavior, and a filter can change a photograph’s apparent contrast. Save the final parameters with the asset and compare a light and dark view. The useful output is a reproducible decision with a verified component, not merely a CSS snippet that parses successfully.

A repeated SVG background needs a one-tile file with matching opposite edges. Preview the tiled field, then keep the intrinsic tile size in CSS and inspect the real page for seams and legible text.

For a card grid, inspect a narrow container and a wider one with real titles and descriptions. The generated auto-fit rule changes columns with container width, but a long unbroken child can still overflow; check the final component.

For an image filter, compare before and after on the actual local photo while adjusting all five values together. Copy the CSS only after checking the surrounding background and any child content; the photo file itself is not rewritten.

When a deliverable must itself look gray, convert the image pixels and compare the new PNG with the source. Check whether colored details collapse to similar grays and whether transparent edges stay usable. A gray-looking RGB PNG does not certify a printer's Gray or CMYK color space.

For a watermarked proof, add your own text to one image and inspect the exported PNG at full size. Check contrast, the lower-right placement and whether important details remain visible. A visible label can be cropped or edited away.

For a simple outer border, enter one pixel width for all four sides, then compare the uncropped picture with the exported PNG. Confirm the new canvas dimensions and ratio before placing it into a fixed-size social or print layout.

For a long screenshot, arrange the source images in reading order before stitching. Set zero spacing if the edges already meet, then inspect the output at actual pixels for doubled or missing content. A simple join does not detect overlapping scroll captures.

Black on white has a 21:1 contrast ratio. Real components also need visible focus, non-color cues and adequate text sizing.

Check narrow screens, detail and contrast

Finally test the exported rules in the interface. Fluid type needs sensible minimum and maximum values, grid layouts need narrow-screen behavior, and a filter can change a photograph’s apparent contrast. Save the final parameters with the asset and compare a light and dark view. The useful output is a reproducible decision with a verified component, not merely a CSS snippet that parses successfully.

• Crop first, resize next, and compress in the target format last.
• Inspect transparent edges on both light and dark backgrounds.
• Compare chart colors as a palette, then verify the finished design with labels or patterns and real users.

Tools used in this article