title: Twitter Bootstrap and Images
body: <p>I'm somewhat new to bootstrap, yet pretty proficient at site development and css...  I'm having trouble wrapping my head around how Bootstrap deals with optimized images for different viewport sizes.</p>
  
  <p>In my experience, you need to optimize images for the devices they're being viewed on and everything I see in Bootstrap leads me to believe that it doesn't do that.  It seems like it simply uses one large image and uses css to scale it down (or even up).  This seems counter intuitive when we want mobile devices to have a rich experience, and yet optimized for speed with smaller files.</p>
  
  <p>For example, if I want an image to appear nicely on a Desktop with a layout of say 900px (~200k) wide, I'd have an image optimized for that size.  For a mobile with a layout width, I'd have an optimized version at 400px (~50k) lets say.</p>
  
  <p>In my own system, we pre-discover via user-agent and stuff the proper images in during compile, and I realize that I could simply put all that into bootstrap as well, but I expected there to be some form of mechanism for a similar feature, was I expecting too much?</p>
  
  <p>I don't see how Bootstrap is able to defer loading of images in a pages content, until after a viewport size is discovered, so that the correct file optimized for that size will be utilized?  Am I missing something here?</p>
  
  <p>---- EDIT</p>
  
  <p>I'm pretty sure you can define image paths in Bootstraps CSS based on viewport sizes, but it doens't answer the question of which it will load first?</p>
  
  <p>---- <strong>EDIT NOV 2014</strong></p>
  
  <p>FYI, this question is quite out of date...  @media queries will accomplish the distinct file requests, however you will still need either individual files at each size or some way of dynamically generating them.  Either way, loading is deferred for any non-matches, so it's somewhat optimized.  For mobile users, it's still beneficial to identify the user-agent at request time and optimize further since loading anything but mobile specific files/classes is useless and only serves to slow things down.</p>