Comments (9)
If you use Next.js, you can also get a better experience by optimizing the pictures in building with the custom image loader.
There is a tool for my own use: https://github.com/zce/zimg
import { ImageLoader } from 'next/image'
const CustomLoader: ImageLoader = ({ src, width, quality }) => {
if (process.env.NODE_ENV !== 'production') return src + '?dev'
// do not optimize svgs and gifs
if (/\.(svg|gif)$/.test(src)) return src + '?uo'
// pre-optimize images with zimg in production build
if (/^\//.test(src)) return src.replace(/\.[a-z]+$/i, `.${width}.webp`)
return `${src}?w=${width}&q=${quality ?? 75}`
}
export default CustomLoader
I do this myself
from velite.
Here comes another idea which use the Velite built-in getImageMetadata and remarkPlugins. It's a fork from @Adriel-M 's work.
from velite.
Got it, @zce!
Velite looks really promising. In case anyone is interested, I finally managed to accomplish this using RSC:
import getImageSize from "image-size";
import { Figure, FigureImage, FigureCaption } from "./components";
const useMDXComponent = (code: string) => {
const fn = new Function(code);
return fn({ ...runtime }).default;
};
interface MdxProps {
code: string;
components?: Record<string, React.ComponentType>;
}
export const MDXContent = async ({ code, components }: MdxProps) => {
const Component = useMDXComponent(code);
return (
<Component
components={{
...components,
img: async ({ src, alt }: { src: string; alt?: string }) => {
const location = path.join(process.cwd(), "public", src);
const { width, height } = getImageSize(location);
return (
<Figure>
<FigureImage
src={src}
alt={alt ?? ""}
width={width}
height={height}
/>
{alt && <FigureCaption>{alt}</FigureCaption>}
</Figure>
);
},
}}
/>
);
};
from velite.
I did something hacky where you embed the info via a rehype plugin: https://github.com/Adriel-M/adriel.dev/blob/main/lib/remarkPlugins/RemarkImgToJsx.ts (originally from https://github.com/timlrx/pliny/blob/main/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)
I also bundled everything in the images
folder https://github.com/Adriel-M/adriel.dev/blob/main/lib/Images.ts#L2 and swap the source to that bundled path: https://github.com/Adriel-M/adriel.dev/blob/main/components/Image.tsx#L7
I did this to actually have the image have a non 0 max age cache-control for nextjs: (https://nextjs.org/docs/app/building-your-application/optimizing/static-assets#caching)
If you're not on nextjs, just the first paragraph seems to be the useful bit. I just came from contentlayer and I'm still exploring the capabilities of velite.
from velite.
Great!
It works with my bundling approach: https://github.com/Adriel-M/adriel.dev/pull/166/files#diff-5acfbc6c5ec1739b3121c7454d949384b38bcbdffa4645a0b002e52521bed26eR3
Using this since cloudflare doesn't have image optimization. Thanks a lot!
Roughly how much time does it add to your builds?
from velite.
Roughly how much time does it add to your builds?
This depends on the number and size of images you need to process, as well as the performance of the host. Here is my performance of a case in Vercel
![image](https://private-user-images.githubusercontent.com/6166576/319437483-921cf17e-cefc-44eb-8288-419ff18fd768.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MjQwMzg2NjEsIm5iZiI6MTcyNDAzODM2MSwicGF0aCI6Ii82MTY2NTc2LzMxOTQzNzQ4My05MjFjZjE3ZS1jZWZjLTQ0ZWItODI4OC00MTlmZjE4ZmQ3NjgucG5nP1gtQW16LUFsZ29yaXRobT1BV1M0LUhNQUMtU0hBMjU2JlgtQW16LUNyZWRlbnRpYWw9QUtJQVZDT0RZTFNBNTNQUUs0WkElMkYyMDI0MDgxOSUyRnVzLWVhc3QtMSUyRnMzJTJGYXdzNF9yZXF1ZXN0JlgtQW16LURhdGU9MjAyNDA4MTlUMDMzMjQxWiZYLUFtei1FeHBpcmVzPTMwMCZYLUFtei1TaWduYXR1cmU9YmFiZmE5OTRiOWFiNjA3OWQyNDZlYTNjN2E5MjE0MzFmZTFmYjVmMjIyMWFhOWEyNmY1ODgwZGE2OTI5NzBlZCZYLUFtei1TaWduZWRIZWFkZXJzPWhvc3QmYWN0b3JfaWQ9MCZrZXlfaWQ9MCZyZXBvX2lkPTAifQ.mF1KRFQqLj2lOYidD0wIcMgBi_GamXdTq1JmnCg4phE)
from velite.
First of all, Velite does not intend to support the dynamic import method, but now there are plans to process the local image metadata referenced in the content.
from velite.
Yes, this is a good idea at the moment, but I still plan to put getting metadata into build to improve runtime efficiency
from velite.
I did something hacky where you embed the info via a rehype plugin: Adriel-M/adriel.dev@
main
/lib/remarkPlugins/RemarkImgToJsx.ts (originally from timlrx/pliny@main
/packages/pliny/src/mdx-plugins/remark-img-to-jsx.ts)
At present, it is a good way to use the remark/rehipe plug-in, but I plan to integrate image metadata into the built-in rehipeCopyLinkedFiles
/ remarkCopyLinkedFiles
plug-in
from velite.
Related Issues (20)
- Unhandled Runtime Error When using remarkCodeHike HOT 4
- Weird Page Freeze when Navigating via Table of Contents Links HOT 1
- Is it possible to use files stored inside github repo? HOT 4
- [feature request] handle contents failing schema validation, or autofixing HOT 8
- Handling relationships HOT 4
- TOC breaking change/broken on latest release HOT 3
- The provided config in #37 resolves warning in dev mode but still present in deployment HOT 1
- Webpack cache warning HOT 2
- Property does not exist on type '{ props: { readonly components?: {} | undefined; }; }' .ts-plugin(2339) HOT 1
- `prepare`, `complete` events access to configuration `output` object HOT 3
- Taxonomy example dev server stops suddenly without error message HOT 1
- Property 'description', 'title', does not exist on type '{ slug: string; } & { slugAsParams: string; }'.ts(2339) HOT 3
- Support for additional metadata in mdx files HOT 2
- Unknown file extension ".css" HOT 9
- Support files with multiple documents (jsonc, yaml) HOT 4
- Schema table of contents cannot read more than 5 headings HOT 1
- Documentation improvement HOT 1
- Bundle MDX example causes "TypeError: Cannot read properties of undefined (reading 'path')" HOT 3
- A Collection defined with `defineCollection` causes a type error when included in `defineConfig`'s `collections`.
- [Feature Request] s.excerpt({ separator: 'preview' }) HOT 4
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from velite.