Este ejemplo muestra la forma de mostrar una imagen dependiendo del tamaño de la pantalla:

<!doctype html>
    <html>
      <head>
        <meta charset="uft-8"/>
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
        <link rel="stylesheet" href="style.css">
        <title>Imagen multidispositivo con efecto de borde</title>
      </head>
      <body>
        <p>Este ejemplo muestra una imagen que se muestra dependiendo del tamaño del dispositivo y ademas muestra un efecto de borde sobre la imagen</p>
        <picture>
            <source srcset="chico.jpg" alt="rafael" media="(max-width: 500px)">
            <source srcset="mediano.jpg" alt="rafael" media="(max-width: 750px)">
            <source srcset="grande.jpg" alt="Rafael Santiago Cruz" media="(max-width: 1280px)">
                <img srcset="grande.jpg" alt="Rafael">
        </picture>
      </body>
    </html>

Ver ejemplo http://localhost/rafaelmx/imagenvariable/imagenes.html