18 March, 2023

Standard Website Banner Sizes for Better Design

Banner website is a must-have when building a website. For a banner to work well, the standard website banner size has to be exact. This gives the site a better look, and it also helps get the business's information and content across through images. So what is the standard website banner image size? Let's MONA Media Read on for the details.

Banners used on websites

What is a website banner?

Banner used on a website is an image designed to be placed on that site. It acts as the "main representative image" of the business (key visual).

What is a website banner?

Besides making the website look good, a banner also carries information to users through images. In practice, when customers first meet a business, their impression of the website comes from its images. And people take in information from images more effectively than from text.

Where can you use a website banner?

Depending on company website design your needs, a banner can be placed in different positions on the page. Normally, the main banner of a website sits at the top, so users see it as soon as they open the site. This position makes the strongest impression on users.

The next most common position is on both sides of the layout. The website content sits in the middle with an empty column on each side, which is where tall, narrow banners go. A banner is also often placed in the footer or just above it. A banner can also be shown in the middle of the screen when a user first opens the site.

Where to place a website banner

If the business is a e-commerce sites, banners are also placed in the column for each product category. When users search in the search bar, a banner can also appear in the results, a position often called "listing banner”.

In general, depending on the business's website design needs, a banner can go in different places. But wherever it sits, a website banner is designed to bring value to the business. So what does a website banner really do?

The purpose of a website banner matters more than you think

Anything you put on your website is information, so all of it matters. A banner is not just decoration. It has to get information across to users. Specifically, a website banner has these basic purposes:

First, it makes an impression on users, but it must include the brand's name and value. As noted above, the image on a banner is not just decoration. A striking image catches users' attention, but making them remember the brand or the banner's content takes careful work.

Example: When you visit the Vingroup website, the first image you see is the Landmark 81 tower, a symbol not only of the company but of the country. Next to it is a short, easy-to-grasp message.

The purpose of a website banner is importantSecond, a banner introduces and advertises the business's products, services and new offers.

Example: When you read an article on a website, a banner for the business's products or services can sit right beside it, related to that article.

Third, a banner can also carry affiliate ads from other businesses.

So a website banner must be placed with a purpose, so the business can move customers to act. Now that you understand why banners are placed on a website, the next part introduces standard website banner size to get the most out of your design.

How to design a standard website banner

Standard website banner sizes

Standard website banner sizes

When you set a standard website banner size, your website and your marketing both get easier. For example, you do not have to change the design layout to fit each ad campaign.

The table below shows the display times and maximum file sizes for banners that experts accept as standard:

Rectangle ads and pop-ups Width x Height (pixels) Maximum file size (KB) Animation length (seconds)
Large Rectangle 336 x 280 30 5
Medium Rectangle 300 x 250 30 5
Square Pop-up 250 x 250 25 5
Vertical Rectangle 240 x 400 20 5
Rectangle 180 x 150 15 5
3:1 Rectangle 300 x 100 20 5
Pop-under 720 x 300 40 5
Banners and ad buttons Width x Height (pixels) Maximum file size (KB) Animation length (seconds)
Leaderboard 728 x 90 40 7
Full banner / Impact baner 468 x 60 20 5
Half banner 234 x 60 20 5
Button 1 120 x 90 15 5
Button 2 120 x 60 10 5
Micro bar 88 x 31 5 3
Micro button 80 x 15 5 3
Vertical banner 120 x 240 15 5
Square button 125 x 125 20 5
Column ads (skyscraper) Width x Height (pixels) Maximum file size (KB) Animation length (seconds)
Skyscraper 120 x 600 30 7
Wide Skyscraper 160 x 600 30 7
Half-page 300 x 600 40 7

All of these figures are for reference. Still, the banner sizes above are fairly standard and suit many cases, and they can be placed in many positions depending on the website layout.

Tools for designing standard website banners

Today, many software programs and online tools can help you design banners for your website. If you can use common programs such as Adobe Photoshop, Adobe Illustrator or any other photo editing or design software on your computer, use them to get a more professional result made your way.

For simpler website banners that still meet the standards, you can also try these online image editors:

Canva

Canva

This is a popular online tool for editing and designing images. Canva helps you design standard-size website banners and also other images such as posters, square images and social media images. Canva has both a web version and an app.

PIXLR.COM

This tool works like an online version of Adobe Photoshop. Pixlr.com also comes as both an app and a website. Pixlr is one of the most popular tools for making website banner images. It lets you design to the standard size you want with simple steps.

The PIXLR app and website

Some notes on designing standard website banner sizes

When designing, to make banner placement more effective, pay attention to the position of each type of banner. Specifically:

  • The main website banner is usually 728x90px. Some websites now split it into 2 banners of 264x90px. These sizes correspond to a desktop screen.
  • Banners placed in the two side columns are usually 300×100 or 300×250.

The file size of a website banner should be as small as possible. A banner that is too large makes the page load slowly. It is best to keep it under 10KB. For more complex website banners that need Flash, keep it under 30KB. With these in place, you improve the experience of users visiting your website.

To get website banners that look good, meet the standard sizes and also make your ads work better, let MONA Media work with you on Banner design for websites, Facebook banners and advertising banners you can trust.

MONA Media banner design pricing

With our professional banner design service, we are committed to delivering outstanding work:

  • A wide range of attractive, creative layouts: MONA Media designs banners with many distinctive layouts that suit each line of business, so your brand stands out and catches every eye.
  • Optimized display on every platform: We design advertising banners that resize flexibly and display correctly on every device and platform, from desktop to mobile.
  • Content that is "on point" and "on target": Our team does not only care about visuals. We also help you get your message across concisely, in a way that speaks to the psychology and needs of your target customers.
  • A creative, experienced team: With experienced designers who understand marketing communications deeply, MONA Media keeps up with the latest trends to create banners that make an impression and work.
  • Fast revisions: We are always ready to revise and work with clients until the product is finished, so you are fully satisfied.
  • A clear working process: At MONA Media, every project follows a strict process, from receiving the brief and developing the concept to turning the idea into a finished product, which gives you transparency and the best results.
  • A wide range of matching design packages: MONA also delivers a full range of our logo design service, poster design, signage, flyers and more.

CONTACT US Get in touch with MONA Media today HOTLINE 1900 636 648 for professional website banners that strengthen your marketing and lift your brand!

Some banner ideas for your website

Here are a few ideas for designing your own website banner. Combining content with form gets the most out of a banner design, so the banner does its job better.

Striking illustrator or isometric style

Many websites now use illustrator or isometric image styles widely. This style is simple yet distinctive. It gets information across directly and to the point.

Striking illustrator and isometric style

This banner style is also described as showing 3D objects in a two-dimensional space. Its goal is to help viewers see the layout, arrangement and space in the image. That is why isometric and illustrator designs are usually simple and carry a clear message.

Use emotion

Emotion is always used in imagery. Bringing emotion into a banner can drive customers to buy. The emotions most often used to convey a message through images are empathy, inspiration and fear.

Catching a trend

Trend-based images are among the easiest to catch users' attention. Use a current trend in society to talk about the business's product. Or use banners for important occasions, such as Tet, to decorate Tet holiday sales websites This is something many businesses do.

However, every trend is a double-edged sword. Some trends work well when a business follows them, and others do not. So think carefully about when to use trend-based images.

Storytelling

Adding a story to a banner design

Putting a story into an image is a clever and subtle touch. It is harder to do and takes a lot of creativity. Users are also easily drawn to images with a good story. The stories used in images are usually motivational or touching. The hard part is getting users to pick up and understand your story from the image alone. These banners are often GIFs or animations.

Banner website is a must-have on every website today. With images and the standard website banner sizes, a business not only makes its site livelier but also reaches customers more effectively. We hope the information that MONA has provided here helps you set up and design the standard banner size for your own website!

MONA has a podcast: listen instead of readingEpisodes on AI, automation & SEO for Vietnamese businesses
Nghe ngay
About the author

CEO & Founder · The MONA

The founder of The MONA built a service company of 60+ staff with 14,000+ projects delivered. Khánh Hùng shares his thinking on building self-running systems, automating a business, and the real lessons behind MONA's projects.

Views 1,7K
Rate this article 4,7/5 · 15 ratings

Professional website
design services

Own a website with a beautiful, 100% exclusive design and a lifetime warranty, with the ability
to expand features flexibly as your business grows, starting today!

Contact Mona

    MONA có riêng một Người "Bạn Thân" cho bạn - Người Account sẽ đồng hành, hỗ trợ, hướng dẫn, đặt đồ ăn cho bạn mãi mãi, từ đây về sau!
    MONA will never sell your information or send you spam

    NHẬN TƯ VẤN SEO MIỄN PHÍ !

    Đội MONA tư vấn hệ thống quản lý giáo dục trực tuyến
    Hỏi đáp giáo dục 4.0
    Tạo cuộc hẹn miễn phí với MONA để giải đáp và tư vấn mọi thắc mắc về giải pháp số hoá ngành giáo dục
    Thời lượng cuộc hẹn
    45 Phút
    Ngày và giờ
    Thứ 2, ngày 25 tháng 12, 2023
    [9:30 - 10:15]

      Chọn ngày và giờ
      Khung giờ
      Back
      Hãy cho MONA biết bạn là ai
      0:00