Allow configuring the size and quality of the lqip

Author: Legend-Master

README.md

@@ -2,8 +2,6 @@
 
 A docuaurus plugin for pre-processing images to multiple formats, sizes and low quality image placeholders, replacing [ideal-image](https://docusaurus.io/docs/api/plugins/@docusaurus/plugin-ideal-image)
 
-> Note: this is still working in progress
-
 ## Usage
 
 First install

src/index.ts

@@ -1,6 +1,6 @@
 import path from 'node:path'
 import type { LoadContext, Plugin, OptionValidationContext } from '@docusaurus/types'
-import type { LoaderOptions, Preset, SupportedOutputTypes } from './loader.js'
+import type { LoaderOptions, LqipFormat, Preset } from './loader.js'
 // import { Compilation, Compiler, NormalModule, type LoaderContext } from 'webpack'
 // import { fileURLToPath } from 'node:url'
 
@@ -13,6 +13,7 @@ export type {
 	OutputDataForFormat,
 	LoaderOptions,
 	Preset,
+	LqipFormat,
 } from './loader.js'
 
 export type NativeIdealImageOptions = Partial<{
@@ -27,7 +28,7 @@ export type NativeIdealImageOptions = Partial<{
 	/**
 	 * Low quality image placeholder format
 	 */
-	lqipFormat: SupportedOutputTypes
+	lqipFormat: LqipFormat
 	/**
 	 * Disable in dev mode for faster compile time
 	 */

src/loader.ts

@@ -23,6 +23,16 @@ export type Preset = {
 	lqip?: boolean
 }
 
+export type LqipFormat =
+	| SupportedOutputTypes
+	| {
+			format: SupportedOutputTypes
+			/** The image size to use, default to 16px */
+			size?: number
+			/** Encoding quality, default to 20 (1-100) */
+			quality?: number
+	  }
+
 export type LoaderOptions = {
 	/**
 	 * File name template for output files
@@ -35,7 +45,7 @@ export type LoaderOptions = {
 	/**
 	 * Low quality image placeholder format
 	 */
-	lqipFormat: SupportedOutputTypes
+	lqipFormat: LqipFormat
 	/**
 	 * Should disable the loader
 	 */
@@ -221,19 +231,24 @@ function emitFile(
 	return '__webpack_public_path__' + path
 }
 
-async function toBase64Lqip(image: sharp.Sharp, imageType: SupportedOutputTypes) {
-	const mimeType = MIMES[imageType]
-	const resized = image.resize(16)
+async function toBase64Lqip(image: sharp.Sharp, format: LqipFormat) {
+	const settings = typeof format === 'string' ? { format } : format
+	const mimeType = MIMES[settings.format]
+	const resized = image.resize(settings.size ?? 16)
 	let output: sharp.Sharp
 	switch (mimeType) {
 		case 'image/jpeg':
-			output = resized.jpeg({ quality: 20 })
+			output = resized.jpeg({ quality: settings.quality ?? 20 })
 			break
 		case 'image/webp':
-			output = resized.webp({ quality: 20, alphaQuality: 20, smartSubsample: true })
+			output = resized.webp({
+				quality: settings.quality ?? 20,
+				alphaQuality: settings.quality ?? 20,
+				smartSubsample: true,
+			})
 			break
 		case 'image/avif':
-			output = resized.avif({ quality: 20 })
+			output = resized.avif({ quality: settings.quality ?? 20 })
 			break
 	}
 	const data = await output.toBuffer()