# Unoptimized Images

**Priority**: Critical

**Impact**: Negative

## What issues it may cause

<ul>
  <li>
    <strong>Slower Page Load Times:</strong> Large, unoptimized images increase the amount of data that needs to be
    downloaded, leading to longer page load times, especially on slower internet connections.
  </li>
  <li>
    <strong>Increased Bandwidth Usage:</strong> Larger images consume more bandwidth, which can be particularly
    problematic for users with limited data plans or slow network speeds.
  </li>
  <li>
    <strong>Higher Storage and Memory Usage:</strong> Unoptimized images can lead to higher storage usage on servers and
    increased memory consumption on client devices, impacting overall performance.
  </li>
  <li>
    <strong>Poor User Experience:</strong> Slow-loading images can lead to a poor user experience, as users may become
    frustrated with the delay and abandon the page before it fully loads.
  </li>
</ul>

## How do you fix it

There are various ways to optimize images, including:<ul><li><strong>Use image CDNs:</strong> Image content delivery networks (CDN) can yield big savings in image file size.</li><li><strong>Resize Images:</strong> Ensure that images are no larger than they need to be for their display size on the web page.</li><li><strong>Compression:</strong> Use image compression tools to reduce file sizes without significantly affecting visual quality.</li><li><strong>Correct Formatting:</strong> Use the most appropriate image format for your content. For example, use JPEG for photographs and PNG for images with transparency.</li><li><strong>Lazy Loading:</strong> Implement lazy loading so images are only loaded as they enter the viewport (visible part of the web page), rather than all at once.</li></ul>[Learn more about optimizing images.](https://developer.chrome.com/docs/lighthouse/performance/uses-optimized-images/)

## What is the positive impact

<ul>
  <li>
    <strong>Faster Page Load Times:</strong> Optimized images load faster, improving overall page load times and
    providing a better user experience.
  </li>
  <li>
    <strong>Reduced Network Usage:</strong> By minimizing image file sizes, you can reduce network traffic and save
    bandwidth, benefiting users with limited data plans.
  </li>
  <li>
    <strong>Lower Storage and Memory Consumption:</strong> Optimized images use less storage on servers and reduce
    memory usage on client devices, improving overall performance.
  </li>
  <li>
    <strong>Improved User Experience:</strong> Faster loading images contribute to a smoother, more engaging user
    experience, which can lead to increased user satisfaction and retention.
  </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_optimized_images_failed_items"}
```