Skip to main content

Improperly Sized Images

Priority: Critical

Impact: Negative

What issues it may cause​

  • Increased Load Times: Large, non-responsive images can significantly slow down page load times, especially on mobile devices with slower connections.

  • Excessive Data Usage: Downloading large images that are not optimized for the user's device can lead to higher data consumption, impacting users with limited data plans.

  • Poor User Experience: Improperly sized images can cause layout shifts and rendering issues, leading to a suboptimal viewing experience.

How do you fix it​

  • Use Responsive Images: 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.

  • Use image CDN: Integrate an image content delivery network (CDN) to automatically optimize and deliver images based on the user’s device and network conditions.

  • Use vector-based image formats: 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.

Learn more about sizing images.

What is the positive impact​

  • Faster Page Load Times: Using responsive images reduces the amount of data that needs to be downloaded, leading to quicker page load times.

  • Optimized Data Usage: Properly sized images minimize data consumption, which is especially beneficial for mobile users.

  • Improved User Experience: Responsive images ensure that content is displayed correctly across various devices, enhancing the overall user experience.

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:

query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
  getCrawl(id: $crawlId) {
    reportsByCode(
      input: {
        reportTypeCodes: Basic
        reportTemplateCodes: [$reportTemplateCode]
      }
    ) {
      rows {
        nodes {
          ... on CrawlSiteSpeedAuditOpportunities {
            opportunityDigest
            element
            title
            auditId
            exampleUrl
            wastedKibAvg
            urlCount
            wastedKibSum
            gaPageviewsSum
            savingsScoreSum
          }
        }
      }
    }
  }
}

Try in explorer