# Pages with Inefficient Image Formats

**Priority**: Critical

**Impact**: Neutral

## What issues it may cause

<ul>
  <li>
    <strong>Slower Load Times:</strong> Websites using outdated image formats may experience slower load times due to
    larger file sizes.
  </li>
  <li>
    <strong>Higher Bandwidth Consumption:</strong> Older image formats require more data to be transferred over the
    network, which can impact users with limited data plans or slow internet connections.
  </li>
  <li>
    <strong>Reduced User Experience:</strong> Slower load times due to large image file sizes can lead to increased
    bounce rates and lower user engagement.
  </li>
</ul>

## How do you fix it

<ul>
  <li>
    Convert images to modern formats like WebP or AVIF to take advantage of their superior compression and quality.
  </li>
  <li>
    Use responsive images to serve the most appropriate image format based on the user's device and browser support.
  </li>
</ul>
[Learn more about modern image formats.](https://developer.chrome.com/docs/lighthouse/performance/uses-webp-images/)

## What is the positive impact

<ul>
  <li>
    <strong>Faster Page Load Times:</strong> Adopting modern image formats reduces image file sizes, resulting in faster
    page load times.
  </li>
  <li>
    <strong>Improved Bandwidth Usage:</strong> By using more efficient image formats, websites consume less bandwidth,
    benefiting users with limited data plans and improving overall network performance.
  </li>
  <li>
    <strong>Enhanced User Experience:</strong> Faster load times contribute to a smoother browsing experience, leading
    to higher user satisfaction and engagement.
  </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
              savingsKib
              pageviews
              productOfSavingsKibAndPageviews
              itemsCount
              auditResult
            }
            totalCount
            pageInfo {
              endCursor
              hasNextPage
            }
          }
       }
     }
```

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