docs(aio): resize images

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>

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.

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>
 
 

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

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.
 

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>
 
 

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>
 
 

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>
 
 

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,

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>
 
 

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.

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>

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>
 
 

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

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>