The Best Full Screen Background Image Sizes for Web Design

I frequently get questions on the best size for background images from designers I work with. Full screen backgrounds have become more and more popular in the last couple of years and, I think, will remain so for at least a few more.

The question asked is usually something like:

“If I want to put a background image on a website that will span the background regardless of the display size a user is using, what would be the pixel dimension of the image?”

I’ve considered this question before on a couple of sites I developed like Kona Boys and Mountain Girl Fitness, both of which use full-width background image sliders. So, the last time I got this questions, I thought I’d take the time to formalize my answer (as of late 2012).

---

The Short Answer

• I recommend 1440 x 900, or smaller size with a ratio of 1.6 to 1.
• For making it happen, I recommend using media queries to select the appropriately sized image from a pool of 2 or 3 sizes.

---

The Long Answer

Why It Matters

The background image size question is important because it is a balancing act of trade-offs to get the best performing and best looking site. Depending on how heavily your site’s look, feel, and branding rely on the background images, choosing the right size could have a huge impact overall.

A few of the trade offs when it comes to background images:

• grainy vs. slow download
• squished vs. stretched
• cropped horizontally vs. cropped vertically
• fixed vs. scrolling
• independent vs. integrated with other element positions

Some Examples

Here are some examples of bigger corporation websites using full screen background images:

• 1400 x 875 –1.6 ratio– Patagonia
• 1280 x 800 –1.6 ratio– Hoven Sunglasses
• 2560 x 1707 –1.5 ratio– Burberry
• 1350 x 900 –1.5 ratio– CSS Tricks

Here’s a long list of other sites to check out: http://www.inspiiired.com/75-websites-featuring-full-screen-photo-backgrounds/

Desktop and Laptop Screen Resolutions

One part of answering this question is looking at screen resolution. After all, the screen size plays the biggest part in how your work is going to be presented.

When it comes to just screen resolutions, the most popular resolutions currently are:

• 1366 x 768
• 1024 x 768
• 1280 x 800
• 1280 x 1024
• 1440 x 900px

UPDATE 5/1/2013: For some reason StatCounter showed a huge jump in 1024 x 768 in April of 2013. The jump is abnormally high and I wasn’t able to understand what caused it. So, I am concluding, for now, that it is some bad data.

However, 1920 x 1080 and other monster professional displays that support resolutions up to 2560 1600 are becoming more and more common…perhaps our eyes are going bad.

There’s a good listing of common resolutions for desktops, laptops, and mobile devices on Wikipedia here.

Source: StatCounter Global Stats – Screen Resolution Market Share

What’s Selling

A quick search on Walmart or Best Buy for computers sold with monitors reveals that most new computers are shipping with either 20″ or 23″ screens with resolutions of 1600 x 900 and 1920 x 1080 respectively–both of these are 1.78 to 1 ratios (aka 16:9), as is the currently most common resolution of 1366 x 768.

Look for the 16:9 aspect ratio to grow in popularity and number of users over the next decade. Note that 1366 x 768 is the standardized HDTV 720p/1080i display size and is “HD ready.”

Mobile Devices

On the flip side, there are mobile devices with much smaller resolutions–800 x 480 for Samsung, 320 x 480 for iPhone, 1024 x 768 for older iPads–in addition to maximum image size limits before things break. There’s a good, long list of mobile screen resolutions here.

Time and frustration saving tip: the maximum size limit for images to display correctly on the iPad 1 – iPad 4 is 1024 x 1024 x 3 = 3,145,728.

Here’s my own shortlist of mobile screen resolutions that I consider when developing a site:

short side	long side	ratio	example
240	320	1.33	Android SDK
320	480	1.50	iPhone
360	640	1.78	Nokia nHD
480	554	1.15	Motorola Droid
480	800	1.67	Samsung Gallaxy
600	800	1.33	Kindle 3
640	960	1.50	iPhone 4
768	1024	1.33	iPad 1 – 4, many desktops
768	1366	1.78	most new desktops
800	1280	1.60	older desktops
875	1400	1.60
900	1350	1.50
900	1440	1.60	desktops last 5 years
900	1600	1.78	most 20″ monitors
960	1280	1.33
1080	1920	1.78	most 23″ monitors
1200	1733	1.44
1328	2000	1.51
1600	2560	1.60

Download Speed

There have been a couple of bigger studies (gomez.com and akamai.com) discussing how page loading time affects sales. They conclude that:

Slower load time = unhappy users = fewer sales

KISSmetrics has an excellent infographic with the details.

So, how much is that perfect background image worth to your design? And, if you’re using several background images for a slider or fader, how big is just big enough to keep load times snappy?

If I know a page must have large image elements, I typically shoot to keep the entire page to under 1MB total size. (This is too big in my opinion, but still doable for most visitors today.) I try to keep any single image at less than 100KB.

Another consideration is whether or not the same background image(s) will be reused throughout the site. If you’re using the same big background image on all, or even several, pages of your site, you can afford to use a higher resolution because after the initial load, it will be cached in your visitor’s browser. However, if you’re using a different image on every page or each new section, your visitor will have to download each and every one, causing longer page load times.

Similarly, if you’re using a single background image, you can obviously afford a higher resolution than if you have to load several images for a background slider.

Implementation

Fixed Size vs Fluid vs Responsive

Perhaps the biggest part of implementation is whether or not your site is a static size. If you have a fluid layout site or a site that uses media queries to serve up different structures, you will have different needs.

On a fixed size site, you worry about the edges of the background image in relation to the screen size. Will you keep the image centered, to the left, or to the right? Will it stretch, be cropped, fade out, or repeat? If it stretches, are the foreground elements still readable? Etc.

On a fluid site, you have to consider all of the fixed-sized site questions at all possible screen sizes. Will the background image move with the content? Will it resize to shrink or stretch? If it resizes to tiny or huge will it look ridiculous or have blank margins?

On a responsive site that uses media queries, you consider the fixed-sized questions but have a ‘get out of jail free’ card…well maybe not ‘free.’ With media queries you will have the ability to swap out the background image(s) to fit the exact needs of each screen size you’d like. Creating background images for several specific screen sizes can be a lot of work, but it means that you can keep the site looking just as you’d like it.

CSS and JavaScript

Another part of answering the question is thinking through how you’re going to make it happen. There are currently at least a half dozen ways to implement a full screen background image or slider. Apart from plugins and pre-built sliders that take care of it for us, there are these relatively simple methods:

• CSS3: background-size: cover
• CSS3: background-size: contain
• CSS applied to <img>: width: 100%; height: auto; min-height: 100%; min-width: 1440px
• CSS applied to <img>: top:0; left:0; position:fixed; min-width:100%; min-height:100%;
• jQuery: See this CSS-Tricks article

Each of these methods has strengths and weaknesses, but you’ll need to sort through which one is going to be best for each specific site.

Special Note for Slider Implementation

If you’re using several images to rotate into the background, I highly recommend using javascript to lazy load the images. The idea is to wait until the page finishes loading before loading the background slider images (except the first one, which should load initially). Otherwise, visitors will have to wait patiently while the big images download…and who’s patient these days.

Design Considerations

In many designs the background image can stand apart from the foreground elements. Often times the navigation and main content blocks have enough visual separation from the background image that you have more flexibility in how the background image looks. If the image is squished a little or cut off a little or shifted left or right a little it doesn’t affect the overall design.

Sometimes, though, the background image is integrated into the design and requires specific sizing and positioning. Say, for instance, that you have  a big swoosh in the background image that MUST cross the header a just the right place. Or, say you have a face or person that would look totally out of place if it is moved or covered by a foreground element. In those cases, you have much less flexibility in background image size. The decision is essentially dictated by the design and you do what it takes to make it fit. Often, ‘what it takes’ is using media queries to provide the same image at several sizes to fit varying screen sizes.

Concluding Thoughts

With all of these screen resolutions, download times, and implementations to consider, how do you pick the appropriate background image size to keep the user experience solid? Many developers shoot for something in the middle, picking an image size that is big enough to not get pixely, small enough to download quickly and work properly, and with a ratio that will cause as little distortion–squishing or stretching– or cropping as possible.

1. Combined, people using a 1.6 ratio make up the bulk of current users
2. There is growing popularity and availability of 16:9 (1.78 ratio)
3. However, millions of people are still using good ol’ 1024 x 768 (1.33 ratio)
4. I usually want everything in the image to be seen–there aren’t often throw away portions on my images
5. An optimized color jpg picture of 1440 x 900 ends up being around 100KB in my experience, which is big, but not huge for most devices and download speeds today.

Given all that, I have chosen to use a ratio of 1.6 to serve today’s users, knowing that my images are often going to be cropped or squished by newer monitors and devices.

The 1.6 ratio usually makes my images have everything showing when resized if I’m working on a site that doesn’t maintain the aspect ratio or requires pushing part of the image into an unviewable area. I choose 1440 wide to accommodate most new screens.

So Then

• 1440 x 900 is my magic number for general full screen backgrounds.
• If it is a partial screen height design, then I keep 1440 and do whatever height is called for.
• If it is a full width background slider with more than 3 or 4 images, I size it down as far as 960 x  600 to save on load time without diminishing image quality too much when they stretch.
• If you can, use media queries to serve from a pool of 3 or 4 perfectly-sized images for each image in your background