Last Updated: 4/30/2019

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 sites I developed like Kona Boys, BAS1S Architecture & Design, Mountain Girl Fitness, which use full-width background image sliders. So, the last time I got this question, I thought I’d take the time to formalize my answer (originally in late 2012).

The Short Answer

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.

Recently, full screen sliders and backgrounds have become hugely popular in general, and specifically in “flat” style designs.

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

Some Examples (as of original writing)

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

Here are some lists of other sites to check out:

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 Desktop, Tablet, and Console (not mobile) resolutions in North America currently (April 30, 2020) are:

1920 x 1080 and other monster professional displays that support resolutions up to 2560 x 1600 are becoming more and more common…perhaps our eyes are going bad, or we’re just trying to soak up as much radiation as we can.

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

What’s Selling

A quick search on Walmart or Amazon for computers sold with monitors reveals that most new laptop computer or new monitors are:

Look for the 16:9 (1.78:1) aspect ratio to grow in popularity and number of users over the next decade. Note that 16:9 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–in addition to maximum image size limits before things break. There’s a good, long list of mobile screen resolutions here. Also, there’s a nice, quick reference of just iOS 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 are StatCounter’s numbers for the most used mobile screen sizes in North America.

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 Galaxy
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

Retina Devices

Retina displays are becoming more common and have their own special issue–to maintain the image clarity we hope for, the image needs to be 2x bigger. This holds true for background images as well as standard image elements.

Retina displays, like those on iPad 3rd generation and up, iPhone 4 and up, and many others, use more pixels per inch than a standard screen (here’s some good detail on that from Wikipedia). This makes standard-sized images look a little fuzzy when viewed on the high-density screens. Web developers overcome this by creating images that are twice as big as normal and then displaying them at half the size. The end result is an image that is the same size that you wanted it to be in the first place, but it looks great on both standard and high-density screens.

This can make for some really big images when you’re talking about full-screen backgrounds. If you’re not careful, this can increase your page’s download size and therefore, download speed. The good thing about backgrounds, though, is that they aren’t typically retrieved by your device unless they’re visible on the screen. So, if you put a background in a media query that is never called by the page, that image is never retrieved, saving the bandwidth.

I did a quick case study using apple.com/iphone and they handled it by simply doubling the size of their background images at three different screen resolutions. See this discussion in the comments below for the full detail and CSS code.

Apple went with these for non-Retina:

For Retina (using “-webkit-min-device-pixel-ratio: 1.5″ media queries), they went with:

Each of the background images are doubled for Retina. So, if you trust Apple as a good standard, then I’d say go with double.

Download Speed / Page Loading Time

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.

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:

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.

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