@unpic/angular

ascorbic/unpic-img

Angular directive for responsive, high-performance images. Generates a responsive <img> tag that follows best practices, with the correct srcset, sizes and styles. Detects image URLs from most image CDNs and CMSs and can resize images with no build step.

Installation and usage

npm install @unpic/angular

You can either import the directives individually or add the module.

Using the directives:

import { UnpicImageDirective, UnpicSourceDirective } from "@unpic/angular";

@Component({
  // ...
  standalone: true,
  imports: [UnpicImageDirective, UnpicSourceDirective],
})

Using the module:

// ..
import { UnpicModule } from "@unpic/angular";

@NgModule({
  // ...
  imports: [BrowserModule, UnpicModule],
})

You can then use it by adding the unpic attribute to an <img> tag:

<img
  unpic
  src="https://cdn.shopify.com/static/sample-images/bath_grande_crop_center.jpeg"
  layout="constrained"
  width="800"
  height="600"
  alt="A lovely bath"
/>

You can also use it with <picture> tags. Ensure you have added the Source directive and add the unpic attribute to the <source> and <img> tags. See this guide to learn more about using art direction with Unpic.

<picture class="hero">
  <!-- Large screens get a full-width hero image -->
  <source
    unpic
    src="https://images.unsplash.com/photo-1694406805270-f3a93e91f4b6"
    media="(min-width: 601px)"
    layout="fullWidth"
  />
  <!-- Small screens get a constrained square image -->
  <source
    unpic
    src="https://images.unsplash.com/photo-1693711942336-f4f9963bd364"
    media="(max-width: 600px)"
    width="600"
    height="600"
  />
  <!-- Always include an Image as the final element -->
  <img
    unpic
    src="https://images.unsplash.com/photo-1693711942336-f4f9963bd364"
    width="600"
    height="600"
    alt="Aurora"
    unstyled
  />
</picture>

Image Props

The component accepts all the props of an <img> tag, plus the following:

layout

The resizing behaviour of the image.

  • constrained: (default) the image will be rendered at a maximum of width and height, but will scale down automatically if the container is smaller, maintaining the aspect ratio.
  • fullWidth: the image will be rendered at full width of its container. This is optimized for full-width hero images. You can set height to a fixed value, which will mean the image will be rendered at that fixed height and scale horizontally to fill the container.
  • fixed: the image will be rendered at the exact size specified by width and height

priority

By default, images are loaded lazily. If priority is set to true, the image will be loaded eagerly, and will be given high priority by the browser. This is useful for images that are above the fold, particularly large ones such as hero images.

background

Either an image URL, CSS gradient or CSS colour value. If set to auto, a low-resolution version of the image will be rendered as a background image, with a blurred placeholder effect. This is still loaded from the remote server, so if you can instead provide an inline base64-encoded version of the image or background colour, you should do that instead. Look at @unpic/placeholder for a library that can generate these placeholders.

Bear in mind that this is not removed after the image loads, so it will be visible if the image has transparency.

aspectRatio

Instead of specifying both width and height, you can specify can aspectRatio.

cdn

By default the CDN is auto-detected from the src URL. If you want to override this, you can specify a CDN object. See the unpic for supported values.

breakpoints

By default the image breakpoints used in the srcset are generated based on the layout and image size. You can override this by specifying an array of breakpoints. The breakpoints are specified as an array of numbers, representing the width of the image in pixels.

Other props

Any prop supported by <img> tags can be passed in, except srcset which is generated from src. The following props are set automatically, but can be overridden if you need to:

  • sizes
  • role
  • decoding
  • loading
  • fetchpriority

Source Props

The Source component must be wrapped in a <picture> tag, and accepts the following props:

media

A media query string. If this matches, the source will be used. Normally this would be something like (min-width: 768px), but it can also be used for dark mode detection, e.g. (prefers-color-scheme: dark) or other media queries.

type

The MIME type of the image. This is used to generate the type attribute of the <source> tag, but is also passed to the CDN to generate the correct image type. Normally an image CDN will auto-detect the required image format, but not all support it and in that case you can use this component with type to specify multiple image format options and the browser will choose the best supported one.

Other props

It also accepts the following props that are used in the same way as in the Image component:

  • layout
  • src
  • width
  • height
  • aspectRatio
  • cdn
  • breakpoints