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 size to go with for the modern design standards when it comes to websites. I am a little hesitant to save it as a 1920 X 1080 simply because it is on the higher end and then use CSS to move it around as a background.

I am also not sure that using the more common 960px as the width will really serve my needs when the viewport size of a browser goes beyond that with all the new resolutions out there.

Furthermore, I am a little concerned with the size of the image and loss of quality as we get into higher resolutions considering that if I start small, I am left with little growing room and then having to deal with a diluted image as the size of the viewport goes up.

Any recommendations or links that talk about this? I am trying to build a site using responsive design and I have seem some JavaScript utilities that let you resize images but I am more concerned with the size of the image to start with and moving from there.

Thanks for any help or suggestions here.

Answer

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

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: http://nmsdvid.com/snippets/