1

I am a newby to design and looking now into the use of background instead of foreground images, which is a common practice.

I look at the techniques used, and see that:

  • you usually need to explicitly state the dimensions of the image (and set the foreground element to these dimensions)
  • you need to make the foreground element to somehow disappear with css tricks. All this looks really hackish. So, I wonder, why on earth do all this instead of just using the native element? I am sure there is a good answer

(I did go through this When to use IMG vs. CSS background-image? , and could not figure out a clear answer)

Community
  • 1
  • 1
shealtiel
  • 8,020
  • 18
  • 50
  • 82
  • 4
    Use the `img` tag when the image is part of the **Content** of the page. Use a css background when it is part of the **Design** of the page. You do this so that the page's content isn't muddled with superfluous elements that server no purpose in structuring the content. – Shmiddty Sep 24 '12 at 22:35
  • Can you give an example, for images that are part and are not part of the content? – shealtiel Sep 24 '12 at 22:37
  • Would you consider a custom button image part of the content of the page? (submit, cancel etc.) – shealtiel Sep 24 '12 at 22:38
  • You will have to rephrase. "Image replacement" is term used when you are replacing text with image. It is used when text is supposed to be in specific font, that cannot be reliably rendered by browser. Nothing in your question indicates that you used the term in this sense. – tereško Sep 24 '12 at 22:38
  • thank you teresko, rephrasing – shealtiel Sep 24 '12 at 22:39
  • If it's part of the page design rather than a core element it should generally be done with background images. There are a number of reasons for this, but the biggest one is that good practices dictate a separation of style and content. Say I wanted to make my site look completely different... if I've put things in with images I cannot do it without modifying content (rather than just css). I used to balk as well, but *it really is better* – Ben D Sep 24 '12 at 22:40
  • 1
    Non-content images: Decorative headlines, logos, anything that is pretty much guaranteed to be replaced in the next redesign. Content images: a chart or diagram, pictures of a piece of art, a map. – cimmanon Sep 24 '12 at 22:48
  • Ok, you all guys have a good case that in theory UI elements are actually part of design. But! Isn't the fact the nasty hacks (negative placement to name one) need to be used, is an evidence that the language was designed to be uses differently? – shealtiel Sep 24 '12 at 23:10
  • What you call `nasty hacks`, I call them `useful techniques I could use one day if needed in particular cases`, e.g. I still have to do my job whatever was expected from the CSS Working Group and browser vendors. Tables and spacer.gif and then even floats weren't meant to be used for layouts and still were. Two questions you can ask yourself: does it work? Is there a better solution? If not, go! – FelipeAls Sep 25 '12 at 02:10
  • possible duplicate of [When to use IMG vs. CSS background-image?](http://stackoverflow.com/questions/492809/when-to-use-img-vs-css-background-image) – Caleb Sep 25 '12 at 08:58

4 Answers4

3

One thing to consider as a benefit to using CSS for images is that you can load all your design images (images for UI elements, etc) with one http request rather than an http request for each individual image using a sprite. One large image that contains a grid of all your images.

As its been stated before, content images should use the img tag which also helps for people using various accessibility options when visiting your site/app. For example, if they are using a screenreader, the screenreader knows its an image and can read the img alt name or title, but if its just a div with a background image they get nothing.

Mark
  • 5,680
  • 2
  • 25
  • 26
2

The main difference is that in the img tag the image is hardcoded.

With CSS you can create different designs, switch between them, redesign the page, without altering the source code. To see the power of CSS, check http://www.csszengarden.com/, all the pages use the same HTML source, but with different CSS layout.

As @Shmiddty noted, if img is for embedded images (actual content, for example a gallery, or a picture for an article), and CSS is for design.

Also, the question you referred to, has nice list of all the use-cases: When to use CSS background-image.

Karoly Horvath
  • 94,607
  • 11
  • 117
  • 176
  • Ok, you all guys have a good case that in theory UI elements are actually part of design. But! Isn't the fact the nasty hacks (negative placement to name one) need to be used, is an evidence that the language was designed to be uses differently? – shealtiel Sep 24 '12 at 22:52
2

The goal is to separate content from presentation. HTML should contain just content, and all presentation should be moved to the CSS. Once you achieve that, you gain a few useful side effects:

  • The CSS (presentational code) is cached by the user's browser, and each HTML file requested is smaller. This also has some SEO benefits (decreased code fluff).
  • Screen readers have to muddle through less when interpreting your page for visually impaired users. Making sure your HTML contains just content means visually impaired users reach what they're looking for much quicker.
  • CSS makes it possible to display the same content in different visual configurations, which is the cornerstone of the responsive web design movement. Properly delineating your content and presentation means being able to use the same HTML files across multiple platforms (desktop, tablet, smartphone).

However, there are times when images are content on a specific page. In those cases, you want to use an IMG tag, and moving the image to the CSS is actually a wrong move. A great discussion of when and where to use text to image replacement is at When to use IMG vs. CSS background-image? Basically, my personal litmus test is something like: Is this image going to be used multiple times on the site? If it is, it's probably part of the design. Once-off images are generally content.

If you're looking to move your design images to the CSS, congratulations :-p You've adopted a healthy amount of work, but started doing something worthwhile to the long-term health of your website as part of the web ecosystem. I would highly recommend looking into using the SASS/Compass system to manage your design images as sprites (see A List Apart:CSS Sprites and Spriting with Compass).

Community
  • 1
  • 1
thirdender
  • 3,891
  • 2
  • 30
  • 33
0

One of the main points of image replacement is to use your site title in a h1 tag for good SEO, and then hiding the text and replacing it with a custom logo.

This also makes your site more accessible. Say for example, your user has CSS disabled for whatever reason (screenreaders, maybe). They would still see the textual representation of your site title, whereas normal users would see the custom graphic.

Jezen Thomas
  • 13,619
  • 6
  • 53
  • 91
  • Does it mean you take back your answer? – shealtiel Sep 24 '12 at 22:54
  • Consider the following HTML: `` versus ``. There's not a huge difference, but the HTML intended for use with the image replacement techniques (the first snippet) is shorter. Alone, this isn't huge, but combined with the ability to use sprites to combine your images, you substantially decrease the number server requests and consequently page load time. See this [example sprite from google.com](https://ssl.gstatic.com/gb/images/j_e6a6aca6.png). – thirdender Sep 24 '12 at 22:57
  • 1
    A logo isn't the best example here as it can often be considered part of the content. But to go with this example, if the **Content** of the page doesn't change, but the **Design** does, you should only need to modify a CSS file. If you have to modify the HTML structure, then your design is spilling into your content. It means more work, which is the whole point of separating them. – Shmiddty Sep 24 '12 at 23:02
  • Thank you @thirdender for the link, very convincing – shealtiel Sep 24 '12 at 23:13
  • No, I don't take back my answer, as it's still a valid answer. – Jezen Thomas Sep 24 '12 at 23:34
  • @JezenThomas I'm confused, please help me to understand. My question was why use BG images instead of which seems more natural and doesn't demand hacks. You answered: for SEO. So my bottom line question, is do you agree that + alt is equally good for SEO as H1 hidden with css + BG image? – shealtiel Sep 25 '12 at 12:52
  • Your original question was about *image replacement*, not whether you should use an inline image or a background image. You've rephrased the question now, and my new answer is “It depends on the context; treat a website the same as a printed document. It's fairly obvious what is an image and what is background. Are you putting text over the image? Yes? Then obviously the image is a background. Is the image the photo of a product? Maybe leave it as an inline image in that case”. There are many ways to skin a cat (or site), but let's not get too philosophical. – Jezen Thomas Sep 25 '12 at 12:59