When crafting a website, it's important to understand how every image, text box, and hyperlink interacts with each other to create a functional whole. This is especially true of background images, which can add color and style to an otherwise minimalistic layout. However, if you don't optimize this image with the right dimensions and file size, it may slow your website down or stretch the image in unappealing ways. Below, we've outlined a few essential tips for selecting and resizing background images for the web.
Need images for your project? Shutterstock’s impressive collection of more than 70 million images can help! See what our library has to offer.
Size is Everything
Background images are great for making a site pop, but the more your pages rely on these images, the slower your website will be. To avoid bogging down your site with too much data, you'll need to find the optimal balance between image quality and size. It helps to think about today's resolution standards, which tell you how many pixels are displayed on a screen.
Currently, some of the most popular desktop and tablet resolutions are 1280 x 800, 1366 x 768, and 1920 x 1080. On the other hand, smartphones will display your website at a much smaller resolution, such as 320 x 480 or 800 x 480. Finally, the latest line of computers with Retina displays demand images that are twice as big as the average monitor.
Finding a Compromise
How on earth are you supposed to create a background image that satisfies all of these requirements? If you're looking to use a highly detailed background image, it's best to keep the file size under 1MB (and if possible, under 100KB).
A 1MB background image may push the boundaries of the typical user's internet speed, but it won't ruin their web experience, so it's a good rule of thumb. Also, if the same background will be used throughout your site, you can make the resolution a bit higher, since the image will be stored in the user's cache after it loads for the first time. We recommend resizing your background image so that it has a ratio of 1.777 to 1, which is optimal for screens with a 1920 x 1080 resolution.