jonatec Posted May 24, 2013 Share Posted May 24, 2013 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.... Link to comment Share on other sites More sharing options...
newseed Posted May 24, 2013 Share Posted May 24, 2013 Use media query. For cell phone users, large images will take longer to download and in addition many smartphone owners don't have unlimited data bandwidth. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now