0

I have a web page which uses several <img> elements which are not visible by default.

  • Images are used in a carousel

  • Some images are set hidden using display: none via mobile.css and CSS media queries

How do browsers, especially mobile browsers, queue image loading? Is it possible to exert fine-tuned control over images, so that

  • Images are not loaded until they become visible

  • Image loading is aborted by mobile.css or accomppaning Javascript if mobile media queries kick in

  • What is the difference between CSS background images and <img> element images behavior-wise (if any)

What strategies do mobile browsers (WebKit) use in this kind of situation?

As an example site I can use open sourced site http://fi.pycon.org/2012/ It has a logo element created with HTML and CSS

https://github.com/python-finland/fi.pycon.org/blob/master/2012/index.html#L85

And this element is visible by default (desktop)

https://github.com/python-finland/fi.pycon.org/blob/master/media/2012/css/theme.css#L99

But eventually hidden for mobile browsers via mobile.css and media queries:

https://github.com/python-finland/fi.pycon.org/blob/master/media/2012/css/moobile.css#L20

  • Are mobile browsers optimized so that the logo image file is not loaded?

  • Would the case be different if <img> element were used for the logo?

  • Does it matter if overriding CSS rules are in a different CSS file (and media query)

Note: It is out of the scope of this question how media queries should be handled and I am not interested in answers which tell to build the basic CSS and media queries in a different manner. I am well aware of these solutions.

Tuure Laurinolli
  • 4,016
  • 1
  • 22
  • 21
Mikko Ohtamaa
  • 82,057
  • 50
  • 264
  • 435

1 Answers1

2

At the moment there are no viable standardized options for preventing images in <img> tags from loading with straight-up HTML+CSS. This is one of the reasons the W3C Responsive Images working group was formed:

...no proposed CSS-based solution accounts for one of the fundimental [sic] issues that we’re looking to avoid: downloading multiple assets at larger screen widths, as requests can be made before the swapping logic is applied.

This is not to say that a JavaScript-based interim solution cannot work, only that pure HTML+CSS -based solution will not work. So, to answer your questions:

1. Are mobile browsers optimized so that the logo image file is not loaded?

No. hidden elements will load their background images.

2. Would the case be different if element were used for the logo?

No. Images will very likely begin loading pre-emptively before CSS is applied.

3. Does it matter if overriding CSS rules are in a different CSS file (and media query)

No. This will likely cause even more delay for the swapping logic mentioned in answer #2 to apply, thus increasing the possibility that images have already started loading.

Community
  • 1
  • 1
Lauri Piispanen
  • 2,067
  • 12
  • 20