: Common ground for image sizes when using Photoshop save to web Recently, I was working on an image in Photoshop and wanted to save it for web usage. I wanted to know whether there is a good

@Ravi4787994

you should save image for different resolution and use them by css media query

and include image according to scree size

/* Smartphones (portrait and landscape) ----------- */ @media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}

/* Smartphones (landscape) ----------- */ @media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */ @media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */ @media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */ @media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */ @media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */ @media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Vote Up Vote Down

@Alves566

This is what I personally do:

Save two versions of the images in two different sizes.


One for 1x resolution devices (most of them)
One for 2x resolutions devices (like iPad retina). The dimensions of this image are 200% the dimensions of the previous one.


Then, instead of using the src attribute of the <img> tag, I use CSS to


Apply the image as a background
Set the width and high of the image to the dimensions of the 1x resolution one.
Set background-dimension to contain. This makes sure the image is stretched to cover the whole img tag. Will make sense when you read the next comments.


I set the src attribute of the img to a transparent gif.

Finally, using media queries, I target the high res devices and change the version of the image to the 2x version. Since the background-dimension is still set to contains, the 2x image is shrunk to the dimensions of the img tag. The dimension stays correct but the device has the extra pixels available that it needs to show the image without blurriness.

Example: Suppose you want to show the image of a dog at 120px x 50px but want the image to appear sharp on iPad4 (which has 2x resolution). I save the image with those exact dimensions (dog-r1.jpg) and then to 200% of those dimensions: 240px x 100px (dog-r1.jpg).

This is my HTML

<img id="imgDog" src="transparent.gif" alt="" />


And this is my CSS
#imgDog {
width:120px;
height:50px;
background-image:url(dog-r1.jpg);
background-size:contain;
}

//iPad 4 media query @media screen and (device-width: 768px) and (device-height: 1024px) and (-webkit-device-pixel-ratio: 2) {
background-image:url(dog-r2.jpg);
}


When the page is viewed with an iPad 4, the background image will be replaced with dog-r2.jpg, but will still be displayed at 120x50px. Since the iPad 4 had double the resolution, the image will display at its sharpest best.

This is a very simplistic example, since one does not want to target only one device (iPad 4) but all devices that have more than resolution 1x as a bulk. If you are interested in media queries, there is plenty of resources and discussions online about the topic.

This is a great resource for media queries quick lookups: nmsdvid.com/snippets/

Vote Up Vote Down