When to use IMG vs CSS background-image

Question

In what situations is it more appropriate to use an HTML IMG tag to display an image  as opposed to a CSS background-image  and vice-versa   Factors may include accessibility  browser support  dynamic content  or any kind of technical limits or usability principles

User · Answer

Here s a technical consideration  will the image be generated dynamically  It tends to be a lot easier to generate the  lt img gt  tag in HTML than to try to dynamically edit a CSS property

User · Answer

HTML is for content and CSS is for design  Is the image necessary and does it need to be picked up by screen readers  If the answer is yes  then put the image in the HTML  If it is purely for styling  then you can use the background-image property in CSS to inject the image  Just as a lot of people here have already mentioned  you can then use a pseudo element on the image if you like

User · Answer

Browsers aren t always set to print background images by default  if you intend to have people print your page

User · Answer

In regards to animating images using CSS TranslateX Y  The proper way to animate html  - If you do a Chrome Timeline recording of CSS background-images being animated vs IMG tags being animated you will see the paint times are drastically shorter for the CSS background-images

User · Answer

You can use IMG tags if you want the images to be fluid and scale to different screen sizes  For me these images are mostly part of the content  For most elements that are not part of the content  I use CSS sprites to keep the download size minimal unless I really want to animate icons etc

User · Answer

I would add another two arguments    An img tag is good if you need to resize the image  E g  if the original image is 100px by 100 px  and you want it to be 80px by 80px  you can set the CSS width and height of the img tag  I don t know of any good way to do this using background-image  EDIT  This can now also be done with a background-image  using the background-size CSS3 attribute  Using background-image is good when you need to dynamically switch between sprites  E g  if you have a button image  and you want a separate image displayed when the cursor is hovering over the element  you can use a background image containing both the normal and hover sprites  and dynamically change the background-position

User · Answer

One more benefit from using the  lt IMG gt  tag is related to SEO - i e  you can provide additional information about the image in the ALT attribute of the image tag  while there s no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines  The ALT attribute definitely gives the  lt IMG gt  tag SEO advantage over the CSS approach  That s why according to me it is better to specify the images you want to rank well in the image search results  e g  Google Image Search  using the  lt IMG gt  tag

User · Answer

Use CSS background-image in a case of multiple skins or versions of design  Javascript can be used to dynamically change a class of an element  which will force it to render a different image  With an IMG tag  it may be more tricky

User · Answer

IMG load first because the src is in the html file itself whereas in the case of background-image the source is mentioned in stylesheet so the image loads after the stylesheet loaded  delaying the loading of the webpage

User · Answer

Use CSS background-image in a case of multiple skins or versions of design  Javascript can be used to dynamically change a class of an element  which will force it to render a different image  With an IMG tag  it may be more tricky

User · Answer

It s a black and white decision to me  If the image is part of the content such as a logo or diagram or person  real person  not stock photo people  then use the  lt img   gt  tag plus alt attribute  For everything else there s CSS background images   The other time to use CSS background images is when doing image-replacement of text eg  paragraphs headers

User · Answer

I m surprised no one s mentioned this yet  CSS transitions   You can natively transition a div s background image    some div       background-image url image 1 jpg       -webkit-transition background-image 0 5s         Other vendor-prefixed transition properties        transition background-image 0 5s      some div hover       background-image url image 2 jpg       This saves any kind of JavaScript or jQuery animation to fade an  lt img  gt  s src   More information about transitions on MDN

User · Answer

Also  i have a gallery section which has inconsistent picture sizes so even though those images are obviously considered content  I use background images and center them in divs with a set size  This is similar to what facebook does in their albums

User · Answer

Above answers considers only Design aspect   I am listing it in SEO aspects   When to use  lt img   gt     When Your Image need to be indexed by search engine If it has relation to content not to design  If your image is not too small   not iconic images    Images where you can add alt and title attribute  Images from a webpage which you want to print using print media css   When to use CSS background-image   Images Purely Used to Design  No Relation With Content  Small Images which we can play with CSS3  Repeating Images   In blog author icon   date icon will be repeated for each article etc       As i will use them based on these reasons  These are Good practices of Search Engine Optimization of Images

User · Answer

HTML is for content and CSS is for design  Is the image necessary and does it need to be picked up by screen readers  If the answer is yes  then put the image in the HTML  If it is purely for styling  then you can use the background-image property in CSS to inject the image  Just as a lot of people here have already mentioned  you can then use a pseudo element on the image if you like

User · Answer

Here s a technical consideration  will the image be generated dynamically  It tends to be a lot easier to generate the  lt img gt  tag in HTML than to try to dynamically edit a CSS property

User · Answer

If you have your CSS in an external file  then it s often convenient to display an image that s used frequently across the site  such as a header image  as a background image  because then you have the flexibility to change the image later   For example  say you have the following HTML    lt div id  headerImage  gt  lt  div gt       and CSS    headerImage       width  200px      height  100px      background  url Images headerImage png  no-repeat      A few days later  you change the location of the image  All you have to do is update the CSS    headerImage       width  200px      height  100px      background  url    resources images headerImage png  no-repeat      Otherwise  you d have to update the src attribute of the appropriate  lt img gt  tag in every HTML file  assuming you re not using a server-side scripting language or CMS to automate the process    Also background images are useful if you don t want the user to be able to save the image  although I haven t ever needed to do this

User · Answer

Just a small one to add  you should use the img tag if you want users to be able to  right click  and  save-image   save-picture   so if you intend to provide the image as a resource for others   Using background image will  as far as I m aware on most browsers  disable the option to save the image directly

User · Answer

img is an html tag for a reason  therefore it should be used  For referencing or to illustrate things  people e g  in articles   Also if the image has a meaning or has to be clickable an img is better than a css background  For all other situation  I think  a css background can be used    Although  it is a subject that needs to be discussed over and over   Web Student from Paris  France

User · Answer

Above answers considers only Design aspect   I am listing it in SEO aspects   When to use  lt img   gt     When Your Image need to be indexed by search engine If it has relation to content not to design  If your image is not too small   not iconic images    Images where you can add alt and title attribute  Images from a webpage which you want to print using print media css   When to use CSS background-image   Images Purely Used to Design  No Relation With Content  Small Images which we can play with CSS3  Repeating Images   In blog author icon   date icon will be repeated for each article etc       As i will use them based on these reasons  These are Good practices of Search Engine Optimization of Images

User · Answer

In regards to animating images using CSS TranslateX Y  The proper way to animate html  - If you do a Chrome Timeline recording of CSS background-images being animated vs IMG tags being animated you will see the paint times are drastically shorter for the CSS background-images

User · Answer

Browsers aren t always set to print background images by default  if you intend to have people print your page

User · Answer

I use image instead of background-image when i want to make them 100  stretchable which supported in most browsers

User · Answer

Browsers aren t always set to print background images by default  if you intend to have people print your page

User · Answer

You can use IMG tags if you want the images to be fluid and scale to different screen sizes  For me these images are mostly part of the content  For most elements that are not part of the content  I use CSS sprites to keep the download size minimal unless I really want to animate icons etc

User · Answer

Another background-image PRO  Background-images for  lt ul gt   lt ol gt  lists   Use background images if they are part of the overall-design and are repeated on multiple pages  Preferably in background sprite form for optimization   Use  tags for all images that are not part of the overall design  and are most likely placed once  like specific images for articles  people  and important images that deserve to be added to google images      The only repeated image that I enclose in a  lt img gt  tag is the site company logo  Because people tend to click it to go to the homepage  thus you wrap it with an  lt a gt  tag

User · Answer

Some answers overcomplicate the scenario here  This is a dead simple situation   Just answer to this question every time you d like to place an image   Is this part of the content or part of the design   If you can t answer this  you probably don t know what you re doing or what you want to do   Also  DO NOT consider beside the two technique  just because you d wish to be  printer friendly  or not  Also DO NOT hide content from a SEO point of view with CSS  If you find yourself managing your content in CSS files  you shot yourself in the leg  This is just a trivial decision of what is content or not  Every other aspect should be ignored

User · Answer

One more benefit from using the  lt IMG gt  tag is related to SEO - i e  you can provide additional information about the image in the ALT attribute of the image tag  while there s no way to provide such information when specifying the image through CSS and in that case only the image file name may be indexed by search engines  The ALT attribute definitely gives the  lt IMG gt  tag SEO advantage over the CSS approach  That s why according to me it is better to specify the images you want to rank well in the image search results  e g  Google Image Search  using the  lt IMG gt  tag

User · Answer

If you want to add an image only for the special content on the page or for only one page the you should use IMG tag and if you want to put image on more than one pages then you should use  CSS Background Image

User · Answer

There s another reason  If you have a responsive design and want to split usage of low  medium  and high-res images for devices through media queries  you should use backgrounds as well

User · Answer

Proper uses of IMG   Use IMG if you intend to have  people print your page and you want the image to be included by default    mdash JayTee Use IMG  with alt text  when the image has an important semantic meaning  such as a warning icon  This ensures that the meaning of the image can be communicated in all user-agents  including screen readers     Pragmatic uses of IMG    Use IMG plus alt attribute if the image  is part of the content such as a logo or diagram or person  real person  not stock photo people    mdash sanchothefat Use IMG if you rely on browser scaling to render an image in proportion to text size  Use IMG  for multiple overlay images in IE6  Use IMG with a z-index in order  to stretch a background image to fill its entire window Note  this is no longer true with CSS3 background-size  see  6 below  Using img instead of background-image can dramatically improve performance of animations over a background    When to use CSS background-image   Use CSS background images if the  image is not part of the content    mdash sanchothefat Use CSS background images when  doing image-replacement of text eg  paragraphs headers    mdash sanchothefat Use background-image if you intend to have  people print your page and you do not want the image to be included by default    mdash JayTee Use background-image if you need to improve download times  as  with CSS sprites  Use background-image if you need for only a portion of the image to be visible  as with CSS sprites  Use background-image with background-size cover in order to stretch a background image to fill its entire window

User · Answer

Using a background image  you need to absolutely specify the dimensions  This can be a significant problem if you don t actually know them in advance or cannot determine them    A big problem with  lt img   gt  is overlays  What if I want an CSS inner shadow on my image  box-shadow inset 0 0 5px rgb 0 0 0  5    In this case  since  lt img   gt  can t have child elements  you need to use positioning and add empty elements which equates to useless markup   In conclusion  it s quite situational

User · Answer

About the same as sanchothefat s answer  but from a different aspect  I always ask myself  if I would completely remove the stylesheets from the website  do the remaining elements only belong to the content  If so  I did my job well

User · Answer

Use background images only when necessary e g  containers with image that tiles   One of the major PROS by using IMAGES is that it is better for SEO

User · Answer

img is an html tag for a reason  therefore it should be used  For referencing or to illustrate things  people e g  in articles   Also if the image has a meaning or has to be clickable an img is better than a css background  For all other situation  I think  a css background can be used    Although  it is a subject that needs to be discussed over and over   Web Student from Paris  France

User · Answer

Foreground   img   Background   CSS background

User · Answer

I use image instead of background-image when i want to make them 100  stretchable which supported in most browsers

User · Answer

Browsers aren t always set to print background images by default  if you intend to have people print your page

User · Answer

A couple of other scenarios where background-image should be used    When you want the image to change when the mouse is hovered upon it  When you want to add rounded corners to the image  If you use img  the image leaks out of the rounded corners

User · Answer

Also note that most search engine spiders don t index CSS background images therefore the background images will be ignored and you won t be able to get any traffic from search engines  no SEO benefit in short    Where as all images defined with  tags are indexed  unless manually excluded  and can bring in traffic from search engines if their title alt attributes and filenames are optimized properly  w r t some keyword

User · Answer

What about the size of the image  If I use the img tag  the browser scales the image  If I use css background  the browser just cuts a chunk from the larger image

User · Answer

A small input   I have had problems with responsive images slowing down the rendering on iphone for up to a minute  even with small images    lt  -- Was super slow -- gt   lt div class  stuff  gt       lt img src      width  100     gt   lt  div gt    But when switching to using background images the problem went away  this is only viable if targeting newer browsers

User · Answer

A small input   I have had problems with responsive images slowing down the rendering on iphone for up to a minute  even with small images    lt  -- Was super slow -- gt   lt div class  stuff  gt       lt img src      width  100     gt   lt  div gt    But when switching to using background images the problem went away  this is only viable if targeting newer browsers

User · Answer

Also  i have a gallery section which has inconsistent picture sizes so even though those images are obviously considered content  I use background images and center them in divs with a set size  This is similar to what facebook does in their albums

User · Answer

Just to throw a spanner in the works - i m of the opinion that you should never use the img tag  HTML was meant for content  not visual style  all the images on your page should come from the CSS  leaving your HTML code pure   even if it does take a bit longer to build

User · Answer

It s a black and white decision to me  If the image is part of the content such as a logo or diagram or person  real person  not stock photo people  then use the  lt img   gt  tag plus alt attribute  For everything else there s CSS background images   The other time to use CSS background images is when doing image-replacement of text eg  paragraphs headers

User · Answer

Just to throw a spanner in the works - i m of the opinion that you should never use the img tag  HTML was meant for content  not visual style  all the images on your page should come from the CSS  leaving your HTML code pure   even if it does take a bit longer to build

User · Answer

Here s a technical consideration  will the image be generated dynamically  It tends to be a lot easier to generate the  lt img gt  tag in HTML than to try to dynamically edit a CSS property

User · Answer

A couple of other scenarios where background-image should be used    When you want the image to change when the mouse is hovered upon it  When you want to add rounded corners to the image  If you use img  the image leaks out of the rounded corners

User · Answer

What about the size of the image  If I use the img tag  the browser scales the image  If I use css background  the browser just cuts a chunk from the larger image

User · Answer

There s another reason  If you have a responsive design and want to split usage of low  medium  and high-res images for devices through media queries  you should use backgrounds as well

User · Answer

Here s a technical consideration  will the image be generated dynamically  It tends to be a lot easier to generate the  lt img gt  tag in HTML than to try to dynamically edit a CSS property

User · Answer

About the same as sanchothefat s answer  but from a different aspect  I always ask myself  if I would completely remove the stylesheets from the website  do the remaining elements only belong to the content  If so  I did my job well

User · Answer

It s a black and white decision to me  If the image is part of the content such as a logo or diagram or person  real person  not stock photo people  then use the  lt img   gt  tag plus alt attribute  For everything else there s CSS background images   The other time to use CSS background images is when doing image-replacement of text eg  paragraphs headers

User · Answer

I would add another two arguments    An img tag is good if you need to resize the image  E g  if the original image is 100px by 100 px  and you want it to be 80px by 80px  you can set the CSS width and height of the img tag  I don t know of any good way to do this using background-image  EDIT  This can now also be done with a background-image  using the background-size CSS3 attribute  Using background-image is good when you need to dynamically switch between sprites  E g  if you have a button image  and you want a separate image displayed when the cursor is hovering over the element  you can use a background image containing both the normal and hover sprites  and dynamically change the background-position

User · Answer

It s a black and white decision to me  If the image is part of the content such as a logo or diagram or person  real person  not stock photo people  then use the  lt img   gt  tag plus alt attribute  For everything else there s CSS background images   The other time to use CSS background images is when doing image-replacement of text eg  paragraphs headers

User · Answer

Some answers overcomplicate the scenario here  This is a dead simple situation   Just answer to this question every time you d like to place an image   Is this part of the content or part of the design   If you can t answer this  you probably don t know what you re doing or what you want to do   Also  DO NOT consider beside the two technique  just because you d wish to be  printer friendly  or not  Also DO NOT hide content from a SEO point of view with CSS  If you find yourself managing your content in CSS files  you shot yourself in the leg  This is just a trivial decision of what is content or not  Every other aspect should be ignored

User · Answer

I m surprised no one s mentioned this yet  CSS transitions   You can natively transition a div s background image    some div       background-image url image 1 jpg       -webkit-transition background-image 0 5s         Other vendor-prefixed transition properties        transition background-image 0 5s      some div hover       background-image url image 2 jpg       This saves any kind of JavaScript or jQuery animation to fade an  lt img  gt  s src   More information about transitions on MDN

User · Answer

IMG load first because the src is in the html file itself whereas in the case of background-image the source is mentioned in stylesheet so the image loads after the stylesheet loaded  delaying the loading of the webpage

User · Answer

Foreground   img   Background   CSS background

User · Answer

If you have your CSS in an external file  then it s often convenient to display an image that s used frequently across the site  such as a header image  as a background image  because then you have the flexibility to change the image later   For example  say you have the following HTML    lt div id  headerImage  gt  lt  div gt       and CSS    headerImage       width  200px      height  100px      background  url Images headerImage png  no-repeat      A few days later  you change the location of the image  All you have to do is update the CSS    headerImage       width  200px      height  100px      background  url    resources images headerImage png  no-repeat      Otherwise  you d have to update the src attribute of the appropriate  lt img gt  tag in every HTML file  assuming you re not using a server-side scripting language or CMS to automate the process    Also background images are useful if you don t want the user to be able to save the image  although I haven t ever needed to do this

User · Answer

If you want to add an image only for the special content on the page or for only one page the you should use IMG tag and if you want to put image on more than one pages then you should use  CSS Background Image

User · Answer

Also note that most search engine spiders don t index CSS background images therefore the background images will be ignored and you won t be able to get any traffic from search engines  no SEO benefit in short    Where as all images defined with  tags are indexed  unless manually excluded  and can bring in traffic from search engines if their title alt attributes and filenames are optimized properly  w r t some keyword

User · Answer

Proper uses of IMG   Use IMG if you intend to have  people print your page and you want the image to be included by default    mdash JayTee Use IMG  with alt text  when the image has an important semantic meaning  such as a warning icon  This ensures that the meaning of the image can be communicated in all user-agents  including screen readers     Pragmatic uses of IMG    Use IMG plus alt attribute if the image  is part of the content such as a logo or diagram or person  real person  not stock photo people    mdash sanchothefat Use IMG if you rely on browser scaling to render an image in proportion to text size  Use IMG  for multiple overlay images in IE6  Use IMG with a z-index in order  to stretch a background image to fill its entire window Note  this is no longer true with CSS3 background-size  see  6 below  Using img instead of background-image can dramatically improve performance of animations over a background    When to use CSS background-image   Use CSS background images if the  image is not part of the content    mdash sanchothefat Use CSS background images when  doing image-replacement of text eg  paragraphs headers    mdash sanchothefat Use background-image if you intend to have  people print your page and you do not want the image to be included by default    mdash JayTee Use background-image if you need to improve download times  as  with CSS sprites  Use background-image if you need for only a portion of the image to be visible  as with CSS sprites  Use background-image with background-size cover in order to stretch a background image to fill its entire window

User · Answer

Using a background image  you need to absolutely specify the dimensions  This can be a significant problem if you don t actually know them in advance or cannot determine them    A big problem with  lt img   gt  is overlays  What if I want an CSS inner shadow on my image  box-shadow inset 0 0 5px rgb 0 0 0  5    In this case  since  lt img   gt  can t have child elements  you need to use positioning and add empty elements which equates to useless markup   In conclusion  it s quite situational

User · Answer

Another background-image PRO  Background-images for  lt ul gt   lt ol gt  lists   Use background images if they are part of the overall-design and are repeated on multiple pages  Preferably in background sprite form for optimization   Use  tags for all images that are not part of the overall design  and are most likely placed once  like specific images for articles  people  and important images that deserve to be added to google images      The only repeated image that I enclose in a  lt img gt  tag is the site company logo  Because people tend to click it to go to the homepage  thus you wrap it with an  lt a gt  tag

User · Answer

Just a small one to add  you should use the img tag if you want users to be able to  right click  and  save-image   save-picture   so if you intend to provide the image as a resource for others   Using background image will  as far as I m aware on most browsers  disable the option to save the image directly

User · Answer

Use background images only when necessary e g  containers with image that tiles   One of the major PROS by using IMAGES is that it is better for SEO

[html] When to use IMG vs. CSS background-image?

Examples related to html

Examples related to css

Examples related to image

Examples related to background-image