bmr_bluecap
59caa8e838
- scripts/optimize-images.mjs generates hashed AVIF/WebP variants at build time (sharp) - Picture.astro + rehype plugin serve them via <picture> with srcset/sizes; hero gets fetchpriority=high - footer CTA and active service-nav item meet WCAG AA contrast - homepage Learn More link gets screen-reader-only context - llms.txt: insights described as coming soon
28 lines
977 B
Plaintext
28 lines
977 B
Plaintext
---
|
|
// <img> for a /public image path, upgraded to <picture> with AVIF/WebP srcsets when
|
|
// scripts/optimize-images.mjs has variants for it. The original stays as the <img> fallback.
|
|
// `sizes` should describe the rendered width so phones fetch a phone-sized file.
|
|
import type { HTMLAttributes } from "astro/types";
|
|
import { imageVariants } from "@utils/images.mjs";
|
|
|
|
type Props = Omit<HTMLAttributes<"img">, "src" | "srcset" | "sizes"> & {
|
|
src: string;
|
|
sizes?: string;
|
|
};
|
|
|
|
const { src, sizes = "100vw", width, height, ...attrs } = Astro.props;
|
|
const variants = imageVariants(src);
|
|
---
|
|
|
|
{
|
|
variants ? (
|
|
<picture>
|
|
<source type="image/avif" srcset={variants.avif} sizes={sizes} />
|
|
<source type="image/webp" srcset={variants.webp} sizes={sizes} />
|
|
<img src={src} width={width ?? variants.width} height={height ?? variants.height} decoding="async" {...attrs} />
|
|
</picture>
|
|
) : (
|
|
<img src={src} width={width} height={height} {...attrs} />
|
|
)
|
|
}
|