1. What Is a Banner Ad?

A web banner ad is a rectangular graphic displayed on a webpage, designed to attract attention and direct visitors to a product, service, or website. They appear at the top, bottom, sides, or within the content of a page.

Why size and file weight matter:

• Ad networks enforce strict dimension and file size limits — submit the wrong size and your ad won't run
• Oversized files load slowly, damaging user experience and ad performance
• Correct dimensions ensure your banner fits its placement without distortion or cropping

2. Standard IAB Banner Sizes

The Interactive Advertising Bureau (IAB) defines the industry-standard sizes. The following are the most widely supported:

3. Resolution and Pixel Density

Standard web resolution is 72ppi (pixels per inch). Unlike print, web images are measured in pixels, not inches.

Retina and High-DPI Screens

Many modern devices (phones, tablets, newer laptops) use high-DPI or "retina" displays that pack twice the pixels into the same space. An image designed at standard resolution can appear slightly soft on these screens.

Best practice:

• Design your banner at 2× the target dimensions
• Export/resize down to the required dimensions at final export
• Example: design a 300×250 banner at 600×500, then export at 300×250

This gives you crisper results on high-DPI screens without increasing the delivered file size.

4. Image Formats

Choosing the right format affects file size, quality, and compatibility.

WebP — Recommended Primary Format

WebP is Google's modern image format and the best choice for web banners in most cases:

• Excellent compression — smaller files than PNG or JPEG at similar quality
• Supports transparency (like PNG)
• Supported by all major modern browsers
• Ideal for banners containing photos, graphics, and text combined

PNG — Use When:

• The banner will be placed on a system that doesn't accept WebP
• You need pixel-perfect sharp edges on logos or text (lossless compression)
• Transparency is required and WebP is not supported
• The file is being submitted to an older ad network

JPEG — Use When:

• The banner is purely photographic with no transparency
• File size is critical and some quality loss is acceptable
• WebP is not supported by the target platform

GIF — Mostly Avoid:

• Limited to 256 colours — poor quality for most modern designs
• Only relevant for simple legacy animations
• Use CSS or HTML5 animation instead wherever possible

Format Decision Summary

5. File Size and Weight Limits

Ad networks enforce maximum file size limits. Exceeding them means your ad is rejected.

Common limits:

• Google Ads: 150KB maximum for static banners
• Most ad networks: 100–150KB for static, 200KB for animated
• Self-hosted banners: no hard limit, but under 100KB is good practice for page load performance

Tips for keeping file size down:

• Export at the correct dimensions — never rely on HTML/CSS to scale down a large image
• Use WebP compression
• Flatten all layers before exporting
• Remove metadata on export
• Use Squoosh to fine-tune compression before final save

6. Tools

All of the following tools are free and open source unless noted.

GIMP — Primary Image Editor

GIMP (GNU Image Manipulation Program) is a full-featured raster image editor comparable to Photoshop.

• Website: gimp.org
• Use for: creating and editing banner artwork, text, photo manipulation, exporting to WebP/PNG/JPEG
• Tip: Export banners using File → Export As (not Save) to access WebP and other web formats

Inkscape — Vector Graphics Editor

Inkscape is ideal for creating scalable logos, icons, and graphic elements that remain sharp at any size.

• Website: inkscape.org
• Use for: creating vector elements to import into GIMP, designing logos and CTA buttons

Squoosh — Image Compression and Conversion

Squoosh is a browser-based tool by Google for compressing and converting images.

• Website: squoosh.app
• Use for: converting PNG/JPEG to WebP, fine-tuning compression, checking file weight before submission

ImageMagick — Command-Line Batch Processing

ImageMagick is a powerful command-line tool for batch converting and resizing images.

• Website: imagemagick.org
• Use for: converting entire folders of images to WebP, batch resizing multiple banner sizes at once

Canva (Free Tier) — Quick Templates

Canva's free tier provides pre-sized banner templates for rapid layout work.

• Website: canva.com
• Note: Review license terms before using Canva-generated content commercially

7. GIMP Templates — Setting Up for Efficiency

One of the best habits you can build is creating a saved GIMP template for each standard banner size. This eliminates setup errors and gives every new banner a clean, consistent starting point.

What to pre-configure in each template:

• Correct canvas dimensions
• Resolution: 72ppi
• Colour mode: RGB
• Colour profile: sRGB
• Layer structure: Background | Content | Text | CTA Button (named and locked)
• Guides/gridlines marking 10px safe margins inside all edges
• A visible border/stroke layer so the banner edge shows against white backgrounds

Recommended templates to create:

To save a template in GIMP: set up your canvas, then go to File → Save as Template. Name it clearly. It will appear in the Templates dialog every time you start a new file.

You can also save a layered master file in GIMP's native .xcf format for each size. This preserves all layers and guides for future editing.

8. Fonts and Readability

Font choice has an outsized impact on whether a banner communicates or gets ignored.

Best font choices for small banners:

• Sans-serif fonts are strongly preferred — they render more cleanly at small sizes
• Recommended: Inter, Open Sans, Roboto, Noto Sans, Source Sans Pro — all free via Google Fonts (fonts.google.com)
• Avoid decorative, script, or thin/light weight fonts — they become illegible at banner sizes

Minimum readable font sizes by banner:

Additional font tips:

• Use bold or semi-bold weights for headlines — regular weight often disappears at small sizes
• Maintain strong contrast between text colour and background
• Limit yourself to two fonts maximum — one for headline, one for supporting text
• Rasterize/flatten text layers before final export to avoid font substitution issues

9. Content Density — Less Is More

The most common mistake in banner design is trying to say too much. A banner is not a brochure.

The rule of three:

Every banner should contain exactly three elements:

1. One headline — your core message in as few words as possible
2. One supporting line — a brief reinforcement or offer detail (optional on very small banners)
3. One call to action (CTA) — a clear, single instruction: "Learn More", "Get Started", "Shop Now"

Content by banner size:

The actual-size review — do this every time:

Before you consider a banner finished, view it at exactly 100% — no zoom, no scaling. Ask yourself:

• Can I read every word clearly?
• Does the CTA stand out immediately?
• Is the message understood in under 3 seconds?
• Does it make sense out of context?

10. Accessibility

Accessibility is not just good practice — some of it is policy on major ad networks, and all of it is good for your audience.

Contrast ratios:

The WCAG (Web Content Accessibility Guidelines) AA standard requires:

• 4.5:1 contrast ratio for normal text
• 3:1 contrast ratio for large text and UI elements

Use the WebAIM Contrast Checker to test your colour combinations: https://webaim.org/resources/contrastchecker/

Alt text:

When a banner is embedded in a webpage as an <img> tag, always include a descriptive alt attribute. Screen readers use this to describe the banner to visually impaired users.

Example: alt="Summer sale — 30% off all products — Shop Now"

Do not rely on colour alone:

A red/green distinction invisible to colourblind users communicates nothing. Reinforce colour-coded information with text, icons, or shapes.

Animation:

• Limit animation loops to three or fewer — continuous looping is distracting and banned by some networks
• Do not use flashing or strobing effects — this is a seizure risk and violates WCAG 2.3.1
• Best practice: provide a pause mechanism on animated banners

Further reading: https://webaim.org/intro/

11. Colour Reference Resources

Choosing and testing colours is easier with the right tools:

• W3Schools Colour Picker: https://www.w3schools.com/colors/colors_picker.asp — interactive colour selection tool
• W3Schools Colour Names: https://www.w3schools.com/colors/colors_names.asp — complete named colour reference
• WebAIM Contrast Checker: https://webaim.org/resources/contrastchecker/ — paste two colours, get an instant pass/fail on accessibility contrast standards

12. Copyright, Licensing, and Image Sources

Using the wrong image can expose you to copyright infringement claims. This section covers how to stay safe.

Stock photo and image sources that require NO attribution:

Creative Commons licensing — quick reference:

• CC0 — No rights reserved. Use freely for any purpose including commercial.
• CC BY — Must credit the creator visibly. A hidden metadata comment does not satisfy this requirement — attribution must be visible to the viewer.
• CC BY-SA — Credit required, and derivatives must use the same license.
• CC BY-NC — Non-commercial use only. Not suitable for paid advertising.

Public Domain and Archival Images:

Copyright does not last forever. Works in the public domain can be used freely for any purpose including commercial.

US public domain rules (simplified):

• Published before 1928: public domain, use freely
• US Federal Government works: public domain by default — no copyright applies
• 1928–1977: copyright status depends on whether it was renewed — verify carefully
• 1978 onward: copyright lasts life of author plus 70 years

Reliable public domain and archival sources:

Memes — the same rules apply:

The meme culture norm of grabbing any image is fine for personal fun, but the same royalty-free discipline applies if a meme is used for business or promotional purposes. The source image still needs to be royalty-free or public domain. The text you add is your own — but the base image is not automatically free to use commercially just because everyone else is using it. A meme built on a Pexels or Unsplash photo with your own text overlay is completely clean.

Fair Use — What It Is and What It Is Not:

Fair use is a US legal doctrine that permits limited use of copyrighted material without permission under certain conditions. The four factors courts weigh: (1) purpose — commercial use weighs against fair use; (2) nature of the original work; (3) amount of the original used; (4) impact on the original creator's market.

AI-Generated Images — Know Your License:

AI image generators are a tempting source of free custom imagery, but their commercial use terms vary significantly and change frequently.

Stable Diffusion installed and run locally is the safest free option for commercially usable AI-generated imagery.

13. What to Avoid

Design pitfalls:

• Too much text — the single most common mistake
• Font sizes too small to read at actual display size
• Low contrast — text that blends into the background
• Clutter — too many elements competing for attention at once
• Thin or light font weights at small sizes — they disappear
• Using JPEG for banners containing text or logos — compression artifacts destroy sharp edges

Technical pitfalls:

• Oversized file weight — slow to load and rejected by ad networks
• Wrong dimensions for the target placement
• Scaling raster images up from a smaller size — produces blurry results
• Animated GIFs with no loop limit — distracting, and banned by some networks
• Forgetting to test at actual size on a real screen before submitting
• Not testing on mobile if the banner will appear on mobile placements

Legal and content pitfalls:

• Grabbing images from Google Image Search without verifying the license
• Mimicking operating system interface elements — banned by Google Ads policy
• Flashing or strobing animations — an accessibility violation and banned by most networks
• Misleading "Download", "Play", or "Close" buttons that are not real UI elements — banned
• Assuming a popular meme image is free to use commercially

14. Practical Workflow Summary

1. Choose your banner size from the standard IAB table
2. Open your pre-made GIMP template for that size
3. Place your background (royalty-free image or solid colour)
4. Add your headline, supporting text, and CTA using a sans-serif font
5. Check contrast using the WebAIM Contrast Checker
6. Review at 100% actual size — read it cold, under 3 seconds
7. Flatten all layers
8. File → Export As → filename.webp — quality 80–90%
9. Check file size — should be under 150KB for most networks
10. Open in a browser tab against a grey background for final review
11. Submit

15. Quick Reference Table

16. Free Resource Quick Reference

Design Tools:

• GIMP (image editor): gimp.org
• Inkscape (vector editor): inkscape.org
• Squoosh (compression/conversion): squoosh.app
• ImageMagick (batch processing): imagemagick.org

Royalty-Free Images (no attribution required):

• unsplash.com
• pexels.com
• pixabay.com
• stocksnap.io
• reshot.com

Vectors and Icons (CC0):

• openclipart.org
• svgrepo.com

Public Domain Archives:

• loc.gov (Library of Congress)
• commons.wikimedia.org
• metmuseum.org
• si.edu/openaccess
• archive.org

Fonts (free, open license):

• fonts.google.com

Colour Tools:

• w3schools.com/colors/colors_picker.asp
• webaim.org/resources/contrastchecker/

Accessibility:

• webaim.org/intro/

Banner Examples & Inspiration:

• commissions.quest — Promoter Resource Page — real-world banner examples and promotional materials