apunkt/SurfSense
1
0
Fork 0
mirror of https://github.com/MODSetter/SurfSense.git synced 2026-04-25 00:36:31 +02:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

perf(images): add sizes prop to improve Next.js image loading

Browse source
This commit is contained in:
ArvinFarrelP 2026-04-03 22:11:21 +07:00
parent fb20b0444f
commit bb84bb25a3
No known key found for this signature in database
GPG key ID: 8C0AE50DA45372A9
3 changed files with 4 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

1
surfsense_web/components/homepage/features-bento-grid.tsx
View file

@ -408,6 +408,7 @@ const AudioCommentIllustration = () => (
src="/homepage/comments-audio.webp"
alt="Audio Comment Illustration"
fill
sizes="(max-width: 768px) 100vw, (max-width: 1024px) 50vw, 33vw"
className="object-cover"
/>
</div>

1
surfsense_web/components/tool-ui/image/index.tsx
View file

@ -307,6 +307,7 @@ export function Image({
src={src}
alt={alt}
fill
sizes="(max-width: 512px) 100vw, 512px"
className={cn(
"transition-transform duration-300",
fit === "cover" ? "object-cover" : "object-contain",

3
surfsense_web/mdx-components.tsx
View file

@ -15,8 +15,9 @@ export function getMDXComponents(components?: MDXComponents): MDXComponents {
img: ({ className, alt, ...props }: React.ComponentProps<"img">) => (
<Image
{...(props as ImageProps)}
className={cn("rounded-md border", className)}
alt={alt ?? ""}
sizes="(max-width: 768px) 100vw, 896px"
className={cn("rounded-md border", className)}
/>
),
Video: ({ className, ...props }: React.ComponentProps<"video">) => (