diff --git a/docs/avatars.stories.js b/docs/avatars.stories.js
index c1a213d..35f79cf 100644
--- a/docs/avatars.stories.js
+++ b/docs/avatars.stories.js
@@ -16,5 +16,7 @@ stories.add('avatars', () => {
   const isRounded = boolean('is-rounded', false) ? 'is-rounded' : '';
   const selectedClasses = [isRounded, options].join(' ');
 
-  return `<img src="http://www.gravatar.com/avatar" class="nes-avatar ${selectedClasses}">`;
+  return `<img src="http://www.gravatar.com/avatar?s=15" class="nes-avatar ${selectedClasses}"
+    alt="Gravatar Image Example"
+    style="image-rendering: pixelated;">`;
 });
diff --git a/index.html b/index.html
index 8674192..ed9169b 100644
--- a/index.html
+++ b/index.html
@@ -163,27 +163,27 @@
     <section class="nes-container with-title">
       <h2 class="title">Avatars</h2>
       <div id="avatars">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-small">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-large">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-small is-rounded">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-rounded">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-medium is-rounded">
-        <img src="https://www.gravatar.com/avatar" class="nes-avatar is-large is-rounded">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-small is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-medium is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
+        <img src="https://www.gravatar.com/avatar?s=15" class="nes-avatar is-large is-rounded" alt="Gravatar Image Example" style="image-rendering: pixelated;">
       </div>
       <button type="button" class="nes-btn is-error show-code" id="show-avatars-code">&lt;&gt;</button>
       <span class="nes-balloon from-right copied" id="copied-avatars">Copied!</span>
     </section>
     <section class="nes-container code" id="code-avatars">
-      <pre class="sample-code"><code class="html">&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-rounded&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-small is-rounded&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-medium is-rounded&quot;&gt;
-&lt;img src=&quot;https://www.gravatar.com/avatar&quot; class=&quot;nes-avatar is-large is-rounded&quot;&gt;</code></pre>
+      <pre class="sample-code"><code class="html">&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-small&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-medium&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-large&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-small is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-medium is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;
+&lt;img src=&quot;https://www.gravatar.com/avatar?s=15&quot; class=&quot;nes-avatar is-large is-rounded&quot; alt=&quot;Gravatar Image Example&quot; style=&quot;image-rendering: pixelated;&quot;&gt;</code></pre>
       <button type="button" class="nes-btn show-code copy" onClick="copyToClipboard('avatars')">Copy</button>
     </section>