How AI Agents See Your Website: The 1568-Pixel Rule

---

Anthropic confirmed it in their docs. Most websites accidentally hide half their content from AI agents.

You won't find this in any agency deck. It's buried in the Anthropic Computer Use specification, and it changes how every D2C and SaaS landing page should be designed if you care about AI search traffic.

This article walks through the actual spec, the seven types of content that disappear at agent resolution, how to test your own site in 10 minutes, and the five fixes that take an afternoon.

The 1568-Pixel Rule from Anthropic's Documentation

Anthropic's Computer Use documentation is direct about it:

"The API constrains images to a maximum of 1568 pixels on the longest edge and approximately 1.15 megapixels total."

That's straight from the Anthropic Computer Use docs. Every screenshot Claude takes on your site goes through this downsample before the model sees it.

What does that mean in practice?

Take a typical 4K landing page rendered at 3840 x 2160 pixels. The longest edge is 3840. The 1568-pixel constraint scales it down by a factor of about 0.41, producing a screenshot at roughly 1568 x 882 pixels. That's a 58% reduction in linear resolution. In terms of pixel count, you've gone from 8.3 megapixels to about 1.4 megapixels. The 1.15 MP cap then forces another small compression on top.

Anthropic's own example in the docs: a 1512 x 982 screen gets resampled to approximately 1330 x 864.

In other words, the agent never sees what you designed. It sees a compressed version of it.

There's one nuance worth knowing. Claude Opus 4.7, released as part of the computer-use-2025-11-24 beta in November 2025, supports up to 2576 pixels on the long edge instead of 1568. That's a meaningful upgrade, but it only applies if your application uses the latest beta header and the latest model. Most agentic browsing happening in 2026 still runs on the 1568px constraint. That includes the older Sonnet and Haiku lines, plus most third-party agent integrations that haven't migrated yet.

So the 1568px rule is the working assumption. Designing around it is also future-proofing: even on Opus 4.7, your 4K hero still gets compressed to ~2576px, which is still less than half the linear resolution of a typical desktop user.

Why Resolution Matters Now (E-commerce and SaaS Stakes)

This isn't a hypothetical. AI agents are already shopping and signing up on behalf of users.

• ChatGPT Operator launched in early 2025, riding on top of OpenAI's user base of 800M+ weekly ChatGPT users.
• Anthropic Computer Use moved from research preview into production deployments through 2025.
• Perplexity rolled out Perplexity Shopping, where users describe what they want and the agent compares vendors and returns options.

When an AI agent shops on behalf of a user, here's what happens to your store:

1. The user prompts something like "find me a pair of running shoes under $150 with good arch support and free returns."
2. The agent visits four to six vendor sites.
3. It takes screenshots, parses what it sees, and returns a shortlist.

If the agent can't read your "Free returns within 30 days" disclaimer because it's in 12px gray text in your footer, you didn't make the shortlist. The user never knew you were a candidate.

This isn't a marginal traffic source anymore. For early-adopter shoppers, it's becoming the default way to find products. The same compounds for B2B SaaS: an AI agent comparing CRMs cannot see your "starts at $49 per seat" pricing if your value props are baked into a logo strip with no alt text.

The cost of getting this wrong is invisible. You won't see "AI agent skipped you" in your analytics. You'll just see flat conversion from a growing channel.

7 Elements That Disappear at Agent Resolution

These are the patterns that consistently fail at 1568px. For each, what humans see, what agents see, why it kills conversions, and the fix.

1. SSL and Payment Trust Badges

A typical D2C product page has a row of trust signals near the add-to-cart button. Norton Secured, Visa, Mastercard, sometimes a "Money-Back Guarantee" seal. At agent resolution these compress into a row of indistinct gray blobs.

Why it matters: the human shopper subconsciously registers "this is a legit store." The AI agent registers nothing. It cannot tell you accept Visa, that you're SSL-secured, or that there's a guarantee.

The fix: add accompanying text. Below the badge row, include a single line: "Secured by SSL. Payments via Visa, Mastercard, Amex, and PayPal. 30-day money-back guarantee." That sentence is human-readable, AI-readable, and screen-reader-readable. Triple win.

2. Pricing Footnotes and Shipping Disclaimers

That asterisk text below your prices is invisible at agent resolution. Free shipping over $75. Tax calculated at checkout. Subscribe-and-save 15%. None of it makes it to the agent.

This is especially dangerous for shopping agents. Users routinely prompt "find me X with free shipping." If your free-shipping threshold is in 11px footnote text, the agent doesn't know.

The fix: pull the most decision-relevant disclaimer into the main pricing copy at 14px or larger. "Free shipping over $75 in the US" should be one line beside the price, not in the footer.

3. Form Reassurance Microcopy

The text under email capture fields and checkout forms ("We'll never spam you," "Unsubscribe anytime," "Your card is encrypted") is usually 11-12px gray-on-white. Designed to be unobtrusive. Which means agent-invisible.

For e-commerce checkout: the "Your payment is secured" line directly under the credit card field is supposed to reduce abandonment. At agent resolution it's gone. The agent only sees the form fields themselves.

The fix: 14px minimum. Use a slightly stronger color (not the default mid-gray). If the microcopy is genuinely important to conversion, treat it like body copy, not like a legal whisper.

4. "As Seen In" Press Logos and Retailer Strips

Logo strips are pure visual social proof. "As seen in Forbes, TechCrunch, Vogue." Or for D2C: "Available at Sephora, Ulta, Target." At desktop resolution the brand recognition does the work. At agent resolution, the agent sees a row of gray rectangles.

The fix: include the publication or retailer names as actual text alongside the logos. "As seen in Forbes, TechCrunch, and Vogue" as a heading above the visual strip. Or use proper alt text on each logo: alt="Featured in Forbes". Better still, do both. Schema.org Organization markup with publisher references helps too.

5. Footer Disclaimers, Returns, Shipping Info, Customer Service Hours

The footer is graveyard real estate. Address, hours, return policy summary, shipping zones, accessibility statement, copyright. All in 10-11px text. All gone at agent resolution.

For e-commerce specifically: agents often need shipping and return info to recommend your store. "Free returns" and "Ships to Canada" might be the deciding factors in a recommendation. If they're only in the footer at footer-text size, the agent can't find them.

The fix: surface critical commerce info higher on the page. A small banner at the top of product pages stating shipping zones and return window. Or a dedicated "Shipping & Returns" link in the main nav that the agent can read as text. Don't bury commerce-critical info in footer-grade typography.

6. Product Specs Comparison Tables

Side-by-side spec tables are common on B2B SaaS pricing pages and on product detail pages for technical e-commerce (electronics, supplements, athletic gear). At desktop resolution they're scannable. At agent resolution, the checkmark grid blurs into noise. The agent sees a textured rectangle.

The fix: in addition to the table, write out the differences in prose. "The Pro plan includes everything in Starter, plus team workspaces, audit logs, and SSO." For a product comparison: "This running shoe weighs 240g, has a 10mm drop, and is built for road running." Prose form is unambiguous to both humans and agents. Use Schema.org Product markup with explicit attributes.

7. Collapsed FAQ Blocks (Sizing, Shipping, Returns)

The FAQ accordion at the bottom of every D2C product page. "What size should I order?" "How long does shipping take?" "What's your return policy?" By default, all answers are hidden. When the agent renders the page, only the questions are visible.

Even when expanded, the answers are typically 12-13px. So they're either hidden, or unreadable. Both fail.

The fix: expand FAQs by default at minimum 14px, OR mirror them in a FAQPage Schema.org block in your page's JSON-LD. The structured data path is actually preferable. Agents that don't render JavaScript at all will still see the questions and answers via the schema.

How to Test What an Agent Sees on Your Site

You can simulate agent vision in 10 minutes with Chrome DevTools.

1. Open your product or pricing page in Chrome.
2. Press F12 to open DevTools, then Ctrl+Shift+M to toggle the device toolbar.
3. Set the viewport to a custom size of 1568 x 1024. This matches the agent's working resolution.
4. Take a full-page screenshot via the DevTools menu (three dots in the device toolbar) → "Capture full size screenshot."
5. Apply a 2-3px Gaussian blur to that screenshot. Use any image editor, or a free online tool like Photopea or Pixlr. A 2px blur approximates the kind of compression artifacts that AI agents process.
6. Read your own page. What's still legible? What's not? Pay special attention to your trust badges, pricing footnotes, and any copy below 14px.

This manual test takes about 10 minutes per page. It's tedious but accurate.

If you want to skip the manual setup, you can paste your URL into Crawloria and see exactly what Claude Computer Use sees on your site, with the readability assessment baked in. The free audit also flags which of the seven elements above are present and unreadable.

Either way, manual or tooled, test your top three commerce pages. Homepage, top product or pricing page, and checkout. Those are the pages an agent visits when shopping on a user's behalf.

5 Practical Fixes to Make Your Site Agent-Readable

Total time investment: one afternoon for most sites.

1. Set 14px as your minimum font size for any conversion-critical text. Body copy, microcopy, footnotes, FAQ answers, button helper text. All 14px or larger. Most sites currently use 11-13px for these elements. The bump to 14px reads cleaner for humans too, and it survives the agent downsample. This is the single highest-leverage change.

2. Add alt attributes to every value-prop image. Logo strips, badge rows, hero illustrations with text in them, "as seen in" graphics. Each one needs an alt describing the substance. Not "logo." Use alt="Featured in Forbes" or alt="SSL secured by Norton, PCI DSS Level 1 compliant." Agents read alt text directly without compression issues.

3. Use semantic HTML headings (<h1>, <h2>, <h3>) instead of styled <div>s. A <div class="text-2xl font-bold"> looks identical to a heading visually but is invisible to agents traversing your content semantically. Real heading tags create the document outline that agents use to skim.

4. Replace logo-only social proof with text-plus-logo. Anywhere you have a row of logos, add a heading or sentence with the brand names spelled out. The visual logos still do their human job. The text gives agents and screen readers something to parse.

5. Add Schema.org structured data for products, prices, FAQs, and reviews. The big four for e-commerce: Product (with offers, aggregateRating, review), FAQPage, Organization, BreadcrumbList. These render as JSON-LD in your <head> and bypass the visual compression problem entirely. Agents extract them as structured facts.

Each of these is a one-to-three-hour change for an existing site. Together they take a small amount of dev time and fundamentally change how readable your site is to an AI agent.

FAQ

Does the 1568-pixel constraint affect mobile users?

No. Mobile users see your site through their actual device viewport (typically 390-430px wide for phones). The 1568px constraint applies only to AI agents using image-based vision pipelines like Claude Computer Use. Mobile UX and AI-agent UX are separate problems, though they often have the same fix. Readable typography helps both audiences.

What about Claude's new zoom feature, doesn't that solve it?

Partially. Claude Opus 4.7 introduced a zoom action that lets the agent inspect a specific region at higher detail. It helps when the agent suspects there's small text and chooses to zoom in. But two things to know. First, the agent only zooms when it has a reason to, so it still has to detect there's something worth zooming on. Second, most agentic browsing in 2026 still runs on older models without zoom. Designing for the broader 1568px constraint is the safer assumption.

Is this different from regular SEO?

Yes, and it's complementary. Traditional SEO optimizes for crawlers like Googlebot, which parse your HTML directly without rendering. Agent visibility optimizes for vision-based agents that take screenshots and read what's visually rendered. Both sets of fixes overlap in places (semantic HTML, alt text, structured data help both), but agent visibility adds requirements around minimum font sizes and visual contrast that traditional SEO doesn't enforce.

How is this different from web accessibility?

A lot of overlap. WCAG accessibility guidelines push toward the same fixes: minimum font sizes, alt text, semantic headings, sufficient color contrast. If your site is already WCAG 2.1 AA compliant, you've solved most of the agent-readability problem. The differences: agents don't care about screen reader navigation order, but they do care about Schema.org markup, which accessibility doesn't directly address.

Will this resolution constraint change?

It already has, partially. Claude Opus 4.7 supports 2576 pixels on the long edge as of November 2025. But the constraint is unlikely to disappear entirely. Vision models scale image processing cost roughly with pixel count, and for agents that take many screenshots per session, pixel budgets matter. Expect the limit to keep loosening, but design as if you have ~2000px to work with for the next year or two.

Does Google's AI Overviews have the same limit?

Different mechanism. Google's AI Overviews work primarily from indexed text and structured data, not screenshots, so the 1568px constraint doesn't directly apply. But the underlying lesson does. Text trapped inside images is invisible to AI Overviews too, just for a different reason. The fixes (semantic HTML, alt text, Schema.org) apply equally.

How much traffic could I be losing right now?

It depends on your category. Categories with high AI-agent shopping intent (electronics, supplements, software, travel) probably already see 5-15% of comparison-stage traffic mediated by an agent in early 2026. Pure-search categories (local services, very long-tail queries) see less. The honest answer: nobody has clean data yet because most analytics platforms attribute agent-mediated visits to whatever the user does after seeing the agent's recommendation. Run your own A/B test. Fix the seven elements, measure conversion delta on traffic from *.openai.com and *.anthropic.com referrers in your logs.

What's the easiest first fix?

Bump your minimum font size to 14px globally. One CSS change. Affects roughly 80% of the seven failure modes above, and improves human readability as a side effect.

What's Next

The 1568-pixel constraint is one of several places agents quietly fail on websites. Three more to cover in upcoming articles:

• Cookie banners that block agents from rendering anything below the modal until consent is clicked
• Cloudflare and other bot protection layers that block AI agents at the network level before any content loads
• Token cost economics and why agents skip token-heavy pages even when they can read them

Want to know how your site scores for AI agent readiness? Run a free audit. It checks the 1568px elements covered above plus 18 others, and produces a 0-100 score with specific issues and fixes.