diff --git a/e2e/_screenshot.js b/e2e/_screenshot.js
index dc646dbfc38..335ad58a5d5 100644
--- a/e2e/_screenshot.js
+++ b/e2e/_screenshot.js
@@ -14,13 +14,32 @@ const LFS_BASE_URL = 'https://media.githubusercontent.com/media/angular/material
  * be added to git.
  */
 class Screenshot {
+  /**
+   * The filename used to store the screenshot
+   * @returns {string}
+   */
+  get filename() {
+    return this.id
+            .toLowerCase()
+            .replace(/[ :\/]/g, '_')
+            .replace(/[^/a-z0-9_]+/g, '')
+        + '.screenshot.png';
+  }
+
+  /**
+   * The full path to the screenshot
+   * @returns {string}
+   */
+  get path() {
+    return path.resolve(__dirname, '..', 'screenshots', this.filename);
+  }
+  
   /**
    * @param {string} id A unique identifier used for the screenshot
    */
   constructor(id) {
     this.id   = id;
-    this.path = path.resolve(__dirname, '..', 'screenshots', id + '.screenshot.png');
-    this.url  = `${LFS_BASE_URL}/${SHA}/screenshots/${encodeURIComponent(id)}.screenshot.png`;
+    this.url  = `${LFS_BASE_URL}/${SHA}/screenshots/${this.filename}`;
     browser.takeScreenshot().then(png => this.storeScreenshot(png));
   }
 
@@ -63,9 +82,7 @@ class Screenshot {
         console.info('[STATUS] Screenshot has not changed');
       }
     } catch (e) {
-      console.error(`[ERROR] `, e);
-      this.overwriteExistingScreenshot();
-      throw e;
+      console.info('[STATUS] Unable to manually load screenshot, skipping comparison');
     }
   }
 
diff --git a/screenshots/demo page: index.screenshot.png b/screenshots/demo_page__index.screenshot.png
similarity index 100%
rename from screenshots/demo page: index.screenshot.png
rename to screenshots/demo_page__index.screenshot.png