Images

4/11/2024

Images is the official images integration for the Thulite web framework.

Features

• Render hook for Markdown images
• Shortcodes for picture, img, and figure elements
• 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 defaults locally
• Automatic sizes attribute calculation
• Show your images with a blurred-up LQIP

Sensible defaults

Images comes with sensible defaults, but you can customize them in your params.toml file.

# Images (@thulite/images)
[thulite_images]
  [thulite_images.defaults]
    decoding = "async" # sync, async, or auto (default)
    fetchpriority = "auto" # high, low, or auto (default)
    loading = "lazy" # eager or lazy (default)
    widths = [480, 576, 768, 1025, 1200, 1440] # [640, 768, 1024, 1366, 1600, 1920] for example
    sizes = "auto" # 100vw (default), 75vw, or auto for example
    process = "" # "fill 1600x900" or "fill 2100x900" for example
    lqip = "16x webp q20" # "16x webp q20" or "21x webp q20" for example

Configurable

Images is highly configurable. You can set defaults for all images, override them locally, and use the process parameter your images need.

Full documentation

Step-by-step instructions to get started with Images can be found in the documentation.