SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Feb 2011
    The land of nod
    0 Post(s)
    0 Thread(s)

    Inline vs Background images - Clarification needed

    Hey all,

    If there are no obvious benefits for having an inline image, say you dont need it for use as an anchor link, then should you always put images as a background:url(filepath/image.type) repeat/x/y/no position; image in your CSS.

    Is there a rendering time difference if one calculated an image to load inline incomparison to being loaded from an external stylesheet ?

    Look forward to hearing views

  2. #2
    Life is not a malfunction gold trophysilver trophybronze trophy
    TechnoBear's Avatar
    Join Date
    Jun 2011
    Argyll, Scotland
    268 Post(s)
    5 Thread(s)
    If the image is purely decorative and adds nothing by way of information, then it belongs as a background image in the CSS. If the image conveys some kind of relevant information, then it should be included as part of the HTML mark-up, together with appropriate alt text for those unable to see it. That's the distinction as I understand it.

  3. #3
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    51 Post(s)
    2 Thread(s)
    TechnoBear is right on the money. Content images should be in the HTML. Decorations in the CSS as backgrounds.

    As far as loading:
    when a browser is loading the stylesheets, it will "block" the loading of the rest of the page until all the resources (like images) in that stylesheet are loaded (the exceptions would be things like images called on events like :hover).

    Images in the HTML are called sequentially as the browser reads the markup. So the first image it hits, it sends a request right then to the server, but continues loading the page. When it hits the next image, it sends another request to the server.

    If there are many images and the first one hasn't finished loading, the browser might continue rendering the HTML but will not request new images until it has a free connection. The number of connections by default that a browser will have varies between 2 and 8 or so. You can change this setting in your browser I believe, but I would assume your visitors have the default settings. Also, according to the specs, the server is actually the one who should be determining how many parallel requests a client can make. So a server may restrict everyone to 2 requests anyway.

    As soon as an image has finished loading, that connection can be used to make a new request out of the resource queue the browser built up (on a page with way more slow-loading images than number of connections allowed).

    I'm not sure if it also works this way while a CSS stylesheet is being loaded. I know the whole stylesheet isn't considered loaded until all its resources are, and I would assume the connection limit matters here as well.

    Favicons are thuper thpecial in that most browsers will automatically make a request for one in the root directory under the name "favicon.ico" unless you've deliberately specified another filename or file path. This means if you don't even have a favicon, the browsers will send a request and get a 404. Unfortunately, the last time I checked in Safari, Safari did this for every page request, instead of caching the result of 404, which sounded kinda retarded.

    Someone correct me where I'm wrong.

Tags for this Thread


Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts