Best size for a full width background image

Hi,

Sorry if this has been answered before, but I’m wondering what the best size for a full width background image would be?

I’ve looked at a few articles and seen the recommended size is 1920 x 1080, but this seems a bit small?

I’ve just done a random screen shot on my laptop and that turns out to be 1920px wide, but obviously, people use much larger screens so I;m guessing this width would become quite blurry on larger screens.

Can anyone recommend a good size to use?

The background image I will be using will be a photo rather than a vector so I’m trying to keep it as crisp as I can.

Thanks!

It’s a tradeoff. Resolution vs Size.

It’s true that a big scalar image made smaller will still be sharp, while a small scalar image made big will be blurry.

Keep in mind that if you generate an image that is 7680 × 4320 (8K, highest specified resolution), it’s going to be a big file - and every person that visits your site will have to download the entire file, even if their screen is 1920x1080 (or smaller, even. Consider mobile browsers.)

Thank you for the reply.

I see what you mean. So if I were to go in between, say maybe create it at around 3500px and compress it a little, it would be suitable. It sounds like a large dimension

Hi Toolman

If this is only going to be viewed on the web or on mobile, then as m_hutley said 1920 x 1080 would be of ample size.

This can then be scaled down according to device width. Just keep an eye on your file size when you save it from something like photoshop. Try to set it for 1920 x 1080 & 72dpi. You shouldn’t need anything higher than that for web.

If however this is going for print, you would be better looking at 300dpi.

1 Like

Try creating a really large image and use CSS :slight_smile:

 background_url(large_file.jpg);

Experiment with background-size:

https://www.w3schools.com/cssref/css3_pr_background-size.asp

I also believe a large dimensioned file with a very low quality can initially be rendered and once the page has rendered then overlay the image with a better quality.

1 Like

It will be for web and mobile only. I am a sucker for pixel perfect which I know doesn’t exist anymore so I’m always trying to create the clearest and sharpest design possible!

Hi Toolman

Following my earlier post, it got me thinking about retina displays, they’re at 227dpi so I would try and get closer to that whilst keeping a smaller file size.

Hi,

I see. Do other DPI’s display on web? I remember once using a 300DPI image by accident and the image wouldn’t show.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.