ipx 4.0.0-beta.1 → 4.0.0

package/README.md

@@ -15,10 +15,8 @@ Point IPX at a directory or a list of allowed domains, and every image is availa
 /w_512,f_webp/photos/buffalo.png
 ```
 
-Used by [Nuxt Image](https://image.nuxt.com/) and [Netlify](https://www.npmjs.com/package/@netlify/ipx) and open to everyone!
-
 > [!NOTE]
-> This is the active development branch for IPX v4. Check out [v3](https://github.com/unjs/ipx/tree/v3) for v3 docs, and [Migration from v3 to v4](#migration-from-v3-to-v4) if you are upgrading.
+> This is the active development branch for IPX v4. Check out [v3](https://github.com/unjs/ipx/tree/v3) for v3 docs, and release notes ([alpha](https://github.com/unjs/ipx/releases/tag/v4.0.0-alpha.1), [beta](https://github.com/unjs/ipx/releases/tag/v4.0.0-beta.1)) if you are upgrading.
 
 ## Quick Start
 
@@ -68,318 +66,318 @@ Colours (`background`, `tint`) accept any colour sharp understands: hex (`f00`,
 
 <table>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/width.jpg" alt="/w_160/sample.jpg"></div>
-<div align="center"><b><code>width</code> / <code>w</code></b></div>
-<code>/w_160/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/width.jpg?v=db01a531" width="160" alt="/w_160/scene.jpg"></div>
+<div><b><code>width</code> / <code>w</code></b></div>
+<code>/w_160/scene.jpg</code>
 <br>
-Positive integer. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
+Resize to a width in pixels, a positive integer. The height follows the aspect ratio. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/height.jpg" alt="/h_120/sample.jpg"></div>
-<div align="center"><b><code>height</code> / <code>h</code></b></div>
-<code>/h_120/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/height.jpg?v=ee67aac0" width="180" alt="/h_120/scene.jpg"></div>
+<div><b><code>height</code> / <code>h</code></b></div>
+<code>/h_120/scene.jpg</code>
 <br>
-Positive integer. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
+Resize to a height in pixels, a positive integer. The width follows the aspect ratio. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/resize.jpg" alt="/s_200x200/sample.jpg"></div>
-<div align="center"><b><code>resize</code> / <code>s</code></b></div>
-<code>/s_200x200/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/resize.jpg?v=99dda472" width="200" alt="/s_200x200/scene.jpg"></div>
+<div><b><code>resize</code> / <code>s</code></b></div>
+<code>/s_200x200/scene.jpg</code>
 <br>
-<code>{width}x{height}</code> of positive integers. A single value (<code>s_200</code>) is a square. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
+Resize to <code>{width}x{height}</code>, both positive integers. A single value (<code>s_200</code>) is a square. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/kernel.jpg" alt="/s_80x80,kernel_nearest/sample.jpg"></div>
-<div align="center"><b><code>kernel</code></b></div>
-<code>/s_80x80,kernel_nearest/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/kernel.jpg?v=96e57f6e" width="80" alt="/s_80x80,kernel_nearest/photo.jpg"></div>
+<div><b><code>kernel</code></b></div>
+<code>/s_80x80,kernel_nearest/photo.jpg</code>
 <br>
 Sets <code>kernel</code> option for <code>resize</code>. One of <code>nearest</code>, <code>linear</code>, <code>cubic</code>, <code>mitchell</code>, <code>lanczos2</code>, <code>lanczos3</code> (default), <code>mks2013</code> or <code>mks2021</code>. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/fit.jpg" alt="/s_200x200,fit_contain,b_00ff00/sample.jpg"></div>
-<div align="center"><b><code>fit</code></b></div>
-<code>/s_200x200,fit_contain,b_00ff00/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/fit.jpg?v=08b8660c" width="300" alt="/s_300x150,fit_contain,b_00ff00/scene.jpg"></div>
+<div><b><code>fit</code></b></div>
+<code>/s_300x150,fit_contain,b_00ff00/scene.jpg</code>
 <br>
 Sets <code>fit</code> option for <code>resize</code>. One of <code>contain</code>, <code>cover</code> (default), <code>fill</code>, <code>inside</code> or <code>outside</code>. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/position.jpg" alt="/s_200x200,pos_top/sample.jpg"></div>
-<div align="center"><b><code>position</code> / <code>pos</code></b></div>
-<code>/s_200x200,pos_top/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/position.jpg?v=187fe5e7" width="107" alt="/s_150x300,pos_top/scene.jpg"></div>
+<div><b><code>position</code> / <code>pos</code></b></div>
+<code>/s_150x300,pos_top/scene.jpg</code>
 <br>
-Sets <code>position</code> option for <code>resize</code>. A position (<code>top</code>, <code>right top</code>, <code>right</code>, <code>right bottom</code>, <code>bottom</code>, <code>left bottom</code>, <code>left</code>, <code>left top</code>), gravity (<code>north</code>, <code>northeast</code>, ..., <code>center</code>) or strategy (<code>entropy</code>, <code>attention</code>). Since <code>_</code> separates arguments, multi-word values use <code>-</code> (<code>pos_right-top</code>). The numeric gravity (<code>0</code>-<code>8</code>) and strategy (<code>16</code>-<code>17</code>) constants are also accepted. (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
+Sets <code>position</code> option for <code>resize</code>. A position (<code>top</code>, <code>right top</code>, ..., <code>left top</code>), gravity (<code>north</code>, <code>northeast</code>, ..., <code>center</code>) or strategy (<code>entropy</code>, <code>attention</code>), also accepted as their numeric constants. Since <code>_</code> separates arguments, multi-word values use <code>-</code> (<code>pos_right-top</code>). (<a href="https://sharp.pixelplumbing.com/api-resize#resize">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/extend.jpg" alt="/extend_20_40_20_40_mirror/sample.jpg"></div>
-<div align="center"><b><code>extend</code></b></div>
-<code>/extend_20_40_20_40_mirror/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/extend.jpg?v=0dfb2098" width="320" alt="/extend_20_40_20_40_mirror/scene.jpg"></div>
+<div><b><code>extend</code></b></div>
+<code>/extend_20_40_20_40_mirror/scene.jpg</code>
 <br>
-Extend / pad / extrude one or more edges of the image. Format: <code>extend_{top}_{right}_{bottom}_{left}_{extendWith}</code>. Edges are integers between <code>0</code> and <code>10000</code>. Optional <code>extendWith</code>: <code>background</code> (default), <code>copy</code>, <code>repeat</code> or <code>mirror</code>. When extending with <code>background</code>, the colour comes from the <code>background</code> / <code>b</code> modifier, e.g. <code>b_00ff00,extend_20_40_20_40</code>. (<a href="https://sharp.pixelplumbing.com/api-resize#extend">docs</a>)
+Pad or extrude the edges, as <code>extend_{top}_{right}_{bottom}_{left}</code> with an optional <code>{extendWith}</code>. Edges are integers between <code>0</code> and <code>10000</code>. <code>extendWith</code> is <code>background</code> (default), <code>copy</code>, <code>repeat</code> or <code>mirror</code>; <code>background</code> takes its colour from the <code>background</code> / <code>b</code> modifier. (<a href="https://sharp.pixelplumbing.com/api-resize#extend">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/background.jpg" alt="/rotate_45,b_00ff00/sample.jpg"></div>
-<div align="center"><b><code>background</code> / <code>b</code></b></div>
-<code>/rotate_45,b_00ff00/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/background.jpg?v=6b197635" width="320" alt="/rotate_45,b_00ff00/scene.jpg"></div>
+<div><b><code>background</code> / <code>b</code></b></div>
+<code>/rotate_45,b_00ff00/scene.jpg</code>
 <br>
-Background colour used by <code>extend</code>, <code>rotate</code>, <code>flatten</code>, <code>opacity</code> and <code>resize</code> (with <code>fit_contain</code>).
+Background colour, a hex (<code>f00</code>, <code>ff0000</code>) or named (<code>red</code>) colour. Used by <code>extend</code>, <code>rotate</code>, <code>flatten</code>, <code>opacity</code> and <code>resize</code> (with <code>fit_contain</code>).
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/extract.jpg" alt="/extract_60_20_180_140/sample.jpg"></div>
-<div align="center"><b><code>extract</code> / <code>crop</code></b></div>
-<code>/extract_60_20_180_140/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/extract.jpg?v=ac75bdaa" width="160" alt="/extract_150_10_160_120/scene.jpg"></div>
+<div><b><code>extract</code> / <code>crop</code></b></div>
+<code>/extract_150_10_160_120/scene.jpg</code>
 <br>
-Extract/crop a region of the image, as <code>extract_{left}_{top}_{width}_{height}</code>. All four arguments are required; <code>width</code> and <code>height</code> must be positive. (<a href="https://sharp.pixelplumbing.com/api-resize#extract">docs</a>)
+Crop a region, as <code>extract_{left}_{top}_{width}_{height}</code>. All four arguments are required; <code>width</code> and <code>height</code> must be positive. (<a href="https://sharp.pixelplumbing.com/api-resize#extract">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/format.webp" alt="/f_webp/sample.jpg"></div>
-<div align="center"><b><code>format</code> / <code>f</code></b></div>
-<code>/f_webp/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/format.webp?v=90841432" width="320" alt="/f_webp/photo.jpg"></div>
+<div><b><code>format</code> / <code>f</code></b></div>
+<code>/f_webp/photo.jpg</code>
 <br>
-Supported formats: <code>jpg</code>, <code>jpeg</code>, <code>png</code>, <code>webp</code>, <code>avif</code>, <code>gif</code>, <code>heif</code>, <code>tiff</code> and <code>auto</code> (experimental, only with middleware). (<a href="https://sharp.pixelplumbing.com/api-output#toformat">docs</a>)
+Output format. One of <code>jpg</code>, <code>jpeg</code>, <code>png</code>, <code>webp</code>, <code>avif</code>, <code>gif</code>, <code>heif</code>, <code>tiff</code> or <code>auto</code> (experimental, only with middleware). (<a href="https://sharp.pixelplumbing.com/api-output#toformat">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/quality.jpg" alt="/q_10/sample.jpg"></div>
-<div align="center"><b><code>quality</code> / <code>q</code></b></div>
-<code>/q_10/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/quality.jpg?v=865c529f" width="320" alt="/q_10/photo.jpg"></div>
+<div><b><code>quality</code> / <code>q</code></b></div>
+<code>/q_10/photo.jpg</code>
 <br>
-Integer between <code>1</code> and <code>100</code>.
+Encoding quality, an integer between <code>1</code> and <code>100</code>. A lower value means a smaller file.
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/rotate.jpg" alt="/rotate_45/sample.jpg"></div>
-<div align="center"><b><code>rotate</code></b></div>
-<code>/rotate_45/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/rotate.jpg?v=4bc4f0b2" width="320" alt="/rotate_45/scene.jpg"></div>
+<div><b><code>rotate</code></b></div>
+<code>/rotate_45/scene.jpg</code>
 <br>
-Angle in degrees, between <code>-3600</code> and <code>3600</code>. Angles that are not a multiple of <code>90</code> are filled with the <code>background</code> / <code>b</code> colour. Without an angle (<code>rotate</code>) the image is auto-oriented from its EXIF tag. (<a href="https://sharp.pixelplumbing.com/api-operation#rotate">docs</a>)
+Angle in degrees, between <code>-3600</code> and <code>3600</code>. Angles that are not a multiple of <code>90</code> fill the corners with the <code>background</code> / <code>b</code> colour. Without an angle (<code>rotate</code>) the image is auto-oriented from its EXIF tag. (<a href="https://sharp.pixelplumbing.com/api-operation#rotate">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/enlarge.jpg" alt="/enlarge,s_400x400/sample.jpg"></div>
-<div align="center"><b><code>enlarge</code></b></div>
-<code>/enlarge,s_400x400/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/enlarge.jpg?v=9c6fb296" width="320" alt="/enlarge,s_400x400/photo.jpg"></div>
+<div><b><code>enlarge</code></b></div>
+<code>/enlarge,s_400x400/photo.jpg</code>
 <br>
-Allow the image to be upscaled. By default the returned image will never be larger than the source in any dimension, while preserving the requested aspect ratio.
+Allow the image to be upscaled (<code>enlarge_false</code> turns it back off). Without it, the source is never upscaled: a requested box that is too large is shrunk, preserving its aspect ratio, so the output is never larger than the source, except along the padded axis of <code>fit_contain</code>.
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/flip.jpg" alt="/flip/sample.jpg"></div>
-<div align="center"><b><code>flip</code></b></div>
-<code>/flip/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/flip.jpg?v=40a31bca" width="320" alt="/flip/scene.jpg"></div>
+<div><b><code>flip</code></b></div>
+<code>/flip/scene.jpg</code>
 <br>
-Mirror the image vertically. (<a href="https://sharp.pixelplumbing.com/api-operation#flip">docs</a>)
+Mirror the image vertically, about the horizontal axis. Combine with <code>flop</code> to turn it upside down. (<a href="https://sharp.pixelplumbing.com/api-operation#flip">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/flop.jpg" alt="/flop/sample.jpg"></div>
-<div align="center"><b><code>flop</code></b></div>
-<code>/flop/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/flop.jpg?v=747fa554" width="320" alt="/flop/scene.jpg"></div>
+<div><b><code>flop</code></b></div>
+<code>/flop/scene.jpg</code>
 <br>
-Mirror the image horizontally. (<a href="https://sharp.pixelplumbing.com/api-operation#flop">docs</a>)
+Mirror the image horizontally, about the vertical axis. Combine with <code>flip</code> to turn it upside down. (<a href="https://sharp.pixelplumbing.com/api-operation#flop">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/sharpen.jpg" alt="/sharpen_5/sample.jpg"></div>
-<div align="center"><b><code>sharpen</code></b></div>
-<code>/sharpen_5/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/sharpen.jpg?v=eafda8ec" width="320" alt="/sharpen_5/photo.jpg"></div>
+<div><b><code>sharpen</code></b></div>
+<code>/sharpen_5/photo.jpg</code>
 <br>
-<code>{sigma}_{flat}_{jagged}_{x1}_{y2}_{y3}</code>. <code>sigma</code> is between <code>0.000001</code> and <code>10</code>, the rest between <code>0</code> and <code>1000000</code>. Without arguments (<code>sharpen</code>) a mild sharpen is applied. (<a href="https://sharp.pixelplumbing.com/api-operation#sharpen">docs</a>)
+Sharpen the image, as <code>{sigma}_{flat}_{jagged}_{x1}_{y2}_{y3}</code>. <code>sigma</code> is a number between <code>0.000001</code> and <code>10</code>, the rest between <code>0</code> and <code>1000000</code>. Without arguments (<code>sharpen</code>) a mild sharpen is applied. (<a href="https://sharp.pixelplumbing.com/api-operation#sharpen">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/median.jpg" alt="/median_10/sample.jpg"></div>
-<div align="center"><b><code>median</code></b></div>
-<code>/median_10/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/median.jpg?v=2317e13b" width="320" alt="/median_10/photo.jpg"></div>
+<div><b><code>median</code></b></div>
+<code>/median_10/photo.jpg</code>
 <br>
-Square mask size, an integer between <code>1</code> and <code>1000</code> (defaults to <code>3</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#median">docs</a>)
+Apply a median filter, removing noise while keeping edges. Square mask size, an integer between <code>1</code> and <code>1000</code> (defaults to <code>3</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#median">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/blur.jpg" alt="/blur_5/sample.jpg"></div>
-<div align="center"><b><code>blur</code></b></div>
-<code>/blur_5/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/blur.jpg?v=565d775a" width="320" alt="/blur_5/edges.jpg"></div>
+<div><b><code>blur</code></b></div>
+<code>/blur_5/edges.jpg</code>
 <br>
-<code>{sigma}_{precision}_{minAmplitude}</code>. <code>sigma</code> is a number between <code>0.3</code> and <code>1000</code>, <code>precision</code> one of <code>integer</code> (default), <code>float</code> or <code>approximate</code>, <code>minAmplitude</code> a number between <code>0.001</code> and <code>1</code>. Without arguments (<code>blur</code>) a mild blur is applied. (<a href="https://sharp.pixelplumbing.com/api-operation#blur">docs</a>)
+Gaussian blur, as <code>{sigma}_{precision}_{minAmplitude}</code>. <code>sigma</code> is a number between <code>0.3</code> and <code>1000</code>, <code>precision</code> one of <code>integer</code> (default), <code>float</code> or <code>approximate</code>, <code>minAmplitude</code> between <code>0.001</code> and <code>1</code>. Without arguments (<code>blur</code>) a mild blur is applied. (<a href="https://sharp.pixelplumbing.com/api-operation#blur">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/dilate.png" alt="/dilate_5/sample-logo.png"></div>
-<div align="center"><b><code>dilate</code></b></div>
-<code>/dilate_5/sample-logo.png</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/dilate.png?v=17bf0c5d" width="320" alt="/dilate_4/graphic.png"></div>
+<div><b><code>dilate</code></b></div>
+<code>/dilate_4/graphic.png</code>
 <br>
-Expand foreground objects. Width in pixels, an integer between <code>1</code> and <code>100</code> (defaults to <code>1</code>). Capped below the sharp maximum, since the cost grows with the width. (<a href="https://sharp.pixelplumbing.com/api-operation#dilate">docs</a>)
+Expand foreground objects. Width in pixels, an integer between <code>1</code> and <code>100</code> (defaults to <code>1</code>), capped below the sharp maximum since the cost grows with the width. (<a href="https://sharp.pixelplumbing.com/api-operation#dilate">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/erode.png" alt="/erode_5/sample-logo.png"></div>
-<div align="center"><b><code>erode</code></b></div>
-<code>/erode_5/sample-logo.png</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/erode.png?v=b5c7e49a" width="320" alt="/erode_4/graphic.png"></div>
+<div><b><code>erode</code></b></div>
+<code>/erode_4/graphic.png</code>
 <br>
-Shrink foreground objects. Width in pixels, an integer between <code>1</code> and <code>100</code> (defaults to <code>1</code>). Capped below the sharp maximum, since the cost grows with the width. (<a href="https://sharp.pixelplumbing.com/api-operation#erode">docs</a>)
+Shrink foreground objects. Width in pixels, an integer between <code>1</code> and <code>100</code> (defaults to <code>1</code>), capped below the sharp maximum since the cost grows with the width. (<a href="https://sharp.pixelplumbing.com/api-operation#erode">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/clahe.jpg" alt="/clahe_20_20_5/sample.jpg"></div>
-<div align="center"><b><code>clahe</code></b></div>
-<code>/clahe_20_20_5/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/clahe.jpg?v=0aa709f5" width="320" alt="/clahe_20_20_5/edges.jpg"></div>
+<div><b><code>clahe</code></b></div>
+<code>/clahe_20_20_5/edges.jpg</code>
 <br>
-Contrast limiting adaptive histogram equalization, as <code>{width}_{height}_{maxSlope}</code>. <code>width</code> is required and <code>height</code> defaults to it (a square window); both are integers between <code>1</code> and <code>100</code>, capped below the sharp maximum since the cost grows with the window, and clamped to the source dimensions. <code>maxSlope</code> is an integer between <code>0</code> and <code>100</code> (defaults to <code>3</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#clahe">docs</a>)
+Contrast limiting adaptive histogram equalization, as <code>{width}_{height}_{maxSlope}</code>. <code>width</code> is required and <code>height</code> defaults to it (a square window); both are integers between <code>1</code> and <code>100</code>, clamped to the source dimensions. <code>maxSlope</code> is an integer between <code>0</code> and <code>100</code> (defaults to <code>3</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#clahe">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/flatten.jpg" alt="/flatten,b_00ff00,f_jpeg/sample-alpha.png"></div>
-<div align="center"><b><code>flatten</code></b></div>
-<code>/flatten,b_00ff00,f_jpeg/sample-alpha.png</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/flatten.jpg?v=02455cd1" width="320" alt="/flatten,b_00ff00,f_jpeg/alpha.png"></div>
+<div><b><code>flatten</code></b></div>
+<code>/flatten,b_00ff00,f_jpeg/alpha.png</code>
 <br>
-Remove alpha channel, if any, and replace with the <code>background</code> / <code>b</code> colour. (<a href="https://sharp.pixelplumbing.com/api-operation#flatten">docs</a>)
+Remove the alpha channel, if any, and replace transparency with the <code>background</code> / <code>b</code> colour. (<a href="https://sharp.pixelplumbing.com/api-operation#flatten">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/unflatten.webp" alt="/unflatten,f_webp/sample-logo.png"></div>
-<div align="center"><b><code>unflatten</code></b></div>
-<code>/unflatten,f_webp/sample-logo.png</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/unflatten.webp?v=db6b8455" width="320" alt="/unflatten,f_webp/graphic.png"></div>
+<div><b><code>unflatten</code></b></div>
+<code>/unflatten,f_webp/graphic.png</code>
 <br>
 Make every fully white pixel transparent, so the output format needs an alpha channel (<code>png</code>, <code>webp</code>, <code>avif</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#unflatten">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/gamma.jpg" alt="/gamma_3/sample.jpg"></div>
-<div align="center"><b><code>gamma</code></b></div>
-<code>/gamma_3/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/gamma.jpg?v=ec2a179b" width="320" alt="/gamma_3/colour.jpg"></div>
+<div><b><code>gamma</code></b></div>
+<code>/gamma_3/colour.jpg</code>
 <br>
-<code>{gamma}_{gammaOut}</code>, each a number between <code>1.0</code> and <code>3.0</code> (defaults to <code>2.2</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#gamma">docs</a>)
+Gamma correction, as <code>{gamma}_{gammaOut}</code>, each a number between <code>1.0</code> and <code>3.0</code> (defaults to <code>2.2</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#gamma">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/negate.jpg" alt="/negate/sample.jpg"></div>
-<div align="center"><b><code>negate</code></b></div>
-<code>/negate/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/negate.jpg?v=6dcd6c51" width="320" alt="/negate/colour.jpg"></div>
+<div><b><code>negate</code></b></div>
+<code>/negate/colour.jpg</code>
 <br>
-Optional <code>{alpha}</code> (<code>true</code> by default) controls whether the alpha channel is negated too, e.g. <code>negate_false</code>. (<a href="https://sharp.pixelplumbing.com/api-operation#negate">docs</a>)
+Produce the negative of the image. Optional <code>{alpha}</code> (<code>true</code> by default) controls whether the alpha channel is negated too, e.g. <code>negate_false</code>. (<a href="https://sharp.pixelplumbing.com/api-operation#negate">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/normalize.jpg" alt="/normalize_10_90/sample.jpg"></div>
-<div align="center"><b><code>normalize</code></b></div>
-<code>/normalize_10_90/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/normalize.jpg?v=7ab13cca" width="320" alt="/normalize_10_90/edges.jpg"></div>
+<div><b><code>normalize</code></b></div>
+<code>/normalize_10_90/edges.jpg</code>
 <br>
-Stretch the luminance to the full dynamic range, as <code>{lower}_{upper}</code> percentiles. <code>lower</code> is a number between <code>0</code> and <code>99</code> (defaults to <code>1</code>), <code>upper</code> between <code>1</code> and <code>100</code> (defaults to <code>99</code>) and has to be greater than <code>lower</code>. (<a href="https://sharp.pixelplumbing.com/api-operation#normalize">docs</a>)
+Stretch the luminance to the full dynamic range, as <code>{lower}_{upper}</code> percentiles. <code>lower</code> is a number between <code>0</code> and <code>99</code> (defaults to <code>1</code>), <code>upper</code> between <code>1</code> and <code>100</code> (defaults to <code>99</code>) and greater than <code>lower</code>. (<a href="https://sharp.pixelplumbing.com/api-operation#normalize">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/threshold.jpg" alt="/threshold_128/sample.jpg"></div>
-<div align="center"><b><code>threshold</code></b></div>
-<code>/threshold_128/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/threshold.jpg?v=e870d914" width="320" alt="/threshold_128/colour.jpg"></div>
+<div><b><code>threshold</code></b></div>
+<code>/threshold_128/colour.jpg</code>
 <br>
-<code>{threshold}_{grayscale}</code>. <code>threshold</code> is an integer between <code>0</code> and <code>255</code> (defaults to <code>128</code>). Optional <code>grayscale</code> (<code>true</code> by default) converts to single channel grayscale first, e.g. <code>threshold_128_false</code>. (<a href="https://sharp.pixelplumbing.com/api-operation#threshold">docs</a>)
+Map every pixel to black or white, as <code>{threshold}_{grayscale}</code>. <code>threshold</code> is an integer between <code>0</code> and <code>255</code> (defaults to <code>128</code>). Optional <code>grayscale</code> (<code>true</code> by default) converts to single channel first, e.g. <code>threshold_128_false</code>. (<a href="https://sharp.pixelplumbing.com/api-operation#threshold">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/linear.jpg" alt="/linear_1.5_-30/sample.jpg"></div>
-<div align="center"><b><code>linear</code></b></div>
-<code>/linear_1.5_-30/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/linear.jpg?v=04090af0" width="320" alt="/linear_1.5_-30/colour.jpg"></div>
+<div><b><code>linear</code></b></div>
+<code>/linear_1.5_-30/colour.jpg</code>
 <br>
-Levels adjustment applying <code>a * input + b</code>, as <code>{a}_{b}</code>. <code>a</code> is the multiplier (defaults to <code>1</code>), <code>b</code> the offset (defaults to <code>0</code>). (<a href="https://sharp.pixelplumbing.com/api-operation#linear">docs</a>)
+Levels adjustment applying <code>a * input + b</code>, as <code>{a}_{b}</code>. <code>a</code> is the multiplier (defaults to <code>1</code>) and <code>b</code> the offset (defaults to <code>0</code>), both numbers. (<a href="https://sharp.pixelplumbing.com/api-operation#linear">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/tint.jpg" alt="/tint_00ff00/sample.jpg"></div>
-<div align="center"><b><code>tint</code></b></div>
-<code>/tint_00ff00/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/tint.jpg?v=7a727e4a" width="320" alt="/tint_00ff00/colour.jpg"></div>
+<div><b><code>tint</code></b></div>
+<code>/tint_00ff00/colour.jpg</code>
 <br>
-Tint colour. (<a href="https://sharp.pixelplumbing.com/api-colour#tint">docs</a>)
+Tint the image, keeping its luminance. A hex (<code>f00</code>, <code>ff0000</code>) or named (<code>red</code>) colour. (<a href="https://sharp.pixelplumbing.com/api-colour#tint">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/grayscale.jpg" alt="/grayscale/sample.jpg"></div>
-<div align="center"><b><code>grayscale</code></b></div>
-<code>/grayscale/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/grayscale.jpg?v=8e4a38ec" width="320" alt="/grayscale/colour.jpg"></div>
+<div><b><code>grayscale</code></b></div>
+<code>/grayscale/colour.jpg</code>
 <br>
-Convert to 8-bit greyscale. (<a href="https://sharp.pixelplumbing.com/api-colour#grayscale">docs</a>)
+Convert the image to 8-bit greyscale, mapping every pixel to its luminance. (<a href="https://sharp.pixelplumbing.com/api-colour#grayscale">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/modulate.jpg" alt="/modulate_1.5_2_90_10/sample.jpg"></div>
-<div align="center"><b><code>modulate</code></b></div>
-<code>/modulate_1.5_2_90_10/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/modulate.jpg?v=f1cce46c" width="320" alt="/modulate_1.5_2_90_10/colour.jpg"></div>
+<div><b><code>modulate</code></b></div>
+<code>/modulate_1.5_2_90_10/colour.jpg</code>
 <br>
-Transforms the image using <code>{brightness}_{saturation}_{hue}_{lightness}</code>. <code>brightness</code> and <code>saturation</code> are numbers <code>&gt;= 0</code>, <code>hue</code> is an integer in degrees. Each is also available on its own (below), which is easier to read when only one is needed. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
+Transform the image, as <code>{brightness}_{saturation}_{hue}_{lightness}</code>. <code>brightness</code> and <code>saturation</code> are numbers <code>&gt;= 0</code>, <code>hue</code> an integer in degrees. Each is also available on its own (below). (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/brightness.jpg" alt="/brightness_1.5/sample.jpg"></div>
-<div align="center"><b><code>brightness</code></b></div>
-<code>/brightness_1.5/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/brightness.jpg?v=c79f82bb" width="320" alt="/brightness_1.5/colour.jpg"></div>
+<div><b><code>brightness</code></b></div>
+<code>/brightness_1.5/colour.jpg</code>
 <br>
-Brightness multiplier, a number <code>&gt;= 0</code>. Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
+Brightness multiplier, a number <code>&gt;= 0</code> (<code>1</code> leaves the image unchanged). Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/saturation.jpg" alt="/saturation_0.3/sample.jpg"></div>
-<div align="center"><b><code>saturation</code></b></div>
-<code>/saturation_0.3/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/saturation.jpg?v=9a395c34" width="320" alt="/saturation_0.3/colour.jpg"></div>
+<div><b><code>saturation</code></b></div>
+<code>/saturation_0.3/colour.jpg</code>
 <br>
-Saturation multiplier, a number <code>&gt;= 0</code>. Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
+Saturation multiplier, a number <code>&gt;= 0</code> (<code>0</code> is greyscale). Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/hue.jpg" alt="/hue_90/sample.jpg"></div>
-<div align="center"><b><code>hue</code></b></div>
-<code>/hue_90/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/hue.jpg?v=8dff0588" width="320" alt="/hue_90/colour.jpg"></div>
+<div><b><code>hue</code></b></div>
+<code>/hue_90/colour.jpg</code>
 <br>
-Hue rotation, an integer in degrees. Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
+Hue rotation, an integer in degrees that wraps around at <code>360</code>. Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/lightness.jpg" alt="/lightness_30/sample.jpg"></div>
-<div align="center"><b><code>lightness</code></b></div>
-<code>/lightness_30/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/lightness.jpg?v=fe72d3a8" width="320" alt="/lightness_30/colour.jpg"></div>
+<div><b><code>lightness</code></b></div>
+<code>/lightness_30/colour.jpg</code>
 <br>
-Lightness addend, a number. Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
+Lightness addend, a number added to the lightness of every pixel. Required. (<a href="https://sharp.pixelplumbing.com/api-operation#modulate">docs</a>)
 </td>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/opacity.webp" alt="/opacity_0.5,f_webp/sample.jpg"></div>
-<div align="center"><b><code>opacity</code></b></div>
-<code>/opacity_0.5,f_webp/sample.jpg</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/opacity.webp?v=75d9647c" width="320" alt="/opacity_0.5,f_webp/alpha.png"></div>
+<div><b><code>opacity</code></b></div>
+<code>/opacity_0.5,f_webp/alpha.png</code>
 <br>
-Opacity, a number between <code>0</code> and <code>1</code>. Required. The image is made transparent, so the output format needs an alpha channel (<code>png</code>, <code>webp</code>, <code>avif</code>). Set the <code>background</code> / <code>b</code> colour to blend into it instead and keep the output opaque, e.g. <code>opacity_0.5,b_fff,f_jpeg</code>.
+Opacity, a number between <code>0</code> and <code>1</code>. Required. The image is made transparent, so the output format needs an alpha channel (<code>png</code>, <code>webp</code>, <code>avif</code>), or set the <code>background</code> / <code>b</code> colour to blend into it instead, e.g. <code>opacity_0.5,b_fff,f_jpeg</code>.
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
-<div align="center"><img src="./assets/operations/animated.gif" alt="/a,w_160/sample.gif"></div>
-<div align="center"><b><code>animated</code> / <code>a</code></b></div>
-<code>/a,w_160/sample.gif</code>
+<td valign="top" align="left" width="50%">
+<div align="center"><img src="./assets/operations/animated.gif?v=e51060bb" width="160" alt="/a,w_160/animated.gif"></div>
+<div><b><code>animated</code> / <code>a</code></b></div>
+<code>/a,w_160/animated.gif</code>
 <br>
-Process every frame of an animated image. Experimental.
+Process every frame of an animated image instead of the first one. Experimental.
 </td>
-<td valign="top" width="50%">
+<td valign="top" align="left" width="50%">
 <div align="center"><em>No sample: the sample source has no uniform border to trim.</em></div>
-<div align="center"><b><code>trim</code></b></div>
-<code>/trim_30/sample.jpg</code>
+<div><b><code>trim</code></b></div>
+<code>/trim_30/photo.jpg</code>
 <br>
-Trim pixels from the edges that are within the threshold of the top-left pixel colour. Threshold is a number <code>&gt;= 0</code> (defaults to <code>10</code>). (<a href="https://sharp.pixelplumbing.com/api-resize#trim">docs</a>)
+Trim edge pixels that are within the threshold of the top-left pixel colour. Threshold is a number <code>&gt;= 0</code> (defaults to <code>10</code>). (<a href="https://sharp.pixelplumbing.com/api-resize#trim">docs</a>)
 </td>
 </tr>
 <tr>
-<td valign="top" width="50%">
+<td valign="top" align="left" width="50%">
 <div align="center"><em>No sample: the sample source carries no EXIF <code>Orientation</code> tag.</em></div>
-<div align="center"><b><code>autoorient</code></b></div>
-<code>/autoorient/sample.jpg</code>
+<div><b><code>autoorient</code></b></div>
+<code>/autoorient/photo.jpg</code>
 <br>
-Rotate and flip the image based on its EXIF <code>Orientation</code> tag, then remove the tag. (<a href="https://sharp.pixelplumbing.com/api-operation#autoorient">docs</a>)
+Rotate and flip the image according to its EXIF <code>Orientation</code> tag, then remove the tag. Also applied by <code>rotate</code> without an angle. (<a href="https://sharp.pixelplumbing.com/api-operation#autoorient">docs</a>)
 </td>
-<td valign="top" width="50%"></td>
+<td valign="top" align="left" width="50%"></td>
 </tr>
 </table>
 
@@ -482,9 +480,28 @@ Every option can also be set universally with an `IPX_*` environment variable, w
 | -------------------- | -------------------------- | ------- | --------------------------------------------------------- |
 | `alias`              | `IPX_ALIAS`                | `{}`    | Map URL prefixes to other prefixes or remote origins.     |
 | `maxOutputDimension` | `IPX_MAX_OUTPUT_DIMENSION` | `8192`  | Maximum width and height (in pixels) of the output image. |
+| `allowedModifiers`   | `IPX_ALLOWED_MODIFIERS`    | (all)   | Modifiers that requests are allowed to use.               |
 
 Requested `width`, `height` and `resize` dimensions are clamped to `maxOutputDimension`, preserving the requested aspect ratio, and `extend` edges are clamped so the extended canvas stays within it. This bounds how much memory a single request can allocate: sharp only limits the _input_ size, so without it `/enlarge,s_20000x20000/image.jpg` (or `/extend_10000_10000_10000_10000/image.jpg`) allocates gigabytes from a small source image. Set to `false` to disable, which is only safe when modifiers come from a trusted source.
 
+`allowedModifiers` restricts a public endpoint to the modifiers a site actually uses, for example `allowedModifiers: ["width", "height", "format", "quality"]` or `IPX_ALLOWED_MODIFIERS=width,height,format,quality`. Aliases follow their modifier (allowing `width` also allows `w`). Any other modifier, including an unknown one, is rejected with a `400` before the source is fetched, so expensive operations (`blur`, `median`, ...) cannot be triggered. Only modifier names are checked, not their values: allowing `format` allows every supported output format, including the slow-to-encode `avif`. The same image also stays reachable under many URLs (`?cb=1`, `w_10` vs `w_1e1`, ...), so this does not prevent busting a CDN cache.
+
+### Server (`createIPXFetchHandler`, `createIPXNodeHandler`, `serveIPX`)
+
+| Option        | Environment variable | Default                                              | Description                                             |
+| ------------- | -------------------- | ---------------------------------------------------- | ------------------------------------------------------- |
+| `autoFormats` | `IPX_AUTO_FORMATS`   | `avif`, `webp`, `jpeg`, `png`, `tiff`, `heif`, `gif` | Formats `f_auto` can pick from, in order of preference. |
+
+`f_auto` serves the format that the client's `accept` header lists with the highest q-value, and equal q-values go to the earlier entry in `autoFormats`. Wildcards such as `image/*` and `*/*` do not match a format, so browsers only negotiate the formats they list explicitly (in practice `avif`, `webp` and `png`). When nothing matches, `jpeg` is served, even if it is not in the list. Animated images only consider `webp` and `gif`, and fall back to `gif`.
+
+AVIF compresses best but is much slower to encode, so leave it out when encoding time matters more than size:
+
+```ts
+createIPXFetchHandler(ipx, { autoFormats: ["webp", "jpeg"] });
+```
+
+With the CLI: `IPX_AUTO_FORMATS=webp,jpeg ipx serve`. Unknown formats throw when the handler is created.
+
 ### Filesystem source (`ipxFSStorage`)
 
 Enabled by default with the CLI only.
@@ -499,13 +516,13 @@ Enabled by default with the CLI only.
 
 Enabled by default with the CLI only.
 
-| Option            | Environment variable         | Default | Description                                                     |
-| ----------------- | ---------------------------- | ------- | --------------------------------------------------------------- |
-| `domains`         | `IPX_HTTP_DOMAINS`           | `[]`    | Allowlist of hostnames images can be fetched from.              |
-| `maxAge`          | `IPX_HTTP_MAX_AGE`           | `300`   |                                                                 |
-| `fetchOptions`    | `IPX_HTTP_FETCH_OPTIONS`     | `{}`    | Passed to `fetch()`.                                            |
-| `allowAllDomains` | `IPX_HTTP_ALLOW_ALL_DOMAINS` | `false` | Disables the allowlist. Unsafe on a public server.              |
-| `blockPrivateIPs` | `IPX_HTTP_BLOCK_PRIVATE_IPS` | `false` | Rejects hosts that are, or resolve to, a non-public IP address. |
+| Option            | Environment variable         | Default | Description                                                                                   |
+| ----------------- | ---------------------------- | ------- | --------------------------------------------------------------------------------------------- |
+| `domains`         | `IPX_HTTP_DOMAINS`           | `[]`    | Allowlist of hostnames images can be fetched from.                                            |
+| `maxAge`          | `IPX_HTTP_MAX_AGE`           | `300`   | `cache-control` max-age, in seconds, when upstream sends none.                                |
+| `fetchOptions`    | `IPX_HTTP_FETCH_OPTIONS`     | `{}`    | Passed to `fetch()`.                                                                          |
+| `allowAllDomains` | `IPX_HTTP_ALLOW_ALL_DOMAINS` | `false` | Disables the allowlist. Unsafe on a public server.                                            |
+| `blockPrivateIPs` | `IPX_HTTP_BLOCK_PRIVATE_IPS` | `false` | Rejects hosts that are, or resolve to, a non-public IP address (best effort, see note below). |
 
 Only `http:` and `https:` URLs are allowed (anything else is rejected with `403 IPX_FORBIDDEN_PROTOCOL`), and redirects are followed **only within the allowlist**, up to 3 hops: each redirect target is re-validated and a redirect to a host that is not listed is rejected with `403 IPX_FORBIDDEN_HOST` (`502 IPX_TOO_MANY_REDIRECTS` beyond 3 hops). Previously redirects were followed blindly, which let an allowlisted host with an open redirect bounce IPX to internal addresses such as the cloud metadata service (SSRF). If an allowlisted host redirects to a CDN, add the CDN hostname to the allowlist as well. Redirect re-validation is skipped when `allowAllDomains` is enabled without `blockPrivateIPs` (nothing to validate) or when `redirect` is explicitly set in `fetchOptions`.
 
@@ -521,7 +538,10 @@ The host of the requested URL **and of every redirect hop** must be a public add
 
 It is **off by default**: many deployments legitimately fetch from in-cluster origins (internal object storage, a sidecar, `localhost` in development), and enabling it by default would break them.
 
-Two limits to be aware of. It does not close the DNS-rebinding window: the name is resolved again when the socket is opened, so a record with a very short TTL can answer with a public address during validation and a private one during the fetch. Closing that requires pinning the validated address on the connection itself, which the plain `fetch` used here does not expose. And it is not a substitute for the allowlist — a public address that happens to be reachable is still fetched.
+> [!WARNING]
+> `blockPrivateIPs` is best effort and does **not** protect against DNS rebinding. The hostname is resolved once to validate it and again when `fetch` opens the socket, so a DNS record the attacker controls (with a very short TTL) can answer with a public address during validation and a private one during the fetch. This matters when the attacker can choose the hostname: with `allowAllDomains`, or an allowlisted domain whose DNS you do not control. If IPX must not reach internal services, enforce it at the network level: run it behind an egress proxy, or a firewall / network policy that blocks private ranges and the cloud metadata service (on AWS, also require IMDSv2).
+
+It is also not a substitute for the allowlist — a public address that happens to be reachable is still fetched.
 
 ## SVG Images
 
@@ -628,13 +648,6 @@ The parser may be async, and can throw an `HTTPError` (re-exported from `ipx`) t
 
 Returned values are escaped by IPX, so custom parsers don't need to do it themselves. Note this is not an access check — exactly as with the default URL style, what the resulting id is allowed to resolve to is enforced by the storage layer (`ipxFSStorage`'s directory boundary, `ipxHttpStorage`'s domain allowlist).
 
-## Migration from v3 to v4
-
-- The server creation APIs have changed. See the [Programmatic API](#programmatic-api) section for examples.
-- The JSON error format has changed from `{ error: string }` to `{ status, statusText, message }`.
-- The `svgo` option is now `svg.optimize`. SVG images are always sanitized, even when optimization is disabled.
-- SVG optimization now applies SVGO's `preset-default` unless custom `plugins` are configured (previously only the configured plugins ran), so SVG output is restructured more than before. See the [SVG Images](#svg-images) section.
-
 ## License
 
 [MIT](./LICENSE)