整页背景图片尺寸建议

Question

I am going to have a friend create a full page background image for a website I am creating, but I wanted to know what specs I would need to provide him with. What is the best image quality that you guys recommend for a page to not be slowed down too much. Any minimum/maximum recommendations? What format should the background image be created in? Should the image be square(1 to 1) instead of rectangle(1 to 2, 2 to 1, 1 to 3, etc)? Any other advice?

Answer 1

Assuming the background image would not be very "detail intensive", you should focus more on image quality setting, as you can shave quite a bit off the file size without any noticeable quality loss. Also, I would recommend a jpeg for such a task, as it usually has a smaller file size than png at bigger resolutions.

To choose your resolution, you should try to check Google Analytics for a website that targets the same users as yours and see what's the usual resolution for most people. Say 90% of users have 1024x768 or lower, than you can aim for that size. Keep in mind that as displays get bigger, people stop using their browser full screen, so if you see visitors with 2560x1440, that doesn't mean their browser runs at that resolution. In any case, for the 10% left in that demographic, upscaling the image should be a good compromise.

Regarding the ratio, I think 1:1 is pointless if you target desktop users, but useful for mobile, because you can always have a portrait orientation for the viewport. Again, this depends on your target audience.