#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2009
    Posts
    16
    Rep Power
    0

    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
  3. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2013
    Posts
    1
    Rep Power
    0
    Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?

    img {
    max-width: 100%;
    }
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Feb 2009
    Posts
    16
    Rep Power
    0
    Originally Posted by shivendra11
    Load one single large image and use CSS to "stretch" and resize by setting the max-width property..?

    img {
    max-width: 100%;
    }
    But what if the user opens the site with a smartphone, why suffer the overhead of loading a large image rather than a smaller image as optimised in the CSS ????

IMN logo majestic logo threadwatch logo seochat tools logo