fix external image flaws in Web/API

files/en-us/web/api/effecttiming/easing/index.html

@@ -2,19 +2,19 @@
 title: EffectTiming.easing
 slug: Web/API/EffectTiming/easing
 tags:
-- API
-- Animation
-- EffectTiming
-- Experimental
-- KeyframeEffect
-- Property
-- Reference
-- Timing Function
-- Web Animations
-- animate
-- easing
-- waapi
-- web animations api
+  - API
+  - Animation
+  - EffectTiming
+  - Experimental
+  - KeyframeEffect
+  - Property
+  - Reference
+  - Timing Function
+  - Web Animations
+  - animate
+  - easing
+  - waapi
+  - web animations api
 ---
 <div>{{ SeeCompatTable() }}{{ APIRef("Web Animations") }}</div>
 
@@ -26,23 +26,23 @@
 
 <div class="note">
   <p>{{domxref("Element.animate()")}},
-    {{domxref("KeyframeEffectReadOnly.KeyframeEffectReadOnly",
+    {{domxref("KeyframeEffect/KeyframeEffect",
     "KeyframeEffectReadOnly()")}}, and {{domxref("KeyframeEffect.KeyframeEffect",
     "KeyframeEffect()")}} all accept an object of timing properties including
     <code>easing</code>. The value of easing corresponds directly
     to {{domxref("AnimationEffectTimingReadOnly.easing")}} in
-    {{domxref("AnimationEffectReadOnly.timing", "timing")}} objects returned by
-    {{domxref("AnimationEffectReadOnly")}}, {{domxref("KeyframeEffectReadOnly")}}, and
+    {{domxref("AnimationEffect/getTiming", "timing")}} objects returned by
+    {{domxref("AnimationEffect")}}, {{domxref("KeyframeEffect")}}, and
     {{domxref("KeyframeEffect")}}.</p>
 </div>
 
 <h2 id="Syntax">Syntax</h2>
 
 <pre class="brush: js">var <em>timingProperties</em> = {
-  easing: {{cssxref("single-transition-timing-function")}}
+  easing: {{cssxref("easing-function")}}
 }
 
-<em>timingProperties</em>.easing = {{cssxref("single-transition-timing-function")}}
+<em>timingProperties</em>.easing = {{cssxref("easing-function")}}
 </pre>
 
 <h3 id="Value">Value</h3>
@@ -60,8 +60,7 @@ <h3 id="Value">Value</h3>
     <code>cubic-bezier(&lt;number&gt;, &lt;number&gt;, &lt;number&gt;, &lt;number&gt;)</code>
   </dt>
   <dd><img alt="A diagram showing the points of a cubic bezier timing function."
-      src="https://www.w3.org/TR/css-timing-1/cubic-bezier-timing-curve.svg"
-      style="height: 150px; width: 400px;"><br>
+      src="https://www.w3.org/TR/css-timing-1/cubic-bezier-timing-curve.svg"><br>
     Specifies <a
       href="https://w3c.github.io/web-animations/#cubic-bzier-timing-function">a cubic
       Bézier timing function</a>. The four numbers specify points P1 and P2 of the curve
@@ -91,8 +90,7 @@ <h3 id="Value">Value</h3>
     <code>frames()</code>.</dd>
   <dt><code>steps(&lt;integer&gt;[, [ start | end ] ]?)</code></dt>
   <dd><img alt="A diagram of the various steps timing functions."
-      src="https://www.w3.org/TR/css-timing-1/step-timing-func-examples.svg"
-      style="height: 238px; width: 500px;"><br>
+      src="https://www.w3.org/TR/css-timing-1/step-timing-func-examples.svg"><br>
     Specifies <a href="https://w3c.github.io/web-animations/#step-timing-function">a step
       timing function</a>, which breaks the animation down into a number of equal time
     intervals. The browser flips to a different static frame when each interval is

files/en-us/web/api/gainnode/index.html

@@ -14,7 +14,7 @@
 
 <p>The gain is a unitless value, changing with time, that is multiplied to each corresponding sample of all input channels. If modified, the new gain is instantly applied, causing unaesthetic 'clicks' in the resulting audio. To prevent this from happening, never change the value directly but use the exponential interpolation methods on the {{domxref("AudioParam")}} interface.</p>
 
-<p><img alt="The GainNode is increasing the gain of the output." src="https://mdn.mozillademos.org/files/5085/WebAudioGainNode.png" style="height: 116px; width: 774px;"></p>
+<p><img alt="The GainNode is increasing the gain of the output." src="webaudiogainnode.png"></p>
 
 <table class="properties">
  <tbody>
@@ -45,7 +45,7 @@ <h2 id="Constructor">Constructor</h2>
 
 <dl>
  <dt>{{domxref("GainNode.GainNode", "GainNode()")}}</dt>
- <dd>Creates a new instance of a <code>GainNode</code> object. You shouldn't manually create a gain node; instead, use the method {{domxref("AudioContext.createGain()")}}.</dd>
+ <dd>Creates a new instance of a <code>GainNode</code> object. You shouldn't manually create a gain node; instead, use the method {{domxref("BaseAudioContext.createGain")}}.</dd>
 </dl>
 
 <h2 id="Properties">Properties</h2>
@@ -89,5 +89,5 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
- <li><a href="/en-US/docs/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
+ <li><a href="/en-US/docs/Web/API/Web_Audio_API/Using_Web_Audio_API">Using the Web Audio API</a></li>
 </ul>

files/en-us/web/api/navigator/registerprotocolhandler/index.html

@@ -2,13 +2,13 @@
 title: Navigator.registerProtocolHandler()
 slug: Web/API/Navigator/registerProtocolHandler
 tags:
-- API
-- HTML DOM
-- Method
-- Navigator
-- Reference
-- Web-Based Protocol Handlers
-- registerProtocolHandler
+  - API
+  - HTML DOM
+  - Method
+  - Navigator
+  - Reference
+  - Web-Based Protocol Handlers
+  - registerProtocolHandler
 ---
 <div>{{APIRef("HTML DOM")}}{{securecontext_header}}</div>
 
@@ -29,7 +29,7 @@ <h2 id="Syntax">Syntax</h2>
   arguments:
   <code>navigator.registerProtocolHandler(<var>scheme</var>, <var>url, title</var>)</code>,
   which most browsers still support (see the <a
-    href="#Browser_compatibility">compatibility table below</a>). It is recommended to
+    href="#browser_compatibility">compatibility table below</a>). It is recommended to
   still set the title, since browsers that support the updated spec will most likely be
   backwards-compatible and still accept the title (but not use it).</div>
 
@@ -148,7 +148,7 @@ <h2 id="Example">Example</h2>
 
 <p><img
     alt="A browser notification reads “Add Burger handler (www.google.co.uk) as an application for burger links?”, and offers an “Add Application” button and a close to ignore the handler request."
-    src="https://mdn.mozillademos.org/files/9683/protocolregister.png"></p>
+    src="protocolregister.png"></p>
 
 <h2 id="Specifications">Specifications</h2>
 
@@ -177,7 +177,7 @@ <h2 id="Browser_compatibility">Browser compatibility</h2>
 <h2 id="See_also">See also</h2>
 
 <ul>
-  <li><a href="/en-US/docs/Web-based_protocol_handlers">Web-based protocol handlers</a>
+  <li><a href="/en-US/docs/Web/API/Navigator/registerProtocolHandler/Web-based_protocol_handlers">Web-based protocol handlers</a>
   </li>
   <li><a
       href="http://blog.mozilla.com/webdev/2010/07/26/registerprotocolhandler-enhancing-the-federated-web/">RegisterProtocolHandler

files/en-us/web/api/pointer_lock_api/index.html

@@ -34,7 +34,7 @@ <h2 id="Methodproperties_overview">Method/properties overview</h2>
 
 <h3 id="requestPointerLock">requestPointerLock()</h3>
 
-<p>The Pointer lock API, similar to the <a href="/en-US/docs/Web/Guide/API/DOM/Using_full_screen_mode">Fullscreen API</a>, extends DOM elements by adding a new method, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. As it has recently unprefixed, you would currently declare it something like this, for example if you wanted to request pointer lock on a <code>canvas</code> element:</p>
+<p>The Pointer lock API, similar to the <a href="/en-US/docs/Web/API/Fullscreen_API">Fullscreen API</a>, extends DOM elements by adding a new method, {{domxref("Element.requestPointerLock","requestPointerLock()")}}. As it has recently unprefixed, you would currently declare it something like this, for example if you wanted to request pointer lock on a <code>canvas</code> element:</p>
 
 <pre class="brush: js">canvas.requestPointerLock = canvas.requestPointerLock ||
                             canvas.mozRequestPointerLock;
@@ -48,9 +48,9 @@ <h3 id="requestPointerLock">requestPointerLock()</h3>
 
 <h3 id="pointerLockElement_and_exitPointerLock">pointerLockElement and exitPointerLock()</h3>
 
-<p>The Pointer lock API also extends the {{domxref("Document")}} interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named {{domxref("Document.pointerLockElement","pointerLockElement")}} and the new method on {{domxref("Document")}} is {{domxref("Document.exitPointerLock","exitPointerLock()")}} and, as the name implies, it is used to exit the pointer lock.</p>
+<p>The Pointer lock API also extends the {{domxref("Document")}} interface, adding both a new property and a new method. The new property is used for accessing the currently locked element (if any), and is named {{domxref("DocumentOrShadowRoot/pointerLockElement","pointerLockElement")}} and the new method on {{domxref("Document")}} is {{domxref("Document.exitPointerLock","exitPointerLock()")}} and, as the name implies, it is used to exit the pointer lock.</p>
 
-<p>The {{domxref("Document.pointerLockElement","pointerLockElement")}} property is useful for determining if any element is currently pointer locked (e.g., for doing a Boolean check) and also for obtaining a reference to the locked element, if any.</p>
+<p>The {{domxref("DocumentOrShadowRoot/pointerLockElement","pointerLockElement")}} property is useful for determining if any element is currently pointer locked (e.g., for doing a Boolean check) and also for obtaining a reference to the locked element, if any.</p>
 
 <p>Here is an example of using <code>pointerLockElement</code>:</p>
 
@@ -122,7 +122,7 @@ <h2 id="Simple_example_walkthrough">Simple example walkthrough</h2>
 
 <p>We've written a <a href="https://mdn.github.io/dom-examples/pointer-lock/">simple pointer lock demo</a> to show you how to use it to set up a simple control system (<a href="https://github.com/mdn/dom-examples/tree/master/pointer-lock">see source code</a>). The demo looks like this:</p>
 
-<p><img alt="A red circle on top of a black background." src="https://mdn.mozillademos.org/files/7953/pointer-lock.png" style="display: block; height: 362px; margin: 0px auto; width: 640px;"></p>
+<p><img alt="A red circle on top of a black background." src="pointer-lock.png" style="display: block; margin: 0px auto;"></p>
 
 <p>This demo uses JavaScript to draw a ball on top of an {{ htmlelement("canvas") }} element. When you click the canvas, pointer lock is then used to remove the mouse pointer and allow you to move the ball directly using the mouse. Let's see how this works.</p>
 

files/en-us/web/api/resource_timing_api/using_the_resource_timing_api/index.html

@@ -27,7 +27,7 @@ <h2 id="Resource_loading_phases">Resource loading phases</h2>
 
 <p>An application can get timestamps for the various phases of resource loading such as redirection, DNS lookup, and TCP connection setup. Those phases and their property names are illustrated in Figure 1.</p>
 
-<p><img alt="Graphic of Resource Timing timestamps" src="https://mdn.mozillademos.org/files/12093/ResourceTiming-TimeStamps.jpg" style="height: 540px; width: 720px;"><br>
+<p><img alt="Graphic of Resource Timing timestamps" src="resourcetiming-timestamps.jpg"><br>
 Figure 1. Resource timing properties</p>
 
 <p>An application developer can use the property values to calculate the length of time a phase takes and that information can help diagnose performance issues.</p>

files/en-us/web/api/storage_api/index.html

@@ -32,7 +32,7 @@ <h2 id="Site_storage_units">Site storage units</h2>
 
 <p>The site storage system described by the Storage Standard and interacted with using the Storage API consists of a single <strong>site storage unit</strong> for each {{Glossary("origin")}}. In essence, every Web site or Web application has its own storage unit into which its data gets placed. The diagram below shows a site storage pool with three storage units within, showing how storage units can have different data types stored within and may have different quotas (maximum storage limits).</p>
 
-<p><img alt="A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached." src="https://mdn.mozillademos.org/files/14379/StorageUnits.png" style="height: 412px; width: 600px;"></p>
+<p><img alt="A diagram showing how the site storage pool consists of multiple storage units that contain data from various APIs as well as possible unused space left before the quota is reached." src="storageunits.png"></p>
 
 <ul>
  <li>Origin 1 has some Web Storage data as well as some IndexedDB data, but also has some free space left; its current usage hasn't yet reached its quota.</li>

files/en-us/web/api/web_animations_api/web_animations_api_concepts/index.html

@@ -23,7 +23,7 @@ <h2 id="History">History</h2>
 
 <p>The Internet Explorer team requested an animations API to consolidate and normalize animation functionality across all browsers, and thus efforts began in earnest among Mozilla Firefox and Google Chrome developers to create the one animation spec to rule them all: the Web Animations API. Now we’ve got the WAAPI for future animation specifications to piggyback on, allowing them to remain consistent and play well together. It also provides a point of reference all browsers can adhere to with the currently available specs.</p>
 
-<p><img alt="An illustration showing the Web Animations API ruling over CSS Transitions and Animations as well as a third category representing future animation specs with a question mark." src="https://mdn.mozillademos.org/files/14593/waapi_diagram_white.png" style="display: block; height: 388px; margin: 0px auto; width: 600px;"></p>
+<p><img alt="An illustration showing the Web Animations API ruling over CSS Transitions and Animations as well as a third category representing future animation specs with a question mark." src="waapi_diagram_white.png" style="display: block; margin: 0px auto;"></p>
 
 <h2 id="The_Two_Models_Timing_and_Animation">The Two Models: Timing and Animation</h2>
 
@@ -39,7 +39,7 @@ <h3 id="Animation">Animation</h3>
 
 <p>The animation model can be thought of as an array of snapshots of what the animation could look like at any given time, lined up along the duration of the animation.</p>
 
-<p><img alt="An illustration showing how the animation model can be visualized as a series of snapshots arranged along a timeline. In this case, pictures of the cheshire cat going from 0 (there) to 8 seconds (not all there—only his smile is left)." src="https://mdn.mozillademos.org/files/14607/waapi_timing_diagram_white.png" style="display: block; height: 341px; margin: 0px auto; width: 600px;"></p>
+<p><img alt="An illustration showing how the animation model can be visualized as a series of snapshots arranged along a timeline. In this case, pictures of the cheshire cat going from 0 (there) to 8 seconds (not all there—only his smile is left)." src="waapi_timing_diagram_white.png" style="display: block; margin: 0px auto;"></p>
 
 <h2 id="Core_Concepts">Core Concepts</h2>
 
@@ -51,9 +51,9 @@ <h3 id="Timeline">Timeline</h3>
 
 <h3 id="Animation_2">Animation</h3>
 
-<p><a href="/en-US/docs/Web/API/Animation">Animation objects</a> can be imagined as DVD players: they’re used for controlling media playback, but without media to play, they don’t do anything. Animation objects accept media in the form of Animation Effects, specifically Keyframe Effects (we’ll get to those in a moment). Like a DVD player, we can use the Animation Object’s methods to <a href="/en-US/docs/Web/API/Animation/play">play</a>, <a href="/en-US/docs/Web/API/Animation/pause">pause</a>, <a href="/en-US/docs/Web/API/Animation/currentTime">seek</a>, and <a href="/en-US/docs/Web/API/Animation/reverse">control the animation’s playback direction</a> and <a href="/en-US/docs/Web/API/Animation/playBackRate">speed</a>.</p>
+<p><a href="/en-US/docs/Web/API/Animation">Animation objects</a> can be imagined as DVD players: they’re used for controlling media playback, but without media to play, they don’t do anything. Animation objects accept media in the form of Animation Effects, specifically Keyframe Effects (we’ll get to those in a moment). Like a DVD player, we can use the Animation Object’s methods to <a href="/en-US/docs/Web/API/Animation/play">play</a>, <a href="/en-US/docs/Web/API/Animation/pause">pause</a>, <a href="/en-US/docs/Web/API/Animation/currentTime">seek</a>, and <a href="/en-US/docs/Web/API/Animation/reverse">control the animation’s playback direction</a> and <a href="/en-US/docs/Web/API/Animation/playbackRate">speed</a>.</p>
 
-<p><img alt="An illustration likening how an Animation plays a KeyframeEffect like a DVD player plays a DVD." src="https://mdn.mozillademos.org/files/14589/waapi_player_diagram_white.png" style="display: block; height: 204px; margin: 0px auto; width: 600px;"></p>
+<p><img alt="An illustration likening how an Animation plays a KeyframeEffect like a DVD player plays a DVD." src="waapi_player_diagram_white.png" style="display: block; margin: 0px auto;"></p>
 
 <h3 id="Animation_Effect">Animation Effect</h3>