calum/rda-v3
1
0
Fork 0
Code Issues Pull requests 1 Projects Releases Packages Wiki Activity Actions

Improve hero and card image delivery

Browse source
This commit is contained in:
Calum Muir 2025-12-29 13:12:55 +00:00
parent d50b2971e9
commit 957d9143e6
11 changed files with 23 additions and 15 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

BIN
public/Samantha-and-Connolly-480.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 37 KiB

BIN
public/Samantha-and-Connolly-640.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 60 KiB

BIN
public/Samantha-and-Connolly-960.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 114 KiB

BIN
public/about-320.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 19 KiB

BIN
public/about-480.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 34 KiB

BIN
public/contact-320.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 17 KiB

BIN
public/contact-480.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 38 KiB

BIN
public/support-320.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 16 KiB

BIN
public/support-480.webp Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 32 KiB

23
src/layouts/BaseLayout.astro
View file

@ -9,20 +9,23 @@ import {
TWITTER_SITE, TWITTER_SITE,
} from "../config/site"; } from "../config/site";
const { title = "", description, keywords, canonicalPath, ogImage } = const {
Astro.props; title = "",
description,
keywords,
canonicalPath,
ogImage,
} = Astro.props;
const pageTitle = const pageTitle =
title && title !== SITE_NAME ? `${title} | ${SITE_NAME}` : SITE_NAME; title && title !== SITE_NAME ? `${title} | ${SITE_NAME}` : SITE_NAME;
const canonicalUrl = new URL( const canonicalUrl = new URL(
canonicalPath ?? Astro.url.pathname, canonicalPath ?? Astro.url.pathname,
SITE_URL SITE_URL,
).toString(); ).toString();
const ogImagePath = ogImage ?? DEFAULT_OG_IMAGE; const ogImagePath = ogImage ?? DEFAULT_OG_IMAGE;
const ogImageUrl = ogImagePath const ogImageUrl = ogImagePath ? new URL(ogImagePath, SITE_URL).toString() : "";
? new URL(ogImagePath, SITE_URL).toString()
: "";
const hasOgImage = Boolean(ogImagePath); const hasOgImage = Boolean(ogImagePath);
const twitterSite = TWITTER_SITE?.trim(); const twitterSite = TWITTER_SITE?.trim();
--- ---
@ -64,14 +67,12 @@ const twitterSite = TWITTER_SITE?.trim();
<link rel="manifest" href="/site.webmanifest" /> <link rel="manifest" href="/site.webmanifest" />
<link rel="preconnect" href="https://fonts.googleapis.com" /> <link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin /> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="preconnect" href="https://cdn.userway.org" />
<link <link
href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@600;700;800&family=Merriweather:wght@700&display=swap" href="https://fonts.googleapis.com/css2?family=Public+Sans:wght@600;700;800&family=Merriweather:wght@700&display=swap"
rel="stylesheet" rel="stylesheet"
/> />
<slot name="head" /> <slot name="head" />
<script
src="https://cdn.userway.org/widget.js"
data-account="ZdcVJAc6ri"></script>
</head> </head>
<body> <body>
<div <div
@ -100,5 +101,9 @@ const twitterSite = TWITTER_SITE?.trim();
</a> </a>
</div> </div>
<slot /> <slot />
<script
src="https://cdn.userway.org/widget.js"
data-account="ZdcVJAc6ri"
defer></script>
</body> </body>
</html> </html>

15
src/pages/index.astro
View file

@ -17,19 +17,22 @@ const cardData = [
{ {
title: "About Us", title: "About Us",
imageUrl: "/about-640.webp", imageUrl: "/about-640.webp",
imageSrcSet: "/about-640.webp 640w, /about-960.webp 960w", imageSrcSet:
"/about-320.webp 320w, /about-480.webp 480w, /about-640.webp 640w, /about-960.webp 960w",
href: "/about", href: "/about",
}, },
{ {
title: "Support Us", title: "Support Us",
imageUrl: "/support-640.webp", imageUrl: "/support-640.webp",
imageSrcSet: "/support-640.webp 640w, /support-960.webp 960w", imageSrcSet:
"/support-320.webp 320w, /support-480.webp 480w, /support-640.webp 640w, /support-960.webp 960w",
href: "/support-us", href: "/support-us",
}, },
{ {
title: "Contact", title: "Contact",
imageUrl: "/contact-640.webp", imageUrl: "/contact-640.webp",
imageSrcSet: "/contact-640.webp 640w, /contact-960.webp 960w", imageSrcSet:
"/contact-320.webp 320w, /contact-480.webp 480w, /contact-640.webp 640w, /contact-960.webp 960w",
href: "/contact", href: "/contact",
}, },
]; ];
@ -41,7 +44,7 @@ const cardData = [
rel="preload" rel="preload"
as="image" as="image"
href="/Samantha-and-Connolly-1280.webp" href="/Samantha-and-Connolly-1280.webp"
imagesrcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w" imagesrcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
imagesizes="100vw" imagesizes="100vw"
/> />
</Fragment> </Fragment>
@ -57,7 +60,7 @@ const cardData = [
class="absolute inset-0 h-full w-full object-cover" class="absolute inset-0 h-full w-full object-cover"
alt="" alt=""
src="/Samantha-and-Connolly-1280.webp" src="/Samantha-and-Connolly-1280.webp"
srcset="/Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w" srcset="/Samantha-and-Connolly-480.webp 480w, /Samantha-and-Connolly-640.webp 640w, /Samantha-and-Connolly-960.webp 960w, /Samantha-and-Connolly-1280.webp 1280w, /Samantha-and-Connolly-1920.webp 1920w"
sizes="100vw" sizes="100vw"
loading="eager" loading="eager"
fetchpriority="high" fetchpriority="high"
@ -166,7 +169,7 @@ const cardData = [
srcset={ srcset={
card.imageSrcSet card.imageSrcSet
} }
sizes="(min-width: 640px) 33vw, 100vw" sizes="(min-width: 640px) 33vw, 320px"
loading="lazy" loading="lazy"
decoding="async" decoding="async"
/> />