title: webp/jpg - Preloading only the needed type in a html file
body: <p>i have a website and i am using webp and jpg as a fallback.
  in the header, i have a bis image and smaller image for mobile users.</p>
  <p>So i have 4 files:</p>
  <pre><code>header-big.webp
  header-small.webp
  header-big.jpg
  header-small.jpg
  </code></pre>
  <p>Because it is in the header, i want wo preload the image, but only the image i need.
  for the small and big ones i can preload it with the media-attribute.</p>
  <pre><code>&lt;link rel=&quot;preload&quot; href=&quot;header-small.jpg&quot; as=&quot;image&quot; type=&quot;image/jpg&quot; media=&quot;(max-width: 575px)&quot;&gt;
  &lt;link rel=&quot;preload&quot; href=&quot;header-small.webp&quot; as=&quot;image&quot; type=&quot;image/webp&quot; media=&quot;(max-width: 575px)&quot;&gt;
  &lt;link rel=&quot;preload&quot; href=&quot;header-big.jpg&quot; as=&quot;image&quot; type=&quot;image/jpg&quot; media=&quot;(min-width: 576px)&quot;&gt;
  &lt;link rel=&quot;preload&quot; href=&quot;header-big.webp&quot; as=&quot;image&quot; type=&quot;image/webp&quot; media=&quot;(min-width: 576px)&quot;&gt;
  </code></pre>
  <p>In this case, the browser always preloads two files, depending on its width, but still just one of them will be used.</p>
  <p>and jeah, it makes sense, because the jpg and webp can be both implemented. so of course the browser  preload both.</p>
  <p>but can i say &quot;if you support webp, than preload the webp and do not preload the jpg&quot;?</p>
  <p>Thanks,
  Florian</p>