1

I want to change the src of an image in response to a media query where the max-width is 515 px. Potentially if javascript has an event that does the same thing as a css media query or something like that I could implement javascript or jQuery as well (maybe AngularJS too).

The reason I want 3 (well for now 2) separate images is to reduce the file size for example on mobile devices, where I could be loading a 50 KB photo instead of a 700 KB one.

If any code or other information is needed comment and I will add it in.

Note: This answer to the question How to use a lower resolution image for mobile solves the same type of problem using the html5 picture element (instead of a css or jQuery 'media query' as wanted) which is also a great solution.

Community
  • 1
  • 1
Cheetaiean
  • 901
  • 1
  • 12
  • 26
  • 2
    possible duplicate of [How to use a lower resolution image for mobile?](http://stackoverflow.com/questions/32161026/how-to-use-a-lower-resolution-image-for-mobile) – Maximillian Laumeister Aug 24 '15 at 23:19
  • 1
    This can be done using pure HTML5 with a JS polyfill for older browsers, by the way. See my answer in linked duplicate thread. – Maximillian Laumeister Aug 24 '15 at 23:20
  • Thanks that is a great solution however don't think I want to use a polyfill. Will it work for absolutely all browsers from let's say 2006 onwards? Or I could use the jQuery method for older browsers. – Cheetaiean Aug 24 '15 at 23:27
  • Dear Cheetaiean, please note that the HTML5 picture element degrades gracefully in browsers that don't support it. In the [Picturefill Readme](https://github.com/scottjehl/picturefill) (Picturefill is the name of the polyfill) it states that there are no known unsupported browsers, so you should not run into any compatibility issues with old browsers. I still believe that using the `picture` element is a more semantic solution for what you're trying to accomplish. Nevertheless this question is a duplicate, and answers should be posted in the existing thread instead. – Maximillian Laumeister Aug 24 '15 at 23:32
  • When you say degrade, do you mean that it still works (i.e. changes according to viewport size) on older browsers *with Picturefill* or by itself? To clarify, would work on Safari (which officially doesn't support ) – Cheetaiean Aug 24 '15 at 23:37
  • On browsers that don't support ``, without Picturefill loaded, the `` element will load the `` tag, and will not change according to viewport size, but at least it will display something. On browsers that don't support `` but with Picturefill loaded, the polyfill should cause them to support the `` element and start changing according to viewport size. I'm not trying to say that using Picturefill is absolutely the best solution, just that it doesn't suffer from the downsides you seem to perceive with it. – Maximillian Laumeister Aug 24 '15 at 23:43
  • Ok then I will give it a try since html5 is the way to go, the simplest and best, where possible. – Cheetaiean Aug 25 '15 at 00:24

2 Answers2

2

One method would be You can check the window width and set the image src using JavaScript

$(document).ready(function() {
     if($(window).width() > 515) {
         $("#img").attr("src", "large.png");
     } else {
         $("#img").attr("src", "small.png");
     }
});

For mobile you need to check the width during orientation change as well.

If you don't want the img tag, you can have background images. Background images can be handled within CSS media queries.

kiranvj
  • 32,342
  • 7
  • 71
  • 76
2

I may suggest the following:

<img src="" data-mobile="mobile-version-url" data-desktop="desktop-version-url" />

And then via javascript / jQuery check window's width and set the image's src attr.

This is an example of the jQuery code..

$(document).ready(function() {
    var device = $(window).innerWidth() > 515 ? "desktop" : "mobile";
    $("img").each(function() {
        $(this).attr("src", $(this).data(device));
    });
});
Joaquín O
  • 1,431
  • 1
  • 9
  • 16