# Pages with Oversized Images

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    Cumulative Layout Shift (CLS): Unsized images can cause the page's content to shift unexpectedly as images load,
    resulting in a higher CLS and potential user frustration.
  </li>
  <li>
    Slow Rendering: Without reserved space, the browser must recalculate the layout as images load, which can delay the
    rendering of other content on the page.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    Specify Width and Height: Always include width and height attributes for each image in the HTML code to help the
    browser allocate space and improve layout stability.
  </li>
  <li>
    Use Responsive Images: Use the srcset attribute for responsive images to provide different image sizes based on the
    user's device and screen size, ensuring optimal image display.
  </li>
  <li>
    Optimize Image File Sizes: Reduce image file sizes using compression techniques to improve loading times and reduce
    the impact of unsized images on page performance.
  </li>
</ul>
[Learn more about how to set image dimensions.](https://web.dev/articles/optimize-cls#images-without-dimensions)

## What is the positive impact

<ul>
  <li>Lower CLS: Specifying dimensions for images helps reduce unexpected content shifts, leading to lower CLS.</li>
  <li>
    Faster Rendering: With reserved space for images, the browser can render the page more quickly, enhancing user
    satisfaction.
  </li>
  <li>
    Better User Experience: A more stable layout and faster rendering contribute to an improved and more predictable
    user experience.
  </li>
  <li>
    Reduced Bandwidth Usage: Optimized images use less data, benefiting users with limited bandwidth and improving
    overall page speed.
  </li>
</ul>

## How to fetch the data for this report template

You will need to run a crawl for report template to generate report. When report has been generated and you have
crawl id you can fetch data for the report using the following query:


```graphql
query GetReportStatForCrawl(
      $crawlId: ObjectID!
      $reportTemplateCode: String!
      $after: String
     ) {
        getReportStat(
          input: {crawlId: $crawlId, reportTemplateCode: $reportTemplateCode}
        ) {
          crawlSiteSpeedAudits(after: $after, reportType: Basic) {
            nodes {
              url
              auditId
              title
              displayValue
              metricSavingsCls
              score
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

**Variables:**
```json
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"unsized_images_failed_audits"}
```