I’m new to Webflow and the Forum. I’m making this topic about ways around some roadblocks in design I’ve experienced while trying to design.
So, I sized the same background image at four different sizes to fit each viewing mode (desktop, table, phone). Is this the right way to do it if I want to keep image resolution of the background image? I’ll embarrassingly tell you the the image sizes:
Desktop Mode
background image 1: 5120 X 2880 pixels [imac]
background image 2: 2880 X 1800 pixels [mbp]
Tablet Mode
background image 3: 2732 X 2048 pixels [ipad]
Mobile Mode
background image 4: 1242 x 2688 pixels [mobile]
I’ve noticed though, when I upload imac version of the image it’s also uploaded to the other viewing modes as well. It looks all distorted with bad resolution.
What’s the proper way to go about what I’m trying to achieve.
So after playing around, I learned that I choose my background image in the “background tab” in the style section. The different modes will just crop the background image instead of resizing it, although the mobile mode asks for a whole separate image.
Now I want to put images on that selected background. Considering I want to do parallax scrolling with these images, what’s the best practice for placing these images? An image in a container? Or an image straight out of the asset folder?
There are no embarrassing questions, web development is not at all evident, and Webflow makes things visual, not magic. You’re on your journey to learn one thing a day, everyday, for as long as you do this activity
So for background images: unless you’re making a very specific arty site, don’t consider the resolutions of the devices your target resolutions. You want quality, then start with a big resolution, but not too much, and not several versions of your images. Browsers can resize downm an image and Webflow is also taking care, somehow, of responsivity for images.
So if you want a big quality image for your homepage, you can start at 2200 base px image and use only this one for all devices. See for yourself if you have too much of a quality loss. Don’t use a lot of heavy images and make anything you can to compress it. You can get yourself a tool such as Optimage or ImageOptim, it’s an essential investment.
Down the road, images on your site shouldn’t be more than 150Ko, or 350 for the very big ones. Occasionally, for homepage or hero sections, they can be bigger.
If you want to make a parallax within a section, with a bg image, don’t use an actual bg image, or use the bg image on a div that you’ll place in your section. Because you’ll have to move this div with IX, (and you can’t move bg images with IX).
Thank you for your time in replying and advising Vince! I have takeaway questions:
“If you want to make a parallax within a section, with a bg image, don’t use an actual bg image…”
So my background image is set, there are different images that I want to use for
parallax scrolling. Is the proper way to do shit is to create a section element, and build the parallax effect in that section?
“…images on your site shouldn’t be more than 150Ko…”
I’m understanding that the load of those YouTube tutorial videos are outdated since I’m using another version of Webflow. I’m so lost on what I think should be simple. Any other resources on:
Positioning containers
Adding images into containers
Please do share, or offer any suggestions. I came here because questions on the YouTube tutorials don’t get responses.
put your text on top of, or in front of the picture. Then change the text background color to a solid color. You can also add a graphic (square, circle, etc.) then add text all stacked on the png. Of course you will need to adjust the sizing of both to get the effect you want.
