A question about image loading

Here’s what I am wondering…Let’s say that you have some html like:

<img id=“piglet” src=“a.jpg” height=“100” width=“100”>
<img id=“pigletBig” src=“a.jpg” height=“200” width=“200”>

then you have different css set for smaller and larger monitors.

In the larger monitor css you set opacity to 0 for #piglet - and do the opposite in the smaller one - set #pigletBig to 0

(This way the larger version will show up when site is viewed on a larger screen, and the smaller one when viewed on a smaller screen.)

Now, here’s the question: will a browser load that same picture 2x (a.jpg) - making the page load slower (or, is it “smart” enough to see that it’s the same picture)?

Also, if anyone has a more elegant (or obvious) way to do this that would be greatly appreciated.

Thanks

Hi commanderpants (great name),

Welcome to the forums!

You might want to look into responsive design.
Using this technique, you can use CSS3 media queries to detect the size of a user’s viewport, then load different style sheets accordingly.
Here’s a good tutorial with examples: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

To relate that to your question: you could either load just the one image and have it scale with the viewport width, or you could define a div and set it’s background-image property according to viewport width.

If this sounds like something which might work for you, then let me know and I can make a simple demo.

Edit: BTW, to answer your original question: the browser will load both images.

[font=verdana]Browsers will recognise that it is the same image and only load it once. (That is the same principle behind stylesheets – browsers temporarily cache the image or CSS so that they don’t need to keep downloading it on every new page you visit. That’s why the first page often takes longer to load then any subsequent pages).

You might find it easier to use visibility:hidden; than opacity – it’s a novel idea but I’ve never heard of it being used like that before!

But an easier way would probably be to just have one image there, then not set dimensions in the HTML but do it in the CSS, something like

img#piglet {height:100px; width:100px;} /* this line for small screens */
img#piglet {height:200px; width:200px;} /* this line for large screens */

[/font]

Oops! I mistook the image ids as being the file names :blush:
Of course the image will only get loaded once. Thanks Stevie.

Thanks so much both of you. This was REALLY helpful. I was not really clear in my original question, but I am using mediaqueries to call up the different css for different screens (#piglet is set to opacity:0 for the larger screen CSS - over 1400px wide). It is just the site I am working on uses animations that work as a unit on the page, and I fear that responsive design would make it not work properly at some sizes (I cannot figure out a way to call different jQuery scripts for different size monitors - is there a way?). Perhaps I am wrong?

Here’s the link to one of the pages I am doing:
http://pantsateria.com/linda/acrobats%28mediaQuery%29.html

I have absolutely positioned images to keep them together (and just where I want them).

The bubbles and the acrobats are separate images on this page (to keep the bubbles from spinning while the acrobats get dizzy). My fear is that using responsive design will cause the acrobats to go outside the border of their bubbles at different points in the animation.

Any thoughts?

Again, thanks for being out there.

CP

Hi,

Just a little terminology up front:
The monitor size is, as you would imagine, the size of your monitor.
The viewport size is the size of the user’s browser window.

You can get the monitor size (or in other words its resolution) in JavaScript by using screen.height and screen.width.
There isn’t too much point in doing this though, as it is quite feasible that a user is viewing your site, but doesn’t have their browser window maximized.
This is where the viewport comes in.

It is possible to get the viewport dimensions using plain JavaScript, but there are a few browser compatibility issues that it is better to let jQuery iron out for you.

Here’s a script that does just that and displays the result on the page. It also responds to the window being resized.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Get viewport dimensions</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <p>Current viewport height is: <span id="vp-height"></span> px</p>
    <p>Current viewport width is: <span id="vp-width"></span> px</p>
    
    <script>
      function getBrowserDimensions(){
        var viewportWidth = $(window).width();
        var viewportHeight = $(window).height();
        $("#vp-width").text(viewportWidth);
        $("#vp-height").text(viewportHeight);
      }
      
      $(document).ready(function() {
        getBrowserDimensions();
        
        $(window).resize(function() {
          getBrowserDimensions();
        });	
      });
    </script>
  </body>
</html>

Does this help you at all?

Definitely pretty cool, but what I am actually looking for a way for my html (?) code to detect the viewport size being used and use a different .js file for different size monitors (like a media-query does for css). My code involves a lot of movement (e.g. .animate({left:“215px”, top:“100px”, height:“50px”, width:“27px”},3700); ), and for different viewport sizes I was hoping to use different movements (at the moment I am using the workaround I mentioned when I opened this thread).

If you check this link you will see what I mean: http://pantsateria.com/linda/acrobats%28mediaQuery%29.html. Everything needs to be exact to work properly (that’s where I thought that some sort of js “media-query” might be helpful.

Thanks

Hey,

That’s effectively what I was showing you with the last example.
You need to attach an event handler to the onload and onresize events, which would check the viewport size and call a function accordingly.
Here’s a different example, where the same function is called with different arguments. You could just as easily adapt it to call different functions instead (do whatever you want, really).

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Get viewport dimensions 2</title>
    <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
  </head>
  
  <body>
    <script>
      function changeBackgroundColour(col){
        $('body').css("background", col);
      }
    
      function checkBrowserDimensions(){
        var viewportWidth = $(window).width();
        if (viewportWidth > 1000){
          changeBackgroundColour("red");
        } else if (viewportWidth < 1000 && viewportWidth > 500){
          changeBackgroundColour("yellow");
        } else {
          changeBackgroundColour("green");
        }
      }
      
      $(document).ready(function() {
        checkBrowserDimensions();
        
        $(window).resize(function() {
          checkBrowserDimensions();
        });  
      });
    </script>
  </body>
</html>

Saying that, there might be another way to do what you want.
Check out this thread where pretty much the same thing is discussed: http://www.sitepoint.com/forums/showthread.php?742717-Javascript-that-runs-based-on-CSS-Media-Queries

Now I see. Thank you so much. This will help.

One thing to note is that browsers are not designed to resize images and so depending on what is in the image it may not display correctly if you try to display it at anything other than its actual real size.

Thanks for the heads up.