What is a better approach when using Webflow? All the Webflow videos I see have divs with background images when you need to fit an object into an element size. Object-fit works well but lacks IE11 support.
So what is best method? What are you all doing? Inline images with object-fit get resized responsively by Webflow which is cool. Should I even worry about IE11?
I can see using background images for hero, but wouldn’t inline be better for cards and anywhere else?
Looking for advice on when it is good to use both. Thanks.
I get caught up in this dilemma too. I am definitely moving towards using inline images for SEO and accessibility. That alt tag is important. I seem to get pulled up on page speed with css image resizing as well. ( i wonder how object-fit impact on that).
No background image resizing by WF is not good either!
I haven’t used object-fit and didn’t know it wasn’t supported by ie11. I am noticing sites getting 5-10% ie traffic. So I am not using grid either for now, but on saying that I reckon some of my flex layouts are going to break anyway??
I have used both background images and object-fit. The latter is surely better for SEO, but the IE11 issue is still a concern. If Webflow would add background image responsive sizing that would help a lot.
It would be great to get more feedback on this one.
I think it is time to forget IE11 and move ahead with object-fit. When the image is part of the content and not just decoration, it makes sense to keep them inline.
It already has this. You can choose which image is the background image for each breakpoint. I usually make three, then pick the one I want to use that makes sense for the device, and style accordingly. No automated process would position or size elements correctly across breakpoints anyway.
Images are not the best way to confer information to a user or bot. Alt tags are there to benefit users with disabilities.
Google’s AI is already categorizing images. So you risk being caught spamming Googlebot with Alt tags that are not a match to what AI and surrounding content reveals.
Use text elements and structure to convey information is always a better choice. Below is the Google - Images Best Practice Guide
What if a client is uploading images and I have no control on the dimensions of the image? What is best way to handle that? Background images with cover work fine, but is there some service that would crop up one for each breakpoint automatically?
Pages like this one are where the issue arises. I set these up as background images for now as I need them all the same size. https://uccbayberry.webflow.io/about/staff
Do a G search for “online image crop and size converter”, there are many. Test out a couple, if something works create a how-to doc for your client.
For this client, I would tell the client just post and save as a draft, notify me, and I will clean it up. Just give me an image bigger than X and would work as a square. Keeps you in the loop. How many times a year are they going to be changing it or adding people anyway?
If you just use the image as a child of a div and use object-fit, you should end up with multiple images sized and referenced in the code by webflow.
object-fit allows Webflow to size the inline images responsively which is nice. IE11 to be honest is pretty much a dead browser in my opinion even though I know some large businesses still have it. If we keep worrying about IE11 we will never move forward.
True. If your images come in the correct ratio, then no problem right? IE would fallback to just showing an image anyway. So they would still see it. If you were on a mobile device who really cares what the ratio is, there you just need to control size for speed. Squares are nice when looking at lots of images, but as a photographer, I hate when my images are constrained.
Best advise I can give designers is to stop thinking users use the web the way that they do. They don’t. I build mobile first. I just wish I could flip a switch in webflow to let me design that way.
If Webflow had a simple cropping function it would resolve all this. I am coming from using Craft CMS and Static CMS and they both have image functions for that. It is nice to just take client uploaded images, crop for say 800 x 800 square and use the image in cards and other components.
I think of object-fit along same lines of CSS Grid. Great in theory but lack of legacy support makes it a hard choice. Since like 10% of the world still use IE it is hard to just dismiss it overall. I am sure that is why Webflow always uses background images in their videos.
I think backgrounds like Hero and header images should be background images. All inline should be object-fit. Like the staff page images should be object-fit
Each designer should work with their clients to define supported browsers, and the implications of the choice, before a project ever starts. I include supported browsers as a line item in all contracts.