Images 3.1

February 2, 2024

Images 3.1

Henk Verlinde Henk Verlinde — Product, Integrations


Images 3.1 is out — new shortcodes and partials, an improved image render hook, and a new documentation website.

Images now has a new code base, making it more robust, flexible, and easy to use.

Highlights

  • Improved image render hook for Markdown images.
  • New shortcodes and partials for picture, img, and figure elements.
  • Store your images as a page resource, global resource, or remote resource.
  • Set defaults for loading, decoding, fetchpriority, and more — override locally.
  • Use the automatic sizes attribute calculation 🚀
  • Show your images with a blurred-up LQIP 🌟
  • New documentation website.

Get started

To take advantage of the latest features, make sure you’re running the latest version of Images and have set the new parameters. You can upgrade to Images 3.1 by running the following command for your package manager of choice:

Shortcodes and partials

You can add images to your html pages by using the the img, picture, or figure partial. The shortcodes are wrappers for the partials. Add images to your .md pages by using the img, picture, or figure shortcode — for example:

{{< img
  process="fill 1600x900"
  src="images/my-image.jpg"
  alt="My super image in multiple formats!"
>}}

The above code will generate the following HTML, and allow the browser to determine the best image to display:

<img
  srcset="..."
  data-srcset="..."
  data-sizes="auto"
  src="..."
  width="1600"
  height="900"
  decoding="async"
  fetchpriority="auto"
  loading="lazy"
  alt="My super image in multiple formats!"
  class="blur-up lazyautosizes ls-is-cached lazyloaded"
  sizes="628px"
>

Image render hook

You can add images to your .md pages by using the Markdown syntax for images.

![A starry night sky](images/stars.jpg)

The Markdown above get rendered into the following HTML:

<img
  src="/images/stars_hu5459c0360c2b0cb7a147d2df0eb350ca_80218_1920x1280_resize_q85_h2_lanczos.webp"
  width="410"
  height="274"
  decoding="async"
  fetchpriority="auto"
  loading="lazy"
  alt="A starry night sky"
  id="h-rh-i-1"
>

Documentation website

To better explain the possibilities of Images, we launched a new documentation website: images.gethyas.com.

Screenshot homepage images.gethyas.com

The new website contains handy how-to-guides and reference guides.

Acknowledgements

This release wouldn’t have been possible without the effort of the amazing open source community. Thank you, everyone.


Images, Hugo, npm