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