I am purchasing a stock photo and of course smaller is cheaper (and will load more quickly), but I don’t want it to look too pixelated. The options are: 1) web & mobile (312 KB, 267px x 400px ¥ 3in x 5in @ 72ppi), which seems awfully small; 2) x-small (800 KB, 427px x 640px ¥ 5in x 8in @ 72ppi), 3) small (3MB, 853px x 1280px ¥ 11in x 17in @ 72ppi), and larger. Advice? Thanks!
Thanks again for your question, Christina. We spoke about this over the phone, but I thought I’d answer here as well in case anyone is running into the same issue.
There’s not a concrete answer to what size your background image should be, but you’re looking for a balance between size in KB/MB (so your page doesn’t load too slowly) and size in pixels (so your image looks sharp across browsers).
In Christina’s case, I recommended the small or higher and also recommended that she try to compress the image a bit in Photoshop to keep the same pixels, but bring down the file size a bit.
If anyone’s interested in a really in-depth look (that includes comparisons of common screen sizes for desktop and mobile), there’s a great article here: http://www.webmalama.com/the-best-ful…