How to embed SmartFrame images

SmartFrame replaces the traditional file download with a streaming model that delivers only what's needed. It detects each user's screen size and pixel density, then requests the optimal resolution from the server, with no wasted bandwidth, even on HiDPI or Retina displays. Images are served using WebP compression, which reduces file size by 25–34% compared to standard JPEG images, with no visible quality loss. Built-in lazy loading defers off-screen images until they're about to enter the viewport, and asynchronous loading prevents images from blocking the rest of the page render.

No. In many cases, it speeds them up. SmartFrame's async attribute lets it load in parallel with the rest of the webpage, without blocking the main process of downloading and rendering the page itself. This alone can improve overall website performance by up to 30%. Combined with lazy loading and WebP compression, the net effect on most pages is faster, not slo

If a SmartFrame image sits outside the viewport when the page loads, SmartFrame begins preparing it for display but pauses further loading until the user scrolls it into view. This saves bandwidth on images the user may never see and reduces the initial page weight. The moment the image is about to enter view, SmartFrame initiates and renders the image on a <canvas> element. The user sees no delay, but your server and the user's connection only do the work when it's actually needed.