CSS vs Image

[vaudevillianvet]

Which is best to use, a few lines of CSS or a small image? File-size there's not much of a difference, a few kb in most situations, so that's not much of an argument for one or the other. What do you guys think? Honestly, I'm undecided and trying to think of a reason for using CSS instead of a simple image but I'm drawing blanks.

[crumblepie]

Well it depends on what you're going to be using the visuals for. If it is something that needs to be changed frequently I'd say go with CSS. Images take longer to edit.

[Amdac]

Keep in mind you want to keep text out of images as much as possible as well. If it's something like a menu, you're better off using CSS to handle background images with real text placed on top so search engines have actual content to index.

[Irr]

CSS for the simple reason that I don't have to worry about broken images. Also, it's faster to load and edit. I only use images when I want something more customized and that I couldn't do with CSS.

[Mommajj8]

I also agree with using CSS. An image might be easier to use in the short term, but in the long run, good CSS code can go a long way for the reasons listed above:

broken links are not an issue

CSS will most likely load faster

CSS and text add context for search engines 

[chi]

I think, when designing a website, the designer, in addition to many aspects of web design, must also consider how fast a page loads. For me, this always comes as one of my top priorities. With that in mind, I must consider the visitors who might just be using a slow internet connection. This is why I try to avoid images in a website layout, as much as possible. Images can sometimes load slower than the rest of the CSS-based part of the layout and that can sometimes be annoying to the visitor's side. As for me, I do not want my visitors to wait even for just a few seconds, staring at the slow-paced image loading. Therefore, I prefer CSS over images.

 

If you're just choosing between CSS and images for menu navigation, I suggest you choose CSS. CSS now allows you to add rounded corners and shadows from boxes to texts. But beware though, because some of these features still depends on the browser. Good example for this is Internet Explorer. This browser doesn't correctly show CSS-based rounded corners yet. I hope they'll improve it soon though. But still, if you're just gonna use an image as a background to something, go for CSS.

[OhioTom76]

I would go with CSS whenever possible. It's not just a matter of file sizes, CSS is scaleable and resolution independent. Many of your standard user interface effects such as background gradients, glossy buttons, shadows and rounded corners can all be done via CSS these days. Once you become more comfortable with it, you will see how much faster it is than having to slice up a bunch of image components and reassemble them as background images to all of your DIVs.

[justinjake]

my opinion is using line image and single line div is the same and will not affect on your website performance but for me if your going to use image on making a page or a website make sure that your going to use is yours to prevent copyright and i suggest to download the Adobe Photoshop or other Photo editing software so if you want to use some image your going use but it just from the internet and not yours, i suggest to edit it first and make it different from original and remove the watermark, even it is just a line some people can make a secret water mark on that image so be careful and Goodluck buddy.

[safacatz]

Hi 

I now CSS but i don't know the difference 

Explain and give any example