CODEWITHSUNDEEP
htmlcssimageresponsive-designmedia-queries
A. Kolbo
A. Kolbo

Reputation: 81

A better responsive image with 1x1 px PNG?

I love the way img tags work in responsive design. It resizes proportionally and expands the div that contains it. The problem is that the image is the same pixel count in every size, which is terrible for mobile devices.

I thought of a way to use a 1x1 pixel PNG image with a width and height attribute in the markup to define the proportion. This way, your div will resize proportionally, based on the PNG, and you can swap out the backgrounds with media queries. And you can use it multiple times throughout your page, with only one http request.

Are there any issues with this way of attacking responsive images?

.container {
    -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
  background-repeat: no-repeat;
  border: 1px solid blue;
  background-image: url(large.png)
}

@media screen and (max-width: 968px) {
  .container {
    background-image: url(small.png)
  }
}

img {
  width: 100%;
  height: auto;
}
<div class="container">
  <img src="1x1.png" width="5" height="1">
</div>

Upvotes: 1

Views: 1028

Answers (2)

Michael Benjamin
Michael Benjamin

Reputation: 371649

If your goal is to minimize HTTP requests, HTML5 provides the <picture> element:

4.8.2 The picture element

The picture element is a container which provides multiple sources to its contained img element to allow authors to declaratively control or give hints to the user agent about which image resource to use, based on the screen pixel density, viewport size, image format, and other factors.

With this element you can allow the browser to select the appropriate image based on a media query:

<picture>
    <source srcset="large.png" media="(min-width: 1000px)">
    <source srcset="standard.png" media="(min-width: 600px) and (max-width: 999px)">
    <source srcset="small.png" media="(max-width: 599px)">
    <img src="standard.png" alt="accessibility text here"><!-- graceful degradation -->
</picture>

Just note that this element does not yet enjoy universal browser support: http://caniuse.com/#search=picture

Here's a polyfill if necessary: https://scottjehl.github.io/picturefill/

References:

Upvotes: 1

EmmanuelBeziat
EmmanuelBeziat

Reputation: 734

Yes, there's a problem with accessibility. Images in html are mean to be… Well, meaningfull. So you're putting unmeaningfull images in html and meaningfull images in CSS, where they have absolutely no intereset for a screen reader (for example).

Moreover, I guess you're planning to load big images to handle retina displays, on devices that do not need them, and just "resize down"?

You have better ways to handle mobile devices pixel-size, like srcset: https://developer.mozilla.org/en/docs/Web/HTML/Element/Img#Example_3_Using_the_srcset_attribute

Or the picture element: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture

http://caniuse.com/#feat=srcset http://caniuse.com/#feat=picture

Upvotes: 1

Related Questions