title: Core web vitals flagged Image elements do not have explicit width and height
body: <p>I was checking Core Vitals on PageSpeed insight and noticed its flagging  <code>Image elements do not have explicit width and height</code> and suggesting <code>Set an explicit width and height on image elements to reduce layout shifts and improve CLS.</code></p>
  <p>I am not sure what it exactly means and what i can do properly to resolve this issue, specific to my case</p>
  <pre><code>&lt;img src=&quot;someimage.jpg&quot; width=&quot;100%&quot; height=&quot;100%&quot; alt=&quot;something&quot; class=&quot;img-responsive&quot;&gt;
  </code></pre>
  <p>My page is responsive and i am using bootstrap v3.x for this webpage as its is old page. since page is responsive and i am using class=&quot;img-responsive&quot; which automatically resizes image with, but this impacts core vital such as CLS.</p>
  <p>Since layout is responsive what is the best approach to define use image to avoid CLS issue.</p>
  <p>I have noticed most of the CLS reported by Page Speed Insigh is for owl Carousal</p>
  <p>Below is the copy of code which generate CLS issue for images</p>
  <pre><code>&lt;div class=&quot;container&quot;&gt;
    &lt;div class=&quot;row&quot;&gt;
      &lt;div class=&quot;col-md-12 col-lg-12 lc-hp-col&quot;&gt;
        &lt;div class=&quot;owl-carousel owl-theme&quot; data-items=&quot;1&quot; data-items-desktop=&quot;1&quot; data-items-tablet=&quot;[991,1]&quot; data-items-mobile=&quot;[767,1]&quot; data-pagination-speed=&quot;200&quot; data-auto-play=&quot;true&quot; data-stop-on-hover=&quot;true&quot;&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;img alt=&quot;ALT&quot; class=&quot;img-responsive&quot; src=&quot;https://dummyimage.com/992x588/000/3431af&amp;text=IMAGE+1&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;img alt=&quot;ALT&quot; class=&quot;img-responsive&quot; src=&quot;https://dummyimage.com/992x588/000/3431af&amp;text=IMAGE+2&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;img alt=&quot;ALT&quot; class=&quot;img-responsive&quot; src=&quot;https://dummyimage.com/992x588/000/3431af&amp;text=IMAGE+3&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;img alt=&quot;ALT&quot; class=&quot;img-responsive&quot; src=&quot;https://dummyimage.com/992x588/000/3431af&amp;text=IMAGE+4&quot;&gt;
          &lt;/div&gt;
          &lt;div class=&quot;item&quot;&gt;
            &lt;img alt=&quot;ALT&quot; class=&quot;img-responsive&quot; src=&quot;https://dummyimage.com/992x588/000/3431af&amp;text=IMAGE+5&quot;&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  <p>CodePen <a href="https://codepen.io/KGuide/pen/jOVXVzv" rel="nofollow noreferrer">link</a></p>
  <p>Some article have suggested to use scrset for responsive images but this is not practical as we have to then upload multiple versions of same image.</p>
  <pre><code>&lt;img
    width=&quot;1000&quot;
    height=&quot;1000&quot;
    src=&quot;puppy-1000.jpg&quot;
    srcset=&quot;puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w&quot;
    alt=&quot;Puppy with balloons&quot;
  /&gt;
  </code></pre>