title: Html: load convenient image size at page loading time?
body: <p>I have an image in a gridView (table) which has a various number of columns according to the screen resolution. Html code like this:</p>
  
  <p>
  </p>
  
  <p>As you can see, I have 6 columns on 'ld' resolutions ; 4 column on 'md' resolution ; etc...</p>
  
  <p>At the end, the actual/displayed resolution of my image image_resolution_XXX.jpg is not really known in advance. It depends on the screen resolution of the device (and consequently of the number of columns of my grid). </p>
  
  <p>My images are stored on my server in different folders according to their resolution : folder '128x128', '256x256', etc...</p>
  
  <p>What I want is to avoid to load big resolution images in my gridView (ex: image_resolution_512.jpg) if only a smaller resolution is required (ex: image_resolution_256.jpg). Also, I want to avoid to load a small resolution image if a higher resolution is required.</p>
  
  <p>How can I load the correct resolution at loading time ? </p>
  
  <p>Perhaps a simplified way would be to define an image resolution of XXX pixels for xs devices and of YYY pixels for md devices, etc... Is it possible ?</p>
  
  <p>Thanks for your help !</p>