1 files changed, 61 insertions, 0 deletions
diff --git a/files/fr/web/api/performanceelementtiming/naturalwidth/index.html b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html
new file mode 100644
index 0000000000..e284faba40
--- /dev/null
+++ b/files/fr/web/api/performanceelementtiming/naturalwidth/index.html
@@ -0,0 +1,61 @@
+---
+title: PerformanceElementTiming.naturalWidth
+slug: Web/API/PerformanceElementTiming/naturalWidth
+tags:
+  - API
+  - Property
+  - Propriété
+  - Reference
+  - naturalWidth
+  - PerformanceElementTiming
+translation_of: Web/API/PerformanceElementTiming/naturalWidth
+---
+<div>{{APIRef("Element Timing API")}}</div>
+
+<p class="summary">La propriété en lecture seule <strong><code>naturalWidth</code></strong> de l'interface <a href="/fr/docs/Web/API/PerformanceElementTiming"><code>PerformanceElementTiming</code></a> renvoie la largeur intrinsèque de l'élément image.</p>
+<h2 id="Syntax">Syntax</h2>
+
+<pre class="brush:js">var <var>width</var> = <var>PerformanceElementTiming</var>.naturalWidth;</pre>
+
+<h3>Valeur</h3>
+<p>Un entier de 32 bits non signé (<i>unsigned long</i>) qui est la largeur intrinsèque de l'image si cela est appliqué à une image, 0 pour le texte.</p>
+
+<h2 id="Examples">Exemples</h2>
+
+<p>Dans cet exemple, le fichier image a une largeur de 1000px et une hauteur de 750px. L'appel de <code>entry.naturalWidth</code> renvoie <code>1000</code>, c'est-à-dire la largeur intrinsèque en pixels.</p>
+
+<pre class="brush:html">&lt;img src="image.jpg" alt="une belle image" elementtiming="big-image" id="myImage"&gt;</pre>
+
+<pre class="brush:js">const <var>observer</var> = new PerformanceObserver((list) => {
+  let <var>entries</var> = list.getEntries().forEach(function (entry) {
+    if (entry.identifier === "big-image") {
+      console.log(entry.naturalWidth);
+    }
+  });
+});
+observer.observe({ entryTypes: ["element"] });</pre>
+
+<p class="notecard note">Cet exemple utilise l'interface <a href="/fr/docs/Web/API/PerformanceObserver"><code>PerformanceObserver</code></a> pour créer une liste d'événements de mesure des performances. Dans notre cas, nous observons l'élément <a href="/fr/docs/Web/API/PerformanceEntry/entryType"><code>PerformanceEntry.entryType</code></a> afin d'utiliser l'interface <code>PerformanceElementTiming</code>.</p>
+
+<h2 id="Specifications">Specifications</h2>
+
+<table class="standard-table">
+  <thead>
+    <tr>
+      <th scope="col">Spécification</th>
+      <th scope="col">Statut</th>
+      <th scope="col">Commentaire</th>
+    </tr>
+  </thead>
+  <tbody>
+   <tr>
+      <td>{{SpecName('Element Timing API','#dom-performanceelementtiming-naturalwidth','PerformanceElementTiming.naturalWidth')}}</td>
+      <td>{{Spec2('Element Timing API')}}</td>
+      <td>Définition initiale.</td>
+   </tr>
+  </tbody>
+</table>
+
+<h2 id="Browser_compatibility">Compatibilité des navigateurs</h2>
+
+<p>{{Compat("api.PerformanceElementTiming.naturalWidth")}}</p>