Image vs. Background Div | Best Practices

Design help General
1

Hey everyone,
I’m working on my first Webflow project and this is essentially my first time doing the development myself (thanks to Webflow!). I wanted to get a better idea of best practices when it comes to using an image element versus a div with a background.

I’ve been opting for the DIV because it takes care of re-scaling and I don’t have to worry about the aspect ratio getting thrown off (ex. see the three cards in the middle of the page). However, the problem that I’m running into is that I have to create a combo class each time I want to use the same layout grouping but with a new image. Is this considered an acceptable practice? Should I have done this differently? Any other feedback on the site structure is appreciated as well.

Here is my site Read-Only: https://preview.webflow.com/preview/wci?utm_source=wci&preview=265e87d84ea60e39936247b64ce7b03c&pageId=5ce44a7a930ad281a0b1fa0c

4 Likes
2

Hey @yoon395

Using bg images is okey, but they are not SEO friendly and like you said you need to add combo classes.

Usually images that are part of the content must be real image elements < img >, and images that are just design elements can be bg elements.

Right now I’m working on a site and I’m using image elements for all images + backgrounds. The reason is SEO and image indexing.

The trick you can use to scale images properly it some custom CSS code:

<style>
 .image-class {
  object-fit: cover;
}
</style>

Learn more here > object-fit | CSS-Tricks - CSS-Tricks

Here’s a great article for images and Webflow > Fully Responsive Images | Edgar Allan

Hope this helps :webflow_heart:

5 Likes
3

Very interesting. I’ll look into this further. Thank you!

1 Like
4

@yoon395 - I think Piter’s solution is more technically sound, but just throwing this out there as an option for using image elements while retaining a certain ratio without using custom code. Good luck on your first Webflow project!

https://www.loom.com/share/4a008392507741d780d95f904691bcc8

2 Likes
5

Just looking for clarification, Does Webflow still make responsive images for inline images using object-fit? I love that Webflow automatically makes variants of inline images for different screen sizes, and Im not sure if using an object-fit class will override that feature