bit confused with images and resolutions

Hi Scott,

To answer your question, I suppose it depends on how you want to implement these images.

If you want to use an image as content on the page (an img tag) the most often used way to handle this is to set a max width property on all of the images on your page so they will fluidly scale down as the page scales down.

img {
     max-width: 100%;
}

Coming in the near feature, we'll be able to load in different size images conditionally. you can find the documentation for the proposed <picture> element here

Here's an example of how you could use this element:

<picture width="500" height="500">
   <source media="(min-width: 45em)" src="large.jpg">
   <source media="(min-width: 18em)" src="med.jpg">
   <source src="small.jpg">
   <img src="small.jpg" alt="">
   <p>Accessible text</p>
</picture>

Now, if you're looking to use an image via CSS (such as background-image), I would suggest using media queries to change the background-image property at different sizes. you can even use this technique to deliver gorgeous large images for retina displays. Here's an example:

.classWithBGImage {
    background-image: url('images/backgroundImage.jpg');
}


/*
Here we are using a pixel density media query. We can do all sorts of things in here that we want to happen on retina displays. Here we will redefine which image we want to use for the background-image for our class */
@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) {

    .classWithBGImage {
        background-image: url('images/backgroundImage@2x.jpg');
}

}

The "@2x" in the name of the background image denotes that this is a larger version of the non-@2x image.

This technique is great for background patterns and logos that you want to keep super sharp on all screens, but it is usually best advised to use content images <img> as much as possible.

Of course, you can also use media queries to target the width of the browser as well:

@media only screen and (max-width : 320px) {
    background-image: url('images/phoneSizedImage.jpg');
}

Now, using pixel based media queries in a whole other conversation (it's really best to to em based media queries), but a pixel based approach is really easy to jump into when you want to target phones tablets and other sizes.

Hope this helps in some way!

-John