What Size Should a Website Banner Be? And What Not to Bake Into the Image

Walk past almost any coffee shop and you'll see two things out front. One is a nicely printed promotion poster taped up behind the glass. The other is a blackboard where someone has written today's menu and prices in chalk.

The poster definitely looks better. But the day a price changes, the poster has to go back to the printer, while the blackboard gets wiped and rewritten in five minutes. And if a friend calls to ask what deals the shop has today, whoever is standing at the blackboard can just read it out loud.

Website banners work the same way. A lot of sites turn their banner into a poster: the price, the promotion and the phone number all get printed into the same image file as the nice photo. This article answers the question people search for most first, which is what size a website banner should be, and then looks at which information belongs on the blackboard instead.

Website banner sizes that work on both desktop and mobile

Let me be upfront about this: there is no official standard size for website banners. The numbers you see around the web are values each team picked for itself. What actually helps you decide is knowing what screens your customers use.

Sizes for desktop

According to StatCounter's desktop data for Thailand in September 2026, the most common screen is 1920x1080 at about 23.91%, followed by 1536x864 at about 9.83% and 1366x768 at about 7.08%. These numbers change every month, but the overall picture says that a full-width banner around 1,600 to 1,920 pixels wide will still look sharp on the screens most Thai visitors use.

Height depends on how much of the screen you want the banner to take up. A 16:9 ratio like 1600x900 feels full-screen. If you want people to see the content below sooner, you can crop it shorter. The key is to keep the important part of the picture in the middle, because the left and right edges get cut off as the screen gets narrower.

Sizes for mobile, and why one image usually isn't enough

StatCounter's mobile data for Thailand in the same month shows 414x896 as the most common screen at about 14.88%, followed by 360x800 at about 10.64%, 384x832 at about 7.36% and 390x844 at about 6.49%. Notice that every one of these phone screens is portrait, while a desktop banner is landscape.

If you use a single landscape image on mobile, one of two things happens. Either the image shrinks into a thin strip, or it gets cropped to fill the tall screen and both sides of the picture disappear. The fix web developers use is to make two versions of the image, a landscape one for desktop and a portrait one for mobile, and let the browser choose which one to load.

Why there is no single standard size

Because what a banner looks like depends on each site's design. Some sites make the banner fill the whole screen, others only half. What every site has in common is this: the more sizes an image gets shrunk and cropped into, the more likely any text printed inside it gets cut off or becomes too small to read. That is exactly where banner size and text inside images meet.

A three-minute check: what's printed inside your banner?

Before reading on, open your homepage on your phone and try these three things.

First, press and hold on the text in your banner. If you can select it, it's real text. If a menu pops up offering to save the image, that text is part of the picture.

Second, use your browser's find-on-page feature and type the promotion price or phone number you can see on the banner. If it can't be found even though you can clearly see it, that information lives inside the image.

Third, try translating the page into another language. Real text changes language, while text inside an image stays exactly as it was.

If it turns out your prices, promotions or phone number are all inside the image, don't worry. Plenty of business websites start out this way, because it's easy and you get exactly the look you want. The next section explains what it costs you.

Why information inside images costs you customers

Google can understand images to a degree, but real text is clearer

To be fair to Google first: its systems are not blind to images. Google Search Central's documentation says Google uses alt text along with computer vision algorithms to understand images. So anyone who says Google can't read images at all is overstating it.

But a system understanding that a photo shows a cat sleeping on a rug doesn't mean it will accurately pick up a price printed in the corner of that photo and use it to answer someone searching for prices. Real text on the page is what systems read most reliably, and it's something you control completely.

On a phone, the banner shrinks until the text can't be read

A banner designed on a 1920-pixel-wide desktop screen ends up on a phone about 400 pixels wide, so everything in the image gets nearly five times smaller. The fine print about promotion conditions in the bottom corner turns into little more than a line. Customers have to pinch to zoom before they can read it, and many just leave instead.

There's an international guideline behind this too. WCAG 2.2 success criterion 1.4.5, Images of Text, a Level AA requirement, says that if the technology you're using can achieve the visual presentation you want, you should use real text to convey information rather than images of text. The reason is that people with low vision can then adjust the font size and colors to something they can read, which is impossible when the text is baked into an image.

Changing a price means reopening the design file

This is the one that hits shop owners most directly. Every time a promotion changes, a price goes up or a phone number changes, you have to go back to whoever has the design file, wait for them to edit it, wait for the file, and then wait for someone to upload it. Some shops leave last month's promotion banner up for weeks because there are too many steps to do it right away. And a customer who sees the old deal and messages to ask about it ends up in an awkward conversation for both sides.

Auto-rotating sliders make people miss what's right in front of them

Information inside images gets lost even more easily when it sits in a slider that moves on its own. Jakob Nielsen of Nielsen Norman Group described a case from a usability study in the UK in 2013. The participant was asked to find out whether Siemens had any deals on washing machines. A 100-pound discount was right there on the homepage, but she didn't see it, spent a long time on the page, and concluded there were no deals. The article's conclusion was that sliders should only change when the user asks them to.

I should add that this is one participant, and the study is several years old. It's a useful signal, not a figure for what percentage of your customers will miss things. And the number many websites like to quote, that only 1% of people click on sliders, I couldn't trace to a source I could check, so I'm not using it in this article.

Which information must be real text, and what can stay in the image

A simple rule: if it's information customers might search for, might want to copy, or that you need to change often, make it real text. That means prices, promotions and their conditions, phone numbers and LINE IDs, opening hours, service or product names, and button labels like "Book now" or "Message us on LINE".

What can comfortably stay in the image is whatever a picture says better than words: the atmosphere of your shop, what your products look like, before-and-after results, or your brand logo. Don't forget to add alt text to those images. If you're not sure how to write it, I covered that in the alt text section of our guide to taking product photos for your website with a phone.

Alt text helps a lot, but it doesn't replace text on the page. Alt text describes what the image shows. Prices and promotion conditions belong on the page, where everyone sees the same thing: people looking with their eyes, people using screen readers, and search systems.

"But a single image looks better, and I can control the font"

That's true, and I'm not going to argue with it. In a graphics program, a designer can place every letter exactly, use any font, add shadows and effects however they like, and as an image it looks identical on every screen. It's easy to see why so many teams go this way.

What has changed is that websites today can do the same things with real text. You can use your brand font, position the text over a photo, and add color and shadows. The same WCAG criterion openly makes an exception for logos and for cases where the particular look of the text is essential. So your shop logo can stay an image. What should move out are the details customers need in order to decide.

A bonus you get without trying: real text adapts to the screen by itself. On a phone it wraps onto new lines so it's comfortable to read, instead of shrinking along with the picture.

Why fixing it now pays off

Count how many times a year your shop changes its promotion. If it's once a month, that's twelve rounds a year of making a new image, editing it and uploading it again. Every round costs time or a designer's fee, and every round has a stretch where your site shows outdated information.

Once your banner is set up as a text-free image with real text on top, each round comes down to typing new words into your admin panel. The nice background photo can stay up all year. The sooner you switch, the more rounds you save.

The minimum banner that actually works

You don't need to rebuild your whole site. The smallest version that works has just three pieces. The first is a background image with no text in it at all, in two versions: landscape for desktop and portrait for mobile. The second is a one-line main heading in real text that says what you do and for whom. The third is a single button that makes it clear what happens when someone taps it.

If you're running a promotion, put it as a short line of text under the heading, and move the full conditions further down the page where there's room to write them out. Keep an eye on the background image's file size too. An image that's too large slows down your homepage, which I explained in detail in our article on Core Web Vitals and why website speed matters for SEO.

Real examples you can open and look at

Plenty of big sites have used the blackboard approach for a long time. Open IKEA Thailand's homepage: when I checked on 20 October 2026, the promotion headline (in Thai, roughly "Shop more, save more! PAX wardrobes: spend 10,000, get 1,000 back") was real text on the page, not printed into an image. That promotion changes with each campaign, so on another day you may see a different one, but the structure stays the same.

Another is Apple Thailand. On the same day, product names like iPhone 18 Pro and Apple Watch Series 12 shown over the large images were real text headings placed on top of the pictures. Both brands care a great deal about how their sites look, and they still choose this approach.

Try the three-minute check above on both sites. You'll see the difference from a site that bakes its text into images right away.

A case from our own work: Everyday Cat Hotel

The closest case to this topic in the TumWebSME team's own work is everydaycathotel.com, the website for Everyday Cat Hotel, a cat hotel in the Silom and Sathorn area. Open the homepage and you'll see a full-screen photo of a cat asleep on a soft rug. There isn't a single letter in the image itself. The big "โรงแรมแมว" (cat hotel) you see is the main heading, in real text placed over the photo.

Behind the scenes, that photo comes in two versions: a 1600x900 pixel desktop image of about 202 KB, and a 720x1280 pixel portrait mobile image of about 125 KB. The browser picks the one that fits the screen, so on a phone the cat stays in the middle of the frame instead of being cropped down to its tail.

The room rates are all real text too, such as 2,500 baht per week or 7,900 baht per month, as shown on the hotel's website on 20 October 2026. Those prices are set by the hotel, so we won't state on its behalf whether they include VAT. If you search the page for "บาท" (baht), every price comes up. On the day the hotel changes its rates, the team edits the numbers in the system without making a single new image. These image sizes are an example from one real site, not a standard every site must use.

A five-step plan for this week

1. Open your homepage on your phone, do the three-minute check, and note down what information is inside images.

2. Split what you noted into two piles: what needs to be real text, and what can stay in the image.

3. Ask your designer for background images with no text, in both landscape and portrait.

4. Have whoever runs your website put the heading, prices and button on top of the image as real text, and turn off auto-rotation if you use a slider.

5. Check again on a family member's phone that the prices and phone number can be read without zooming.

How to tell whether the fix worked

The simplest first measure is to ask yourself how long it takes to change the banner for your next promotion. If it goes from waiting several days to a few minutes, it has already paid off in terms of work.

On the customer side, look in Google Search Console two to three months after the change to see whether more searches that combine your service name with the word "price" are bringing people to your homepage. And if you have Microsoft Clarity installed, you can see whether people click the banner button more often. How to do that is in our article on Microsoft Clarity for small businesses.

Another signal shop owners can feel for themselves is chat messages asking "How much is it?" when the price is right there on the homepage. If messages like that drop, customers are finding the answer on their own. And if some of your customers are older, you can run the five-minute test with someone at home for one more round.

Turn the poster into a blackboard

Back to the front of that coffee shop. There's nothing wrong with a nice poster, and plenty of good shops still put one up. But for the information customers need every day, like prices, today's menu and the phone number, the shop writes it on a board that can be wiped and rewritten.

Your website banner can do the same. Keep the beautiful photo as the background, and lift the information that helps customers decide out into real text that people and search systems can both read, and that you can change yourself whenever you need to.

Want us to take a look at your banner?

Send us your link. We'll tell you which information on your homepage is still baked into images and what to fix first. The first consultation is free.

See all our services and packages at the TumWebSME packages page.

Follow TumWebSME

Follow more articles on website building and online marketing at:

• Facebook: TumWebSME รับทำเว็บไซต์ธุรกิจ

• Instagram: @tumwebsme

• TikTok: @tumwebsme

• YouTube: TumWebSME

Contact us for work inquiries

• 088-983-9386 (Ploy)

• 099-856-3198 (Sannan)