Plugin - @nakedjsx/plugin-asset-image

Generate a HTML <picture> tag with webp & jpeg sourcesets from a single image file.

Use of this plugin currently requires that GraphicsMagick is installed and that the gm command is in the path. Support for ImageMagick will be added.

This plugin is bundled with the npx nakedjsx command, no installation is necessary.

By default, it is assumed that source images are at 2x resolution for high-dpi displays and scaled desktop resolutions. It is possible to override this by passing srcDensity=x on the import query string. sd can be used as a short form of srcDensity.

The plugin will then generate jpeg and webp image assets at 1x and 2x resolutions. If the source density is lower than 2, then it will not generate 2x assets.

It is possible to request a different set of destination images by specifying multiple dstDensity=x options on the import query string. dd=x can be used as a short form.

The display width and display height are calculated based on the source asset dimensions and the srcDensity. For example, a 640 pixel wide 2x image will display at the same width as a 320 pixel wide 1x image, but will be up to twice as detailed on displays that support it.

src/c64c_640.jpeg

(no preview available)

src/index-page.jsx

import { Page } from '@nakedjsx/core/page'
import { Image } from '@nakedjsx/plugin-asset-image/jsx'

import c64c_2x from ':image:./c64c_640.jpeg'

Page.Create('en');
Page.AppendHead(<meta name="viewport" content="width=device-width, initial-scale=1.0" />);
Page.AppendCss(`
    h1 {
        text-align: center;
    }
    img {
        display: block;
        margin: 0 auto;
    }
    `);
Page.AppendBody(
    <>
        <h1>@nakedjsx/plugin-asset-image</h1>
        <Image src={c64c_2x} alt="Photo of a Commodore 64C"/>
    </>
);
Page.Render();

# build command

$ npx nakedjsx src --out out --plugin image @nakedjsx/plugin-asset-image --pretty

out/asset/c64c_640-1x.kUlqUDzlGUsuQj8QO050I3Asn58.jpeg (13070 bytes) (open in new tab)

(no preview available)

out/asset/c64c_640-1x.uJMWT44oswv2-JC-oH9o1HV2pmw.webp (8510 bytes) (open in new tab)

(no preview available)

out/asset/c64c_640-2x.Ya3FAsdu1gQYestm84cSt0tmJ38.jpeg (37022 bytes) (open in new tab)

(no preview available)

out/asset/c64c_640-2x.PW-cmig5Qs7ayBqbLT-6npz0-FE.webp (17616 bytes) (open in new tab)

(no preview available)

out/index.html (1213 bytes) (open in new tab)

<!doctype html>
<html lang="en">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <style>
            h1 {
                text-align: center;
            }
            img {
                display: block;
                margin: 0 auto;
            }
            .a {
                width: 320px;
                aspect-ratio: 320/190;
            }
        </style>
    </head>
    <body>
        <h1>@nakedjsx/plugin-asset-image</h1>
        <picture
            ><source
                srcset="
                    asset/c64c_640-1x.uJMWT44oswv2-JC-oH9o1HV2pmw.webp 1x,
                    asset/c64c_640-2x.PW-cmig5Qs7ayBqbLT-6npz0-FE.webp 2x
                "
                type="image/webp"
                sizes="320px" />
            <img
                srcset="
                    asset/c64c_640-1x.kUlqUDzlGUsuQj8QO050I3Asn58.jpeg 1x,
                    asset/c64c_640-2x.Ya3FAsdu1gQYestm84cSt0tmJ38.jpeg 2x
                "
                sizes="320px"
                src="asset/c64c_640-2x.Ya3FAsdu1gQYestm84cSt0tmJ38.jpeg"
                alt="Photo of a Commodore 64C"
                class="a"
        /></picture>
    </body>
</html>

Note that the plugin generated CSS containing the width and aspect-ratio of the image.

←Return to NakedJSX documentation

NakedJSX Plugin - @nakedjsx/plugin-asset-image

Plugin - @nakedjsx/plugin-asset-image