0

I have an image with relative width. Currently the src points to a single file, very large (let's say 1000px). My problem is that on small devices with Opera and IE the image, when scaled by the browser, looks terrible (you can see the pixels forming the image).

But if I provide a small image only, on HD displays it will look blurry.

Therefore I'd like to provide different image resolutions for each screen.

For what I've seen, there are few options currently suggested (question on SO), but none of the existing ones really suits my needs:

  1. use background property (and then @media for different screen resolutions):

    display: block;
-moz-box-sizing: border-box;
box-sizing: border-box;
background: url(http://domain2.com/newbanner.png) no-repeat;
width: 180px; /* Width of new image */
height: 236px; /* Height of new image */
padding-left: 180px; /* Equal to width of new image */

    I don't like this solution since like relative width wouldn't work properly.

  2. use content: url(). This solution only work with webkit browsers

  3. set multiple images and then use display:none. Bad for SEO

None of the above truly gives a cross-browser solutions that does what I'd like, any other idea?

Community
  • 1
  • 1
don
  • 4,113
  • 13
  • 45
  • 70

2 Answers2

0

I think that all the solutions that you have listed are bad. There's a big difference between a background image and a content image and if you set multiple images and then just use a display:none all your images are even so loaded. In my opinion, the only way of doing it with a large compatibility is a JavaScript solution. You'll have to change the src attribute dynamicly according to the current browser's dimensions. You can use window.matchMedia or directly (which is the most compatible) window.screen. There's strill a new attribute in HTML5 which is srcset but as you can see it's still not well supported.

user3292788
  • 407
  • 1
  • 6
  • 15
0

it seems you are using bootstrap add class .img-responsive to your img and bootstrap will handle it

otherwise add this to your img style

display:block;
max-width:100%;
height:auto
alizelzele
  • 892
  • 2
  • 19
  • 34