title: WebP Formatted images not Always Displaying on iOS
body: <p>In order to speed HTML page loads, I've converted images to webp format and use the "picture" element as follows:</p>
  
  <pre><code>&lt;picture&gt;
      &lt;source data-srcset="images/gallery/urban.webp" type="image/webp"&gt;
      &lt;source data-srcset=images/gallery/urban.jpg" type="image/jpeg"&gt;
      &lt;img data-src="images/gallery/urban.jpg" alt="Alt Title" style=""&gt;
  &lt;/picture&gt;
  </code></pre>
  
  <p>On my tests in Chrome, IE, Edge and Firefox on the desktop, this seems to work fine.  On Chrome, in developer mode, when I run under emulation mode for mobile devices, it works too.</p>
  
  <p>But when I test on an iPhone with iOS 12, not all of the images render.  It happens on both Safari and Chrome.  A few of the larger images are displayed as gray areas.  I hadn't seen that before during development.  When I change the  element back to just the jpg , it renders OK:</p>
  
  <pre><code>&lt;img src="images/gallery/urban.jpg" alt="Alt Title" style=""&gt;
  </code></pre>
  
  <p>I'm not sure the best way to fix this.  Maybe there is something wrong with the markup.  Or maybe I should consider it a bug and try to work around it by forcing jpg/png images when the operating system is iOS?  (by using CSS or HTML or Javascript?) But the problem seems to be affecting only certain larger images.  It is a bit of a hassle to have to manually test to determine which images should be "picture" and which should be just "img".</p>