New format
Banner sizes in pixels: how to check on someone else’s site
A banner is an image or interactive block that promotes an offer, section, or partner. Before making “the same as a competitor”, it helps to know the real size in pixels — otherwise the creative breaks layout or bloats page weight.
Below: banner types, why IAB standards aren’t always followed, and how to check sizes with DevTools. Clickable images live in a neighboring piece.
What kinds of banners exist
By delivery form you most often see three types: static files, animation, and interactive.
Choice depends on the job and the speed budget: the more complex the creative, the higher the risk of LCP delay and user annoyance.
Types:
- static JPEG/PNG/WebP — simpler and lighter
- animation (GIF or video preview) — clearer, heavier
- interactive (HTML/JS) — clicks, forms, motion; harder to maintain
Sizes: standards and reality
Ad associations and networks publish typical formats (e.g. IAB ranges), and social platforms set their own pixels for feed and stories.
On regular sites sizes are often arbitrary: for the layout grid, a mobile breakpoint, or a “hole” in the sidebar. There’s no universal “centimeter” web classification — you count CSS pixels and the file source.
What to watch for your own creative:
- slot in the layout (column width / max-width)
- retina: sometimes prepare 2× but serve a compressed file
- mobile — a separate size or responsive
- placement specs if it’s external ads
How to find a banner’s size on someone else’s site
If you need to match slot dimensions (not copy someone else’s file), open the page in Chrome/Firefox/Safari and use developer tools.
Short algorithm:
- right-click the banner → Inspect
- in the DOM find the `img` or banner container
- check width/height in attributes or computed size
- if unsure, open the image URL and verify the natural file size
Nuances:
- CSS may shrink the image — display ≠ intrinsic
- background via `background-image` — look in Styles, not img attributes
- iframe/ad network — size may sit on the container, not the file
Why arbitrary sizes are normal
Sites adapt blocks for different screens and grids. A rigid “728×90 everywhere” hasn’t been the only option for a long time.
What matters is the banner doesn’t break reading, doesn’t cover CTAs, and doesn’t weigh like a separate page. If the creative is useful (a clear offer, a diagram), people tolerate it more than an empty screaming GIF.
FAQ
Where in DevTools do I see size?
Right-click the banner → Inspect. On the selected node check width/height on img or the computed size in Styles/Computed and the hover tooltip over the node.
Does HTML width equal the real file?
Not always. Attributes and CSS can scale the image. For the source, check Network → resource size or open the image URL in a new tab.
Are there mandatory banner sizes?
Ad networks and social platforms have their own specs. On regular sites webmasters often use arbitrary formats for the layout.
What’s the difference between static, GIF, and HTML5 banners?
JPEG/PNG are lighter and simpler. GIF is animation but heavy. HTML5/JS is interactive, more load, harder to measure as “one image”.
Why copy a competitor’s size?
So the creative fits a similar slot without cropping. Idea and offer should still be yours; don’t copy others’ assets without rights.
How do I avoid killing page speed?
Don’t inflate pixels “just in case”: needed display size + compression (WebP/AVIF), width/height in markup, lazy below the fold.
Is a banner an image link?
Often yes: img inside a. Same rules — clear alt, your own file, sane weight. See the image-link post.
Banner creative keeps cropping because the slot size was a guess?
We’ll pull display vs file size via Inspect and set your own compressed creative — not a copy of someone else’s asset.
Discuss the task
