I looked over some of the posts here, but I’m still uncertain what to do. I am creating a background/banner to display completely across the screen with the Background stack. I am creating on a MacBook Air. I put in an image that is approximately 1,000 px by 550 px. I’m concerned about the file size of a larger image. So I’m wondering, is there a certain size image to use that will work well as a full banner background image but that will also not have too large of a file size? Is there a limit that one should use for the file size? Thank you!
I wish it was as simple as providing a suggested image size, but there are always tradeoffs. Since background images will scale to the width of their container, which in this case means screen size, you want an image that still looks good when displayed on larger images.
A lot of times a background images needs to be subdued, for example if you’re going to be placing text on top of it. When you’re using an image like that, it’s probably better to use larger dimensions and compress it more heavily. I’d look at the file size of your final image. A couple hundred KB isn’t really a problem unless your page is going to use a lot of them in sections down the page, at which point they’ll add up. If you start getting above 350kb, then you likely need to work on compressing more.
If the image needs to be very sharp and crisp, then it will be larger. If the image is important to the site, then it may be worth the overhead of a larger image. You have to balance the trade off between speed and image size.
One things I’ve seen regularly people using a large, detailed image and then placing a filter over the top to blur it or to darken it so text is legible and stands out. If you do that to the original image as opposed to using a filter on top of an image, it will be far smaller because blurry or images with reduced color pallets images can compress a lot more. This only applies if you aren’t using hover overlays that need the bright or crisp image to also be shown. I tend to use filters when I’m deciding on the look and later and go back an optimize the images later so I don’t need to rely on the filer as much.
Personally, I like between 1600-2000 px wide for a full-width background image. I’d compress it so that it still looks sharp enough at 100% that you’re okay with how it looks. Again, I’d look at files sizes when this is done.
This is longer than I intended, but hopefully you’ll find some of the extra infromation helpful.