PDA

View Full Version : Image - HTML or CSS?



lebanezh
Sep 18th, 2010, 08:51 AM
Hello you guys,

A simple one,

If I wanna place a picture somewhere on my website, what would then be best,
placing in there with a html image tag (html) or writing a new div and give it a background image (css)?

Thanks in regard ;)

abduraooft
Sep 18th, 2010, 09:37 AM
That depends on the purpose. If it's an icon/logo/header-image etc then it'll be considered as the part of the document and thus it should be placed using an <img> tag. On the other hand, if it's juts for styling the document, you you may set it as the background of an appropriate element (no need for an extra <div>, which may result in divitis (http://csscreator.com/divitis)!)

conware
Sep 18th, 2010, 08:52 PM
Here are some tips to optimize your images for your site:

When your using verious small icons:
Try to combine them in a photo editor and use css to position them as backgrounds. This will increase the filesize of one image but lower the page requests thus making the website load faster.

Images on your content part:
Most of the time use HTML img tag to display them.
Also when using the HTML img tag always give images a height, width and alt.
The height and width will tell the browser the exact size of the image making it easier to calculate the rest of the page, again making your page load faster. The Alt taq stands alternate text where you should write some info about the image your displaying.
All of this is important to search engines such as Google to index as maney images on your site possible.

Layout images:
In my opinion its best to set layout images to the background.
Because most of the time layout images: header, footer, navagation will be re used in most of your website pages.

Hope this helps :thumbsup:

optimus203
Sep 19th, 2010, 05:13 AM
Depends on the purpose of picture, as mentioned in above posts. Personally, I've found background images to load slower than images with <img> tags.

Can someone confirm the following? <img> photos are able to be found by search engines, where background images are not.

abduraooft
Sep 19th, 2010, 01:29 PM
Can someone confirm the following? <img> photos are able to be found by search engines, where background images are not. background-image comes as a styling element and no search engines care CSS. They don't either care <img> tags, if a proper alt attribute is not given.