Image

Luminary HBS version of NextJs/Image or GatsbyImage. A component for showing images on the site, with ratio, alignment, responsive image art direction options, and performance / SEO enhancements baked in.

How to use

Examples

Drop and image component in with a width and height. That's it. Give it an aspect ratio if it's being used a section.

Aspect ratio examples

srcSet Example

Art direct different images and formats for different breakpoints.

Alignment options

NOTE: Alignments can depend on the set ratio, and the inherit ratio of the image. I.e. Because we use object-fit: cover if you place a 16:9 image in a 1:1 ratio, the image height will cover to match the ratio. Therefore the vertical alignments won't work but the horizontal will. Vice versa if a 16:1 ratio gets a 1:1 image, the image width will cover to match the ratio. Vertical alignments will work, but horizontal alignments won't. Examples below.