-
Notifications
You must be signed in to change notification settings - Fork 45
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* image optimization * prioritize images * png to webp, and properly size images * image paths * further optimization * cleanup + prefetch links * redeploy * dynamically serve images with different sizes * moved assets to public folder * automatically generate image sizes
- Loading branch information
1 parent
ddfde4d
commit ba613ee
Showing
16 changed files
with
212 additions
and
27 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -32,4 +32,6 @@ package-lock.json | |
| test-results | ||
|
|
||
| .yalc | ||
| yalc.lock | ||
| yalc.lock | ||
|
|
||
| public/assets | ||
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,58 @@ | ||
| import sharp from "sharp" | ||
| import path from "path" | ||
| import fs from "fs" | ||
|
|
||
| const WIDTHS = [400, 600, 800, 1000, 1200, 1600, 2000] | ||
| const INPUT_DIR = "src/assets/originals" | ||
| const OUTPUT_DIR = "public/assets" | ||
|
|
||
| async function generateImageSizes() { | ||
| console.log("one") | ||
| if (!fs.existsSync(INPUT_DIR)) { | ||
| fs.mkdirSync(INPUT_DIR, { recursive: true }) | ||
| } | ||
| if (!fs.existsSync(OUTPUT_DIR)) { | ||
| fs.mkdirSync(OUTPUT_DIR, { recursive: true }) | ||
| } | ||
|
|
||
| const files = fs.readdirSync(INPUT_DIR) | ||
|
|
||
| for (const file of files) { | ||
| if (file.startsWith(".")) continue | ||
|
|
||
| const filePath = path.join(INPUT_DIR, file) | ||
| const fileNameWithoutExt = path.parse(file).name | ||
| const outputDirForFile = path.join(OUTPUT_DIR) | ||
|
|
||
| if (!fs.existsSync(outputDirForFile)) { | ||
| fs.mkdirSync(outputDirForFile, { recursive: true }) | ||
| } | ||
|
|
||
| for (const width of WIDTHS) { | ||
| const extension = path.extname(file) | ||
| const outputPath = path.join( | ||
| outputDirForFile, | ||
| `${fileNameWithoutExt}-${width}w${extension}`, | ||
| ) | ||
|
|
||
| try { | ||
| await sharp(filePath) | ||
| .resize(width, null, { | ||
| withoutEnlargement: true, | ||
| fit: "inside", | ||
| }) | ||
| .webp({ | ||
| quality: 80, | ||
| effort: 6, | ||
| }) | ||
| .toFile(outputPath) | ||
|
|
||
| console.log(`Generated ${outputPath}`) | ||
| } catch (error) { | ||
| console.error(`Error processing ${filePath} at width ${width}:`, error) | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| generateImageSizes().catch(console.error) |
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| import { useState, useEffect } from "react" | ||
|
|
||
| /** | ||
| * OptimizedImage component for responsive images with automatic srcset generation | ||
| * | ||
| * This component automatically generates srcset attributes for responsive images. | ||
| * Place your original high-resolution images in src/assets/originals/. | ||
| * The build process will automatically generate all required sizes. | ||
| * | ||
| * Example usage: | ||
| * <OptimizedImage | ||
| * src="/assets/example.jpg" | ||
| * alt="Example" | ||
| * /> | ||
| * | ||
| * The build process will generate: | ||
| * /assets/ | ||
| * example-400w.jpg | ||
| * example-600w.jpg | ||
| * example-800w.jpg | ||
| * example-1000w.jpg | ||
| * example-1200w.jpg | ||
| * example-1600w.jpg | ||
| * example-2000w.jpg | ||
| */ | ||
| interface OptimizedImageProps | ||
| extends React.ImgHTMLAttributes<HTMLImageElement> { | ||
| src: string | ||
| alt: string | ||
| priority?: boolean | ||
| } | ||
|
|
||
| const getImageSizes = (src: string) => { | ||
| if (src.endsWith(".svg")) return { srcSet: src, sizes: "100vw" } | ||
|
|
||
| const widths = [400, 600, 800, 1000, 1200, 1600, 2000] | ||
| const basePath = src.substring(0, src.lastIndexOf(".")) | ||
| const extension = src.substring(src.lastIndexOf(".")) | ||
| const srcSet = widths | ||
| .map((w) => `${basePath}-${w}w${extension} ${w}w`) | ||
| .join(", ") | ||
|
|
||
| const sizes = | ||
| "(max-width: 400px) 400px, (max-width: 600px) 600px, (max-width: 800px) 800px, (max-width: 1000px) 1000px, (max-width: 1200px) 1200px, (max-width: 1600px) 1600px, 2000px" | ||
|
|
||
| return { srcSet, sizes } | ||
| } | ||
|
|
||
| export function OptimizedImage({ | ||
| src, | ||
| alt, | ||
| className, | ||
| priority = false, | ||
| ...props | ||
| }: OptimizedImageProps) { | ||
| const [imageLoading, setImageLoading] = useState(true) | ||
| const { srcSet, sizes } = getImageSizes(src) | ||
|
|
||
| useEffect(() => { | ||
| if (priority) { | ||
| const link = document.createElement("link") | ||
| link.rel = "preload" | ||
| link.as = "image" | ||
| link.href = src | ||
| link.type = src.endsWith(".svg") ? "image/svg+xml" : "image/webp" | ||
| link.imageSrcset = srcSet | ||
| link.imageSizes = sizes | ||
| document.head.appendChild(link) | ||
|
|
||
| return () => { | ||
| document.head.removeChild(link) | ||
| } | ||
| } | ||
| }, [src, priority, srcSet, sizes]) | ||
|
|
||
| return ( | ||
| <img | ||
| src={src} | ||
| srcSet={srcSet} | ||
| sizes={sizes} | ||
| alt={alt} | ||
| loading={priority ? "eager" : "lazy"} | ||
| decoding={priority ? "sync" : "async"} | ||
| fetchPriority={priority ? "high" : "auto"} | ||
| className={`${className} ${ | ||
| imageLoading ? "animate-pulse bg-gray-200" : "" | ||
| } w-full h-auto object-contain`} | ||
| onLoad={() => setImageLoading(false)} | ||
| onError={(e) => { | ||
| console.error("Image failed to load:", e) | ||
| setImageLoading(false) | ||
| }} | ||
| {...props} | ||
| /> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters