diff --git a/aio/content/guide/aot-compiler.md b/aio/content/guide/aot-compiler.md
index bf073e582ae48..683576db675ae 100644
--- a/aio/content/guide/aot-compiler.md
+++ b/aio/content/guide/aot-compiler.md
@@ -606,6 +606,6 @@ Here's the map for _Tour of Heroes_.
 
 <a href="generated/images/guide/aot-compiler/toh-pt6-bundle.png" title="View larger image">
   <figure>
-    <img src="generated/images/guide/aot-compiler/toh-pt6-bundle.png" alt="toh-pt6-bundle" width="700">
+    <img src="generated/images/guide/aot-compiler/toh-pt6-bundle-700w.png" alt="toh-pt6-bundle">
   </figure>
 </a>
diff --git a/aio/content/guide/architecture.md b/aio/content/guide/architecture.md
index 676badebf5970..c9fa04e345dab 100644
--- a/aio/content/guide/architecture.md
+++ b/aio/content/guide/architecture.md
@@ -23,7 +23,7 @@ Of course, there is more to it than this.
 You'll learn the details in the pages that follow. For now, focus on the big picture.
 
 <figure>
-  <img src="generated/images/guide/architecture/overview2.png" alt="overview" width="700" height="356">
+  <img src="generated/images/guide/architecture/overview2.png" alt="overview">
 </figure>
 
 <!--
@@ -50,7 +50,8 @@ The code referenced on this page is available as a <live-example></live-example>
 
 ## Modules
 
-<img src="generated/images/guide/architecture/module.png" alt="Component" class="left" width="240" height="183">
+<img src="generated/images/guide/architecture/module.png" alt="Component" class="left">
+
 
 Angular apps are modular and Angular has its own modularity system called _Angular modules_ or _NgModules_.
 
@@ -134,7 +135,7 @@ These are two different and _complementary_ module systems. Use them both to wri
 
 ### Angular libraries
 
-<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left" width="240" height="181">
+<img src="generated/images/guide/architecture/library-module.png" alt="Component" class="left">
 
 Angular ships as a collection of JavaScript modules. You can think of them as library modules.
 
@@ -171,7 +172,7 @@ Learn more from the [Angular modules](guide/ngmodule) page.
 
 ## Components
 
-<img src="generated/images/guide/architecture/hero-component.png" alt="Component" class="left" width="200" height="115">
+<img src="generated/images/guide/architecture/hero-component.png" alt="Component" class="left">
 
 A _component_ controls a patch of screen called a *view*.
 
@@ -199,7 +200,7 @@ Your app can take action at each moment in this lifecycle through optional [life
 
 ## Templates
 
-<img src="generated/images/guide/architecture/template.png" alt="Template" class="left" width="200">
+<img src="generated/images/guide/architecture/template.png" alt="Template" class="left">
 
 You define a component's view with its companion **template**. A template is a form of HTML
 that tells Angular how to render the component.
@@ -218,7 +219,7 @@ The `HeroDetailComponent` (code not shown) presents facts about a particular her
 hero that the user selects from the list presented by the `HeroListComponent`.
 The `HeroDetailComponent` is a **child** of the `HeroListComponent`.
 
-<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" class="left" width="300" height="260">
+<img src="generated/images/guide/architecture/component-tree.png" alt="Metadata" class="left">
 
 Notice how `<hero-detail>` rests comfortably among native HTML elements. Custom components mix seamlessly with native HTML in the same layouts.
 
@@ -266,7 +267,7 @@ This is one way to tell Angular that the component's constructor requires a `Her
 so it can get the list of heroes to display.
 
 
-<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" class="left" width="114" height="200">
+<img src="generated/images/guide/architecture/template-metadata-component.png" alt="Metadata" class="left">
 
 The metadata in the `@Component` tells Angular where to get the major building blocks you specify for the component.
 
@@ -287,7 +288,7 @@ Without a framework, you would be responsible for pushing data values into the H
 into actions and value updates. Writing such push/pull logic by hand is tedious, error-prone, and a nightmare to
 read as any experienced jQuery programmer can attest.
 
-<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left" width="220" height="204">
+<img src="generated/images/guide/architecture/databinding.png" alt="Data Binding" class="left">
 
 Angular supports **data binding**,
 a mechanism for coordinating parts of a template with parts of a component.
@@ -329,7 +330,7 @@ from the root of the application component tree through all child components.
 Data binding plays an important role in communication between a template and its component.
 
 <figure>
-  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding" width="358" height="171">
+  <img src="generated/images/guide/architecture/parent-child-binding.png" alt="Parent/Child binding">
 </figure>
 
 Data binding is also important for communication between parent and child components.
@@ -338,7 +339,7 @@ Data binding is also important for communication between parent and child compon
 
 ## Directives
 
-<img src="generated/images/guide/architecture/directive.png" alt="Parent child" class="left" width="150" height="147">
+<img src="generated/images/guide/architecture/directive.png" alt="Parent child" class="left">
 
 Angular templates are *dynamic*. When Angular renders them, it transforms the DOM
 according to the instructions given by **directives**.
@@ -441,7 +442,7 @@ application logic into services and make those services available to components
 
 ## Dependency injection
 
-<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" class="left" width="200" height="89">
+<img src="generated/images/guide/architecture/dependency-injection.png" alt="Service" class="left">
 
 _Dependency injection_ is a way to supply a new instance of a class
 with the fully-formed dependencies it requires. Most dependencies are services.
diff --git a/aio/content/guide/dependency-injection-in-action.md b/aio/content/guide/dependency-injection-in-action.md
index 8bcdf3a55cc40..43431242d6d1d 100644
--- a/aio/content/guide/dependency-injection-in-action.md
+++ b/aio/content/guide/dependency-injection-in-action.md
@@ -576,7 +576,7 @@ The `HeroOfTheMonthComponent` example demonstrates many of the alternatives and
 It's visually simple: a few properties and the logs produced by a logger.
 
 <figure>
-  <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month" width="300px">
+  <img src="generated/images/guide/dependency-injection-in-action/hero-of-month.png" alt="Hero of the month">
 </figure>
 
 
@@ -746,7 +746,7 @@ Behind the scenes, Angular actually sets the `logger` parameter to the full serv
 The following image, which displays the logging date, confirms the point:
 
 <figure>
-  <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry" width="300px">
+  <img src="generated/images/guide/dependency-injection-in-action/date-logger-entry.png" alt="DateLoggerService entry">
 </figure>
 
 
diff --git a/aio/content/guide/http.md b/aio/content/guide/http.md
index 34b95516fbe69..c1a32e9687b56 100644
--- a/aio/content/guide/http.md
+++ b/aio/content/guide/http.md
@@ -93,7 +93,7 @@ The app uses the Angular <code>Http</code> client to communicate via **XMLHttpRe
 It works like this:
 
 <figure>
-  <img src='generated/images/guide/http/http-toh.gif' alt="ToH mini app" width="250" height="222">
+  <img src='generated/images/guide/http/http-toh.gif' alt="ToH mini app">
 </figure>
 
 This demo has a single component, the `HeroListComponent`.  Here's its template:
@@ -496,7 +496,7 @@ Here is a simple search that shows suggestions from Wikipedia as the user
 types in a text box:
 
 <figure>
-  <img src='generated/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)" width="250" height="267">
+  <img src='generated/images/guide/http/wiki-1.gif' alt="Wikipedia search app (v.1)">
 </figure>
 
 Wikipedia offers a modern `CORS` API and a legacy `JSONP` search API. This example uses the latter.
@@ -590,7 +590,7 @@ It should only make requests when the user *stops typing*.
 Here's how it will work after refactoring:
 
 <figure>
-  <img src='generated/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)" width="250" height="267">
+  <img src='generated/images/guide/http/wiki-2.gif' alt="Wikipedia search app (v.2)">
 </figure>
 
 ### 2. Search when the search term changes
diff --git a/aio/content/guide/lifecycle-hooks.md b/aio/content/guide/lifecycle-hooks.md
index aa2a756d7d1cd..b5276414ccf22 100644
--- a/aio/content/guide/lifecycle-hooks.md
+++ b/aio/content/guide/lifecycle-hooks.md
@@ -6,7 +6,7 @@ Angular calls lifecycle hook methods on directives and components as it creates,
 
 @description
 
-<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" class="left" width="200" height="283">
+<img src="generated/images/guide/lifecycle-hooks/hooks-in-sequence.png" alt="Us" class="left">
 
 A component has a lifecycle managed by Angular.
 
diff --git a/aio/content/guide/reactive-forms.md b/aio/content/guide/reactive-forms.md
index 16f134047c9f0..e996c2636e573 100644
--- a/aio/content/guide/reactive-forms.md
+++ b/aio/content/guide/reactive-forms.md
@@ -356,7 +356,7 @@ Now that everything is wired up, the browser should display something like this:
 
 
 <figure>
-  <img src="generated/images/guide/reactive-forms/just-formcontrol.png" width="400" height="133" alt="Single FormControl">
+  <img src="generated/images/guide/reactive-forms/just-formcontrol.png" alt="Single FormControl">
 </figure>
 
 
@@ -460,7 +460,7 @@ Piping it through the `JsonPipe` renders the model as JSON in the browser:
 
 
 <figure>
-  <img src="generated/images/guide/reactive-forms/json-output.png" width="400" height="176" alt="JSON output">
+  <img src="generated/images/guide/reactive-forms/json-output.png" alt="JSON output">
 </figure>
 
 
@@ -570,7 +570,7 @@ The browser displays the following:
 
 
 <figure>
-  <img src="generated/images/guide/reactive-forms/validators-json-output.png" width="400" height="223" alt="Single FormControl">
+  <img src="generated/images/guide/reactive-forms/validators-json-output.png" alt="Single FormControl">
 </figure>
 
 
@@ -699,7 +699,7 @@ with the nested address `FormGroup`:
 
 
 <figure>
-  <img src="generated/images/guide/reactive-forms/address-group.png" width="400" height="55" alt="JSON output">
+  <img src="generated/images/guide/reactive-forms/address-group.png" alt="JSON output">
 </figure>
 
 
@@ -1268,7 +1268,7 @@ Back in the browser, select the hero named "Magneta".
 
 
 <figure>
-  <img src="generated/images/guide/reactive-forms/addresses-array.png" width="400" height="40" alt="JSON output of addresses array">
+  <img src="generated/images/guide/reactive-forms/addresses-array.png" alt="JSON output of addresses array">
 </figure>
 
 
diff --git a/aio/content/guide/router.md b/aio/content/guide/router.md
index 194b093bb1561..7e7b3e89d9c8b 100644
--- a/aio/content/guide/router.md
+++ b/aio/content/guide/router.md
@@ -534,7 +534,7 @@ and the *Heroes* view with its list of heroes.
 
 
 <figure>
-  <img src='generated/images/guide/router/hero-list.png' alt="Hero List" width="250">
+  <img src='generated/images/guide/router/hero-list.png' alt="Hero List">
 </figure>
 
 
@@ -542,7 +542,7 @@ and the *Heroes* view with its list of heroes.
 Select one hero and the app takes you to a hero editing screen.
 
 <figure>
-  <img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail" width="250">
+  <img src='generated/images/guide/router/hero-detail.png' alt="Crisis Center Detail">
 </figure>
 
 
@@ -559,7 +559,7 @@ Now click the *Crisis Center* link for a list of ongoing crises.
 
 
 <figure>
-  <img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List" width="250">
+  <img src='generated/images/guide/router/crisis-center-list.png' alt="Crisis Center List">
 </figure>
 
 
@@ -572,7 +572,7 @@ Notice that the corresponding name in the crisis list does _not_ change.
 
 
 <figure>
-  <img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail" width="250">
+  <img src='generated/images/guide/router/crisis-center-detail.png' alt="Crisis Center Detail">
 </figure>
 
 
@@ -588,7 +588,7 @@ Up pops a dialog box.
 
 
 <figure>
-  <img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog" width="250">
+  <img src='generated/images/guide/router/confirm-dialog.png' alt="Confirm Dialog">
 </figure>
 
 
@@ -610,7 +610,7 @@ Proceed to the first application milestone.
 Begin with a simple version of the app that navigates between two empty views.
 
 <figure>
-  <img src='generated/images/guide/router/router-1-anim.gif' alt="App in action" width="250">
+  <img src='generated/images/guide/router/router-1-anim.gif' alt="App in action">
 </figure>
 
 
@@ -766,7 +766,7 @@ and a *router outlet* where the router swaps views on and off the page. Here's w
 
 
 <figure>
-  <img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell" width="300">
+  <img src='generated/images/guide/router/shell-and-outlet.png' alt="Shell">
 </figure>
 
 
@@ -2692,7 +2692,7 @@ and two buttons, "Send" and "Cancel".
 
 
 <figure>
-  <img src='generated/images/guide/router/contact-popup.png' alt="Contact popup" width="250">
+  <img src='generated/images/guide/router/contact-popup.png' alt="Contact popup">
 </figure>
 
 
diff --git a/aio/content/guide/security.md b/aio/content/guide/security.md
index 7a724bcaabc90..2cdc446bec0e4 100644
--- a/aio/content/guide/security.md
+++ b/aio/content/guide/security.md
@@ -144,7 +144,7 @@ tag but keeps safe content such as the text content of the `<script>` tag and th
 
 
 <figure>
-  <img src='generated/images/guide/security/binding-inner-html.png' width="700" height="285" alt='A screenshot showing interpolated and bound HTML values'>
+  <img src='generated/images/guide/security/binding-inner-html.png' alt='A screenshot showing interpolated and bound HTML values'>
 </figure>
 
 
@@ -233,7 +233,7 @@ this, mark the URL value as a trusted URL using the `bypassSecurityTrustUrl` cal
 
 
 <figure>
-  <img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL' width="700" height="223">
+  <img src='generated/images/guide/security/bypass-security-component.png' alt='A screenshot showing an alert box created from a trusted URL'>
 </figure>
 
 
diff --git a/aio/content/guide/set-document-title.md b/aio/content/guide/set-document-title.md
index 87010c22551a4..f810f6577f81f 100644
--- a/aio/content/guide/set-document-title.md
+++ b/aio/content/guide/set-document-title.md
@@ -17,8 +17,8 @@ See the <live-example name="set-document-title"></live-example>.
 
 <div class="l-sub-section clearfix">
 
-<img src='generated/images/plunker/plunker-switch-to-editor-button.png' width="200" height="70" alt="pop out the window" class="right">
-<img src='generated/images/plunker/plunker-separate-window-button.png' width="200" height="47" alt="pop out the window" class="right">
+<img src='generated/images/plunker/plunker-switch-to-editor-button.png'alt="pop out the window" class="right">
+<img src='generated/images/plunker/plunker-separate-window-button.png' alt="pop out the window" class="right">
 
 To see the browser title bar change in the live example,
 open it again in the Plunker editor by clicking the icon in the upper right,
diff --git a/aio/content/guide/structural-directives.md b/aio/content/guide/structural-directives.md
index 295776aa855f7..0fcf1bd5179d3 100644
--- a/aio/content/guide/structural-directives.md
+++ b/aio/content/guide/structural-directives.md
@@ -501,7 +501,7 @@ Angular erases the middle "Hip!", leaving the cheer a bit less enthusiastic.
 
 
 <figure>
-  <img src='generated/images/guide/structural-directives/template-rendering.png' width="350" height="59" alt="template tag rendering">
+  <img src='generated/images/guide/structural-directives/template-rendering.png' alt="template tag rendering">
 </figure>
 
 
diff --git a/aio/content/guide/styleguide.md b/aio/content/guide/styleguide.md
index 84d0d2865392f..591e1a16373d8 100644
--- a/aio/content/guide/styleguide.md
+++ b/aio/content/guide/styleguide.md
@@ -4985,7 +4985,7 @@ Useful tools and tips for Angular.
 **Consider** using [snippets](https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2) for [Visual Studio Code](https://code.visualstudio.com/) that follow these styles and guidelines.
 
 <a href="https://marketplace.visualstudio.com/items?itemName=johnpapa.Angular2">
-  <img src="https://github.com/johnpapa/vscode-angular2-snippets/raw/master/images/use-extension.gif" width="700" height="429" alt="Use Extension">
+  <img src="generated/images/guide/styleguide/use-extension.gif" alt="Use Extension">
 </a>
 
 **Consider** using [snippets](https://atom.io/packages/angular-2-typescript-snippets) for [Atom](https://atom.io/) that follow these styles and guidelines.
diff --git a/aio/content/guide/template-syntax.md b/aio/content/guide/template-syntax.md
index 6433b52d3f1a2..21dc1d5b02694 100644
--- a/aio/content/guide/template-syntax.md
+++ b/aio/content/guide/template-syntax.md
@@ -763,7 +763,7 @@ content harmlessly.
 
 
 <figure>
-  <img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe" width="500" height="40">
+  <img src='generated/images/guide/template-syntax/evil-title.png' alt="evil title made safe">
 </figure>
 
 <a href="#top-of-page">back to top</a>
diff --git a/aio/content/guide/testing.md b/aio/content/guide/testing.md
index 5e0c7c4d47a45..345b165aeda4f 100644
--- a/aio/content/guide/testing.md
+++ b/aio/content/guide/testing.md
@@ -393,7 +393,7 @@ The Angular CLI has different commands to do the same thing. Adjust accordingly.
 After a few moments, karma opens a browser and starts writing to the console.
 
 <figure>
-  <img src='generated/images/guide/testing/karma-browser.png' width="400" height="142" alt="Karma browser">
+  <img src='generated/images/guide/testing/karma-browser.png' alt="Karma browser">
 </figure>
 
 
@@ -477,7 +477,7 @@ Debug specs in the browser in the same way that you debug an application.
 
 
 <figure>
-  <img src='generated/images/guide/testing/karma-1st-spec-debug.png' width="700" height="150" alt="Karma debugging">
+  <img src='generated/images/guide/testing/karma-1st-spec-debug.png' alt="Karma debugging">
 </figure>
 
 
@@ -2511,7 +2511,7 @@ A better solution is to create an artificial test component that demonstrates al
 
 
 <figure>
-  <img src='generated/images/guide/testing/highlight-directive-spec.png' width="200" height="159" alt="HighlightDirective spec in action">
+  <img src='generated/images/guide/testing/highlight-directive-spec.png' alt="HighlightDirective spec in action">
 </figure>
 
 
diff --git a/aio/content/guide/upgrade.md b/aio/content/guide/upgrade.md
index 137bf58866f58..7ed18be2ecd84 100644
--- a/aio/content/guide/upgrade.md
+++ b/aio/content/guide/upgrade.md
@@ -340,7 +340,7 @@ everything work seamlessly:
 
 
 <figure>
-  <img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application" width="700" height="262">
+  <img src="generated/images/guide/upgrade/injectors.png" alt="The two injectors in a hybrid application">
 </figure>
 
 
@@ -385,7 +385,7 @@ ways:
 
 
 <figure>
-  <img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application" width="500" height="294">
+  <img src="generated/images/guide/upgrade/dom.png" alt="DOM element ownership in a hybrid application">
 </figure>
 
 
@@ -439,7 +439,7 @@ AngularJS and Angular approaches. Here's what happens:
 
 
 <figure>
-  <img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application" width="600" height="163">
+  <img src="generated/images/guide/upgrade/change_detection.png" alt="Change detection in a hybrid application">
 </figure>
 
 
@@ -572,7 +572,7 @@ existing AngularJS code works as before _and_ you're ready to run Angular code.
 
 ### Using Angular Components from AngularJS Code
 
-<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" class="left" width="250" height="44">
+<img src="generated/images/guide/upgrade/ajs-to-a.png" alt="Using an Angular component from AngularJS code" class="left">
 
 
 
@@ -734,7 +734,7 @@ For  example, we can easily make multiple copies of the component using `ng-repe
 
 ### Using AngularJS Component Directives from Angular Code
 
-<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" class="left" width="250" height="44">
+<img src="generated/images/guide/upgrade/a-to-ajs.png" alt="Using an AngularJS component from Angular code" class="left">
 
 
 So, we can write an Angular component and then use it from AngularJS
@@ -934,7 +934,7 @@ and then provide the input and output using Angular template syntax:
 
 ### Projecting AngularJS Content into Angular Components
 
-<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" class="left" width="250" height="48">
+<img src="generated/images/guide/upgrade/ajs-to-a-with-projection.png" alt="Projecting AngularJS content into Angular" class="left">
 
 
 When we are using a downgraded Angular component from an AngularJS
@@ -978,7 +978,7 @@ remains in "AngularJS land" and is managed by the AngularJS framework.
 
 ### Transcluding Angular Content into AngularJS Component Directives
 
-<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" class="left" width="250" height="48">
+<img src="generated/images/guide/upgrade/a-to-ajs-with-transclusion.png" alt="Projecting Angular content into AngularJS" class="left">
 
 Just like we can project AngularJS content into Angular components,
 we can *transclude* Angular content into AngularJS components, whenever
diff --git a/aio/content/images/guide/aot-compiler/toh-pt6-bundle-700w.png b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-700w.png
new file mode 100644
index 0000000000000..1d9d01fc112d1
Binary files /dev/null and b/aio/content/images/guide/aot-compiler/toh-pt6-bundle-700w.png differ
diff --git a/aio/content/images/guide/architecture/component-tree.png b/aio/content/images/guide/architecture/component-tree.png
index 4633b3d13a141..3f7b9c59a944d 100644
Binary files a/aio/content/images/guide/architecture/component-tree.png and b/aio/content/images/guide/architecture/component-tree.png differ
diff --git a/aio/content/images/guide/architecture/databinding.png b/aio/content/images/guide/architecture/databinding.png
index f90dcb751fff7..a2bf3c8fd972b 100644
Binary files a/aio/content/images/guide/architecture/databinding.png and b/aio/content/images/guide/architecture/databinding.png differ
diff --git a/aio/content/images/guide/architecture/dependency-injection.png b/aio/content/images/guide/architecture/dependency-injection.png
index 2bc3ed7cbc1ab..34df3bada96ee 100644
Binary files a/aio/content/images/guide/architecture/dependency-injection.png and b/aio/content/images/guide/architecture/dependency-injection.png differ
diff --git a/aio/content/images/guide/architecture/directive.png b/aio/content/images/guide/architecture/directive.png
index 651eca6b30088..1bccc3878385a 100644
Binary files a/aio/content/images/guide/architecture/directive.png and b/aio/content/images/guide/architecture/directive.png differ
diff --git a/aio/content/images/guide/architecture/hero-component.png b/aio/content/images/guide/architecture/hero-component.png
index 291b5ace4d962..26323f4269a3e 100644
Binary files a/aio/content/images/guide/architecture/hero-component.png and b/aio/content/images/guide/architecture/hero-component.png differ
diff --git a/aio/content/images/guide/architecture/library-module.png b/aio/content/images/guide/architecture/library-module.png
index 52658b97c5b2c..791970c43a32c 100644
Binary files a/aio/content/images/guide/architecture/library-module.png and b/aio/content/images/guide/architecture/library-module.png differ
diff --git a/aio/content/images/guide/architecture/module.png b/aio/content/images/guide/architecture/module.png
index 058123eb863a6..d29608acd1a5c 100644
Binary files a/aio/content/images/guide/architecture/module.png and b/aio/content/images/guide/architecture/module.png differ
diff --git a/aio/content/images/guide/architecture/overview2.png b/aio/content/images/guide/architecture/overview2.png
index 71c363326a890..fba6a3f5c079b 100644
Binary files a/aio/content/images/guide/architecture/overview2.png and b/aio/content/images/guide/architecture/overview2.png differ
diff --git a/aio/content/images/guide/architecture/parent-child-binding.png b/aio/content/images/guide/architecture/parent-child-binding.png
index 8214b9c12014e..aa11a14fc1b29 100644
Binary files a/aio/content/images/guide/architecture/parent-child-binding.png and b/aio/content/images/guide/architecture/parent-child-binding.png differ
diff --git a/aio/content/images/guide/architecture/template-metadata-component.png b/aio/content/images/guide/architecture/template-metadata-component.png
index b95f388640c9c..96ffcc073f06f 100644
Binary files a/aio/content/images/guide/architecture/template-metadata-component.png and b/aio/content/images/guide/architecture/template-metadata-component.png differ
diff --git a/aio/content/images/guide/architecture/template.png b/aio/content/images/guide/architecture/template.png
index 9f06eea82bdc2..5aa872ec31410 100644
Binary files a/aio/content/images/guide/architecture/template.png and b/aio/content/images/guide/architecture/template.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png b/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png
index f9b2f4cd862ef..204b7260ce4ec 100644
Binary files a/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png and b/aio/content/images/guide/dependency-injection-in-action/date-logger-entry.png differ
diff --git a/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png b/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png
index a95dce79ccc55..532f5c3ab2e94 100644
Binary files a/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png and b/aio/content/images/guide/dependency-injection-in-action/hero-of-month.png differ
diff --git a/aio/content/images/guide/http/http-toh.gif b/aio/content/images/guide/http/http-toh.gif
index e3a42724f111f..f07c364aaf228 100644
Binary files a/aio/content/images/guide/http/http-toh.gif and b/aio/content/images/guide/http/http-toh.gif differ
diff --git a/aio/content/images/guide/http/wiki-1.gif b/aio/content/images/guide/http/wiki-1.gif
index 0d1689a4e508a..4c32ad1d647e6 100644
Binary files a/aio/content/images/guide/http/wiki-1.gif and b/aio/content/images/guide/http/wiki-1.gif differ
diff --git a/aio/content/images/guide/http/wiki-2.gif b/aio/content/images/guide/http/wiki-2.gif
index bf566b63857d4..72b32d5aa2513 100644
Binary files a/aio/content/images/guide/http/wiki-2.gif and b/aio/content/images/guide/http/wiki-2.gif differ
diff --git a/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png b/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png
index efbdd7b315ba1..07c9c22a837d6 100644
Binary files a/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png and b/aio/content/images/guide/lifecycle-hooks/hooks-in-sequence.png differ
diff --git a/aio/content/images/guide/reactive-forms/address-group.png b/aio/content/images/guide/reactive-forms/address-group.png
index 214f269de5839..1073b8a5b6f7d 100644
Binary files a/aio/content/images/guide/reactive-forms/address-group.png and b/aio/content/images/guide/reactive-forms/address-group.png differ
diff --git a/aio/content/images/guide/reactive-forms/addresses-array.png b/aio/content/images/guide/reactive-forms/addresses-array.png
index e65b5ec043d22..2c27efc0d6346 100644
Binary files a/aio/content/images/guide/reactive-forms/addresses-array.png and b/aio/content/images/guide/reactive-forms/addresses-array.png differ
diff --git a/aio/content/images/guide/reactive-forms/json-output.png b/aio/content/images/guide/reactive-forms/json-output.png
index ef3a16c67c07b..081d2184b2f63 100644
Binary files a/aio/content/images/guide/reactive-forms/json-output.png and b/aio/content/images/guide/reactive-forms/json-output.png differ
diff --git a/aio/content/images/guide/reactive-forms/just-formcontrol.png b/aio/content/images/guide/reactive-forms/just-formcontrol.png
index e51a0f6c8039d..9a1c9aae367a4 100644
Binary files a/aio/content/images/guide/reactive-forms/just-formcontrol.png and b/aio/content/images/guide/reactive-forms/just-formcontrol.png differ
diff --git a/aio/content/images/guide/reactive-forms/validators-json-output.png b/aio/content/images/guide/reactive-forms/validators-json-output.png
index b101b4373191a..e13b6e5d37f4a 100644
Binary files a/aio/content/images/guide/reactive-forms/validators-json-output.png and b/aio/content/images/guide/reactive-forms/validators-json-output.png differ
diff --git a/aio/content/images/guide/router/confirm-dialog.png b/aio/content/images/guide/router/confirm-dialog.png
index 03310a7492f24..3e8a61f9cfc90 100644
Binary files a/aio/content/images/guide/router/confirm-dialog.png and b/aio/content/images/guide/router/confirm-dialog.png differ
diff --git a/aio/content/images/guide/router/contact-popup.png b/aio/content/images/guide/router/contact-popup.png
index cb050f32d374c..d388ede45cde0 100644
Binary files a/aio/content/images/guide/router/contact-popup.png and b/aio/content/images/guide/router/contact-popup.png differ
diff --git a/aio/content/images/guide/router/crisis-center-detail.png b/aio/content/images/guide/router/crisis-center-detail.png
index 605b781dd44ca..f2a8de3e69a2e 100644
Binary files a/aio/content/images/guide/router/crisis-center-detail.png and b/aio/content/images/guide/router/crisis-center-detail.png differ
diff --git a/aio/content/images/guide/router/crisis-center-list.png b/aio/content/images/guide/router/crisis-center-list.png
index 5500d4e28c372..7edfd5be84279 100644
Binary files a/aio/content/images/guide/router/crisis-center-list.png and b/aio/content/images/guide/router/crisis-center-list.png differ
diff --git a/aio/content/images/guide/router/hero-detail.png b/aio/content/images/guide/router/hero-detail.png
index 6e9cfda662d74..3f8a6795c47eb 100644
Binary files a/aio/content/images/guide/router/hero-detail.png and b/aio/content/images/guide/router/hero-detail.png differ
diff --git a/aio/content/images/guide/router/hero-list.png b/aio/content/images/guide/router/hero-list.png
index cee925e40f296..fa456acb6cf73 100644
Binary files a/aio/content/images/guide/router/hero-list.png and b/aio/content/images/guide/router/hero-list.png differ
diff --git a/aio/content/images/guide/router/router-1-anim.gif b/aio/content/images/guide/router/router-1-anim.gif
index 8402849d5669d..07a012d25b2b9 100644
Binary files a/aio/content/images/guide/router/router-1-anim.gif and b/aio/content/images/guide/router/router-1-anim.gif differ
diff --git a/aio/content/images/guide/router/shell-and-outlet.png b/aio/content/images/guide/router/shell-and-outlet.png
index 2eca7af3530ed..e7b5270e42079 100644
Binary files a/aio/content/images/guide/router/shell-and-outlet.png and b/aio/content/images/guide/router/shell-and-outlet.png differ
diff --git a/aio/content/images/guide/security/binding-inner-html.png b/aio/content/images/guide/security/binding-inner-html.png
index 87292e8eb9f03..06c3d234e0985 100644
Binary files a/aio/content/images/guide/security/binding-inner-html.png and b/aio/content/images/guide/security/binding-inner-html.png differ
diff --git a/aio/content/images/guide/security/bypass-security-component.png b/aio/content/images/guide/security/bypass-security-component.png
index dcfcc7a5298f5..59312423a4174 100644
Binary files a/aio/content/images/guide/security/bypass-security-component.png and b/aio/content/images/guide/security/bypass-security-component.png differ
diff --git a/aio/content/images/guide/styleguide/use-extension.gif b/aio/content/images/guide/styleguide/use-extension.gif
new file mode 100644
index 0000000000000..0d9de0e01fe25
Binary files /dev/null and b/aio/content/images/guide/styleguide/use-extension.gif differ
diff --git a/aio/content/images/guide/template-syntax/evil-title.png b/aio/content/images/guide/template-syntax/evil-title.png
index 65249e835995c..f765305d5d746 100644
Binary files a/aio/content/images/guide/template-syntax/evil-title.png and b/aio/content/images/guide/template-syntax/evil-title.png differ
diff --git a/aio/content/images/guide/testing/highlight-directive-spec.png b/aio/content/images/guide/testing/highlight-directive-spec.png
index 6eb88b2bd5922..ca12d5139d4c1 100644
Binary files a/aio/content/images/guide/testing/highlight-directive-spec.png and b/aio/content/images/guide/testing/highlight-directive-spec.png differ
diff --git a/aio/content/images/guide/testing/karma-1st-spec-debug.png b/aio/content/images/guide/testing/karma-1st-spec-debug.png
index 8a5a139a0c9b3..efe971849db46 100644
Binary files a/aio/content/images/guide/testing/karma-1st-spec-debug.png and b/aio/content/images/guide/testing/karma-1st-spec-debug.png differ
diff --git a/aio/content/images/guide/testing/karma-browser.png b/aio/content/images/guide/testing/karma-browser.png
index 341b348fa12a4..f7d03d22d9448 100644
Binary files a/aio/content/images/guide/testing/karma-browser.png and b/aio/content/images/guide/testing/karma-browser.png differ
diff --git a/aio/content/images/guide/toh/mini-hero-detail.png b/aio/content/images/guide/toh/mini-hero-detail.png
index 62294aaad44e3..57634227c7837 100644
Binary files a/aio/content/images/guide/toh/mini-hero-detail.png and b/aio/content/images/guide/toh/mini-hero-detail.png differ
diff --git a/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png b/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png
index cbff5ad4fbb93..49aad639fffb1 100644
Binary files a/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png and b/aio/content/images/guide/upgrade/a-to-ajs-with-transclusion.png differ
diff --git a/aio/content/images/guide/upgrade/a-to-ajs.png b/aio/content/images/guide/upgrade/a-to-ajs.png
index 6ee416d0bb47d..9dac658c2717d 100644
Binary files a/aio/content/images/guide/upgrade/a-to-ajs.png and b/aio/content/images/guide/upgrade/a-to-ajs.png differ
diff --git a/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png b/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png
index 42ad5f9a5a0c3..484f31aabeafb 100644
Binary files a/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png and b/aio/content/images/guide/upgrade/ajs-to-a-with-projection.png differ
diff --git a/aio/content/images/guide/upgrade/ajs-to-a.png b/aio/content/images/guide/upgrade/ajs-to-a.png
index 98764437fe6bd..05a7e8330f820 100644
Binary files a/aio/content/images/guide/upgrade/ajs-to-a.png and b/aio/content/images/guide/upgrade/ajs-to-a.png differ
diff --git a/aio/content/images/guide/upgrade/change_detection.png b/aio/content/images/guide/upgrade/change_detection.png
index 269118d81ab77..73b17e4436319 100644
Binary files a/aio/content/images/guide/upgrade/change_detection.png and b/aio/content/images/guide/upgrade/change_detection.png differ
diff --git a/aio/content/images/guide/upgrade/dom.png b/aio/content/images/guide/upgrade/dom.png
index 21d2e8a8cad8e..749eb98f954d1 100644
Binary files a/aio/content/images/guide/upgrade/dom.png and b/aio/content/images/guide/upgrade/dom.png differ
diff --git a/aio/content/images/guide/upgrade/injectors.png b/aio/content/images/guide/upgrade/injectors.png
index 60f491ebef28a..59a35a4c278c7 100644
Binary files a/aio/content/images/guide/upgrade/injectors.png and b/aio/content/images/guide/upgrade/injectors.png differ
diff --git a/aio/content/images/plunker/plunker-separate-window-button.png b/aio/content/images/plunker/plunker-separate-window-button.png
index 8ed3bdb3e650a..b1517a80c9ee0 100644
Binary files a/aio/content/images/plunker/plunker-separate-window-button.png and b/aio/content/images/plunker/plunker-separate-window-button.png differ
diff --git a/aio/content/images/plunker/plunker-switch-to-editor-button.png b/aio/content/images/plunker/plunker-switch-to-editor-button.png
index 004a16c930eb9..46263a4ab637f 100644
Binary files a/aio/content/images/plunker/plunker-switch-to-editor-button.png and b/aio/content/images/plunker/plunker-switch-to-editor-button.png differ
diff --git a/aio/content/tutorial/toh-pt5.md b/aio/content/tutorial/toh-pt5.md
index 70e4c2da5e2db..bc9720442a924 100644
--- a/aio/content/tutorial/toh-pt5.md
+++ b/aio/content/tutorial/toh-pt5.md
@@ -967,7 +967,7 @@ After clicking a hero, users should see something like this below the hero list:
 
 
 <figure>
-  <img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail" height="70">
+  <img src='generated/images/guide/toh/mini-hero-detail.png' alt="Mini Hero Detail">
 </figure>