This may be a complicated question so I'll try to explain it as easy as possible. I have three sizes for images in my post (thumbnail, medium, large, 640px, small) and I would like to change the size based on browser size. I was thinking of having a way to load three images (small, medium, 640px) and use css to hide and show images based on the screen size. Is there a way to do this? I'm open to other suggestions as well.

Thanks, Gregory S.

  • Bit off topic but they already re-size when you re-size the window but you could control this using Media Queries with class for .entry-content img Commented Jan 18, 2014 at 8:14

1 Answer 1


Heh... may I ask you what is the point of this? Because one would think that it's to save bandwidth and shorten the time the page loads. So why would you always want to load all three of them? The display: none will NOT prevent the images from being loaded into the DOM. They will still be loaded - just not showing. Just load the biggest one, use CSS to fit 100% of the browser/container and the image will be scaled down by the browser automatically. That way you save the time of small and medium image load time. And that's just for one image. Let's say someone is visiting your blog page (from a mobile phone) with 20 posts showing on the page. With your method you would have to triple the amount of images you have to load from 20 to 60 (each in small, medium and large) - madness!

The other approach is to detect what windows size the user is actually using (via jQuery) and then load the specific image based on that. I'm sure you will figure it out since it's not that dificult to write such a function in jQuery. For example below is one of my fn that I wrote for image replacement for retina devices. It works the same way - first it detects if the device is high pixel density and if it is it replaces the name in the image src from "normal" to "retina" therefore changing the image that loads:

    if (window.devicePixelRatio > 1) {
        var images = jQuery('img');

        images.each(function(i) {
            var lowres = jQuery(this).attr('src');
            var highres = lowres.replace("normal", "retina");
            jQuery(this).attr('src', highres);
  • I'm not familiar with JQuery so this will be new territory for me. Where do I start? Commented Jan 18, 2014 at 20:49

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.