Skip to content

Commit f48505e

Browse files
stefanskoricdevstefanskoricdev
authored
Feat image optimization (#587)
* feat: Setup image optimization config * fix: image sizes * fix: sizes * feat: Image optimizations for landing page * fix: Service card image styling issue * fix: add 1920 size to image config * fix: set width to logo images * feat: Optimize images on Contact us * feat: Optimize images on blog index and post page * fix: correct typo
1 parent 6fb69cc commit f48505e

File tree

9 files changed

+149
-106
lines changed

9 files changed

+149
-106
lines changed

‎apps/website/astro.config.mjs‎

Lines changed: 16 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -1,31 +1,34 @@
1-
import { defineConfig } from 'astro/config';
2-
import react from '@astrojs/react';
3-
import vercel from '@astrojs/vercel'
4-
import createRemarkPlugin from '@crocoder-dev/remark-plugin';
1+
import { defineConfig } from "astro/config";
2+
import react from "@astrojs/react";
3+
import vercel from "@astrojs/vercel";
4+
import createRemarkPlugin from "@crocoder-dev/remark-plugin";
55
import tailwindcss from "@tailwindcss/vite";
66

77
const classes = {
8-
titleClass: 'font-bold text-[1.25rem] mt-[2.5rem]',
9-
summaryClass: 'cursor-pointer font-bold text-[1.25rem]',
10-
detailsClass: 'mt-[2.5rem]',
11-
iframeClass: 'border-none w-full h-[360px] overflow-y-hidden'
12-
}
8+
titleClass: "font-bold text-[1.25rem] mt-[2.5rem]",
9+
summaryClass: "cursor-pointer font-bold text-[1.25rem]",
10+
detailsClass: "mt-[2.5rem]",
11+
iframeClass: "border-none w-full h-[360px] overflow-y-hidden",
12+
};
1313

1414
const remarkPlugin = createRemarkPlugin(classes);
1515

1616
export default defineConfig({
1717
prefetch: true,
18-
output: 'server',
18+
output: "server",
1919
adapter: vercel({
2020
imageService: true,
21+
imagesConfig: {
22+
sizes: [320, 480, 578, 640, 720, 800, 940, 1920],
23+
formats: ["image/avif", "image/webp"],
24+
},
2125
}),
2226
redirects: {
23-
'/feed': '/rss.xml',
24-
'/sitemap': '/sitemap.xml'
27+
"/feed": "/rss.xml",
28+
"/sitemap": "/sitemap.xml",
2529
},
2630
integrations: [tailwindcss(), react()],
2731
markdown: {
2832
remarkPlugins: [remarkPlugin],
2933
},
3034
});
31-

‎apps/website/src/components/Clients.astro‎

Lines changed: 20 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -10,31 +10,46 @@ import Section from "./Section.astro";
1010
</h4>
1111
<div class="overflow-x-auto whitespace-nowrap px-4 no-scrollbar">
1212
<div class="flex gap-7 justify-center my-8 lg:my-10 min-w-max">
13-
<img src="/conductor.svg" alt="Conductor logo" class="grayscale opacity-50 w-[200px]" />
13+
<img
14+
src="/conductor.svg"
15+
alt="Conductor logo"
16+
class="grayscale opacity-50 w-[200px]"
17+
/>
1418
<img
1519
src="/lynes.svg"
20+
width="200"
1621
alt="Lynes logo"
1722
class="grayscale opacity-50 w-[200px] md:hidden xl:block"
1823
/>
1924
<img
2025
src="/submix.svg"
26+
width="200"
2127
alt="Submix logo"
2228
class="grayscale invert opacity-50 w-[200px]"
2329
/>
24-
<img src="/sevdesk.svg" alt="SevDesk logo" class="grayscale opacity-50 w-[200px]" />
30+
<img
31+
src="/sevdesk.svg"
32+
width="200"
33+
alt="SevDesk logo"
34+
class="grayscale opacity-50 w-[200px]"
35+
/>
2536
<img
2637
src="/misterspex.svg"
38+
width="200"
2739
alt="Misterspex logo"
2840
class="grayscale opacity-50 w-[200px]"
2941
/>
3042
</div>
3143
</div>
3244

33-
<div class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32 md:pb-[138px]">
34-
Our tailored software services bridge the gap between the big-picture strategy
45+
<div
46+
class="text-[#3C3843] md:text-center text-2xl leading-9 md:text-4xl md:leading-[54px] font-medium px-4 md:px-7 xl:px-60 py-[72px] md:pt-32 md:pb-[138px]"
47+
>
48+
Our tailored software services bridge the gap between the big-picture
49+
strategy
3550
<span class="text-[#3C384380]">
3651
and day-to-day operations, turning ambitious goals into concrete,
37-
actionable steps that drive results.
52+
actionable steps that drive results.
3853
</span>
3954
</div>
4055
</Section>

‎apps/website/src/components/ContactUs.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -28,8 +28,8 @@ import peopleCollaborating from "../assets/people-collaborating.png";
2828
<div class="col-span-6 min-xl:col-span-7 hidden lg:block">
2929
<Image
3030
src={peopleCollaborating}
31-
widths={[540, 720, 800]}
32-
sizes="(max-width: 1280px) 540px, 720px"
31+
widths={[640, 720]}
32+
sizes="(max-width: 1280px) 640px, 720px"
3333
alt={contactUsContent.frontmatter.imgAlt}
3434
loading="eager"
3535
/>

‎apps/website/src/components/ServiceCard.astro‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -94,11 +94,11 @@ const image = await src();
9494
class="flex flex-col justify-center items-center row-start-3 lg:justify-start lg:col-span-1 lg:row-start-2"
9595
>
9696
<Image
97-
class="object-cover xl:p-6"
97+
class="object-cover w-full max-lg:max-w-[640px] xl:p-6"
9898
src={image.default}
9999
alt={imgAlt}
100100
widths={[320, 480, 578, 640]}
101-
sizes="(max-width: 1024px) calc(100vw - 56px), calc(50vw - 28px)"
101+
sizes="(max-width: 1024px) calc(100vw - 56px), 640px"
102102
loading="lazy"
103103
/>
104104
</div>

‎apps/website/src/components/ValueCard.astro‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ interface Props {
1616
1717
const { title, content, img, styles, onDark, icon } = Astro.props;
1818
19-
2019
const images = import.meta.glob("../assets/*.*");
2120
const src = images[`../assets${img.path}`] as any as () => Promise<{
2221
default: ImageMetadata;
@@ -29,19 +28,28 @@ const image = await src();
2928
class={`col-span-6 rounded-2xl p-7 md:p-12 md:pb-0 max-md:max-w-[470px] mx-auto xl:p-12 xl:pb-0 pb-0 flex flex-col overflow-hidden lg:h-fit md:col-span-12 xl:col-span-4 ${styles} ${onDark ? "text-[#ffff]" : "text-secondary"}`}
3029
>
3130
<div class="flex gap-7 flex-col md:flex-row xl:flex-col mb-5 xl:mb-[61px]">
32-
<img class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]" src={icon} alt="" role="presentation">
31+
<img
32+
class="h-[72px] w-[72px] xl:h-[90px] xl:w-[90px]"
33+
src={icon}
34+
alt=""
35+
role="presentation"
36+
/>
3337
<div>
34-
<h3 class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7">{title}</h3>
35-
<div class="text-base leading-7 antialiased" set:html={content.html}></div>
38+
<h3
39+
class="font-medium text-[28px] md:text-4xl leading-[30px] md:leading-10 mb-7"
40+
>
41+
{title}
42+
</h3>
43+
<div class="text-base leading-7 antialiased" set:html={content.html} />
3644
</div>
3745
</div>
3846
<div class="flex justify-center">
3947
<Image
4048
class="mt-auto max-w-[466px] w-full"
4149
src={image.default}
4250
alt={img.alt}
43-
widths={[320, 466, 640, 800]}
44-
sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), calc(33vw - 28px)"
51+
widths={[320, 480, 640, 800]}
52+
sizes="(max-width: 768px) calc(100vw - 32px), (max-width: 1280px) calc(100vw - 56px), 320px"
4553
loading="lazy"
4654
/>
4755
</div>

‎apps/website/src/components/hero.astro‎

Lines changed: 23 additions & 21 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,8 @@
22
import { grid_classes } from "./_grid";
33
import Pill from "./Pill.astro";
44
import Section from "./Section.astro";
5-
import { Image } from "astro:assets";
65
import heroImage from "../assets/croco-13.png";
6+
import { Picture } from "astro:assets";
77
---
88

99
<Section className="!py-0 !px-0">
@@ -13,34 +13,35 @@ import heroImage from "../assets/croco-13.png";
1313
<div
1414
class="col-start-3 col-span-4 md:col-start-6 md:col-span-7 xl:col-start-7 xl:col-span-6 rounded-bl-lg"
1515
>
16-
<Image
16+
<Picture
1717
src={heroImage}
1818
alt="CroCoder team collaborating on web development projects"
19-
widths={[320, 480, 640, 800, 1196]}
19+
widths={[320, 480, 578, 640, heroImage.width]}
2020
sizes="(max-width: 540px) calc(67vw - 21px), (max-width: 768px) calc(67vw - 21px), (max-width: 1280px) calc(58vw - 32px), calc(50vw - 28px)"
21+
quality={80}
2122
loading="eager"
2223
fetchpriority="high"
2324
/>
2425
</div>
2526
<div
2627
class="text-white my-auto
27-
col-start-1
28-
col-span-6
29-
row-start-3
30-
md:col-start-1
31-
md:col-span-12
32-
md:row-start-2
33-
xl:row-start-1
34-
xl:col-start-1
35-
xl:col-span-6
36-
p-7
37-
!pt-0
38-
md:p-12
39-
xl:pl-[104px]
40-
mx-0 z-10
41-
xl:pr-0
42-
xl:mt-0
43-
xl:py-24"
28+
col-start-1
29+
col-span-6
30+
row-start-3
31+
md:col-start-1
32+
md:col-span-12
33+
md:row-start-2
34+
xl:row-start-1
35+
xl:col-start-1
36+
xl:col-span-6
37+
p-7
38+
!pt-0
39+
md:p-12
40+
xl:pl-[104px]
41+
mx-0 z-10
42+
xl:pr-0
43+
xl:mt-0
44+
xl:py-24"
4445
>
4546
<div class="w-full pb-2 lg:pb-4 xl:pt-[92px] md:py-0 lg:px-0 z-10">
4647
<Pill className="max-md:text-sm">More than just developers</Pill>
@@ -65,7 +66,8 @@ import heroImage from "../assets/croco-13.png";
6566
class="fadeInUp"
6667
style="animation-delay: 900ms;animation-fill-mode: backwards;"
6768
>
68-
A web development consultancy delivering scalable solutions that drive real business impact.
69+
A web development consultancy delivering scalable solutions that drive
70+
real business impact.
6971
</span>
7072
</div>
7173
<div class="flex flex-col sm:flex-row gap-[10px]">

‎apps/website/src/layouts/post-base.astro‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,8 @@ const dateObj = new Date(createdAt);
7171
src={image}
7272
height={500}
7373
width={1000}
74+
widths={[320, 480, 578, 640, 800, 920]}
75+
sizes={"(max-width: 1024px): calc(100vw-64px), 940px"}
7476
alt={title}
7577
class="rounded-lg"
7678
loading="eager"

‎apps/website/src/pages/blog/index.astro‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -67,6 +67,12 @@ posts.sort((a, b) => b.createdAt.getTime() - a.createdAt.getTime());
6767
alt={title}
6868
width={936}
6969
height={528}
70+
widths={[320, 480, 578, 640, 800]}
71+
sizes={
72+
i > 0
73+
? "(max-width: 540px) 100vw, (max-width: 1024px) calc(50vw - 64px), 480px"
74+
: "(max-width: 1024px) calc(100vw - 64px), 940px"
75+
}
7076
loading={i < 3 ? "eager" : "lazy"}
7177
decoding="auto"
7278
/>

‎apps/website/src/pages/contact/success.astro‎

Lines changed: 64 additions & 57 deletions
Original file line numberDiff line numberDiff line change
@@ -11,68 +11,75 @@ import contactSuccessHero from "../../assets/contact-success-hero.png";
1111
<main class="min-h-screen bg-gray-100">
1212
<div class="w-full h-screen flex items-center justify-center">
1313
<Section className="!py-0 !px-7 flex items-center justify-center w-full">
14-
<div class="max-w-[1440px] w-full flex flex-col lg:flex-row items-center justify-center gap-7">
15-
<!-- Content Column -->
16-
<div class="w-full max-w-[501px] flex flex-col gap-7 text-center lg:text-left">
17-
<!-- Main Content -->
18-
<div class="flex flex-col gap-7">
19-
<!-- Header -->
20-
<div class="flex flex-col gap-4">
21-
<h1 class="font-medium text-4xl md:text-[54px] leading-[1.1] text-secondary">
22-
You're All Set!
23-
</h1>
24-
</div>
25-
26-
<!-- Description -->
27-
<p class="text-lg md:text-[22px] leading-[1.45] text-secondary">
28-
<span id="meeting-confirmation">
29-
Your meeting is confirmed.<br>
30-
A calendar invite is on its way to your inbox.<br>
31-
</span>
32-
Talk soon — we're looking forward to it.
33-
</p>
34-
35-
<!-- Button -->
36-
<div class="flex flex-col gap-[10px]">
37-
<a
38-
href="/"
39-
class="flex items-center justify-center gap-[10px] px-[25px] py-4 bg-crocoder-yellow rounded-md font-medium text-base leading-[1.8] tracking-[0.02em] uppercase text-contrast hover:opacity-90 w-fit mx-auto lg:mx-0"
40-
>
41-
Back to homepage
42-
</a>
14+
<div
15+
class="max-w-[1440px] w-full flex flex-col lg:flex-row items-center justify-center gap-7"
16+
>
17+
<!-- Content Column -->
18+
<div
19+
class="w-full max-w-[501px] flex flex-col gap-7 text-center lg:text-left"
20+
>
21+
<!-- Main Content -->
22+
<div class="flex flex-col gap-7">
23+
<!-- Header -->
24+
<div class="flex flex-col gap-4">
25+
<h1
26+
class="font-medium text-4xl md:text-[54px] leading-[1.1] text-secondary"
27+
>
28+
You're All Set!
29+
</h1>
30+
</div>
31+
32+
<!-- Description -->
33+
<p class="text-lg md:text-[22px] leading-[1.45] text-secondary">
34+
<span id="meeting-confirmation">
35+
Your meeting is confirmed.<br />
36+
A calendar invite is on its way to your inbox.<br />
37+
</span>
38+
Talk soon — we're looking forward to it.
39+
</p>
40+
41+
<!-- Button -->
42+
<div class="flex flex-col gap-[10px]">
43+
<a
44+
href="/"
45+
class="flex items-center justify-center gap-[10px] px-[25px] py-4 bg-crocoder-yellow rounded-md font-medium text-base leading-[1.8] tracking-[0.02em] uppercase text-contrast hover:opacity-90 w-fit mx-auto lg:mx-0"
46+
>
47+
Back to homepage
48+
</a>
49+
</div>
4350
</div>
4451
</div>
45-
</div>
46-
47-
<!-- Image Container -->
48-
<div class="hidden md:flex w-full max-w-[706px] items-center justify-center">
49-
<div class="w-full h-[529px] flex items-center justify-center">
50-
<Image
51-
src={contactSuccessHero}
52-
alt="Success illustration"
53-
class="w-full h-full object-contain"
54-
loading="eager"
55-
fetchpriority="high"
56-
width={1652}
57-
height={939}
58-
widths={[320, 480, 640, 800, 1200]}
59-
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 706px"
60-
/>
52+
53+
<!-- Image Container -->
54+
<div
55+
class="hidden md:flex w-full max-w-[706px] items-center justify-center"
56+
>
57+
<div class="w-full h-[529px] flex items-center justify-center">
58+
<Image
59+
src={contactSuccessHero}
60+
alt="Success illustration"
61+
class="w-full h-full object-contain max-w-[640px]"
62+
loading="eager"
63+
fetchpriority="high"
64+
widths={[640, 720]}
65+
sizes="(max-width: 1024px) 720px, calc(50vw-56px)"
66+
/>
67+
</div>
6168
</div>
6269
</div>
6370
</Section>
6471
</div>
6572
</main>
66-
</Base>
6773

68-
<script is:inline>
69-
// Check if the page was accessed from Calcom
70-
const urlParams = new URLSearchParams(window.location.search);
71-
const src = urlParams.get('src');
72-
const meetingConfirmation = document.getElementById('meeting-confirmation');
73-
74-
if (src !== 'calcom' && meetingConfirmation) {
75-
// Hide only the meeting-specific text if not from Calcom
76-
meetingConfirmation.style.display = 'none';
77-
}
78-
</script>
74+
<script is:inline>
75+
// Check if the page was accessed from Calcom
76+
const urlParams = new URLSearchParams(window.location.search);
77+
const src = urlParams.get("src");
78+
const meetingConfirmation = document.getElementById("meeting-confirmation");
79+
80+
if (src !== "calcom" && meetingConfirmation) {
81+
// Hide only the meeting-specific text if not from Calcom
82+
meetingConfirmation.style.display = "none";
83+
}
84+
</script></Base
85+
>

0 commit comments

Comments
 (0)