Quick Tip – Resizing Images Based On Browser Window Size

Quick Tip – Resizing Images Based On Browser Window Size


How Is This Useful?

In fluid layouts it is easy to format the text to adjust nicely when the window is resized, but the images are not as fluid-friendly. This Quick Tip shows you how to swap between two image sizes based on the current size of the browser, div, or whatever you decide to make the deciding factor. For those looking for a real life example, Last.fm uses this technique on their artist pages.

The technique that will be used can be expanded to cause additional changes upon resize as well, beyond simply image swapping (ie captions, navigation).

With that said, let’s get rolling.

Step 1 – The HTML You Need

That’s nice and bite-sized. The main thing to note is that we attached .fluidimage to the image we want to toggle.

Step 2 – Onto the CSS

For the sake of simplicity I have excluded any graphical styles such as borders/fonts in the above CSS.

Step 3 – Triggering the Change With jQuery

When the document is ready, we establish a function (imageresize) which swaps the images depending on the width of the browser. If the browser width is less than 700px, the smaller image is used, otherwise the full sized one is displayed. This function is run when the page first loads and anytime the browser window resizes.

Boom, You’re Done

Some of you may wonder why I only have two sizes and didn’t just make the image adjust as a percent of the overall layout. This causes the image to be blurry in some browsers, so I opted to steer clear of that method.

Like I mentioned in the beginning, you could easily add to this technique by display/hiding captions or navigation depending on the browser size. It’s really up to you, but feel free to leave your results and comments below.

The picture used throughout this tutorial was done by the very talented Gordon McBryde

Posted Friday, July 10th, 2009 · Back to Top

SPONSOR

Add Comment

79 Comments 80 Mentions

  1. Nicholas Z. Cardot Author Editor

    Wow. I didn’t even know that was possible. Thanks for the tut.
    .-= Nicholas Z. Cardot´s last blog ..10 Beautiful Hand-Sketched Fonts =-.

    ·

  2. Arun Shivaram Author Editor

    Is it possible that we can reduce the dimensions of the original image (big.jpg), rather that loading a new image (small.jpg). just a doubt? :)
    .-= Arun Shivaram´s last blog ..Recover your Gmail password by SMS =-.

    ·

  3. Sam Dunn Author Editor

    @Arun Shivaram
    Yes, instead of swapping the src of the img you would want to adjust the height and the width.

    ·

  4. M.A Author Editor

    Thanks for your tut.

    Could this be used to set a background image that resizes depending on the monitor size by a percentage rather than loading different images?

    ·

  5. James Author Editor

    Why not just give the image a percentage width to make it resize smoothly?
    .-= James´s last blog ..Special scroll events for jQuery =-.

    ·

    • Sam Dunn Author Editor

      @James
      I did mention this in the closing thoughts, by doing that the image would become blurry at times and not all browsers render it as clearly.

      @M.A.
      Yes, it would be a matter of changing that attribute in the CSS for the body when the event is triggered

      ·

  6. Ash Author Editor

    This only works on horizontal, not vertical resizing. Was that the desired outcome?

    Good tutorial otherwise.

    ·

  7. Sam Dunn Author Editor

    @Ash
    Yessir, as fluid layout normally operate horizontally. This can be easily applied to a vertical layout as well.

    ·

  8. M.A Author Editor

    Thanks for the reply Sam.

    I hate to be a pest however Im still struggling. I have the background changing between ‘small’ and ‘big’ depending if the browser window is 700px or greater as you have instructed however I have very little experience with JS. What attributes will need to be changed in order for it to use the width percentage rather than two set images. You said it would be in the CSS but i dont see how? Thanks for your time.

    ·

  9. Sam Dunn Author Editor

    @M.A
    Is your intention to make a fullscreen background that sizes with the browser? I actually wrote a plugin (Supersized) for that –
    http://buildinternet.com/2009/05/supersized-20-full-screen-imagebackground-slideshow-jquery-plugin-w-transitions-and-controls/

    ·

  10. M.A Author Editor

    YES! Thanks, thats perfect. Thanks for the quick reply too, very much appreciated.

    ·

  11. MC Author Editor

    Is it not possible for javascript to detect screen resolution and using javascript variables in the html image size property to change the image dimensions?

    Wouldnt look nice using a bitmap image but if it were a vector it would look the same whether on a 800×600 or 1920×1200.

    ·

  12. Eric Author Editor

    Very useful tutorial.

    ·

  13. Peter Author Editor

    Demo not working on Mac OS X 10.5.8 with Safari 4.0.3, Firefox 3.5.3 and Opera 10.
    Clicking the photo on the demo page just opens http://www.nonsensesociety.com/2009/04/10-spectacular-photographs-by-gordon-mcbryde/
    Am I missing something ?

    ·

    • Zach Dunn Author Editor

      @Peter

      The image changes when you resize the browser window itself.

      ·

      • Sumeet Chawla Author Editor

        Hey, the images don’t resize on resizing the browser window :|

        ·

      • Sumeet Chawla Author Editor

        My bad. It works great. I was checking out the link provided in the comment above your’s rather than the actual demo link provided at the top :|

        ·

  14. Peter Author Editor

    Ah ! I misread …
    I thought clicking an image would open and resize that image relevant to the current browser window size using a Lightbox effect.
    Thanks for setting me straight !

    ·

  15. Andrew Author Editor

    First of all thank you for this awesome tutorial. I am building a horizontal website so instead of contentwidth i want to use contentheight. I don’t know any javascript at all, but i tried modifying var contentwidth = $(‘#content’).height(); . That didn’t work. So is there any way to do it? thanks.

    ·

  16. Andrew Author Editor

    To help you understand what I’m trying to achieve, here’s exactly what I want: the image to resize when the browser window height is <700. The code below still doesen't work for some strange reason.

    $(document).ready(function() {

    function imageresize() {
    var contentheight = $(‘body’).height();
    if ((contentheight) < '700'){
    $('.fluidimage').attr('src','little.jpg');
    } else {
    $('.fluidimage').attr('src','big.jpg');
    }
    }

    imageresize();

    $(window).bind("resize", function(){
    imageresize();
    });

    });

    ·

  17. Daniele Author Editor

    Hello, I need help with this page:

    http://www.agrarioalbenga.it/Dovesiamo.html

    I’ve been using the script as explained but I always get the smaller image, no matter what resolution or browser window width I’m using.

    I’ve tested and it turns out the contentwidth variable always has zero stored in it.

    So I get the big image only if I change 700 to 0, which is obviously no use at all. Can somebody check out the source of my webpage and help me? What am I doing wrong?

    ·

  18. Alex M. Author Editor

    M.A. view this script, it’s probably does what you were looking for http://www.ajaxblender.com/bgstretcher-jquery-stretch-background-plugin.html
    .-= Alex M.´s last blog ..Rounded Corners (Mootools) =-.

    ·

  19. B.S. Author Editor

    I’d like to use this to alter the background image but I don’t know much about JS or CSS. I’ve got the general hang of this example but how would I alter

    background-image:url(images/bustle_525_left.gif);

    call to include the fluidimage class reference?

    ·

  20. Matthew Westrik Author Editor

    Nice tut…

    ·

  21. Jared Author Editor

    Awesome. I had considered this for a site I work on, but reading the simplicity of this article pushed me over the edge! With such a huge number of mobile users, and netbook users, we really have to design for them from get-go. Thanks!!

    ·

  22. TheInfamousGdub Author Editor

    This is VERY much something I need. Thanks!

    ·

  23. Darius Connors Author Editor

    Awesome.

    ·

  24. ivo Author Editor

    this can be very helpfull in some cases, thx

    ·

  25. Sherwood Botsford Author Editor

    A better way to handle this:

    CSS

    .pic-right-70% {
    width: 70%;
    float: left;
    }

    HTML

    [image link]

    [Image caption]

    This lets the image resize continuously,

    ·

  26. Ej Author Editor

    I love this but can you add any kind of content and Nav and still work the same???

    ·

  27. Web Dizajn Artist Author Editor

    Tutorial is great! Hope I’ll use it sometime soon!
    Keep it writing! :)

    ·

  28. Chanel Author Editor

    Great piece of code here, love it!
    I have a question though (following up on Arun’s):
    If I want to adjust the size of the image using only width and height parameters, how would I go about that?
    It seems like a good way to save space on a server…

    ·

  29. synapsis Author Editor

    Would it be possible to use this same script to swap between entire CSS files depending on the browser width? I’ve tried other techniques that failed to be cross-browser compatible. I’m hoping this one might be. I’d like to have a widescreen version, a 1024×768 version, and a mobile version of the site — easily done through CSS switching.

    ·

  30. Chelsea FC True Blue Author Editor

    Is it possible to change blog size depending upon different screen resolutions?

    ·

  31. John Media @ server hosting Author Editor

    Wow that’s really awesome the Image will change size according to the size of your browser. So if you make it small it would shrink, If you’d make it bigger it would eat up the screen, Its great for zooming pictures when your looking at the details of the image.

    ·

  32. Mark R Author Editor

    Great code, thank you. Anyone have any idea how this could be applied to multiple images on a page?

    ·

  33. phil Author Editor

    how can i use this behavior so that it resizes on window height rather than width?

    thanks

    ·

  34. Daryl Author Editor

    Great tutorial, But how does a peson go abouts using this script on multiple images on a webpage?

    ·

  35. Mike Author Editor

    Question:
    Does this ‘serve-up’ the multiple images or only the images requested by the client downloaded? Very interested in using this, along with media queries, for presenting different resources to mobile devices.

    Great stuff mate, seems very easy to implement.

    ·

  36. widi dwi Author Editor

    Great tutorial .. thanks for sharing.

    ·

  37. camslice Author Editor

    you could also use a media query:

    so this will attach newstylesheet.css when the window width is smaller than 800px.

    media queries are mostly used to support hand held devices, but could most certainly be used for this application

    Browser support:
    http://caniuse.com/#search=css-media

    A couple of JS solutions for older browsers:
    http://plugins.jquery.com/project/MediaQueries
    http://code.google.com/p/css3-mediaqueries-js/

    ·

  38. Mel Author Editor

    Hi, i was trying to use this code to test it out and it seems to fail. I seem to only be able to change image the first time the bowser opens, if i resize the brower the image does not change from when it originally loaded. It seems to never enter the function() function. I’m at a loss but would love to get this to work. I have taken extended break from coding and am only now starting to get back into it, so i’m very rusty.

    Thanks for your help,
    MEL

    ·

  39. Srinivas Author Editor

    Hi,

    Great code. Thank you very much.

    ·

  40. Denise Author Editor

    Hi,

    Does this code work on mobile phones? Im testing the code through Adobe Device Central and have some issues (see code below). The browser is not switching the image to the smaller version no matter how small the window size or how much i change the content width in the code below? Any help would be great!

    <script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.js“>

    $(document).ready(function() {

    function imageresize() {
    var contentwidth = $(‘#content’).width();
    if ((contentwidth) < '700'){
    $('td.fluidimage').attr('src','/images/fercone_top_small.png');
    } else {
    $('td.fluidimage').attr('src','/images/fercone_top.png');
    }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
    imageresize();
    });

    });

    ·

  41. Xcellence-IT – Web Development Company India Author Editor

    great and simple…

    ·

  42. Shawn Author Editor

    This is great…sure beats loading multiple styles sheets! I have a question regarding an extra width variable. Rather than having only the “700″ as the small, what do i need to do to add in an additional width variable for the use of large screens. Say if if the browser exceeds “1200″ or something like that…

    ·

  43. web design Author Editor

    hi..!
    i use google alert find out u blog..
    Thank you for your service.

    ·

  44. kathy Author Editor

    wouldn’t it make more sense to load the small version by default and then load the larger one if the resolution demands it?

    ·

  45. Dov Author Editor

    The jquery works great with a single image on the page. How do I get it to work with multiple images? How do I specify the other images and their corresponding replacement images (larger / smaller)?

    Please help :(

    ·

  46. Louis Author Editor

    Thanks for this code:

    Made a small spinoff.

    Have this version working for a height change adjustment.

    $(document).ready(function() {

    function imageresize() {
    var pageheight = $(window).height();
    if ((pageheight) < '550'){
    $('.fluidimage').attr('src','images/header1_small.jpg');
    } else {
    $('.fluidimage').attr('src','images/header1.jpg');
    }
    }

    imageresize();//Triggers when document first loads

    $(window).bind("resize", function(){//Adjusts image when browser resized
    imageresize();
    });

    });

    ·

  47. marie Author Editor

    Is there a way to do this code without calling “document” ? i have tried to use this code but the template that I have to use for work is already calling “document” in a different section so it conflicts.

    ·

  48. Dave Author Editor

    @marie – put everything in between the document.ready function into your existing code and it will work.

    @Everybody who wants this for multiple images – It should work for multiple images if they all have the correct class.

    You could also look into jQuery’s each if you want to apply this to multiple images with different classes or simply use $(‘img’). However, since you’re changing the src attribute, you would need to add another attribute to the img tag to let your script know which image to swap with.

    This is off the cuff but something like this:

    In your img elements add a ‘rel’ attribute to hold the larger img url. You could optionally add a ‘rev’ attribute to hold the smaller img url or keep the src attribute and toggle.

    If you use the rel and rev approach:

    img src=’first image url’ rel=’second img url’

    function imageresize() {

    var contentwidth = $(‘#content’).width();
    $(‘.fluidimage’).each(function(){

    if(contentwidth > 700)
    {
    $(this).attr(‘src’, $(this).attr(‘rel’));
    }
    else
    {
    $(this).attr(‘src’, $(this).attr(‘rev’));
    }

    });
    }

    You may want to test that out but that is one approach to do what you’re asking. There are a few ways to do it but that is off the top of my head.

    Using the rel and rev aren’t really the POSH way to do it but you can go with the toggle approach if you need to be fully semantic.

    ·

  49. RG Author Editor

    // initiate timer variable
    var timer;
    /* function resizeGallery
    @params: none
    @return: none
    @descpt: resize the gallery relative of the document width.
    */
    function resizeGallery() {
    var doc = $(‘body’);
    var new_width = doc.innerWidth() > 900 ? doc.innerWidth() – 30 : 900;
    var new_height = (new_width / 2.25);
    var new_container_width = (new_width – 10) / 3;

    $(‘div#wrapper’).css(‘width’, new_width + ‘px’);
    $(‘.jcarousel-skin-tango .jcarousel-container’).css(‘height’, new_height + ‘px’);
    $(‘#gallery li, #gallery img’).css(‘width’, new_container_width + ‘px’);
    }

    $(function() {
    // add delay before firing resizeGallery function to avoid
    // duplicate event calls
    $(window).resize(function() {
    window.clearTimeout(timer);
    timer = window.setTimeout(resizeGallery, 100);
    });
    });

    why is this not resizing my images only when i resize the browser but not on load..?
    i really dont understand is anybody can help me with this?
    demo: http://ryantanglao.xtreemhost.com/rg/carousel/

    ·

  50. RG Author Editor

    nobody? :(
    sam i had fate in u u are the guru of thi topic.. im shure would take u just a look and u would know whats wrong with this..
    can u plz help me out?
    i really aprichiate it..
    rg

    ·

  51. Brenda Nicole Tan Author Editor

    Was looking around for a tutorial for fluid images for web development at gamemaki.com when I chanced upon this. Sample code (with some tweaks) worked like a charm. Many thanks for this, Sam! (:

    ·

  52. Miroslav Author Editor

    Thanks! The very cool!

    ·

  53. Postbit Author Editor

    Thanks for the fluid layout code. I am already using it in the homepage of my website (www.postbit.com) to fit columns and images according to browser width (screen size) and dynamically create more or less columns on browser window resize.
    The difference from your code is that I get the full window size (width) with this command:
    var page_width = document.body.clientWidth;

    – Rodrigo Siqueira (Postbit Webmaster)

    ·

  54. Lance Author Editor

    Hi Sam,

    Could you be more specific on swapping the code so that one can have a continuous resizing image when resizing the browser?

    Firefox default homepage now does this… and the image quality on rescale is good: about:home

    Could you possibly post an adjustment to your code?

    thanks Lance

    ·

  55. SEO optimizacija Author Editor

    Great tutorial for resizing images based on browser window size, i am trying it now

    ·

  56. buy fax numbers Author Editor

    Excellent advice! Thanks for sharing !

    ·

  57. Nancy Author Editor

    Obviously you are brilliant but especially n regards to supersized. My problem is. I do not know the first thing about where to put the plugin or how to use it and effectively rewrite the code with my image. I only have a page that has 1 background image and no other content. It is a poster that I want to display.Where do I start?

    ·

  58. Viola Author Editor

    These tips are very good.

    ·

  59. Wine dine Author Editor

    Cool -have to give it a try!

    ·

  60. Phill Author Editor

    So where is the demo? :|

    ·

  61. Abe Unglesbee Author Editor

    I simply want to mention I am just very new to blogging and truly loved you’re web page. Most likely I’m likely to bookmark your blog post . You absolutely have fabulous writings. Kudos for sharing with us your website page.

    ·

  62. kpss kitapları Author Editor

    hello!,I like your writing so a lot! percentage we keep up a correspondence extra approximately your article on AOL? I need a specialist in this space to unravel my problem. May be that is you! Taking a look forward to look you.

    ·

  63. Sebasto Author Editor

    Thanks a lot!!!! its awesome!!!

    ·

  64. jung Author Editor

    Thank you!

    ·

  65. Anonymous Author Editor

    Great submit, very informative. I ponder why the other specialists of this sector don t understand this. You should proceed your writing. I m sure, you ve a huge readers base already!

    ·

  66. Adam Author Editor

    Is there a way to append “-big” or “-small” onto the file name itself?

    ·

  67. Viktor Author Editor

    Hi.

    Is there a way to re size the image based upon the display dimension so that the picture is is adjusting by it’s height. So let’s say I have an 3000px x 3000 px image and a display 1024 x 768. Usually the image will fit by it’s width…so we would end up with a 1024px x 1024 px image and a vertical scroll bar would be shown. I am looking for a way to make the image fit by it’s height so that, in this example, we would get a 768px x 768px image and no scroll bar. Anyway I won’t be using a image with the same side length but a, let’s say a 4:1 image and the rest of the image width will be hidden. I need this for panoramic image scrolling so that it fits any display. Thank you for the reply and sorry for such a lengthy post:/

    ·

  68. Conni Author Editor

    Thanks for this! It was easy, and works great. I tried a couple other codes trying to achieve this, but this is by far the best one.

    ·

  69. SEO Consultant Author Editor

    Nice, using pure css img {width:100%; max-width: 420px} max-width the actual size, seems to do the trick in every browser except IE 6, then you add modernizr and your good to go all around.

    ·

  70. john Author Editor

    thanks man you saved my life thanks very much!!!!!!!!!!!!!!!!!

    :))))

    ·

  71. Karan Menon Author Editor

    Great help man!

    ·

  72. Jack Logan Author Editor

    Thank you very much!
    Very useful article. I learned something else.
    Best regards,
    Jack

    ·

  73. Tamás Author Editor

    Thanks, Sam! Great.

    I would like to use an image on the starting page of my website. It would be nice if it occupied the screen on all computers… AND… this would be the menu of the site.
    So, some parts of the image (of the screen) would be “hot”, so one may click on it… and I could show the appropriate new page.

    I was thinking to use image mapping… however, any other solution would be great.

    How can this be done … with your solution?

    Thanks a lot, greetings from Budapest, Hungary,

    Tamás

    ·

  74. バスローブキッズ Author Editor

    coachジャパン

    ·

  75. bathroom cabinets Author Editor

    Hi to all, the contents existing aat this webbsite are actially remarkable for people knowledge, well, keep up thhe good work fellows.

    ·

 

Build Internet by One Mighty Roar. Since 2008.