CSS image replacement

[Derleek]

So, i'm wondering if there is any benefit to strictly using CSS to display images? I mean lets just say I have a picture of a house, would it be best if I used css image replacement or just use the html <img> insert?

 

Is it just a matter of preference?

[haku]

If you want to have two images overtop each other (for example a tiled background like you see on many sites, and an image over top of it), then you need to set the background with CSS.

 

Other than that, it's a matter of choice - kind of. You have to identify which images are pertinent to the content, and which aren't. The way to do this is to look at an image and ask yourself if the image was missing, would the information on the page change in any way? If it would, then its better to use an image tag, with an alt attribute in it, so that if the image doesn't download, or someone has images off, they will be able to see a textual representation of what the image was supposed to be. If taking the image out of the site won't change the meaning of the site, then it's better to put it as a background image.

 

There are two reasons for this. The first is that the trend of the web these days is to completely separate content ([x]html), design (css) and function (javascript) into separate files. This makes everything easier to deal with, as you aren't searching through image tags to find data etc. It's a much cleaner way of developing websites. Although to some degree, this is still just a matter of choice, though I firmly believe that not doing it leads to sloppy coding. But the other reason is more functional. People with bad eyes use screen readers - software that goes over the code and tells them what it says. These people have images turned off (they don't need to see them!), so a background image will just be gone and won't matter, and the images that have relevance to the content will have the textual representation that you stated in the alt attribute to be able to tell what the image was. For these people, it's very important that the site is coded accessibly. In some countries, they have even required by law (or are going to ) that sites be accessible to the sight-impaired.

 

There is a 3rd possible reason - search engines only read content, they don't read the CSS. So if you take the unnecessary image tags out of your markup (content), they have less content to search through to figure out what your page is about. This could (and I'm guessing probably does, though I'm not an SEO guy) improve your search engine results.

[obsidian]

If it is a true image on your page, I would highly recommend using img tags for what they are intended. Doing so allows you to add alt attributes and other SEO items which would otherwise be unusable with CSS. Also, keep in mind that screen readers for the visually impaired will not pick up your styles, so if they are viewing your page without CSS applied, they will completely miss your images.

[TheFilmGod]

unless you are looking for a background, then YOU MUST use the < img /> tag. Otherwise you are making css counterproductive and would need to use extra markup to achieve the same effect. Hope that helps!

[obsidian]

unless you are looking for a background, then YOU MUST use the < img /> tag. Otherwise you are making css counterproductive and would need to use extra markup to achieve the same effect. Hope that helps!

 

That is not always the case. Sometimes, people achieve a sleek, fast rollover effect with CSS that otherwise would take quite a bit more markup and JS. Grant it, this is usually within anchor tags, but there are exceptions to every rule

[Derleek]

So i'm gathering that unless I am using an image as a background i should stay away from CSS image replacement?

 

i'll give an example: I want to replace a simple text menu with some fancy pancy text.  do i use the <img> tag or replace it with CSS?

[TheFilmGod]

Obsidian is right. I forgot about some of the "special" scenarios.

 

<img > tags are stationary. Once the image is loaded it stays there. If you want to do rollovers you should use CSS. I recommend using css for virtually everything unless the image is "just an image." An image that is the main content and has a definite place on the webpage.

[obsidian]

So i'm gathering that unless I am using an image as a background i should stay away from CSS image replacement?

 

i'll give an example: I want to replace a simple text menu with some fancy pancy text.  do i use the <img> tag or replace it with CSS?

 

CSS is not used to replace text directly. The determining factor to whether or not to use CSS in this case (to me, at least) is to determine whether you want the menu to have any change or rollover effect. If you are wanting to have the images replace the text and change on hover, I would definitely recommend having the CSS menu. If you are wanting the images to be static, I would recommend having them placed statically within <img /> tags on your page.