diff --git a/carousel.html b/carousel.html
index be75a5cc36..538a440da1 100644
--- a/carousel.html
+++ b/carousel.html
@@ -245,7 +245,7 @@ body {
   </ol>
   <div class="carousel-inner">
     <div class="item active">
-      <img src="../../assets/img/examples/slide-01.jpg" alt="">
+      <img data-src="holder.js/1500x550/auto/#777:#fff/text:First slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Example headline.</h1>
@@ -255,7 +255,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../../assets/img/examples/slide-02.jpg" alt="">
+      <img data-src="holder.js/1500x550/auto/#777:#fff/text:Second slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>Another example headline.</h1>
@@ -265,7 +265,7 @@ body {
       </div>
     </div>
     <div class="item">
-      <img src="../../assets/img/examples/slide-03.jpg" alt="">
+      <img data-src="holder.js/1500x550/auto/#777:#fff/text:Third slide" alt="">
       <div class="container">
         <div class="carousel-caption">
           <h1>One more for good measure.</h1>
@@ -315,7 +315,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-chrome.png">
+    <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
     <h2 class="featurette-heading">First featurette headling. <span class="text-muted">It'll blow your mind.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -323,7 +323,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-left" src="../../assets/img/examples/browser-icon-firefox.png">
+    <img class="featurette-image img-circle pull-left" data-src="holder.js/512x512">
     <h2 class="featurette-heading">Oh yeah, it's that good. <span class="text-muted">See for yourself.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>
@@ -331,7 +331,7 @@ body {
   <hr class="featurette-divider">
 
   <div class="featurette">
-    <img class="featurette-image pull-right" src="../../assets/img/examples/browser-icon-safari.png">
+    <img class="featurette-image img-circle pull-right" data-src="holder.js/512x512">
     <h2 class="featurette-heading">And lastly, this one. <span class="text-muted">Checkmate.</span></h2>
     <p class="lead">Donec ullamcorper nulla non metus auctor fringilla. Vestibulum id ligula porta felis euismod semper. Praesent commodo cursus magna, vel scelerisque nisl consectetur. Fusce dapibus, tellus ac cursus commodo.</p>
   </div>