emdash-plugin-modern-images

EmDash 미디어 이미지에 대해 반응형 WebP/AVIF 제공을 `` 컴포넌트로 추가하며, 필요 시 Sharp 변환, 디스크 캐싱, LCP 프리로드 지원을 제공합니다.

빠른 시작

CLI는 src/middleware.ts를 생성하고 플러그인을 등록하기 위한 설정 스니펫을 출력합니다.

수동 설정

1. 플러그인 등록

astro.config.mjs에 추가합니다:

플러그인 등록은 관리자 설정 페이지를 추가합니다. 최적화된 이미지 제공은 3단계에서 Astro 미들웨어가 처리합니다.

2. 템플릿에서 `` 사용

이 컴포넌트는 AVIF 및 WebP 소스를 가진 ``를 렌더링합니다. 브라우저는 최적의 포맷을 선택합니다. 원본 이미지는 대체(fallback)입니다. 너비는 16-2400, 품질은 30-95로 제한되며, 미디어 저장 키는 생성된 URL에서 사용되기 전에 URL 인코딩됩니다.

3. 최적화된 제공 활성화

src/middleware.ts를 생성합니다:

이것은 /_emdash/api/media/file/...?format=...&w=...&q=... 요청을 가로채어 캐시된 WebP/AVIF/JPEG 변형을 제공합니다. 캐시가 없을 경우 원본 이미지를 Sharp로 변환하고 기본적으로 UPLOADS_DIR 내부의 .cache/images에 결과를 저장합니다.

이미 미들웨어가 있다면, 다음과 같이 조합합니다:

Props

Prop	Type	Default	Description
image	{ id?, src?, alt?, meta? }	필수	EmDash 이미지 필드. URL에는 meta.storageKey 또는 id를 사용하며, 없을 경우 src에서 추출합니다.
widths	number[]	[480, 640, 960, 1200]	srcset용 반응형 너비
sizes	string	"10

---

🌐 본 텍스트는 빠른 이해를 돕기 위한 요약 번역본입니다. 정확한 기술 정보 및 전체 코드는 GitHub 원문에서 확인하실 수 있습니다.