サンプル1

ウィンドウの幅を640px以下にすると、違う画像が表示されます。

HTML

<p class="logo">
  <img src="img/latele_logo.png" alt="Lateleロゴ">
</p>

CSS

img {
  vertical-align: top;
}
@media only screen and (max-width: 640px) {
  img {
    max-width: 100%;
    height: auto;
  }
}
.logo {
  width: 300px;
  height: 300px;
  margin: 20px auto;
  text-align: center;
  background: url(../img/latele_logo_symbol.png) no-repeat center;
}
.logo img {
  display: none;
}
@media only screen and (max-width: 640px) {
  .logo {
    width: auto;
    height: auto;
    background: none;
  }
  .logo img {
    display: block;
  }
}

サンプル2

ウィンドウの幅を640px以下にすると、横並びの画像が2ｘ2になって画像が変わります。

• 
• 
• 
• 

HTML

<ul>
  <li><img src="img/latele_logo_symbol.png" alt="Lateleロゴ"></li>
  <li><img src="img/latele_logo_symbol.png" alt="Lateleロゴ"></li>
  <li><img src="img/latele_logo_symbol.png" alt="Lateleロゴ"></li>
  <li><img src="img/latele_logo_symbol.png" alt="Lateleロゴ"></li>
</ul>

CSS

ul {
  margin-left: -20px;
}
ul li {
  float: left;
  width: 185px;
  height: 43px;
  margin-left: 20px;
  background: url(../img/latele_logo_185.png) no-repeat center;
}
ul li img {
  display: none;
}
@media only screen and (max-width: 640px) {
  ul {
    margin-left: 0;
  }
  ul li {
    width: 50%;
    height: auto;
    margin: 0;
    background: none;
  }
  ul li img {
    display: block;
  }
}