This guide covers common media issues that can affect image quality and website performance. Each section explains the issue, its impact, and provides steps to resolve it.
This article contains the following topics:
1. Oversized Images
Issue
The intrinsic size of an image is significantly larger than its rendered size, resulting in unnecessarily large file sizes and slower page load times.
Impact
Large image files increase bandwidth usage and negatively affect performance.
Example: The image rendered at 314px width but loaded at 2160px, making the file much larger than necessary (835 kB).
Solution
-
Downsize the image: Use SpeedSize’s resizing parameters to optimize image size:
- Apply the w_n parameter to set the required width (or use Shopify’s native width parameter if applicable to your website).
- Ideal ratio: The intrinsic size should be around 1.5x the rendered size to maintain quality while optimizing file size (e.g., if an image renders at 300px, set w_450). For more details about parameters, refer to our SpeedSize Transformation Parameters Guide.
- Use Adaptive Resizing: If you use the srcset and sizes attributes, ensure they are correctly configured to load the optimal image for different screen sizes.
- Enable Client Hints: Ensure Client Hints are enabled on the server side to allow automatic adjustments based on device specifications.
For more details about adaptive resizing and other best practices, refer to our Advanced Integration Guide.
2. Upscaled Images
Issue
The intrinsic size of an image is smaller than its rendered size, causing the browser to upscale the image and degrade its quality.
Impact
Blurry or pixelated images negatively impact user experience.
Example: The image with an intrinsic width of 720px but rendered at 960px.
Solution
- Upload a larger image: If the current image is too small, upload a higher-resolution original image.
- Check resizing parameters: If the original image is large enough, ensure resizing parameters (SpeedSize’s or Shopify’s native options) aren’t set to overly small sizes, which could lead to excessive downsizing.
- Check srcset and sizes: If you use srcset, verify that appropriate image sizes are available for all viewports. Expand the srcset by adding more options if necessary.
3. Aspect Ratio Mismatch
Issue
The aspect ratio of an image does not match its displayed size, leading to unwanted cropping or distortion.
Impact
Parts of the image may be cut off or stretched, reducing its visual appeal, potentially hiding important content, or causing the image to load as a larger file than necessary.
Example: The image has an intrinsic aspect ratio of 3:2, but it’s displayed as 1:1, leading to visual cropping.
Solution
- Match the aspect ratios: Ensure the intrinsic and rendered aspect ratios are aligned to prevent distortion or cropping.
- Adjust display options: Modify CSS or HTML settings to properly align the aspect ratio.
- Use SpeedSize’s parameters: Use the r_contain parameter to maintain the aspect ratio while fitting within a specified width and height. For more details, refer to our SpeedSize Transformation Parameters Guide.
4. LCP Lazy Load
Issue
The Largest Contentful Paint (LCP) image is lazy-loaded, causing delays in rendering and negatively affecting Core Web Vitals.
Impact
Lazy-loading above-the-fold images slows down perceived page load times and lowers PageSpeed Insights scores.
Example: The LCP image is lazy-loaded (loading="lazy"), delaying its appearance, which PageSpeed Insights flags as a critical issue.
Solution
- Disable lazy loading for LCP images by removing loading="lazy" or changing it to loading="eager". This ensures the images are prioritized during page load.
- Add fetchpriority="high" to the <img> tags of LCP images so the browser loads them earlier.
Final Notes
Fixing these common issues will enhance website performance and image quality while ensuring seamless SpeedSize optimization.
For further assistance, refer to our Advanced Integration Guide or contact SpeedSize Support at support@speedsize.com.