Better image support

[h-enk]

Summary

• Supports remote images + local images in page bundle or./assets directory
• Supported types: png, jpeg/jpg, tif/tiff, bmp, gif, and webp
• All images are responsive + converted to webp per default
• Supports data:image... in src intead of a URL

Usage

Markdown

![Alt tag](image003.png "Optional title tag")

Shortcode

{{< figure src="screenshot.png" alt="Screenshot of a web page with an aqua theme" caption="For a figure caption can be different than alt text" >}}

Examples

https://deploy-preview-809--doks.netlify.app/blog/say-hello-to-doks/

Basic example

![Image](security-as-code-startup-jit-comes-out-of-stealth-with-38-5m-in-seed-funding.jpg)

will be processed into:

<img class="img-fluid lazyload blur-up" srcset="[/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_38897bd0d9a3988a24a9ccdde0afca0d.webp 480w](http://localhost:1313/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_38897bd0d9a3988a24a9ccdde0afca0d.webp),[ /blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_d13052875c7eb5b874f9c5c970aaba79.webp 720w](http://localhost:1313/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_d13052875c7eb5b874f9c5c970aaba79.webp),[ /blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_be2d94ebf75c470dcaa8f182995e567a.webp 1080w](http://localhost:1313/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_be2d94ebf75c470dcaa8f182995e567a.webp),[ /blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_b519fb73ea333899f8665fcd6aed0139.webp 1280w](http://localhost:1313/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_b519fb73ea333899f8665fcd6aed0139.webp),[ /blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_c459db13c3f8afce1c857ff5f521a188.webp 1390w](http://localhost:1313/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_c459db13c3f8afce1c857ff5f521a188.webp)" sizes="80vw" src="[/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_c459db13c3f8afce1c857ff5f521a188.webp](http://localhost:1313/blog/say-hello-to-doks/_hu53d443cfcf590c1124a0d117c87e819c_443313_c459db13c3f8afce1c857ff5f521a188.webp)" alt="Image" width="1390" height="781">

Motivation

#759 + #634 + #502 + #800

Checks

• Read Create a Pull Request
• Supports all screen sizes (if relevant)
• Supports both light and dark mode (if relevant)
• Passes npm run test

Credits

Based on DFD Hugo image handling module by Daniel F. Dickinson

Implementation

The image functionality is made available as npm package @hyas/images

TODO

Part of h-enk/hyas-images:

• Add LQIP support
• Add imageConvertMethod as an option — think [ Fit | GrowFit | Fill | Resize ]