www.webdeveloper.com
Results 1 to 7 of 7

Thread: Responsive design and image sizes

Hybrid View

  1. #1
    Join Date
    Jun 2012
    Posts
    12

    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
    Join Date
    Aug 2006
    Posts
    1,930
    If you're looking for image load times, the second option, loading a single image, is faster. In the first example, both your smartphone and desktop will load both images, even though under most circumstances they will each end up only displaying one of them.

    Dave

  3. #3
    Join Date
    Jun 2012
    Posts
    12
    Thanks.

    I'm amazed that in the first example both images will load, so if I have 6 media queries all with different image sizes, all six will load ! This seems crazy, I thought the idea of using a @media was to control what happens when...@@@***

  4. #4
    Join Date
    Aug 2006
    Posts
    1,930
    It's a serious issue with MQ, for sure. The alternative isn't the greatest either, imagine bringing up the site on your desktop at large size, then sizing down your browser gradually. As you hit each of your MQ boundaries, the browser would need to generate an http request to the server for the next smaller set of images. Even with this quirk, I think I would have preferred it this way over loading them all. Of course I could be missing some other impact of doing it that way.

    Dave

  5. #5
    Join Date
    Mar 2012
    Posts
    1,720
    There is a better solution, but it requires PHP code, so that the server only sends the image needed. It relies on a trick because the server generally has no idea of the screen width. Also you can avoid the problem with downloading different images as the window is dragged wider/narrower by using the device width (the actual screen width).

  6. #6
    Join Date
    May 2013
    Posts
    1
    surely both will load the full kb of each image the css just scales them down, as above a php solution would be the best.

  7. #7
    Join Date
    May 2013
    Location
    San Jose, California
    Posts
    2
    The second one. However, as mentioned above you need to write some functionality code in order to get the best result.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles