5

I just read this entry but I am still not quite sure about the reasoning for the choices. In particular, I'd like to understand exactly what is meant by "content" and "non-content/other" images and why I should use img when I am adding content images to my site and background-image when adding non content images.

Here is my understanding of "content" and "non-content" image:

Content images are those images that are dynamically generated. For example, images of users that are displayed on their profile page and images that are uploaded to a photo gallery, a blog, etc.

Non-content images are those non-dynamic images that are part of the site design. They're "baked in" if you will. E.g. logos, image links, image buttons, etc.

If my definitions are correct - and please tell me if they're not - then it seems to me the reasoning for using each would be as follows (although this isn't exactly apparent in the article linked to, hence my follow up question):

  • Non content images tend to not change as much as content images. I.e. logos, button images, links with images, etc. tend to stay the same. They're only changed if the site owner decides to redesign the site.

  • Content images, on the other hand, tend to change frequently. New images are uploaded often, users change their profile images and photo galleries, etc.

So because of the dynamic nature of content images, they need an img tag that can dynamically be modified by whatever tech stack the site is driven by. The not so frequently changing images don't need image tags. They can be loaded from the site design assets directly in the css file for performance and easy maintainability.

Is that about right or am I missing something?

Community
  • 1
  • 1
user1457366
  • 659
  • 3
  • 13
  • 19
  • 3
    How is it a duplicate if I am explicitly linking to it and explain that it's a follow up question because the original isn't clear enough (to me)? – user1457366 Dec 16 '13 at 01:51
  • Because your question is not very well isolated, and contains parts that are a duplicate of the other question. Your main question seems to be "What is the difference between content images and non-content images?" The stuff about why it is best to use IMG or CSS for the different types of images is part of the other question, and you should ask for clarifications in the comments. It may seem a bit confusing, but it makes sense when you get used to it. – trlkly Jul 29 '14 at 05:14

2 Answers2

3

CSS is used for describing the presentation semantics (the look and formatting). So if you use css to show your images, it means (in theory) that you are showing that image only to style some element to look better or express itself better. If in the future you would change the skin of your web site, it is likely you would consider changing those images as well.

Content images on the other hand would be part of the information/data of your web site. If you show some user's photo it is nothing to do with styling. It is as important information as user's name, surname or age.

jonasnas
  • 3,540
  • 1
  • 23
  • 32
1

the img tag can be fetched by SEO, and it can using alt, but background-image can't

so, if you wanna some pics fetched by google, bing, or other, you should using img tag.

Roy
  • 731
  • 3
  • 10
  • 24