Streaming live at 10am (PST)

Which resolution width do I use for a background slider?

I am doing my first website with Webflow and is working with some background slides.
But I don’t know exactly how many pixels I need in width for a background slide?
Is 2200 pixel width OK for Webflow projects?
( We used approx. 2000 px width for background slides when working with Adobe Muse, - I don’t know if it is different in Webflow)

Thanks a lot :blush:

If your slider — and slides — will be takig up all the space in the background, it measn you’ll set it to 100% width. This way, depending on how visitors have their browser set, it will always take up all the space, horizontally.

This means you can’t control it. So you have to chose a value that will make your slides look good in any occasion. (And it really only concerns images… HTML/CSS content will have to be set so that it grow and shrink depending on the browsers width).

You could go with 2000px images, but you can also try a little less, I usually use 1920, which is the HD width standard.

1 Like

OK, - only 1920? That was great :blush:
I was in doubt after I watched this video from Webflow regarding. resolution: where he talkes about 3000 px i width?

It’s really a… choice, and not a technical one. Your images will show up at different dimensions and your choice depends on your goal, your strategy.

A well crafted, intelligently compressed background image of 1920 px will look good at any size under 1920, and will probably continue to be acceptable when stratched a bit upper.

That’s for a BACKGROUND image, wich is by definition a background, not a crucial thing. Now if the image is the most important thing of the slide, you may want to increae it in order for it to never be stretched.

It’s all about how the image is important, how big you can accept assets to be, how good quality you want them to be etc… just choices. So just do tests :slight_smile:

1 Like

OK. Thank you so much. Then I stick to 1920 px in width. So it should be OK - shouldn’t it? It just confuses one to come up with 3000 px in width as they mentioned in the video!

I don’t know :smiley: Feel free to come back and show us how it looks, and I can give you my honest opinion, if you need to increase the quality of the images or not.

As the video is stating, you only need to compress or optimize the images you’re gonna use a backgrounds. inline images will be handled by Webflow automatically.

However, it’s better to process the image a bit before giving it to Webflow. Webflow does a very good job at sizing and compressing images. So good that even if you could do better on your own, it would be so slight of a difference that it’s not a reason enought to do it. BUT I noticed that the final image is crisper if you give Webflow jpegs compressed at 60 instead of 90 or 100. If I give totally uncompressed images to Webflow, I notice a very slight blur in the details.

Now for the 3000px for BGs, it’s maybe a bit too much. Most people’s big screens, like 27 inches display, non HDPI, will be 2500 something. HDPI 27" screen will be over 5000px, but display UI and content at actually close to 2500 pt. I don’teven know if Webflow is serving hdpi bg images for Desktop (logically, yes).

So once again: choices. Check for yourself on various devices, sizes, densities, decide if HDPI is overkill (depending on the nature of the image, it can be a great addition, or completely unoticeable.).

I’d use 2500 instead of 3000 in the vast majority of the cases.

And I compress my images using Optimage and ImageOptim.

1 Like