SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Feb 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Responsive design and image sizes

    Q. What technique is the most efficient in terms of image load times and performance...?

    Scenario 1.

    Is it to load a different size image by using a media query, as below:

    /* Smartphone */
    @media screen and (max-width: 320px) {
    .img-page-1-img {
    background: url('../images/img-page-1-img-117.jpg') no-repeat;
    width: 117px;
    height: 77px;
    }
    }
    /* Desktop */
    @media only screen and (min-width: 769px) {
    .img-page-1-img {
    background: url('../images/img-page-1-img-234.jpg') no-repeat;
    width: 234px;
    height: 154px;
    }
    }

    OR...

    Scenario 2.

    Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?

    img {
    max-width: 100%;
    }


    Thanks....

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Resizing a large image to be viewed on smaller devices would be the slowest method for the smaller device. It would have to load the higher file size image rather than a small dedicated image with a more compact file size. Resizing an image in the browser does not change its file size.

    However if the image sizes are close in size then there may be little benefit and of course makes the maintenance easier.

  3. #3
    Barefoot on the Moon! silver trophy Force Flow's Avatar
    Join Date
    Jul 2003
    Location
    Northeastern USA
    Posts
    4,606
    Mentioned
    56 Post(s)
    Tagged
    1 Thread(s)
    This might be worth looking into:

    http://adaptive-images.com/

    I used it on one of the site I was working on recently, but most of the images used on that side are fairly small to begin with, so I haven't really had a chance to put it through rigorous testing. But--it does seem to work as advertised.
    Visit The Blog | Follow On Twitter
    301tool 1.1.5 - URL redirector & shortener (PHP/MySQL)
    Can be hosted on and utilize your own domain

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,167
    Mentioned
    453 Post(s)
    Tagged
    8 Thread(s)
    I read recently, to my surprise, that it's not so cut and dried that a device won't donwload a background image not targeted at it. A bit disappointing, really.

    But all the same, having to prepare multiple images is a bit of a pain. That's why I'm rather enamored of this approach—which is focused on the retina issue, but which offers a viable solution for the mobile image issue, too, I feel: basically make the image quite large and then save it at a low resolution to keep the file size down. I guess this may create issues as far as background images go, though that is helped with the new CSS3 background-size properties, which are supported in the more recent browser versions.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,344
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    I read recently, to my surprise, that it's not so cut and dried that a device won't donwload a background image not targeted at it. A bit disappointing, really.
    Yes, I've seen that before and its an interesting read. It has always been the case that most browsers will download images that are in the html source (whether hidden with css or not) so there was no real surprise there. The surprise is that background images in media queries will not over-ride previous background images unless the previous background images are themselves in an exclusive media query. Over-riding an image via a media-query will result in both images being loaded apparently.

    This would seem to suggest that although media queries follow the cascade they are done so at a later point when the assets have already been loaded.

    Normally when you over-ride backgrounds in a single stylesheet only the last background image is loaded. Indeed we know from experience that background images in a normal stylesheet are not loaded until they are called for on the page. Otherwise we wouldn't need the sprite approach to stop the flicker when swapping an image in a rollover and indeed the stylesheet would load every single image in the site and not just those on the current page and would take forever. I didn't see any mention of this in the results so I don't know how it all ties in together.

    The method in the OPs first post where images are exclusive to each media query should result in only one image being loaded at a time.

    It would be helpful if browsers makers would simply come out and tell us what really happens.

    There is also a similar issue with all the actual stylesheets.

  6. #6
    SitePoint Member
    Join Date
    Jun 2012
    Posts
    11
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    if you're using wordpress you can use conditional tags to load an image depending on mobile user agent.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •