JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!



Responsive design and image sizes


K

keyboard_arrow_up
0
keyboard_arrow_down


First Post Mark as Spam kenjones
Posts: 3 - Registered: 2013-05-22 09:41:15

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....




R

keyboard_arrow_up
0
keyboard_arrow_down


Reply #1 Mark as Spam rousellwall
Posts: 2 - Registered: 2013-08-31 03:03:13

For these solution you need to generate a vector format image. That would be better way to have better image resolution in responsive design.






JOIN DEVPPL

It looks like you are new here. If you want to get involved, click on Join below!




MENU
Advertising