{"id":7463,"date":"2026-07-06T16:06:16","date_gmt":"2026-07-06T16:06:16","guid":{"rendered":"https:\/\/usaonboard.com\/technical-specifications-for-web-banners\/"},"modified":"2026-07-06T16:10:30","modified_gmt":"2026-07-06T16:10:30","slug":"technical-specifications-for-web-banners","status":"publish","type":"page","link":"https:\/\/usaonboard.com\/es\/technical-specifications-for-web-banners\/","title":{"rendered":"Technical Specifications for\u00a0Web Banners"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-page\" data-elementor-id=\"7463\" class=\"elementor elementor-7463 elementor-7458\" data-elementor-post-type=\"page\">\n\t\t\t\t<div class=\"elementor-element elementor-element-4d0757e9 e-con-full e-flex e-con e-parent\" data-id=\"4d0757e9\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t<div class=\"elementor-element elementor-element-524f8e36 e-con-full e-flex e-con e-child\" data-id=\"524f8e36\" data-element_type=\"container\" data-e-type=\"container\">\n\t\t\t\t<div class=\"elementor-element elementor-element-53aefd5 elementor-widget elementor-widget-html\" data-id=\"53aefd5\" data-element_type=\"widget\" data-e-type=\"widget\" data-widget_type=\"html.default\">\n\t\t\t\t\t\n<link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\"\/>\n<link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin\/>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400;1,500;1,600&family=Jost:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\"\/>\n\n<div class=\"uob-wb\">\n<style>\n.uob-wb{\n  --serif:\"Cormorant Garamond\",Georgia,serif;\n  --sans:\"Jost\",-apple-system,sans-serif;\n  --ink:#0a0a0a; --ink-mid:#2c2c2c; --ink-soft:#6a6a6a; --ink-faint:#9a9a9a;\n  --paper:#ffffff; --off-white:#faf8f5; --cream:#f3efe8; --cream-deep:#e6dec9;\n  --navy:#0c1b2a; --navy-light:#152638; --navy-mid:#1d3247;\n  --gold:#b08d57; --gold-lt:#c9a96e; --gold-dk:#8a6b38; --gold-bg:#f7f0e3;\n  --line:#ddd5c5; --line-soft:#ebe4d4; --emerald:#2d6b5a; --crimson:#8b2e2a;\n  font-family:var(--sans);background:var(--off-white);color:var(--ink);\n  line-height:1.6;font-size:16px;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;overflow-x:hidden;\n}\n.uob-wb *,.uob-wb *::before,.uob-wb *::after{box-sizing:border-box;margin:0;padding:0;}\n.uob-wb a{color:inherit;text-decoration:none;}\n.uob-wb svg{display:block;max-width:100%;}\n\n.uob-wb .wrap{max-width:1080px;margin:0 auto;padding:0 40px;}\n.uob-wb .eyebrow{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.3em;\n  text-transform:uppercase;color:var(--gold-lt);display:inline-flex;align-items:center;gap:14px;}\n.uob-wb .eyebrow::before{content:\"\";width:34px;height:1px;background:var(--gold-lt);}\n\n\/* \u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550 *\/\n.uob-wb .hero{background:linear-gradient(165deg,var(--navy) 0%,#081420 55%,var(--navy-light) 100%);\n  color:#fff;padding:76px 0 66px;position:relative;overflow:hidden;}\n.uob-wb .hero::before{content:\"\";position:absolute;inset:0;\n  background-image:radial-gradient(circle at 16% 22%,rgba(176,141,87,.16),transparent 46%),\n                   radial-gradient(circle at 86% 80%,rgba(176,141,87,.10),transparent 50%);}\n.uob-wb .hero-inner{position:relative;max-width:760px;}\n.uob-wb .hero h1{font-family:var(--serif);font-size:52px;font-weight:400;line-height:1.04;margin:20px 0 16px;}\n.uob-wb .hero h1 em{font-style:italic;color:var(--gold-lt);}\n.uob-wb .hero p{font-family:var(--serif);font-size:21px;font-weight:300;font-style:italic;\n  line-height:1.5;color:rgba(255,255,255,.84);max-width:640px;}\n\n\/* \u2550\u2550\u2550\u2550 SECTION SCAFFOLD \u2550\u2550\u2550\u2550 *\/\n.uob-wb .sec{padding:72px 0;}\n.uob-wb .sec.alt{background:var(--cream);}\n.uob-wb .sec-num{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.16em;\n  text-transform:uppercase;color:var(--gold-dk);display:inline-flex;align-items:center;gap:10px;\n  padding-bottom:10px;border-bottom:2px solid var(--gold);margin-bottom:18px;}\n.uob-wb .sec h2{font-family:var(--serif);font-size:36px;font-weight:500;color:var(--navy);line-height:1.12;margin-bottom:12px;}\n.uob-wb .sec h2 em{font-style:italic;color:var(--gold);}\n.uob-wb .sec > .wrap > p.lead{font-size:16.5px;color:var(--ink-soft);line-height:1.7;max-width:720px;margin-bottom:6px;}\n\n\/* \u2550\u2550\u2550\u2550 DIMENSIONS \u00b7 the hero visual \u2550\u2550\u2550\u2550 *\/\n.uob-wb .dims{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:44px;align-items:end;}\n.uob-wb .dim{background:var(--paper);border:1px solid var(--line);padding:30px 28px;text-align:center;\n  transition:transform .2s,box-shadow .2s;}\n.uob-wb .dim:hover{transform:translateY(-4px);box-shadow:0 18px 44px rgba(12,27,42,.1);}\n.uob-wb .dim .preview{display:flex;align-items:center;justify-content:center;height:150px;margin-bottom:22px;}\n.uob-wb .dim .shape{background:linear-gradient(135deg,var(--navy),var(--navy-mid));\n  border:1px solid var(--gold-dk);position:relative;display:flex;align-items:center;justify-content:center;}\n.uob-wb .dim .shape::after{content:attr(data-ratio);font-family:var(--sans);font-size:10px;font-weight:600;\n  letter-spacing:.1em;color:var(--gold-lt);}\n\/* proportional shapes *\/\n.uob-wb .shape.leaderboard{width:182px;height:22.5px;}\n.uob-wb .shape.square{width:90px;height:90px;}\n.uob-wb .shape.vertical{width:72px;height:120px;}\n.uob-wb .dim .dim-name{font-family:var(--serif);font-size:24px;font-weight:600;color:var(--navy);margin-bottom:6px;}\n.uob-wb .dim .dim-px{font-family:var(--sans);font-size:22px;font-weight:600;color:var(--gold-dk);letter-spacing:.01em;margin-bottom:12px;}\n.uob-wb .dim .dim-px span{font-size:13px;color:var(--ink-faint);font-weight:500;}\n.uob-wb .dim .dim-place{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.1em;\n  text-transform:uppercase;color:var(--ink-soft);padding-top:12px;border-top:1px solid var(--line-soft);}\n\n\/* \u2550\u2550\u2550\u2550 SPEC CARDS \u2550\u2550\u2550\u2550 *\/\n.uob-wb .specs{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:40px;}\n.uob-wb .spec{background:var(--paper);border:1px solid var(--line);padding:24px 26px;display:flex;gap:16px;align-items:flex-start;}\n.uob-wb .spec .ic{width:44px;height:44px;border:1.5px solid var(--gold);display:flex;align-items:center;justify-content:center;flex-shrink:0;}\n.uob-wb .spec .ic svg{width:22px;height:22px;color:var(--gold-dk);}\n.uob-wb .spec .sp-body h4{font-family:var(--serif);font-size:20px;font-weight:600;color:var(--navy);line-height:1.15;margin-bottom:5px;}\n.uob-wb .spec .sp-body p{font-size:14px;color:var(--ink-soft);line-height:1.6;}\n.uob-wb .spec .sp-body p b{color:var(--navy);font-weight:600;}\n.uob-wb .spec .sp-body .tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px;}\n.uob-wb .spec .sp-body .tag{font-family:var(--sans);font-size:11px;font-weight:600;letter-spacing:.04em;\n  padding:5px 11px;background:var(--gold-bg);color:var(--gold-dk);border:1px solid var(--gold-lt);border-radius:2px;}\n.uob-wb .spec .sp-body .warn{color:var(--crimson);font-style:italic;}\n\n\/* \u2550\u2550\u2550\u2550 RULES \u00b7 numbered flow \u2550\u2550\u2550\u2550 *\/\n.uob-wb .rules{margin-top:40px;display:grid;gap:16px;}\n.uob-wb .rule{display:grid;grid-template-columns:auto 1fr;gap:22px;background:var(--paper);\n  border:1px solid var(--line);padding:26px 30px;align-items:center;}\n.uob-wb .rule .rn{font-family:var(--serif);font-size:42px;font-weight:600;color:var(--gold-lt);line-height:1;width:44px;text-align:center;}\n.uob-wb .rule .rb h4{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--navy);margin-bottom:5px;}\n.uob-wb .rule .rb p{font-size:14.5px;color:var(--ink-soft);line-height:1.6;}\n.uob-wb .rule .rb p b{color:var(--navy);font-weight:600;}\n\n\/* \u2550\u2550\u2550\u2550 PRO TIP \u2550\u2550\u2550\u2550 *\/\n.uob-wb .tip{margin-top:40px;background:var(--navy);color:#fff;padding:32px 38px;display:flex;gap:20px;\n  align-items:flex-start;position:relative;overflow:hidden;}\n.uob-wb .tip::before{content:\"\";position:absolute;top:-60px;right:-60px;width:180px;height:180px;\n  background:radial-gradient(circle,rgba(176,141,87,.18),transparent 62%);}\n.uob-wb .tip .tip-ic{width:46px;height:46px;border:1.5px solid var(--gold-lt);border-radius:50%;\n  display:flex;align-items:center;justify-content:center;flex-shrink:0;position:relative;}\n.uob-wb .tip .tip-ic svg{width:24px;height:24px;color:var(--gold-lt);}\n.uob-wb .tip .tip-body{position:relative;}\n.uob-wb .tip .tip-body .tl{font-family:var(--sans);font-size:11px;font-weight:700;letter-spacing:.18em;\n  text-transform:uppercase;color:var(--gold-lt);margin-bottom:8px;}\n.uob-wb .tip .tip-body h4{font-family:var(--serif);font-size:23px;font-weight:500;margin-bottom:8px;}\n.uob-wb .tip .tip-body p{font-size:14.5px;color:rgba(255,255,255,.82);line-height:1.65;}\n.uob-wb .tip .tip-body p b{color:#fff;font-weight:600;}\n\n@media(max-width:820px){\n  .uob-wb .hero h1{font-size:40px;}\n  .uob-wb .dims{grid-template-columns:1fr;gap:16px;}\n  .uob-wb .dim .preview{height:auto;padding:20px 0;}\n  .uob-wb .specs{grid-template-columns:1fr;}\n}\n@media(max-width:520px){\n  .uob-wb .wrap{padding:0 22px;}\n  .uob-wb .sec h2{font-size:29px;}\n  .uob-wb .rule{grid-template-columns:1fr;gap:10px;}\n  .uob-wb .rule .rn{text-align:left;}\n  .uob-wb .tip{flex-direction:column;gap:14px;}\n}\n<\/style>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 HERO \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"hero\">\n  <div class=\"wrap hero-inner\">\n    <span class=\"eyebrow\">Digital Advertising \u00b7 Specifications<\/span>\n    <h1>Technical Specifications for <em>Web Banners<\/em><\/h1>\n    <p>A short, exact guide to preparing banner assets that display flawlessly across every USA ONBOARD site, and pass review the first time.<\/p>\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 01 \u00b7 DIMENSIONS \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"sec\">\n  <div class=\"wrap\">\n    <div class=\"sec-num\">01 \u00b7 Required Dimensions<\/div>\n    <h2>Three formats, three <em>exact<\/em> sizes.<\/h2>\n    <p class=\"lead\">Supply each creative at these exact pixel dimensions. Assets that do not match will not pass review.<\/p>\n    <div class=\"dims\">\n      <div class=\"dim\">\n        <div class=\"preview\"><div class=\"shape leaderboard\" data-ratio=\"\"><\/div><\/div>\n        <div class=\"dim-name\">Leaderboard<\/div>\n        <div class=\"dim-px\">728 x 90 <span>px<\/span><\/div>\n        <div class=\"dim-place\">Desktop &amp; Tablet<\/div>\n      <\/div>\n      <div class=\"dim\">\n        <div class=\"preview\"><div class=\"shape square\" data-ratio=\"\"><\/div><\/div>\n        <div class=\"dim-name\">Square<\/div>\n        <div class=\"dim-px\">250 x 250 <span>px<\/span><\/div>\n        <div class=\"dim-place\">Sidebar &amp; Mobile<\/div>\n      <\/div>\n      <div class=\"dim\">\n        <div class=\"preview\"><div class=\"shape vertical\" data-ratio=\"\"><\/div><\/div>\n        <div class=\"dim-name\">Vertical Banner<\/div>\n        <div class=\"dim-px\">240 x 400 <span>px<\/span><\/div>\n        <div class=\"dim-place\">Specialized Content<\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 02 \u00b7 TECHNICAL \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"sec alt\">\n  <div class=\"wrap\">\n    <div class=\"sec-num\">02 \u00b7 Technical Requirements<\/div>\n    <h2>How each file should be <em>built.<\/em><\/h2>\n    <p class=\"lead\">Four things keep your banner sharp and fast on every screen.<\/p>\n    <div class=\"specs\">\n      <div class=\"spec\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M4 4h13l3 3v13H4z\"\/><path d=\"M8 12h8M8 16h5\"\/><\/svg><\/div>\n        <div class=\"sp-body\">\n          <h4>File Formats<\/h4>\n          <p>Static or animated, in any of these formats.<\/p>\n          <div class=\"tags\"><span class=\"tag\">JPG<\/span><span class=\"tag\">PNG<\/span><span class=\"tag\">WebP<\/span><span class=\"tag\">GIF \u00b7 animated<\/span><\/div>\n        <\/div>\n      <\/div>\n      <div class=\"spec\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M3 3v18h18\"\/><path d=\"M7 14l4-4 3 3 5-6\"\/><\/svg><\/div>\n        <div class=\"sp-body\">\n          <h4>Maximum File Size<\/h4>\n          <p><b>150 KB<\/b> per banner, optimized for fast web loading. Lighter files load and render better.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"spec\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><circle cx=\"12\" cy=\"12\" r=\"9\"\/><path d=\"M12 3a9 9 0 0 1 0 18z\"\/><\/svg><\/div>\n        <div class=\"sp-body\">\n          <h4>Color Profile<\/h4>\n          <p><b>RGB or sRGB.<\/b> <span class=\"warn\">CMYK and print files are not supported and will display the wrong colors.<\/span><\/p>\n        <\/div>\n      <\/div>\n      <div class=\"spec\">\n        <div class=\"ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"1\"\/><path d=\"M3 9h18M9 21V9\"\/><\/svg><\/div>\n        <div class=\"sp-body\">\n          <h4>Resolution<\/h4>\n          <p>Web standard, screen-optimized. What matters is the <b>exact pixel size<\/b> above; DPI does not affect on-screen display.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<!-- \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 03 \u00b7 RULES \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 -->\n<section class=\"sec\">\n  <div class=\"wrap\">\n    <div class=\"sec-num\">03 \u00b7 Campaign Rules &amp; Delivery<\/div>\n    <h2>What every banner <em>needs<\/em> to go live.<\/h2>\n    <div class=\"rules\">\n      <div class=\"rule\">\n        <div class=\"rn\">1<\/div>\n        <div class=\"rb\">\n          <h4>A destination link is required<\/h4>\n          <p>Every banner size you upload must include a valid destination URL. <b>No banner goes live without one.<\/b><\/p>\n        <\/div>\n      <\/div>\n      <div class=\"rule\">\n        <div class=\"rn\">2<\/div>\n        <div class=\"rb\">\n          <h4>Multiple variants rotate evenly<\/h4>\n          <p>Upload more than one banner for the same size and they will be <b>rotated evenly<\/b>, with equal exposure for each variant.<\/p>\n        <\/div>\n      <\/div>\n      <div class=\"rule\">\n        <div class=\"rn\">3<\/div>\n        <div class=\"rb\">\n          <h4>Review needs image plus link<\/h4>\n          <p>Each banner requires <b>both an image asset and a destination URL<\/b> before the campaign can be submitted for review.<\/p>\n        <\/div>\n      <\/div>\n    <\/div>\n\n    <!-- PRO TIP -->\n    <div class=\"tip\">\n      <div class=\"tip-ic\"><svg viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"1.6\"><path d=\"M9 18h6M10 22h4M12 2a7 7 0 0 0-4 12.7c.6.5 1 1.3 1 2.1V17h6v-.2c0-.8.4-1.6 1-2.1A7 7 0 0 0 12 2z\"\/><\/svg><\/div>\n      <div class=\"tip-body\">\n        <div class=\"tl\">Pro Tip for Advertisers<\/div>\n        <h4>Keep animation short and light.<\/h4>\n        <p>For animated GIFs we recommend a <b>maximum duration of 15 seconds<\/b> and a <b>loop limit of 3<\/b>. It delivers the best user experience and keeps you aligned with modern browser standards.<\/p>\n      <\/div>\n    <\/div>\n  <\/div>\n<\/section>\n\n<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Digital Advertising \u00b7 Specifications Technical Specifications for Web Banners A short, exact guide to preparing banner assets that display flawlessly across every USA ONBOARD site, and pass review the first time. 01 \u00b7 Required Dimensions Three formats, three exact sizes. Supply each creative at these exact pixel dimensions. Assets that do not match will not [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"_acf_changed":false,"slim_seo":{"title":"Technical Specifications for\u00a0Web Banners - USA ONBOARD","description":"Digital Advertising \u00b7 Specifications Technical Specifications for Web Banners A short, exact guide to preparing banner assets that display flawlessly across eve"},"footnotes":""},"class_list":["post-7463","page","type-page","status-publish","hentry"],"acf":[],"_links":{"self":[{"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/pages\/7463","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/comments?post=7463"}],"version-history":[{"count":1,"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/pages\/7463\/revisions"}],"predecessor-version":[{"id":7464,"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/pages\/7463\/revisions\/7464"}],"wp:attachment":[{"href":"https:\/\/usaonboard.com\/es\/wp-json\/wp\/v2\/media?parent=7463"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}