# Improperly Sized Images

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Increased Load Times:</strong> Large, non-responsive images can significantly slow down page load times,
    especially on mobile devices with slower connections.
  </li>
  <li>
    <strong>Excessive Data Usage:</strong> Downloading large images that are not optimized for the user's device can
    lead to higher data consumption, impacting users with limited data plans.
  </li>
  <li>
    <strong>Poor User Experience:</strong> Improperly sized images can cause layout shifts and rendering issues, leading
    to a suboptimal viewing experience.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    <strong>Use Responsive Images:</strong> Use srcset and sizes attributes to define multiple image sources and their
    sizes to ensure that the browser selects the most appropriate image for the current display size.
  </li>
  <li>
    <strong>Use image CDN:</strong> Integrate an image content delivery network (CDN) to automatically optimize and
    deliver images based on the user’s device and network conditions.
  </li>
  <li>
    <strong>Use vector-based image formats:</strong> Use SVG for logos, icons, and graphics to ensure images are
    resolution-independent and maintain quality across all screen sizes while keeping file sizes small.
  </li>
</ul>
[Learn more about sizing images.](https://developer.chrome.com/docs/lighthouse/performance/uses-responsive-images/)

## What is the positive impact

<ul>
  <li>
    <strong>Faster Page Load Times:</strong> Using responsive images reduces the amount of data that needs to be
    downloaded, leading to quicker page load times.
  </li>
  <li>
    <strong>Optimized Data Usage:</strong> Properly sized images minimize data consumption, which is especially
    beneficial for mobile users.
  </li>
  <li>
    <strong>Improved User Experience:</strong> Responsive images ensure that content is displayed correctly across
    various devices, enhancing the overall user experience.
  </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}
        ) {
          crawlSiteSpeedAuditOpportunities(after: $after, reportType: Basic) {
            nodes {
              opportunityDigest
              element
              title
              auditId
              exampleUrl
              wastedKibAvg
              urlCount
              wastedKibSum
              gaPageviewsSum
              savingsScoreSum
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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