Comment redimensionner automatiquement une image pour un site mobile?

J'ai essayé une recherche Google sur ce point et ne peut toujours pas comprendre comment redimensionner une image par sa largeur pour les différents périphériques mobiles. Voici ma tentative:

CSS:

img.test {
    width: 100%;
    height: auto;
}

HTML:

<html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;   user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <img class="test"  src="../includes/foo.jpg">

Mais l'image est toujours en cours de chargement avec son original de mise à l'échelle. Je suis un css et html newb de sorte que toute aide serait super!

Edit:

Merci pour les réponses. Voici une version révisée qui fonctionne maintenant.

HTML:

   <html>
    <head>
        <meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
        <meta content="width=device-width; initial-scale=1.0; maximum-scale=1.0;  user-scalable=0;" name="viewport">
        <link rel="stylesheet" href="../includes/style.css">
    </head>
    <body width = "device-width">
        <img class="test"  src="../includes/buoy_map.jpg">
    </body>

source d'informationauteur Richard