Pages with Improperly Sized Images
Priority: Critical
Impact: Neutral
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
- Variables
- cURL
query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) {
getCrawl(id: $crawlId) {
reportsByCode(
input: {
reportTypeCodes: Basic
reportTemplateCodes: [$reportTemplateCode]
}
) {
rows {
nodes {
... on CrawlSiteSpeedAudits {
url
auditId
title
displayValue
savingsKib
pageviews
productOfSavingsKibAndPageviews
itemsCount
auditResult
}
}
}
}
}
}
{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"uses_responsive_images_failed_audits"}
curl -X POST -H "Content-Type: application/json" -H "apollographql-client-name: docs-example-client" -H "apollographql-client-version: 1.0.0" -H "x-auth-token: YOUR_API_SESSION_TOKEN" --data '{"query":"query GetReportForCrawl($crawlId: ObjectID!, $reportTemplateCode: String!) { getCrawl(id: $crawlId) { reportsByCode( input: { reportTypeCodes: Basic reportTemplateCodes: [$reportTemplateCode] } ) { rows { nodes { ... on CrawlSiteSpeedAudits { url auditId title displayValue savingsKib pageviews productOfSavingsKibAndPageviews itemsCount auditResult } } } } } }","variables":{"crawlId":"TjAwNUNyYXdsNDAwMA","reportTemplateCode":"uses_responsive_images_failed_audits"}}' https://api.lumar.io/graphql