6

For each post on a website, there will be a header image. This image will have a width of 100vw and a height of 300px. I would like to deliver multiple versions of this image via either the srcset attribute of an img tag or a full-fledged picture element (not sure which at this point, hence this question).

Doing so would be rather easy using the srcset attribute:

<img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg">

The problem arises when I want to account for different device pixel ratios. First, assume I have 2x and 3x versions of all of the images listed in the srcset above.

Let's say I have a 2x phone with a 320px-wide viewport (e.g. an iPhone 5). I'd want the browser to load xs_2x.jpg. Likewise, let's say I have a 1x desktop with a widescreen monitor. I'd want the browser to load lg.jpg.

But now let's say I have a larger phone, one with a 3x, 414px-wide viewport (i.e. an iPhone 6 Plus). In this case, I'd want my browser to load sm_3x.jpg. But, my browser would likely load sm_2x.jpg instead because the width of sm_2x.jpg (1536 pixels) is closer to the width of the phone (1242 pixels) than the width of sm_3x.jpg (2304 pixels). This would result in an image that is not 300px tall on the device, breaking a requirement of the website.

How can I implement dynamic-width, static-height, DPR-conscious responsive images?

Marcus McLean
  • 1,306
  • 2
  • 13
  • 24
  • Have you looked into using a media tag? – JaeGeeTee Feb 03 '15 at 20:49
  • @JaeGeeTee What do you mean a media tag? A CSS `@media` query? – Marcus McLean Feb 03 '15 at 20:53
  • Yes a @media query. Sorry I get sloppier as the day goes on. – JaeGeeTee Feb 03 '15 at 20:57
  • @JaeGeeTee While that may be an option for some, it's not an option for me. The image URLs are dynamic and there are a lot of them. There's no time (or bandwidth) to write media queries for all of these images. – Marcus McLean Feb 03 '15 at 21:03
  • Use `data-` tags always for custom thigns. Why not put JSON in the tag? ? `` – Daniel W. Feb 03 '15 at 21:08
  • @Marcus McLean, in the last but one paragraph you say "414px-wide viewport (i.e. an iPhone 6 Plus)" and "is closer to the width of the phone (1242 pixels)". Where have you seen this 414 and 1242? iPhone 6 Plus' width is 1920px, check it here https://www.apple.com/iphone-6/display/ – Ivan Gerasimenko Feb 10 '15 at 09:21

3 Answers3

0
background-size: 100% cover;

This should work.

EDIT: The simple reason why this will work is because you can do it in CSS alone. background-size will cover the available space see article: http://davidwalsh.name/background-size

create a css class: .img-resp { background-size: 100% cover; } then apply it to your element.

  • 3
    Code blocks on their own are not usually useful answers. Please edit your answer and explain what the code you're showing does, and why/how that code answers the question. – Lea Cohen Feb 05 '15 at 18:10
0

You should take into account that JPEG image resolution (DPI) is meaningless for screens. The main thing here is total horizontal/vertical count of pixels.

So 1x, 2x and 3x versions of an image would be (according to device width!): Device - image size table

So 1x monitor and 3x iPhone would require the same image (1920 x 300px) and it's code in srcset would be img_name_1920px.jpg 1920w

<img srcset="img_name_1920px.jpg 1920w, img_name_1136px.jpg 1136w, img_name_768px.jpg 768w, img_name_320px.jpg 320w" sizes="100vw" src="img_name.jpg">

Note: if you're on a device with a screen width of 320px and is a 1x (non-retina) display, you should use image with the width of 320px.

Only the total count of pixels is important here.

Ivan Gerasimenko
  • 2,381
  • 3
  • 30
  • 46
-1

I did not get exact requirement of you.

I want to give you my code to try for your requirement. Try this code:

   <!DOCTYPE html>
    <html lang="en-US">
    <head>
      <meta charset="UTF-8">
      <title>Responsive Images</title>
      <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css">
      <link rel="stylesheet" 
    href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap-theme.min.css">
      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js">
      </script>
      <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js">
      </script>
    </head>
    <body>

      <div class= "container-fluid">
        <div class="row">

<img src="http://www.technotrigger.com/wp-content/uploads/2014/01/house-in-green-field.jpg" 
   class="img-responsive">
          <!-- <img srcset="lg.jpg 1200w, md.jpg 992w, sm.jpg 768w, xs.jpg 320w" sizes="100vw" src="xs.jpg"> -->
        </div>
      </div>
        </body>
        </html>
Akilsree1
  • 462
  • 1
  • 4
  • 26