Modern banner production isn’t about one-off static JPGs. It’s about flexible HTML5 sets that can live across Google Display, Meta, LinkedIn, and retail media — without burning out your team.

This step‑by‑step tutorial walks you through building a multi‑channel banner set: choosing optimal Facebook and LinkedIn banner dimensions, setting up animation and exports, and aligning creatives with your targeting strategy. It’s designed for creative and production leads operating at scale.

For deeper theory and strategy, see our pillar article: Banner Ads Guide for Modern Digital Advertising: From Sizes to Targeted Personalization.

Step 0: Prerequisites and Setup

Before you start designing, get the right inputs and environment in place. This avoids rework and keeps your banner set aligned with media plans.

Prerequisites

Have these ready before production:

• Media plan and targeting strategy

  • Channels: Google Display / Demand Gen, Meta, LinkedIn, others

  • Campaign objectives: awareness, acquisition, remarketing

  • Audience segments: prospecting vs. existing customers

• Brand assets

  • Logos, iconography, product imagery

  • Brandbook: colors, typography, spacing rules

  • Approved messaging frameworks and CTAs

• Master creative concept

  • One core idea per campaign (headline, value prop, visual device)

  • Clear hierarchy: logo, headline, visual, CTA

• Production infrastructure

  • Design tools (Figma, Adobe) for concepting

  • A production platform for HTML5 display (e.g., Viewst) to:

    • Import Figma/Adobe files

    • Auto‑resize into required banner dimensions

    • Animate, review, and export HTML5 / GIF / MP4 at scale

Step 1: Choose Your Master Banner Sizes (By Channel)

High‑performing banner sets start from a small system of master sizes, not dozens of one‑offs. You design these masters once, then derive all variants from them.

1.1 Define a Master Size System

Use a cross‑channel set that covers your main placements:

Google Display Network / Demand Gen (fixed units)

• Core desktop and mobile banners (IAB fixed‑size portfolio):

  • 300x250 (medium rectangle)

  • 728x90 (leaderboard)

  • 160x600 (wide skyscraper)

  • 970x250 (billboard)

Google Responsive Display (aspect ratio masters)

Google supports up to 15 images across 3 aspect ratios. Use these masters:

• Horizontal: 1200x628 (1.91:1, min 600x314)

• Square: 1200x1200 (1:1, min 300x300)

• Vertical: 900x1600 (9:16, min 600x1067)

Meta / Facebook & Instagram (2026 guidance)

According to Hootsuite’s 2026 summary:

• Feed and single image:

  • 1080x1080 (1:1) — safest all‑purpose feed asset

  • 1080x1350 (4:5) — strong on mobile feed

• Stories / Reels:

  • 1080x1920 (9:16)

• Audience Network banner:

  • 320x50 (classic mobile banner)

LinkedIn (single‑image and banner)

2026 specs (via CreativeOS and LinkedIn docs):

• Single‑image ads:

  • 1200x628 (1.91:1)

  • 1080x1080 (1:1)

  • 1080x1350 (4:5)

• Banner / message ads:

  • 300x250 (companion banner)

1.2 Pick 3–5 Masters for Your Campaign

To keep production sane, choose:

• One square master: 1080x1080 or 1200x1200

• One horizontal master: 1200x628

• One vertical master: 1080x1920 or 900x1600

• One core display unit: 300x250

Design your master creative in these formats. Use a production platform like Viewst to generate all other required sizes via AI Smart Resize so designers don’t resize each banner manually.

Step 2: Design Master Creatives for Viewability and Performance

Viewability standards define what “seen” means. Design your masters so they deliver the message in the first second.

2.1 Follow MRC Viewability Rules

The MRC standard says:

• Display is viewable when:

  • At least 50% of pixels are in view

  • For 1 continuous second

• Video needs 50% in view for 2 seconds

This has practical design implications:

• Put logo and CTA in the first frame, not the last

• Avoid long build‑ups; people scroll fast

• Use strong contrast so text is legible at a glance

2.2 Compose High‑Performing Layouts

Across fb banner dimensions, LinkedIn banner layouts, and Google units, stick to:

• Clear hierarchy

  • Primary headline: one core benefit

  • Supporting line: proof or qualifier

  • CTA: short, action‑oriented (e.g., “Start free trial”)

• Minimal text on images

  • Google explicitly advises against:

    • Heavy overlaid text

    • Overlaid logos and buttons

    • Collages and composite backgrounds

  • Let the image support the message, not compete with it

• Brand consistency

  • Use brandbook fonts and colors

  • Lock type styles in a platform like Viewst via brandbooks, so every size inherits the same rules

2.3 Create One Master Creative Per Audience Cluster

Align design with your targeting strategy:

• Define 2–4 audience clusters, for example:

  • New prospects

  • Free‑trial users

  • Enterprise buyers

  • Returning customers

• For each cluster, create one master concept, then:

  • Keep layout and animation consistent

  • Swap headlines, visuals, and CTAs

This gives media teams structured variants for A/B testing without turning production into chaos.

Step 3: Build a Multi‑Channel Banner Set (The Structural Step)

Now turn your masters into a full set across Google, Meta, and LinkedIn. This is where infrastructure matters.

3.1 Import Master Creative Into a Production Studio

Using a platform like Viewst:

• Import your Figma or Adobe file

• Map layers to editable elements:

  • Text fields

  • Images

  • Buttons

  • Backgrounds

If you only have flat assets, use AI Image Deflatening to convert flat banners into editable HTML5 layouts.

3.2 Generate All Required Sizes From Masters

For each master creative:

1. Select the master size (e.g., 1080x1080).

2. Use AI Smart Resize to auto‑create:

   • Google units: 300x250, 728x90, 160x600, 970x250

   • Meta feed and Stories sizes

   • LinkedIn 1200x628, 1080x1080, 1080x1350

3. Check auto layouts:

   • Confirm text isn’t cut off

   • Adjust focal points so key imagery remains visible

This step converts “design once” into “deploy everywhere” without manual layout rebuilding.

3.3 Govern Variants With Brandbooks and Templates

To prevent brand drift:

• Lock brand styles globally:

  • Typography scales

  • Color tokens

  • Logo placement rules

• Create templates per channel:

  • Meta feed template

  • LinkedIn single‑image template

  • Google display template

All markets and teams build from these templates, keeping creative consistent while allowing localized copy or offers.

Step 4: Design and Optimize Animation for HTML5 and GIF

Animation is a performance multiplier — if done within platform constraints. Plan your motion with delivery rules in mind.

4.1 Know File Size and Duration Limits

From Google’s uploaded display ad specs:

• GIF / JPG / PNG image ads

  • Max file size: 150 KB

  • Animated GIFs:

    • Must be under 30 seconds total

    • Frame rate slower than 5 FPS

• HTML5 banners

  • ZIP can include up to 100 files

  • No explicit file‑size limit, but Google recommends keeping them small

Meta and LinkedIn are more generous:

• Meta image placements typically allow up to 30 MB per image

• LinkedIn single‑image ads cap assets around 5 MB per image

Anchor your animation decisions to the strictest environment (often Google GIF limits).

4.2 Apply Practical Animation Rules

Design HTML5 animation with these guardrails:

• Duration

  • 10–15 seconds loop is usually enough

  • Ensure key message appears in the first 1–2 seconds

• Motion style

  • Use subtle transitions:

    • Fade‑in headlines

    • Slide‑in CTAs

    • Parallax on imagery

  • Avoid fast flickering and aggressive zooms

• Frame count and complexity

  • Limit the number of animated elements per frame

  • Use easing and delay rather than constant motion

With Viewst’s AI Instant Animator, you can:

• Select layers to animate

• Apply one‑click motion presets across all sizes

• Keep timing consistent while the platform optimizes for weight

4.3 How to Export Animation From HTML5 Banner to GIF

A common operational question is: how do I export HTML5 animation to GIF variants for stricter placements?

In a production studio like Viewst:

1. Finish your animated HTML5 master.

2. Open the export panel.

3. Choose animated GIF as an output format.

4. Set export parameters:

   • Max duration (ideally ≤15 seconds)

   • Frame rate (e.g., 3–5 FPS)

   • Compression level to stay under 150 KB for Google

5. Export per size: 300x250, 728x90, etc.

Because animation lives in the HTML5 structure, you don’t rebuild the motion for each GIF. You simply convert.

4.4 Export HTML5, MP4, and Static Variants

For a full multi‑channel stack, export:

• HTML5 for:

  • Programmatic display networks

  • Retail media and rich display units

• GIF for:

  • Environments that don’t accept HTML5

  • Email placements and legacy ad systems

• MP4 for:

  • Video‑like placements and social feeds

  • Reels / Stories variants

Viewst supports production‑ready HTML5, GIF, and MP4 exports from the same master. That’s how you keep motion consistent across channels.

Step 5: Align Creatives With Your Targeted Ads Strategy

High‑performing banner ads don’t exist in a vacuum. They map directly to segments, journeys, and KPIs.

5.1 Define Creative‑to‑Segment Mapping

For each audience segment, answer:

• Who is this for?

  • Cold prospects, warm leads, existing customers

• Where are they in the journey?

  • Awareness, consideration, decision, retention

• What’s the desired action?

  • Click to content, sign‑up, demo request, purchase

Then assign banner sets:

• Awareness campaigns:

  • High‑level value props and brand cues

  • Softer CTAs ("Learn more")

• Consideration campaigns:

  • Features, social proof, stats

  • Stronger CTAs ("See pricing", "Compare plans")

• Retention / upsell:

  • Personalized offers and product expansions

  • Target existing customer lists

5.2 Build a Multi‑Channel Banner Ad Checklist

Use this checklist for each campaign:

• [ ] Master creative defined per segment

• [ ] Sizes mapped to channels:

  • Google: 300x250, 728x90, 160x600, 970x250, responsive aspect ratios

  • Meta: 1080x1080, 1080x1350, 1080x1920, 320x50

  • LinkedIn: 1200x628, 1080x1080, 1080x1350, 300x250

• [ ] Animation tested for file‑size limits

• [ ] Brandbook applied and locked

• [ ] UTM / tracking tags planned by segment

• [ ] A/B variants defined per key audience (headline, CTA, visual)

This keeps creative, media, and analytics aligned.

Step 6: Integrate Banners With Your Digital Advertising Channels

Once production is done, you need a clean handoff into ad platforms. The goal is "creative infrastructure" — one source of truth that feeds every channel.

6.1 Prepare Exports for Each Platform

Google Ads / Demand Gen

• Upload HTML5 ZIPs for rich banners

• Upload GIF / JPG / PNG for static or simple animated units

• Provide responsive display assets:

  • Horizontal, square, vertical images

  • Headlines, long headlines, descriptions

Meta (Facebook / Instagram)

• Upload image assets for:

  • Feed and Stories placements

  • Audience Network banners (320x50)

• Respect ad file size limits on images (≤30 MB) even if your banners are far lighter

LinkedIn

• Upload:

  • Single‑image banners (1200x628, 1080x1080, 1080x1350)

  • Companion banners (300x250) for message ads

• Keep text aligned with specs:

  • Intro copy ≈150 characters

  • Headlines ≈70 characters

6.2 Use Centralized Asset Libraries and APIs

Industry trends show platforms like LinkedIn are expanding asset reuse via APIs. To leverage that:

• Keep all creatives in a central library (e.g., Viewst)

• Tag assets by:

  • Campaign

  • Segment

  • Channel

• Use integrated review inside the production environment:

  • Stakeholders comment directly on banner sets

  • Approvals are tracked per version

This avoids fragmented workflows across email, chat, and random links.

6.3 Set Up Tracking and Feedback Loops

For each banner set:

• Apply consistent naming conventions and UTM parameters

• Map creative IDs to campaign IDs in:

  • Google Ads

  • Meta Ads Manager

  • LinkedIn Campaign Manager

• Regularly export performance data:

  • CTR, conversion rate, viewability

  • By size, message, and segment

Feed insights back into design:

• Retire low‑performing variants

• Iterate headlines and CTAs

• Use AI Designer in Viewst to quickly generate structured HTML5 banners from new prompts, then refine manually

Step 7: Operationalize Creative Automation for Display Advertising

To scale without adding headcount, turn this workflow into infrastructure. Storyteq and others highlight similar patterns; Viewst focuses on the HTML5 banner layer.

7.1 Build a Repeatable System

Your creative automation stack should include:

• A platform for creating and managing display ads (Viewst)

• Brand assets and brandbooks enforced at the template level

• Design templates per channel and segment

• Audience segments and data feeds from your CRM and ad platforms

• Measurement layer connecting creative IDs to performance

7.2 What Viewst Adds to the Stack

Viewst is positioned between design tools and media platforms, solving the non‑creative suffering in banner production. Key capabilities:

• AI Smart Resize: all required sizes from one master

• AI Image Deflatening: flat assets into fully editable HTML5 designs

• AI Designer: prompt to structured, production‑ready banners

• AI Instant Animator: one‑click motion across layers and sizes

• True WYSIWYG: editor equals output, so what you see is what ships

• Figma / Adobe import, brandbooks, collaborative review

• Export native editable HTML5, GIF, and MP4

For creative leaders, this means:

• Senior designers focus on concept and craft, not mechanical resizes

• Production teams scale multi‑market campaigns with operational rigor

• Brands keep control while AI handles the repetitive work

FAQ: High‑Performing Banner Ads in 2026

1. What are the best banner ad dimensions for desktop and mobile in 2026?

For desktop and mobile display, start with:

• 300x250, 728x90, 160x600, 970x250 (IAB core units)

• Responsive aspects for Google: 1200x628, 1200x1200, 900x1600

• Meta and LinkedIn feed safe sizes: 1080x1080, 1080x1350, 1200x628

This combination covers most inventory across the Google Display Network, Meta, and LinkedIn.

2. How do I optimize banner animation for performance and file‑size limits?

Follow these rules:

• Keep animated GIFs under 30 seconds and below 5 FPS, under 150 KB for Google

• Use short 10–15 second loops with instant brand and CTA visibility

• Limit moving elements per frame to reduce weight and visual noise

• Prefer HTML5 for richer motion; export lighter GIF fallbacks from the same master

3. What’s the best way to align creatives with targeted ads strategy?

Start from your audience and objectives:

• Create one master concept per segment (prospects, leads, customers)

• Map each concept to journey stages (awareness, consideration, decision)

• Define clear CTAs per stage and keep layout consistent across sizes

• Use creative automation to generate structured variants, then A/B test headlines and CTAs

4. How do I convert an HTML5 banner to GIF for networks that don’t support HTML5?

Use your production platform:

• Animate the HTML5 master once

• Export as animated GIF with controlled duration and frame rate

• Check output size against platform limits (e.g., 150 KB for Google)

• Repeat per size (300x250, 728x90, etc.) without rebuilding the motion manually

5. What tools should I use to create and manage multi‑channel banner ads?

For modern, responsive HTML5 banner ads at scale, combine:

• Design tools like Figma or Adobe for concepting

• A specialized production studio like Viewst for:

  • AI Smart Resize across all banner sizes

  • Animation, versioning, brandbooks, and approvals

  • Export to HTML5, GIF, and MP4 for Google, Meta, LinkedIn, and retail media

This replaces fragmented workflows with a single, governed production infrastructure.

By treating banner production as infrastructure — not a one‑off design task — you can ship high‑performing, targeted, multi‑channel banner sets consistently. Start with a small system of masters, automate resizes and animation, and let your teams focus on creative judgment, not mechanical work.