I am redesigning my mobile website which uses a 1x1px Google Analytics for Mobile Websites tracking gif.

The old design displayed the image at the foot of the page, but my new design hides the gif with CSS (display:none).

Will this have any affect on the tracking of the site?


Whilst I have moved my tracking gif and solved the immediate issue I am hearing conflicting answers as to whether an image with display:none is, or is not, downloaded.

Can anyone link to any official documentation?


2 Answers 2


Yes. It will still be downloaded and function correctly as a tracking gif, even with display:none. You can test this for yourself by adding an onload attribute to the image:

<img src="image.gif" style="display:none" onload="alert('Image loaded!')" />

This will cause a JavaScript popup to display when the image is downloaded, even though you won't see the image on the page. Live demo here.

If you make the image's src attribute blank, no image is downloaded, so the onload event never fires (live demo):

<img src="" style="display:none" onload="alert('Image loaded!')" />

The reason that the image is still downloaded is that display:none simply "prevents the element from appearing in the formatting structure", in the words of the W3C spec for the display property.

Using display:none does not suppress the HTTP request for the image. This fact is depended upon by some JavaScript developers, who create img tags styled withdisplay:none to pre-cache images before they're ready to be displayed.

Also see the responses to "Does a element with display:none set in css still get downloaded by the browser?" over on Stack Overflow.

As mentioned in feela's answer, though, there's little reason to hide a 1px square tracking gif when you can move it somewhere that won't affect your layout.

  • 2
    Whether the image will be loaded depends upon the browser's implementation - while it's not so common on desktop browsers now (not always the case) there remains the possibility that mobile browser software may demonstrate regressive implementations so testing (or finding others' test results) is always in order.
    – danlefree
    Commented Oct 12, 2011 at 19:39
  • @danlefree I agree; it's more future-proof not to hide images if it's essential that they're downloaded.
    – Nick
    Commented Oct 13, 2011 at 10:09

Normally, images which are set to display: none; aren't loaded at all – so no tracking takes place. But depends on whether the CSS is loaded before the markup (e.g. in the <head>) or after the markup (which will cause a "loading-flicker"). I don't know about visibility: hidden;

Why are you hiding that tracking-image at all? Just put it somewhere, where nobody will mention it.

  • It was affecting layout in its previous position, but I have removed the CSS and moved it now, ta.
    – ajcw
    Commented Oct 11, 2011 at 15:07
  • 1
    @feeela Are you sure about this? I believe that images are always downloaded even if display:none is used, and so it would make little difference where the CSS rule is placed.
    – Nick
    Commented Oct 12, 2011 at 11:32
  • 1
    Whoops, you are right. That only counts for the mobile Opera, which parses the CSS on a Opera server. Should I delete the answer?
    – feeela
    Commented Oct 12, 2011 at 12:06
  • @feeela I think the sentence 'Just put it somewhere where nobody will mention it' is good advice. I'd leave your answer as it is (or edit it to remove any errors.)
    – Nick
    Commented Oct 12, 2011 at 12:19
  • If that is correct about mobile Opera then it's worth displaying it for that alone.
    – ajcw
    Commented Oct 12, 2011 at 13:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.