Skip to main content

SpeedSize Advanced Integration & Best Practices

This article contains the following topics:

Advanced Integration for Images

Use High-Quality Originals

Always upload high-resolution, uncompressed images (up to 4K where applicable). Avoid low-quality, pre-compressed, or upscaled files. Starting with clean, high-quality originals ensures optimal compression efficiency and maximum visual fidelity.

Use Supported Formats

Upload images in supported formats such as JPEG, PNG, WebP, SVG, and animated GIF. For best results, use PNG or high-quality JPEG as your source files. These preserve detail and allow SpeedSize to achieve optimal compression with minimal quality loss.

Leverage Adaptive Resizing

Use srcset and sizes attributes to allow the browser to select the most appropriate image size based on layout and device conditions.

  • Define multiple width variants using SpeedSize parameters (e.g. speedsize=w_800) or your platform’s native resizing (e.g. width=800 in Shopify).
  • Ensure the largest width in your srcset is at least equal to, and ideally 1.5–2x larger than, the maximum rendered size of the image to prevent upscaling and preserve quality. 
<img
  srcset="https://aicdn.speedsize.com/https://www.website.com/sample.jpg?speedsize=w_400 400w,
          https://aicdn.speedsize.com/https://www.website.com/sample.jpg?speedsize=w_800 800w,
          https://aicdn.speedsize.com/https://www.website.com/sample.jpg?speedsize=w_1200 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1200px) 800px,
         1200px"
  src="https://aicdn.speedsize.com/https://www.website.com/sample.jpg?speedsize=w_1200"
  alt="Test Image">

Enable Client Hints

Enable Client Hints so SpeedSize can dynamically deliver device-optimized image variations based on real browser conditions.

Add the following meta tags inside the <head> section:

<meta http-equiv="Accept-CH" content="Width, Viewport-Width, DPR">
<meta http-equiv="delegate-ch" content="sec-ch-width https://<your-cdn-domain>; 
sec-ch-viewport-width https://<your-cdn-domain>; 
sec-ch-dpr https://<your-cdn-domain>;">

Replace <your-cdn-domain> with your SpeedSize delivery domain (e.g., aicdn.speedsize.com, scdn.speedsize.com, or your custom subdomain).

Alternatively, configure response headers at the server level:

Accept-CH: Width, Viewport-Width, DPR
Permissions-Policy: ch-width=*, ch-dpr=*, ch-viewport-width=*

When enabled, browsers send device pixel ratio (DPR) and viewport information, allowing SpeedSize to deliver precisely sized assets.

Avoid Lazy Loading LCP Elements

Do not lazy load hero images or other above-the-fold content using loading="lazy" or JavaScript-based lazy loading techniques (e.g. data-src, lazyload libraries, or dynamically injected images). 

Lazy loading LCP elements delays their discovery and negatively impacts Largest Contentful Paint (LCP).

Instead:

  • Ensure the LCP image is present in the initial HTML
  • Use loading="eager" and fetchpriority="high" to prioritize its download
  • Additionally, you may preload the primary LCP resource with <link rel="preload"> to ensure even earlier discovery:
<link rel="preload" as="image" href="https://example.com/hero.jpg">

Ensure Proper Image Sizes

The intrinsic (loaded) size should match or exceed the rendered size. Ideally, intrinsic size should be 1.5–2x the rendered size to avoid upscaling and preserve quality on high-DPR screens.

Screen Shot 2025-03-18 at 10.54.13 AM.png

This image will appear stretched because its intrinsic size (720x720px) is smaller than the rendered size (960x960px).

Advanced Integration for Videos

Use the Highest Quality Source Available

Upload videos in the highest possible quality (up to 4K) to allow SpeedSize’s AI-driven optimization to maintain visual fidelity while significantly reducing file size. Starting with high-quality source files ensures the best possible output.

  • Resolution: Ideally 4K (2160p), but at least 1080p.
  • Framerate: 30 fps is ideal for smooth playback. Higher framerates (like 60 fps) are also supported but often unnecessary for typical web content.

Use MP4 with H.264 (AVC) as Input Format

For optimal compatibility and smooth processing, upload videos in the MP4 format encoded with the H.264 (AVC) codec. SpeedSize also supports videos in AV1, VP9, and MOV containers if they use a supported codec like H.264. However, MP4 with H.264 remains the most reliable choice for processing and browser playback. Avoid using the H.265 (HEVC) codec, as it is not currently supported as an input format due to limited browser and device compatibility.

Use Short Videos with SpeedSize

For optimal performance, keep videos under 10 seconds when using SpeedSize. If your video is longer than 30 seconds, consider hosting it on a dedicated streaming platform to give users better playback controls such as rewind, fast-forward, and speed adjustment.

Avoid Using Vimeo or YouTube for Short Videos

For videos under 30 seconds, host them directly on your site so SpeedSize can optimize them. Platforms like Vimeo or YouTube are not optimized by SpeedSize and can negatively impact overall performance due to the heavy third-party scripts they load, affecting metrics such as LCP, Total Blocking Time, and page interactivity. For more details, see our Using SpeedSize for Videos article.

Avoid Animated GIFs

Although SpeedSize fully supports animated GIFs, they have a limited 256-color palette and tend to be large in file size. For better quality and efficiency, use MP4 for animations instead.

Serve Device-Specific Video Versions

Use <source> elements with appropriate media conditions to deliver optimized video versions for mobile and desktop:

<video>
  <source src="video-desktop.mp4" media="(min-width: 800px)">
  <source src="video-mobile.mp4" media="(max-width: 799px)">
</video>

Example of usage: video_desktop.mp4 is served for screens 800px wide or larger, while video_mobile.mp4 is served for screens narrower than 800px.

Preload Above-the-Fold Videos

For hero or other above-the-fold videos, use:

<video autoplay muted playsinline preload="auto">
  • autoplay muted playsinline ensures immediate playback without user interaction.
  • preload="auto" helps the browser buffer the video early when it is visible on page load.

Use preload="auto" only for videos that are immediately visible. For below-the-fold videos, use preload="metadata" instead.

Related to

Related articles