Smart Image for Wappler

Wappler Extensions
1

Smart Image for Wappler

A full-stack image optimization extension for Wappler that automatically resizes, converts, and caches images on the fly — served through a clean <smart-img> component that is a direct drop-in replacement for the standard HTML <img> element.

Authors: Shalabh Gupta (@guptast) & Ben Pleysier (@ben)

:warning: Node.js only — This extension requires a Wappler Node.js project. It is not compatible with PHP or ASP.NET Wappler projects. The server-side processing depends on Node.js-specific libraries (Sharp, Express route hooks, and EJS templates).

Why Smart Image?

Replacing <img> with <smart-img> requires no configuration and gives you:

  • :white_check_mark: Automatic responsive images — the right size for mobile, tablet, and desktop
  • :white_check_mark: Retina / HiDPI support — 2× variants served automatically to high-density screens
  • :white_check_mark: Modern formats — WebP or AVIF generated on the fly from your original JPG/PNG
  • :white_check_mark: Blur-up placeholder — a blurred preview is shown instantly while the full image loads
  • :white_check_mark: Lazy loading — built in by default
  • :white_check_mark: Server-side caching — processed images are cached and served in subsequent requests at zero cost
  • :white_check_mark: Zero layout shift — set width and height to reserve space before load

Installation

Install via Wappler's built-in extension manager:

  1. Open your project in Wappler
  2. Go to Project Options → Extensions
  3. Search for and install Smart Image

Quick Start

Drop-in replacement for <img>

Simply swap <img> for <smart-img>:

Before

<img src="/assets/images/hero.jpg" alt="My Image">

image
image721×586 83 KB

After — responsive, retina-aware, lazy-loaded, with blur placeholder

<smart-img src="/assets/images/hero.jpg" alt="My Image"></smart-img>

image
image706×586 83.4 KB

3 Likes
2

That looks like a game changer ben. Brilliant!

1 Like
3

I am really excited about it. Unfortunately, the original version had a routing bug which is now fixed in version 1.0.2.

4

What an amazing bit of kit @ben - well done!

5

Thank you Tom, a lot of credit goes to Shalabh (@guptast ) :waving_hand: for the brilliant Server Connect part. That was already the thrilling bit; all I had to do was to stitch it to App Connect.

As a side note: dmx:-bind:src can be used for dynamically loaded images, though there is a problem with the UI when that is used. In the coming week I will work on that part by using Dynamic Attributes

2 Likes
6

Thank you too @guptast both of you have developed an excellent extension there.

2 Likes