title: Lighthouse Pagespeed issue with appropriately-sized images
body: <p>I am stuck with an issue with Lighthouse Pagespeed that I've never experienced before and cannot replicate on any other website that I am managing.</p>
  <p>The error message I am receiving is:</p>
  <blockquote>
  <p>Serve images that are appropriately-sized to save cellular data and improve load time.</p>
  </blockquote>
  <p><a href="https://i.stack.imgur.com/eCxCz.png" rel="nofollow noreferrer">Screenshot from Pagespeed Insights</a></p>
  <p>Here is the source code for one of the images in question (formatted for readability):</p>
  <pre class="lang-html prettyprint-override"><code>
  &lt;img
    width=&quot;300&quot;
    height=&quot;300&quot;
    class=&quot;attachment-woocommerce_thumbnail size-woocommerce_thumbnail&quot;
    src=&quot;https://example.com/assets/c1-300x300.jpg&quot;
    srcset=&quot;https://example.com/assets/c1-300x300.jpg 300w,
      https://example.com/assets/c1-600x599.jpg 600w,
      https://example.com/assets/c1-902x900.jpg 902w,
      https://example.com/assets/c1-100x100.jpg 100w,
      https://example.com/assets/c1.jpg 938w&quot;
    sizes=&quot;(max-width: 300px) 100vw, 300px&quot;
    alt=&quot;&quot;
    loading=&quot;lazy&quot;
  /&gt;
  
  </code></pre>
  <p>I've found a long-closed GitHub issue addressing this behavior, where the devs responded that it is intended, and Lighthouse is using device pixel ratio of 3.0 on purpose. This explains why it picks the triple image size, but I still cannot figure out how I am supposed to “fix” this issue in the code.</p>
  <p>I've tried further optimization for the images, but either it's irrelevant, or I haven't optimized enough.</p>
  <p>Has anyone experienced the same, or has at least been able to replicate it on a different website?</p>
  <p>It'd be great to find out both the cause (since the error message is not really telling anything) and the solution.</p>