Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Posted by walter Reyneke
walter Reyneke
390 Points

Responsive images: best practise

I'd love to hear your thoughts on the following.

When adding a picture to your website, example perhaps a hero picture, and you want to keep responsiveness in mind, would you add the picture rather as an img element or a div with a background property as the image?

Maybe it's a silly question but it's something I am contemplating a lot and trying to understand once and for all. Thank you for your comments in advance! Walter

3 Answers

Carsten Jaksch
Carsten Jaksch
5,847 Points

It's up to you how to insert an image. This depends on what you are going to do.

If you want to build a hero section with background image and some text/call-to-action button, you could declare the image within the HTML as img-tag (in this case you need CSS to set it behind the text) or set it straight as CSS-background.

I like the second method more, because you don't need to hack on the img-tag only to set it as a background image. But a background image as img-tag gives you more control, if you want special effects like parallax. And you could do some crazy stuff with SVG like multiple levels of backgrounds with parallax.

But plain images in articles should mostly use the img-tag. I think an img-tag will encourage the indexation of images in search engines like Google, too.

Feel free to ask, if you don't understand all of my thoughts.

Here you will find more about modern, responsive images: https://responsiveimages.org/

walter Reyneke
walter Reyneke
390 Points

Thanks!

Josh Sneddon
Josh Sneddon
15,943 Points
Josh Sneddon
Josh Sneddon
15,943 Points

Hi Walter, the way I see it is that if the image will be a part of the content of the website (hero images included), then you should use the img element. This makes your code semantically better, as your markup represents the content. It is also better for accessibility and SEO. Use CSS background images to improve the look of your site, such as if you want to give the site a cool background, but don't rely on them for content purposes.

The img element also gives you better control over how your image scales. The simplest way is to give the image a CSS max-width property of 100% and this will maintain the image's proportions at any screen width. Check out the 'Responsive Images' course on Treehouse for information on some cool new HTML features which enable you to load different sized images depending on the user's device, all done using the img element.

Hope this helps!

walter Reyneke
walter Reyneke
390 Points

Will watch the vid, thanks for the explanation.

Would you say your main logo is an element too? I saw that in the tutorial on frameworks by Guil Hernandez he uses a logo background image.

Josh Sneddon
Josh Sneddon
15,943 Points

You're welcome and yes I include logos as img elements for the same reasons.

tobiaskrause
tobiaskrause
9,160 Points
tobiaskrause
tobiaskrause
9,160 Points

I would not use the div solution since Adblock seems to love to block divs with a background image :)

walter Reyneke
walter Reyneke
390 Points

Thanks noted!