Fixing my pixelated portfolio screenshots with headless Chrome

Small confession: half the portfolio thumbnails on this site were stock-photo-adjacent placeholders, or screenshots taken months apart at different sizes, so the grid never quite lined up. Today I finally fixed it properly instead of nudging CSS around it.

The fix wasn’t a service or a plugin, it was just headless Chrome, already sitting on my machine. A one-line command renders any URL and saves a screenshot at whatever size you ask for:

chrome --headless --window-size=1600,1000 --force-device-scale-factor=2 --screenshot=out.png https://example.com

The device-scale-factor flag was the part I’d missed before — without it you get a screenshot at 1x that looks fine at its native size and pixelated the moment a card scales it up. Capture at 2x, resize down for the card, and it stays sharp on a retina screen instead of looking like a JPEG someone re-saved four times.

The other half of the fix was less technical: most cookie-consent banners sit fixed to the bottom of the viewport, so a straight screenshot always had one photobombing the bottom third. Cropping to the top of the page before the banner’s position solved it without touching a single line of the actual sites.

Not a big engineering story. But the portfolio grid finally looks like it was built on purpose, and that counts for something.