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 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
            }
          }
       }
     }

Try in explorer