Commit a9abe8479 for imagemagick.org
commit a9abe84791aa8531af5fec9cc7f0194c1b0cab08
Author: Cristy <urban-warrior@imagemagick.org>
Date: Sun Oct 25 11:17:48 2026 -0400
improved UI/UX
diff --git a/www/animate/index.html b/www/animate/index.html
index a77dbbb55..322434d3f 100644
--- a/www/animate/index.html
+++ b/www/animate/index.html
@@ -8,739 +8,853 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Animate</title>
- <meta name="description" content="">
+ <meta name="description" content="Animate an image sequence on any X server with ImageMagick command line tools.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Animate">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Animate an image sequence on any X server with ImageMagick command line tools.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Animate">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Animate",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/animate/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Animate an image sequence on any X server with ImageMagick command line tools.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/animate/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/animate/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Animate</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>animate</code> program to animate an image sequence on any X server. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>animate</code> command or see below for example usages of the command.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Animate</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Animate an image sequence on any X server with ImageMagick command line tools.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>animate</code> command here to illustrate its usefulness and ease of use. To get started, lets animate an image sequence in the GIF format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick animate movie.gif </samp></pre>
-
-<p>To animate a directory of JPEG images, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick animate *.jpg </samp></pre>
-
-<p>You can find additional examples of using <code>animate</code> in <a href="https://usage.imagemagick.org/basics/#animate">Examples of ImageMagick Usage</a>.</p>
-
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>animate</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tbody>
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#backdrop">-backdrop</a></td>
- <td>display the image centered on a backdrop</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colormap">-colormap <var>type</var></a></td>
- <td>Shared or Private</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>preferred size and location of the cropped image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>animate copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>animate the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-despeckle</a></td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#animate">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#edge">-edge <var>radius</var></a></td>
- <td>apply a filter to detect edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#enhance">-enhance</a></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>geometry</var></a></td>
- <td>horizontal and vertical backdrop placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#immutable">-immutable <var>type</var></a></td>
- <td>prohibit image edits</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>name</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#map">-map <var>filename</var></a></td>
- <td>transform image colors to match this set of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#raise">-raise <var>value</var></a></td>
- <td>lighten/darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#remote">-remote <var>command</var></a></td>
- <td>execute a command in an remote animate process</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resample">-resample <var>geometry</var></a></td>
- <td>change the resolution of an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#roll">-roll <var>geometry</var></a></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sample">-sample <var>geometry</var></a></td>
- <td>scale image with pixel sampling</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#segment">-segment <var>values</var></a></td>
- <td>segment an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#update">-update <var>seconds</var></a></td>
- <td>detect when image file is modified and reanimate</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#visual">-visual</a></td>
- <td>animate image using this visual type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-window <var>id</var></a></td>
- <td>animate images to background of this window</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-window-group <var>id</var></a></td>
- <td>exit program when this window id is destroyed</td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Header & Quick Navigation -->
+<div class="mb-5 border-bottom pb-4">
+ <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+ <a href="#usage" class="btn btn-sm btn-outline-primary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-play-circle-fill"></i> Example Usage
+ </a>
+ <a href="#options" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-list-nested"></i> Option Summary
+ </a>
+ </div>
+ <p class="lead text-body-secondary mb-0">
+ Use the <code class="text-primary fw-semibold">animate</code> program to animate an image sequence on any X server. See <a href="../command-line-processing/index.html" class="text-decoration-none">Command Line Processing</a> for advice on how to structure your <code class="text-primary fw-semibold">animate</code> command, or check below for usage examples.
+ </p>
</div>
+<!-- Section: Example Usage -->
+<section id="usage" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Example Usage</h2>
+ <a href="#usage" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+
+ <p class="text-body-secondary">
+ Below are common examples illustrating how to use the <code>animate</code> command. To get started, animate an image sequence in GIF format:
+ </p>
+ <!-- Terminal Code Block 1 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">animate-gif.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/animate/magick animate movie.gif')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick animate movie.gif</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary">To animate an entire directory of JPEG images, pass a wildcard pattern:</p>
+ <!-- Terminal Code Block 2 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">animate-folder.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('magick animate *.jpg')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick animate *.jpg</code></pre>
+ </div>
+ </div>
+ <div class="alert alert-info d-flex align-items-center gap-3 border-0 bg-info bg-opacity-10 text-info-emphasis rounded-3" role="alert">
+ <i class="bi bi-info-circle-fill fs-4 flex-shrink-0"></i>
+ <div>
+ Looking for advanced parameters? You can find additional examples in the <a href="https://usage.imagemagick.org/basics/#animate" target="_blank" class="alert-link">ImageMagick Usage Documentation</a>.
+ </div>
+ </div>
+</section>
+<!-- Section: Option Summary -->
+<section id="options" class="mb-5">
+ <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-3">
+ <div class="d-flex align-items-center gap-2">
+ <h2 class="h3 fw-bold mb-0">Option Summary</h2>
+ <a href="#options" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <!-- Live Search Filter for Options -->
+ <div class="input-group input-group-sm style-search" style="max-width: 280px;">
+ <span class="input-group-text bg-body-tertiary border-end-0"><i class="bi bi-filter text-secondary"></i></span>
+ <input type="text" id="optionSearch" class="form-control border-start-0 bg-body-tertiary" placeholder="Filter options..." onkeyup="filterOptions()">
+ </div>
+ </div>
+ <p class="text-body-secondary">
+ The <code>animate</code> command recognizes the following command-line options. Select any option link for detailed descriptions.
+ </p>
+ <!-- Options Table Wrapper with Sticky Header -->
+ <div class="card im-card overflow-hidden shadow-sm">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0" id="optionsTable">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 35%;">Option</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="fw-semibold text-decoration-none">-alpha</a></td>
+ <td>on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#antialias" class="fw-semibold text-decoration-none">-antialias</a></td>
+ <td>remove pixel-aliasing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="fw-semibold text-decoration-none">-authenticate <var class="text-secondary"><value></var></a></td>
+ <td>decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#backdrop" class="fw-semibold text-decoration-none">-backdrop</a></td>
+ <td>display the image centered on a backdrop</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#background" class="fw-semibold text-decoration-none">-background <var class="text-secondary"><color></var></a></td>
+ <td>background color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="fw-semibold text-decoration-none">-border <var class="text-secondary"><geometry></var></a></td>
+ <td>surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="fw-semibold text-decoration-none">-bordercolor <var class="text-secondary"><color></var></a></td>
+ <td>border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="fw-semibold text-decoration-none">-channel <var class="text-secondary"><type></var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip" class="fw-semibold text-decoration-none">-clip</a></td>
+ <td>clip along the first path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-path" class="fw-semibold text-decoration-none">-clip-path <var class="text-secondary"><id></var></a></td>
+ <td>clip along a named path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#coalesce" class="fw-semibold text-decoration-none">-coalesce</a></td>
+ <td>merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colormap" class="fw-semibold text-decoration-none">-colormap <var class="text-secondary"><type></var></a></td>
+ <td>Shared or Private</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="fw-semibold text-decoration-none">-colors <var class="text-secondary"><value></var></a></td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="fw-semibold text-decoration-none">-colorspace <var class="text-secondary"><type></var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="fw-semibold text-decoration-none">-comment <var class="text-secondary"><string></var></a></td>
+ <td>annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="fw-semibold text-decoration-none">-compress <var class="text-secondary"><type></var></a></td>
+ <td>image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast" class="fw-semibold text-decoration-none">-contrast</a></td>
+ <td>enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#crop" class="fw-semibold text-decoration-none">-crop <var class="text-secondary"><geometry></var></a></td>
+ <td>preferred size and location of the cropped image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="fw-semibold text-decoration-none">-debug <var class="text-secondary"><events></var></a></td>
+ <td>animate copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#decipher" class="fw-semibold text-decoration-none">-decipher <var class="text-secondary"><filename></var></a></td>
+ <td>convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="fw-semibold text-decoration-none">-define <var class="text-secondary"><format:option></var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delay" class="fw-semibold text-decoration-none">-delay <var class="text-secondary"><centiseconds></var></a></td>
+ <td>animate the next image after pausing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="fw-semibold text-decoration-none">-density <var class="text-secondary"><geometry></var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="fw-semibold text-decoration-none">-depth <var class="text-secondary"><value></var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#despeckle" class="fw-semibold text-decoration-none">-despeckle</a></td>
+ <td>reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#display" class="fw-semibold text-decoration-none">-display <var class="text-secondary"><server></var></a></td>
+ <td>get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dispose" class="fw-semibold text-decoration-none">-dispose <var class="text-secondary"><method></var></a></td>
+ <td>layer disposal method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="fw-semibold text-decoration-none">-dither <var class="text-secondary"><method></var></a></td>
+ <td>apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#edge" class="fw-semibold text-decoration-none">-edge <var class="text-secondary"><radius></var></a></td>
+ <td>apply a filter to detect edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="fw-semibold text-decoration-none">-endian <var class="text-secondary"><type></var></a></td>
+ <td>endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#enhance" class="fw-semibold text-decoration-none">-enhance</a></td>
+ <td>apply a digital filter to enhance a noisy image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="fw-semibold text-decoration-none">-extract <var class="text-secondary"><geometry></var></a></td>
+ <td>extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="fw-semibold text-decoration-none">-filter <var class="text-secondary"><type></var></a></td>
+ <td>use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flatten" class="fw-semibold text-decoration-none">-flatten</a></td>
+ <td>flatten a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flip" class="fw-semibold text-decoration-none">-flip</a></td>
+ <td>flip image in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flop" class="fw-semibold text-decoration-none">-flop</a></td>
+ <td>flop image in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#frame" class="fw-semibold text-decoration-none">-frame <var class="text-secondary"><geometry></var></a></td>
+ <td>surround image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gamma" class="fw-semibold text-decoration-none">-gamma <var class="text-secondary"><value></var></a></td>
+ <td>level of gamma correction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="fw-semibold text-decoration-none">-geometry <var class="text-secondary"><geometry></var></a></td>
+ <td>preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="fw-semibold text-decoration-none">-gravity <var class="text-secondary"><geometry></var></a></td>
+ <td>horizontal and vertical backdrop placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="fw-semibold text-decoration-none">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="fw-semibold text-decoration-none">-identify</a></td>
+ <td>identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#immutable" class="fw-semibold text-decoration-none">-immutable <var class="text-secondary"><type></var></a></td>
+ <td>prohibit image edits</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="fw-semibold text-decoration-none">-interlace <var class="text-secondary"><type></var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="fw-semibold text-decoration-none">-interpolate <var class="text-secondary"><method></var></a></td>
+ <td>pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="fw-semibold text-decoration-none">-label <var class="text-secondary"><name></var></a></td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="fw-semibold text-decoration-none">-limit <var class="text-secondary"><type value></var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="fw-semibold text-decoration-none">-log <var class="text-secondary"><format></var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#map" class="fw-semibold text-decoration-none">-map <var class="text-secondary"><filename></var></a></td>
+ <td>transform image colors to match this set of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mattecolor" class="fw-semibold text-decoration-none">-mattecolor <var class="text-secondary"><color></var></a></td>
+ <td>frame color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="fw-semibold text-decoration-none">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="fw-semibold text-decoration-none">-monochrome</a></td>
+ <td>transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#negate" class="fw-semibold text-decoration-none">-negate</a></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="fw-semibold text-decoration-none">-page <var class="text-secondary"><geometry></var></a></td>
+ <td>size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="fw-semibold text-decoration-none">-profile <var class="text-secondary"><filename></var></a></td>
+ <td>add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="fw-semibold text-decoration-none">-quantize <var class="text-secondary"><colorspace></var></a></td>
+ <td>reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="fw-semibold text-decoration-none">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#raise" class="fw-semibold text-decoration-none">-raise <var class="text-secondary"><value></var></a></td>
+ <td>lighten/darken image edges to create a 3-D effect</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="fw-semibold text-decoration-none">-regard-warnings</a></td>
+ <td>pay attention to warning messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#remote" class="fw-semibold text-decoration-none">-remote <var class="text-secondary"><command></var></a></td>
+ <td>execute a command in a remote animate process</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resample" class="fw-semibold text-decoration-none">-resample <var class="text-secondary"><geometry></var></a></td>
+ <td>change the resolution of an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resize" class="fw-semibold text-decoration-none">-resize <var class="text-secondary"><geometry></var></a></td>
+ <td>resize the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="fw-semibold text-decoration-none">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#roll" class="fw-semibold text-decoration-none">-roll <var class="text-secondary"><geometry></var></a></td>
+ <td>roll an image vertically or horizontally</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="fw-semibold text-decoration-none">-rotate <var class="text-secondary"><degrees></var></a></td>
+ <td>apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sample" class="fw-semibold text-decoration-none">-sample <var class="text-secondary"><geometry></var></a></td>
+ <td>scale image with pixel sampling</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="fw-semibold text-decoration-none">-sampling-factor <var class="text-secondary"><geometry></var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scene" class="fw-semibold text-decoration-none">-scene <var class="text-secondary"><value></var></a></td>
+ <td>image scene number</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#segment" class="fw-semibold text-decoration-none">-segment <var class="text-secondary"><values></var></a></td>
+ <td>segment an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="fw-semibold text-decoration-none">-seed <var class="text-secondary"><value></var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="fw-semibold text-decoration-none">-set <var class="text-secondary"><attribute value></var></a></td>
+ <td>set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sharpen" class="fw-semibold text-decoration-none">-sharpen <var class="text-secondary"><geometry></var></a></td>
+ <td>sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="fw-semibold text-decoration-none">-size <var class="text-secondary"><geometry></var></a></td>
+ <td>width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="fw-semibold text-decoration-none">-strip</a></td>
+ <td>strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#thumbnail" class="fw-semibold text-decoration-none">-thumbnail <var class="text-secondary"><geometry></var></a></td>
+ <td>create a thumbnail of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="fw-semibold text-decoration-none">-transparent-color <var class="text-secondary"><color></var></a></td>
+ <td>transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#trim" class="fw-semibold text-decoration-none">-trim</a></td>
+ <td>trim image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#update" class="fw-semibold text-decoration-none">-update <var class="text-secondary"><seconds></var></a></td>
+ <td>detect when image file is modified and reanimate</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="fw-semibold text-decoration-none">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="fw-semibold text-decoration-none">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="fw-semibold text-decoration-none">-virtual-pixel <var class="text-secondary"><method></var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#visual" class="fw-semibold text-decoration-none">-visual</a></td>
+ <td>animate image using this visual type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#window" class="fw-semibold text-decoration-none">-window <var class="text-secondary"><id></var></a></td>
+ <td>animate images to background of this window</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#window-group" class="fw-semibold text-decoration-none">-window-group <var class="text-secondary"><id></var></a></td>
+ <td>exit program when this window id is destroyed</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
+<script>
+ function filterOptions() {
+ const input = document.getElementById('optionSearch');
+ const filter = input.value.toLowerCase();
+ const table = document.getElementById('optionsTable');
+ const tr = table.getElementsByTagName('tr');
+ for (let i = 1; i < tr.length; i++) {
+ const tdOption = tr[i].getElementsByTagName('td')[0];
+ const tdDesc = tr[i].getElementsByTagName('td')[1];
+ if (tdOption || tdDesc) {
+ const optionText = tdOption.textContent || tdOption.innerText;
+ const descText = tdDesc.textContent || tdDesc.innerText;
+ if (optionText.toLowerCase().indexOf(filter) > -1 || descText.toLowerCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+ }
+</script>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/architecture/index.html b/www/architecture/index.html
index 573d68174..d6ce8cb2f 100644
--- a/www/architecture/index.html
+++ b/www/architecture/index.html
@@ -11,331 +11,482 @@
<meta name="description" content="Discover the architecture of ImageMagick, including its pixel cache, image properties, profiles, threading, distributed processing, and custom coders/filters. Learn how ImageMagick efficiently manages pixels, metadata, and large images across heterogeneous platforms for powerful image conversion, editing, and composition.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Architecture">
<meta property="og:description" content="Discover the architecture of ImageMagick, including its pixel cache, image properties, profiles, threading, distributed processing, and custom coders/filters. Learn how ImageMagick efficiently manages pixels, metadata, and large images across heterogeneous platforms for powerful image conversion, editing, and composition.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Architecture">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Architecture",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/architecture/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover the architecture of ImageMagick, including its pixel cache, image properties, profiles, threading, distributed processing, and custom coders/filters. Learn how ImageMagick efficiently manages pixels, metadata, and large images across heterogeneous platforms for powerful image conversion, editing, and composition.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/architecture/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/architecture/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Architecture</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#cache">The Pixel Cache</a> • <a href="#properties">Image Properties and Profiles</a> • <a href="#multispectral">Multispectral Imagery</a> • <a href="#tera-pixel">Large Image Support</a> • <a href="#stream">Streaming Pixels</a> • <a href="#threads">Threads of Execution</a> • <a href="#dynamic-throttle">Enable Dynamic Throttling for Optimized Performance</a> • <a href="#distributed">Heterogeneous Distributed Processing</a> • <a href="#coders">Custom Image Coders</a> • <a href="#filters">Custom Image Filters</a></p>
-
-<p class="lead">The citizens of Oz were quite content with their benefactor, the all-powerful Wizard. They accepted his wisdom and benevolence without ever questioning the who, why, and where of his power. Like the citizens of Oz, if you feel comfortable that ImageMagick can help you convert, edit, or compose your images without knowing what goes on behind the curtain, feel free to skip this section. However, if you want to know more about the software and algorithms behind ImageMagick, read on. To fully benefit from this discussion, you should be comfortable with image nomenclature and be familiar with computer programming.</p>
-
-<h2><a class="anchor" id="overview"></a>Architecture Overview</h2>
-
-<p>An image typically consists of a rectangular region of pixels and metadata. To convert, edit, or compose an image in an efficient manner, we need convenient access to any pixel anywhere within the region (and sometimes outside the region). And in the case of an image sequence, we need access to any pixel of any region of any image in the sequence. However, there are hundreds of image formats such JPEG, TIFF, PNG, GIF, etc., that makes it difficult to access pixels on demand. Within these formats we find differences in:</p>
-
-<ul>
- <li>colorspace (e.g. sRGB, linear RGB, linear GRAY, CMYK, YUV, Lab, etc.)</li>
- <li>bit depth (e.g. 1, 4, 8, 12, 16, etc.)</li>
- <li>storage format (e.g. unsigned, signed, float, double, etc.)</li>
- <li>compression (e.g. uncompressed, RLE, Zip, BZip, etc.)</li>
- <li>orientation (i.e. top-to-bottom, right-to-left, etc.),</li>
- <li>layout (e.g. raw, interspersed with opcodes, etc.)</li>
-</ul>
-
-<p>In addition, some image pixels may require attenuation, some formats permit more than one frame, and some formats contain vector graphics that must first be rasterized (converted from vector to pixels).</p>
-
-<p>An efficient implementation of an image processing algorithm may require we get or set:</p>
-
-<ul>
- <li>one pixel a time (e.g. pixel at location 10,3)</li>
- <li>a single scanline (e.g. all pixels from row 4)</li>
- <li>a few scanlines at once (e.g. pixel rows 4-7)</li>
- <li>a single column or columns of pixels (e.g. all pixels from column 11)</li>
- <li>an arbitrary region of pixels from the image (e.g. pixels defined at 10,7 to 10,19)</li>
- <li>a pixel in random order (e.g. pixel at 14,15 and 640,480)</li>
- <li>pixels from two different images (e.g. pixel at 5,1 from image 1 and pixel at 5,1 from image 2)</li>
- <li>pixels outside the boundaries of the image (e.g. pixel at -1,-3)</li>
- <li>a pixel component that is unsigned (65311) or in a floating-point representation (e.g. 0.17836)</li>
- <li>a high-dynamic range pixel that can include negative values (e.g. -0.0072973525628) as well as values that exceed the quantum depth (e.g. 65931)</li>
- <li>one or more pixels simultaneously in different threads of execution</li>
- <li>all the pixels in memory to take advantage of speed-ups offered by executing in concert across heterogeneous platforms consisting of CPUs, GPUs, and other processors</li>
- <li>traits associated with each channel to specify whether the pixel channel is copied, updated, or blended</li>
- <li>masks that define which pixels are eligible to be updated</li>
- <li>extra channels that benefits the user but otherwise remain untouched by ImageMagick image processing algorithms</li>
-</ul>
-
-<p>Given the varied image formats and image processing requirements, we implemented the ImageMagick <a href="#cache">pixel cache</a> to provide convenient sequential or parallel access to any pixel on demand anywhere inside the image region (i.e. <a href="#authentic-pixels">authentic pixels</a>) and from any image in a sequence. In addition, the pixel cache permits access to pixels outside the boundaries defined by the image (i.e. <a href="#virtual-pixels">virtual pixels</a>).</p>
-
-<p>In addition to pixels, images have a plethora of <a href="#properties">image properties and profiles</a>. Properties include the well known attributes such as width, height, depth, and colorspace. An image may have optional properties which might include the image author, a comment, a create date, and others. Some images also include profiles for color management, or EXIF, IPTC, 8BIM, or XMP informational profiles. ImageMagick provides command line options and programming methods to get, set, or view image properties or profiles or apply profiles.</p>
-
-<p>ImageMagick consists of nearly a half million lines of C code and optionally depends on several million lines of code in dependent libraries (e.g. JPEG, PNG, TIFF libraries). Given that, one might expect a huge architecture document. However, a great majority of image processing is simply accessing pixels and its metadata and our simple, elegant, and efficient implementation makes this easy for the ImageMagick developer. We discuss the implementation of the pixel cache and getting and setting image properties and profiles in the next few sections. Next, we discuss using ImageMagick within a <a href="#threads">thread</a> of execution. In the final sections, we discuss <a href="#coders">image coders</a> to read or write a particular image format followed by a few words on creating a <a href="#filters">filter</a> to access or update pixels based on your custom requirements.</p>
-
-<h2><a class="anchor" id="cache"></a>The Pixel Cache</h2>
-
-<p>The ImageMagick pixel cache is a repository for image pixels with up to 64 channels. The channels are stored contiguously at the depth specified when ImageMagick was built. The channel depths are 8 bits-per-pixel component for the Q8 version of ImageMagick, 16 bits-per-pixel component for the Q16 version, and 32 bits-per-pixel component for the Q32 version. By default pixel components are 32-bit floating-bit <a href="../high-dynamic-range/index.html">high dynamic-range</a> quantities. The channels can hold any value but typically contain red, green, blue, and alpha intensities or cyan, magenta, yellow, black and alpha intensities. A channel might contain the colormap indexes for colormapped images or the black channel for CMYK images. The pixel cache storage may be heap memory, disk-backed memory mapped, or on disk. The pixel cache is reference-counted. Only the cache properties are copied when the cache is cloned. The cache pixels are subsequently copied only when you signal your intention to update any of the pixels.</p>
-
-<h2>Create the Pixel Cache</h2>
-
-<p>The pixel cache is associated with an image when it is created and it is initialized when you try to get or put pixels. Here are three common methods to associate a pixel cache with an image:</p>
-
-<dl>
-<dt class="col-md-8">Create an image canvas initialized to the background color:</dt><br/>
-<dd class="col-md-8"><pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>image=AllocateImage(image_info);
-if (SetImageExtent(image,640,480) == MagickFalse)
- { /* an exception was thrown */ }
-(void) QueryMagickColor("red",&image->background_color,&image->exception);
-SetImageBackgroundColor(image);
-</code></pre></dd>
-
-<dt class="col-md-8">Create an image from a JPEG image on disk:</dt><br/>
-<dd class="col-md-8"><pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>(void) strcpy(image_info->filename,"image.jpg"):
-image=ReadImage(image_info,exception);
-if (image == (Image *) NULL)
- { /* an exception was thrown */ }
-</code></pre></dd>
-<dt class="col-md-8">Create an image from a memory based image:</dt><br/>
-<dd class="col-md-8"><pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>image=BlobToImage(blob_info,blob,extent,exception);
-if (image == (Image *) NULL)
- { /* an exception was thrown */ }
-</code></pre></dd>
-</dl>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Architecture</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover the architecture of ImageMagick, including its pixel cache, image properties, profiles, threading, distributed processing, and custom coders/filters. Learn how ImageMagick efficiently manages pixels, metadata, and large images across heterogeneous platforms for powerful image conversion, editing, and composition.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>In our discussion of the pixel cache, we use the <a href="../magick-core/index.html">MagickCore API</a> to illustrate our points, however, the principles are the same for other program interfaces to ImageMagick.</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Page Quick Nav Pills -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap justify-content-center gap-2 p-2 bg-body-tertiary rounded-3 border">
+ <a href="#cache" class="btn btn-sm btn-outline-secondary border-0">Pixel Cache</a>
+ <a href="#properties" class="btn btn-sm btn-outline-secondary border-0">Properties & Profiles</a>
+ <a href="#multispectral" class="btn btn-sm btn-outline-secondary border-0">Multispectral</a>
+ <a href="#tera-pixel" class="btn btn-sm btn-outline-secondary border-0">Large Images</a>
+ <a href="#stream" class="btn btn-sm btn-outline-secondary border-0">Streaming</a>
+ <a href="#threads" class="btn btn-sm btn-outline-secondary border-0">Threads</a>
+ <a href="#dynamic-throttle" class="btn btn-sm btn-outline-secondary border-0">Throttling</a>
+ <a href="#distributed" class="btn btn-sm btn-outline-secondary border-0">Distributed</a>
+ <a href="#coders" class="btn btn-sm btn-outline-secondary border-0">Coders</a>
+ <a href="#filters" class="btn btn-sm btn-outline-secondary border-0">Filters</a>
+ </div>
+ </div>
+ </div>
-<p>When the pixel cache is initialized, pixels are scaled from whatever bit depth they originated from to that required by the pixel cache. For example, a 1-channel 1-bit monochrome PBM image is scaled to 8-bit gray image, if you are using the Q8 version of ImageMagick, and 16-bit RGBA for the Q16 version. You can determine which version you have with the <a href="../command-line-options/index.html#version">-version</a> option: </p>
+ <!-- Lead Description Section -->
+ <div class="row mb-5">
+ <div class="col-lg-10 mx-auto text-center">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 mb-3 fs-7">
+ <i class="bi bi-cpu-fill"></i>
+ <span class="small fw-semibold">Under the Hood</span>
+ </div>
+ <h1 class="display-5 fw-bold mb-3">Architecture of ImageMagick</h1>
+ <p class="lead text-body-secondary">
+ The citizens of Oz were quite content with their benefactor, the all-powerful Wizard. They accepted his wisdom and benevolence without ever questioning the who, why, and where of his power. Like the citizens of Oz, if you feel comfortable that ImageMagick can help you convert, edit, or compose your images without knowing what goes on behind the curtain, feel free to skip this section. However, if you want to know more about the software and algorithms behind ImageMagick, read on. To fully benefit from this discussion, you should be comfortable with image nomenclature and be familiar with computer programming.
+ </p>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ identify -version
-Version: ImageMagick 7.1.2-31 2026-09-03 Q16-HDRI https://imagemagick.org</samp></pre>
+ <!-- Architecture Overview Section -->
+ <section class="mb-5" id="overview">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-diagram-3 fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Architecture Overview</h2>
+ </div>
-<p>As you can see, the convenience of the pixel cache sometimes comes with a trade-off in storage (e.g. storing a 1-bit monochrome image as 16-bit is wasteful) and speed (i.e. storing the entire image in memory is generally slower than accessing one scanline of pixels at a time). In most cases, the benefits of the pixel cache typically outweigh any disadvantages.</p>
+ <div class="card im-card p-4 mb-4">
+ <p class="text-body-secondary mb-3">
+ An image typically consists of a rectangular region of pixels and metadata. To convert, edit, or compose an image in an efficient manner, we need convenient access to any pixel anywhere within the region (and sometimes outside the region). And in the case of an image sequence, we need access to any pixel of any region of any image in the sequence. However, there are hundreds of image formats such JPEG, TIFF, PNG, GIF, etc., that makes it difficult to access pixels on demand. Within these formats we find differences in:
+ </p>
+ <div class="row g-3 mb-3">
+ <div class="col-md-6">
+ <ul class="list-unstyled d-flex flex-column gap-2 small text-body-secondary mb-0">
+ <li><i class="bi bi-dot text-primary"></i> <strong>Colorspace:</strong> sRGB, linear RGB, linear GRAY, CMYK, YUV, Lab, etc.</li>
+ <li><i class="bi bi-dot text-primary"></i> <strong>Bit depth:</strong> 1, 4, 8, 12, 16, etc.</li>
+ <li><i class="bi bi-dot text-primary"></i> <strong>Storage format:</strong> unsigned, signed, float, double, etc.</li>
+ </ul>
+ </div>
+ <div class="col-md-6">
+ <ul class="list-unstyled d-flex flex-column gap-2 small text-body-secondary mb-0">
+ <li><i class="bi bi-dot text-primary"></i> <strong>Compression:</strong> uncompressed, RLE, Zip, BZip, etc.</li>
+ <li><i class="bi bi-dot text-primary"></i> <strong>Orientation:</strong> top-to-bottom, right-to-left, etc.</li>
+ <li><i class="bi bi-dot text-primary"></i> <strong>Layout:</strong> raw, interspersed with opcodes, etc.</li>
+ </ul>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-0">
+ In addition, some image pixels may require attenuation, some formats permit more than one frame, and some formats contain vector graphics that must first be rasterized (converted from vector to pixels).
+ </p>
+ </div>
-<h2><a class="anchor" id="authentic-pixels"></a>Access the Pixel Cache</h2>
+ <div class="card im-card p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-list-check me-2"></i>Processing Requirements</h5>
+ <p class="small text-body-secondary mb-3">An efficient implementation of an image processing algorithm may require we get or set:</p>
+ <ul class="list-unstyled row g-2 small text-body-secondary mb-0">
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> One pixel a time (e.g. pixel at location 10,3)</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> A single scanline (e.g. all pixels from row 4)</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> A few scanlines at once (e.g. pixel rows 4-7)</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> A single column or columns of pixels</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> An arbitrary region of pixels from the image</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> A pixel in random order (e.g. 14,15 and 640,480)</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> Pixels from two different images</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> Pixels outside image boundaries (e.g. -1,-3)</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> High-dynamic range or floating-point components</li>
+ <li class="col-md-6"><i class="bi bi-check2 text-success me-1"></i> Multi-threaded execution & heterogeneous platforms</li>
+ </ul>
+ </div>
+ </section>
-<p>Once the pixel cache is associated with an image, you typically want to get, update, or put pixels into it. We refer to pixels inside the image region as <a href="#authentic-pixels">authentic pixels</a> and outside the region as <a href="#virtual-pixels">virtual pixels</a>. Use these methods to access the pixels in the cache:</p>
-<ul>
- <li>GetVirtualPixels(): gets pixels that you do not intend to modify or pixels that lie outside the image region (e.g. pixel @ -1,-3)</li>
- <li>GetAuthenticPixels(): gets pixels that you intend to modify</li>
- <li>QueueAuthenticPixels(): queue pixels that you intend to set</li>
- <li>SyncAuthenticPixels(): update the pixel cache with any modified pixels</li>
-</ul>
+ <!-- The Pixel Cache -->
+ <section class="mb-5" id="cache">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-memory fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">The Pixel Cache</h2>
+ </div>
-<p>Here is a typical <a href="../magick-core/index.html">MagickCore</a> code snippet for manipulating pixels in the pixel cache. In our example, we copy pixels from the input image to the output image and decrease the intensity by 10%:</p>
+ <div class="card im-card p-4 mb-4">
+ <p class="text-body-secondary mb-3">
+ The ImageMagick pixel cache is a repository for image pixels with up to 64 channels. The channels are stored contiguously at the depth specified when ImageMagick was built. The channel depths are 8 bits-per-pixel component for the Q8 version of ImageMagick, 16 bits-per-pixel component for the Q16 version, and 32 bits-per-pixel component for the Q32 version. By default pixel components are 32-bit floating-bit <a href="../high-dynamic-range/index.html" class="text-decoration-none fw-semibold">high dynamic-range</a> quantities. The channels can hold any value but typically contain red, green, blue, and alpha intensities or cyan, magenta, yellow, black and alpha intensities.
+ </p>
+ </div>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>const Quantum
- *p;
+ <h4 class="fw-bold mb-3">Create the Pixel Cache</h4>
+ <p class="text-body-secondary mb-3">The pixel cache is associated with an image when it is created and it is initialized when you try to get or put pixels. Here are three common methods to associate a pixel cache with an image:</p>
+
+ <div class="row g-4 mb-4">
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3">
+ <h6 class="fw-bold text-primary mb-2">Canvas Initialized</h6>
+ <p class="small text-body-secondary mb-2">Create canvas to background color:</p>
+ <div class="terminal-card">
+ <div class="p-2 text-light font-mono small">
+ image=AllocateImage(image_info);<br>
+ SetImageExtent(image,640,480);<br>
+ QueryMagickColor("red",...);<br>
+ SetImageBackgroundColor(image);
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3">
+ <h6 class="fw-bold text-primary mb-2">From Disk Image</h6>
+ <p class="small text-body-secondary mb-2">Create from a JPEG on disk:</p>
+ <div class="terminal-card">
+ <div class="p-2 text-light font-mono small">
+ strcpy(image_info->filename,"image.jpg");<br>
+ image=ReadImage(image_info,exception);
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3">
+ <h6 class="fw-bold text-primary mb-2">From Memory Blob</h6>
+ <p class="small text-body-secondary mb-2">Create from a memory blob:</p>
+ <div class="terminal-card">
+ <div class="p-2 text-light font-mono small">
+ image=BlobToImage(blob_info,blob,extent,exception);
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
-Quantum
- *q;
+ <p class="text-body-secondary mb-3">
+ When the pixel cache is initialized, pixels are scaled from whatever bit depth they originated from to that required by the pixel cache. You can determine which version you have with the <a href="../command-line-options/index.html#version" class="text-decoration-none fw-semibold">-version</a> option:
+ </p>
-ssize_t
- x,
- y;
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">identify-version.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> identify -version<br>
+ Version: ImageMagick 7.1.2-34 2026-10-14 Q16-HDRI https://imagemagick.org
+ </div>
+ </div>
-destination=CloneImage(source,source->columns,source->rows,MagickTrue,exception);
-if (destination == (Image *) NULL)
- { /* an exception was thrown */ }
+ <h4 class="fw-bold mb-3" id="authentic-pixels">Access the Pixel Cache</h4>
+ <p class="text-body-secondary mb-3">Once associated, use these methods to access pixels in the cache:</p>
+ <ul class="list-unstyled d-flex flex-column gap-2 small text-body-secondary mb-4">
+ <li><i class="bi bi-check2 text-success me-1"></i> <strong>GetVirtualPixels():</strong> gets pixels you do not intend to modify or outside region (<a href="#virtual-pixels">virtual pixels</a>).</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <strong>GetAuthenticPixels():</strong> gets pixels you intend to modify (<a href="#authentic-pixels">authentic pixels</a>).</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <strong>QueueAuthenticPixels():</strong> queue pixels you intend to set.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <strong>SyncAuthenticPixels():</strong> update the pixel cache with modified pixels.</li>
+ </ul>
+
+ <p class="text-body-secondary mb-3">Here is a typical MagickCore code snippet copying pixels and decreasing intensity by 10%:</p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">pixel-manipulation.c</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-auto" style="max-height: 75svh;">
+ <pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>const Quantum *p;
+Quantum *q;
+ssize_t x, y;<br>
+destination=CloneImage(source,source->columns,source->rows,MagickTrue,exception);
for (y=0; y < (ssize_t) source->rows; y++)
{
p=GetVirtualPixels(source,0,y,source->columns,1,exception);
q=GetAuthenticPixels(destination,0,y,destination->columns,1,exception);
- if ((p == (const Quantum *) NULL) || (q == (Quantum *) NULL)
- break;
+ if ((p == (const Quantum *) NULL) || (q == (Quantum *) NULL)) break;
for (x=0; x < (ssize_t) source->columns; x++)
{
SetPixelRed(image,90*p->red/100,q);
@@ -345,1517 +496,324 @@ for (y=0; y < (ssize_t) source->rows; y++)
p+=GetPixelChannels(source);
q+=GetPixelChannels(destination);
}
- if (SyncAuthenticPixels(destination,exception) == MagickFalse)
- break;
-}
-if (y < (ssize_t) source->rows)
- { /* an exception was thrown */ }
-</code></pre>
-
-<p>When we first create the destination image by cloning the source image, the pixel cache pixels are not copied. They are only copied when you signal your intentions to modify or set the pixel cache by calling GetAuthenticPixels() or QueueAuthenticPixels(). Use QueueAuthenticPixels() if you want to set new pixel values rather than update existing ones. You could use GetAuthenticPixels() to set pixel values but it is slightly more efficient to use QueueAuthenticPixels() instead. Finally, use SyncAuthenticPixels() to ensure any updated pixels are pushed to the pixel cache.</p>
-
-<p>You can associate arbitrary content with each pixel, called <em>meta</em> content. Use GetVirtualMetacontent()(to read the content) or GetAuthenticMetacontent() (to update the content) to gain access to this content. For example, to print the metacontent, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>const void
- *metacontent;
-
-for (y=0; y < (ssize_t) source->rows; y++)
-{
- p=GetVirtualPixels(source,0,y,source->columns,1);
- if (p == (const Quantum *) NULL)
- break;
- metacontent=GetVirtualMetacontent(source);
- /* print meta content here */
-}
-if (y < (ssize_t) source->rows)
- /* an exception was thrown */
-</code></pre>
-
-<p>The pixel cache manager decides whether to give you direct or indirect access to the image pixels. In some cases the pixels are staged to an intermediate buffer-- and that is why you must call SyncAuthenticPixels() to ensure this buffer is <var>pushed</var> out to the pixel cache to guarantee the corresponding pixels in the cache are updated. For this reason we recommend that you only read or update a scanline or a few scanlines of pixels at a time. However, you can get any rectangular region of pixels you want. GetAuthenticPixels() requires that the region you request is within the bounds of the image area. For a 640 by 480 image, you can get a scanline of 640 pixels at row 479 but if you ask for a scanline at row 480, an exception is returned (rows are numbered starting at 0). GetVirtualPixels() does not have this constraint. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>p=GetVirtualPixels(source,-3,-3,source->columns+3,6,exception);
-</code></pre>
-
-<p>gives you the pixels you asked for without complaint, even though some are not within the confines of the image region.</p>
-
-<h2><a class="anchor" id="virtual-pixels"></a>Virtual Pixels</h2>
-
-<p>There are a plethora of image processing algorithms that require a neighborhood of pixels about a pixel of interest. The algorithm typically includes a caveat concerning how to handle pixels around the image boundaries, known as edge pixels. With virtual pixels, you do not need to concern yourself about special edge processing other than choosing which virtual pixel method is most appropriate for your algorithm.</p>
- <p>Access to the virtual pixels are controlled by the SetImageVirtualPixelMethod()</a> method from the MagickCore API or the <a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel</a> option from the command line. The methods include:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td>background</td>
- <td>the area surrounding the image is the background color</td>
- </tr>
- <tr>
- <td>black</td>
- <td>the area surrounding the image is black</td>
- </tr>
- <tr>
- <td>checker-tile</td>
- <td>alternate squares with image and background color</td>
- </tr>
- <tr>
- <td>dither</td>
- <td>non-random 32x32 dithered pattern</td>
- </tr>
- <tr>
- <td>edge</td>
- <td>extend the edge pixel toward infinity (default)</td>
- </tr>
- <tr>
- <td>gray</td>
- <td>the area surrounding the image is gray</td>
- </tr>
- <tr>
- <td>horizontal-tile</td>
- <td>horizontally tile the image, background color above/below</td>
- </tr>
- <tr>
- <td>horizontal-tile-edge</td>
- <td>horizontally tile the image and replicate the side edge pixels</td>
- </tr>
- <tr>
- <td>mirror</td>
- <td>mirror tile the image</td>
- </tr>
- <tr>
- <td>random</td>
- <td>choose a random pixel from the image</td>
- </tr>
- <tr>
- <td>tile</td>
- <td>tile the image</td>
- </tr>
- <tr>
- <td>transparent</td>
- <td>the area surrounding the image is transparent blackness</td>
- </tr>
- <tr>
- <td>vertical-tile</td>
- <td>vertically tile the image, sides are background color</td>
- </tr>
- <tr>
- <td>vertical-tile-edge</td>
- <td>vertically tile the image and replicate the side edge pixels</td>
- </tr>
- <tr>
- <td>white</td>
- <td>the area surrounding the image is white</td>
- </tr>
-</table>
-</div>
-
-
-<h2>Cache Storage and Resource Requirements</h2>
-
-<p>Recall that this simple and elegant design of the ImageMagick pixel cache comes at a cost in terms of storage and processing speed. The pixel cache storage requirements scales with the area of the image and the bit depth of the pixel components. For example, if we have a 640 by 480 image and we are using the non-HDRI Q16 version of ImageMagick, the pixel cache consumes image <var>width * height * bit-depth / 8 * channels</var> bytes or approximately 2.3 mebibytes (i.e. 640 * 480 * 2 * 4). Not too bad, but what if your image is 25000 by 25000 pixels? The pixel cache requires approximately 4.7 gibibytes of storage. Ouch. ImageMagick accounts for possible huge storage requirements by caching large images to disk rather than memory. Typically the pixel cache is stored in memory using heap memory. If heap memory is exhausted, we create the pixel cache on disk and attempt to memory-map it. If memory-map memory is exhausted, we simply use standard disk I/O. Disk storage is plentiful and cheap, but it is also very slow-- upwards of 1000 times slower than accessing pixels in memory. We can get some speed improvements, up to 5 times, if we memory-map the disk-based cache. These decisions about storage are made <var>automagically</var> by the pixel cache manager negotiating with the operating system. However, you can influence how the pixel cache manager allocates the pixel cache with <var>cache resource limits</var>. The limits include:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td>width</td>
- <td>maximum width of an image. Exceed this limit and an exception is thrown and the operation discontinues.</td>
- </tr>
- <tr>
- <td>height</td>
- <td>maximum height of an image. Exceed this limit and an exception is thrown and the operation discontinues.</td>
- </tr>
- <tr>
- <td>area</td>
- <td>maximum area in bytes of any one image that can reside in the pixel cache memory. If this limit is exceeded, the image is automagically cached to disk and optionally memory-mapped.</td>
- </tr>
- <tr>
- <td>memory</td>
- <td>maximum amount of memory in bytes to allocate for the pixel cache from the heap.</td>
- </tr>
- <tr>
- <td>map</td>
- <td>maximum amount of memory map in bytes to allocate for the pixel cache.</td>
- </tr>
- <tr>
- <td>disk</td>
- <td>maximum amount of disk space in bytes permitted for use by the pixel cache. If this limit is exceeded, a fatal exception is thrown, and all processing stops.</td>
- </tr>
- <tr>
- <td>files</td>
- <td>maximum number of open pixel cache files. When this limit is exceeded, any subsequent pixels cached to disk are closed and reopened on demand. This behavior permits a large number of images to be accessed simultaneously on disk without a speed penalty by reducing the number of pixel cache open/close system calls.</td>
- </tr>
- <tr>
- <td>thread</td>
- <td>maximum number of threads that are permitted to run in parallel. Your system may choose a number of threads that is less that this value. ImageMagick chooses an optimum number of threads by default, which is usually the number of cores on your host. Set this value to 1 and all parallel regions are executed by one thread. </td>
- </tr>
- <tr>
- <td>time</td>
- <td>maximum number of seconds that the process is permitted to execute. Exceed this limit and an exception is thrown and processing stops.</td>
- </tr>
-</table>
-</div>
-<br/>
-
-<p>Note, these limits pertain to the ImageMagick pixel cache. Certain algorithms within ImageMagick do not respect these limits nor does any of the external delegate libraries (e.g. JPEG, TIFF, etc.).</p>
-
-<p>To determine the current setting of these limits, use this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-> identify -list resource
-Resource limits:
- Width: 100MP
- Height: 100MP
- Area: 25.181GB
- Memory: 11.726GiB
- Map: 23.452GiB
- Disk: unlimited
- File: 768
- Thread: 12
- Throttle: 0
- Time: unlimited
-</code></pre>
-
-<p>You can set these limits either as a <a href="../security-policy/index.html">security policy</a> (see <a href="../source/policy-open.xml">policy.xml</a>), with an <a href="../resources/index.html#environment">environment variable</a>, with the <a href="../command-line-options/index.html#limit">-limit</a> command line option, or with the SetMagickResourceLimit() MagickCore API method. As an example, our online web interface to ImageMagick, <a href="https://magickstudio.imagemagick.org/">MagickStudio</a>, includes these policy limits to help prevent a denial-of-service:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code><?xml version="1.0" encoding="UTF-8"?>
-<!DOCTYPE policymap [
-<!ELEMENT policymap (policy)*>
-<!ATTLIST policymap xmlns CDATA #FIXED "">
-<!ELEMENT policy EMPTY>
-<!ATTLIST policy xmlns CDATA #FIXED "">
-<!ATTLIST policy domain NMTOKEN #REQUIRED>
-<!ATTLIST policy name NMTOKEN #IMPLIED>
-<!ATTLIST policy pattern CDATA #IMPLIED>
-<!ATTLIST policy rights NMTOKEN #IMPLIED>
-<!ATTLIST policy stealth NMTOKEN #IMPLIED>
-<!ATTLIST policy value CDATA #IMPLIED>
-]>
-<!--
- Creating a security policy that fits your specific local environment
- before making use of ImageMagick is highly advised. You can find guidance on
- setting up this policy at https://imagemagick.org/security-policy/,
- and it's important to verify your policy using the validation tool located
- at https://imagemagick-secevaluator.doyensec.com/.
-
-
- Secure ImageMagick security policy:
-
- This stringent security policy prioritizes the implementation of
- rigorous controls and restricted resource utilization to establish a
- profoundly secure setting while employing ImageMagick. It deactivates
- conceivably hazardous functionalities, including specific coders like
- SVG or HTTP. The policy promotes the tailoring of security measures to
- harmonize with the requirements of the local environment and the guidelines
- of the organization. This protocol encompasses explicit particulars like
- limitations on memory consumption, sanctioned pathways for reading and
- writing, confines on image sequences, the utmost permissible duration of
- workflows, allocation of disk space intended for image data, and even an
- undisclosed passphrase for remote connections. By adopting this robust
- policy, entities can elevate their overall security stance and alleviate
- potential vulnerabilities.
--->
-<policymap>
- <!-- Set maximum parallel threads. -->
- <policy domain="resource" name="thread" value="2"/>
- <!-- Set maximum time in seconds. When this limit is exceeded, an exception
- is thrown and processing stops. -->
- <policy domain="resource" name="time" value="120"/>
- <!-- Set maximum number of open pixel cache files. When this limit is
- exceeded, any subsequent pixels cached to disk are closed and reopened
- on demand. -->
- <policy domain="resource" name="file" value="768"/>
- <!-- Set maximum amount of memory in bytes to allocate for the pixel cache
- from the heap. When this limit is exceeded, the image pixels are cached
- to memory-mapped disk. -->
- <policy domain="resource" name="memory" value="256MiB"/>
- <!-- Set maximum amount of memory map in bytes to allocate for the pixel
- cache. When this limit is exceeded, the image pixels are cached to
- disk. -->
- <policy domain="resource" name="map" value="512MiB"/>
- <!-- Set the maximum width * height of an image that can reside in the pixel
- cache memory. Images that exceed the area limit are cached to disk. -->
- <policy domain="resource" name="area" value="16KP"/>
- <!-- Set maximum amount of disk space in bytes permitted for use by the pixel
- cache. When this limit is exceeded, the pixel cache is not be created
- and an exception is thrown. -->
- <policy domain="resource" name="disk" value="1GiB"/>
- <!-- Set the maximum length of an image sequence. When this limit is
- exceeded, an exception is thrown. -->
- <policy domain="resource" name="list-length" value="32"/>
- <!-- Set the maximum width of an image. When this limit is exceeded, an
- exception is thrown. -->
- <policy domain="resource" name="width" value="8KP"/>
- <!-- Set the maximum height of an image. When this limit is exceeded, an
- exception is thrown. -->
- <policy domain="resource" name="height" value="8KP"/>
- <!-- Periodically yield the CPU for at least the time specified in
- milliseconds. -->
- <!-- <policy domain="resource" name="throttle" value="2"/> -->
- <!-- Do not create temporary files in the default shared directories, instead
- specify a private area to store only ImageMagick temporary files. -->
- <!-- <policy domain="resource" name="temporary-path" value="/magick/tmp"/> -->
- <!-- Force memory initialization by memory mapping select memory
- allocations. -->
- <policy domain="cache" name="memory-map" value="anonymous"/>
- <!-- Ensure all image data is fully flushed and synchronized to disk. -->
- <policy domain="cache" name="synchronize" value="true"/>
- <!-- Replace passphrase for secure distributed processing -->
- <!-- <policy domain="cache" name="shared-secret" value="secret-passphrase" stealth="true"/> -->
- <!-- Do not permit any delegates to execute. -->
- <policy domain="delegate" rights="none" pattern="*"/>
- <!-- Do not permit any image filters to load. -->
- <policy domain="filter" rights="none" pattern="*"/>
- <!-- Don't read/write from/to stdin/stdout. -->
- <policy domain="path" rights="none" pattern="-"/>
- <!-- don't read sensitive paths. -->
- <policy domain="path" rights="none" pattern="/etc/*"/>
- <!-- Indirect reads are not permitted. -->
- <policy domain="path" rights="none" pattern="@*"/>
- <!-- These image types are security risks on read, but write is fine -->
- <policy domain="module" rights="write" pattern="{MSL,MVG,PS,SVG,URL,XPS}"/>
- <!-- This policy sets the number of times to replace content of certain
- memory buffers and temporary files before they are freed or deleted. -->
- <policy domain="system" name="shred" value="1"/>
- <!-- Enable the initialization of buffers with zeros, resulting in a minor
- performance penalty but with improved security. -->
- <policy domain="system" name="memory-map" value="anonymous"/>
- <!-- Set the maximum amount of memory in bytes that is permitted for
- allocation requests. -->
- <policy domain="system" name="max-memory-request" value="256MiB"/>
-</policymap></code></pre>
-
-<p>Since we process multiple simultaneous sessions, we don't want any one session consuming all the available memory. With this policy, large images are cached to disk. If the image is too large and exceeds the pixel cache disk limit, the program exits. In addition, we place a time limit to prevent any run-away processing tasks. If any one image has a width or height that exceeds 8192 pixels, an exception is thrown and processing stops. As of ImageMagick 7.0.1-8, you can prevent the use of any delegate or all delegates (set the pattern to "*"). Note, prior to this release, use a domain of "coder" to prevent delegate usage (e.g. domain="coder" rights="none" pattern="HTTPS"). The policy also prevents indirect reads. If you want to, for example, read text from a file (e.g. caption:@myCaption.txt), you'll need to remove this policy.</p>
-
-<p>Note, the cache limits are global to each invocation of ImageMagick, meaning if you create several images, the combined resource requirements are compared to the limit to determine the pixel cache storage disposition.</p>
-
-<p>To determine which type and how much resources are consumed by the pixel cache, add the <a href="../command-line-options/index.html#debug">-debug cache</a> option to the command-line:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick -debug cache logo: -sharpen 3x2 null:
-2016-12-17T13:33:42-05:00 0:00.000 0.000u 7.0.0 Cache magick: cache.c/DestroyPixelCache/1275/Cache
- destroy
-2016-12-17T13:33:42-05:00 0:00.000 0.000u 7.0.0 Cache magick: cache.c/OpenPixelCache/3834/Cache
- open LOGO[0] (Heap Memory, 640x480x4 4.688MiB)
-2016-12-17T13:33:42-05:00 0:00.010 0.000u 7.0.0 Cache magick: cache.c/OpenPixelCache/3834/Cache
- open LOGO[0] (Heap Memory, 640x480x3 3.516MiB)
-2016-12-17T13:33:42-05:00 0:00.010 0.000u 7.0.0 Cache magick: cache.c/ClonePixelCachePixels/1044/Cache
- Memory => Memory
-2016-12-17T13:33:42-05:00 0:00.020 0.010u 7.0.0 Cache magick: cache.c/ClonePixelCachePixels/1044/Cache
- Memory => Memory
-2016-12-17T13:33:42-05:00 0:00.020 0.010u 7.0.0 Cache magick: cache.c/OpenPixelCache/3834/Cache
- open LOGO[0] (Heap Memory, 640x480x3 3.516MiB)
-2016-12-17T13:33:42-05:00 0:00.050 0.100u 7.0.0 Cache magick: cache.c/DestroyPixelCache/1275/Cache
- destroy LOGO[0]
-2016-12-17T13:33:42-05:00 0:00.050 0.100u 7.0.0 Cache magick: cache.c/DestroyPixelCache/1275/Cache
- destroy LOGO[0]
-</samp></pre>
-<p>This command utilizes a pixel cache in memory. The logo consumed 4.688MiB and after it was sharpened, 3.516MiB.</p>
-
-
-<h2>Distributed Pixel Cache</h2>
-<p>A distributed pixel cache is an extension of the traditional pixel cache available on a single host. The distributed pixel cache may span multiple servers so that it can grow in size and transactional capacity to support very large images. Start up the pixel cache server on one or more machines. When you read or operate on an image and the local pixel cache resources are exhausted, ImageMagick contacts one or more of these remote pixel servers to store or retrieve pixels. The distributed pixel cache relies on network bandwidth to marshal pixels to and from the remote server. As such, it will likely be significantly slower than a pixel cache utilizing local storage (e.g. memory, disk, etc.).</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -distribute-cache 6668 & // start on 192.168.100.50
-$ magick -define registry:cache:hosts=192.168.100.50:6668 myimage.jpg -sharpen 5x2 mimage.png
-</samp></pre>
-
-<h2>Cache Views</h2>
-
-<p>GetVirtualPixels(), GetAuthenticPixels(), QueueAuthenticPixels(), and SyncAuthenticPixels(), from the MagickCore API, can only deal with one pixel cache area per image at a time. Suppose you want to access the first and last scanline from the same image at the same time? The solution is to use a <var>cache view</var>. A cache view permits you to access as many areas simultaneously in the pixel cache as you require. The cache view <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cache-view.h">methods</a> are analogous to the previous methods except you must first open a view and close it when you are finished with it. Here is a snippet of MagickCore code that permits us to access the first and last pixel row of the image simultaneously:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>CacheView
- *first_row,
- *last_row;
-
-first_row=AcquireVirtualCacheView(source,exception);
-last_row=AcquireVirtualCacheView(source,exception);
-for (y=0; y < (ssize_t) source->rows; y++)
-{
- const Quantum
- *p,
- *q;
-
- p=GetCacheViewVirtualPixels(first_row,0,y,source->columns,1,exception);
- q=GetCacheViewVirtualPixels(last_row,0,source->rows-y-1,source->columns,1,exception);
- if ((p == (const Quantum *) NULL) || (q == (const Quantum *) NULL))
- break;
- for (x=0; x < (ssize_t) source->columns; x++)
- {
- /* do something with p & q here */
- }
+ if (SyncAuthenticPixels(destination,exception) == MagickFalse) break;
}
-last_row=DestroyCacheView(last_row);
-first_row=DestroyCacheView(first_row);
-if (y < (ssize_t) source->rows)
+if (y < (ssize_t) source->rows)
{ /* an exception was thrown */ }
</code></pre>
+ </div>
+ </div>
+ <p>Use GetVirtualMetacontent() to retrieve any meta-content associated with each pixel, for example, an infrared channel.</p>
+
+ <h4 class="fw-bold mb-3" id="virtual-pixels">Virtual Pixels</h4>
+ <p class="text-body-secondary mb-3">
+ A virtual pixel defines what value should be returned when an operation needs a pixel that lies outside the actual image boundaries, such as during blurs, distortions, resizes, or neighborhood-based filters. Access to virtual pixels is controlled by the SetImageVirtualPixelMethod() method or <a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-semibold">-virtual-pixel</a> option. Recognized methods include:
+ </p>
+
+ <div class="card im-card overflow-hidden mb-4">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr><td>background</td><td>surrounding area is background color</td></tr>
+ <tr><td>black</td><td>surrounding area is black</td></tr>
+ <tr><td>checker-tile</td><td>alternate squares with image and background color</td></tr>
+ <tr><td>dither</td><td>non-random 32x32 dithered pattern</td></tr>
+ <tr><td>edge</td><td>extend edge pixel toward infinity (default)</td></tr>
+ <tr><td>gray</td><td>surrounding area is gray</td></tr>
+ <tr><td>horizontal-tile</td><td>horizontally tile image, background color above/below</td></tr>
+ <tr><td>horizontal-tile-edge</td><td>horizontally tile image and replicate side edge pixels</td></tr>
+ <tr><td>mirror</td><td>mirror tile image</td></tr>
+ <tr><td>random</td><td>choose random pixel from image</td></tr>
+ <tr><td>tile</td><td>tile image</td></tr>
+ <tr><td>transparent</td><td>surrounding area is transparent blackness</td></tr>
+ <tr><td>vertical-tile</td><td>vertically tile image, sides are background color</td></tr>
+ <tr><td>vertical-tile-edge</td><td>vertically tile image and replicate side edge pixels</td></tr>
+ <tr><td>white</td><td>surrounding area is white</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
-<h2>Magick Pixel Cache Format</h2>
-
-<p>Recall that each image format is decoded by ImageMagick and the pixels are deposited in the pixel cache. If you write an image, the pixels are read from the pixel cache and encoded as required by the format you are writing (e.g. GIF, PNG, etc.). The Magick Pixel Cache (MPC) format is designed to eliminate the overhead of decoding and encoding pixels to and from an image format. MPC writes two files. One, with the extension <code>.mpc</code>, retains all the properties associated with the image or image sequence (e.g. width, height, colorspace, etc.) and the second, with the extension <code>.cache</code>, is the pixel cache in the native raw format. When reading an MPC image file, ImageMagick reads the image properties and memory maps the pixel cache on disk eliminating the need for decoding the image pixels. The trade-off is in disk space. MPC is generally larger in file size than most other image formats.</p>
-<p>The most efficient use of MPC image files is a write-once, read-many-times pattern. For example, your workflow requires extracting random blocks of pixels from the source image. Rather than re-reading and possibly decompressing the source image each time, we use MPC and map the image directly to memory.</p>
-
-<h2>Pixel Cache Recommended Practices</h2>
-
-<p>Although you can request any pixel from the pixel cache, any block of pixels, any scanline, multiple scanlines, any row, or multiple rows with the GetVirtualPixels(), GetAuthenticPixels(), QueueAuthenticPixels, GetCacheViewVirtualPixels(), GetCacheViewAuthenticPixels(), and QueueCacheViewAuthenticPixels() methods, ImageMagick is optimized to return a few pixels or a few pixels rows at time. There are additional optimizations if you request a single scanline or a few scanlines at a time. These methods also permit random access to the pixel cache, however, ImageMagick is optimized for sequential access. Although you can access scanlines of pixels sequentially from the last row of the image to the first, you may get a performance boost if you access scanlines from the first row of the image to the last, in sequential order.</p>
-
-<p>You can get, modify, or set pixels in row or column order. However, it is more efficient to access the pixels by row rather than by column.</p>
-
-<p>If you update pixels returned from GetAuthenticPixels() or GetCacheViewAuthenticPixels(), don't forget to call SyncAuthenticPixels() or SyncCacheViewAuthenticPixels() respectively to ensure your changes are synchronized with the pixel cache.</p>
-
-<p>Use QueueAuthenticPixels() or QueueCacheViewAuthenticPixels() if you are setting an initial pixel value. The GetAuthenticPixels() or GetCacheViewAuthenticPixels() method reads pixels from the cache and if you are setting an initial pixel value, this read is unnecessary. Don't forget to call SyncAuthenticPixels() or SyncCacheViewAuthenticPixels() respectively to push any pixel changes to the pixel cache.</p>
-
-<p>GetVirtualPixels(), GetAuthenticPixels(), QueueAuthenticPixels(), and SyncAuthenticPixels() are slightly more efficient than their cache view counter-parts. However, cache views are required if you need access to more than one region of the image simultaneously or if more than one <a href="#threads">thread of execution</a> is accessing the image.</p>
-
-<p>You can request pixels outside the bounds of the image with GetVirtualPixels() or GetCacheViewVirtualPixels(), however, it is more efficient to request pixels within the confines of the image region.</p>
-
-<p>Although you can force the pixel cache to disk using appropriate resource limits, disk access can be upwards of 1000 times slower than memory access. For fast, efficient, access to the pixel cache, try to keep the pixel cache in heap memory.</p>
-
-<p>The ImageMagick Q16 version of ImageMagick permits you to read and write 16 bit images without scaling but the pixel cache consumes twice as many resources as the Q8 version. If your system has constrained memory or disk resources, consider the Q8 version of ImageMagick. In addition, the Q8 version typically executes faster than the Q16 version.</p>
-
-<p>A great majority of image formats and algorithms restrict themselves to a fixed range of pixel values from 0 to some maximum value, for example, the Q16 version of ImageMagick permit intensities from 0 to 65535. High dynamic-range imaging (HDRI), however, permits a far greater dynamic range of exposures (i.e. a large difference between light and dark areas) than standard digital imaging techniques. HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows. Enable <a href="../high-dynamic-range/index.html">HDRI</a> at ImageMagick build time to deal with high dynamic-range images, but be mindful that each pixel component is a 32-bit floating point value. In addition, pixel values are not clamped by default so some algorithms may have unexpected results due to out-of-band pixel values than the non-HDRI version.</p>
-
-<p>If you are dealing with large images, make sure the pixel cache is written to a disk area with plenty of free space. Under Linux, this is typically <code>/tmp</code> and for Windows, <code>c:/temp</code>. You can tell ImageMagick to write the pixel cache to an alternate location and conserve memory with these options:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -limit memory 2GB -limit map 4GB -define registry:temporary-path=/data/tmp ...
-</samp></pre>
-
-<p>Set global resource limits for your environment in the <code>policy.xml</code> configuration file.</p>
-
-<p>If you plan on processing the same image many times, consider the MPC format. Reading a MPC image has near-zero overhead because its in the native pixel cache format eliminating the need for decoding the image pixels. Here is an example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick image.tif image.mpc
-magick image.mpc -crop 100x100+0+0 +repage 1.png
-magick image.mpc -crop 100x100+100+0 +repage 2.png
-magick image.mpc -crop 100x100+200+0 +repage 3.png
-</samp></pre>
-
-<p>MPC is ideal for web sites. It reduces the overhead of reading and writing an image. We use it exclusively at our <a href="https://magickstudio.imagemagick.org/scripts/MagickStudio.cgi">online image studio</a>.</p>
-
-<h2><a class="anchor" id="properties"></a>Image Properties and Profiles</h2>
-
-<p>Images have metadata associated with them in the form of properties (e.g. width, height, description, etc.) and profiles (e.g. EXIF, IPTC, color management). ImageMagick provides convenient methods to get, set, or update image properties and get, set, update, or apply profiles. Some of the more popular image properties are associated with the Image structure in the MagickCore API. For example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>(void) printf("image width: %lu, height: %lu\n",image->columns,image->rows);
-</code></pre>
-
-<p>For a great majority of image properties, such as an image comment or description, we use the GetImageProperty() and SetImageProperty() methods. Here we set a property and fetch it right back:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>const char
- *comment;
-
-(void) SetImageProperty(image,"comment","This space for rent");
-comment=GetImageProperty(image,"comment");
-if (comment == (const char *) NULL)
- (void) printf("Image comment: %s\n",comment);
-</code></pre>
-
-<p>ImageMagick supports artifacts with the GetImageArtifact() and SetImageArtifact() methods. Artifacts are stealth properties that are not exported to image formats (e.g. PNG).</p>
-
-<p>Image profiles are handled with GetImageProfile(), SetImageProfile(), and ProfileImage() methods. Here we set a profile and fetch it right back:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>StringInfo
- *profile;
-
-profile=AcquireStringInfo(length);
-SetStringInfoDatum(profile,my_exif_profile);
-(void) SetImageProfile(image,"EXIF",profile);
-DestroyStringInfo(profile);
-profile=GetImageProfile(image,"EXIF");
-if (profile != (StringInfo *) NULL)
- (void) PrintStringInfo(stdout,"EXIF",profile);
-</code></pre>
-
-<h2><a class="anchor" id="multispectral"></a>Multispectral Imagery</h2>
-<p>ImageMagick supports <a href="../multispectral-imagery/index.html">multispectral imagery</a> where all channels have the same dimensions and number of pixels as the original image. However, not all image formats support multispectral images. PSD, TIFF, MIFF, MPC, and FTXT have full support for multispectral images up to 31 bands, 21 of them meta channels. Note, if you build ImageMagick with the configure script <code>--enable-64bit-channel-masks</code> option, you can process 62 band multispectral images with up to 52 meta channels.</p>
-<p>If you have a use case that is not currently supported by an image format, post it to the <a href="https://github.com/ImageMagick/ImageMagick/discussions">discussion forum</a>. There is a good chance, we can support your use case in a future release of ImageMagick.</p>
-
-
-<h2><a class="anchor" id="stream"></a>Streaming Pixels</h2>
-
-<p>ImageMagick provides for streaming pixels as they are read from or written to an image. This has several advantages over the pixel cache. The time and resources consumed by the pixel cache scale with the area of an image, whereas the pixel stream resources scale with the width of an image. The disadvantage is the pixels must be consumed as they are streamed so there is no persistence.</p>
-
-<p>Use ReadStream() or WriteStream() with an appropriate callback method in your MagickCore program to consume the pixels as they are streaming. Here's an abbreviated example of using ReadStream:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>static size_t StreamPixels(const Image *image,const void *pixels,const size_t columns)
-{
- register const Quantum
- *p;
-
- MyData
- *my_data;
-
- my_data=(MyData *) image->client_data;
- p=(Quantum *) pixels;
- if (p != (const Quantum *) NULL)
- {
- /* process pixels here */
- }
- return(columns);
-}
-
-...
-
-/* invoke the pixel stream here */
-image_info->client_data=(void *) MyData;
-image=ReadStream(image_info,&StreamPixels,exception);
-</code></pre>
-
-<p>We also provide a lightweight tool, <a href="../stream/index.html">stream</a>, to stream one or more pixel components of the image or portion of the image to your choice of storage formats. It writes the pixel components as they are read from the input image a row at a time making <a href="../stream/index.html">stream</a> desirable when working with large images or when you require raw pixel components. A majority of the image formats stream pixels (red, green, and blue) from left to right and top to bottom. However, a few formats do not support this common ordering (e.g. the PSD format).</p>
-
-<h2><a class="anchor" id="tera-pixel"></a>Large Image Support</h2>
-<p>ImageMagick has the capability to handle image sizes spanning from mega- to tera-pixels, encompassing reading, processing, and writing operations. In theory, image dimensions can extend up to 31 million rows/columns on a 32-bit operating system and up to a whopping 31 trillion on a 64-bit OS. However, the actual achievable dimensions are substantially less, contingent on the resources available on your host computer. It's essential to be aware that certain image formats impose limitations on image size. For instance, Photoshop images are constrained to a maximum of 300,000 pixels in width or height. Here we resize an image to a quarter million pixels square:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -resize 250000x250000 logo.miff
-</samp></pre>
-
-<p>For large images, memory resources will likely be exhausted and ImageMagick will instead create a pixel cache on disk. Make sure you have plenty of temporary disk space. If your default temporary disk partition is too small, tell ImageMagick to use another partition with plenty of free space. For example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -define registry:temporary-path=/data/tmp logo: \ <br/> -resize 250000x250000 logo.miff
-</samp></pre>
-
-<p>To ensure large images do not consume all the memory on your system, force the image pixels to memory-mapped disk with resource limits:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -define registry:temporary-path=/data/tmp -limit memory 16mb \
- logo: -resize 250000x250000 logo.miff
-</code></pre>
-
-<p>Here we force all image pixels to disk:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -define registry:temporary-path=/data/tmp -limit area 0 \
- logo: -resize 250000x250000 logo.miff
-</samp></pre>
-
-<p>Caching pixels to disk is about 1000 times slower than memory. Expect long run times when processing large images on disk with ImageMagick. You can monitor progress with this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -monitor -limit memory 2GiB -limit map 4GiB -define registry:temporary-path=/data/tmp \
- logo: -resize 250000x250000 logo.miff
-</samp></pre>
-
-<p>For really large images, or if there is limited resources on your host, you can utilize a distributed pixel cache on one or more remote hosts:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -distribute-cache 6668 & // start on 192.168.100.50
-$ magick -distribute-cache 6668 & // start on 192.168.100.51
-$ magick -limit memory 2mb -limit map 2mb -limit disk 2gb \
- -define registry:cache:hosts=192.168.100.50:6668,192.168.100.51:6668 \
- myhugeimage.jpg -sharpen 5x2 myhugeimage.png
-</samp></pre>
-<p>Due to network latency, expect a substantial slow-down in processing your workflow.</p>
-
-<h2><a class="anchor" id="threads"></a>Threads of Execution</h2>
-
-<p>Many of ImageMagick's internal algorithms are threaded to take advantage of speed-ups offered by the multicore processor chips. However, you are welcome to use ImageMagick algorithms in your threads of execution with the exception of the MagickCore's GetVirtualPixels(), GetAuthenticPixels(), QueueAuthenticPixels(), or SyncAuthenticPixels() pixel cache methods. These methods are intended for one thread of execution only with the exception of an OpenMP parallel section. To access the pixel cache with more than one thread of execution, use a cache view. We do this for the CompositeImage() method, for example. Suppose we want to composite a single source image over a different destination image in each thread of execution. If we use GetVirtualPixels(), the results are unpredictable because multiple threads would likely be asking for different areas of the pixel cache simultaneously. Instead we use GetCacheViewVirtualPixels() which creates a unique view for each thread of execution ensuring our program behaves properly regardless of how many threads are invoked. The other program interfaces, such as the <a href="../magick-wand/index.html">MagickWand API</a>, are completely thread safe so there are no special precautions for threads of execution.</p>
-
-<p>Here is an MagickCore code snippet that takes advantage of threads of execution with the <a href="../openmp/index.html">OpenMP</a> programming paradigm:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>CacheView
- *image_view;
-
-MagickBooleanType
- status;
-
-ssize_t
- y;
-
-/*
- Acquire a cache view to enable parallelism.
-*/
-status=MagickTrue;
-image_view=AcquireVirtualCacheView(image,exception);
-#pragma omp parallel for schedule(static,4) shared(status)
-for (y=0; y < (ssize_t) image->rows; y++)
-{
- register Quantum
- *q;
-
- register ssize_t
- x;
-
- register void
- *metacontent;
-
- if (status == MagickFalse)
- continue;
- /*
- Get a row of pixels.
- */
- q=GetCacheViewAuthenticPixels(image_view,0,y,image->columns,1,exception);
- if (q == (Quantum *) NULL)
- {
- status=MagickFalse;
- continue;
- }
- metacontent=GetCacheViewAuthenticMetacontent(image_view);
- for (x=0; x < (ssize_t) image->columns; x++)
- {
- /*
- Set the pixel color.
- */
- SetPixelRed(image,...,q);
- SetPixelGreen(image,...,q);
- SetPixelBlue(image,...,q);
- SetPixelAlpha(image,...,q);
- if (metacontent != NULL)
- metacontent[indexes+x]=...;
- q+=GetPixelChannels(image);
- }
- /*
- Sync the updated pixels to the pixel cache.
- */
- if (SyncCacheViewAuthenticPixels(image_view,exception) == MagickFalse)
- status=MagickFalse;
-}
-/*
- Destroy the cache view.
-*/
-image_view=DestroyCacheView(image_view);
-if (status == MagickFalse)
- perror("something went wrong");
-</code></pre>
-
-<p>This code snippet converts an uncompressed Windows bitmap to a Magick++ image:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include "Magick++.h"
-#include <assert.h>
-#include "omp.h"
-
-void ConvertBMPToImage(const BITMAPINFOHEADER *bmp_info,
- const unsigned char *restrict pixels,Magick::Image *image)
-{
- /*
- Prepare the image so that we can modify the pixels directly.
- */
- assert(bmp_info->biCompression == BI_RGB);
- assert(bmp_info->biWidth == image->columns());
- assert(abs(bmp_info->biHeight) == image->rows());
- image->modifyImage();
- if (bmp_info->biBitCount == 24)
- image->type(MagickCore::TrueColorType);
- else
- image->type(MagickCore::TrueColorMatteType);
- register unsigned int bytes_per_row=bmp_info->biWidth*bmp_info->biBitCount/8;
- if (bytes_per_row % 4 != 0) {
- bytes_per_row=bytes_per_row+(4-bytes_per_row % 4); // divisible by 4.
- }
- /*
- Copy all pixel data, row by row.
- */
- #pragma omp parallel for
- for (int y=0; y < int(image->rows()); y++)
- {
- int
- row;
-
- register const unsigned char
- *restrict p;
-
- register MagickCore::Quantum
- *restrict q;
-
- row=(bmp_info->biHeight > 0) ? (image->rows()-y-1) : y;
- p=pixels+row*bytes_per_row;
- q=image->setPixels(0,y,image->columns(),1);
- for (int x=0; x < int(image->columns()); x++)
- {
- SetPixelBlue(image,p[0],q);
- SetPixelGreen(image,p[1],q);
- SetPixelRed(image,p[2],q);
- if (bmp_info->biBitCount == 32) {
- SetPixelAlpha(image,p[3],q);
- }
- q+=GetPixelChannels(image);
- p+=bmp_info->biBitCount/8;
- }
- image->syncPixels(); // sync pixels to pixel cache.
- }
- return;
-}</code></pre>
-
-<p>If you call the ImageMagick API from your OpenMP-enabled application and you intend to dynamically increase the number of threads available in subsequent parallel regions, be sure to perform the increase <var>before</var> you call the API otherwise ImageMagick may fault.</p>
-
-<p><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/wand-view.h">MagickWand</a> supports wand views. A view iterates over the entire, or portion, of the image in parallel and for each row of pixels, it invokes a callback method you provide. This limits most of your parallel programming activity to just that one module. There are similar methods in <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/image-view.h">MagickCore</a>. For an example, see the same sigmoidal contrast algorithm implemented in both <a href="../magick-wand/index.html#wand-view">MagickWand</a> and <a href="../magick-core/index.html#image-view">MagickCore</a>.</p>
-
-<p>In most circumstances, the default number of threads is set to the number of processor cores on your system for optimal performance. However, if your system is hyperthreaded or if you are running on a virtual host and only a subset of the processors are available to your server instance, you might get an increase in performance by setting the thread <a href="../resources/index.html#configure">policy</a> or the <a href="../resources/index.html#environment">MAGICK_THREAD_LIMIT</a> environment variable. For example, your virtual host has 8 processors but only 2 are assigned to your server instance. The default of 8 threads can cause severe performance problems. One solution is to limit the number of threads to the available processors in your <a href="../source/policy-open.xml">policy.xml</a> configuration file:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="resource" name="thread" value="2"/>
-</code></pre>
-
-<p>Or suppose your 12 core hyperthreaded computer defaults to 24 threads. Set the MAGICK_THREAD_LIMIT environment variable and you will likely get improved performance:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ export MAGICK_THREAD_LIMIT=12
-</samp></pre>
-
-<p>The OpenMP committee has not defined the behavior of mixing OpenMP with other threading models such as Posix threads. However, using modern releases of Linux, OpenMP and Posix threads appear to interoperate without complaint. If you want to use Posix threads from a program module that calls one of the ImageMagick application programming interfaces (e.g. MagickCore, MagickWand, Magick++, etc.) from Mac OS X or an older Linux release, you may need to disable OpenMP support within ImageMagick. Add the <code>--disable-openmp</code> option to the configure script command line and rebuild and reinstall ImageMagick.</p>
-
-<p>You can further increase performance by reducing lock contention with the <a href="http://goog-perftools.sourceforge.net/doc/tcmalloc.html">tcmalloc</a> memory allocation library. To enable, add <code>--with-tcmalloc</code> to the <code>configure</code> command-line when you build ImageMagick.</p>
-
-<h4>Threading Performance</h4>
-<p>It can be difficult to predict behavior in a parallel environment. Performance might depend on a number of factors including the compiler, the version of the OpenMP library, the processor type, the number of cores, the amount of memory, whether hyperthreading is enabled, the mix of applications that are executing concurrently with ImageMagick, or the particular image-processing algorithm you utilize. The only way to be certain of optimal performance, in terms of the number of threads, is to benchmark. ImageMagick includes progressive threading when benchmarking a command and returns the elapsed time and efficiency for one or more threads. This can help you identify how many threads is the most efficient in your environment. For this benchmark we sharpen a 1920x1080 image of a model 10 times with 1 to 12 threads:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick -bench 10 model.png -sharpen 5x2 null:
-Performance[1]: 10i 1.135ips 1.000e 8.760u 0:08.810
-Performance[2]: 10i 2.020ips 0.640e 9.190u 0:04.950
-Performance[3]: 10i 2.786ips 0.710e 9.400u 0:03.590
-Performance[4]: 10i 3.378ips 0.749e 9.580u 0:02.960
-Performance[5]: 10i 4.032ips 0.780e 9.580u 0:02.480
-Performance[6]: 10i 4.566ips 0.801e 9.640u 0:02.190
-Performance[7]: 10i 3.788ips 0.769e 10.980u 0:02.640
-Performance[8]: 10i 4.115ips 0.784e 12.030u 0:02.430
-Performance[9]: 10i 4.484ips 0.798e 12.860u 0:02.230
-Performance[10]: 10i 4.274ips 0.790e 14.830u 0:02.340
-Performance[11]: 10i 4.348ips 0.793e 16.500u 0:02.300
-Performance[12]: 10i 4.525ips 0.799e 18.320u 0:02.210
-</samp></pre>
-<p>The sweet spot for this example is 6 threads. This makes sense since there are 6 physical cores. The other 6 are hyperthreads. It appears that sharpening does not benefit from hyperthreading.</p>
-<p>In certain cases, it might be optimal to set the number of threads to 1 or to disable OpenMP completely with the <a href="../resources/index.html#environment">MAGICK_THREAD_LIMIT</a> environment variable, <a href="../command-line-options/index.html#limit">-limit</a> command line option, or the <a href="../resources/index.html#configure">policy.xml</a> configuration file.</p>
-
-<h2><a class="anchor" id="dynamic-throttle"></a>Enable Dynamic Throttling for Optimized Performance</h2>
-
-<p>Another effective option is to enable dynamic throttling in ImageMagick. When this feature is activated, ImageMagick automatically introduces a slight delay between processing image scanlines based on your system’s current load average. This helps prevent resource exhaustion and ensures smoother performance, especially under heavy workloads.</p>
-
-<p>To enable dynamic throttling, add the following policy configuration:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="resource" name="dynamic-throttle" value="true"/>
-</code></pre>
-
-<h2><a class="anchor" id="distributed"></a>Heterogeneous Distributed Processing</h2>
-<p>ImageMagick includes support for heterogeneous distributed processing with the <a href="https://en.wikipedia.org/wiki/OpenCL">OpenCL</a> framework. OpenCL kernels within ImageMagick permit image processing algorithms to execute across heterogeneous platforms consisting of CPUs, GPUs, and other processors. Depending on your platform, speed-ups can be an order of magnitude faster than the traditional single CPU.</p>
-
-<p>First verify that your version of ImageMagick includes support for the OpenCL feature:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -version
-Features: DPC Cipher Modules OpenCL OpenMP(4.5)
-</samp></pre>
-
-<p>If so, run this command to realize a significant speed-up for image convolution:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick image.png -convolve '-1, -1, -1, -1, 9, -1, -1, -1, -1' convolve.png
-</samp></pre>
-
-<p>If an accelerator is not available or if the accelerator fails to respond, ImageMagick reverts to the non-accelerated convolution algorithm.</p>
-
-<p>Here is an example OpenCL kernel that convolves an image:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>static inline long ClampToCanvas(const long offset,const ulong range)
-{
- if (offset < 0L)
- return(0L);
- if (offset >= range)
- return((long) (range-1L));
- return(offset);
-}
-
-static inline CLQuantum ClampToQuantum(const float value)
-{
- if (value < 0.0)
- return((CLQuantum) 0);
- if (value >= (float) QuantumRange)
- return((CLQuantum) QuantumRange);
- return((CLQuantum) (value+0.5));
-}
-
-__kernel void Convolve(const __global CLPixelType *source,__constant float *filter,
- const ulong width,const ulong height,__global CLPixelType *destination)
-{
- const ulong columns = get_global_size(0);
- const ulong rows = get_global_size(1);
-
- const long x = get_global_id(0);
- const long y = get_global_id(1);
-
- const float scale = (1.0/QuantumRange);
- const long mid_width = (width-1)/2;
- const long mid_height = (height-1)/2;
- float4 sum = { 0.0, 0.0, 0.0, 0.0 };
- float gamma = 0.0;
- register ulong i = 0;
-
- for (long v=(-mid_height); v <= mid_height; v++)
- {
- for (long u=(-mid_width); u <= mid_width; u++)
- {
- register const ulong index=ClampToCanvas(y+v,rows)*columns+ClampToCanvas(x+u,
- columns);
- const float alpha=scale*(QuantumRange-source[index].w);
- sum.x+=alpha*filter[i]*source[index].x;
- sum.y+=alpha*filter[i]*source[index].y;
- sum.z+=alpha*filter[i]*source[index].z;
- sum.w+=filter[i]*source[index].w;
- gamma+=alpha*filter[i];
- i++;
- }
- }
-
- gamma=1.0/(fabs(gamma) <= MagickEpsilon ? 1.0 : gamma);
- const ulong index=y*columns+x;
- destination[index].x=ClampToQuantum(gamma*sum.x);
- destination[index].y=ClampToQuantum(gamma*sum.y);
- destination[index].z=ClampToQuantum(gamma*sum.z);
- destination[index].w=ClampToQuantum(sum.w);
-};</code></pre>
-
-<p>See <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/accelerate.c">MagickCore/accelerate.c</a> for a complete implementation of image convolution with an OpenCL kernel.</p>
-
-<p>Note, that under Windows, you might have an issue with TDR (Timeout Detection and Recovery of GPUs). Its purpose is to detect runaway tasks hanging the GPU by using an execution time threshold. For some older low-end GPUs running the OpenCL filters in ImageMagick, longer execution times might trigger the TDR mechanism and preempt the GPU image filter. When this happens, ImageMagick automatically falls back to the CPU code path and returns the expected results. To avoid preemption, increase the <a href="http://msdn.microsoft.com/en-us/library/windows/hardware/gg487368.aspx">TdrDelay</a> registry key.</p>
-
-<h2><a class="anchor" id="coders"></a>Custom Image Coders</h2>
-
-<p>An image coder (i.e. encoder / decoder) is responsible for registering, optionally classifying, optionally reading, optionally writing, and unregistering one image format (e.g. PNG, GIF, JPEG, etc.). Registering an image coder alerts ImageMagick a particular format is available to read or write. While unregistering tells ImageMagick the format is no longer available. The classifying method looks at the first few bytes of an image and determines if the image is in the expected format. The reader sets the image size, colorspace, and other properties and loads the pixel cache with the pixels. The reader returns a single image or an image sequence (if the format supports multiple images per file), or if an error occurs, an exception and a null image. The writer does the reverse. It takes the image properties and unloads the pixel cache and writes them as required by the image format.</p>
-
-<p>Here is a listing of a sample <a href="../source/mgk.html">custom coder</a>. It reads and writes images in the MGK image format which is simply an ID followed by the image width and height followed by the RGB pixel values.</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <MagickCore/studio.h>
-#include <MagickCore/blob.h>
-#include <MagickCore/cache.h>
-#include <MagickCore/colorspace.h>
-#include <MagickCore/exception.h>
-#include <MagickCore/image.h>
-#include <MagickCore/list.h>
-#include <MagickCore/magick.h>
-#include <MagickCore/memory_.h>
-#include <MagickCore/monitor.h>
-#include <MagickCore/pixel-accessor.h>
-#include <MagickCore/string_.h>
-#include <MagickCore/module.h>
-#include "filter/blob-private.h"
-#include "filter/exception-private.h"
-#include "filter/image-private.h"
-#include "filter/monitor-private.h"
-#include "filter/quantum-private.h"
-
-/*
- Forward declarations.
-*/
-static MagickBooleanType
- WriteMGKImage(const ImageInfo *,Image *,ExceptionInfo *);
-
-/*
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-% %
-% %
-% %
-% I s M G K %
-% %
-% %
-% %
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-%
-% IsMGK() returns MagickTrue if the image format type, identified by the
-% magick string, is MGK.
-%
-% The format of the IsMGK method is:
-%
-% MagickBooleanType IsMGK(const unsigned char *magick,const size_t length)
-%
-% A description of each parameter follows:
-%
-% o magick: This string is generally the first few bytes of an image file
-% or blob.
-%
-% o length: Specifies the length of the magick string.
-%
-*/
-static MagickBooleanType IsMGK(const unsigned char *magick,const size_t length)
-{
- if (length < 7)
- return(MagickFalse);
- if (LocaleNCompare((char *) magick,"id=mgk",7) == 0)
- return(MagickTrue);
- return(MagickFalse);
-}
-
-/*
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-% %
-% %
-% %
-% R e a d M G K I m a g e %
-% %
-% %
-% %
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-%
-% ReadMGKImage() reads a MGK image file and returns it. It allocates the
-% memory necessary for the new Image structure and returns a pointer to the
-% new image.
-%
-% The format of the ReadMGKImage method is:
-%
-% Image *ReadMGKImage(const ImageInfo *image_info,
-% ExceptionInfo *exception)
-%
-% A description of each parameter follows:
-%
-% o image_info: the image info.
-%
-% o exception: return any errors or warnings in this structure.
-%
-*/
-static Image *ReadMGKImage(const ImageInfo *image_info,ExceptionInfo *exception)
-{
- char
- buffer[MaxTextExtent];
-
- Image
- *image;
-
- long
- y;
-
- MagickBooleanType
- status;
-
- register long
- x;
-
- register Quantum
- *q;
-
- register unsigned char
- *p;
-
- ssize_t
- count;
-
- unsigned char
- *pixels;
-
- unsigned long
- columns,
- rows;
-
- /*
- Open image file.
- */
- assert(image_info != (const ImageInfo *) NULL);
- assert(image_info->signature == MagickCoreSignature);
- if (image_info->debug != MagickFalse)
- (void) LogMagickEvent(TraceEvent,GetMagickModule(),"%s",
- image_info->filename);
- assert(exception != (ExceptionInfo *) NULL);
- assert(exception->signature == MagickCoreSignature);
- image=AcquireImage(image_info,exception);
- status=OpenBlob(image_info,image,ReadBinaryBlobMode,exception);
- if (status == MagickFalse)
- {
- image=DestroyImageList(image);
- return((Image *) NULL);
- }
- /*
- Read MGK image.
- */
- (void) ReadBlobString(image,buffer); /* read magic number */
- if (IsMGK(buffer,7) == MagickFalse)
- ThrowReaderException(CorruptImageError,"ImproperImageHeader");
- (void) ReadBlobString(image,buffer);
- count=(ssize_t) sscanf(buffer,"%lu %lu\n",&columns,&rows);
- if (count <= 0)
- ThrowReaderException(CorruptImageError,"ImproperImageHeader");
- do
- {
- /*
- Initialize image structure.
- */
- image->columns=columns;
- image->rows=rows;
- image->depth=8;
- if ((image_info->ping != MagickFalse) && (image_info->number_scenes != 0))
- if (image->scene >= (image_info->scene+image_info->number_scenes-1))
- break;
- /*
- Convert MGK raster image to pixel packets.
- */
- if (SetImageExtent(image,image->columns,image->rows,exception) == MagickFalse)
- return(DestroyImageList(image));
- pixels=(unsigned char *) AcquireQuantumMemory((size_t) image->columns,
- 3UL*sizeof(*pixels));
- if (pixels == (unsigned char *) NULL)
- ThrowReaderException(ResourceLimitError,"MemoryAllocationFailed");
- for (y=0; y < (long) image->rows; y++)
- {
- count=(ssize_t) ReadBlob(image,(size_t) (3*image->columns),pixels);
- if (count != (ssize_t) (3*image->columns))
- ThrowReaderException(CorruptImageError,"UnableToReadImageData");
- p=pixels;
- q=QueueAuthenticPixels(image,0,y,image->columns,1,exception);
- if (q == (Quantum *) NULL)
- break;
- for (x=0; x < (long) image->columns; x++)
- {
- SetPixelRed(image,ScaleCharToQuantum(*p++),q);
- SetPixelGreen(image,ScaleCharToQuantum(*p++),q);
- SetPixelBlue(image,ScaleCharToQuantum(*p++),q);
- q+=GetPixelChannels(image);
- }
- if (SyncAuthenticPixels(image,exception) == MagickFalse)
- break;
- if (image->previous == (Image *) NULL)
- if ((image->progress_monitor != (MagickProgressMonitor) NULL) &&
- (QuantumTick(y,image->rows) != MagickFalse))
- {
- status=image->progress_monitor(LoadImageTag,y,image->rows,
- image->client_data);
- if (status == MagickFalse)
- break;
- }
- }
- pixels=(unsigned char *) RelinquishMagickMemory(pixels);
- if (EOFBlob(image) != MagickFalse)
- {
- ThrowFileException(exception,CorruptImageError,"UnexpectedEndOfFile",
- image->filename);
- break;
- }
- /*
- Proceed to next image.
- */
- if (image_info->number_scenes != 0)
- if (image->scene >= (image_info->scene+image_info->number_scenes-1))
- break;
- *buffer='\0';
- (void) ReadBlobString(image,buffer);
- count=(ssize_t) sscanf(buffer,"%lu %lu\n",&columns,&rows);
- if (count > 0)
- {
- /*
- Allocate next image structure.
- */
- AcquireNextImage(image_info,image,exception);
- if (GetNextImageInList(image) == (Image *) NULL)
- {
- image=DestroyImageList(image);
- return((Image *) NULL);
- }
- image=SyncNextImageInList(image);
- if (image->progress_monitor != (MagickProgressMonitor) NULL)
- {
- status=SetImageProgress(image,LoadImageTag,TellBlob(image),
- GetBlobSize(image));
- if (status == MagickFalse)
- break;
- }
- }
- } while (count > 0);
- (void) CloseBlob(image);
- return(GetFirstImageInList(image));
-}
-
-/*
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-% %
-% %
-% %
-% R e g i s t e r M G K I m a g e %
-% %
-% %
-% %
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-%
-% RegisterMGKImage() adds attributes for the MGK image format to
-% the list of supported formats. The attributes include the image format
-% tag, a method to read and/or write the format, whether the format
-% supports the saving of more than one frame to the same file or blob,
-% whether the format supports native in-memory I/O, and a brief
-% description of the format.
-%
-% The format of the RegisterMGKImage method is:
-%
-% unsigned long RegisterMGKImage(void)
-%
-*/
-ModuleExport unsigned long RegisterMGKImage(void)
-{
- MagickInfo
- *entry;
-
- entry=AcquireMagickInfo("MGK","MGK","MGK image");
- entry->decoder=(DecodeImageHandler *) ReadMGKImage;
- entry->encoder=(EncodeImageHandler *) WriteMGKImage;
- entry->magick=(IsImageFormatHandler *) IsMGK;
- (void) RegisterMagickInfo(entry);
- return(MagickImageCoderSignature);
-}
+ <h4 class="fw-bold mb-3">Cache Storage and Resource Requirements</h4>
+ <p class="text-body-secondary mb-3">
+ Pixel cache storage scales with image area and component bit depth. Large images automatically spill from heap memory to disk, and are optionally memory-mapped. Resource limits can be tuned via policies (<a href="../security-policy/index.html" class="text-decoration-none fw-semibold">security policy</a>, <a href="../source/policy-open.xml">policy.xml</a>), environment variables, or <a href="../command-line-options/index.html#limit" class="text-decoration-none fw-semibold">-limit</a>.
+ </p>
+
+ <div class="card im-card overflow-hidden mb-4">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col" style="width: 30%;">Resource Limit</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr><td>width</td><td>maximum width of an image</td></tr>
+ <tr><td>height</td><td>maximum height of an image</td></tr>
+ <tr><td>area</td><td>maximum area in bytes in cache memory before spilling to disk</td></tr>
+ <tr><td>memory</td><td>maximum heap memory allocated for pixel cache</td></tr>
+ <tr><td>map</td><td>maximum memory map allocation for pixel cache</td></tr>
+ <tr><td>disk</td><td>maximum disk space permitted for pixel cache</td></tr>
+ <tr><td>files</td><td>maximum number of open pixel cache files</td></tr>
+ <tr><td>thread</td><td>maximum parallel threads permitted</td></tr>
+ <tr><td>time</td><td>maximum seconds execution time permitted</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
-/*
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-% %
-% %
-% %
-% U n r e g i s t e r M G K I m a g e %
-% %
-% %
-% %
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-%
-% UnregisterMGKImage() removes format registrations made by the
-% MGK module from the list of supported formats.
-%
-% The format of the UnregisterMGKImage method is:
-%
-% UnregisterMGKImage(void)
-%
-*/
-ModuleExport void UnregisterMGKImage(void)
-{
- (void) UnregisterMagickInfo("MGK");
-}
+ <p class="text-body-secondary mb-3">To check current resource settings, run:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> identify -list resource
+ </div>
+ </div>
+ </section>
-/*
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-% %
-% %
-% %
-% W r i t e M G K I m a g e %
-% %
-% %
-% %
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-%
-% WriteMGKImage() writes an image to a file in red, green, and blue MGK
-% rasterfile format.
-%
-% The format of the WriteMGKImage method is:
-%
-% MagickBooleanType WriteMGKImage(const ImageInfo *image_info,
-% Image *image)
-%
-% A description of each parameter follows.
-%
-% o image_info: the image info.
-%
-% o image: The image.
-%
-% o exception: return any errors or warnings in this structure.
-%
-*/
-static MagickBooleanType WriteMGKImage(const ImageInfo *image_info,Image *image,
- ExceptionInfo *exception)
-{
- char
- buffer[MaxTextExtent];
-
- long
- y;
-
- MagickBooleanType
- status;
-
- MagickOffsetType
- scene;
-
- register const Quantum
- *p;
-
- register long
- x;
-
- register unsigned char
- *q;
-
- unsigned char
- *pixels;
-
- /*
- Open output image file.
- */
- assert(image_info != (const ImageInfo *) NULL);
- assert(image_info->signature == MagickCoreSignature);
- assert(image != (Image *) NULL);
- assert(image->signature == MagickCoreSignature);
- if (image->debug != MagickFalse)
- (void) LogMagickEvent(TraceEvent,GetMagickModule(),"%s",image->filename);
- status=OpenBlob(image_info,image,WriteBinaryBlobMode,exception);
- if (status == MagickFalse)
- return(status);
- scene=0;
- do
- {
- /*
- Allocate memory for pixels.
- */
- if (image->colorspace != RGBColorspace)
- (void) SetImageColorspace(image,RGBColorspace,exception);
- pixels=(unsigned char *) AcquireQuantumMemory((size_t) image->columns,
- 3UL*sizeof(*pixels));
- if (pixels == (unsigned char *) NULL)
- ThrowWriterException(ResourceLimitError,"MemoryAllocationFailed");
- /*
- Initialize raster file header.
- */
- (void) WriteBlobString(image,"id=mgk\n");
- (void) FormatLocaleString(buffer,MaxTextExtent,"%lu %lu\n",image->columns,
- image->rows);
- (void) WriteBlobString(image,buffer);
- for (y=0; y < (long) image->rows; y++)
- {
- p=GetVirtualPixels(image,0,y,image->columns,1,exception);
- if (p == (const Quantum *) NULL)
- break;
- q=pixels;
- for (x=0; x < (long) image->columns; x++)
- {
- *q++=ScaleQuantumToChar(GetPixelRed(image,p));
- *q++=ScaleQuantumToChar(GetPixelGreen(image,p));
- *q++=ScaleQuantumToChar(GetPixelBlue(image,p));
- p+=GetPixelChannels(image);
- }
- (void) WriteBlob(image,(size_t) (q-pixels),pixels);
- if (image->previous == (Image *) NULL)
- if ((image->progress_monitor != (MagickProgressMonitor) NULL) &&
- (QuantumTick(y,image->rows) != MagickFalse))
- {
- status=image->progress_monitor(SaveImageTag,y,image->rows,
- image->client_data);
- if (status == MagickFalse)
- break;
- }
- }
- pixels=(unsigned char *) RelinquishMagickMemory(pixels);
- if (GetNextImageInList(image) == (Image *) NULL)
- break;
- image=SyncNextImageInList(image);
- status=SetImageProgress(image,SaveImagesTag,scene,
- GetImageListLength(image));
- if (status == MagickFalse)
- break;
- scene++;
- } while (image_info->adjoin != MagickFalse);
- (void) CloseBlob(image);
- return(MagickTrue);
-}</code></pre>
-
-<p>To invoke the custom coder from the command line, use these commands:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: logo.mgk
-$ display logo.mgk
-</samp></pre>
-
-<p>We provide the <a href="https://download.imagemagick.org/archive/kits/">Magick Coder Kit</a> to help you get started writing your own custom coder.</p>
-
-<p>Before you build, set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig </samp></pre>
-
-<h2><a class="anchor" id="filters"></a>Custom Image Filters</h2>
-
-<p>ImageMagick provides a convenient mechanism for adding your own custom image processing algorithms. We call these image filters and they are invoked from the command line with the <a href="../command-line-options/index.html#process">-process</a> option or from the MagickCore API method ExecuteModuleProcess().</p>
-
-<p>Here is a listing of a sample <a href="../source/analyze.html">custom image filter</a>. It computes a few statistics such as the pixel brightness and saturation mean and standard-deviation.</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <stdio.h>
-#include <stdlib.h>
-#include <string.h>
-#include <time.h>
-#include <assert.h>
-#include <math.h>
-#include "MagickCore/studio.h"
-#include "MagickCore/MagickCore.h"
-
-/*
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-% %
-% %
-% %
-% a n a l y z e I m a g e %
-% %
-% %
-% %
-%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%%
-%
-% analyzeImage() computes the brightness and saturation mean, standard
-% deviation, kurtosis and skewness and stores these values as attributes
-% of the image.
-%
-% The format of the analyzeImage method is:
-%
-% size_t analyzeImage(Image *images,const int argc,char **argv,
-% ExceptionInfo *exception)
-%
-% A description of each parameter follows:
-%
-% o image: the address of a structure of type Image.
-%
-% o argc: Specifies a pointer to an integer describing the number of
-% elements in the argument vector.
-%
-% o argv: Specifies a pointer to a text array containing the command line
-% arguments.
-%
-% o exception: return any errors or warnings in this structure.
-%
-*/
-
-typedef struct _StatisticsInfo
-{
- double
- area,
- brightness,
- mean,
- standard_deviation,
- sum[5],
- kurtosis,
- skewness;
-} StatisticsInfo;
-
-static inline int GetMagickNumberThreads(const Image *source,
- const Image *destination,const size_t chunk,int multithreaded)
-{
-#define MagickMax(x,y) (((x) > (y)) ? (x) : (y))
-#define MagickMin(x,y) (((x) < (y)) ? (x) : (y))
-
- /*
- Number of threads bounded by the amount of work and any thread resource
- limit. The limit is 2 if the pixel cache type is not memory or
- memory-mapped.
- */
- if (multithreaded == 0)
- return(1);
- if (((GetImagePixelCacheType(source) != MemoryCache) &&
- (GetImagePixelCacheType(source) != MapCache)) ||
- ((GetImagePixelCacheType(destination) != MemoryCache) &&
- (GetImagePixelCacheType(destination) != MapCache)))
- return(MagickMax(MagickMin(GetMagickResourceLimit(ThreadResource),2),1));
- return(MagickMax(MagickMin((ssize_t) GetMagickResourceLimit(ThreadResource),
- (ssize_t) (chunk)/64),1));
-}
+ <!-- Image Properties and Profiles -->
+ <section class="mb-5" id="properties">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-tags fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Image Properties and Profiles</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Images have metadata associated with them in the form of properties (width, height, description) and profiles (EXIF, IPTC, color management). Get, set, or update properties using GetImageProperty() and SetImageProperty():
+ </p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">
+ SetImageProperty(image,"comment","This space for rent");<br>
+ comment=GetImageProperty(image,"comment");
+ </div>
+ </div>
+ <p class="text-body-secondary mb-0">
+ Profiles are handled via GetImageProfile(), SetImageProfile(), and ProfileImage().
+ </p>
+ </div>
+ </section>
-ModuleExport size_t analyzeImage(Image **images,const int argc,
- const char **argv,ExceptionInfo *exception)
-{
-#define AnalyzeImageFilterTag "Filter/Analyze"
-#define magick_number_threads(source,destination,chunk,multithreaded) \
- num_threads(GetMagickNumberThreads(source,destination,chunk,multithreaded))
-
- char
- text[MagickPathExtent];
-
- Image
- *image;
-
- MagickBooleanType
- status;
-
- MagickOffsetType
- progress;
-
- assert(images != (Image **) NULL);
- assert(*images != (Image *) NULL);
- assert((*images)->signature == MagickCoreSignature);
- (void) argc;
- (void) argv;
- status=MagickTrue;
- progress=0;
- for (image=(*images); image != (Image *) NULL; image=GetNextImageInList(image))
- {
- CacheView
- *image_view;
-
- double
- area;
-
- ssize_t
- y;
-
- StatisticsInfo
- brightness,
- saturation;
-
- if (status == MagickFalse)
- continue;
- (void) memset(&brightness,0,sizeof(brightness));
- (void) memset(&saturation,0,sizeof(saturation));
- status=MagickTrue;
- image_view=AcquireVirtualCacheView(image,exception);
-#if defined(MAGICKCORE_OPENMP_SUPPORT)
- #pragma omp parallel for schedule(static) \
- shared(progress,status,brightness,saturation) \
- magick_number_threads(image,image,image->rows,1)
-#endif
- for (y=0; y < (ssize_t) image->rows; y++)
- {
- const Quantum
- *p;
-
- ssize_t
- i,
- x;
-
- StatisticsInfo
- local_brightness,
- local_saturation;
-
- if (status == MagickFalse)
- continue;
- p=GetCacheViewVirtualPixels(image_view,0,y,image->columns,1,exception);
- if (p == (const Quantum *) NULL)
- {
- status=MagickFalse;
- continue;
- }
- (void) memset(&local_brightness,0,sizeof(local_brightness));
- (void) memset(&local_saturation,0,sizeof(local_saturation));
- for (x=0; x < (ssize_t) image->columns; x++)
- {
- double
- b,
- h,
- s;
-
- ConvertRGBToHSL(GetPixelRed(image,p),GetPixelGreen(image,p),
- GetPixelBlue(image,p),&h,&s,&b);
- b*=QuantumRange;
- for (i=1; i <= 4; i++)
- local_brightness.sum[i]+=pow(b,(double) i);
- s*=QuantumRange;
- for (i=1; i <= 4; i++)
- local_saturation.sum[i]+=pow(s,(double) i);
- p+=GetPixelChannels(image);
- }
-#if defined(MAGICKCORE_OPENMP_SUPPORT)
- #pragma omp critical (analyzeImage)
-#endif
- for (i=1; i <= 4; i++)
- {
- brightness.sum[i]+=local_brightness.sum[i];
- saturation.sum[i]+=local_saturation.sum[i];
- }
- }
- image_view=DestroyCacheView(image_view);
- area=(double) image->columns*image->rows;
- brightness.mean=brightness.sum[1]/area;
- (void) FormatLocaleString(text,MagickPathExtent,"%g",brightness.mean);
- (void) SetImageProperty(image,"filter:brightness:mean",text,exception);
- brightness.standard_deviation=sqrt(brightness.sum[2]/area-
- (brightness.sum[1]/area*brightness.sum[1]/area));
- (void) FormatLocaleString(text,MagickPathExtent,"%g",
- brightness.standard_deviation);
- (void) SetImageProperty(image,"filter:brightness:standard-deviation",text,
- exception);
- if (fabs(brightness.standard_deviation) >= MagickEpsilon)
- brightness.kurtosis=(brightness.sum[4]/area-4.0*brightness.mean*
- brightness.sum[3]/area+6.0*brightness.mean*brightness.mean*
- brightness.sum[2]/area-3.0*brightness.mean*brightness.mean*
- brightness.mean*brightness.mean)/(brightness.standard_deviation*
- brightness.standard_deviation*brightness.standard_deviation*
- brightness.standard_deviation)-3.0;
- (void) FormatLocaleString(text,MagickPathExtent,"%g",brightness.kurtosis);
- (void) SetImageProperty(image,"filter:brightness:kurtosis",text,exception);
- if (brightness.standard_deviation != 0)
- brightness.skewness=(brightness.sum[3]/area-3.0*brightness.mean*
- brightness.sum[2]/area+2.0*brightness.mean*brightness.mean*
- brightness.mean)/(brightness.standard_deviation*
- brightness.standard_deviation*brightness.standard_deviation);
- (void) FormatLocaleString(text,MagickPathExtent,"%g",brightness.skewness);
- (void) SetImageProperty(image,"filter:brightness:skewness",text,exception);
- saturation.mean=saturation.sum[1]/area;
- (void) FormatLocaleString(text,MagickPathExtent,"%g",saturation.mean);
- (void) SetImageProperty(image,"filter:saturation:mean",text,exception);
- saturation.standard_deviation=sqrt(saturation.sum[2]/area-
- (saturation.sum[1]/area*saturation.sum[1]/area));
- (void) FormatLocaleString(text,MagickPathExtent,"%g",
- saturation.standard_deviation);
- (void) SetImageProperty(image,"filter:saturation:standard-deviation",text,
- exception);
- if (fabs(saturation.standard_deviation) >= MagickEpsilon)
- saturation.kurtosis=(saturation.sum[4]/area-4.0*saturation.mean*
- saturation.sum[3]/area+6.0*saturation.mean*saturation.mean*
- saturation.sum[2]/area-3.0*saturation.mean*saturation.mean*
- saturation.mean*saturation.mean)/(saturation.standard_deviation*
- saturation.standard_deviation*saturation.standard_deviation*
- saturation.standard_deviation)-3.0;
- (void) FormatLocaleString(text,MagickPathExtent,"%g",saturation.kurtosis);
- (void) SetImageProperty(image,"filter:saturation:kurtosis",text,exception);
- if (fabs(saturation.standard_deviation) >= MagickEpsilon)
- saturation.skewness=(saturation.sum[3]/area-3.0*saturation.mean*
- saturation.sum[2]/area+2.0*saturation.mean*saturation.mean*
- saturation.mean)/(saturation.standard_deviation*
- saturation.standard_deviation*saturation.standard_deviation);
- (void) FormatLocaleString(text,MagickPathExtent,"%g",saturation.skewness);
- (void) SetImageProperty(image,"filter:saturation:skewness",text,exception);
- if (image->progress_monitor != (MagickProgressMonitor) NULL)
- {
- MagickBooleanType
- proceed;
-
-#if defined(MAGICKCORE_OPENMP_SUPPORT)
- #pragma omp atomic
-#endif
- progress++;
- proceed=SetImageProgress(image,AnalyzeImageFilterTag,progress,
- GetImageListLength(image));
- if (proceed == MagickFalse)
- status=MagickFalse;
- }
- }
- return(MagickImageFilterSignature);
-}</code></pre>
+ <!-- Multispectral Imagery -->
+ <section class="mb-5" id="multispectral">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-layers fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Multispectral Imagery</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-0">
+ ImageMagick supports <a href="../multispectral-imagery/index.html" class="text-decoration-none fw-semibold">multispectral imagery</a> where all channels have the same dimensions and number of pixels. PSD, TIFF, MIFF, MPC, and FTXT fully support multispectral images up to 31 bands (21 meta channels), or up to 62 bands (52 meta channels) if built with <code>--enable-64bit-channel-masks</code>.
+ </p>
+ </div>
+ </section>
-<p>To invoke the custom filter from the command line, use this command:</p>
+ <!-- Streaming Pixels -->
+ <section class="mb-5" id="stream">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-broadcast fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Streaming Pixels</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Pixel streaming allows consuming pixels as they are read/written, scaling resource usage with image width rather than area. Use ReadStream() or WriteStream(), or the lightweight <a href="../stream/index.html" class="text-decoration-none fw-semibold">stream</a> tool.
+ </p>
+ </div>
+ </section>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -process \"analyze\" -verbose info:
-Image: logo:
- Format: LOGO (ImageMagick Logo)
- Class: PseudoClass
- Geometry: 640x480
- ...
- filter:brightness:kurtosis: 3.97886
- filter:brightness:mean: 58901.3
- filter:brightness:skewness: -2.30827
- filter:brightness:standard-deviation: 16179.8
- filter:saturation:kurtosis: 6.59719
- filter:saturation:mean: 5321.05
- filter:saturation:skewness: 2.75679
- filter:saturation:standard-deviation: 14484.7
-</samp></pre>
+ <!-- Large Image Support -->
+ <section class="mb-5" id="tera-pixel">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-arrows-fullscreen fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Large Image Support</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ ImageMagick supports mega- to tera-pixel image sizes. When memory is exhausted, temporary disk caches are utilized. You can monitor large image processing or offload tasks to a distributed pixel cache across remote servers.
+ </p>
+ <div class="terminal-card">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick logo: -resize 250000x250000 logo.miff
+ </div>
+ </div>
+ </div>
+ </section>
+ <!-- Threads of Execution -->
+ <section class="mb-5" id="threads">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-cpu fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Threads of Execution</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Many internal algorithms use OpenMP multi-threading. When writing custom multithreaded code using MagickCore, use <strong>cache views</strong> (e.g., AcquireVirtualCacheView()) rather than direct pixel cache accessors to ensure thread safety.
+ </p>
+ </div>
+ </section>
-<p>We provide the <a href="https://download.imagemagick.org/archive/kits/">Magick Filter Kit</a> to help you get started writing your own custom image filter.</p>
+ <!-- Enable Dynamic Throttling -->
+ <section class="mb-5" id="dynamic-throttle">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-speedometer2 fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Enable Dynamic Throttling for Optimized Performance</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Enable dynamic throttling to automatically introduce slight delays between processing scanlines based on system load average, preventing resource exhaustion under heavy workloads:
+ </p>
+ <div class="terminal-card">
+ <div class="p-3 text-light font-mono small">
+ <policy domain="resource" name="dynamic-throttle" value="true"/>
+ </div>
+ </div>
+ </div>
+ </section>
-<p>Before you build, set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
+ <!-- Heterogeneous Distributed Processing -->
+ <section class="mb-5" id="distributed">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-gpu-card fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Heterogeneous Distributed Processing</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ ImageMagick supports heterogeneous distributed processing using the <a href="https://en.wikipedia.org/wiki/OpenCL" class="text-decoration-none fw-semibold" target="_blank" rel="noopener">OpenCL</a> framework across CPUs, GPUs, and accelerators. Verify OpenCL availability with:
+ </p>
+ <div class="terminal-card">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick identify -version
+ </div>
+ </div>
+ </div>
+ </section>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig </samp></pre>
+ <!-- Custom Image Coders -->
+ <section class="mb-5" id="coders">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-code-square fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Custom Image Coders</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-0">
+ An image coder (encoder/decoder) registers, classifies, reads, writes, and unregisters image formats. Custom coders can be implemented and loaded as modules using the Magick Coder Kit.
+ </p>
+ </div>
+ </section>
+ <!-- Custom Image Filters -->
+ <section class="mb-4" id="filters">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-filter-circle fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Custom Image Filters</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Add custom image processing algorithms invoked via the <a href="../command-line-options/index.html#process" class="text-decoration-none fw-semibold">-process</a> option or ExecuteModuleProcess(). Get started quickly with the <a href="https://download.imagemagick.org/archive/kits/" class="text-decoration-none fw-semibold" target="_blank" rel="noopener">Magick Filter Kit</a>.
+ </p>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/changelog/index.html b/www/changelog/index.html
index f8bec42a0..9405160c6 100644
--- a/www/changelog/index.html
+++ b/www/changelog/index.html
@@ -11,215 +11,299 @@
<meta name="description" content="">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Changelog">
<meta property="og:description" content="">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Changelog">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Changelog",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/changelog/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/changelog/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/changelog/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Changelog</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Changelog</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5"></p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
<h1 id="changelog">Changelog</h1>
<p>All notable changes to this project will be documented in this file.</p>
@@ -227,10 +311,335 @@
<p>The format is based on <a href="https://keepachangelog.com/en/1.0.0/">Keep a Changelog</a>
and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semantic Versioning</a>.</p>
-<h2 id="712-31---2026-09-03"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-30...7.1.2-31">7.1.2-31</a> - 2026-09-03</h2>
+<h2 id="712-34---2026-10-14"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-33...7.1.2-34">7.1.2-34</a> - 2026-10-14</h2>
<h3 id="merged">Merged</h3>
+<ul>
+ <li>fix broken ImageMagick Usage link <a href="https://github.com/ImageMagick/ImageMagick/pull/9026"><code class="language-plaintext highlighter-rouge">#9026</code></a></li>
+ <li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">da6fc2b</code> to <code class="language-plaintext highlighter-rouge">f144425</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/9018"><code class="language-plaintext highlighter-rouge">#9018</code></a></li>
+</ul>
+
+<h3 id="commits">Commits</h3>
+
+<ul>
+ <li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/ef5df48a1ec6187acf44f698288664bdecf6e5cf"><code class="language-plaintext highlighter-rouge">ef5df48</code></a></li>
+ <li>cosmetic <a href="https://github.com/ImageMagick/ImageMagick/commit/c271950f8c496e40175b1d55128317cdd6bb2935"><code class="language-plaintext highlighter-rouge">c271950</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/f03eacf4789541a18222cf669e8dbcbb79e07e29"><code class="language-plaintext highlighter-rouge">f03eacf</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/cf01b29d0ae9dabf83a1e62c93ecb074f807bc89"><code class="language-plaintext highlighter-rouge">cf01b29</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/9011 <a href="https://github.com/ImageMagick/ImageMagick/commit/2c1021b8a44c282e3da06754ed6985b43d33c244"><code class="language-plaintext highlighter-rouge">2c1021b</code></a></li>
+ <li>Added check for libraw version 0.21 and raise warning when dng:read-thumbnails is used. <a href="https://github.com/ImageMagick/ImageMagick/commit/1937e00e2255251d1490b068ada4207d1aa233d0"><code class="language-plaintext highlighter-rouge">1937e00</code></a></li>
+ <li>Hide convert warning from test output. <a href="https://github.com/ImageMagick/ImageMagick/commit/b88a07b290c3fc4ccce0c1f01aa5962d1ceb9781"><code class="language-plaintext highlighter-rouge">b88a07b</code></a></li>
+ <li>Improved the filter even more. <a href="https://github.com/ImageMagick/ImageMagick/commit/17417150fa3d21e2b80884a41d5f32f7b4129a32"><code class="language-plaintext highlighter-rouge">1741715</code></a></li>
+ <li>Improved filter even more. <a href="https://github.com/ImageMagick/ImageMagick/commit/d7d6a1d216e15f09834e63ba6f3d4d68c46c01d9"><code class="language-plaintext highlighter-rouge">d7d6a1d</code></a></li>
+ <li>Fix Q8 connected-components validation input <a href="https://github.com/ImageMagick/ImageMagick/commit/7e57af217e7108cb1319b9168bb8cc13c950bd26"><code class="language-plaintext highlighter-rouge">7e57af2</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/9015 <a href="https://github.com/ImageMagick/ImageMagick/commit/081827b8a3e3b5cc9a6f683456ea7b3bfb856edf"><code class="language-plaintext highlighter-rouge">081827b</code></a></li>
+ <li>Preserve source depth when decoding HEIC sequences <a href="https://github.com/ImageMagick/ImageMagick/commit/1e2e12e76d0f454b88421467110ef91b27af2b60"><code class="language-plaintext highlighter-rouge">1e2e12e</code></a></li>
+ <li>Fix HEIC source selection and primary image lookup <a href="https://github.com/ImageMagick/ImageMagick/commit/c2ba6210d6b512e59f8de4de5cf9c46027c733e9"><code class="language-plaintext highlighter-rouge">c2ba621</code></a></li>
+ <li>Read available ICC profiles for each HEIC sequence frame <a href="https://github.com/ImageMagick/ImageMagick/commit/28f1f93624a25ff4237d773adac6cc418f1dbb85"><code class="language-plaintext highlighter-rouge">28f1f93</code></a></li>
+ <li>Add an option to read only the HEIC primary image <a href="https://github.com/ImageMagick/ImageMagick/commit/165faf2688f983c22ee4812ce54e373c27b7faf4"><code class="language-plaintext highlighter-rouge">165faf2</code></a></li>
+ <li>Select image-sequence tracks when reading HEIC animations <a href="https://github.com/ImageMagick/ImageMagick/commit/f1d8c903247ede3e99b231d6c0c387066d311435"><code class="language-plaintext highlighter-rouge">f1d8c90</code></a></li>
+ <li>Prefer primary images for HEIC and HEIF still-image brands <a href="https://github.com/ImageMagick/ImageMagick/commit/5f543cd9f95f61f50dd50ef4a8c812586acce083"><code class="language-plaintext highlighter-rouge">5f543cd</code></a></li>
+ <li>Silence warning <a href="https://github.com/ImageMagick/ImageMagick/commit/a0dd8322970802a74df6f6416ed64ab20cf4c9fd"><code class="language-plaintext highlighter-rouge">a0dd832</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-x48p-6655-8qgv <a href="https://github.com/ImageMagick/ImageMagick/commit/270f70f609f659a01aaa2a8ed7bd887f79722d45"><code class="language-plaintext highlighter-rouge">270f70f</code></a></li>
+ <li>Allow two tests to pass when a security policy blocks it. <a href="https://github.com/ImageMagick/ImageMagick/commit/e2ddd0d1c42e063dced0f7ab7187b384ee378d86"><code class="language-plaintext highlighter-rouge">e2ddd0d</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-vmj6-qx38-9gf5 <a href="https://github.com/ImageMagick/ImageMagick/commit/11977ca6cdb1b028c6fc2de0726ff027a8457445"><code class="language-plaintext highlighter-rouge">11977ca</code></a></li>
+ <li>Also use the pre-build dependencies for the daily linux build. <a href="https://github.com/ImageMagick/ImageMagick/commit/59b87221dec394cfb31ef047bfd7e3c6443de58f"><code class="language-plaintext highlighter-rouge">59b8722</code></a></li>
+ <li>Updated dependencies. <a href="https://github.com/ImageMagick/ImageMagick/commit/c9932b6bcedc42a4447777234da527996835a414"><code class="language-plaintext highlighter-rouge">c9932b6</code></a></li>
+ <li>Also run daily when the configure or dependencies are updated. <a href="https://github.com/ImageMagick/ImageMagick/commit/d9a987d59db236697537a01ce0794303be4f34f1"><code class="language-plaintext highlighter-rouge">d9a987d</code></a></li>
+ <li>support ShuffleImages() <a href="https://github.com/ImageMagick/ImageMagick/commit/3d7aaa6223680621fa7a171f17162f19c1fdd98d"><code class="language-plaintext highlighter-rouge">3d7aaa6</code></a></li>
+ <li>support ShuffleImages() <a href="https://github.com/ImageMagick/ImageMagick/commit/04cf4f7b5bc90e6c228f3b9f1685d5d85ebbf0d7"><code class="language-plaintext highlighter-rouge">04cf4f7</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-g5j8-ff59-wp88 <a href="https://github.com/ImageMagick/ImageMagick/commit/5f6b60f2e18aa760aae94f0601a2758d190451c8"><code class="language-plaintext highlighter-rouge">5f6b60f</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/7145cebdde5ba5a319ac8c134eee1736371cf4e4"><code class="language-plaintext highlighter-rouge">7145ceb</code></a></li>
+ <li>Silence warnings. <a href="https://github.com/ImageMagick/ImageMagick/commit/581f9210d323db94756c710c545ffad48e356df4"><code class="language-plaintext highlighter-rouge">581f921</code></a></li>
+ <li>Silence warning. <a href="https://github.com/ImageMagick/ImageMagick/commit/43154d48ccf7f0bf0d9d98ee32927d86e4109dd9"><code class="language-plaintext highlighter-rouge">43154d4</code></a></li>
+ <li>Corrected compiler flag in the daily build. <a href="https://github.com/ImageMagick/ImageMagick/commit/892090606554b532a99535a8d88e0148f5dbf20b"><code class="language-plaintext highlighter-rouge">8920906</code></a></li>
+ <li>support shuffle type <a href="https://github.com/ImageMagick/ImageMagick/commit/66ade989da1501ed51a64289eb29a88b8b1c89b6"><code class="language-plaintext highlighter-rouge">66ade98</code></a></li>
+ <li>Corrected settings for the daily build. <a href="https://github.com/ImageMagick/ImageMagick/commit/06d1730e171bf146b947db07b3f914484b8e1029"><code class="language-plaintext highlighter-rouge">06d1730</code></a></li>
+ <li>Made the build file executable. <a href="https://github.com/ImageMagick/ImageMagick/commit/c5d4ca8a04ba5e597e433d0482c43eefdb22a62f"><code class="language-plaintext highlighter-rouge">c5d4ca8</code></a></li>
+ <li>release <a href="https://github.com/ImageMagick/ImageMagick/commit/a0c4bf729a26a5c2feb28b0365b47a8db736078a"><code class="language-plaintext highlighter-rouge">a0c4bf7</code></a></li>
+</ul>
+
+<h2 id="712-33---2026-10-10"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-32...7.1.2-33">7.1.2-33</a> - 2026-10-10</h2>
+
+<h3 id="merged-1">Merged</h3>
+
+<ul>
+ <li>coders/xps: add missing list-length resource guard in ReadXPSImage <a href="https://github.com/ImageMagick/ImageMagick/pull/9006"><code class="language-plaintext highlighter-rouge">#9006</code></a></li>
+ <li>build(deps): bump msys2/setup-msys2 from 2.32.0 to 2.33.0 <a href="https://github.com/ImageMagick/ImageMagick/pull/9002"><code class="language-plaintext highlighter-rouge">#9002</code></a></li>
+ <li>Fix LCH hue parsing and conversion of non-RGB fill colors <a href="https://github.com/ImageMagick/ImageMagick/pull/9003"><code class="language-plaintext highlighter-rouge">#9003</code></a></li>
+ <li>Avoid font metrics for montages without text <a href="https://github.com/ImageMagick/ImageMagick/pull/8998"><code class="language-plaintext highlighter-rouge">#8998</code></a></li>
+ <li>build(deps): bump the codeql-action group across 1 directory with 3 updates <a href="https://github.com/ImageMagick/ImageMagick/pull/8989"><code class="language-plaintext highlighter-rouge">#8989</code></a></li>
+ <li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">9559ceb</code> to <code class="language-plaintext highlighter-rouge">da6fc2b</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8982"><code class="language-plaintext highlighter-rouge">#8982</code></a></li>
+ <li>Scale neighborhood contrast to the quantum range <a href="https://github.com/ImageMagick/ImageMagick/pull/8996"><code class="language-plaintext highlighter-rouge">#8996</code></a></li>
+ <li>JXL: fix decoding of boxes/animations, metadata, ICC, CMYK, FLOAT16, tps and define errors <a href="https://github.com/ImageMagick/ImageMagick/pull/8992"><code class="language-plaintext highlighter-rouge">#8992</code></a></li>
+ <li>Fix inverted opacity in one-bit PAM images <a href="https://github.com/ImageMagick/ImageMagick/pull/8993"><code class="language-plaintext highlighter-rouge">#8993</code></a></li>
+ <li>Preserve Ultra HDR JPEG gain maps for scale operator <a href="https://github.com/ImageMagick/ImageMagick/pull/8986"><code class="language-plaintext highlighter-rouge">#8986</code></a></li>
+ <li>Limit C2PA manifest resource use <a href="https://github.com/ImageMagick/ImageMagick/pull/8980"><code class="language-plaintext highlighter-rouge">#8980</code></a></li>
+ <li>Keep the directory when mogrify -format reads a compressed file <a href="https://github.com/ImageMagick/ImageMagick/pull/8988"><code class="language-plaintext highlighter-rouge">#8988</code></a></li>
+ <li>Use a hash table to find palette entries when writing PNG <a href="https://github.com/ImageMagick/ImageMagick/pull/8977"><code class="language-plaintext highlighter-rouge">#8977</code></a></li>
+ <li>track adjacent objects when merging connected components <a href="https://github.com/ImageMagick/ImageMagick/pull/8978"><code class="language-plaintext highlighter-rouge">#8978</code></a></li>
+</ul>
+
+<h3 id="fixed">Fixed</h3>
+
+<ul>
+ <li>Fix LCH hue parsing and conversion of non-RGB fill colors (#9003) <a href="https://github.com/ImageMagick/ImageMagick/issues/8093"><code class="language-plaintext highlighter-rouge">#8093</code></a></li>
+</ul>
+
+<h3 id="commits-1">Commits</h3>
+
+<ul>
+ <li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/48c7005704ee0ba99f47366b8b1098641bc66ffa"><code class="language-plaintext highlighter-rouge">48c7005</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-6p6q-wfrv-ffhh <a href="https://github.com/ImageMagick/ImageMagick/commit/09b961e05cdb7caeb923e1736caa340ac26c84ea"><code class="language-plaintext highlighter-rouge">09b961e</code></a></li>
+ <li>eliminate compiler exception <a href="https://github.com/ImageMagick/ImageMagick/commit/76568651e175ecd32be39cb3e4d0a8352c4f2030"><code class="language-plaintext highlighter-rouge">7656865</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-c2qq-jqw7-q4mx <a href="https://github.com/ImageMagick/ImageMagick/commit/68168e6e5617e4cc478452777586e408f542362b"><code class="language-plaintext highlighter-rouge">68168e6</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-h9g3-4qvr-rx8h <a href="https://github.com/ImageMagick/ImageMagick/commit/24095b79b34474e707759aa6f91c0b85e052d68c"><code class="language-plaintext highlighter-rouge">24095b7</code></a></li>
+ <li>block PDF <a href="https://github.com/ImageMagick/ImageMagick/commit/33660b8876202ab00c683d88854ee3589b6e8923"><code class="language-plaintext highlighter-rouge">33660b8</code></a></li>
+ <li>Fix memory leak when SimilarityImage fails (GHSA-m938-565c-h9qf) <a href="https://github.com/ImageMagick/ImageMagick/commit/8980924dff771df8286cd5311ba0d2c9ef1902ca"><code class="language-plaintext highlighter-rouge">8980924</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-5jf2-9gcp-q234 <a href="https://github.com/ImageMagick/ImageMagick/commit/d8d635ecc52aec6553d96dcf5ca34cab81293a17"><code class="language-plaintext highlighter-rouge">d8d635e</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-7r5g-p7ff-jgcp <a href="https://github.com/ImageMagick/ImageMagick/commit/9108482a07ca08620021853a14133b9bc6e77054"><code class="language-plaintext highlighter-rouge">9108482</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-vm77-q83h-5fhg <a href="https://github.com/ImageMagick/ImageMagick/commit/e87c97d2c1d19dd6bf138e79b9ded4befde54794"><code class="language-plaintext highlighter-rouge">e87c97d</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-pj4h-g4pf-66v3 <a href="https://github.com/ImageMagick/ImageMagick/commit/eef3af56fbc2dc607e185b8565d695a8d8032d73"><code class="language-plaintext highlighter-rouge">eef3af5</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-pj4h-g4pf-66v3 <a href="https://github.com/ImageMagick/ImageMagick/commit/fb8842ff7ab351cd85a253c780fbfcf1199d7e4c"><code class="language-plaintext highlighter-rouge">fb8842f</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-8ghq-p369-g395 <a href="https://github.com/ImageMagick/ImageMagick/commit/33d16f3cf4e0439bba4a874e14c5a3168726ed68"><code class="language-plaintext highlighter-rouge">33d16f3</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-7438-vh5v-v52h <a href="https://github.com/ImageMagick/ImageMagick/commit/3882fd7116e0794a05457f78da80cd39f83b52c3"><code class="language-plaintext highlighter-rouge">3882fd7</code></a></li>
+ <li>Added missing cleanup in error path of the MAT decoder (GHSA-83w9-w85j-h9jc) <a href="https://github.com/ImageMagick/ImageMagick/commit/62c7876c37347dee0be1872e623650ba59f8a541"><code class="language-plaintext highlighter-rouge">62c7876</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-83w9-w85j-h9jc <a href="https://github.com/ImageMagick/ImageMagick/commit/af510e976301c2516aaa26ea8f88318450eeece2"><code class="language-plaintext highlighter-rouge">af510e9</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-mqmp-r5jh-jx7w <a href="https://github.com/ImageMagick/ImageMagick/commit/63dde0cf281383ab69432b88305f7dcd6a8ce900"><code class="language-plaintext highlighter-rouge">63dde0c</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-8w9c-hj38-8pf9 <a href="https://github.com/ImageMagick/ImageMagick/commit/a63bdd29ebe8439d1bfa51ca4e7890b8b4742560"><code class="language-plaintext highlighter-rouge">a63bdd2</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-v9q4-cm37-q2jm <a href="https://github.com/ImageMagick/ImageMagick/commit/b41a6bc92ac778e0459ce500e9d64fb361e29fd5"><code class="language-plaintext highlighter-rouge">b41a6bc</code></a></li>
+ <li>cosmetic <a href="https://github.com/ImageMagick/ImageMagick/commit/f9da83e1e7454e646a31569504205a033f0dee6f"><code class="language-plaintext highlighter-rouge">f9da83e</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-pwpf-8799-94cj <a href="https://github.com/ImageMagick/ImageMagick/commit/cf40ce974c3f780b7f6913bcff7bec27087c9104"><code class="language-plaintext highlighter-rouge">cf40ce9</code></a></li>
+ <li>add pipes security policy <a href="https://github.com/ImageMagick/ImageMagick/commit/85bd7d6f2cb64edd1e2f162cefb2f31dad5f7f7f"><code class="language-plaintext highlighter-rouge">85bd7d6</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-v5f5-4v9x-p3f2 <a href="https://github.com/ImageMagick/ImageMagick/commit/d4069fe50be320cf7ab25261e516b176f36fc02f"><code class="language-plaintext highlighter-rouge">d4069fe</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-j657-rmv3-4m94 <a href="https://github.com/ImageMagick/ImageMagick/commit/64645a7e72cf597de471dce016f3496c1e29c17a"><code class="language-plaintext highlighter-rouge">64645a7</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-qq8x-fq3x-43h4 <a href="https://github.com/ImageMagick/ImageMagick/commit/59071d53ae13542174f99f81e59cca076bd5d70e"><code class="language-plaintext highlighter-rouge">59071d5</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/90bf73ede2b0c3120965155d8f852adb711b1e58"><code class="language-plaintext highlighter-rouge">90bf73e</code></a></li>
+ <li>revert for now <a href="https://github.com/ImageMagick/ImageMagick/commit/1636184c9ba14cb7e3e2999cf55f7de65013d8ff"><code class="language-plaintext highlighter-rouge">1636184</code></a></li>
+ <li>restore until we redesign <a href="https://github.com/ImageMagick/ImageMagick/commit/a879b231b35cbc0655e21632f09ce856dcf7a1fe"><code class="language-plaintext highlighter-rouge">a879b23</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8994 <a href="https://github.com/ImageMagick/ImageMagick/commit/91dd68053a6d54831fc66f15ebc83f9d2f5d1d15"><code class="language-plaintext highlighter-rouge">91dd680</code></a></li>
+ <li>Correct exception that is thrown. <a href="https://github.com/ImageMagick/ImageMagick/commit/fa30495376bba44d29ee1f626ec6055e6c3d6fff"><code class="language-plaintext highlighter-rouge">fa30495</code></a></li>
+ <li>Added missing check for the return value. <a href="https://github.com/ImageMagick/ImageMagick/commit/9bb2cb6e31fae0f051faaa547e978169b28e548f"><code class="language-plaintext highlighter-rouge">9bb2cb6</code></a></li>
+ <li>add dmr.h to header list <a href="https://github.com/ImageMagick/ImageMagick/commit/bfb6109187a6776ee3dff4dde08fd9d7997d6036"><code class="language-plaintext highlighter-rouge">bfb6109</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-2wwj-grp2-3fp5 <a href="https://github.com/ImageMagick/ImageMagick/commit/8aeb8e603c2960e2aaf6228924288c8bff49e765"><code class="language-plaintext highlighter-rouge">8aeb8e6</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-79p5-w6jv-r997 <a href="https://github.com/ImageMagick/ImageMagick/commit/5b3c9dd5fcfea139651be3bc5e89ce1dca709273"><code class="language-plaintext highlighter-rouge">5b3c9dd</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-vj7g-384h-64fv <a href="https://github.com/ImageMagick/ImageMagick/commit/06aa7431e28113c9a895b709cca3e10850d95a58"><code class="language-plaintext highlighter-rouge">06aa743</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-4wfv-467j-fqh9 <a href="https://github.com/ImageMagick/ImageMagick/commit/a75aab27367c4a0e57e137eb6cc5369001c85aec"><code class="language-plaintext highlighter-rouge">a75aab2</code></a></li>
+ <li>cosmetic <a href="https://github.com/ImageMagick/ImageMagick/commit/b270ee43814665152282723ceea9b6b9e9eae1e0"><code class="language-plaintext highlighter-rouge">b270ee4</code></a></li>
+ <li>fix undefined variable <a href="https://github.com/ImageMagick/ImageMagick/commit/f1fb5d1c6b74f3e51ec6c93978ab292355b15d98"><code class="language-plaintext highlighter-rouge">f1fb5d1</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-79p5-w6jv-r997 <a href="https://github.com/ImageMagick/ImageMagick/commit/c73f7913f72b8d97fe89f4094eefdc8d34edf5a9"><code class="language-plaintext highlighter-rouge">c73f791</code></a></li>
+ <li>increase area limit <a href="https://github.com/ImageMagick/ImageMagick/commit/89a61e19f59d926d8861b98e6fd3eece392b019f"><code class="language-plaintext highlighter-rouge">89a61e1</code></a></li>
+ <li>clarify comments <a href="https://github.com/ImageMagick/ImageMagick/commit/b3fb0fb042f71c21779a3064fc2eec4199d87db7"><code class="language-plaintext highlighter-rouge">b3fb0fb</code></a></li>
+ <li>Replace _wrename with MoveFileExW so an existing file will be overwritten. <a href="https://github.com/ImageMagick/ImageMagick/commit/fbc276ef5d157551f7842f766d82e45b6bff1300"><code class="language-plaintext highlighter-rouge">fbc276e</code></a></li>
+ <li>Revert changes from #8986 until we have a better way of doing this. <a href="https://github.com/ImageMagick/ImageMagick/commit/defd675d9725ea0e54aaf0fd9a94131952a37d92"><code class="language-plaintext highlighter-rouge">defd675</code></a></li>
+ <li>Moved shared logic to a skip a doctype or comment inside xml-tree.c <a href="https://github.com/ImageMagick/ImageMagick/commit/ca9880442eb04f148747757ceb64dfce0a7d5f74"><code class="language-plaintext highlighter-rouge">ca98804</code></a></li>
+ <li>Moved SubstituteXMLEntities so we don’t duplicate the method. <a href="https://github.com/ImageMagick/ImageMagick/commit/223fccf8f8eb542a8bd844ffeb056b3a3840c2c8"><code class="language-plaintext highlighter-rouge">223fccf</code></a></li>
+ <li>cosmetic <a href="https://github.com/ImageMagick/ImageMagick/commit/2b0db48eced9bd5635d8fb7d48df8dd372b39fe5"><code class="language-plaintext highlighter-rouge">2b0db48</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-x258-xjqf-6j3f <a href="https://github.com/ImageMagick/ImageMagick/commit/8911876f1e1e8f69cf1c1dd8f9a69685c8b776ae"><code class="language-plaintext highlighter-rouge">8911876</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-fp46-842c-2v83 <a href="https://github.com/ImageMagick/ImageMagick/commit/3d96f305edff25c2ce6792c72d5f6987c8a5a961"><code class="language-plaintext highlighter-rouge">3d96f30</code></a></li>
+ <li>Improved skipping of comments and return a failure when comments or doctype are not terminated. <a href="https://github.com/ImageMagick/ImageMagick/commit/504231bb26021ba66d9633f34ba15ded32637b5e"><code class="language-plaintext highlighter-rouge">504231b</code></a></li>
+ <li>Fix memory leak when policy parsing stops before append <a href="https://github.com/ImageMagick/ImageMagick/commit/ba65fcd80f8296b96641b7f47c45d1ee989527ec"><code class="language-plaintext highlighter-rouge">ba65fcd</code></a></li>
+ <li>Stop configuration parsing when an included file fails. <a href="https://github.com/ImageMagick/ImageMagick/commit/a3b8df6ab0ca77c1bd9da26ec2514b6a8175c51f"><code class="language-plaintext highlighter-rouge">a3b8df6</code></a></li>
+ <li>Deny authorization when policy configuration fails to load. <a href="https://github.com/ImageMagick/ImageMagick/commit/aaf5e8d9ae5177c705c55a798d80700addec3255"><code class="language-plaintext highlighter-rouge">aaf5e8d</code></a></li>
+ <li>Add dng:read-thumbnails to read embedded thumbnails as images. <a href="https://github.com/ImageMagick/ImageMagick/commit/46389fea6efb50a1827f1a541c410bd7778112c7"><code class="language-plaintext highlighter-rouge">46389fe</code></a></li>
+ <li>Clean up includes. <a href="https://github.com/ImageMagick/ImageMagick/commit/4cca2897ba7b93a844b2d49c93314035aea216c3"><code class="language-plaintext highlighter-rouge">4cca289</code></a></li>
+ <li>Fix duplicate post-processing in redirected image reads (#9000). <a href="https://github.com/ImageMagick/ImageMagick/commit/046b7a91b3b903f6a09f3b74286a9d7f3a1feefa"><code class="language-plaintext highlighter-rouge">046b7a9</code></a></li>
+ <li>Honor explicit TIFF selection when reading DNG-tagged files (#9001) <a href="https://github.com/ImageMagick/ImageMagick/commit/ee4a3dc8a00cb2522316565ef7199713dd0ab405"><code class="language-plaintext highlighter-rouge">ee4a3dc</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-5222-mhv9-26rg <a href="https://github.com/ImageMagick/ImageMagick/commit/5690b36dae2b6277054ca163542fb69ed570e3d9"><code class="language-plaintext highlighter-rouge">5690b36</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/f5f1a8233864b02e7db11cdb28a3eb2adc70250f"><code class="language-plaintext highlighter-rouge">f5f1a82</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-h3qx-937j-245g <a href="https://github.com/ImageMagick/ImageMagick/commit/d1402c213c06d06f2e006e9ff433050774093677"><code class="language-plaintext highlighter-rouge">d1402c2</code></a></li>
+ <li>Try reading the file as a DNG after the TIFF is read so we can still return the tiff when DNG reading fails (#9001). <a href="https://github.com/ImageMagick/ImageMagick/commit/f841c599893d42e59d3ef6783b219152a45b91cd"><code class="language-plaintext highlighter-rouge">f841c59</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-rm4p-xqw3-f45f <a href="https://github.com/ImageMagick/ImageMagick/commit/e47e2036f7fd850076820fe077fd2b059dac7300"><code class="language-plaintext highlighter-rouge">e47e203</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-528x-2384-jmxp <a href="https://github.com/ImageMagick/ImageMagick/commit/453568d7d98a409681374ffacaf2edf2cd53c1f3"><code class="language-plaintext highlighter-rouge">453568d</code></a></li>
+ <li>don’t skip shell characters <a href="https://github.com/ImageMagick/ImageMagick/commit/37a213e2dc13ff305e349a6c9e36e590428c5ea1"><code class="language-plaintext highlighter-rouge">37a213e</code></a></li>
+ <li>account for backticks <a href="https://github.com/ImageMagick/ImageMagick/commit/5aa7761ce567c4ad377f9625376221e4efdc66c6"><code class="language-plaintext highlighter-rouge">5aa7761</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-j2rp-5r6m-f7x8 <a href="https://github.com/ImageMagick/ImageMagick/commit/93117bc69ba2e22974b0b98e27ab10b0cb7f0403"><code class="language-plaintext highlighter-rouge">93117bc</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/9009 <a href="https://github.com/ImageMagick/ImageMagick/commit/98989e52f48aae91f9a053258a9633f8506bdec2"><code class="language-plaintext highlighter-rouge">98989e5</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/9010 <a href="https://github.com/ImageMagick/ImageMagick/commit/4df1cf00f6de1cf026a7730e2702a1f06d1f0ef1"><code class="language-plaintext highlighter-rouge">4df1cf0</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/9010 <a href="https://github.com/ImageMagick/ImageMagick/commit/57a8384e9c6db073fc1ff1f9744df6c2afa2beeb"><code class="language-plaintext highlighter-rouge">57a8384</code></a></li>
+ <li>account for shell escape <a href="https://github.com/ImageMagick/ImageMagick/commit/a003c02abc42ac449dd4c8e5df6e91eb1218deec"><code class="language-plaintext highlighter-rouge">a003c02</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/9008 <a href="https://github.com/ImageMagick/ImageMagick/commit/ad24de5be953951959c4053f5e004545c8ee3f00"><code class="language-plaintext highlighter-rouge">ad24de5</code></a></li>
+ <li>correct error metrics <a href="https://github.com/ImageMagick/ImageMagick/commit/3896daa7181ae54cb6e56a694b8c302d56c3a363"><code class="language-plaintext highlighter-rouge">3896daa</code></a></li>
+ <li>Updated the dependencies. <a href="https://github.com/ImageMagick/ImageMagick/commit/cc80e2b5230e5328da2b3302d88f49aabf28790f"><code class="language-plaintext highlighter-rouge">cc80e2b</code></a></li>
+ <li>set client name <a href="https://github.com/ImageMagick/ImageMagick/commit/4bab3bc370e9371fc5b3fa27a84ad4b51aa6c1aa"><code class="language-plaintext highlighter-rouge">4bab3bc</code></a></li>
+ <li>release <a href="https://github.com/ImageMagick/ImageMagick/commit/211e5b975a0019a88dcef5f84c1193f46738d815"><code class="language-plaintext highlighter-rouge">211e5b9</code></a></li>
+</ul>
+
+<h2 id="712-32---2026-09-27"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-31...7.1.2-32">7.1.2-32</a> - 2026-09-27</h2>
+
+<h3 id="merged-2">Merged</h3>
+
+<ul>
+ <li>Allocate the dither color cache lazily in small blocks <a href="https://github.com/ImageMagick/ImageMagick/pull/8976"><code class="language-plaintext highlighter-rouge">#8976</code></a></li>
+ <li>Avoid copying the MVG text into every graphic context <a href="https://github.com/ImageMagick/ImageMagick/pull/8975"><code class="language-plaintext highlighter-rouge">#8975</code></a></li>
+ <li>build(deps): bump the codeql-action group with 3 updates <a href="https://github.com/ImageMagick/ImageMagick/pull/8973"><code class="language-plaintext highlighter-rouge">#8973</code></a></li>
+ <li>Terminate the XMP profile collected by the Ghostscript reader <a href="https://github.com/ImageMagick/ImageMagick/pull/8966"><code class="language-plaintext highlighter-rouge">#8966</code></a></li>
+ <li>Added missing check for eof in DiscardBlobBytes to prevent a retry loop <a href="https://github.com/ImageMagick/ImageMagick/pull/8967"><code class="language-plaintext highlighter-rouge">#8967</code></a></li>
+ <li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">cd21a4f</code> to <code class="language-plaintext highlighter-rouge">9559ceb</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8965"><code class="language-plaintext highlighter-rouge">#8965</code></a></li>
+ <li>Don’t use the Freetype library handle if the initialization failed <a href="https://github.com/ImageMagick/ImageMagick/pull/8964"><code class="language-plaintext highlighter-rouge">#8964</code></a></li>
+ <li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">513c074</code> to <code class="language-plaintext highlighter-rouge">cd21a4f</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8962"><code class="language-plaintext highlighter-rouge">#8962</code></a></li>
+ <li>build(deps): bump azure/login from 3.0.2 to 3.1.0 <a href="https://github.com/ImageMagick/ImageMagick/pull/8961"><code class="language-plaintext highlighter-rouge">#8961</code></a></li>
+ <li>build(deps): bump the codeql-action group with 3 updates <a href="https://github.com/ImageMagick/ImageMagick/pull/8960"><code class="language-plaintext highlighter-rouge">#8960</code></a></li>
+ <li>Report buffered output failures when closing blobs <a href="https://github.com/ImageMagick/ImageMagick/pull/8954"><code class="language-plaintext highlighter-rouge">#8954</code></a></li>
+ <li>Preserve IPTC profiles during automatic Ultra HDR decoding <a href="https://github.com/ImageMagick/ImageMagick/pull/8952"><code class="language-plaintext highlighter-rouge">#8952</code></a></li>
+ <li>Honor quality settings when transforming retained gain maps <a href="https://github.com/ImageMagick/ImageMagick/pull/8947"><code class="language-plaintext highlighter-rouge">#8947</code></a></li>
+ <li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">2260313</code> to <code class="language-plaintext highlighter-rouge">513c074</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8951"><code class="language-plaintext highlighter-rouge">#8951</code></a></li>
+ <li>Compose gain-map crop transforms before rounding <a href="https://github.com/ImageMagick/ImageMagick/pull/8948"><code class="language-plaintext highlighter-rouge">#8948</code></a></li>
+ <li>Fix grayscale Ultra HDR base encoding <a href="https://github.com/ImageMagick/ImageMagick/pull/8945"><code class="language-plaintext highlighter-rouge">#8945</code></a></li>
+ <li>Reset gain-map canvas before replaying crops <a href="https://github.com/ImageMagick/ImageMagick/pull/8944"><code class="language-plaintext highlighter-rouge">#8944</code></a></li>
+ <li>Preserve JPEG comments during automatic Ultra HDR decoding <a href="https://github.com/ImageMagick/ImageMagick/pull/8943"><code class="language-plaintext highlighter-rouge">#8943</code></a></li>
+ <li>fix: preserve UHDR resize filters <a href="https://github.com/ImageMagick/ImageMagick/pull/8942"><code class="language-plaintext highlighter-rouge">#8942</code></a></li>
+ <li>fix: preserve destination on UHDR encoder failure <a href="https://github.com/ImageMagick/ImageMagick/pull/8941"><code class="language-plaintext highlighter-rouge">#8941</code></a></li>
+ <li>Fix static libuhdr and module linking <a href="https://github.com/ImageMagick/ImageMagick/pull/8940"><code class="language-plaintext highlighter-rouge">#8940</code></a></li>
+ <li>Preserve EXIF dimensions during transforms <a href="https://github.com/ImageMagick/ImageMagick/pull/8937"><code class="language-plaintext highlighter-rouge">#8937</code></a></li>
+ <li>Preserve Ultra HDR metadata precision <a href="https://github.com/ImageMagick/ImageMagick/pull/8938"><code class="language-plaintext highlighter-rouge">#8938</code></a></li>
+</ul>
+
+<h3 id="commits-2">Commits</h3>
+
+<ul>
+ <li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/56d965e31bb5fea8668a98a4a5fd080a20e5f445"><code class="language-plaintext highlighter-rouge">56d965e</code></a></li>
+ <li>Force the system version of zlib in the libjpeg-turbo build. <a href="https://github.com/ImageMagick/ImageMagick/commit/5f3ddea5676aeb9f0b8ac44d97e95bd6bbef6934"><code class="language-plaintext highlighter-rouge">5f3ddea</code></a></li>
+ <li>latest autoconf update <a href="https://github.com/ImageMagick/ImageMagick/commit/a6ba226d81583f069b46d331dac2d6af8e7159c6"><code class="language-plaintext highlighter-rouge">a6ba226</code></a></li>
+ <li>eliminate compiler warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/3b5dd62f872e86c9865b8656f682437ac25521f3"><code class="language-plaintext highlighter-rouge">3b5dd62</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/7932a3c97bec000cbc70c0a89e0f7fbcb1f0b205"><code class="language-plaintext highlighter-rouge">7932a3c</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/ba5d752fd28bf3f4702e458e1f1d9941d7e94cd5"><code class="language-plaintext highlighter-rouge">ba5d752</code></a></li>
+ <li>eliminate compile warning <a href="https://github.com/ImageMagick/ImageMagick/commit/788a643aed56d2588becba113e9e1c4f6ca95745"><code class="language-plaintext highlighter-rouge">788a643</code></a></li>
+ <li>eliminate compile warning <a href="https://github.com/ImageMagick/ImageMagick/commit/2274d056c1d792997ea66b3b2ec8966853f5b57b"><code class="language-plaintext highlighter-rouge">2274d05</code></a></li>
+ <li>eliminate compiler warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/1cea1644b52e931af7e8ef0eb668adba5174f4d7"><code class="language-plaintext highlighter-rouge">1cea164</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/b501c08b2309f99518ff05311fc8963190ac0b6a"><code class="language-plaintext highlighter-rouge">b501c08</code></a></li>
+ <li>eliminate compile warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/471d079244bd1e06e30b21161e36cc2f460c5014"><code class="language-plaintext highlighter-rouge">471d079</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/c6eda7454518e0aa6166782ac10f6a94bb9a61c5"><code class="language-plaintext highlighter-rouge">c6eda74</code></a></li>
+ <li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/f604d6dfc6be73f1596b6de3eb9ca44466f93d87"><code class="language-plaintext highlighter-rouge">f604d6d</code></a></li>
+ <li>eliminate compiler warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/ab76ec8848a679f0837e55ecec7e953f96b49c8c"><code class="language-plaintext highlighter-rouge">ab76ec8</code></a></li>
+ <li>replace deprecated -affine option <a href="https://github.com/ImageMagick/ImageMagick/commit/7ee5fba7c2fb80659906cc87fb7c092d2ffa523c"><code class="language-plaintext highlighter-rouge">7ee5fba</code></a></li>
+ <li>Corrected the type in the GetMagickModule define. <a href="https://github.com/ImageMagick/ImageMagick/commit/96cd7729f026d3e5b6abf99f68e5cfb7faa5d95b"><code class="language-plaintext highlighter-rouge">96cd772</code></a></li>
+ <li>Fixed the windows build by reverting some of the changes. <a href="https://github.com/ImageMagick/ImageMagick/commit/f8d3f5e32a66971806546e86c495b010b74bde54"><code class="language-plaintext highlighter-rouge">f8d3f5e</code></a></li>
+ <li>Removed unnecessary includes. <a href="https://github.com/ImageMagick/ImageMagick/commit/e168300a566c9c37d27e646c23e13b19d71b6cad"><code class="language-plaintext highlighter-rouge">e168300</code></a></li>
+ <li>Restored the cstring includes in Magick++. <a href="https://github.com/ImageMagick/ImageMagick/commit/1ef6db5de54fe9c8a0fa747619373dd2d21ff35a"><code class="language-plaintext highlighter-rouge">1ef6db5</code></a></li>
+ <li>Pre-declare libstdc++ global types before MagickCore namespace. <a href="https://github.com/ImageMagick/ImageMagick/commit/2adb8940eb18a6772a51bc89abcacfa2cdad49f0"><code class="language-plaintext highlighter-rouge">2adb894</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-8xmr-6q99-c4x8 <a href="https://github.com/ImageMagick/ImageMagick/commit/af7b85012e62fa65393277790b96c56a98d882b6"><code class="language-plaintext highlighter-rouge">af7b850</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-cvgp-q487-j22w <a href="https://github.com/ImageMagick/ImageMagick/commit/0e82a4d0b294581186ed7b3e1dce59c858a73dba"><code class="language-plaintext highlighter-rouge">0e82a4d</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-8x3v-wr32-qqh4 <a href="https://github.com/ImageMagick/ImageMagick/commit/12db6f04e895deae4537ead10c771a244607794a"><code class="language-plaintext highlighter-rouge">12db6f0</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-jjp4-3fwf-393j <a href="https://github.com/ImageMagick/ImageMagick/commit/1926ccf119141c26274c120d1899dffae19b0c71"><code class="language-plaintext highlighter-rouge">1926ccf</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-9f9w-84g3-vp2c <a href="https://github.com/ImageMagick/ImageMagick/commit/15892fc0dc050a3693e28a214478a8d8488d648c"><code class="language-plaintext highlighter-rouge">15892fc</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-v2x3-wpmg-c4w6 <a href="https://github.com/ImageMagick/ImageMagick/commit/fb743d60700c9bc350c3d2a0b48b998bdabc466c"><code class="language-plaintext highlighter-rouge">fb743d6</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/ce948a1745397593343b1a218ae113ceb8ee1327"><code class="language-plaintext highlighter-rouge">ce948a1</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8939 <a href="https://github.com/ImageMagick/ImageMagick/commit/1a0d1b71f7b7f1c1900e23ea246ab9dc9d78a184"><code class="language-plaintext highlighter-rouge">1a0d1b7</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/5921a78a0f6d9a40119c71339c9c07c27f8f94d5"><code class="language-plaintext highlighter-rouge">5921a78</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/0fcc3eb06758a865deb3dac4f8286cfda6a34d8e"><code class="language-plaintext highlighter-rouge">0fcc3eb</code></a></li>
+ <li>latest autoconf update <a href="https://github.com/ImageMagick/ImageMagick/commit/e6eed392bb7d2605b60fea89ff672944d97561d3"><code class="language-plaintext highlighter-rouge">e6eed39</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8939 <a href="https://github.com/ImageMagick/ImageMagick/commit/3501ef340e01e615fffe436b9528d30b716a71c6"><code class="language-plaintext highlighter-rouge">3501ef3</code></a></li>
+ <li>revert <a href="https://github.com/ImageMagick/ImageMagick/commit/cd5379854751dd47346e9e22ffc88727711696a5"><code class="language-plaintext highlighter-rouge">cd53798</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8939 <a href="https://github.com/ImageMagick/ImageMagick/commit/72b82a8e2a0e6abf76db52f7e69b01c217f63f34"><code class="language-plaintext highlighter-rouge">72b82a8</code></a></li>
+ <li>append random hex code to backup filename <a href="https://github.com/ImageMagick/ImageMagick/commit/6ace96334ea7d0a42d1c900614008ef8616956e8"><code class="language-plaintext highlighter-rouge">6ace963</code></a></li>
+ <li>match destructor to constructor <a href="https://github.com/ImageMagick/ImageMagick/commit/960adadd30429b0b8b6b44b20fc6c280bfc07980"><code class="language-plaintext highlighter-rouge">960adad</code></a></li>
+ <li>create a secure temporary filename <a href="https://github.com/ImageMagick/ImageMagick/commit/caaad7177b5f61ee2a0c3a07bb554c3cc46afa40"><code class="language-plaintext highlighter-rouge">caaad71</code></a></li>
+ <li>move O_NOFOLLOW to main IM header <a href="https://github.com/ImageMagick/ImageMagick/commit/989dfd4833dbfb1a3fbc0ee6dfa4acc01b2956e8"><code class="language-plaintext highlighter-rouge">989dfd4</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8939 <a href="https://github.com/ImageMagick/ImageMagick/commit/81142c9d64679a32a73d89ac2f950d5e5732c85d"><code class="language-plaintext highlighter-rouge">81142c9</code></a></li>
+ <li>check for ‘>’ terminator on DOCTYPE <a href="https://github.com/ImageMagick/ImageMagick/commit/3cb153f2112a183316769387e52d784b87ce877d"><code class="language-plaintext highlighter-rouge">3cb153f</code></a></li>
+ <li>revert <a href="https://github.com/ImageMagick/ImageMagick/commit/08328d8343e441a073d1b56e0e4ebac2c02fac28"><code class="language-plaintext highlighter-rouge">08328d8</code></a></li>
+ <li>improve DOCTYPE block <a href="https://github.com/ImageMagick/ImageMagick/commit/3ca8bea267fbef983249d73a43c1790ee4a0b65e"><code class="language-plaintext highlighter-rouge">3ca8bea</code></a></li>
+ <li>cosmetic <a href="https://github.com/ImageMagick/ImageMagick/commit/a5e13b9e1d31136499946847bda9708929272c34"><code class="language-plaintext highlighter-rouge">a5e13b9</code></a></li>
+ <li>more robuse DOCTYPE parser <a href="https://github.com/ImageMagick/ImageMagick/commit/399d4bd3b081f44c7fef78153f65e8cdebed9f1a"><code class="language-plaintext highlighter-rouge">399d4bd</code></a></li>
+ <li>threads heuristic now based on pixel rather than row count <a href="https://github.com/ImageMagick/ImageMagick/commit/04fd26111c0ccb1afd60ab08d6037c4776080b45"><code class="language-plaintext highlighter-rouge">04fd261</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-vv56-wmgw-m36w <a href="https://github.com/ImageMagick/ImageMagick/commit/ce92ae07c2ca2c20c131eaf6da6da734c1cafce0"><code class="language-plaintext highlighter-rouge">ce92ae0</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-2vwg-3g4g-qprm <a href="https://github.com/ImageMagick/ImageMagick/commit/cafc7372c8113a9636766f0eddde7b90373c9b44"><code class="language-plaintext highlighter-rouge">cafc737</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/8174e9ae3d49b41b3b273394330df5138c12744c"><code class="language-plaintext highlighter-rouge">8174e9a</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/ab0c467067608193200a41fee9a45b67a3a151ed"><code class="language-plaintext highlighter-rouge">ab0c467</code></a></li>
+ <li>check for connection reset <a href="https://github.com/ImageMagick/ImageMagick/commit/1532081c6dbfe774b811eee85f5bb3a08329f3ad"><code class="language-plaintext highlighter-rouge">1532081</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8949 <a href="https://github.com/ImageMagick/ImageMagick/commit/9249cabf1a131eb74c138145afd1452cb62873f8"><code class="language-plaintext highlighter-rouge">9249cab</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-q6h4-6f2h-8hfq <a href="https://github.com/ImageMagick/ImageMagick/commit/2ec49e6f1971ee5b0ff654364cf806b20c202c86"><code class="language-plaintext highlighter-rouge">2ec49e6</code></a></li>
+ <li>Removed incorrect option. <a href="https://github.com/ImageMagick/ImageMagick/commit/c5342194d6c84c78be5439216bbd26454027d1a5"><code class="language-plaintext highlighter-rouge">c534219</code></a></li>
+ <li>Disable more parts of libjpeg-turbo in the oss-fuzz build. <a href="https://github.com/ImageMagick/ImageMagick/commit/599ebe5c8a751abb842c894f69621014046bfacc"><code class="language-plaintext highlighter-rouge">599ebe5</code></a></li>
+ <li>Revert some of the oss-fuzz changes. <a href="https://github.com/ImageMagick/ImageMagick/commit/a19ff0728cba02c18a617c44d88ac9d7865c5d90"><code class="language-plaintext highlighter-rouge">a19ff07</code></a></li>
+ <li>Explicitly set the include dir in the oss-fuzz build to fix libjpeg-turbo issue. <a href="https://github.com/ImageMagick/ImageMagick/commit/3797e92c78c4e3f1ab541646dff3f9b2384d06b8"><code class="language-plaintext highlighter-rouge">3797e92</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-4h52-f5gr-2w2h <a href="https://github.com/ImageMagick/ImageMagick/commit/2814fa03d04313c25bf25c1e40485d38f9e0a46a"><code class="language-plaintext highlighter-rouge">2814fa0</code></a></li>
+ <li>Cache distributed pixel cache shared secret. <a href="https://github.com/ImageMagick/ImageMagick/commit/6f04f5f1cfb7d36f5b34e1626a0bb356c20b9cd8"><code class="language-plaintext highlighter-rouge">6f04f5f</code></a></li>
+ <li>Improved method name. <a href="https://github.com/ImageMagick/ImageMagick/commit/ed3e3ab42b184e5a5c6ce0d17e3d46be58b1679f"><code class="language-plaintext highlighter-rouge">ed3e3ab</code></a></li>
+ <li>No longer include a private header file in a public header file. <a href="https://github.com/ImageMagick/ImageMagick/commit/c9a75832c16c37b56c2776cbc61a4930a1ab90f0"><code class="language-plaintext highlighter-rouge">c9a7583</code></a></li>
+ <li>Correct exception throwing method. <a href="https://github.com/ImageMagick/ImageMagick/commit/ecb4d9789784ab1030d96709e0776fbece1b4b5c"><code class="language-plaintext highlighter-rouge">ecb4d97</code></a></li>
+ <li>More corrections of exception throw methods. <a href="https://github.com/ImageMagick/ImageMagick/commit/0369b8503a12dae8101246d5d7a47ff3b817d2f0"><code class="language-plaintext highlighter-rouge">0369b85</code></a></li>
+ <li>Moved unpacking of libraw image to a separate method. <a href="https://github.com/ImageMagick/ImageMagick/commit/fef349d7584d324fec43e8258547e984f327f424"><code class="language-plaintext highlighter-rouge">fef349d</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-9p7q-63hw-mcr4 <a href="https://github.com/ImageMagick/ImageMagick/commit/e4f7ad983df6c831832eba3689f96b75f8b67051"><code class="language-plaintext highlighter-rouge">e4f7ad9</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-f983-243h-9x4r <a href="https://github.com/ImageMagick/ImageMagick/commit/b2d579d20cc503185b6e8b0bc2dfb520b7bce58a"><code class="language-plaintext highlighter-rouge">b2d579d</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-233r-2p53-wqf5 <a href="https://github.com/ImageMagick/ImageMagick/commit/6cfb8d8c65bb0aba49903589b444f45ea074a226"><code class="language-plaintext highlighter-rouge">6cfb8d8</code></a></li>
+ <li>eliminate compiler exception <a href="https://github.com/ImageMagick/ImageMagick/commit/ca20b6b4220f6d3e1ee5be0f363c88878cbbe81d"><code class="language-plaintext highlighter-rouge">ca20b6b</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-7q74-r26w-fwcx <a href="https://github.com/ImageMagick/ImageMagick/commit/9e789499e67dbf5c4ee9fe1b72690738c799ec73"><code class="language-plaintext highlighter-rouge">9e78949</code></a></li>
+ <li>block file descriptor inheritance <a href="https://github.com/ImageMagick/ImageMagick/commit/c9120e952d405b5a490726cfa870a916cb95cfda"><code class="language-plaintext highlighter-rouge">c9120e9</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/41297734868ea79f3599b1fb187806030414479e"><code class="language-plaintext highlighter-rouge">4129773</code></a></li>
+ <li>eliminate compiler exception <a href="https://github.com/ImageMagick/ImageMagick/commit/1eac01474c9a6c4cf9d91d2a32e82720672aa098"><code class="language-plaintext highlighter-rouge">1eac014</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-5j8x-vq8c-vrp9 <a href="https://github.com/ImageMagick/ImageMagick/commit/5a5c2e51948fcc5d85b8d832938e2c1b4db4a699"><code class="language-plaintext highlighter-rouge">5a5c2e5</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-58h4-rwr6-wj72 <a href="https://github.com/ImageMagick/ImageMagick/commit/d98509b23a547d9ccd0a8af8650d03c5c01c3722"><code class="language-plaintext highlighter-rouge">d98509b</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-2fgx-26mg-j4f4 <a href="https://github.com/ImageMagick/ImageMagick/commit/15ce9c9eaac8cf95728ec323ac249630c89a3111"><code class="language-plaintext highlighter-rouge">15ce9c9</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-vxwm-jfjc-3r4x <a href="https://github.com/ImageMagick/ImageMagick/commit/48c49d0cc2b72970b762e0d3263f6c35ab35a7b4"><code class="language-plaintext highlighter-rouge">48c49d0</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/281db90a58aae41f6b3dc1342b78706ed259bfd4"><code class="language-plaintext highlighter-rouge">281db90</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/9efb94b8059dfe152618c4e024351ac481a0240d"><code class="language-plaintext highlighter-rouge">9efb94b</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-vxwm-jfjc-3r4x <a href="https://github.com/ImageMagick/ImageMagick/commit/2ed1b96b9bc71434f0c4e82e3c63fec029c684c6"><code class="language-plaintext highlighter-rouge">2ed1b96</code></a></li>
+ <li>Various security and performance improvements for the ase decoder (GHSA-gwj6-pm7x-3r63) <a href="https://github.com/ImageMagick/ImageMagick/commit/5ecd5b047cee7ccfe4e14a733a0755c7b2a90c7d"><code class="language-plaintext highlighter-rouge">5ecd5b0</code></a></li>
+ <li>Added extra security check (GHSA-gwj6-pm7x-3r63) <a href="https://github.com/ImageMagick/ImageMagick/commit/0691546106f4c7e8857da9f21a0e4a8f41915388"><code class="language-plaintext highlighter-rouge">0691546</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8957 <a href="https://github.com/ImageMagick/ImageMagick/commit/9bf9100fa0cd520083070ff8094e61623a5bd4d5"><code class="language-plaintext highlighter-rouge">9bf9100</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-g6p6-3ggg-3w7j <a href="https://github.com/ImageMagick/ImageMagick/commit/f053f778409932d55b95758c4b1516b63191d1eb"><code class="language-plaintext highlighter-rouge">f053f77</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-f32c-2v6j-wvh5 <a href="https://github.com/ImageMagick/ImageMagick/commit/da4cfd78a2ceea4cf54207834f9d60c1b9c38797"><code class="language-plaintext highlighter-rouge">da4cfd7</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-w6hf-vvx5-4qmj <a href="https://github.com/ImageMagick/ImageMagick/commit/7d3a270ca2d9542920a1045900dcbb5195f87fe6"><code class="language-plaintext highlighter-rouge">7d3a270</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-54hm-vrmh-75qj <a href="https://github.com/ImageMagick/ImageMagick/commit/48e5ce1779fc640a389f0020fd7d965d0c08236e"><code class="language-plaintext highlighter-rouge">48e5ce1</code></a></li>
+ <li>Move setting the shred passes to a single method. <a href="https://github.com/ImageMagick/ImageMagick/commit/b5852a51a881b4313f5bb67df493ef762411a94f"><code class="language-plaintext highlighter-rouge">b5852a5</code></a></li>
+ <li>Added missing typecasts. <a href="https://github.com/ImageMagick/ImageMagick/commit/f259c689abb04fee2732487bbf7809199bbd95ae"><code class="language-plaintext highlighter-rouge">f259c68</code></a></li>
+ <li>utilize GetShredPasses() <a href="https://github.com/ImageMagick/ImageMagick/commit/84e11a0c73fb1213d221431d60f856db3fcbb190"><code class="language-plaintext highlighter-rouge">84e11a0</code></a></li>
+ <li>define GetShreadPasses() <a href="https://github.com/ImageMagick/ImageMagick/commit/c1811dd3bb22b7d1ca6ce9c454e756b578e92a5d"><code class="language-plaintext highlighter-rouge">c1811dd</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-9hqg-c52m-2h83 <a href="https://github.com/ImageMagick/ImageMagick/commit/7ed77f6eb37ee83408dc3b40aa8752bfc5070180"><code class="language-plaintext highlighter-rouge">7ed77f6</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-m9c7-gf3j-hx6h <a href="https://github.com/ImageMagick/ImageMagick/commit/e9872c4a165d869e75d10799c47195725ebf4132"><code class="language-plaintext highlighter-rouge">e9872c4</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-92p2-h75x-hg82 <a href="https://github.com/ImageMagick/ImageMagick/commit/4395331bc78727b65c0b47e344003c982e9580d6"><code class="language-plaintext highlighter-rouge">4395331</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-j39j-wmxg-j8mv <a href="https://github.com/ImageMagick/ImageMagick/commit/3285d692ebf200e9cbeff59d1ccc00caab99ad54"><code class="language-plaintext highlighter-rouge">3285d69</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-xxrx-rjp3-27rj <a href="https://github.com/ImageMagick/ImageMagick/commit/aa104ff2e408bea23828e7a7a346f9080da4104b"><code class="language-plaintext highlighter-rouge">aa104ff</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-rvv7-5mh8-vcfc <a href="https://github.com/ImageMagick/ImageMagick/commit/a0ca2c739c0216ff4efbd631d1ba7fd54dba1ff4"><code class="language-plaintext highlighter-rouge">a0ca2c7</code></a></li>
+ <li>revert <a href="https://github.com/ImageMagick/ImageMagick/commit/87d251de1664c5ba71064912fd4cc419a983d105"><code class="language-plaintext highlighter-rouge">87d251d</code></a></li>
+ <li>Escape the title in the CIP encoder (GHSA-3429-f84m-8qhw) <a href="https://github.com/ImageMagick/ImageMagick/commit/45bb7328b36c163234f5ccb7f1d494b7c4c8c775"><code class="language-plaintext highlighter-rouge">45bb732</code></a></li>
+ <li>continue after parsing DOCTYPE <a href="https://github.com/ImageMagick/ImageMagick/commit/b3b8c0a45c55d680d36ba9189b9b74320f75fd68"><code class="language-plaintext highlighter-rouge">b3b8c0a</code></a></li>
+ <li>Corrected depth check to prevent a stack overflow (GHSA-462x-739v-qvq2) <a href="https://github.com/ImageMagick/ImageMagick/commit/507aee2308046b25e251d0be1a5371327bb79683"><code class="language-plaintext highlighter-rouge">507aee2</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8969 <a href="https://github.com/ImageMagick/ImageMagick/commit/ba4723adf2f8a29bf9372ed2c837cf678d3c13f9"><code class="language-plaintext highlighter-rouge">ba4723a</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8968 <a href="https://github.com/ImageMagick/ImageMagick/commit/54fdd95562e4ac1ea973be89156500b37fac2c2e"><code class="language-plaintext highlighter-rouge">54fdd95</code></a></li>
+ <li>optimize file read checking <a href="https://github.com/ImageMagick/ImageMagick/commit/da4ca6b71ec9509137f700414ebb1291af099a29"><code class="language-plaintext highlighter-rouge">da4ca6b</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-jph3-37cg-79wg <a href="https://github.com/ImageMagick/ImageMagick/commit/7605c7619da77a5ff1ccf4ec159f3ec782c6bda7"><code class="language-plaintext highlighter-rouge">7605c76</code></a></li>
+ <li>Corrected the checks in the unit tests. <a href="https://github.com/ImageMagick/ImageMagick/commit/e2a61c6e0cb33dd3004c0e1590dd4012b6110766"><code class="language-plaintext highlighter-rouge">e2a61c6</code></a></li>
+ <li>eliminate compiler warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/a89dea96ee6e5cb14c94f4353a7040599f447222"><code class="language-plaintext highlighter-rouge">a89dea9</code></a></li>
+ <li>eliminate compiler warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/d956bba0bacd70dc1fbe0d8dc3b87dca14086496"><code class="language-plaintext highlighter-rouge">d956bba</code></a></li>
+ <li>Updated configure. <a href="https://github.com/ImageMagick/ImageMagick/commit/9740f6b841ec022d938d2ddb1620bd460029f288"><code class="language-plaintext highlighter-rouge">9740f6b</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-pmqj-84pr-qc7c <a href="https://github.com/ImageMagick/ImageMagick/commit/6ff963c14ccb5fefb4eb8654c8b0219033df2b20"><code class="language-plaintext highlighter-rouge">6ff963c</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-69jx-j2x2-g5w4 <a href="https://github.com/ImageMagick/ImageMagick/commit/493fab0b6072787e929184761b6ab6405a9486a2"><code class="language-plaintext highlighter-rouge">493fab0</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-w288-jj5x-hhvp <a href="https://github.com/ImageMagick/ImageMagick/commit/2eff6be3785d980bb5190244ad432fe6282d29e3"><code class="language-plaintext highlighter-rouge">2eff6be</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-w68r-6fmr-cvg4 <a href="https://github.com/ImageMagick/ImageMagick/commit/1c7763266cfedc635005a965169bc2ddcc650221"><code class="language-plaintext highlighter-rouge">1c77632</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-hvwf-wmm6-hvc3 <a href="https://github.com/ImageMagick/ImageMagick/commit/fd1b9c85f2634e34034d39016ed7542ac0a19930"><code class="language-plaintext highlighter-rouge">fd1b9c8</code></a></li>
+ <li>revert <a href="https://github.com/ImageMagick/ImageMagick/commit/9f41b2752975249fdba28c2e7898cb534915cab4"><code class="language-plaintext highlighter-rouge">9f41b27</code></a></li>
+ <li>check for vector recursion <a href="https://github.com/ImageMagick/ImageMagick/commit/9bd0fea7958d6228b9d0fb450119b1462d14bb6b"><code class="language-plaintext highlighter-rouge">9bd0fea</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-54rx-5x9g-g465 <a href="https://github.com/ImageMagick/ImageMagick/commit/f7437ebafcd92d6959eca4086d80b150d52bdb7c"><code class="language-plaintext highlighter-rouge">f7437eb</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-h499-883p-vph8 <a href="https://github.com/ImageMagick/ImageMagick/commit/df199b79f0a1c87ca009e431f03cb387af160f77"><code class="language-plaintext highlighter-rouge">df199b7</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-h499-883p-vph8 <a href="https://github.com/ImageMagick/ImageMagick/commit/8e809498fd328256612ee9c0ff7941bd452a0285"><code class="language-plaintext highlighter-rouge">8e80949</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/security/advisories/GHSA-pv8x-gq6w-gp4r <a href="https://github.com/ImageMagick/ImageMagick/commit/8caa6a0c62a3ac1f81b19a2ee929fbfe46ee0323"><code class="language-plaintext highlighter-rouge">8caa6a0</code></a></li>
+ <li>Updated the dependencies. <a href="https://github.com/ImageMagick/ImageMagick/commit/06a45577752921a51cec27e1aa6b50be3d918b1e"><code class="language-plaintext highlighter-rouge">06a4557</code></a></li>
+ <li>always check >= max recursion depth <a href="https://github.com/ImageMagick/ImageMagick/commit/93b67e25e3db42aae3c9bacad80af29a61c7bee5"><code class="language-plaintext highlighter-rouge">93b67e2</code></a></li>
+ <li>update coder depth <a href="https://github.com/ImageMagick/ImageMagick/commit/45a06aa1f650f075e53e2a7c915194426ab69519"><code class="language-plaintext highlighter-rouge">45a06aa</code></a></li>
+ <li>adapt to changes in the autotrace delegate library <a href="https://github.com/ImageMagick/ImageMagick/commit/e9af32831765b51b72667923f43a4c59171a6429"><code class="language-plaintext highlighter-rouge">e9af328</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8972 <a href="https://github.com/ImageMagick/ImageMagick/commit/8dff70c173f3010e88fa2163b710de0799fdb79e"><code class="language-plaintext highlighter-rouge">8dff70c</code></a></li>
+ <li>Fixed build error. <a href="https://github.com/ImageMagick/ImageMagick/commit/367e4fa7dd9df4f2ac29a7fd92647d395a1e6ee9"><code class="language-plaintext highlighter-rouge">367e4fa</code></a></li>
+ <li>Switch to memset to make sure this works with all compilers. <a href="https://github.com/ImageMagick/ImageMagick/commit/5f5fe85aa513d71c5cc92a81fa7c23397476cc5f"><code class="language-plaintext highlighter-rouge">5f5fe85</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/issues/8579 <a href="https://github.com/ImageMagick/ImageMagick/commit/d81304839898726d7bc5d77c4908bf7522ba2ab8"><code class="language-plaintext highlighter-rouge">d813048</code></a></li>
+ <li>latest ImageMagick documentation <a href="https://github.com/ImageMagick/ImageMagick/commit/b6300f2be53268d48ec6ad8feeea1ae987f58cf7"><code class="language-plaintext highlighter-rouge">b6300f2</code></a></li>
+ <li>Updated the dependencies. <a href="https://github.com/ImageMagick/ImageMagick/commit/3c761719e7923996383600a010a250c6b12f83af"><code class="language-plaintext highlighter-rouge">3c76171</code></a></li>
+ <li>check coder nesting <a href="https://github.com/ImageMagick/ImageMagick/commit/02100e28feb25970ddb138a9f3a61f869d989258"><code class="language-plaintext highlighter-rouge">02100e2</code></a></li>
+ <li>eleiminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/8e1b899053c339bac840ab2c8b634e84c1c193a0"><code class="language-plaintext highlighter-rouge">8e1b899</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/92300f82f12704337b06507019a1fa00353f69b0"><code class="language-plaintext highlighter-rouge">92300f8</code></a></li>
+ <li>https://github.com/ImageMagick/ImageMagick/discussions/8971 <a href="https://github.com/ImageMagick/ImageMagick/commit/32da2a7beb848f77617cc21b567a548319afbc3d"><code class="language-plaintext highlighter-rouge">32da2a7</code></a></li>
+ <li>eliminate compiler warning <a href="https://github.com/ImageMagick/ImageMagick/commit/b7e4171a5c19d9ad2bab546845a363ec47b0e592"><code class="language-plaintext highlighter-rouge">b7e4171</code></a></li>
+ <li>eliminate compiler warnings <a href="https://github.com/ImageMagick/ImageMagick/commit/68f8d115ac3f24c81e34c32f0a2deb4fc02e8b33"><code class="language-plaintext highlighter-rouge">68f8d11</code></a></li>
+ <li>release <a href="https://github.com/ImageMagick/ImageMagick/commit/ad98b244c995d2e3051757fa3b7855f45b550d24"><code class="language-plaintext highlighter-rouge">ad98b24</code></a></li>
+</ul>
+
+<h2 id="712-31---2026-09-03"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-30...7.1.2-31">7.1.2-31</a> - 2026-09-03</h2>
+
+<h3 id="merged-3">Merged</h3>
+
<ul>
<li>build: require libultrahdr 1.4.0 for UHDR <a href="https://github.com/ImageMagick/ImageMagick/pull/8936"><code class="language-plaintext highlighter-rouge">#8936</code></a></li>
<li>fix: use registered UHDR module name in policy check <a href="https://github.com/ImageMagick/ImageMagick/pull/8935"><code class="language-plaintext highlighter-rouge">#8935</code></a></li>
@@ -240,7 +649,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">678c655</code> to <code class="language-plaintext highlighter-rouge">2260313</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8923"><code class="language-plaintext highlighter-rouge">#8923</code></a></li>
</ul>
-<h3 id="commits">Commits</h3>
+<h3 id="commits-3">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/a1f2ef2aeda232d066d5c1325b810d7593e17de4"><code class="language-plaintext highlighter-rouge">a1f2ef2</code></a></li>
@@ -301,7 +710,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-30---2026-08-23"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-29...7.1.2-30">7.1.2-30</a> - 2026-08-23</h2>
-<h3 id="merged-1">Merged</h3>
+<h3 id="merged-4">Merged</h3>
<ul>
<li>Fix inline SVG style precedence <a href="https://github.com/ImageMagick/ImageMagick/pull/8920"><code class="language-plaintext highlighter-rouge">#8920</code></a></li>
@@ -320,7 +729,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>build(deps): bump the codeql-action group with 3 updates <a href="https://github.com/ImageMagick/ImageMagick/pull/8891"><code class="language-plaintext highlighter-rouge">#8891</code></a></li>
</ul>
-<h3 id="commits-1">Commits</h3>
+<h3 id="commits-4">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/62a8a0e30332dc759f37e4cafbd523c07ec02fce"><code class="language-plaintext highlighter-rouge">62a8a0e</code></a></li>
@@ -388,7 +797,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-29---2026-07-27"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-28...7.1.2-29">7.1.2-29</a> - 2026-07-27</h2>
-<h3 id="commits-2">Commits</h3>
+<h3 id="commits-5">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b8ae505adbccbf4fa7352afbfbd68b297ad5d511"><code class="language-plaintext highlighter-rouge">b8ae505</code></a></li>
@@ -404,7 +813,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-28---2026-07-26"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-27...7.1.2-28">7.1.2-28</a> - 2026-07-26</h2>
-<h3 id="merged-2">Merged</h3>
+<h3 id="merged-5">Merged</h3>
<ul>
<li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">b7f4819</code> to <code class="language-plaintext highlighter-rouge">3131b4c</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8876"><code class="language-plaintext highlighter-rouge">#8876</code></a></li>
@@ -424,13 +833,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>re-add support for libheif 1.7.0 <a href="https://github.com/ImageMagick/ImageMagick/pull/8841"><code class="language-plaintext highlighter-rouge">#8841</code></a></li>
</ul>
-<h3 id="fixed">Fixed</h3>
+<h3 id="fixed-1">Fixed</h3>
<ul>
<li>Fix writing video output to stdout in Windows (#8860) <a href="https://github.com/ImageMagick/ImageMagick/issues/7900"><code class="language-plaintext highlighter-rouge">#7900</code></a></li>
</ul>
-<h3 id="commits-3">Commits</h3>
+<h3 id="commits-6">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/3dd32151c717bb24118524f0a36e699a9aff025e"><code class="language-plaintext highlighter-rouge">3dd3215</code></a></li>
@@ -532,7 +941,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-27---2026-07-05"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-26...7.1.2-27">7.1.2-27</a> - 2026-07-05</h2>
-<h3 id="merged-3">Merged</h3>
+<h3 id="merged-6">Merged</h3>
<ul>
<li>Fix HEIC identity CICP with chroma subsampling <a href="https://github.com/ImageMagick/ImageMagick/pull/8828"><code class="language-plaintext highlighter-rouge">#8828</code></a></li>
@@ -549,13 +958,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>build(deps): bump ubuntu from <code class="language-plaintext highlighter-rouge">f3d2860</code> to <code class="language-plaintext highlighter-rouge">53958ec</code> in /.devcontainer <a href="https://github.com/ImageMagick/ImageMagick/pull/8814"><code class="language-plaintext highlighter-rouge">#8814</code></a></li>
</ul>
-<h3 id="fixed-1">Fixed</h3>
+<h3 id="fixed-2">Fixed</h3>
<ul>
<li>Fix #8819 revert soname change (#8820) <a href="https://github.com/ImageMagick/ImageMagick/issues/8819"><code class="language-plaintext highlighter-rouge">#8819</code></a></li>
</ul>
-<h3 id="commits-4">Commits</h3>
+<h3 id="commits-7">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/2c6ba183aa0121a894e8f50649f52600b4bda80e"><code class="language-plaintext highlighter-rouge">2c6ba18</code></a></li>
@@ -624,7 +1033,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-26---2026-06-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-25...7.1.2-26">7.1.2-26</a> - 2026-06-21</h2>
-<h3 id="merged-4">Merged</h3>
+<h3 id="merged-7">Merged</h3>
<ul>
<li>check rows*columns overflow in sct ReadSCTImage <a href="https://github.com/ImageMagick/ImageMagick/pull/8812"><code class="language-plaintext highlighter-rouge">#8812</code></a></li>
@@ -640,7 +1049,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>reject cineon files with an invalid bits per pixel <a href="https://github.com/ImageMagick/ImageMagick/pull/8781"><code class="language-plaintext highlighter-rouge">#8781</code></a></li>
</ul>
-<h3 id="commits-5">Commits</h3>
+<h3 id="commits-8">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/8ee9390a8178934a0ac8b709ff115f5e7aa0d7ac"><code class="language-plaintext highlighter-rouge">8ee9390</code></a></li>
@@ -744,7 +1153,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-25---2026-06-04"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-24...7.1.2-25">7.1.2-25</a> - 2026-06-04</h2>
-<h3 id="merged-5">Merged</h3>
+<h3 id="merged-8">Merged</h3>
<ul>
<li>validate argument count for polynomial distortion <a href="https://github.com/ImageMagick/ImageMagick/pull/8780"><code class="language-plaintext highlighter-rouge">#8780</code></a></li>
@@ -758,7 +1167,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>reject dds files with zero columns or rows <a href="https://github.com/ImageMagick/ImageMagick/pull/8762"><code class="language-plaintext highlighter-rouge">#8762</code></a></li>
</ul>
-<h3 id="commits-6">Commits</h3>
+<h3 id="commits-9">Commits</h3>
<ul>
<li>trigger a build <a href="https://github.com/ImageMagick/ImageMagick/commit/d73fb3cfcd82b2083c40829b3e42f911093aaf91"><code class="language-plaintext highlighter-rouge">d73fb3c</code></a></li>
@@ -809,7 +1218,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-24---2026-05-26"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-23...7.1.2-24">7.1.2-24</a> - 2026-05-26</h2>
-<h3 id="merged-6">Merged</h3>
+<h3 id="merged-9">Merged</h3>
<ul>
<li>reject mtv files with zero columns or rows <a href="https://github.com/ImageMagick/ImageMagick/pull/8758"><code class="language-plaintext highlighter-rouge">#8758</code></a></li>
@@ -822,7 +1231,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Add profile_fuzzer for raw EXIF/XMP/IPTC/ICC parsing <a href="https://github.com/ImageMagick/ImageMagick/pull/8736"><code class="language-plaintext highlighter-rouge">#8736</code></a></li>
</ul>
-<h3 id="commits-7">Commits</h3>
+<h3 id="commits-10">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/48756ca9bf31c885905b0768b2bb27bcbc11e286"><code class="language-plaintext highlighter-rouge">48756ca</code></a></li>
@@ -882,14 +1291,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-23---2026-05-17"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-22...7.1.2-23">7.1.2-23</a> - 2026-05-17</h2>
-<h3 id="merged-7">Merged</h3>
+<h3 id="merged-10">Merged</h3>
<ul>
<li>build(deps): bump github/codeql-action from 4.35.3 to 4.35.4 <a href="https://github.com/ImageMagick/ImageMagick/pull/8733"><code class="language-plaintext highlighter-rouge">#8733</code></a></li>
<li>ignore_sequence_editlist only in libheif 1.21 <a href="https://github.com/ImageMagick/ImageMagick/pull/8729"><code class="language-plaintext highlighter-rouge">#8729</code></a></li>
</ul>
-<h3 id="commits-8">Commits</h3>
+<h3 id="commits-11">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b8244a9c44ed6dbc06c3d0e6303ca29450d238b3"><code class="language-plaintext highlighter-rouge">b8244a9</code></a></li>
@@ -938,7 +1347,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-22---2026-05-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-21...7.1.2-22">7.1.2-22</a> - 2026-05-12</h2>
-<h3 id="merged-8">Merged</h3>
+<h3 id="merged-11">Merged</h3>
<ul>
<li>Fix unsound free of uninitialized pointers in GetImageFeatures error path <a href="https://github.com/ImageMagick/ImageMagick/pull/8724"><code class="language-plaintext highlighter-rouge">#8724</code></a></li>
@@ -948,7 +1357,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>build(deps): bump lxml from 6.0.2 to 6.1.0 in /.github/build/python <a href="https://github.com/ImageMagick/ImageMagick/pull/8683"><code class="language-plaintext highlighter-rouge">#8683</code></a></li>
</ul>
-<h3 id="commits-9">Commits</h3>
+<h3 id="commits-12">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/7887eaeb29a18deeb35f0f4fd98fe23881c947ec"><code class="language-plaintext highlighter-rouge">7887eae</code></a></li>
@@ -1021,7 +1430,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-21---2026-04-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-20...7.1.2-21">7.1.2-21</a> - 2026-04-21</h2>
-<h3 id="commits-10">Commits</h3>
+<h3 id="commits-13">Commits</h3>
<ul>
<li>release <a href="https://github.com/ImageMagick/ImageMagick/commit/c86de049cefb8dd739e16f0e2fdc1ef8d2006d59"><code class="language-plaintext highlighter-rouge">c86de04</code></a></li>
@@ -1029,14 +1438,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-20---2026-04-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-19...7.1.2-20">7.1.2-20</a> - 2026-04-21</h2>
-<h3 id="merged-9">Merged</h3>
+<h3 id="merged-12">Merged</h3>
<ul>
<li>Fix JXL orientation when writing. <a href="https://github.com/ImageMagick/ImageMagick/pull/8673"><code class="language-plaintext highlighter-rouge">#8673</code></a></li>
<li>build(deps): bump actions/upload-artifact from 7.0.0 to 7.0.1 <a href="https://github.com/ImageMagick/ImageMagick/pull/8677"><code class="language-plaintext highlighter-rouge">#8677</code></a></li>
</ul>
-<h3 id="commits-11">Commits</h3>
+<h3 id="commits-14">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/f601163bdd3c52187c6b8430490a86c200f7c6de"><code class="language-plaintext highlighter-rouge">f601163</code></a></li>
@@ -1083,7 +1492,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-19---2026-04-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-18...7.1.2-19">7.1.2-19</a> - 2026-04-12</h2>
-<h3 id="merged-10">Merged</h3>
+<h3 id="merged-13">Merged</h3>
<ul>
<li>Support for 4-bit (indexed 16-color) PCX <a href="https://github.com/ImageMagick/ImageMagick/pull/8655"><code class="language-plaintext highlighter-rouge">#8655</code></a></li>
@@ -1102,7 +1511,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Skip frame duplication for APNG in video coder <a href="https://github.com/ImageMagick/ImageMagick/pull/8636"><code class="language-plaintext highlighter-rouge">#8636</code></a></li>
</ul>
-<h3 id="commits-12">Commits</h3>
+<h3 id="commits-15">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/78f1c2fa741a96d20eb14645022b4bd8bb8daeab"><code class="language-plaintext highlighter-rouge">78f1c2f</code></a></li>
@@ -1170,7 +1579,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-18---2026-03-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-17...7.1.2-18">7.1.2-18</a> - 2026-03-22</h2>
-<h3 id="merged-11">Merged</h3>
+<h3 id="merged-14">Merged</h3>
<ul>
<li>Fix animated JXL frame delay handling <a href="https://github.com/ImageMagick/ImageMagick/pull/8622"><code class="language-plaintext highlighter-rouge">#8622</code></a></li>
@@ -1180,7 +1589,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Bump actions/download-artifact from 8.0.0 to 8.0.1 <a href="https://github.com/ImageMagick/ImageMagick/pull/8629"><code class="language-plaintext highlighter-rouge">#8629</code></a></li>
</ul>
-<h3 id="commits-13">Commits</h3>
+<h3 id="commits-16">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/ba457178852252cf7ef3900dce4041508dd9d905"><code class="language-plaintext highlighter-rouge">ba45717</code></a></li>
@@ -1210,13 +1619,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-17---2026-03-15"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-16...7.1.2-17">7.1.2-17</a> - 2026-03-15</h2>
-<h3 id="merged-12">Merged</h3>
+<h3 id="merged-15">Merged</h3>
<ul>
<li>Bump github/codeql-action from 4.32.2 to 4.32.6 <a href="https://github.com/ImageMagick/ImageMagick/pull/8613"><code class="language-plaintext highlighter-rouge">#8613</code></a></li>
</ul>
-<h3 id="commits-14">Commits</h3>
+<h3 id="commits-17">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/f76661e45fda26581300f3b69438727fab38e62c"><code class="language-plaintext highlighter-rouge">f76661e</code></a></li>
@@ -1255,7 +1664,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-16---2026-03-08"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-15...7.1.2-16">7.1.2-16</a> - 2026-03-08</h2>
-<h3 id="merged-13">Merged</h3>
+<h3 id="merged-16">Merged</h3>
<ul>
<li>Bump actions/download-artifact from 7.0.0 to 8.0.0 <a href="https://github.com/ImageMagick/ImageMagick/pull/8604"><code class="language-plaintext highlighter-rouge">#8604</code></a></li>
@@ -1271,7 +1680,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Typo fix in coders/dng.c <a href="https://github.com/ImageMagick/ImageMagick/pull/8580"><code class="language-plaintext highlighter-rouge">#8580</code></a></li>
</ul>
-<h3 id="commits-15">Commits</h3>
+<h3 id="commits-18">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/6f84eb06e950d70c66cea980db876d0925758b69"><code class="language-plaintext highlighter-rouge">6f84eb0</code></a></li>
@@ -1342,7 +1751,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-15---2026-02-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-14...7.1.2-15">7.1.2-15</a> - 2026-02-22</h2>
-<h3 id="commits-16">Commits</h3>
+<h3 id="commits-19">Commits</h3>
<ul>
<li>Reverted changes that were committed by accident. <a href="https://github.com/ImageMagick/ImageMagick/commit/818ee636323b007617cf5459acc5342f3962e5c8"><code class="language-plaintext highlighter-rouge">818ee63</code></a></li>
@@ -1351,20 +1760,20 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-14---2026-02-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-13...7.1.2-14">7.1.2-14</a> - 2026-02-22</h2>
-<h3 id="merged-14">Merged</h3>
+<h3 id="merged-17">Merged</h3>
<ul>
<li>ICON: allow writing 256x256 icon rasters <a href="https://github.com/ImageMagick/ImageMagick/pull/8569"><code class="language-plaintext highlighter-rouge">#8569</code></a></li>
<li>replace MAGICK_FILTER_MODULE_PATH for MAGICK_CODER_FILTER_PATH <a href="https://github.com/ImageMagick/ImageMagick/pull/8561"><code class="language-plaintext highlighter-rouge">#8561</code></a></li>
</ul>
-<h3 id="fixed-2">Fixed</h3>
+<h3 id="fixed-3">Fixed</h3>
<ul>
<li>ICON: allow writing 256x256 icon rasters (#8569) <a href="https://github.com/ImageMagick/ImageMagick/issues/1577"><code class="language-plaintext highlighter-rouge">#1577</code></a></li>
</ul>
-<h3 id="commits-17">Commits</h3>
+<h3 id="commits-20">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/915109f87e1fb9e2dd12bf96bcb1fcec2fdba072"><code class="language-plaintext highlighter-rouge">915109f</code></a></li>
@@ -1531,7 +1940,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-13---2026-01-19"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-12...7.1.2-13">7.1.2-13</a> - 2026-01-19</h2>
-<h3 id="commits-18">Commits</h3>
+<h3 id="commits-21">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/0db229e520dc4827f8f70304c1c89f40279a9cb3"><code class="language-plaintext highlighter-rouge">0db229e</code></a></li>
@@ -1570,7 +1979,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-12---2025-12-28"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-11...7.1.2-12">7.1.2-12</a> - 2025-12-28</h2>
-<h3 id="merged-15">Merged</h3>
+<h3 id="merged-18">Merged</h3>
<ul>
<li>Bump actions/download-artifact from 6 to 7 <a href="https://github.com/ImageMagick/ImageMagick/pull/8497"><code class="language-plaintext highlighter-rouge">#8497</code></a></li>
@@ -1580,7 +1989,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Fix autoconf syntax errors (configure.ac) <a href="https://github.com/ImageMagick/ImageMagick/pull/8488"><code class="language-plaintext highlighter-rouge">#8488</code></a></li>
</ul>
-<h3 id="commits-19">Commits</h3>
+<h3 id="commits-22">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/22ed20ab80777e3aa754b5a0b7d44a0da5fb94fb"><code class="language-plaintext highlighter-rouge">22ed20a</code></a></li>
@@ -1602,7 +2011,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-11---2025-12-14"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-10...7.1.2-11">7.1.2-11</a> - 2025-12-14</h2>
-<h3 id="commits-20">Commits</h3>
+<h3 id="commits-23">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/e97f8c1cb069071022467354997098b9eb155d1e"><code class="language-plaintext highlighter-rouge">e97f8c1</code></a></li>
@@ -1615,7 +2024,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-10---2025-12-07"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-9...7.1.2-10">7.1.2-10</a> - 2025-12-07</h2>
-<h3 id="commits-21">Commits</h3>
+<h3 id="commits-24">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/cfbeef49f293108f469f82d6f50e17ab84be1083"><code class="language-plaintext highlighter-rouge">cfbeef4</code></a></li>
@@ -1635,7 +2044,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-9---2025-11-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-8...7.1.2-9">7.1.2-9</a> - 2025-11-30</h2>
-<h3 id="merged-16">Merged</h3>
+<h3 id="merged-19">Merged</h3>
<ul>
<li>JPEG: Support 2-to-16-bit lossless JPEG images with libjpeg-turbo 3.1+; Support additional IDCT scaling factors with libjpeg-turbo and libjpeg v7+ <a href="https://github.com/ImageMagick/ImageMagick/pull/8445"><code class="language-plaintext highlighter-rouge">#8445</code></a></li>
@@ -1643,7 +2052,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Update Doc <a href="https://github.com/ImageMagick/ImageMagick/pull/8442"><code class="language-plaintext highlighter-rouge">#8442</code></a></li>
</ul>
-<h3 id="commits-22">Commits</h3>
+<h3 id="commits-25">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/a5ad8fb4ca03acd1db7ec7e96bbe482e3e6265ba"><code class="language-plaintext highlighter-rouge">a5ad8fb</code></a></li>
@@ -1686,7 +2095,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-8---2025-10-26"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-7...7.1.2-8">7.1.2-8</a> - 2025-10-26</h2>
-<h3 id="commits-23">Commits</h3>
+<h3 id="commits-26">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/d56b6afca237907a351681bf8cd7929e24ec91aa"><code class="language-plaintext highlighter-rouge">d56b6af</code></a></li>
@@ -1700,13 +2109,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-7---2025-10-14"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-6...7.1.2-7">7.1.2-7</a> - 2025-10-14</h2>
-<h3 id="merged-17">Merged</h3>
+<h3 id="merged-20">Merged</h3>
<ul>
<li>Bump github/codeql-action from 3 to 4 <a href="https://github.com/ImageMagick/ImageMagick/pull/8397"><code class="language-plaintext highlighter-rouge">#8397</code></a></li>
</ul>
-<h3 id="commits-24">Commits</h3>
+<h3 id="commits-27">Commits</h3>
<ul>
<li>release <a href="https://github.com/ImageMagick/ImageMagick/commit/47ef758200e7d898cdce6fb25a0bdc1ed7b0cc65"><code class="language-plaintext highlighter-rouge">47ef758</code></a></li>
@@ -1714,7 +2123,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-6---2025-10-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-5...7.1.2-6">7.1.2-6</a> - 2025-10-12</h2>
-<h3 id="commits-25">Commits</h3>
+<h3 id="commits-28">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/ea5af7e25b4cab9ddd38f6e8e9075feaf7d09f26"><code class="language-plaintext highlighter-rouge">ea5af7e</code></a></li>
@@ -1732,13 +2141,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-5---2025-10-06"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-3...7.1.2-5">7.1.2-5</a> - 2025-10-06</h2>
-<h3 id="merged-18">Merged</h3>
+<h3 id="merged-21">Merged</h3>
<ul>
<li>Bump actions/setup-python from 5 to 6 <a href="https://github.com/ImageMagick/ImageMagick/pull/8349"><code class="language-plaintext highlighter-rouge">#8349</code></a></li>
</ul>
-<h3 id="commits-26">Commits</h3>
+<h3 id="commits-29">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/6ed830980bceeed5766c699d70a00c89b14f75fb"><code class="language-plaintext highlighter-rouge">6ed8309</code></a></li>
@@ -1796,7 +2205,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-3---2025-08-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-2...7.1.2-3">7.1.2-3</a> - 2025-08-30</h2>
-<h3 id="commits-27">Commits</h3>
+<h3 id="commits-30">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/610fc366341ea580a2ac26ed11621a2f2e864c2e"><code class="language-plaintext highlighter-rouge">610fc36</code></a></li>
@@ -1811,7 +2220,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-2---2025-08-24"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-1...7.1.2-2">7.1.2-2</a> - 2025-08-24</h2>
-<h3 id="merged-19">Merged</h3>
+<h3 id="merged-22">Merged</h3>
<ul>
<li>cache.c: Fix unused function warning <a href="https://github.com/ImageMagick/ImageMagick/pull/8309"><code class="language-plaintext highlighter-rouge">#8309</code></a></li>
@@ -1819,7 +2228,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Fix infinite loop when decoding JXL with <code class="language-plaintext highlighter-rouge">-limit height/width</code> <a href="https://github.com/ImageMagick/ImageMagick/pull/8303"><code class="language-plaintext highlighter-rouge">#8303</code></a></li>
</ul>
-<h3 id="commits-28">Commits</h3>
+<h3 id="commits-31">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/0ba1b587be17543b664f7ad538e9e51e0da59d17"><code class="language-plaintext highlighter-rouge">0ba1b58</code></a></li>
@@ -1847,7 +2256,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-1---2025-08-11"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.2-0...7.1.2-1">7.1.2-1</a> - 2025-08-11</h2>
-<h3 id="merged-20">Merged</h3>
+<h3 id="merged-23">Merged</h3>
<ul>
<li>Bump actions/download-artifact from 4 to 5 <a href="https://github.com/ImageMagick/ImageMagick/pull/8296"><code class="language-plaintext highlighter-rouge">#8296</code></a></li>
@@ -1857,7 +2266,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Add support for Simple File Format Family (SF3) images <a href="https://github.com/ImageMagick/ImageMagick/pull/8243"><code class="language-plaintext highlighter-rouge">#8243</code></a></li>
</ul>
-<h3 id="commits-29">Commits</h3>
+<h3 id="commits-32">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/69f5e593c93345e2f0a54096270ce87aa100e861"><code class="language-plaintext highlighter-rouge">69f5e59</code></a></li>
@@ -1933,7 +2342,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="712-0---2025-07-13"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-47...7.1.2-0">7.1.2-0</a> - 2025-07-13</h2>
-<h3 id="merged-21">Merged</h3>
+<h3 id="merged-24">Merged</h3>
<ul>
<li>Fix NULL pointer dereference in XWarning <a href="https://github.com/ImageMagick/ImageMagick/pull/8230"><code class="language-plaintext highlighter-rouge">#8230</code></a></li>
@@ -1945,13 +2354,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>magick-config.h: Remove redundant block <a href="https://github.com/ImageMagick/ImageMagick/pull/8076"><code class="language-plaintext highlighter-rouge">#8076</code></a></li>
</ul>
-<h3 id="fixed-3">Fixed</h3>
+<h3 id="fixed-4">Fixed</h3>
<ul>
<li>JXL: Preserve ICC profile for lossless encoding (#8074) <a href="https://github.com/ImageMagick/ImageMagick/issues/8022"><code class="language-plaintext highlighter-rouge">#8022</code></a></li>
</ul>
-<h3 id="commits-30">Commits</h3>
+<h3 id="commits-33">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/de54c14882fe37762f5ee21d01b6d9cd7b8abd56"><code class="language-plaintext highlighter-rouge">de54c14</code></a></li>
@@ -2422,7 +2831,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-47---2025-03-29"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-46...7.1.1-47">7.1.1-47</a> - 2025-03-29</h2>
-<h3 id="commits-31">Commits</h3>
+<h3 id="commits-34">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/674861ae68bf9aacdf279a6842bb0cb65c0f3322"><code class="language-plaintext highlighter-rouge">674861a</code></a></li>
@@ -2445,13 +2854,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-46---2025-03-18"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-45...7.1.1-46">7.1.1-46</a> - 2025-03-18</h2>
-<h3 id="merged-22">Merged</h3>
+<h3 id="merged-25">Merged</h3>
<ul>
<li>try pngalpha if png16malpha not available <a href="https://github.com/ImageMagick/ImageMagick/pull/8034"><code class="language-plaintext highlighter-rouge">#8034</code></a></li>
</ul>
-<h3 id="commits-32">Commits</h3>
+<h3 id="commits-35">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/fe966f585fb5d68b61357a4a300ad486ff39c257"><code class="language-plaintext highlighter-rouge">fe966f5</code></a></li>
@@ -2482,19 +2891,19 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-45---2025-03-09"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-44...7.1.1-45">7.1.1-45</a> - 2025-03-09</h2>
-<h3 id="merged-23">Merged</h3>
+<h3 id="merged-26">Merged</h3>
<ul>
<li>Fix statistic.c GetImageRange initializer <a href="https://github.com/ImageMagick/ImageMagick/pull/8010"><code class="language-plaintext highlighter-rouge">#8010</code></a></li>
</ul>
-<h3 id="fixed-4">Fixed</h3>
+<h3 id="fixed-5">Fixed</h3>
<ul>
<li>Fix statistic.c GetImageRange initializer (#8010) <a href="https://github.com/rmagick/rmagick/issues/1679"><code class="language-plaintext highlighter-rouge">#1679</code></a></li>
</ul>
-<h3 id="commits-33">Commits</h3>
+<h3 id="commits-36">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/6c98cd071298daf5af4c5fac0ed687ca278b7533"><code class="language-plaintext highlighter-rouge">6c98cd0</code></a></li>
@@ -2534,7 +2943,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-44---2025-02-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-43...7.1.1-44">7.1.1-44</a> - 2025-02-22</h2>
-<h3 id="merged-24">Merged</h3>
+<h3 id="merged-27">Merged</h3>
<ul>
<li>fix type casting in statistic.c <a href="https://github.com/ImageMagick/ImageMagick/pull/7982"><code class="language-plaintext highlighter-rouge">#7982</code></a></li>
@@ -2543,7 +2952,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Bump azure/trusted-signing-action from 0.5.0 to 0.5.1 <a href="https://github.com/ImageMagick/ImageMagick/pull/7895"><code class="language-plaintext highlighter-rouge">#7895</code></a></li>
</ul>
-<h3 id="commits-34">Commits</h3>
+<h3 id="commits-37">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/62be4c187a751e0e9a1b469989e6ed74de140d7e"><code class="language-plaintext highlighter-rouge">62be4c1</code></a></li>
@@ -2684,7 +3093,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-43---2024-12-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-41...7.1.1-43">7.1.1-43</a> - 2024-12-22</h2>
-<h3 id="merged-25">Merged</h3>
+<h3 id="merged-28">Merged</h3>
<ul>
<li>Fix reading/writing PICTs with PixMap rowBytes=[201..250] <a href="https://github.com/ImageMagick/ImageMagick/pull/7840"><code class="language-plaintext highlighter-rouge">#7840</code></a></li>
@@ -2692,7 +3101,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>update plugin with latest library changes <a href="https://github.com/ImageMagick/ImageMagick/pull/7780"><code class="language-plaintext highlighter-rouge">#7780</code></a></li>
</ul>
-<h3 id="commits-35">Commits</h3>
+<h3 id="commits-38">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b4507e8d0fdeb98a7d97515e58eff4b046c5ac62"><code class="language-plaintext highlighter-rouge">b4507e8</code></a></li>
@@ -2742,14 +3151,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-41---2024-11-16"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-40...7.1.1-41">7.1.1-41</a> - 2024-11-16</h2>
-<h3 id="merged-26">Merged</h3>
+<h3 id="merged-29">Merged</h3>
<ul>
<li>revert map changes breaking ABI <a href="https://github.com/ImageMagick/ImageMagick/pull/7768"><code class="language-plaintext highlighter-rouge">#7768</code></a></li>
<li>Fix compiler identification with Clang on Darwin <a href="https://github.com/ImageMagick/ImageMagick/pull/7773"><code class="language-plaintext highlighter-rouge">#7773</code></a></li>
</ul>
-<h3 id="commits-36">Commits</h3>
+<h3 id="commits-39">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b8c3266045142303ab4196d4f643a2141cbdb6bc"><code class="language-plaintext highlighter-rouge">b8c3266</code></a></li>
@@ -2782,7 +3191,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-40---2024-11-09"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-39...7.1.1-40">7.1.1-40</a> - 2024-11-09</h2>
-<h3 id="merged-27">Merged</h3>
+<h3 id="merged-30">Merged</h3>
<ul>
<li>.cut (Dr Halo) reading when run count in header <a href="https://github.com/ImageMagick/ImageMagick/pull/7734"><code class="language-plaintext highlighter-rouge">#7734</code></a></li>
@@ -2790,7 +3199,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Implement Magic Kernel Sharp 2013 and 2021 <a href="https://github.com/ImageMagick/ImageMagick/pull/7701"><code class="language-plaintext highlighter-rouge">#7701</code></a></li>
</ul>
-<h3 id="commits-37">Commits</h3>
+<h3 id="commits-40">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/ddbed3d88a2575ef8ca3d032ce6ce026d57d1f90"><code class="language-plaintext highlighter-rouge">ddbed3d</code></a></li>
@@ -2842,7 +3251,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-39---2024-10-05"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-38...7.1.1-39">7.1.1-39</a> - 2024-10-05</h2>
-<h3 id="merged-28">Merged</h3>
+<h3 id="merged-31">Merged</h3>
<ul>
<li>uhdr: fix language choice in autoconf <a href="https://github.com/ImageMagick/ImageMagick/pull/7663"><code class="language-plaintext highlighter-rouge">#7663</code></a></li>
@@ -2850,7 +3259,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Add missing Threshold command to command array of Region of Interest mode <a href="https://github.com/ImageMagick/ImageMagick/pull/7606"><code class="language-plaintext highlighter-rouge">#7606</code></a></li>
</ul>
-<h3 id="commits-38">Commits</h3>
+<h3 id="commits-41">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/1cb5d3e74caaf00b68c4dc3b718723050696507e"><code class="language-plaintext highlighter-rouge">1cb5d3e</code></a></li>
@@ -2884,7 +3293,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-38---2024-09-01"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-37...7.1.1-38">7.1.1-38</a> - 2024-09-01</h2>
-<h3 id="commits-39">Commits</h3>
+<h3 id="commits-42">Commits</h3>
<ul>
<li>properly set image byte order <a href="https://github.com/ImageMagick/ImageMagick/commit/40f659984d8c54d892d7ad605340ca8ccb22963c"><code class="language-plaintext highlighter-rouge">40f6599</code></a></li>
@@ -2910,14 +3319,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-37---2024-08-24"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-36...7.1.1-37">7.1.1-37</a> - 2024-08-24</h2>
-<h3 id="merged-29">Merged</h3>
+<h3 id="merged-32">Merged</h3>
<ul>
<li>Bump azure/trusted-signing-action from 0.3.20 to 0.4.0 <a href="https://github.com/ImageMagick/ImageMagick/pull/7518"><code class="language-plaintext highlighter-rouge">#7518</code></a></li>
<li>Silence warning and fix HEIC_COMPUTE_NUMERIC_VERSION definition when heic delegate is disabled. <a href="https://github.com/ImageMagick/ImageMagick/pull/7516"><code class="language-plaintext highlighter-rouge">#7516</code></a></li>
</ul>
-<h3 id="commits-40">Commits</h3>
+<h3 id="commits-43">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b1a6038e2eae42e2967aeafd21fd8acc9ac98517"><code class="language-plaintext highlighter-rouge">b1a6038</code></a></li>
@@ -2949,7 +3358,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-36---2024-07-27"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-35...7.1.1-36">7.1.1-36</a> - 2024-07-27</h2>
-<h3 id="merged-30">Merged</h3>
+<h3 id="merged-33">Merged</h3>
<ul>
<li>Silence warning when freetype delegate is disabled. <a href="https://github.com/ImageMagick/ImageMagick/pull/7515"><code class="language-plaintext highlighter-rouge">#7515</code></a></li>
@@ -2957,7 +3366,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>uhdr.c: default initialize range field for hdr/sdr intent inputs to enc <a href="https://github.com/ImageMagick/ImageMagick/pull/7482"><code class="language-plaintext highlighter-rouge">#7482</code></a></li>
</ul>
-<h3 id="commits-41">Commits</h3>
+<h3 id="commits-44">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/8c7c516574691aec1500ffac0fdfbac87e292aea"><code class="language-plaintext highlighter-rouge">8c7c516</code></a></li>
@@ -2993,7 +3402,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-35---2024-07-14"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-34...7.1.1-35">7.1.1-35</a> - 2024-07-14</h2>
-<h3 id="commits-42">Commits</h3>
+<h3 id="commits-45">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b6647e5ffc664a65b4dca826ed3f5cc49677933b"><code class="language-plaintext highlighter-rouge">b6647e5</code></a></li>
@@ -3019,7 +3428,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-34---2024-06-23"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-33...7.1.1-34">7.1.1-34</a> - 2024-06-23</h2>
-<h3 id="merged-31">Merged</h3>
+<h3 id="merged-34">Merged</h3>
<ul>
<li>Updated FontConfig query to include font index, fixing (#7374) <a href="https://github.com/ImageMagick/ImageMagick/pull/7409"><code class="language-plaintext highlighter-rouge">#7409</code></a></li>
@@ -3028,7 +3437,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Bump azure/trusted-signing-action from 0.3.18 to 0.3.19 <a href="https://github.com/ImageMagick/ImageMagick/pull/7348"><code class="language-plaintext highlighter-rouge">#7348</code></a></li>
</ul>
-<h3 id="commits-43">Commits</h3>
+<h3 id="commits-46">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/0ae65ef83b6452495a05f9452bcf7f0ad7822a51"><code class="language-plaintext highlighter-rouge">0ae65ef</code></a></li>
@@ -3069,7 +3478,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-33---2024-05-25"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-32...7.1.1-33">7.1.1-33</a> - 2024-05-25</h2>
-<h3 id="merged-32">Merged</h3>
+<h3 id="merged-35">Merged</h3>
<ul>
<li>Bump caphyon/advinst-github-action from 1.1 to 2.0 <a href="https://github.com/ImageMagick/ImageMagick/pull/7326"><code class="language-plaintext highlighter-rouge">#7326</code></a></li>
@@ -3077,13 +3486,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Fix typo <a href="https://github.com/ImageMagick/ImageMagick/pull/7294"><code class="language-plaintext highlighter-rouge">#7294</code></a></li>
</ul>
-<h3 id="fixed-5">Fixed</h3>
+<h3 id="fixed-6">Fixed</h3>
<ul>
<li>Combine the logic of stroke-opacity and fill-opacity in opacity to resolve #7301. <a href="https://github.com/ImageMagick/ImageMagick/issues/7301"><code class="language-plaintext highlighter-rouge">#7301</code></a></li>
</ul>
-<h3 id="commits-44">Commits</h3>
+<h3 id="commits-47">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/2b42fc1ef20606f8208463b5d97ded1ed2e9cc36"><code class="language-plaintext highlighter-rouge">2b42fc1</code></a></li>
@@ -3142,14 +3551,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-32---2024-05-05"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-31...7.1.1-32">7.1.1-32</a> - 2024-05-05</h2>
-<h3 id="merged-33">Merged</h3>
+<h3 id="merged-36">Merged</h3>
<ul>
<li>uhdr.c: add support for rgb inputs <a href="https://github.com/ImageMagick/ImageMagick/pull/7273"><code class="language-plaintext highlighter-rouge">#7273</code></a></li>
<li>Fix GIF ICC profile reading. (https://github.com/ImageMagick/ImageMagick/issues/7281) <a href="https://github.com/ImageMagick/ImageMagick/pull/7282"><code class="language-plaintext highlighter-rouge">#7282</code></a></li>
</ul>
-<h3 id="commits-45">Commits</h3>
+<h3 id="commits-48">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b71d98e188896982c47ea294d0a52a7fbb2c5873"><code class="language-plaintext highlighter-rouge">b71d98e</code></a></li>
@@ -3213,7 +3622,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-31---2024-04-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-30...7.1.1-31">7.1.1-31</a> - 2024-04-21</h2>
-<h3 id="merged-34">Merged</h3>
+<h3 id="merged-37">Merged</h3>
<ul>
<li>Convert big PDF documents is slow <a href="https://github.com/ImageMagick/ImageMagick/pull/7263"><code class="language-plaintext highlighter-rouge">#7263</code></a></li>
@@ -3224,7 +3633,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Bump caphyon/advinst-github-action from 1.0 to 1.1 <a href="https://github.com/ImageMagick/ImageMagick/pull/7227"><code class="language-plaintext highlighter-rouge">#7227</code></a></li>
</ul>
-<h3 id="commits-46">Commits</h3>
+<h3 id="commits-49">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/72f0e8cad9277855e0cafdc7c3db7158952bb6fb"><code class="language-plaintext highlighter-rouge">72f0e8c</code></a></li>
@@ -3287,7 +3696,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-30---2024-04-07"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-29...7.1.1-30">7.1.1-30</a> - 2024-04-07</h2>
-<h3 id="merged-35">Merged</h3>
+<h3 id="merged-38">Merged</h3>
<ul>
<li>Updates to uhdr.c <a href="https://github.com/ImageMagick/ImageMagick/pull/7217"><code class="language-plaintext highlighter-rouge">#7217</code></a></li>
@@ -3298,7 +3707,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Bump softprops/action-gh-release from 1 to 2 <a href="https://github.com/ImageMagick/ImageMagick/pull/7160"><code class="language-plaintext highlighter-rouge">#7160</code></a></li>
</ul>
-<h3 id="commits-47">Commits</h3>
+<h3 id="commits-50">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/960fe0e30ffc7c2dea56a6f58733f630ca02530a"><code class="language-plaintext highlighter-rouge">960fe0e</code></a></li>
@@ -3394,13 +3803,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-29---2024-02-25"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-28...7.1.1-29">7.1.1-29</a> - 2024-02-25</h2>
-<h3 id="merged-36">Merged</h3>
+<h3 id="merged-39">Merged</h3>
<ul>
<li>Enable new libheif chroma subsampling options. <a href="https://github.com/ImageMagick/ImageMagick/pull/7095"><code class="language-plaintext highlighter-rouge">#7095</code></a></li>
</ul>
-<h3 id="commits-48">Commits</h3>
+<h3 id="commits-51">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/35bf3bcfc69a0ce6b1561f7d7c17ceac932ce522"><code class="language-plaintext highlighter-rouge">35bf3bc</code></a></li>
@@ -3430,13 +3839,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-28---2024-02-11"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-27...7.1.1-28">7.1.1-28</a> - 2024-02-11</h2>
-<h3 id="merged-37">Merged</h3>
+<h3 id="merged-40">Merged</h3>
<ul>
<li>fix misleading comment in dds.c <a href="https://github.com/ImageMagick/ImageMagick/pull/7075"><code class="language-plaintext highlighter-rouge">#7075</code></a></li>
</ul>
-<h3 id="commits-49">Commits</h3>
+<h3 id="commits-52">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/868642e2b0e69a974e4ad6022c1d2050660c1aa5"><code class="language-plaintext highlighter-rouge">868642e</code></a></li>
@@ -3478,13 +3887,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-27---2024-01-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-26...7.1.1-27">7.1.1-27</a> - 2024-01-21</h2>
-<h3 id="merged-38">Merged</h3>
+<h3 id="merged-41">Merged</h3>
<ul>
<li>fix PKG_CONFIG_LIBDIR <a href="https://github.com/ImageMagick/ImageMagick/pull/7013"><code class="language-plaintext highlighter-rouge">#7013</code></a></li>
</ul>
-<h3 id="commits-50">Commits</h3>
+<h3 id="commits-53">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/3042ca2cbe31db8f9b4ac26949aa9dedc7984e3b"><code class="language-plaintext highlighter-rouge">3042ca2</code></a></li>
@@ -3507,19 +3916,19 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-26---2024-01-07"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-25...7.1.1-26">7.1.1-26</a> - 2024-01-07</h2>
-<h3 id="merged-39">Merged</h3>
+<h3 id="merged-42">Merged</h3>
<ul>
<li>Make Magick++-config work from non-standard places <a href="https://github.com/ImageMagick/ImageMagick/pull/7008"><code class="language-plaintext highlighter-rouge">#7008</code></a></li>
</ul>
-<h3 id="fixed-6">Fixed</h3>
+<h3 id="fixed-7">Fixed</h3>
<ul>
<li>Make Magick++-config work from non-standard places (#7008) <a href="https://github.com/ImageMagick/ImageMagick/issues/7007"><code class="language-plaintext highlighter-rouge">#7007</code></a></li>
</ul>
-<h3 id="commits-51">Commits</h3>
+<h3 id="commits-54">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/15b1a5d99d742c4a8254ccbe6b2e6d42b73be675"><code class="language-plaintext highlighter-rouge">15b1a5d</code></a></li>
@@ -3555,14 +3964,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-25---2023-12-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-24...7.1.1-25">7.1.1-25</a> - 2023-12-30</h2>
-<h3 id="merged-40">Merged</h3>
+<h3 id="merged-43">Merged</h3>
<ul>
<li>When writing BMP to v3 or lower, ignore the ICC profile. <a href="https://github.com/ImageMagick/ImageMagick/pull/6979"><code class="language-plaintext highlighter-rouge">#6979</code></a></li>
<li>configure.ac: fixup LFS check for autoconf-2.72 <a href="https://github.com/ImageMagick/ImageMagick/pull/6978"><code class="language-plaintext highlighter-rouge">#6978</code></a></li>
</ul>
-<h3 id="commits-52">Commits</h3>
+<h3 id="commits-55">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/3e8b0fa1cf084ac5073d5249bd7c702b1b7ae5f8"><code class="language-plaintext highlighter-rouge">3e8b0fa</code></a></li>
@@ -3595,7 +4004,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-24---2023-12-25"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-23...7.1.1-24">7.1.1-24</a> - 2023-12-25</h2>
-<h3 id="merged-41">Merged</h3>
+<h3 id="merged-44">Merged</h3>
<ul>
<li>configure: drop backported ac_func_fseeko.m4 for autoconf-2.72 compat… <a href="https://github.com/ImageMagick/ImageMagick/pull/6970"><code class="language-plaintext highlighter-rouge">#6970</code></a></li>
@@ -3603,7 +4012,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Add Canon Raw v2 (CR2) as mime type <a href="https://github.com/ImageMagick/ImageMagick/pull/6968"><code class="language-plaintext highlighter-rouge">#6968</code></a></li>
</ul>
-<h3 id="commits-53">Commits</h3>
+<h3 id="commits-56">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/9e5eb3a099cab17e895a55a53df2fb01610e299a"><code class="language-plaintext highlighter-rouge">9e5eb3a</code></a></li>
@@ -3660,14 +4069,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-23---2023-12-10"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-22...7.1.1-23">7.1.1-23</a> - 2023-12-10</h2>
-<h3 id="merged-42">Merged</h3>
+<h3 id="merged-45">Merged</h3>
<ul>
<li>Fix zstd not being listed under GetMagickDelegates() <a href="https://github.com/ImageMagick/ImageMagick/pull/6934"><code class="language-plaintext highlighter-rouge">#6934</code></a></li>
<li>configure.ac: Fix bashism <a href="https://github.com/ImageMagick/ImageMagick/pull/6931"><code class="language-plaintext highlighter-rouge">#6931</code></a></li>
</ul>
-<h3 id="commits-54">Commits</h3>
+<h3 id="commits-57">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/e1ff62030d783d4efc24919effaa8b7bf5a84dc3"><code class="language-plaintext highlighter-rouge">e1ff620</code></a></li>
@@ -3696,7 +4105,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-22---2023-12-03"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-21...7.1.1-22">7.1.1-22</a> - 2023-12-03</h2>
-<h3 id="commits-55">Commits</h3>
+<h3 id="commits-58">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/a042cc470d3e4d3918a6cea95aa49f3c36872be1"><code class="language-plaintext highlighter-rouge">a042cc4</code></a></li>
@@ -3815,7 +4224,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-21---2023-10-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-20...7.1.1-21">7.1.1-21</a> - 2023-10-21</h2>
-<h3 id="merged-43">Merged</h3>
+<h3 id="merged-46">Merged</h3>
<ul>
<li>honor pkg-config when searching for bzip2 <a href="https://github.com/ImageMagick/ImageMagick/pull/6785"><code class="language-plaintext highlighter-rouge">#6785</code></a></li>
@@ -3824,7 +4233,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Define quantum depth for PerlMagick on windows <a href="https://github.com/ImageMagick/ImageMagick/pull/6770"><code class="language-plaintext highlighter-rouge">#6770</code></a></li>
</ul>
-<h3 id="commits-56">Commits</h3>
+<h3 id="commits-59">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/dc87568a6ef9ed3c182d6f69b5f508bb3abdfd9e"><code class="language-plaintext highlighter-rouge">dc87568</code></a></li>
@@ -3873,7 +4282,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-20---2023-10-08"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-19...7.1.1-20">7.1.1-20</a> - 2023-10-08</h2>
-<h3 id="commits-57">Commits</h3>
+<h3 id="commits-60">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/59f8951c62e6ad32fb71d8fa9027c0fe98f33193"><code class="language-plaintext highlighter-rouge">59f8951</code></a></li>
@@ -3900,13 +4309,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-19---2023-09-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-18...7.1.1-19">7.1.1-19</a> - 2023-09-30</h2>
-<h3 id="merged-44">Merged</h3>
+<h3 id="merged-47">Merged</h3>
<ul>
<li>Fix building with OpenCL <a href="https://github.com/ImageMagick/ImageMagick/pull/6743"><code class="language-plaintext highlighter-rouge">#6743</code></a></li>
</ul>
-<h3 id="commits-58">Commits</h3>
+<h3 id="commits-61">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/6f91d59440627c50563a24c0c34372239608e949"><code class="language-plaintext highlighter-rouge">6f91d59</code></a></li>
@@ -3931,7 +4340,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-18---2023-09-23"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-17...7.1.1-18">7.1.1-18</a> - 2023-09-23</h2>
-<h3 id="commits-59">Commits</h3>
+<h3 id="commits-62">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/1d60af938761e2a6e85c3c13f6201571d752da76"><code class="language-plaintext highlighter-rouge">1d60af9</code></a></li>
@@ -3951,7 +4360,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-17---2023-09-19"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-16...7.1.1-17">7.1.1-17</a> - 2023-09-19</h2>
-<h3 id="commits-60">Commits</h3>
+<h3 id="commits-63">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/4b5d2668d6a6d18d1d8f71cb6012b2adb0cff0d4"><code class="language-plaintext highlighter-rouge">4b5d266</code></a></li>
@@ -3967,13 +4376,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-16---2023-09-17"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-15...7.1.1-16">7.1.1-16</a> - 2023-09-17</h2>
-<h3 id="merged-45">Merged</h3>
+<h3 id="merged-48">Merged</h3>
<ul>
<li>Add JPEG-2000 support to AppImage release (Partially solve #4666) <a href="https://github.com/ImageMagick/ImageMagick/pull/6630"><code class="language-plaintext highlighter-rouge">#6630</code></a></li>
</ul>
-<h3 id="commits-61">Commits</h3>
+<h3 id="commits-64">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/922dd8dd3f9c562c2081acaaf9610f9889649b50"><code class="language-plaintext highlighter-rouge">922dd8d</code></a></li>
@@ -4241,7 +4650,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-15---2023-07-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-14...7.1.1-15">7.1.1-15</a> - 2023-07-30</h2>
-<h3 id="commits-62">Commits</h3>
+<h3 id="commits-65">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/edf7a2a8c7f5aa698f07ee93dfe09463bdeb27a5"><code class="language-plaintext highlighter-rouge">edf7a2a</code></a></li>
@@ -4260,7 +4669,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-14---2023-07-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-13...7.1.1-14">7.1.1-14</a> - 2023-07-22</h2>
-<h3 id="commits-63">Commits</h3>
+<h3 id="commits-66">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/e799547419e63780039bae9be9931b2c64612870"><code class="language-plaintext highlighter-rouge">e799547</code></a></li>
@@ -4277,13 +4686,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-13---2023-07-16"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-12...7.1.1-13">7.1.1-13</a> - 2023-07-16</h2>
-<h3 id="merged-46">Merged</h3>
+<h3 id="merged-49">Merged</h3>
<ul>
<li>Add Canon Raw v3 (CR3) as mime type <a href="https://github.com/ImageMagick/ImageMagick/pull/6450"><code class="language-plaintext highlighter-rouge">#6450</code></a></li>
</ul>
-<h3 id="commits-64">Commits</h3>
+<h3 id="commits-67">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/56f4789405ac2d3abe23cb5dad3d9ccd383ab626"><code class="language-plaintext highlighter-rouge">56f4789</code></a></li>
@@ -4326,13 +4735,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-12---2023-06-25"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-11...7.1.1-12">7.1.1-12</a> - 2023-06-25</h2>
-<h3 id="merged-47">Merged</h3>
+<h3 id="merged-50">Merged</h3>
<ul>
<li>Add support for DXGI_FORMAT_R10G10B10A2_UNORM <a href="https://github.com/ImageMagick/ImageMagick/pull/6423"><code class="language-plaintext highlighter-rouge">#6423</code></a></li>
</ul>
-<h3 id="commits-65">Commits</h3>
+<h3 id="commits-68">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/3c43475bb5dc7eec9af3babc789bf8bf65677e90"><code class="language-plaintext highlighter-rouge">3c43475</code></a></li>
@@ -4371,19 +4780,19 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-11---2023-05-29"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-10...7.1.1-11">7.1.1-11</a> - 2023-05-29</h2>
-<h3 id="merged-48">Merged</h3>
+<h3 id="merged-51">Merged</h3>
<ul>
<li>Optimize image and vector files to minimize filesizes and page loads <a href="https://github.com/ImageMagick/ImageMagick/pull/6352"><code class="language-plaintext highlighter-rouge">#6352</code></a></li>
</ul>
-<h3 id="fixed-7">Fixed</h3>
+<h3 id="fixed-8">Fixed</h3>
<ul>
<li>Swap order to fix #6347. <a href="https://github.com/ImageMagick/ImageMagick/issues/6347"><code class="language-plaintext highlighter-rouge">#6347</code></a></li>
</ul>
-<h3 id="commits-66">Commits</h3>
+<h3 id="commits-69">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/375e71b67686549c4f5866d0b50db9ab20b324f8"><code class="language-plaintext highlighter-rouge">375e71b</code></a></li>
@@ -4416,7 +4825,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-10---2023-05-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-9...7.1.1-10">7.1.1-10</a> - 2023-05-21</h2>
-<h3 id="commits-67">Commits</h3>
+<h3 id="commits-70">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/e31343f0153b3871985aa1deaab446d8d58197f2"><code class="language-plaintext highlighter-rouge">e31343f</code></a></li>
@@ -4443,13 +4852,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-9---2023-05-14"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-8...7.1.1-9">7.1.1-9</a> - 2023-05-14</h2>
-<h3 id="merged-49">Merged</h3>
+<h3 id="merged-52">Merged</h3>
<ul>
<li>Add support for Oklab <a href="https://github.com/ImageMagick/ImageMagick/pull/6309"><code class="language-plaintext highlighter-rouge">#6309</code></a></li>
</ul>
-<h3 id="commits-68">Commits</h3>
+<h3 id="commits-71">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/0bb745472aaa2f3f658cd4e327d59acc4d1bd990"><code class="language-plaintext highlighter-rouge">0bb7454</code></a></li>
@@ -4484,13 +4893,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-8---2023-04-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-7...7.1.1-8">7.1.1-8</a> - 2023-04-22</h2>
-<h3 id="fixed-8">Fixed</h3>
+<h3 id="fixed-9">Fixed</h3>
<ul>
<li>Added checks to make sure all bytes were read to resolve #6267. <a href="https://github.com/ImageMagick/ImageMagick/issues/6267"><code class="language-plaintext highlighter-rouge">#6267</code></a></li>
</ul>
-<h3 id="commits-69">Commits</h3>
+<h3 id="commits-72">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/35ec38f38915f5635ea2f8dcaa20c2960e711db5"><code class="language-plaintext highlighter-rouge">35ec38f</code></a></li>
@@ -4508,13 +4917,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-7---2023-04-16"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-6...7.1.1-7">7.1.1-7</a> - 2023-04-16</h2>
-<h3 id="merged-50">Merged</h3>
+<h3 id="merged-53">Merged</h3>
<ul>
<li>PixelChannel: Add invalid channel field <a href="https://github.com/ImageMagick/ImageMagick/pull/6230"><code class="language-plaintext highlighter-rouge">#6230</code></a></li>
</ul>
-<h3 id="commits-70">Commits</h3>
+<h3 id="commits-73">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/3bd5ce112de3b075ab4a779d0b6db1047ef81be2"><code class="language-plaintext highlighter-rouge">3bd5ce1</code></a></li>
@@ -4617,7 +5026,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-6---2023-04-02"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-5...7.1.1-6">7.1.1-6</a> - 2023-04-02</h2>
-<h3 id="commits-71">Commits</h3>
+<h3 id="commits-74">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/a680ab229d0115c62096828851242a6a4f30cea3"><code class="language-plaintext highlighter-rouge">a680ab2</code></a></li>
@@ -4651,7 +5060,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-5---2023-03-26"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-4...7.1.1-5">7.1.1-5</a> - 2023-03-26</h2>
-<h3 id="commits-72">Commits</h3>
+<h3 id="commits-75">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/9b9fc9dfeee411817250b605daad082f82e08a3e"><code class="language-plaintext highlighter-rouge">9b9fc9d</code></a></li>
@@ -4675,7 +5084,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-4---2023-03-18"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-3...7.1.1-4">7.1.1-4</a> - 2023-03-18</h2>
-<h3 id="commits-73">Commits</h3>
+<h3 id="commits-76">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/65712a975f545c43484ab33a90b449a2052b70ec"><code class="language-plaintext highlighter-rouge">65712a9</code></a></li>
@@ -4699,13 +5108,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-3---2023-03-11"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-2...7.1.1-3">7.1.1-3</a> - 2023-03-11</h2>
-<h3 id="merged-51">Merged</h3>
+<h3 id="merged-54">Merged</h3>
<ul>
<li>Add HEIC support to AppImage (Partially solve #4666) <a href="https://github.com/ImageMagick/ImageMagick/pull/6098"><code class="language-plaintext highlighter-rouge">#6098</code></a></li>
</ul>
-<h3 id="commits-74">Commits</h3>
+<h3 id="commits-77">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/0e525cc97ad7b0a31d817ab723905b035854e697"><code class="language-plaintext highlighter-rouge">0e525cc</code></a></li>
@@ -4718,7 +5127,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-2---2023-03-09"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-1...7.1.1-2">7.1.1-2</a> - 2023-03-09</h2>
-<h3 id="commits-75">Commits</h3>
+<h3 id="commits-78">Commits</h3>
<ul>
<li>release <a href="https://github.com/ImageMagick/ImageMagick/commit/f41f852be7e5eb75ecd5d0b3e262ffed42795a1a"><code class="language-plaintext highlighter-rouge">f41f852</code></a></li>
@@ -4727,13 +5136,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-1---2023-03-09"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.1-0...7.1.1-1">7.1.1-1</a> - 2023-03-09</h2>
-<h3 id="merged-52">Merged</h3>
+<h3 id="merged-55">Merged</h3>
<ul>
<li>restore library symbol versioning to fix ABI break <a href="https://github.com/ImageMagick/ImageMagick/pull/6145"><code class="language-plaintext highlighter-rouge">#6145</code></a></li>
</ul>
-<h3 id="commits-76">Commits</h3>
+<h3 id="commits-79">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/3ac92ec21130747d4eeba925886919ec5e8bc5ef"><code class="language-plaintext highlighter-rouge">3ac92ec</code></a></li>
@@ -4745,13 +5154,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="711-0---2023-03-08"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-62...7.1.1-0">7.1.1-0</a> - 2023-03-08</h2>
-<h3 id="merged-53">Merged</h3>
+<h3 id="merged-56">Merged</h3>
<ul>
<li>improve Install-unix.txt <a href="https://github.com/ImageMagick/ImageMagick/pull/6105"><code class="language-plaintext highlighter-rouge">#6105</code></a></li>
</ul>
-<h3 id="commits-77">Commits</h3>
+<h3 id="commits-80">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/fd12019f3650c63623f2b8888f0b6326f8156c4f"><code class="language-plaintext highlighter-rouge">fd12019</code></a></li>
@@ -4816,13 +5225,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-62---2023-02-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-61...7.1.0-62">7.1.0-62</a> - 2023-02-12</h2>
-<h3 id="merged-54">Merged</h3>
+<h3 id="merged-57">Merged</h3>
<ul>
<li>add <code class="language-plaintext highlighter-rouge">BC5_UNORM</code> compression support <a href="https://github.com/ImageMagick/ImageMagick/pull/6039"><code class="language-plaintext highlighter-rouge">#6039</code></a></li>
</ul>
-<h3 id="commits-78">Commits</h3>
+<h3 id="commits-81">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/a8dc29d0d2d8f9c4fb5441a388fa36f10d49827f"><code class="language-plaintext highlighter-rouge">a8dc29d</code></a></li>
@@ -4847,14 +5256,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-61---2023-02-05"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-60...7.1.0-61">7.1.0-61</a> - 2023-02-05</h2>
-<h3 id="merged-55">Merged</h3>
+<h3 id="merged-58">Merged</h3>
<ul>
<li>Fix wonky wording in SECURITY.md <a href="https://github.com/ImageMagick/ImageMagick/pull/6033"><code class="language-plaintext highlighter-rouge">#6033</code></a></li>
<li>Link MagickCore to urlmon when targeting Windows <a href="https://github.com/ImageMagick/ImageMagick/pull/6032"><code class="language-plaintext highlighter-rouge">#6032</code></a></li>
</ul>
-<h3 id="commits-79">Commits</h3>
+<h3 id="commits-82">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b236524b27cfee49e58b938687024099b917de35"><code class="language-plaintext highlighter-rouge">b236524</code></a></li>
@@ -4894,7 +5303,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-60---2023-01-29"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-59...7.1.0-60">7.1.0-60</a> - 2023-01-29</h2>
-<h3 id="commits-80">Commits</h3>
+<h3 id="commits-83">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/6f5f21e50306546071cc730977eb45b5353c4443"><code class="language-plaintext highlighter-rouge">6f5f21e</code></a></li>
@@ -4904,14 +5313,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-59---2023-01-28"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-58...7.1.0-59">7.1.0-59</a> - 2023-01-28</h2>
-<h3 id="merged-56">Merged</h3>
+<h3 id="merged-59">Merged</h3>
<ul>
<li>Strip EOI marker from HEIC/JXL Exif payload <a href="https://github.com/ImageMagick/ImageMagick/pull/6005"><code class="language-plaintext highlighter-rouge">#6005</code></a></li>
<li>Fix for space handling in appimage path <a href="https://github.com/ImageMagick/ImageMagick/pull/5993"><code class="language-plaintext highlighter-rouge">#5993</code></a></li>
</ul>
-<h3 id="commits-81">Commits</h3>
+<h3 id="commits-84">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/44f779728fd0a6e2d4dccff51bc8e7f9c0dd54d2"><code class="language-plaintext highlighter-rouge">44f7797</code></a></li>
@@ -4942,14 +5351,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-58---2023-01-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-57...7.1.0-58">7.1.0-58</a> - 2023-01-22</h2>
-<h3 id="merged-57">Merged</h3>
+<h3 id="merged-60">Merged</h3>
<ul>
<li>Fix Exif reading for JPEG XL <a href="https://github.com/ImageMagick/ImageMagick/pull/5932"><code class="language-plaintext highlighter-rouge">#5932</code></a></li>
<li>Fix Exif writing for HEIF/JPEG XL <a href="https://github.com/ImageMagick/ImageMagick/pull/5929"><code class="language-plaintext highlighter-rouge">#5929</code></a></li>
</ul>
-<h3 id="commits-82">Commits</h3>
+<h3 id="commits-85">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/1590c22ecc63c09043f221d4291b86ed93cb2bbd"><code class="language-plaintext highlighter-rouge">1590c22</code></a></li>
@@ -5054,7 +5463,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-57---2022-12-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-56...7.1.0-57">7.1.0-57</a> - 2022-12-30</h2>
-<h3 id="commits-83">Commits</h3>
+<h3 id="commits-86">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/56814b9707389efd9b9b072ca319a8bd662c5fd0"><code class="language-plaintext highlighter-rouge">56814b9</code></a></li>
@@ -5068,7 +5477,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-56---2022-12-28"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-55...7.1.0-56">7.1.0-56</a> - 2022-12-28</h2>
-<h3 id="commits-84">Commits</h3>
+<h3 id="commits-87">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/12096ae0c0b331c4f43d421222e009da496c6100"><code class="language-plaintext highlighter-rouge">12096ae</code></a></li>
@@ -5109,13 +5518,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-55---2022-12-17"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-54...7.1.0-55">7.1.0-55</a> - 2022-12-17</h2>
-<h3 id="merged-58">Merged</h3>
+<h3 id="merged-61">Merged</h3>
<ul>
<li>fix: small error in docs <a href="https://github.com/ImageMagick/ImageMagick/pull/5882"><code class="language-plaintext highlighter-rouge">#5882</code></a></li>
</ul>
-<h3 id="commits-85">Commits</h3>
+<h3 id="commits-88">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/39fc3f2ef164b208811dc17d02126d9f89172e06"><code class="language-plaintext highlighter-rouge">39fc3f2</code></a></li>
@@ -5131,13 +5540,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-54---2022-12-10"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-53...7.1.0-54">7.1.0-54</a> - 2022-12-10</h2>
-<h3 id="merged-59">Merged</h3>
+<h3 id="merged-62">Merged</h3>
<ul>
<li>remove todo, cause cHRM+gAMA is never sRGB <a href="https://github.com/ImageMagick/ImageMagick/pull/5851"><code class="language-plaintext highlighter-rouge">#5851</code></a></li>
</ul>
-<h3 id="commits-86">Commits</h3>
+<h3 id="commits-89">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/b21075c9177d911f5aa36b20a86dab965987bd2e"><code class="language-plaintext highlighter-rouge">b21075c</code></a></li>
@@ -5156,7 +5565,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-53---2022-12-04"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-52...7.1.0-53">7.1.0-53</a> - 2022-12-04</h2>
-<h3 id="merged-60">Merged</h3>
+<h3 id="merged-63">Merged</h3>
<ul>
<li>another approach to fix #5836 <a href="https://github.com/ImageMagick/ImageMagick/pull/5841"><code class="language-plaintext highlighter-rouge">#5841</code></a></li>
@@ -5170,14 +5579,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Fix *arch-dir helpstring in configure.ac <a href="https://github.com/ImageMagick/ImageMagick/pull/5780"><code class="language-plaintext highlighter-rouge">#5780</code></a></li>
</ul>
-<h3 id="fixed-9">Fixed</h3>
+<h3 id="fixed-10">Fixed</h3>
<ul>
<li>another approach to fix #5836 (#5841) <a href="https://github.com/ImageMagick/ImageMagick/issues/5836"><code class="language-plaintext highlighter-rouge">#5836</code></a></li>
<li>Chrome, Mozilla, GIMP do not assume sRGB (#5824) <a href="https://github.com/ImageMagick/ImageMagick/issues/4375"><code class="language-plaintext highlighter-rouge">#4375</code></a></li>
</ul>
-<h3 id="commits-87">Commits</h3>
+<h3 id="commits-90">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/d6154516de2d88ce6a175bfc34cc7688b81f5cf7"><code class="language-plaintext highlighter-rouge">d615451</code></a></li>
@@ -5273,14 +5682,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-52---2022-11-06"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-51...7.1.0-52">7.1.0-52</a> - 2022-11-06</h2>
-<h3 id="merged-61">Merged</h3>
+<h3 id="merged-64">Merged</h3>
<ul>
<li>coders: Enable opening https files in mingw <a href="https://github.com/ImageMagick/ImageMagick/pull/5727"><code class="language-plaintext highlighter-rouge">#5727</code></a></li>
<li>utilities: Enable support for unicode paths in mingw <a href="https://github.com/ImageMagick/ImageMagick/pull/5713"><code class="language-plaintext highlighter-rouge">#5713</code></a></li>
</ul>
-<h3 id="commits-88">Commits</h3>
+<h3 id="commits-91">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/bf925a7f1dd56b4306fed0a3802477eb83df13f8"><code class="language-plaintext highlighter-rouge">bf925a7</code></a></li>
@@ -5335,7 +5744,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-51---2022-10-16"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-50...7.1.0-51">7.1.0-51</a> - 2022-10-16</h2>
-<h3 id="commits-89">Commits</h3>
+<h3 id="commits-92">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/fea7eed9c4067e6b9ded49da23790eb54c7d8d2b"><code class="language-plaintext highlighter-rouge">fea7eed</code></a></li>
@@ -5351,13 +5760,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-50---2022-10-08"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-49...7.1.0-50">7.1.0-50</a> - 2022-10-08</h2>
-<h3 id="merged-62">Merged</h3>
+<h3 id="merged-65">Merged</h3>
<ul>
<li>Fix DDS file DDPF_LUMINANCE type of data <a href="https://github.com/ImageMagick/ImageMagick/pull/5452"><code class="language-plaintext highlighter-rouge">#5452</code></a></li>
</ul>
-<h3 id="commits-90">Commits</h3>
+<h3 id="commits-93">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/9f4d7d51e1cc2c8be8672703da3e860ff57bc86d"><code class="language-plaintext highlighter-rouge">9f4d7d5</code></a></li>
@@ -5382,14 +5791,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-49---2022-09-24"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-48...7.1.0-49">7.1.0-49</a> - 2022-09-24</h2>
-<h3 id="merged-63">Merged</h3>
+<h3 id="merged-66">Merged</h3>
<ul>
<li>Fixed magnify confusing colorspaces other than linear-RGB. <a href="https://github.com/ImageMagick/ImageMagick/pull/5569"><code class="language-plaintext highlighter-rouge">#5569</code></a></li>
<li>Fix timespec assignment on AIX <a href="https://github.com/ImageMagick/ImageMagick/pull/5565"><code class="language-plaintext highlighter-rouge">#5565</code></a></li>
</ul>
-<h3 id="commits-91">Commits</h3>
+<h3 id="commits-94">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/01d9f843dab9e3116bc34598f736ff0d832ec862"><code class="language-plaintext highlighter-rouge">01d9f84</code></a></li>
@@ -5416,13 +5825,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-48---2022-09-11"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-47...7.1.0-48">7.1.0-48</a> - 2022-09-11</h2>
-<h3 id="merged-64">Merged</h3>
+<h3 id="merged-67">Merged</h3>
<ul>
<li>png.c: Remove the extra space character in “%8lu “ <a href="https://github.com/ImageMagick/ImageMagick/pull/5513"><code class="language-plaintext highlighter-rouge">#5513</code></a></li>
</ul>
-<h3 id="commits-92">Commits</h3>
+<h3 id="commits-95">Commits</h3>
<ul>
<li>Corrected setting the flags. <a href="https://github.com/ImageMagick/ImageMagick/commit/15861e07b34c3195991f4aca7f05f8e861691e9c"><code class="language-plaintext highlighter-rouge">15861e0</code></a></li>
@@ -5484,13 +5893,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-47---2022-08-27"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-46...7.1.0-47">7.1.0-47</a> - 2022-08-27</h2>
-<h3 id="merged-65">Merged</h3>
+<h3 id="merged-68">Merged</h3>
<ul>
<li>The effect of modulate:colorspace LCH is different for palette and true color images. <a href="https://github.com/ImageMagick/ImageMagick/pull/5470"><code class="language-plaintext highlighter-rouge">#5470</code></a></li>
</ul>
-<h3 id="commits-93">Commits</h3>
+<h3 id="commits-96">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/d1be0fd485f786041401d25a0f554cbd680e653e"><code class="language-plaintext highlighter-rouge">d1be0fd</code></a></li>
@@ -5519,7 +5928,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-46---2022-08-17"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-45...7.1.0-46">7.1.0-46</a> - 2022-08-17</h2>
-<h3 id="commits-94">Commits</h3>
+<h3 id="commits-97">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/5ab412cf47dea2f09f08d2e7e84d1892b711bac8"><code class="language-plaintext highlighter-rouge">5ab412c</code></a></li>
@@ -5577,13 +5986,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-45---2022-07-31"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-44...7.1.0-45">7.1.0-45</a> - 2022-07-31</h2>
-<h3 id="merged-66">Merged</h3>
+<h3 id="merged-69">Merged</h3>
<ul>
<li>Update Readme.md <a href="https://github.com/ImageMagick/ImageMagick/pull/5320"><code class="language-plaintext highlighter-rouge">#5320</code></a></li>
</ul>
-<h3 id="commits-95">Commits</h3>
+<h3 id="commits-98">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/9e3fa1679410d511c691d5f6eb09f7d0a2ae0e3f"><code class="language-plaintext highlighter-rouge">9e3fa16</code></a></li>
@@ -5613,13 +6022,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-44---2022-07-24"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-43...7.1.0-44">7.1.0-44</a> - 2022-07-24</h2>
-<h3 id="merged-67">Merged</h3>
+<h3 id="merged-70">Merged</h3>
<ul>
<li>build: fix quoting for autoconf sendfile check <a href="https://github.com/ImageMagick/ImageMagick/pull/5333"><code class="language-plaintext highlighter-rouge">#5333</code></a></li>
</ul>
-<h3 id="commits-96">Commits</h3>
+<h3 id="commits-99">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/54080fc7ee70731bc07a204b77efaf6b28c3ff08"><code class="language-plaintext highlighter-rouge">54080fc</code></a></li>
@@ -5692,7 +6101,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-43---2022-07-09"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-42...7.1.0-43">7.1.0-43</a> - 2022-07-09</h2>
-<h3 id="commits-97">Commits</h3>
+<h3 id="commits-100">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/c9ea9fd96d950849d381ce41250609d4c329303c"><code class="language-plaintext highlighter-rouge">c9ea9fd</code></a></li>
@@ -5703,7 +6112,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-42---2022-07-09"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-41...7.1.0-42">7.1.0-42</a> - 2022-07-09</h2>
-<h3 id="commits-98">Commits</h3>
+<h3 id="commits-101">Commits</h3>
<ul>
<li>incorrect pointer update when computing median @ https://github.com/ImageMagick/ImageMagick/issues/5298 <a href="https://github.com/ImageMagick/ImageMagick/commit/e29f487ccdbe9f971fa69f16785767b2484a8f0e"><code class="language-plaintext highlighter-rouge">e29f487</code></a></li>
@@ -5717,7 +6126,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-41---2022-07-06"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-40...7.1.0-41">7.1.0-41</a> - 2022-07-06</h2>
-<h3 id="commits-99">Commits</h3>
+<h3 id="commits-102">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/19f1a50371acc1f4eaead23d097523319e64894a"><code class="language-plaintext highlighter-rouge">19f1a50</code></a></li>
@@ -5738,7 +6147,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-40---2022-07-03"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-39...7.1.0-40">7.1.0-40</a> - 2022-07-03</h2>
-<h3 id="commits-100">Commits</h3>
+<h3 id="commits-103">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/15fbf4da67cd51f903c13adbebd40eda1bfff047"><code class="language-plaintext highlighter-rouge">15fbf4d</code></a></li>
@@ -5782,7 +6191,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-39---2022-06-20"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-38...7.1.0-39">7.1.0-39</a> - 2022-06-20</h2>
-<h3 id="commits-101">Commits</h3>
+<h3 id="commits-104">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/77932cb9424f81fca686942bd8cb97b2eafc6065"><code class="language-plaintext highlighter-rouge">77932cb</code></a></li>
@@ -5797,7 +6206,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-38---2022-06-19"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-37...7.1.0-38">7.1.0-38</a> - 2022-06-19</h2>
-<h3 id="commits-102">Commits</h3>
+<h3 id="commits-105">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/874da17fa8719420e864358ace1b40947f866e37"><code class="language-plaintext highlighter-rouge">874da17</code></a></li>
@@ -5867,13 +6276,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-37---2022-06-05"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-36...7.1.0-37">7.1.0-37</a> - 2022-06-05</h2>
-<h3 id="fixed-10">Fixed</h3>
+<h3 id="fixed-11">Fixed</h3>
<ul>
<li>Set pass when webp:target-size or webp:target-psnr are set to fix #4931. <a href="https://github.com/ImageMagick/ImageMagick/issues/4931"><code class="language-plaintext highlighter-rouge">#4931</code></a></li>
</ul>
-<h3 id="commits-103">Commits</h3>
+<h3 id="commits-106">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/be0bdc32c03f48923ca811e139d0a13f3724c4f5"><code class="language-plaintext highlighter-rouge">be0bdc3</code></a></li>
@@ -5908,7 +6317,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-36---2022-05-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-35...7.1.0-36">7.1.0-36</a> - 2022-05-30</h2>
-<h3 id="commits-104">Commits</h3>
+<h3 id="commits-107">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/cfdb4897c6a2212c83be207f4dd5344b0d373d3e"><code class="language-plaintext highlighter-rouge">cfdb489</code></a></li>
@@ -5928,7 +6337,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-35---2022-05-16"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-34...7.1.0-35">7.1.0-35</a> - 2022-05-16</h2>
-<h3 id="commits-105">Commits</h3>
+<h3 id="commits-108">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/e37bfbdac1842265bbe1e3da7b61dd8580d947b5"><code class="language-plaintext highlighter-rouge">e37bfbd</code></a></li>
@@ -5939,7 +6348,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-34---2022-05-15"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-33...7.1.0-34">7.1.0-34</a> - 2022-05-15</h2>
-<h3 id="commits-106">Commits</h3>
+<h3 id="commits-109">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/68a041269ddfc43dc334022176395592d179dba2"><code class="language-plaintext highlighter-rouge">68a0412</code></a></li>
@@ -5964,14 +6373,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-33---2022-05-07"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-32...7.1.0-33">7.1.0-33</a> - 2022-05-07</h2>
-<h3 id="merged-68">Merged</h3>
+<h3 id="merged-71">Merged</h3>
<ul>
<li>autotools: Add ws2_32 library with MagickCore for Win32 platform <a href="https://github.com/ImageMagick/ImageMagick/pull/5119"><code class="language-plaintext highlighter-rouge">#5119</code></a></li>
<li>Avoid NULL pointer dereference in coders/wmf.c <a href="https://github.com/ImageMagick/ImageMagick/pull/5117"><code class="language-plaintext highlighter-rouge">#5117</code></a></li>
</ul>
-<h3 id="commits-107">Commits</h3>
+<h3 id="commits-110">Commits</h3>
<ul>
<li>beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/600c455b84e471b700880653a6316c75b238bdc3"><code class="language-plaintext highlighter-rouge">600c455</code></a></li>
@@ -6010,14 +6419,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-32---2022-04-30"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-31...7.1.0-32">7.1.0-32</a> - 2022-04-30</h2>
-<h3 id="merged-69">Merged</h3>
+<h3 id="merged-72">Merged</h3>
<ul>
<li>Add support for FITS images with NaN values <a href="https://github.com/ImageMagick/ImageMagick/pull/5084"><code class="language-plaintext highlighter-rouge">#5084</code></a></li>
<li>Fixes grammar/typos/markdown <a href="https://github.com/ImageMagick/ImageMagick/pull/5083"><code class="language-plaintext highlighter-rouge">#5083</code></a></li>
</ul>
-<h3 id="commits-108">Commits</h3>
+<h3 id="commits-111">Commits</h3>
<ul>
<li>prep Beta release <a href="https://github.com/ImageMagick/ImageMagick/commit/d2c4a6fad5d9b1d68f729e09ed9e1af2e28957df"><code class="language-plaintext highlighter-rouge">d2c4a6f</code></a></li>
@@ -6062,7 +6471,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-31---2022-04-23"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-30...7.1.0-31">7.1.0-31</a> - 2022-04-23</h2>
-<h3 id="commits-109">Commits</h3>
+<h3 id="commits-112">Commits</h3>
<ul>
<li>https://github.com/ImageMagick/ImageMagick/issues/4973 <a href="https://github.com/ImageMagick/ImageMagick/commit/c8ecfc44c64c7e06d346fc8d52bd52c3afc42444"><code class="language-plaintext highlighter-rouge">c8ecfc4</code></a></li>
@@ -6112,19 +6521,19 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-30---2022-04-16"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-29...7.1.0-30">7.1.0-30</a> - 2022-04-16</h2>
-<h3 id="merged-70">Merged</h3>
+<h3 id="merged-73">Merged</h3>
<ul>
<li>fix #5033: runtime error: load of misaligned address <a href="https://github.com/ImageMagick/ImageMagick/pull/5034"><code class="language-plaintext highlighter-rouge">#5034</code></a></li>
</ul>
-<h3 id="fixed-11">Fixed</h3>
+<h3 id="fixed-12">Fixed</h3>
<ul>
<li>fix #5033: runtime error: load of misaligned address (#5034) <a href="https://github.com/ImageMagick/ImageMagick/issues/5033"><code class="language-plaintext highlighter-rouge">#5033</code></a> <a href="https://github.com/ImageMagick/ImageMagick/issues/5033"><code class="language-plaintext highlighter-rouge">#5033</code></a></li>
</ul>
-<h3 id="commits-110">Commits</h3>
+<h3 id="commits-113">Commits</h3>
<ul>
<li>https://github.com/ImageMagick/ImageMagick/discussions/4861 <a href="https://github.com/ImageMagick/ImageMagick/commit/347b82801da2b0223a4de34d6c30123041061c2b"><code class="language-plaintext highlighter-rouge">347b828</code></a></li>
@@ -6224,20 +6633,20 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-29---2022-03-27"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-28...7.1.0-29">7.1.0-29</a> - 2022-03-27</h2>
-<h3 id="merged-71">Merged</h3>
+<h3 id="merged-74">Merged</h3>
<ul>
<li>Remove unused EXPLICIT_TEMPLATE_INSTANTIATION <a href="https://github.com/ImageMagick/ImageMagick/pull/4982"><code class="language-plaintext highlighter-rouge">#4982</code></a></li>
<li>Fixes #4985: 4e+26 is outside the range of representable values of type ‘unsigned long’ at coders/pcl.c:299 <a href="https://github.com/ImageMagick/ImageMagick/pull/4986"><code class="language-plaintext highlighter-rouge">#4986</code></a></li>
</ul>
-<h3 id="fixed-12">Fixed</h3>
+<h3 id="fixed-13">Fixed</h3>
<ul>
<li>Fixes #4985: 4e+26 is outside the range of representable values of type ‘unsigned long’ at coders/pcl.c:299 (#4986) <a href="https://github.com/ImageMagick/ImageMagick/issues/4985"><code class="language-plaintext highlighter-rouge">#4985</code></a></li>
</ul>
-<h3 id="commits-111">Commits</h3>
+<h3 id="commits-114">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/280e7e6c2183a534efdf08db225dfa21350f0403"><code class="language-plaintext highlighter-rouge">280e7e6</code></a></li>
@@ -6271,14 +6680,14 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-28---2022-03-20"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-27...7.1.0-28">7.1.0-28</a> - 2022-03-20</h2>
-<h3 id="merged-72">Merged</h3>
+<h3 id="merged-75">Merged</h3>
<ul>
<li>Fix setting the pixel intensity method with SetImageProperty <a href="https://github.com/ImageMagick/ImageMagick/pull/4969"><code class="language-plaintext highlighter-rouge">#4969</code></a></li>
<li>fix issue: outside the range of representable values of type ‘unsigned int’ at coders/psd.c:1025 <a href="https://github.com/ImageMagick/ImageMagick/pull/4963"><code class="language-plaintext highlighter-rouge">#4963</code></a></li>
</ul>
-<h3 id="commits-112">Commits</h3>
+<h3 id="commits-115">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/daef66469b28411755b42f000daa5c1dceec8697"><code class="language-plaintext highlighter-rouge">daef664</code></a></li>
@@ -6312,7 +6721,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-27---2022-03-04"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-26...7.1.0-27">7.1.0-27</a> - 2022-03-04</h2>
-<h3 id="commits-113">Commits</h3>
+<h3 id="commits-116">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/fe3a627b4a9f9c15ef8d34daefc08f5471681f4a"><code class="language-plaintext highlighter-rouge">fe3a627</code></a></li>
@@ -6354,13 +6763,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-26---2022-02-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-25...7.1.0-26">7.1.0-26</a> - 2022-02-21</h2>
-<h3 id="merged-73">Merged</h3>
+<h3 id="merged-76">Merged</h3>
<ul>
<li>Appropriate default kmin, kmax values for lossy and lossless into webp encoder <a href="https://github.com/ImageMagick/ImageMagick/pull/4846"><code class="language-plaintext highlighter-rouge">#4846</code></a></li>
</ul>
-<h3 id="commits-114">Commits</h3>
+<h3 id="commits-117">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/702d55a87c2b6dc5052a9a71bbbeba2b0b2fc619"><code class="language-plaintext highlighter-rouge">702d55a</code></a></li>
@@ -6409,7 +6818,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-25---2022-02-15"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-24...7.1.0-25">7.1.0-25</a> - 2022-02-15</h2>
-<h3 id="commits-115">Commits</h3>
+<h3 id="commits-118">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/191fd9864aa54bde02bf1863bc306fbe24843f64"><code class="language-plaintext highlighter-rouge">191fd98</code></a></li>
@@ -6438,7 +6847,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-24---2022-02-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-23...7.1.0-24">7.1.0-24</a> - 2022-02-12</h2>
-<h3 id="commits-116">Commits</h3>
+<h3 id="commits-119">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/8c52d6fa50d7c39ea4446d416640e29dada61996"><code class="language-plaintext highlighter-rouge">8c52d6f</code></a></li>
@@ -6481,13 +6890,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-23---2022-02-05"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-22...7.1.0-23">7.1.0-23</a> - 2022-02-05</h2>
-<h3 id="merged-74">Merged</h3>
+<h3 id="merged-77">Merged</h3>
<ul>
<li>Make MagickSet/GetSamplingFactors() use ‘:’ instead of ‘,’ <a href="https://github.com/ImageMagick/ImageMagick/pull/4794"><code class="language-plaintext highlighter-rouge">#4794</code></a></li>
</ul>
-<h3 id="commits-117">Commits</h3>
+<h3 id="commits-120">Commits</h3>
<ul>
<li>check if image extent is NaN <a href="https://github.com/ImageMagick/ImageMagick/commit/94650bc4f10a5bb49e16c0f766adcb0db5f04a41"><code class="language-plaintext highlighter-rouge">94650bc</code></a></li>
@@ -6522,7 +6931,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-22---2022-01-29"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-21...7.1.0-22">7.1.0-22</a> - 2022-01-29</h2>
-<h3 id="commits-118">Commits</h3>
+<h3 id="commits-121">Commits</h3>
<ul>
<li>bump patch level version <a href="https://github.com/ImageMagick/ImageMagick/commit/d2ce5721f36572fb80c7a4df8ccec83a399f15ee"><code class="language-plaintext highlighter-rouge">d2ce572</code></a></li>
@@ -6538,13 +6947,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-21---2022-01-28"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-20...7.1.0-21">7.1.0-21</a> - 2022-01-28</h2>
-<h3 id="merged-75">Merged</h3>
+<h3 id="merged-78">Merged</h3>
<ul>
<li>msl coder: add support for autoorient <a href="https://github.com/ImageMagick/ImageMagick/pull/4745"><code class="language-plaintext highlighter-rouge">#4745</code></a></li>
</ul>
-<h3 id="commits-119">Commits</h3>
+<h3 id="commits-122">Commits</h3>
<ul>
<li>It’s a new dawn; It’s a new day; It’s a new life; For ImageMagick <a href="https://github.com/ImageMagick/ImageMagick/commit/03ddd19cfd5a3937aecef34e2173f47c9f2f4825"><code class="language-plaintext highlighter-rouge">03ddd19</code></a></li>
@@ -6571,7 +6980,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-20---2022-01-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-19...7.1.0-20">7.1.0-20</a> - 2022-01-22</h2>
-<h3 id="merged-76">Merged</h3>
+<h3 id="merged-79">Merged</h3>
<ul>
<li>Fix wrong logic when compare two float values with ‘==” directly <a href="https://github.com/ImageMagick/ImageMagick/pull/4723"><code class="language-plaintext highlighter-rouge">#4723</code></a></li>
@@ -6580,7 +6989,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<li>Added support for QOI format <a href="https://github.com/ImageMagick/ImageMagick/pull/4653"><code class="language-plaintext highlighter-rouge">#4653</code></a></li>
</ul>
-<h3 id="commits-120">Commits</h3>
+<h3 id="commits-123">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/bc39ec6f0c977dfd2a6aacc334e4143f56e97dd3"><code class="language-plaintext highlighter-rouge">bc39ec6</code></a></li>
@@ -6715,7 +7124,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-19---2021-12-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-18...7.1.0-19">7.1.0-19</a> - 2021-12-22</h2>
-<h3 id="commits-121">Commits</h3>
+<h3 id="commits-124">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/8a24e363687b2e9221eb06c90cf236a882f1ff82"><code class="language-plaintext highlighter-rouge">8a24e36</code></a></li>
@@ -6731,7 +7140,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-18---2021-12-18"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-17...7.1.0-18">7.1.0-18</a> - 2021-12-18</h2>
-<h3 id="commits-122">Commits</h3>
+<h3 id="commits-125">Commits</h3>
<ul>
<li>Add note to avoid confusion. <a href="https://github.com/ImageMagick/ImageMagick/commit/2ee9473f35bbf5d42dd8e47e4d0d683eb5c7eda7"><code class="language-plaintext highlighter-rouge">2ee9473</code></a></li>
@@ -6760,7 +7169,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-17---2021-12-04"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-16...7.1.0-17">7.1.0-17</a> - 2021-12-04</h2>
-<h3 id="commits-123">Commits</h3>
+<h3 id="commits-126">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/40189c37f33b77df5970ddbba7560c596a61c877"><code class="language-plaintext highlighter-rouge">40189c3</code></a></li>
@@ -6794,7 +7203,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-16---2021-11-21"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-15...7.1.0-16">7.1.0-16</a> - 2021-11-21</h2>
-<h3 id="commits-124">Commits</h3>
+<h3 id="commits-127">Commits</h3>
<ul>
<li>eliminate possible device by zero <a href="https://github.com/ImageMagick/ImageMagick/commit/cdf8735e35ad9df344b99a2ae1255cd0f2f0ccea"><code class="language-plaintext highlighter-rouge">cdf8735</code></a></li>
@@ -6819,13 +7228,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-15---2021-11-20"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-14...7.1.0-15">7.1.0-15</a> - 2021-11-20</h2>
-<h3 id="merged-77">Merged</h3>
+<h3 id="merged-80">Merged</h3>
<ul>
<li>Make exported name be same as in C file. <a href="https://github.com/ImageMagick/ImageMagick/pull/4430"><code class="language-plaintext highlighter-rouge">#4430</code></a></li>
</ul>
-<h3 id="commits-125">Commits</h3>
+<h3 id="commits-128">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/cd9d52cb636d8bb7d996cd7e5017515d34d09bf4"><code class="language-plaintext highlighter-rouge">cd9d52c</code></a></li>
@@ -6862,19 +7271,19 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-14---2021-11-14"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-13...7.1.0-14">7.1.0-14</a> - 2021-11-14</h2>
-<h3 id="merged-78">Merged</h3>
+<h3 id="merged-81">Merged</h3>
<ul>
<li>Typo in magick color threshold image <a href="https://github.com/ImageMagick/ImageMagick/pull/4431"><code class="language-plaintext highlighter-rouge">#4431</code></a></li>
</ul>
-<h3 id="fixed-13">Fixed</h3>
+<h3 id="fixed-14">Fixed</h3>
<ul>
<li>Moved the free to the correct position to fix #4446. <a href="https://github.com/ImageMagick/ImageMagick/issues/4446"><code class="language-plaintext highlighter-rouge">#4446</code></a></li>
</ul>
-<h3 id="commits-126">Commits</h3>
+<h3 id="commits-129">Commits</h3>
<ul>
<li>Fix stripes in output when resizing with OpenCL acceleration enabled <a href="https://github.com/ImageMagick/ImageMagick/commit/0c660f2ff8899401be4acf0ce539f0441ebc370e"><code class="language-plaintext highlighter-rouge">0c660f2</code></a></li>
@@ -6903,7 +7312,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-13---2021-10-28"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-12...7.1.0-13">7.1.0-13</a> - 2021-10-28</h2>
-<h3 id="commits-127">Commits</h3>
+<h3 id="commits-130">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/d988cbfa42a0cbe1bb3c90a0aad5fa0b5221f85f"><code class="language-plaintext highlighter-rouge">d988cbf</code></a></li>
@@ -6917,7 +7326,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-12---2021-10-25"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-11...7.1.0-12">7.1.0-12</a> - 2021-10-25</h2>
-<h3 id="commits-128">Commits</h3>
+<h3 id="commits-131">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/1b0f475ea77b71891df97ac0ca4a6c58e7f62b35"><code class="language-plaintext highlighter-rouge">1b0f475</code></a></li>
@@ -6929,7 +7338,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-11---2021-10-24"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-10...7.1.0-11">7.1.0-11</a> - 2021-10-24</h2>
-<h3 id="commits-129">Commits</h3>
+<h3 id="commits-132">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/46c028b5b76f590f38fe9c25039a560d848cd888"><code class="language-plaintext highlighter-rouge">46c028b</code></a></li>
@@ -7013,7 +7422,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-10---2021-10-10"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-9...7.1.0-10">7.1.0-10</a> - 2021-10-10</h2>
-<h3 id="commits-130">Commits</h3>
+<h3 id="commits-133">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/78efee93db2217a8ad2ff622921e51465de64eb4"><code class="language-plaintext highlighter-rouge">78efee9</code></a></li>
@@ -7036,7 +7445,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-9---2021-10-03"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-8...7.1.0-9">7.1.0-9</a> - 2021-10-03</h2>
-<h3 id="commits-131">Commits</h3>
+<h3 id="commits-134">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/a14c4cd8dddfa9fbb431aa55913914ba7f6efd02"><code class="language-plaintext highlighter-rouge">a14c4cd</code></a></li>
@@ -7148,7 +7557,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-8---2021-09-18"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-7...7.1.0-8">7.1.0-8</a> - 2021-09-18</h2>
-<h3 id="commits-132">Commits</h3>
+<h3 id="commits-135">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/ffee953296479c7cb6a27b08b3cd12b29a96ef48"><code class="language-plaintext highlighter-rouge">ffee953</code></a></li>
@@ -7175,13 +7584,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-7---2021-09-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-6...7.1.0-7">7.1.0-7</a> - 2021-09-12</h2>
-<h3 id="merged-79">Merged</h3>
+<h3 id="merged-82">Merged</h3>
<ul>
<li>Added decode support for DDS Dxt10 format <a href="https://github.com/ImageMagick/ImageMagick/pull/4126"><code class="language-plaintext highlighter-rouge">#4126</code></a></li>
</ul>
-<h3 id="commits-133">Commits</h3>
+<h3 id="commits-136">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/f135b4cedfb418733d372ffc129eda5e0d1cb1d1"><code class="language-plaintext highlighter-rouge">f135b4c</code></a></li>
@@ -7249,7 +7658,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-6---2021-09-04"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-5...7.1.0-6">7.1.0-6</a> - 2021-09-04</h2>
-<h3 id="commits-134">Commits</h3>
+<h3 id="commits-137">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/2d444c93b34f1a77c7d1d7570ba3e9350697af4e"><code class="language-plaintext highlighter-rouge">2d444c9</code></a></li>
@@ -7290,20 +7699,20 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-5---2021-08-22"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-4...7.1.0-5">7.1.0-5</a> - 2021-08-22</h2>
-<h3 id="merged-80">Merged</h3>
+<h3 id="merged-83">Merged</h3>
<ul>
<li>fix #4097：Division by zero in ReadEnhMetaFile() of coders/emf.c <a href="https://github.com/ImageMagick/ImageMagick/pull/4098"><code class="language-plaintext highlighter-rouge">#4098</code></a></li>
<li>fix Division by zero in XMenuWidget() of MagickCore/widget.c <a href="https://github.com/ImageMagick/ImageMagick/pull/4041"><code class="language-plaintext highlighter-rouge">#4041</code></a></li>
</ul>
-<h3 id="fixed-14">Fixed</h3>
+<h3 id="fixed-15">Fixed</h3>
<ul>
<li>fix #4097：Division by zero in ReadEnhMetaFile() of coders/emf.c (#4098) <a href="https://github.com/ImageMagick/ImageMagick/issues/4097"><code class="language-plaintext highlighter-rouge">#4097</code></a></li>
</ul>
-<h3 id="commits-135">Commits</h3>
+<h3 id="commits-138">Commits</h3>
<ul>
<li>Corrected remark to make it clear that this is for both reading and writing. <a href="https://github.com/ImageMagick/ImageMagick/commit/5c09e3e9cc6f904114e5c71cd1ff1a6df46cb9f8"><code class="language-plaintext highlighter-rouge">5c09e3e</code></a></li>
@@ -7381,7 +7790,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-4---2021-07-18"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-3...7.1.0-4">7.1.0-4</a> - 2021-07-18</h2>
-<h3 id="commits-136">Commits</h3>
+<h3 id="commits-139">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/433d17474d91aa37c5d933062b9c0a12fcbe9cf3"><code class="language-plaintext highlighter-rouge">433d174</code></a></li>
@@ -7413,13 +7822,13 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-3---2021-07-17"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-2...7.1.0-3">7.1.0-3</a> - 2021-07-17</h2>
-<h3 id="merged-81">Merged</h3>
+<h3 id="merged-84">Merged</h3>
<ul>
<li>magick.sh.in: Corrected sample command <a href="https://github.com/ImageMagick/ImageMagick/pull/3867"><code class="language-plaintext highlighter-rouge">#3867</code></a></li>
</ul>
-<h3 id="commits-137">Commits</h3>
+<h3 id="commits-140">Commits</h3>
<ul>
<li>Test with mingw-w64 using MSYS2 CI <a href="https://github.com/ImageMagick/ImageMagick/commit/6509eba48ebb5fd8a398a3548389ddcec0b60836"><code class="language-plaintext highlighter-rouge">6509eba</code></a></li>
@@ -7494,7 +7903,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-2---2021-06-25"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-1...7.1.0-2">7.1.0-2</a> - 2021-06-25</h2>
-<h3 id="commits-138">Commits</h3>
+<h3 id="commits-141">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/580ab36e3c1f35820007d76a65f899fe070ebd78"><code class="language-plaintext highlighter-rouge">580ab36</code></a></li>
@@ -7507,7 +7916,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-1---2021-06-20"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.1.0-0...7.1.0-1">7.1.0-1</a> - 2021-06-20</h2>
-<h3 id="commits-139">Commits</h3>
+<h3 id="commits-142">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/50a0ccbf19bc57f40a372a8c9de11e29de74bcce"><code class="language-plaintext highlighter-rouge">50a0ccb</code></a></li>
@@ -7534,7 +7943,7 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
<h2 id="710-0---2021-06-12"><a href="https://github.com/ImageMagick/ImageMagick/compare/7.0.11-14...7.1.0-0">7.1.0-0</a> - 2021-06-12</h2>
-<h3 id="commits-140">Commits</h3>
+<h3 id="commits-143">Commits</h3>
<ul>
<li>… <a href="https://github.com/ImageMagick/ImageMagick/commit/20ff6c82c75ecc5b8241610c25464daf01f615a3"><code class="language-plaintext highlighter-rouge">20ff6c8</code></a></li>
@@ -7571,66 +7980,100 @@ and this project adheres to <a href="https://semver.org/spec/v2.0.0.html">Semant
</ul>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/cipher/index.html b/www/cipher/index.html
index 019f866b5..106a7b556 100644
--- a/www/cipher/index.html
+++ b/www/cipher/index.html
@@ -11,338 +11,494 @@
<meta name="description" content="Learn how ImageMagick applies cipher functions to encrypt and decrypt image pixels. Explore supported algorithms, usage examples, and how ciphers enhance image security and controlled access.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Encipher or Decipher an Image">
<meta property="og:description" content="Learn how ImageMagick applies cipher functions to encrypt and decrypt image pixels. Explore supported algorithms, usage examples, and how ciphers enhance image security and controlled access.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Encipher or Decipher an Image">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Encipher or Decipher an Image",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/cipher/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick applies cipher functions to encrypt and decrypt image pixels. Explore supported algorithms, usage examples, and how ciphers enhance image security and controlled access.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/cipher/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/cipher/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Encipher or Decipher an Image</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#encipher">Encipher an Image</a> • <a href="#decipher">Decipher an Image</a> • <a href="#caveats">Encipher and Decipher Caveats</a></p>
-
-<p class="lead">Most images, by design, are made to be viewed often and by many people. Web images, for example, may be viewed hundreds of times a day by a multitude of visitors. However, in some cases, you may want to keep a particular image private so that only you or perhaps a select group of your friends or web visitors can view it. ImageMagick permits you to scramble your images such that unless someone knows your passphrase, they will be unable to view the original content.</p>
-
-<p>You could use an <a href="https://github.com/ImageMagick/WizardsToolkit">enciphering</a> utility to scramble your image but they typically scramble the entire file making it unrecognizable as an image format. With ImageMagick, only the pixels are scrambled. The scrambled image continues to be recognized as an image and will even display in your web page. However, the content appears as gibberish, nothing like the original content.</p>
-
-<h2><a class="anchor" id="encipher"></a>Encipher an Image</h2>
-
-<p>Use the <a href="../command-line-options/index.html#encipher">-encipher</a> option to scramble your image so that it is unrecognizable. The option requires a filename that contains your passphrase. In this example we scramble an image and save it in the PNG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg -encipher passphrase.txt rose.png </samp></pre>
-
-<p>Here we encipher an image using another image as the passphrase:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg -encipher smiley.gif rose.png </samp></pre>
-
-<h2><a class="anchor" id="decipher"></a>Decipher an Image</h2>
-
-<p>Use the <a href="../command-line-options/index.html#decipher">-decipher</a> option to unscramble your image so that it is recognizable once again. The option requires a filename that contains your passphrase. In this example we unscramble an image and save it in the JPEG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.png -decipher passphrase.txt rose.jpg </samp></pre>
-
-<h2><a class="anchor" id="caveats"></a>Encipher and Decipher Caveats</h2>
-
-<p>Some formats do not support enciphered pixels-- the JPEG or GIF format, for
-example. To ensure your image format is supported, encipher a test image and
-verify you can restore its original content <var>before</var> you encipher any
-additional images in that format.</p>
-
-<p>The image format may only support 8-bit and RGB (TrueColor). As such you may
-like to include the options "-depth 8 -type TrueColor" before the output
-filename.</p>
-
-<p>The passphrase can be any combinations of letters and symbols. It should
-be a minimum of 12 character combinations to help ensure your image remains
-private. Also make sure your passphrase file permissions prevent others from
-reading it otherwise unintended users may be able to view the original image
-content.</p>
-
-<p>You can only restore the original image content if you know your
-passphrase. If you lose or forget it, your original image content is lost
-forever.</p>
-
-<p>ImageMagick only scrambles the image pixels. The image metadata remains
-untouched and readable by anyone with access to the image file.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Encipher or Decipher an Image</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick applies cipher functions to encrypt and decrypt image pixels. Explore supported algorithms, usage examples, and how ciphers enhance image security and controlled access.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>ImageMagick uses AES in Counter (CTR) mode to scramble the pixel data of an image. The current implementation derives both the AES key and the IV (initial counter) deterministically from the user‑supplied passphrase: the first half of the passphrase becomes the AES key, and the second half is hashed together with the image dimensions to produce the IV. Because this IV is derived solely from the passphrase and the image’s width and height, encrypting multiple images with the same passphrase and the same dimensions produces the same IV and therefore the same keystream.</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Quick Navigation & Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap gap-2 pt-2 pb-3 border-bottom mb-3">
+ <a href="#encipher" class="btn btn-outline-secondary btn-sm">Encipher an Image</a>
+ <a href="#decipher" class="btn btn-outline-secondary btn-sm">Decipher an Image</a>
+ <a href="#caveats" class="btn btn-outline-secondary btn-sm">Encipher and Decipher Caveats</a>
+ </div>
+ <p class="lead text-body-secondary">
+ Most images, by design, are made to be viewed often and by many people. Web images, for example, may be viewed hundreds of times a day by a multitude of visitors. However, in some cases, you may want to keep a particular image private so that only you or a select group of friends or web visitors can view it. ImageMagick permits you to scramble your images such that unless someone knows your passphrase, they will be unable to view the original content.
+ </p>
+ <p class="text-muted small">
+ You could use an <a href="https://github.com/ImageMagick/WizardsToolkit">enciphering</a> utility to scramble your image, but they typically scramble the entire file making it unrecognizable as an image format. With ImageMagick, only the pixels are scrambled. The scrambled image continues to be recognized as an image and will even display in your web page, though the content appears as gibberish rather than the original image.
+ </p>
+ </div>
+ </div>
-<p>CTR mode requires a unique, non‑repeating IV for every encryption under the same key. Reusing an IV in CTR mode causes keystream reuse, which allows attackers to recover information about the plaintexts by XORing ciphertexts. For this reason, the current deterministic IV construction does not provide cryptographically strong confidentiality.</p>
+ <!-- Encipher an Image Section -->
+ <section id="encipher" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Encipher an Image</h2>
+ <p>
+ Use the <a href="../command-line-options/index.html#encipher">-encipher</a> option to scramble your image so that it is unrecognizable. This option requires a filename containing your passphrase. In this example, we scramble an image and save it in the PNG format:
+ </p>
-<p>To avoid keystream reuse and the resulting information leaks, users would need to supply a different passphrase for every image, which is impractical and still does not meet modern cryptographic expectations. ImageMagick’s encipher feature is therefore suitable only for casual obfuscation, not for security‑sensitive encryption.</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick rose.jpg -encipher passphrase.txt rose.png</samp></pre>
+ </div>
+ </div>
-<p>Currently only ImageMagick can restore your enciphered image content. We
-use a standard cipher and mode so other vendors could support enciphered image content.</p>
+ <p class="mt-3">Here is an example where we encipher an image using another image as the passphrase:</p>
-<p>Some small practical examples of image enciphering can be found in IM
-Examples <a href="https://usage.imagemagick.org/transform/#encipher"
->Encrypting Image Data</a>. </p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick rose.jpg -encipher smiley.gif rose.png</samp></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- Decipher an Image Section -->
+ <section id="decipher" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Decipher an Image</h2>
+ <p>
+ Use the <a href="../command-line-options/index.html#decipher">-decipher</a> option to unscramble your image so that it is recognizable once again. This option also requires a filename containing your passphrase. In this example, we unscramble an image and save it in the JPEG format:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick rose.png -decipher passphrase.txt rose.jpg</samp></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- Caveats Section -->
+ <section id="caveats" class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Encipher and Decipher Caveats</h2>
+
+ <div class="row g-4 mb-4">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Format & Pixel Support</h3>
+ <p class="small text-muted mb-0">
+ Some formats (such as JPEG or GIF) do not support enciphered pixels. To ensure your format is supported, encipher a test image and verify you can restore its original content <var>before</var> processing additional images. Furthermore, because formats may only support 8-bit and RGB (TrueColor), you may want to include options like <code>-depth 8 -type TrueColor</code> before your output filename.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Passphrase Security</h3>
+ <p class="small text-muted mb-0">
+ Passphrases can combine letters and symbols and should be a minimum of 12 characters to help ensure privacy. Ensure your passphrase file permissions prevent unauthorized reading. Additionally, if you lose or forget your passphrase, your original image content is lost forever. Note that ImageMagick only scrambles image pixels; metadata remains untouched and readable.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <h3 class="h5 mt-4 mb-3">Cryptographic Details & Limitations</h3>
+ <p>
+ ImageMagick uses AES in Counter (CTR) mode to scramble an image's pixel data. The current implementation derives both the AES key and the initial counter (IV) deterministically from the user-supplied passphrase: the first half becomes the AES key, while the second half is hashed alongside image dimensions to produce the IV. Because this IV relies solely on the passphrase and dimensions, encrypting multiple images with the same passphrase and dimensions produces identical IVs and keystreams.
+ </p>
+ <p>
+ CTR mode requires a unique, non-repeating IV for every encryption under the same key. Reusing an IV causes keystream reuse, allowing attackers to recover information about plaintexts by XORing ciphertexts. Because of this deterministic IV construction, ImageMagick's encipher feature is suitable only for casual obfuscation rather than security-sensitive encryption. Avoiding keystream reuse would require supplying a unique passphrase per image, which is impractical and falls short of modern cryptographic expectations.
+ </p>
+
+ <div class="card border-0 bg-body-tertiary shadow-sm mt-3 mb-3">
+ <div class="card-body">
+ <h4 class="h6 fw-bold mb-2">Interoperability and Examples</h4>
+ <p class="small text-muted mb-0">
+ Currently, only ImageMagick can restore enciphered image content, though standard ciphers and modes are used so other vendors could theoretically support it. Small practical examples of image enciphering can be found in the IM Examples under <a href="https://usage.imagemagick.org/transform/#encipher">Encrypting Image Data</a>.
+ </p>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/cite/index.html b/www/cite/index.html
index 06d304914..746a77bd0 100644
--- a/www/cite/index.html
+++ b/www/cite/index.html
@@ -11,297 +11,456 @@
<meta name="description" content="">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | How to Cite">
<meta property="og:description" content="">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | How to Cite">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | How to Cite",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/cite/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/cite/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/cite/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">How to Cite</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Learn how to cite ImageMagick in your work. Choose from these citation formats:</p>
-
-<h4>Citation in APA style</h4>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>ImageMagick Studio LLC. (2024). ImageMagick. Retrieved from https://imagemagick.org</code></pre>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">How to Cite</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5"></p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<h4>Citation in Vancouver style</h4>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>1. ImageMagick Studio LLC. ImageMagick [Internet]. 2024. Available from: https://imagemagick.org</code></pre>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
-<h4>Citation in Harvard style</h4>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>ImageMagick Studio LLC, 2024. ImageMagick, Available at: https://imagemagick.org.</code></pre>
-<h4>Citation in Bibtex format</h4>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@software{imagemagick,
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="citation-container">
+ <p class="lead text-body-secondary mb-4">Learn how to cite ImageMagick in your academic work, software documentation, or publications. Choose from the standard citation formats below:</p>
+ <!-- APA Style -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center justify-content-between mb-2">
+ <h5 class="card-title fw-bold text-primary mb-0"><i class="bi bi-journal-text me-2"></i>APA Style</h5>
+ <span class="badge bg-secondary-subtle text-secondary border">Standard</span>
+ </div>
+ <p class="small text-muted mb-3">Best for academic papers in social sciences, education, and psychology.</p>
+ <div class="position-relative">
+ <pre class="p-3 mb-0 rounded bg-body-tertiary border font-mono small"><code>ImageMagick Studio LLC. (2024). ImageMagick. Retrieved from https://imagemagick.org</code></pre>
+ </div>
+ </div>
+ </div>
+ <!-- Vancouver Style -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center justify-content-between mb-2">
+ <h5 class="card-title fw-bold text-primary mb-0"><i class="bi bi-journal-medical me-2"></i>Vancouver Style</h5>
+ <span class="badge bg-secondary-subtle text-secondary border">Medical & Scientific</span>
+ </div>
+ <p class="small text-muted mb-3">Frequently used in biomedical and life sciences literature.</p>
+ <div class="position-relative">
+ <pre class="p-3 mb-0 rounded bg-body-tertiary border font-mono small"><code>1. ImageMagick Studio LLC. ImageMagick [Internet]. 2024. Available from: https://imagemagick.org</code></pre>
+ </div>
+ </div>
+ </div>
+ <!-- Harvard Style -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center justify-content-between mb-2">
+ <h5 class="card-title fw-bold text-primary mb-0"><i class="bi bi-book me-2"></i>Harvard Style</h5>
+ <span class="badge bg-secondary-subtle text-secondary border">Author-Date</span>
+ </div>
+ <p class="small text-muted mb-3">Widely used across humanities, science, and business disciplines.</p>
+ <div class="position-relative">
+ <pre class="p-3 mb-0 rounded bg-body-tertiary border font-mono small"><code>ImageMagick Studio LLC, 1999. ImageMagick, Available at: https://imagemagick.org.</code></pre>
+ </div>
+ </div>
+ </div>
+ <!-- BibTeX Format -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center justify-content-between mb-2">
+ <h5 class="card-title fw-bold text-primary mb-0"><i class="bi bi-code-square me-2"></i>BibTeX Format</h5>
+ <span class="badge bg-primary-subtle text-primary border border-primary-subtle">LaTeX / Bibliography</span>
+ </div>
+ <p class="small text-muted mb-3">For reference managers and LaTeX document preparation systems.</p>
+ <div class="position-relative">
+ <pre class="p-3 mb-0 rounded bg-body-tertiary border font-mono small"><code>@software{imagemagick,
author = {{ImageMagick Studio LLC}},
title = {ImageMagick},
url = {https://imagemagick.org},
- version = {7.1.1},
- date = {2024-01-04},
+ version = {7.1.2},
+ date = {2026-10-20},
}</code></pre>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/clahe/index.html b/www/clahe/index.html
index 836a9befc..b537c2fcf 100644
--- a/www/clahe/index.html
+++ b/www/clahe/index.html
@@ -11,305 +11,490 @@
<meta name="description" content="ImageMagick supports contrast limited adaptive histogram equalization (CLAHE) to improve the contrast in images.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Contrast Limited Adaptive Histogram Equalization">
<meta property="og:description" content="ImageMagick supports contrast limited adaptive histogram equalization (CLAHE) to improve the contrast in images.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Contrast Limited Adaptive Histogram Equalization">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Contrast Limited Adaptive Histogram Equalization",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/clahe/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick supports contrast limited adaptive histogram equalization (CLAHE) to improve the contrast in images.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/clahe/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/clahe/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Contrast Limited Adaptive Histogram Equalization</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Contrast Limited Adaptive Histogram Equalization</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick supports contrast limited adaptive histogram equalization (CLAHE) to improve the contrast in images.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Use contrast limited adaptive histogram equalization (AHE) to improve contrast in images. Ordinary histogram equalization computes a global equalization whereas an adaptive method computes several histograms, each corresponding to a distinct section of the image, and uses them to redistribute the lightness values of the image. It is suitable for improving the local contrast and enhancing the definitions of edges in each region of an image. A variant of adaptive histogram equalization, contrast limited adaptive histogram equalization (CLAHE) limits AHE's tendency to overamplify noise in relatively homogeneous regions of an image.</p>
-<p>CLAHE is supported as of ImageMagick 7.0.8-24 with the <a href="../command-line-options/index.html#clahe">-clahe</a> option:</p>
-<ul>
-<h5><a class="anchor" id="clahe"></a>-clahe <var>width</var>x<var>height</var>{%}{+}<var>number-bins</var>{+}<var>clip-limit</var>{!}</h5>
-</ul>
-<p> The image is divided into tiles of <var>width</var> and <var>height</var> pixels. Append <code>%</code> to define the width and height as percentages of the image's dimensions. The tile size should be larger than the size of features to be preserved and respects the aspect ratio of the image. Add <code>!</code> to force an exact tile width and height. <var>number-bins</var> is the number of histogram bins per tile (min 2, max 65536). The number of histogram bins should be smaller than the number of pixels in a single tile. <var>clip-limit</var> is the contrast limit for localized changes in contrast. A clip-limit of 2 to 3 is a good starting place (e.g. -clahe 50x50%+128+3). Very large values will let the histogram equalization do whatever it wants to do, that is result in maximal local contrast. The value 1 will result in the original image. Note, if the number of bins and the clip-limit are omitted, they default to 128 and no clipping respectively.</p>
-<p>To visualize the benefits of CLAHE, we have a low contrast image of mountains:</p>
-<p>
-<ul>
- <a href="../image/mountains.jpg"><img src="../image/mountains.jpg" width="500" height="333" alt="label" /></a>
-</ul>
-<p>We can improve the image with global histogram equalization:</p>
-<ul>
- <a href="../image/mountains.jpg"><img src="../image/mountains-equalize.jpg" width="500" height="333" alt="label" /></a>
-</ul>
-<p>We can further improve the image with the contrast limited adaptive histogram equalization image processing technique:</p>
-<ul>
- <a href="../image/mountains.jpg"><img src="../image/mountains-clahe.jpg" width="500" height="333" alt="label" /></a>
-</ul>
-<p>The latter image was produced with this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mountains.jpg -clahe 25x25%+128+3 mountains-clahe.jpg</samp></pre>
-<p>The <code>25x25%</code> argument divides the image into 16 tiles to perform local contrast enhancement. The image dimensions are <code>1500x1000</code> so the tiles are exactly <code>375x250</code> pixels each. Rather than a percentage, you can specify the tile dimensions directly with <code>375x250</code>.</p>
-<p>For tile sizes that do not divide evenly into the image dimensions, CLAHE utilizes virtual pixels, as such the results can vary slightly based on your chosen virtual pixel method. For example,</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mountains.jpg -virtual-pixel mirror -clahe 300x300+128+3! mountains-clahe.jpg</samp></pre>
-<p>Notice the <code>!</code>. That forces the tile size to exactly 300x300 pixels, whereas without the <code>!</code>, the tile size respects the aspect ratio of the image and results in tile dimensions of <code>300x200</code>.</p>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ Use contrast limited adaptive histogram equalization (CLAHE) to improve contrast in images. Ordinary histogram equalization computes a global equalization, whereas an adaptive method computes several histograms—each corresponding to a distinct section of the image—to redistribute lightness values. This is ideal for enhancing local contrast and edge definitions. CLAHE introduces a variant that limits AHE's tendency to overamplify noise in homogeneous regions.
+ </p>
+ </div>
+ </div>
-</div>
+ <!-- Syntax & Option Specification -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Syntax and Options</h2>
+ <p>
+ CLAHE is supported as of ImageMagick 7.0.8-24 via the <a href="../command-line-options/index.html#clahe">-clahe</a> option:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <h3 class="h6 font-monospace fw-bold text-body mb-0">
+ <a class="anchor text-decoration-none" id="clahe"></a>-clahe <var>width</var>x<var>height</var>{%}{+}<var>number-bins</var>{+}<var>clip-limit</var>{!}
+ </h3>
+ </div>
+ </div>
+ <p>
+ The image is divided into tiles of specified <var>width</var> and <var>height</var> pixels. Append <code>%</code> to define dimensions as percentages of the image size, or add <code>!</code> to force exact tile dimensions. Tile size should exceed the features you want to preserve while respecting the image's aspect ratio.
+ </p>
+ <p>
+ <var>number-bins</var> specifies histogram bins per tile (ranging from 2 to 65536) and should be smaller than the number of pixels in a single tile. <var>clip-limit</var> controls the localized contrast limit, with values between 2 and 3 serving as an effective starting point (e.g., <code>-clahe 50x50%+128+3</code>). Very large values maximize local contrast, while a value of 1 yields the original image. Omitting bins and clip-limit defaults them to 128 and no clipping, respectively.
+ </p>
+ </section>
+
+ <!-- Visual Examples Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Visual Comparison</h2>
+ <p>To visualize the benefits of CLAHE, examine this low-contrast image of mountains:</p>
+
+ <div class="row g-4 text-center my-3">
+ <div class="col-md-4">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/mountains.jpg"><img src="https://imagemagick.org/image/mountains.jpg" class="img-fluid rounded" alt="Original Mountains" /></a>
+ <p class="small text-muted mt-2 mb-0">Original Image</p>
+ </div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+ </div>
+ <div class="col-md-4">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/mountains-equalize.jpg"><img src="https://imagemagick.org/image/mountains-equalize.jpg" class="img-fluid rounded" alt="Global Histogram Equalization" /></a>
+ <p class="small text-muted mt-2 mb-0">Global Equalization</p>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/mountains-clahe.jpg"><img src="https://imagemagick.org/image/mountains-clahe.jpg" class="img-fluid rounded" alt="CLAHE Enhanced Mountains" /></a>
+ <p class="small text-muted mt-2 mb-0">CLAHE Enhanced</p>
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+
+ <p class="mt-3">The enhanced image on the right was produced with the following command:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick mountains.jpg -clahe 25x25%+128+3 mountains-clahe.jpg</samp></pre>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ <p class="small text-muted">
+ The <code>25x25%</code> argument divides the <code>1500x1000</code> image into 16 tiles measuring exactly <code>375x250</code> pixels each. You can also specify tile dimensions directly rather than using percentages.
+ </p>
+ </section>
+
+ <!-- Virtual Pixels Section -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Virtual Pixels & Tile Alignment</h2>
+ <p>
+ For tile sizes that do not divide evenly into the image dimensions, CLAHE relies on virtual pixels, meaning results can vary slightly depending on your chosen virtual pixel method. For example:
+ </p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick mountains.jpg -virtual-pixel mirror -clahe 300x300+128+3! mountains-clahe.jpg</samp></pre>
+ </div>
+ </div>
+
+ <p class="small text-muted mb-0">
+ Notice the exclamation point (<code>!</code>): it forces an exact tile size of 300x300 pixels, whereas omitting it preserves the image's aspect ratio and results in dimensions of <code>300x200</code>.
+ </p>
+ </section>
+</div>
+
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/color-management/index.html b/www/color-management/index.html
index f54554b2b..528c736be 100644
--- a/www/color-management/index.html
+++ b/www/color-management/index.html
@@ -11,335 +11,514 @@
<meta name="description" content="Master color management in ImageMagick. Learn how sRGB, linear RGB, grayscale, and ICC profiles affect image processing, with practical command examples for accurate conversions and channel handling.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Color Management">
<meta property="og:description" content="Master color management in ImageMagick. Learn how sRGB, linear RGB, grayscale, and ICC profiles affect image processing, with practical command examples for accurate conversions and channel handling.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Color Management">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Color Management",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/color-management/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Master color management in ImageMagick. Learn how sRGB, linear RGB, grayscale, and ICC profiles affect image processing, with practical command examples for accurate conversions and channel handling.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/color-management/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/color-management/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Color Management</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Due to the standardization of sRGB on the Internet, most image formats use SRGB as the default working color space. If the color space of an image is unknown and it is an 8- to 16-bit image format, assuming it is in the sRGB color space is a safe choice. This extends to grayscale as well. We assume non-linear grayscale. These assumptions are overridden if a particular image format includes color space and / or gamma metadata. ImageMagick assumes linear color if the color space is RGB instead of sRGB. You can also override the default color space assumptions with color profiles or the <a href="../command-line-processing/index.html#set">-set</a> option.</p>
-
-<p>ImageMagick supports color profiles, however, for images without a profile or a declaration of colorspace, ImageMagick assumes non-linear sRGB. Most image processing algorithms assume a linear colorspace, therefore it might be prudent to convert to linear color or remove the gamma function before certain image processing algorithms are applied. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick myimage.jpg -colorspace RGB -resize 200% -colorspace sRGB mybigimage.jpg</samp></pre></pre>
-
-<p>To declare that an image is linear RGB rather than sRGB, you can use the set option:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Color Management</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Master color management in ImageMagick. Learn how sRGB, linear RGB, grayscale, and ICC profiles affect image processing, with practical command examples for accurate conversions and channel handling.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick myimage.png -set colorspace RGB myRGBimage.png</samp></pre></pre>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ Due to the standardization of sRGB on the Internet, most image formats use sRGB as the default working color space. If an image's color space is unknown and it is an 8- to 16-bit format, assuming sRGB—and non-linear grayscale—is a safe choice. These assumptions are overridden if the file includes specific color space or gamma metadata, if you apply explicit color profiles, or if you use the <a href="../command-line-processing/index.html#set">-set</a> option.
+ </p>
+ </div>
+ </div>
-<p>Note that declaring an image as linear is not the same as converting the image to linear. Declaring it is linear only sets the meta data and does not change the pixel data. Whereas converting to linear actually changes the pixel data as described in more detail below.</p>
+ <!-- Section 1: Color Profiles & Linear Color -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Color Profiles and Linear Adjustments</h2>
+ <p>
+ For images without a profile or color space declaration, ImageMagick defaults to non-linear sRGB. Because most image processing algorithms perform best in a linear color space, it is often prudent to convert to linear color or remove the gamma function before applying heavy operations. For example:
+ </p>
-<p>Afterwards, the verbose information for the output file lists the colorspace as RGB. This only works on image types containing meta data that distinguishes between linear RGB and non-linear sRGB, such as PNG and GIF. Therefore, if the above command is run with a JPG or TIF output format, the verbose information for the colorspace still shows sRGB. In order to properly have the JPG output know that it is linear RGB, include an appropriate color profile.</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.jpg -colorspace RGB -resize 200% -colorspace sRGB mybigimage.jpg</samp></pre>
+ </div>
+ </div>
+ <h3 class="h5 mt-4 mb-3">Declaring vs. Converting Linear RGB</h3>
+ <p>
+ To declare that an image is linear RGB rather than sRGB without altering its actual pixel data, use the <code>-set</code> option:
+ </p>
-<p>By default, converting color images to grayscale returns non-linear gray. To instead convert to linear gray, use the <a href="../command-line-processing/index.html#set">-set</a> or <a href="../command-line-processing/index.html#intensity">-intensity</a
-> or <a href="../command-line-processing/index.html#grayscale">-grayscale</a> options:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.png -set colorspace RGB myRGBimage.png</samp></pre>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>
-$ magick myimage.png -colorspace LinearGray myRGBimage.png
+ <p class="small text-muted">
+ <strong>Note:</strong> Declaring an image as linear only updates the metadata and leaves pixel data untouched, whereas converting actually changes the pixel values. Verbose file information will list the color space as RGB, though this only works on formats that support distinguishing linear vs. non-linear metadata (such as PNG and GIF). For JPG or TIF output formats, you must include an appropriate color profile to correctly embed linear color awareness.
+ </p>
+ </section>
+
+ <!-- Section 2: Grayscale Conversions -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Grayscale Conversions</h2>
+ <p>
+ Converting color images to grayscale normally yields non-linear gray. To generate linear gray instead, use the <a href="../command-line-processing/index.html#set">-set</a>, <a href="../command-line-processing/index.html#intensity">-intensity</a>, or <a href="../command-line-processing/index.html#grayscale">-grayscale</a> options:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.png -colorspace LinearGray myRGBimage.png
$ magick myimage.png -colorspace RGB -colorspace Gray myRGBimage.png
$ magick myimage.png -intensity Rec709luminance -colorspace gray myRGBimage.png
-$ magick myimage.png -grayscale Rec709luminance myRGBimage.png
-</samp></pre>
-
-<p>Note that LinearGray is new as of Imagemagick 6.9.9-29 and 7.0.7-17.</p>
-
-<p>The same concept is needed when separating channels. Normally, the conversion to separate each channel of an sRGB color image produces separate non-linear grayscale images. However the same concept can be applied, if it is desired to keep the separate channels as linear grayscale. For example, the following produces linear grayscale channels.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick myimage.png -colorspace RGB -separate myimage_channels_%d.png</samp></pre></pre>
-
-<p>When separating and recombining channels, with potential intermediate processing, it is important to identify the colorspace used, especially during the recombination. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick myimage.png -separate myimage_channels_%d.png
-magick myimage_channels_*.png -combine myimage2.png</samp></pre>
-
-<p>In the above example, the separated channels are non-linear and the default for <code>-combine</code> is to assume non-linear channels. So the result is the same as the input.</p>
-
-If one desires to separate to linear grayscale channels, recombine them later back to non-linear color, perhaps after some processing, then use the same concept as above for maintaining linear grayscale:</p>
+$ magick myimage.png -grayscale Rec709luminance myRGBimage.png</samp></pre>
+ </div>
+ </div>
+ <p class="small text-muted">Note: <code>LinearGray</code> is available as of ImageMagick 6.9.9-29 and 7.0.7-17.</p>
+ </section>
+
+ <!-- Section 3: Channel Separation and Recombination -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Channel Separation and Recombination</h2>
+ <p>
+ When separating channels from an sRGB image, the default output produces non-linear grayscale images. If you wish to keep them as linear grayscale channels for processing, configure the color space beforehand:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.png -colorspace RGB -separate myimage_channels_%d.png</samp></pre>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick myimage.png -set colorspace RGB -separate myimage_channels_%d.png
-magick myimage_channels_*.png -set colorspace RGB -combine -colorspace sRGB myimage2.png
-</samp></pre>
+ <p class="mt-3">
+ When performing intermediate processing between separation and recombination, tracking the color space is crucial:
+ </p>
-<p>When converting to another colorspace and back, such as between sRGB and HSL, the following two commands handle the first case of non-linear channels and the second case of linear channels:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.png -separate myimage_channels_%d.png
+$ magick myimage_channels_*.png -combine myimage2.png</samp></pre>
+ </div>
+ </div>
+ <p class="small text-muted">In the example above, channels are non-linear, and <code>-combine</code> defaults to assuming non-linear channels, resulting in an output identical to the input.</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick myimage.png -colorspace HSL -separate myimage_channels_%d.png
-magick myimage_channels_*.png -set colorspace HSL -combine -colorspace sRGB myimage2.png</samp></pre>
+ <p class="mt-3">
+ To separate into linear grayscale channels, process them, and then recombine them back into a non-linear color image, use this pattern:
+ </p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick myimage.png -set colorspace RGB -colorspace HSL -separate myimage_channels_%d.png
-magick myimage_channels_*.png -set colorspace HSL -combine -colorspace RGB -set colorspace sRGB myimage2.png</samp></pre>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.png -set colorspace RGB -separate myimage_channels_%d.png
+$ magick myimage_channels_*.png -set colorspace RGB -combine -colorspace sRGB myimage2.png</samp></pre>
+ </div>
+ </div>
-<p>A majority of the image formats assume an sRGB colorspace (e.g. JPEG, PNG, etc.). A few support only linear RGB (e.g. EXR, DPX, CIN, HDR) or only linear GRAY. A few formats support CMYK. For example JPG does, but PNG does not. Then there is the occasional format that also supports LAB (that is CieLAB) (e.g. TIFF, PSD, JPG, JP2). For additional information, see the <a href="../formats/index.html#colorspace" >Colorspace</a> and <a href="../formats/index.html#supported" >Supported Formats</a> pages.</p>
+ <h3 class="h5 mt-4 mb-3">Cross-Color Space Handling (e.g., HSL)</h3>
+ <p>The following commands handle non-linear vs. linear channel workflows when converting between sRGB and HSL:</p>
-<p>When specifying individual colors as <code>rgb(...)</code> or hex, these colors will still be interpreted as non-linear, that is, as sRGB colors. However if one wants to create linear colors, use <code>icc-color(rgb,r,g,b)"</code>, where <code>r</code>, <code>g</code>, and <code>b</code> are in the range 0 to 1. See the <a href="../color/index.html" >Color</a> page.</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick myimage.png -colorspace HSL -separate myimage_channels_%d.png
+$ magick myimage_channels_*.png -set colorspace HSL -combine -colorspace sRGB myimage2.png
+$ magick myimage.png -set colorspace RGB -colorspace HSL -separate myimage_channels_%d.png
+$ magick myimage_channels_*.png -set colorspace HSL -combine -colorspace RGB -set colorspace sRGB myimage2.png</samp></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- Section 4: Format Support & Custom Colors -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Format Support and Linear Color Creation</h2>
+ <p>
+ While most image formats (like JPEG and PNG) assume an sRGB color space, some support only linear RGB (such as EXR, DPX, CIN, and HDR), linear GRAY, or CMYK (like JPG, but not PNG). Occasional formats also support LAB (CieLAB) like TIFF, PSD, JPG, and JP2. For further details, consult the <a href="../formats/index.html#colorspace">Colorspace</a> and <a href="../formats/index.html#supported">Supported Formats</a> pages.
+ </p>
+
+ <p class="mt-3">
+ When specifying individual colors using <code>rgb(...)</code> or hex notation, they are interpreted as non-linear sRGB. If you need to explicitly create linear colors, use the <code>icc-color(rgb,r,g,b)</code> syntax (where components range from 0 to 1). See the <a href="../color/index.html">Color</a> page for more information.
+ </p>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/color-thresholding/index.html b/www/color-thresholding/index.html
index fd77ac095..d2cd3baa7 100644
--- a/www/color-thresholding/index.html
+++ b/www/color-thresholding/index.html
@@ -11,346 +11,505 @@
<meta name="description" content="ImageMagick supports color thresholding, a technique to segment images by color.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Color Thresholding">
<meta property="og:description" content="ImageMagick supports color thresholding, a technique to segment images by color.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Color Thresholding">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Color Thresholding",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/color-thresholding/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick supports color thresholding, a technique to segment images by color.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/color-thresholding/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/color-thresholding/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Color Thresholding</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p>Use color thresholding to specify a color range and return a black and white image. All colors between the start and stop colors (inclusively) become white and the rest of the image pixels become black. The two colors are separated with a hyphen between them. Thresholding, by default, take place in the sRGB colorspace. Use the <code>-colorspace</code> to perform the thresholding in an alternative colorspace (currently limited to sRGB, Gray, HSV, HSL, HCL, HSB, and HSW). Start and stop colors can be specified in any colorspace (recognized by ImageMagick), but in general, we advise you specify them in the colorspace corresponding to the <code>-colorspace</code> option. For colorspace Gray, be sure to use a start value lower than the stop value. Note that Hue is cyclical -- 0 and 360 are the same. However, a range of colors that spans hue = 0 may still be useful, if the start hue value is higher than the stop hue value.</p>
-
-<p>Caution is advised when mixing the colorspace of the start and stop colors and that of the image. A large range in one colorspace may map to only a narrow range in another colorspace. For example, one might naively think that <code>sRGB(0,0,0)</code> to <code>sRGB(255,255,255)</code> would produce a white image, catching all colors, even when using -colorspace HSV. But these two colors are black and white and so map only to a range of grayscale as <code>hsv(0,0%,0%)</code> and <code>hsv(0,0%,100%)</code>. For a color image, you would likely not find too many gray pixels.</p>
-
-<p>To illustrate how color thresholding performs, use this image:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick <var>input-image</var> -colorspace <var>XXX</var> -color-threshold <var>"start - stop"</var> <var>output-image</var></samp></pre>
-
-<p>The following are some typical examples of use:</p>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/color-thresholding.jpg" alt="[Color Thresholding]" width="265" height="333" name="color-thresholding" /></ul>
-
-<p>Start by choosing one sRGB color (somewhere on the image -- in this case the yellow of the flowers) and offset it low and high to form two sRGB colors. The lower values form the start color and the higher values form the stop color. Begin with <code>sRGB(183,132,20)</code>. Offset its values by +-20 to identify the start color (-) and the stop color (+); namely, R=183+-20, G=132+-20, and B=40+-20:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick monet.jpg -color-threshold 'sRGB(163,112,0)-sRGB(203,152,40)' monet.gif</samp></pre>
-
-<p>this returns the outline of the yellow flower petals:</p>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/color-thresholding-hsv.gif" alt="[Color Thresholding]" width="265" height="333" name="color-thresholding" /></ul>
-
-<p>Now, pick two RGB colors: <code>sRGB(159,150,0)</code> and <code>sRGB(205,100,45):</code></p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$magick monet.jpg -color-threshold 'sRGB(159,150,0)-sRGB(205,100,45)' monet.gif</samp></pre></ul>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/color-thresholding-rgb.gif" alt="[Color Thresholding]" width="265" height="333" name="color-thresholding" /></ul>
-
-<p>Next, select one sRGB color and convert it to HSV and offset its values low and high to generate the start and stop HSV colors. Use -colorspace HSV to convert the image to HSV. For our HSV example, we pick <code>sRGB(183,132,20)</code> and convert to HSV:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Color Thresholding</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick supports color thresholding, a technique to segment images by color.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="code">
-magick xc:"srgb(183,132,20)" -colorspace HSV txt:
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="color-thresholding-container">
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-3">
+ Use color thresholding to specify a color range and return a black and white image. All colors between the start and stop colors (inclusively) become white and the rest of the image pixels become black. The two colors are separated with a hyphen between them.
+ </p>
+ <p class="mb-0 text-body-secondary">
+ Thresholding, by default, takes place in the sRGB colorspace. Use the <code>-colorspace</code> option to perform the thresholding in an alternative colorspace (currently limited to sRGB, Gray, HSV, HSL, HCL, HSB, and HSW). Start and stop colors can be specified in any colorspace recognized by ImageMagick, but in general, we advise you specify them in the colorspace corresponding to the <code>-colorspace</code> option. For colorspace Gray, be sure to use a start value lower than the stop value. Note that Hue is cyclical — 0 and 360 are the same. However, a range of colors that spans hue = 0 may still be useful if the start hue value is higher than the stop hue value.
+ </p>
+ </div>
+ <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center gap-2 mb-5" role="alert">
+ <i class="bi bi-exclamation-triangle-fill fs-5"></i>
+ <div>
+ <strong>Caution:</strong> Exercise caution when mixing the colorspace of the start and stop colors with that of the image. A large range in one colorspace may map to only a narrow range in another colorspace. For example, one might naively think that <code>sRGB(0,0,0)</code> to <code>sRGB(255,255,255)</code> would produce a white image, catching all colors, even when using <code>-colorspace HSV</code>. But these two colors are black and white and so map only to a range of grayscale as <code>hsv(0,0%,0%)</code> and <code>hsv(0,0%,100%)</code>. For a color image, you would likely not find too many gray pixels.
+ </div>
+ </div>
+ <!-- General Syntax -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4" id="syntax">Basic Syntax</h2>
+ <p>To illustrate how color thresholding performs, use this general command structure:</p>
+
+ <pre class="p-3 mb-4 rounded bg-body-tertiary border font-mono small"><code>$ magick <var>input-image</var> -colorspace <var>XXX</var> -color-threshold <var>"start - stop"</var> <var>output-image</var></code></pre>
+ <!-- Examples Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="examples">Examples of Use</h2>
+ <p class="text-body-secondary mb-4">The following are typical examples demonstrating color thresholding in various colorspaces.</p>
+ <!-- Example 1 -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-1-circle me-2"></i>Example 1: sRGB Color Range & Flowers</h5>
+ <p>Start by choosing one sRGB color (somewhere on the image — in this case, the yellow of the flowers) and offset it low and high to form two sRGB colors. The lower values form the start color and the higher values form the stop color. Begin with <code>sRGB(183,132,20)</code>. Offset its values by ±20 to identify the start color (-) and the stop color (+); namely, R=183±20, G=132±20, and B=40±20:</p>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/color-thresholding.jpg" alt="[Color Thresholding Original]" width="265" height="333" />
+ <div class="small text-muted font-mono mt-1">Input Image (monet.jpg)</div>
+ </div>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick monet.jpg -color-threshold 'sRGB(163,112,0)-sRGB(203,152,40)' monet.gif</code></pre>
+
+ <p class="mb-3">This returns the outline of the yellow flower petals:</p>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/color-thresholding-hsv.gif" alt="[Color Thresholding Result]" width="265" height="333" />
+ <div class="small text-muted font-mono mt-1">Result Image</div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 2 -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-2-circle me-2"></i>Example 2: Specific RGB Colors</h5>
+ <p>Now, pick two RGB colors: <code>sRGB(159,150,0)</code> and <code>sRGB(205,100,45)</code>:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick monet.jpg -color-threshold 'sRGB(159,150,0)-sRGB(205,100,45)' monet.gif</code></pre>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/color-thresholding-rgb.gif" alt="[Color Thresholding Result]" width="265" height="333" />
+ <div class="small text-muted font-mono mt-1">Result Image</div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 3 -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-3-circle me-2"></i>Example 3: HSV Colorspace Thresholding</h5>
+ <p>Next, select one sRGB color and convert it to HSV, offsetting its values low and high to generate the start and stop HSV colors. Use <code>-colorspace HSV</code> to convert the image to HSV. For our HSV example, we pick <code>sRGB(183,132,20)</code> and convert to HSV:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick xc:"srgb(183,132,20)" -colorspace HSV txt:
# ImageMagick pixel enumeration: 1,1,65535,hsv
-0,0: (41.227,89.071%,71.7647%) #1D51E405B7B7 hsv(41.227,89.071%,71.7647%)
-</pre>
-
-<p>Now, offset its HSV values as H=41+-20, S=89+-10, and V=72+-10, to create the start color (-) and stop color (+):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick monet.jpg -colorspace HSV -color-threshold 'hsv(21,79%,62%)-hsv(61,99%,85%)' monet.gif</samp></pre>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/color-thresholding-rgb.gif" alt="[Color Thresholding]" width="265" height="333" name="color-thresholding" /></ul>
-
-<p>Next, pick two RGB colors. Use <code>-colorspace HSV</code> to convert the image to HSV, and apply the RGB start and stop colors. Choose <code>sRGB(158,77,33)</code> and <code>sRGB(213,217,2)</code>:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick monet.jpg -colorspace HSV -color-threshold "sRGB(158,77,33)-sRGB(213,217,2)" monet.gif</samp></pre>
-
-<p>Here is the expected results:</p>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/color-thresholding-hsv-rgb.gif" alt="[Color Thresholding]" width="265" height="333" name="color-thresholding" /></ul>
-
-<p>Next, choose two sRGB colors and convert them to gray. Now convert the image to gray and use the gray thresholding colors.</p>
-
-<pre class="code">
-magick xc:"sRGB(159,150,0)" -colorspace gray txt:
+0,0: (41.227,89.071%,71.7647%) #1D51E405B7B7 hsv(41.227,89.071%,71.7647%)</code></pre>
+ <p>Now, offset its HSV values as H=41±20, S=89±10, and V=72±10, to create the start color (-) and stop color (+):</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick monet.jpg -colorspace HSV -color-threshold 'hsv(21,79%,62%)-hsv(61,99%,85%)' monet.gif</code></pre>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/color-thresholding-rgb.gif" alt="[Color Thresholding Result]" width="265" height="333" />
+ <div class="small text-muted font-mono mt-1">Result Image</div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 4 -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-4-circle me-2"></i>Example 4: Mixing HSV and RGB</h5>
+ <p>Next, pick two RGB colors. Use <code>-colorspace HSV</code> to convert the image to HSV, and apply the RGB start and stop colors. Choose <code>sRGB(158,77,33)</code> and <code>sRGB(213,217,2)</code>:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick monet.jpg -colorspace HSV -color-threshold "sRGB(158,77,33)-sRGB(213,217,2)" monet.gif</code></pre>
+ <p>Here is the expected result:</p>
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/color-thresholding-hsv-rgb.gif" alt="[Color Thresholding Result]" width="265" height="333" />
+ <div class="small text-muted font-mono mt-1">Result Image</div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 5 -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-5-circle me-2"></i>Example 5: Grayscale Thresholding</h5>
+ <p>Next, choose two sRGB colors and convert them to gray. Now convert the image to gray and use the gray thresholding colors.</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick xc:"sRGB(159,150,0)" -colorspace gray txt:
# ImageMagick pixel enumeration: 1,1,65535,gray
0,0: (36259.1) #8DA38DA38DA3 gray(55.3278%)
-
-magick xc:"sRGB(205,100,45)" -colorspace gray txt:
+$ magick xc:"sRGB(205,100,45)" -colorspace gray txt:
# ImageMagick pixel enumeration: 1,1,65535,gray
-0,0: (30418.2) #76D276D276D2 gray(46.4152%)
-</pre>
-
-<p>Notice that the start intensity must be smaller than stop intensity:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick monet.jpg -colorspace gray -color-threshold 'gray(46.4152%)-gray(55.3278%)' monet.gif</samp></pre>
-
-<p>Here is the results of the color thresholding operation:</p>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/color-thresholding-gray.gif" alt="[Color Thresholding]" width="265" height="333" name="Color Thresholding" /></ul>
+0,0: (30418.2) #76D276D276D2 gray(46.4152%)</code></pre>
+ <p>Notice that the start intensity must be smaller than the stop intensity:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick monet.jpg -colorspace gray -color-threshold 'gray(46.4152%)-gray(55.3278%)' monet.gif</code></pre>
+ <p>Here is the result of the color thresholding operation:</p>
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/color-thresholding-gray.gif" alt="[Color Thresholding Result]" width="265" height="333" />
+ <div class="small text-muted font-mono mt-1">Result Image</div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/color/index.html b/www/color/index.html
index 646dc32db..b6382cdb5 100644
--- a/www/color/index.html
+++ b/www/color/index.html
@@ -11,238 +11,342 @@
<meta name="description" content="Discover ImageMagick’s comprehensive list of color names and specifications. Learn how to define colors using names, RGB, RGBA, HSL, HSB, CMYK, Lab, and ICC models, with examples and conversion tools for precise image editing.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Color Names">
<meta property="og:description" content="Discover ImageMagick’s comprehensive list of color names and specifications. Learn how to define colors using names, RGB, RGBA, HSL, HSB, CMYK, Lab, and ICC models, with examples and conversion tools for precise image editing.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Color Names">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Color Names",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/color/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover ImageMagick’s comprehensive list of color names and specifications. Learn how to define colors using names, RGB, RGBA, HSL, HSB, CMYK, Lab, and ICC models, with examples and conversion tools for precise image editing.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/color/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/color/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Color Names</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<div id="cli-examples"></div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#models">Color Model Specification</a> • <a href="#color_names">List of Color Names</a></p>
-
-<p class="lead">A number of ImageMagick options and methods take a color as an argument. The color can then be given as a color name (there is a limited but large set of these; see below) or it can be given as a set of numbers (in decimal or hexadecimal), each corresponding to a channel in an RGB or RGBA color model. HSL, HSLA, HSB, HSBA, CMYK, or CMYKA color models may also be specified. These topics are briefly described in the sections below.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Color Names</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover ImageMagick’s comprehensive list of color names and specifications. Learn how to define colors using names, RGB, RGBA, HSL, HSB, CMYK, Lab, and ICC models, with examples and conversion tools for precise image editing.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Page Header & Quick Navigation -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ A wide range of ImageMagick options and methods accept colors as arguments. Colors can be defined via standard names, decimal/hexadecimal RGB/RGBA triplets, or advanced models like HSL, HSB, CMYK, Lab, and ICC.
+ </p>
+ <div class="d-flex flex-wrap gap-2 pt-2 border-top">
+ <a href="#usage" class="btn btn-outline-secondary btn-sm">Example Usage</a>
+ <a href="#models" class="btn btn-outline-secondary btn-sm">Color Model Specification</a>
+ <a href="#color_names" class="btn btn-outline-secondary btn-sm">List of Color Names</a>
+ </div>
+ </div>
+ </div>
-<p>Each of the following commands produces the same <var>lime</var> border around the image. (Use "double quotes" for Windows.)</p>
+ <!-- Example Usage Section -->
+ <section id="usage" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Example Usage</h2>
+ <p>Each of the following commands produces the same <var class="text-success fw-semibold">lime</var> border around the image. <span class="text-muted fst-italic">(Use double quotes for Windows.)</span></p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -bordercolor lime -border 10 image.jpg image.png
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick -bordercolor lime -border 10 image.jpg image.png
$ magick -bordercolor '#0f0' -border 10 image.jpg image.png
$ magick -bordercolor '#00ff00' -border 10 image.jpg image.png
$ magick -bordercolor 'rgb(0,255,0)' -border 10 image.jpg image.png
$ magick -bordercolor 'rgb(0,100%,0)' -border 10 image.jpg image.png</samp></pre>
+ </div>
+ </div>
-<p>The list of recognized color names (for example, <var>aqua</var>, <var>black</var>, <var>blue</var>, <var>fuchsia</var>, <var>gray</var>, <var>green</var>, <var>lime</var>, <var>maroon</var>, <var>navy</var>, <var>olive</var>, <var>purple</var>, <var>red</var>, <var>silver</var>, <var>teal</var>, <var>white</var>, <var>yellow</var>, and others) is shown in a table further below.</p>
-
-<h2><a class="anchor" id="models"></a>Color Model Specification</h2>
+ <p class="text-muted small">
+ Recognized color names include common choices like <var>aqua</var>, <var>black</var>, <var>blue</var>, <var>fuchsia</var>, <var>gray</var>, <var>green</var>, <var>lime</var>, <var>maroon</var>, <var>navy</var>, <var>olive</var>, <var>purple</var>, <var>red</var>, <var>silver</var>, <var>teal</var>, <var>white</var>, <var>yellow</var>, and many more detailed in the table below.
+ </p>
+ </section>
-<p>The sRGB, CMYK, HSL and HSB color models are used in numerical color specifications. These examples all specify the same red sRGB color:</p>
+ <!-- Color Model Specification Section -->
+ <section id="models" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Color Model Specification</h2>
+ <p>Numerical color specifications support sRGB, CMYK, HSL, and HSB models. For example, all of the following specify the exact same shade of red in sRGB:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>#f00 4-bit #rgb
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-4">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary small"><code>#f00 4-bit #rgb
#ff0000 8-bit #rrggbb
#ff0000ff 8-bit #rrggbbaa
#fff000000 12-bit #rrrgggbbb
@@ -252,4901 +356,5611 @@ $ magick -bordercolor 'rgb(0,100%,0)' -border 10 image.jpg image.png</samp></pre
32-bit #rrrrrrrrggggggggbbbbbbbbaaaaaaaa
rgb(255, 0, 0) an integer in the range 0—255 for each component
rgb(100.0%, 0.0%, 0.0%) a float in the range 0—100% for each component</code></pre>
+ </div>
+ </div>
-<p>The format of an sRGB value in hexadecimal notation is a '#' immediately followed by 3-32 hexadecimal characters. The three-digit sRGB notation (#rgb) is converted into six-digit form (#rrggbb) by replicating digits, not by adding zeros. For example, #fb0 expands to #ffbb00. This ensures that white (#ffffff) can be specified with the short notation (#fff) and removes any dependencies on the color depth of the image. Use the hexadecimal notation whenever performance is an issue. ImageMagick does not need to load the expansive color table to interpret a hexadecimal color, e.g., <code>#000000</code>, but it does if <code>black</code> is used instead.</p>
-
-<p>The format of an sRGB value in the functional notation is 'rgb(<var>r</var>,<var>g</var>,<var>b</var>)', where <var>r</var>, <var>g</var>, and <var>b</var> are either three integer or float values in the range 0—255 or three integer or float percentage values in the range 0—100%. The value 255 corresponds to 100%, and to #F or #FF in the hexadecimal notation: rgb(255, 255, 255) = rgb(100%, 100%, 100%) = #FFF = #FFFFFF. Note, as of ImageMagick 7.0.10-53, the commas are no longer necessary and the slash can proceed the alpha value, e.g. <code>rgb(255 128 0 / 50%)</code>.</p>
-
-<p>White space characters are allowed around the numerical values, at least if the entire color argument is enclosed in quotes ('single quotes' for Linux-like systems, "double quotes" for Windows).</p>
-
-<p>The sRGB color model is extended in this specification to include <var>alpha</var> to allow specification of the transparency of a color. These examples all specify the same color:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>rgb(255, 0, 0) range 0 - 255
-rgba(255, 0, 0, 1.0) the same, with an explicit alpha value
-rgb(100%, 0%, 0%) range 0.0% - 100.0%
-rgba(100%, 0%, 0%, 1.0) the same, with an explicit alpha value</code></pre>
-
-<p>The format of an RGBA value in the functional notation is 'rgba(<var>r</var>,<var>g</var>,<var>b</var>,<var>a</var>)', where <var>r</var>, <var>g</var>, and <var>b</var> are as described above for the RGB functional notation, and where the alpha value <var>a</var> ranges from 0.0 (fully transparent) to 1.0 (fully opaque).</p>
-
-<p>There is also a color called 'none' that is fully transparent. This color is shorthand for <code>rgba(0, 0, 0, 0.0)</code>.</p>
-
-<p>Non-linear gray values are conveniently defined with a name, single intensity value or an intensity value and an alpha value:</p>
+ <div class="row g-4 mb-4">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Hexadecimal Notation</h3>
+ <p class="small text-muted mb-0">
+ Hex values start with <code>#</code> followed by 3 to 32 characters. Three-digit notation (<code>#rgb</code>) expands by doubling digits (e.g., <code>#fb0</code> becomes <code>#ffbb00</code>). <strong>Tip:</strong> Use hexadecimal notation for optimal performance since ImageMagick can parse them directly without loading the expansive color lookup table.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Functional Notation & Alpha</h3>
+ <p class="small text-muted mb-0">
+ Functional colors use syntax like <code>rgb(r, g, b)</code> or percentages. As of ImageMagick 7.0.10-53, commas are optional, and alpha transparency can be specified using a slash separator (e.g., <code>rgb(255 128 0 / 50%)</code>). Use <code>none</code> as a quick shorthand for fully transparent black (<code>rgba(0, 0, 0, 0.0)</code>).
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>
-gray50 near mid gray
+ <h3 class="h5 mt-4 mb-3">Grayscale Values</h3>
+ <p>Non-linear gray values can be defined via names, single intensities, or alpha variants:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-4">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>gray50 near mid gray
gray(127) near mid gray
gray(50%) mid gray
graya(50%, 0.5) semi-transparent mid gray</code></pre>
+ </div>
+ </div>
+ <p class="small text-muted">For linear gray values, chain with <code>-colorspace RGB -colorspace Gray</code> or use <code>-colorspace LinearGray</code> (available in ImageMagick 6.9.9-29 and 7.0.7-17+).</p>
+
+ <h3 class="h5 mt-4 mb-3">HSL and HSB Color Models</h3>
+ <p>
+ ImageMagick supports hue-saturation-lightness (HSL) and hue-saturation-brightness (HSB) models as intuitive alternatives to sRGB. Hue represents a color angle from 0 to 360 degrees (red=0/360, green=120, blue=240), while saturation, brightness, and lightness are specified as values from 0—255 or percentages (0—100%).
+ </p>
+
+ <div class="row g-4 mb-4">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h4 class="h6 fw-bold text-body mb-2">HSB Examples (Cone Model)</h4>
+ <pre class="mb-0 font-monospace text-body-secondary small"><code>hsb(0, 100%, 100%) full red
+hsb(120, 100%, 100%) full green
+hsb(120, 100%, 50%) dark green
+hsb(120, 50%, 50%) pastel green</code></pre>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h4 class="h6 fw-bold text-body mb-2">HSL Examples (Double-Cone Model)</h4>
+ <pre class="mb-0 font-monospace text-body-secondary small"><code>hsl(0, 100%, 50%) full red
+hsl(120, 100%, 100%) white
+hsl(120, 100%, 50%) full green
+hsl(120, 50%, 50%) medium green</code></pre>
+ </div>
+ </div>
+ </div>
+ </div>
-<p>For linear gray values add -colorspace RGB -colorspace Gray or -colorspace LinearGray when creating gray colors. The latter is new as of Imagemagick 6.9.9-29 and 7.0.7-17.</p>
-
-<p>The ImageMagick color model also supports hue-saturation-lightness (HSL) and hue-saturation-brightness (HSB) colors as a complement to numerical sRGB colors. HSL colors are encoding as a triple (hue, saturation, lightness). Likewise HSB colors are encoding as a triple (hue, saturation, brightness). HSL or HSB triples are either direct values (hue 0—360, saturation 0—255, lightness or brightness 0—255) or with S,L,B as percentage values relative to these ranges.</p>
-
-<p>The HSB color system is geometrically represented as a cone with its apex pointing downward. Hue is measured around the perimeter. Saturation is measured from the axis outward. Brightness is measured from the apex upward.</p>
-
-<p>The HSL color system is geometrically represented as a stacked double cone with one apex pointing downward and the other pointing upward. The widest ends of both cones are stacked together one on top of the other. Hue is measured around the perimeter. Saturation is measured from the axis outward. Lightness is measured from the bottom apex upward.</p>
-
-<p>See <a href="https://en.wikipedia.org/wiki/HSL_and_HSV">https://en.wikipedia.org/wiki/HSL_and_HSV</a> for more details on HSL and HSB color systems.</p>
-
-<p>Hue is represented as an angle of the color around the circular perimeter of the cone(s) (i.e. the rainbow represented in a circle). Hue values are integers or floats in the range 0—360. By definition red=0=360, and the other colors are spread around the circle, so green=120, blue=240, etc. As an angle, it implicitly wraps around such that -120=240 and 480=120, for instance. (Students of trigonometry would say that "coterminal angles are equivalent" here; an angle <var>θ</var> can be standardized by computing the equivalent angle, <var>θ</var> mod 360.)</p>
-
-<p>Saturation is measure outward from the central axis of the cone(s) toward the perimeter of the cone(s). Saturation may be expressed as an integer or float in the range 0—255 or as an integer or float percentage in the range 0—100. Saturation may be thought of as the absence of any "white" mixed with the base color. Thus 255 or 100% is full saturation and corresponds to a point on the outside surface of the cone (HSB) or double cone (HSL). It will be the most "colorful" region. 0 or 0% is no saturation which results in some shade of gray. It occurs along the central axis of the cone or double cone with black at the bottom apex and white at the top.</p>
-
-<p>Brightness and Lightness also may be represented as integers or floats in the range 0—255 or as integer or float percentages in the range 0—100%. Brightness and Lightness are measured from the bottom apex upward to the top of the cone or double cone along the cone(s) central axis. 0 or 0% corresponds to the bottom apex and 255 or 100% corresponds to the top center of the cone for Brightness and to the top apex of the double cone for Lightness.</p>
-
-<p>The HSB color system is a little easier to understand than the HSL color system. In the HSB color system, black is at the bottom apex and white is at the top center of the cone on the central axis. The most colorful or saturated colors will then be at the outer edge of the top of the cone at the widest part. Thus at Saturation=100% and Brightness=100%</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>hsb(0, 100%, 100%) or hsb(0, 255, 255) full red
-hsb(120, 100%, 100%) or hsb(120, 255, 255) full green
-hsb(120, 100%, 75%) or hsb(120, 255, 191.25) medium green
-hsb(120, 100%, 50%) or hsb(120, 255, 127.5) dark green
-hsb(120, 100%, 25%) or hsb(120, 255, 63.75) very dark green
-hsb(120, 50%, 50%) or hsb(120, 127.5, 127.5) pastel green</code></pre>
-
-<p>In the HSL color system, black is at the bottom apex and white is at the top apex. However, saturation is largest at the middle of the double cone on its outer perimeter and thus at a lightness value of 50%. The most colorful or saturated colors will then be at the outer edge of the double cone at its widest part. Thus at Saturation=100% and Brightness=50%</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>hsl(0, 100%, 50%) or hsl(0, 255, 127.5) full red
-hsl(120, 100%, 100%) or hsl(120, 255, 255) white
-hsl(120, 100%, 75%) or hsl(120, 255, 191.25) pastel green
-hsl(120, 100%, 50%) or hsl(120, 255, 127.5) full green
-hsl(120, 100%, 25%) or hsl(120, 255, 63.75) dark green
-hsl(120, 50%, 50%) or hsl(120, 127.5, 127.5) medium green</code></pre>
-
-<p>One advantage of HSB or HSL over RGB is that it can be more intuitive: you can guess at the colors you want, and then tweak. It is also easier to create sets of matching colors (by keeping the hue the same and varying the brightness or lightness and saturation, for example).</p>
-
-<p>Just as the 'rgb()' functional notation has the 'rgba()' alpha counterpart, the 'hsl()' and 'hsb()' functional notations have their 'hsla()' 'hsba()' alpha counterparts. These examples specify the same color:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>hsb(120, 100%, 100%) full green in hsb
-hsba(120, 100%, 100%, 1.0) the same, with an alpha value of 1.0
-hsb(120, 255, 255) full green in hsb
-hsba(120, 255, 255, 1.0) the same, with an alpha value of 1.0
-
-hsl(120, 100%, 50%) full green in hsl
-hsla(120, 100%, 50%, 1.0) the same, with an alpha value of 1.0
-hsl(120, 255, 127.5) full green in hsl
-hsla(120, 255, 127.5, 1.0) the same, with an alpha value of 1.0</code></pre>
-
-<p>For ImageMagick between 6.5.6-6 and 6.9.2-0, HSL (HSB) could only be specified with Hue as percent in range 0—100%, when Saturation and Lightness (Brightness) were also specified as percent in range 0—100%.</p>
-
-<p>Specify the Lab colors like this:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>cielab(62.253188, 23.950124, 48.410653)</code></pre>
-<p>Note, the <code>a</code> and <code>b</code> components of any Lab color you specify are biased internally by 50% to ensure it fits in the quantum range (typically 0 to 65535). The bias is retained when writing to the TIFF and MIFF image formats. However, the TXT format supports negative pixel values so the bias is removed when writing to this format:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick xc:cyan -colorspace LAB txt:
+ <h3 class="h5 mt-4 mb-3">Advanced Color Spaces: Lab, ICC, and Device Colors</h3>
+ <p>Specify CIE Lab colors directly or examine their internal quantum bias using the text format handler:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>cielab(62.253188, 23.950124, 48.410653)</code></pre>
+ </div>
+ </div>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick xc:cyan -colorspace LAB txt:
# ImageMagick pixel enumeration: 1,1,65535,cielab
0,0: (59711,20409.5,-3632.9) #E93F4FBA71CF cielab(91.1132,-48.0855,-14.1358)
$ magick -size 100x100 xc:"cielab(91.1132,-48.0855,-14.1358)" -colorspace sRGB cyan.png</samp></pre>
+ </div>
+ </div>
-<p>Or specify colors generically with the <code>icc-color</code> keyword, for example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>
-icc-color(cmyk, 0.11, 0.48, 0.83, 0.00) cmyk
-icc-color(rgb, 1, 0, 0) linear rgb
-icc-color(rgb, red) linear rgb
+ <p class="mt-3">You can also specify generic colors via the <code>icc-color</code> keyword or uncalibrated device values:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>icc-color(cmyk, 0.11, 0.48, 0.83, 0.00) cmyk
+icc-color(srgb, 1, 0, 0) non-linear rgb
icc-color(lineargray, 0.5) linear gray
-icc-color(srgb, 1, 0, 0) non-linear rgb
-icc-color(srgb, red) non-linear rgb
-icc-color(gray, 0.5) non-linear gray
-</code></pre>
-<p>Or specify uncalibrated device colors with the <code>device-</code> keyword, for example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>device-gray(0.5)
+device-gray(0.5)
device-rgb(0.5, 1.0, 0.0)
device-cmyk(0.11, 0.48, 0.83, 0.00)</code></pre>
+ </div>
+ </div>
+ <p class="text-muted small">ImageMagick also natively supports wide-gamut color spaces such as <code>Lab</code>, <code>LCH</code>, and <code>Display-P3</code>.</p>
+ </section>
+
+ <!-- List of Color Names Section -->
+ <section id="color_names" class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">List of Color Names</h2>
+ <p class="text-muted">The reference table below lists named colors recognized by ImageMagick along with their corresponding RGB values and hex codes:</p>
+
+ <div class="card border-0 shadow-sm">
+ <div class="card-body p-0">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-sm table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top">
+ <tr>
+ <th class="ps-3">Name</th>
+ <th class="text-center" style="width: 140px;">Swatch</th>
+ <th>RGB</th>
+ <th class="pe-3">Hex</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 fw-medium">snow</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 250, 250)">snow</div>
+ </td>
+ <td>rgb(255, 250, 250)</td>
+ <td class="pe-3 font-monospace">#FFFAFA</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">snow1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 250, 250)">snow1</div>
+ </td>
+ <td>rgb(255, 250, 250)</td>
+ <td class="pe-3 font-monospace">#FFFAFA</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">snow2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 233, 233)">snow2</div>
+ </td>
+ <td>rgb(238, 233, 233)</td>
+ <td class="pe-3 font-monospace">#EEE9E9</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">RosyBrown1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 193, 193)">RosyBrown1</div>
+ </td>
+ <td>rgb(255, 193, 193)</td>
+ <td class="pe-3 font-monospace">#FFC1C1</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">RosyBrown2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 180, 180)">RosyBrown2</div>
+ </td>
+ <td>rgb(238, 180, 180)</td>
+ <td class="pe-3 font-monospace">#EEB4B4</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">snow3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 201, 201)">snow3</div>
+ </td>
+ <td>rgb(205, 201, 201)</td>
+ <td class="pe-3 font-monospace">#CDC9C9</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LightCoral</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(240, 128, 128)">LightCoral</div>
+ </td>
+ <td>rgb(240, 128, 128)</td>
+ <td class="pe-3 font-monospace">#F08080</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">IndianRed1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 106, 106)">IndianRed1</div>
+ </td>
+ <td>rgb(255, 106, 106)</td>
+ <td class="pe-3 font-monospace">#FF6A6A</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">RosyBrown3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 155, 155)">RosyBrown3</div>
+ </td>
+ <td>rgb(205, 155, 155)</td>
+ <td class="pe-3 font-monospace">#CD9B9B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">IndianRed2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 99, 99)">IndianRed2</div>
+ </td>
+ <td>rgb(238, 99, 99)</td>
+ <td class="pe-3 font-monospace">#EE6363</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">RosyBrown</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(188, 143, 143)">RosyBrown</div>
+ </td>
+ <td>rgb(188, 143, 143)</td>
+ <td class="pe-3 font-monospace">#BC8F8F</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">brown1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 64, 64)">brown1</div>
+ </td>
+ <td>rgb(255, 64, 64)</td>
+ <td class="pe-3 font-monospace">#FF4040</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">firebrick1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 48, 48)">firebrick1</div>
+ </td>
+ <td>rgb(255, 48, 48)</td>
+ <td class="pe-3 font-monospace">#FF3030</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">brown2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 59, 59)">brown2</div>
+ </td>
+ <td>rgb(238, 59, 59)</td>
+ <td class="pe-3 font-monospace">#EE3B3B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">IndianRed</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 92, 92)">IndianRed</div>
+ </td>
+ <td>rgb(205, 92, 92)</td>
+ <td class="pe-3 font-monospace">#CD5C5C</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">IndianRed3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 85, 85)">IndianRed3</div>
+ </td>
+ <td>rgb(205, 85, 85)</td>
+ <td class="pe-3 font-monospace">#CD5555</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">firebrick2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 44, 44)">firebrick2</div>
+ </td>
+ <td>rgb(238, 44, 44)</td>
+ <td class="pe-3 font-monospace">#EE2C2C</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">snow4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 137, 137)">snow4</div>
+ </td>
+ <td>rgb(139, 137, 137)</td>
+ <td class="pe-3 font-monospace">#8B8989</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">brown3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 51, 51)">brown3</div>
+ </td>
+ <td>rgb(205, 51, 51)</td>
+ <td class="pe-3 font-monospace">#CD3333</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">red</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 0, 0)">red</div>
+ </td>
+ <td>rgb(255, 0, 0)</td>
+ <td class="pe-3 font-monospace">#FF0000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">red1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 0, 0)">red1</div>
+ </td>
+ <td>rgb(255, 0, 0)</td>
+ <td class="pe-3 font-monospace">#FF0000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">RosyBrown4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 105, 105)">RosyBrown4</div>
+ </td>
+ <td>rgb(139, 105, 105)</td>
+ <td class="pe-3 font-monospace">#8B6969</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">firebrick3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 38, 38)">firebrick3</div>
+ </td>
+ <td>rgb(205, 38, 38)</td>
+ <td class="pe-3 font-monospace">#CD2626</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">red2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 0, 0)">red2</div>
+ </td>
+ <td>rgb(238, 0, 0)</td>
+ <td class="pe-3 font-monospace">#EE0000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">firebrick</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(178, 34, 34)">firebrick</div>
+ </td>
+ <td>rgb(178, 34, 34)</td>
+ <td class="pe-3 font-monospace">#B22222</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">brown</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(165, 42, 42)">brown</div>
+ </td>
+ <td>rgb(165, 42, 42)</td>
+ <td class="pe-3 font-monospace">#A52A2A</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">red3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 0, 0)">red3</div>
+ </td>
+ <td>rgb(205, 0, 0)</td>
+ <td class="pe-3 font-monospace">#CD0000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">IndianRed4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 58, 58)">IndianRed4</div>
+ </td>
+ <td>rgb(139, 58, 58)</td>
+ <td class="pe-3 font-monospace">#8B3A3A</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">brown4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 35, 35)">brown4</div>
+ </td>
+ <td>rgb(139, 35, 35)</td>
+ <td class="pe-3 font-monospace">#8B2323</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">firebrick4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 26, 26)">firebrick4</div>
+ </td>
+ <td>rgb(139, 26, 26)</td>
+ <td class="pe-3 font-monospace">#8B1A1A</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkRed</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 0, 0)">DarkRed</div>
+ </td>
+ <td>rgb(139, 0, 0)</td>
+ <td class="pe-3 font-monospace">#8B0000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">red4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 0, 0)">red4</div>
+ </td>
+ <td>rgb(139, 0, 0)</td>
+ <td class="pe-3 font-monospace">#8B0000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">maroon</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(128, 0, 0)">maroon</div>
+ </td>
+ <td>rgb(128, 0, 0) <span class="text-muted small">(SVG)</span></td>
+ <td class="pe-3 font-monospace">#800000</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LightPink1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 174, 185)">LightPink1</div>
+ </td>
+ <td>rgb(255, 174, 185)</td>
+ <td class="pe-3 font-monospace">#FFAEB9</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LightPink3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 140, 149)">LightPink3</div>
+ </td>
+ <td>rgb(205, 140, 149)</td>
+ <td class="pe-3 font-monospace">#CD8C95</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LightPink4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 95, 101)">LightPink4</div>
+ </td>
+ <td>rgb(139, 95, 101)</td>
+ <td class="pe-3 font-monospace">#8B5F65</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LightPink2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 162, 173)">LightPink2</div>
+ </td>
+ <td>rgb(238, 162, 173)</td>
+ <td class="pe-3 font-monospace">#EEA2AD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LightPink</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 182, 193)">LightPink</div>
+ </td>
+ <td>rgb(255, 182, 193)</td>
+ <td class="pe-3 font-monospace">#FFB6C1</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">pink</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 192, 203)">pink</div>
+ </td>
+ <td>rgb(255, 192, 203)</td>
+ <td class="pe-3 font-monospace">#FFC0CB</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">crimson</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(220, 20, 60)">crimson</div>
+ </td>
+ <td>rgb(220, 20, 60)</td>
+ <td class="pe-3 font-monospace">#DC143C</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">pink1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 181, 197)">pink1</div>
+ </td>
+ <td>rgb(255, 181, 197)</td>
+ <td class="pe-3 font-monospace">#FFB5C5</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">pink2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 169, 184)">pink2</div>
+ </td>
+ <td>rgb(238, 169, 184)</td>
+ <td class="pe-3 font-monospace">#EEA9B8</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">pink3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 145, 158)">pink3</div>
+ </td>
+ <td>rgb(205, 145, 158)</td>
+ <td class="pe-3 font-monospace">#CD919E</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">pink4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 99, 108)">pink4</div>
+ </td>
+ <td>rgb(139, 99, 108)</td>
+ <td class="pe-3 font-monospace">#8B636C</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">PaleVioletRed4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 71, 93)">PaleVioletRed4</div>
+ </td>
+ <td>rgb(139, 71, 93)</td>
+ <td class="pe-3 font-monospace">#8B475D</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">PaleVioletRed</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(219, 112, 147)">PaleVioletRed</div>
+ </td>
+ <td>rgb(219, 112, 147)</td>
+ <td class="pe-3 font-monospace">#DB7093</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">PaleVioletRed2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 121, 159)">PaleVioletRed2</div>
+ </td>
+ <td>rgb(238, 121, 159)</td>
+ <td class="pe-3 font-monospace">#EE799F</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">PaleVioletRed1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 130, 171)">PaleVioletRed1</div>
+ </td>
+ <td>rgb(255, 130, 171)</td>
+ <td class="pe-3 font-monospace">#FF82AB</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">PaleVioletRed3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 104, 137)">PaleVioletRed3</div>
+ </td>
+ <td>rgb(205, 104, 137)</td>
+ <td class="pe-3 font-monospace">#CD6889</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LavenderBlush</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 240, 245)">LavenderBlush</div>
+ </td>
+ <td>rgb(255, 240, 245)</td>
+ <td class="pe-3 font-monospace">#FFF0F5</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LavenderBlush1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 240, 245)">LavenderBlush1</div>
+ </td>
+ <td>rgb(255, 240, 245)</td>
+ <td class="pe-3 font-monospace">#FFF0F5</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LavenderBlush3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 193, 197)">LavenderBlush3</div>
+ </td>
+ <td>rgb(205, 193, 197)</td>
+ <td class="pe-3 font-monospace">#CDC1C5</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LavenderBlush2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 224, 229)">LavenderBlush2</div>
+ </td>
+ <td>rgb(238, 224, 229)</td>
+ <td class="pe-3 font-monospace">#EEE0E5</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">LavenderBlush4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 131, 134)">LavenderBlush4</div>
+ </td>
+ <td>rgb(139, 131, 134)</td>
+ <td class="pe-3 font-monospace">#8B8386</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">maroon</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(176, 48, 96)">maroon</div>
+ </td>
+ <td>rgb(176, 48, 96) <span class="text-muted small">(X11)</span></td>
+ <td class="pe-3 font-monospace">#B03060</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">HotPink3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 96, 144)">HotPink3</div>
+ </td>
+ <td>rgb(205, 96, 144)</td>
+ <td class="pe-3 font-monospace">#CD6090</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">VioletRed3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 50, 120)">VioletRed3</div>
+ </td>
+ <td>rgb(205, 50, 120)</td>
+ <td class="pe-3 font-monospace">#CD3278</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">VioletRed1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 62, 150)">VioletRed1</div>
+ </td>
+ <td>rgb(255, 62, 150)</td>
+ <td class="pe-3 font-monospace">#FF3E96</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">VioletRed2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 58, 140)">VioletRed2</div>
+ </td>
+ <td>rgb(238, 58, 140)</td>
+ <td class="pe-3 font-monospace">#EE3A8C</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">VioletRed4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 34, 82)">VioletRed4</div>
+ </td>
+ <td>rgb(139, 34, 82)</td>
+ <td class="pe-3 font-monospace">#8B2252</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">HotPink2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 106, 167)">HotPink2</div>
+ </td>
+ <td>rgb(238, 106, 167)</td>
+ <td class="pe-3 font-monospace">#EE6AA7</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">HotPink1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 110, 180)">HotPink1</div>
+ </td>
+ <td>rgb(255, 110, 180)</td>
+ <td class="pe-3 font-monospace">#FF6EB4</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">HotPink4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 58, 98)">HotPink4</div>
+ </td>
+ <td>rgb(139, 58, 98)</td>
+ <td class="pe-3 font-monospace">#8B3A62</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">HotPink</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 105, 180)">HotPink</div>
+ </td>
+ <td>rgb(255, 105, 180)</td>
+ <td class="pe-3 font-monospace">#FF69B4</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DeepPink</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 20, 147)">DeepPink</div>
+ </td>
+ <td>rgb(255, 20, 147)</td>
+ <td class="pe-3 font-monospace">#FF1493</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DeepPink1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 20, 147)">DeepPink1</div>
+ </td>
+ <td>rgb(255, 20, 147)</td>
+ <td class="pe-3 font-monospace">#FF1493</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DeepPink2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 18, 137)">DeepPink2</div>
+ </td>
+ <td>rgb(238, 18, 137)</td>
+ <td class="pe-3 font-monospace">#EE1289</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DeepPink3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 16, 118)">DeepPink3</div>
+ </td>
+ <td>rgb(205, 16, 118)</td>
+ <td class="pe-3 font-monospace">#CD1076</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DeepPink4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 10, 80)">DeepPink4</div>
+ </td>
+ <td>rgb(139, 10, 80)</td>
+ <td class="pe-3 font-monospace">#8B0A50</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">maroon1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 52, 179)">maroon1</div>
+ </td>
+ <td>rgb(255, 52, 179)</td>
+ <td class="pe-3 font-monospace">#FF34B3</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">maroon2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 48, 167)">maroon2</div>
+ </td>
+ <td>rgb(238, 48, 167)</td>
+ <td class="pe-3 font-monospace">#EE30A7</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">maroon3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 41, 144)">maroon3</div>
+ </td>
+ <td>rgb(205, 41, 144)</td>
+ <td class="pe-3 font-monospace">#CD2990</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">maroon4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 28, 98)">maroon4</div>
+ </td>
+ <td>rgb(139, 28, 98)</td>
+ <td class="pe-3 font-monospace">#8B1C62</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">MediumVioletRed</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(199, 21, 133)">MediumVioletRed</div>
+ </td>
+ <td>rgb(199, 21, 133)</td>
+ <td class="pe-3 font-monospace">#C71585</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">VioletRed</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(208, 32, 144)">VioletRed</div>
+ </td>
+ <td>rgb(208, 32, 144)</td>
+ <td class="pe-3 font-monospace">#D02090</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">orchid2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 122, 233)">orchid2</div>
+ </td>
+ <td>rgb(238, 122, 233)</td>
+ <td class="pe-3 font-monospace">#EE7AE9</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">orchid</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(218, 112, 214)">orchid</div>
+ </td>
+ <td>rgb(218, 112, 214)</td>
+ <td class="pe-3 font-monospace">#DA70D6</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">orchid1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 131, 250)">orchid1</div>
+ </td>
+ <td>rgb(255, 131, 250)</td>
+ <td class="pe-3 font-monospace">#FF83FA</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">orchid3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 105, 201)">orchid3</div>
+ </td>
+ <td>rgb(205, 105, 201)</td>
+ <td class="pe-3 font-monospace">#CD69C9</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">orchid4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 71, 137)">orchid4</div>
+ </td>
+ <td>rgb(139, 71, 137)</td>
+ <td class="pe-3 font-monospace">#8B4789</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">thistle1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 225, 255)">thistle1</div>
+ </td>
+ <td>rgb(255, 225, 255)</td>
+ <td class="pe-3 font-monospace">#FFE1FF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">thistle2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 210, 238)">thistle2</div>
+ </td>
+ <td>rgb(238, 210, 238)</td>
+ <td class="pe-3 font-monospace">#EED2EE</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">plum1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(255, 187, 255)">plum1</div>
+ </td>
+ <td>rgb(255, 187, 255)</td>
+ <td class="pe-3 font-monospace">#FFBBFF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">plum2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 174, 238)">plum2</div>
+ </td>
+ <td>rgb(238, 174, 238)</td>
+ <td class="pe-3 font-monospace">#EEAEEE</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">thistle</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(216, 191, 216)">thistle</div>
+ </td>
+ <td>rgb(216, 191, 216)</td>
+ <td class="pe-3 font-monospace">#D8BFD8</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">thistle3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 181, 205)">thistle3</div>
+ </td>
+ <td>rgb(205, 181, 205)</td>
+ <td class="pe-3 font-monospace">#CDB5CD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">plum</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(221, 160, 221)">plum</div>
+ </td>
+ <td>rgb(221, 160, 221)</td>
+ <td class="pe-3 font-monospace">#DDA0DD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">violet</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(238, 130, 238)">violet</div>
+ </td>
+ <td>rgb(238, 130, 238)</td>
+ <td class="pe-3 font-monospace">#EE82EE</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">plum3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(205, 150, 205)">plum3</div>
+ </td>
+ <td>rgb(205, 150, 205)</td>
+ <td class="pe-3 font-monospace">#CD96CD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">thistle4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 123, 139)">thistle4</div>
+ </td>
+ <td>rgb(139, 123, 139)</td>
+ <td class="pe-3 font-monospace">#8B7B8B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">fuchsia</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 0, 255)">fuchsia</div>
+ </td>
+ <td>rgb(255, 0, 255)</td>
+ <td class="pe-3 font-monospace">#FF00FF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">magenta</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 0, 255)">magenta</div>
+ </td>
+ <td>rgb(255, 0, 255)</td>
+ <td class="pe-3 font-monospace">#FF00FF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">magenta1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 0, 255)">magenta1</div>
+ </td>
+ <td>rgb(255, 0, 255)</td>
+ <td class="pe-3 font-monospace">#FF00FF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">plum4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 102, 139)">plum4</div>
+ </td>
+ <td>rgb(139, 102, 139)</td>
+ <td class="pe-3 font-monospace">#8B668B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">magenta2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 0, 238)">magenta2</div>
+ </td>
+ <td>rgb(238, 0, 238)</td>
+ <td class="pe-3 font-monospace">#EE00EE</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">magenta3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 0, 205)">magenta3</div>
+ </td>
+ <td>rgb(205, 0, 205)</td>
+ <td class="pe-3 font-monospace">#CD00CD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkMagenta</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 0, 139)">DarkMagenta</div>
+ </td>
+ <td>rgb(139, 0, 139)</td>
+ <td class="pe-3 font-monospace">#8B008B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">magenta4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 0, 139)">magenta4</div>
+ </td>
+ <td>rgb(139, 0, 139)</td>
+ <td class="pe-3 font-monospace">#8B008B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">purple</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(128, 0, 128)">purple</div>
+ </td>
+ <td>rgb(128, 0, 128) <span class="text-muted small">(SVG)</span></td>
+ <td class="pe-3 font-monospace">#800080</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">MediumOrchid</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(186, 85, 211)">MediumOrchid</div>
+ </td>
+ <td>rgb(186, 85, 211)</td>
+ <td class="pe-3 font-monospace">#BA55D3</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">MediumOrchid1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(224, 102, 255)">MediumOrchid1</div>
+ </td>
+ <td>rgb(224, 102, 255)</td>
+ <td class="pe-3 font-monospace">#E066FF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">MediumOrchid2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-dark small w-100" style="background-color: rgb(209, 95, 238)">MediumOrchid2</div>
+ </td>
+ <td>rgb(209, 95, 238)</td>
+ <td class="pe-3 font-monospace">#D15FEE</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">MediumOrchid3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(180, 82, 205)">MediumOrchid3</div>
+ </td>
+ <td>rgb(180, 82, 205)</td>
+ <td class="pe-3 font-monospace">#B452CD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">MediumOrchid4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(122, 55, 139)">MediumOrchid4</div>
+ </td>
+ <td>rgb(122, 55, 139)</td>
+ <td class="pe-3 font-monospace">#7A378B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkViolet</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(148, 0, 211)">DarkViolet</div>
+ </td>
+ <td>rgb(148, 0, 211)</td>
+ <td class="pe-3 font-monospace">#9400D3</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrchid</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(153, 50, 204)">DarkOrchid</div>
+ </td>
+ <td>rgb(153, 50, 204)</td>
+ <td class="pe-3 font-monospace">#9932CC</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrchid1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(191, 62, 255)">DarkOrchid1</div>
+ </td>
+ <td>rgb(191, 62, 255)</td>
+ <td class="pe-3 font-monospace">#BF3EFF</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrchid3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(154, 50, 205)">DarkOrchid3</div>
+ </td>
+ <td>rgb(154, 50, 205)</td>
+ <td class="pe-3 font-monospace">#9A32CD</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrchid2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(178, 58, 238)">DarkOrchid2</div>
+ </td>
+ <td>rgb(178, 58, 238)</td>
+ <td class="pe-3 font-monospace">#B23AEE</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrchid4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(104, 34, 139)">DarkOrchid4</div>
+ </td>
+ <td>rgb(104, 34, 139)</td>
+ <td class="pe-3 font-monospace">#68228B</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">purple</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(160, 32, 240)">purple</div>
+ </td>
+ <td>rgb(160, 32, 240) <span class="text-muted small">(X11)</span></td>
+ <td class="pe-3 font-monospace">#A020F0</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">indigo</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(75, 0, 130)">indigo</div>
+ </td>
+ <td>rgb(75, 0, 130)</td>
+ <td class="pe-3 font-monospace">#4B0082</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-medium">BlueViolet</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(138, 43, 226)">BlueViolet</div>
+ <td>rgb(138, 43, 226)</td>
+ <td class="pe-3 font-monospace">#8A2BE2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">purple2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(145, 44, 238)">purple2</div>
+ <td>rgb(145, 44, 238)</td>
+ <td class="pe-3 font-monospace">#912CEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">purple3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(125, 38, 205)">purple3</div>
+ <td>rgb(125, 38, 205)</td>
+ <td class="pe-3 font-monospace">#7D26CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">purple4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 85, 26, 139)">purple4</div>
+ <td>rgb( 85, 26, 139)</td>
+ <td class="pe-3 font-monospace">#551A8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">purple1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(155, 48, 255)">purple1</div>
+ <td>rgb(155, 48, 255)</td>
+ <td class="pe-3 font-monospace">#9B30FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumPurple</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(147, 112, 219)">MediumPurple</div>
+ <td>rgb(147, 112, 219)</td>
+ <td class="pe-3 font-monospace">#9370DB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumPurple1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(171, 130, 255)">MediumPurple1</div>
+ <td>rgb(171, 130, 255)</td>
+ <td class="pe-3 font-monospace">#AB82FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumPurple2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(159, 121, 238)">MediumPurple2</div>
+ <td>rgb(159, 121, 238)</td>
+ <td class="pe-3 font-monospace">#9F79EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumPurple3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(137, 104, 205)">MediumPurple3</div>
+ <td>rgb(137, 104, 205)</td>
+ <td class="pe-3 font-monospace">#8968CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumPurple4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 93, 71, 139)">MediumPurple4</div>
+ <td>rgb( 93, 71, 139)</td>
+ <td class="pe-3 font-monospace">#5D478B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 72, 61, 139)">DarkSlateBlue</div>
+ <td>rgb( 72, 61, 139)</td>
+ <td class="pe-3 font-monospace">#483D8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSlateBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(132, 112, 255)">LightSlateBlue</div>
+ <td>rgb(132, 112, 255)</td>
+ <td class="pe-3 font-monospace">#8470FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumSlateBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(123, 104, 238)">MediumSlateBlue</div>
+ <td>rgb(123, 104, 238)</td>
+ <td class="pe-3 font-monospace">#7B68EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(106, 90, 205)">SlateBlue</div>
+ <td>rgb(106, 90, 205)</td>
+ <td class="pe-3 font-monospace">#6A5ACD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(131, 111, 255)">SlateBlue1</div>
+ <td>rgb(131, 111, 255)</td>
+ <td class="pe-3 font-monospace">#836FFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(122, 103, 238)">SlateBlue2</div>
+ <td>rgb(122, 103, 238)</td>
+ <td class="pe-3 font-monospace">#7A67EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 89, 205)">SlateBlue3</div>
+ <td>rgb(105, 89, 205)</td>
+ <td class="pe-3 font-monospace">#6959CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 71, 60, 139)">SlateBlue4</div>
+ <td>rgb( 71, 60, 139)</td>
+ <td class="pe-3 font-monospace">#473C8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">GhostWhite</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(248, 248, 255)">GhostWhite</div>
+ <td>rgb(248, 248, 255)</td>
+ <td class="pe-3 font-monospace">#F8F8FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">lavender</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(230, 230, 250)">lavender</div>
+ <td>rgb(230, 230, 250)</td>
+ <td class="pe-3 font-monospace">#E6E6FA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">blue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 255)">blue</div>
+ <td>rgb( 0, 0, 255)</td>
+ <td class="pe-3 font-monospace">#0000FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">blue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 255)">blue1</div>
+ <td>rgb( 0, 0, 255)</td>
+ <td class="pe-3 font-monospace">#0000FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">blue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 238)">blue2</div>
+ <td>rgb( 0, 0, 238)</td>
+ <td class="pe-3 font-monospace">#0000EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">blue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 205)">blue3</div>
+ <td>rgb( 0, 0, 205)</td>
+ <td class="pe-3 font-monospace">#0000CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 205)">MediumBlue</div>
+ <td>rgb( 0, 0, 205)</td>
+ <td class="pe-3 font-monospace">#0000CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">blue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 139)">blue4</div>
+ <td>rgb( 0, 0, 139)</td>
+ <td class="pe-3 font-monospace">#00008B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 139)">DarkBlue</div>
+ <td>rgb( 0, 0, 139)</td>
+ <td class="pe-3 font-monospace">#00008B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MidnightBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 25, 25, 112)">MidnightBlue</div>
+ <td>rgb( 25, 25, 112)</td>
+ <td class="pe-3 font-monospace">#191970</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">navy</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 128)">navy</div>
+ <td>rgb( 0, 0, 128)</td>
+ <td class="pe-3 font-monospace">#000080</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">NavyBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 128)">NavyBlue</div>
+ <td>rgb( 0, 0, 128)</td>
+ <td class="pe-3 font-monospace">#000080</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">RoyalBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 65, 105, 225)">RoyalBlue</div>
+ <td>rgb( 65, 105, 225)</td>
+ <td class="pe-3 font-monospace">#4169E1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">RoyalBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 72, 118, 255)">RoyalBlue1</div>
+ <td>rgb( 72, 118, 255)</td>
+ <td class="pe-3 font-monospace">#4876FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">RoyalBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 67, 110, 238)">RoyalBlue2</div>
+ <td>rgb( 67, 110, 238)</td>
+ <td class="pe-3 font-monospace">#436EEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">RoyalBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 58, 95, 205)">RoyalBlue3</div>
+ <td>rgb( 58, 95, 205)</td>
+ <td class="pe-3 font-monospace">#3A5FCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">RoyalBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 39, 64, 139)">RoyalBlue4</div>
+ <td>rgb( 39, 64, 139)</td>
+ <td class="pe-3 font-monospace">#27408B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">CornflowerBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(100, 149, 237)">CornflowerBlue</div>
+ <td>rgb(100, 149, 237)</td>
+ <td class="pe-3 font-monospace">#6495ED</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSteelBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(176, 196, 222)">LightSteelBlue</div>
+ <td>rgb(176, 196, 222)</td>
+ <td class="pe-3 font-monospace">#B0C4DE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSteelBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(202, 225, 255)">LightSteelBlue1</div>
+ <td>rgb(202, 225, 255)</td>
+ <td class="pe-3 font-monospace">#CAE1FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSteelBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(188, 210, 238)">LightSteelBlue2</div>
+ <td>rgb(188, 210, 238)</td>
+ <td class="pe-3 font-monospace">#BCD2EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSteelBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(162, 181, 205)">LightSteelBlue3</div>
+ <td>rgb(162, 181, 205)</td>
+ <td class="pe-3 font-monospace">#A2B5CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSteelBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(110, 123, 139)">LightSteelBlue4</div>
+ <td>rgb(110, 123, 139)</td>
+ <td class="pe-3 font-monospace">#6E7B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateGray4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(108, 123, 139)">SlateGray4</div>
+ <td>rgb(108, 123, 139)</td>
+ <td class="pe-3 font-monospace">#6C7B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateGray1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(198, 226, 255)">SlateGray1</div>
+ <td>rgb(198, 226, 255)</td>
+ <td class="pe-3 font-monospace">#C6E2FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateGray2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(185, 211, 238)">SlateGray2</div>
+ <td>rgb(185, 211, 238)</td>
+ <td class="pe-3 font-monospace">#B9D3EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateGray3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(159, 182, 205)">SlateGray3</div>
+ <td>rgb(159, 182, 205)</td>
+ <td class="pe-3 font-monospace">#9FB6CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSlateGray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(119, 136, 153)">LightSlateGray</div>
+ <td>rgb(119, 136, 153)</td>
+ <td class="pe-3 font-monospace">#778899</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSlateGrey</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(119, 136, 153)">LightSlateGrey</div>
+ <td>rgb(119, 136, 153)</td>
+ <td class="pe-3 font-monospace">#778899</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateGray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(112, 128, 144)">SlateGray</div>
+ <td>rgb(112, 128, 144)</td>
+ <td class="pe-3 font-monospace">#708090</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SlateGrey</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(112, 128, 144)">SlateGrey</div>
+ <td>rgb(112, 128, 144)</td>
+ <td class="pe-3 font-monospace">#708090</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DodgerBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 30, 144, 255)">DodgerBlue</div>
+ <td>rgb( 30, 144, 255)</td>
+ <td class="pe-3 font-monospace">#1E90FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DodgerBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 30, 144, 255)">DodgerBlue1</div>
+ <td>rgb( 30, 144, 255)</td>
+ <td class="pe-3 font-monospace">#1E90FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DodgerBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 28, 134, 238)">DodgerBlue2</div>
+ <td>rgb( 28, 134, 238)</td>
+ <td class="pe-3 font-monospace">#1C86EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DodgerBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 16, 78, 139)">DodgerBlue4</div>
+ <td>rgb( 16, 78, 139)</td>
+ <td class="pe-3 font-monospace">#104E8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DodgerBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 24, 116, 205)">DodgerBlue3</div>
+ <td>rgb( 24, 116, 205)</td>
+ <td class="pe-3 font-monospace">#1874CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">AliceBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 248, 255)">AliceBlue</div>
+ <td>rgb(240, 248, 255)</td>
+ <td class="pe-3 font-monospace">#F0F8FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SteelBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 54, 100, 139)">SteelBlue4</div>
+ <td>rgb( 54, 100, 139)</td>
+ <td class="pe-3 font-monospace">#36648B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SteelBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 70, 130, 180)">SteelBlue</div>
+ <td>rgb( 70, 130, 180)</td>
+ <td class="pe-3 font-monospace">#4682B4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SteelBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 99, 184, 255)">SteelBlue1</div>
+ <td>rgb( 99, 184, 255)</td>
+ <td class="pe-3 font-monospace">#63B8FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SteelBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 92, 172, 238)">SteelBlue2</div>
+ <td>rgb( 92, 172, 238)</td>
+ <td class="pe-3 font-monospace">#5CACEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SteelBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 79, 148, 205)">SteelBlue3</div>
+ <td>rgb( 79, 148, 205)</td>
+ <td class="pe-3 font-monospace">#4F94CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SkyBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 74, 112, 139)">SkyBlue4</div>
+ <td>rgb( 74, 112, 139)</td>
+ <td class="pe-3 font-monospace">#4A708B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SkyBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(135, 206, 255)">SkyBlue1</div>
+ <td>rgb(135, 206, 255)</td>
+ <td class="pe-3 font-monospace">#87CEFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SkyBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(126, 192, 238)">SkyBlue2</div>
+ <td>rgb(126, 192, 238)</td>
+ <td class="pe-3 font-monospace">#7EC0EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SkyBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(108, 166, 205)">SkyBlue3</div>
+ <td>rgb(108, 166, 205)</td>
+ <td class="pe-3 font-monospace">#6CA6CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSkyBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(135, 206, 250)">LightSkyBlue</div>
+ <td>rgb(135, 206, 250)</td>
+ <td class="pe-3 font-monospace">#87CEFA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSkyBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 96, 123, 139)">LightSkyBlue4</div>
+ <td>rgb( 96, 123, 139)</td>
+ <td class="pe-3 font-monospace">#607B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSkyBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(176, 226, 255)">LightSkyBlue1</div>
+ <td>rgb(176, 226, 255)</td>
+ <td class="pe-3 font-monospace">#B0E2FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSkyBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(164, 211, 238)">LightSkyBlue2</div>
+ <td>rgb(164, 211, 238)</td>
+ <td class="pe-3 font-monospace">#A4D3EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSkyBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(141, 182, 205)">LightSkyBlue3</div>
+ <td>rgb(141, 182, 205)</td>
+ <td class="pe-3 font-monospace">#8DB6CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SkyBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(135, 206, 235)">SkyBlue</div>
+ <td>rgb(135, 206, 235)</td>
+ <td class="pe-3 font-monospace">#87CEEB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(154, 192, 205)">LightBlue3</div>
+ <td>rgb(154, 192, 205)</td>
+ <td class="pe-3 font-monospace">#9AC0CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DeepSkyBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 191, 255)">DeepSkyBlue</div>
+ <td>rgb( 0, 191, 255)</td>
+ <td class="pe-3 font-monospace">#00BFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DeepSkyBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 191, 255)">DeepSkyBlue1</div>
+ <td>rgb( 0, 191, 255)</td>
+ <td class="pe-3 font-monospace">#00BFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DeepSkyBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 178, 238)">DeepSkyBlue2</div>
+ <td>rgb( 0, 178, 238)</td>
+ <td class="pe-3 font-monospace">#00B2EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DeepSkyBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 104, 139)">DeepSkyBlue4</div>
+ <td>rgb( 0, 104, 139)</td>
+ <td class="pe-3 font-monospace">#00688B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DeepSkyBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 154, 205)">DeepSkyBlue3</div>
+ <td>rgb( 0, 154, 205)</td>
+ <td class="pe-3 font-monospace">#009ACD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(191, 239, 255)">LightBlue1</div>
+ <td>rgb(191, 239, 255)</td>
+ <td class="pe-3 font-monospace">#BFEFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(178, 223, 238)">LightBlue2</div>
+ <td>rgb(178, 223, 238)</td>
+ <td class="pe-3 font-monospace">#B2DFEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(173, 216, 230)">LightBlue</div>
+ <td>rgb(173, 216, 230)</td>
+ <td class="pe-3 font-monospace">#ADD8E6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(104, 131, 139)">LightBlue4</div>
+ <td>rgb(104, 131, 139)</td>
+ <td class="pe-3 font-monospace">#68838B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PowderBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(176, 224, 230)">PowderBlue</div>
+ <td>rgb(176, 224, 230)</td>
+ <td class="pe-3 font-monospace">#B0E0E6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">CadetBlue1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(152, 245, 255)">CadetBlue1</div>
+ <td>rgb(152, 245, 255)</td>
+ <td class="pe-3 font-monospace">#98F5FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">CadetBlue2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(142, 229, 238)">CadetBlue2</div>
+ <td>rgb(142, 229, 238)</td>
+ <td class="pe-3 font-monospace">#8EE5EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">CadetBlue3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(122, 197, 205)">CadetBlue3</div>
+ <td>rgb(122, 197, 205)</td>
+ <td class="pe-3 font-monospace">#7AC5CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">CadetBlue4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 83, 134, 139)">CadetBlue4</div>
+ <td>rgb( 83, 134, 139)</td>
+ <td class="pe-3 font-monospace">#53868B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">turquoise1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 245, 255)">turquoise1</div>
+ <td>rgb( 0, 245, 255)</td>
+ <td class="pe-3 font-monospace">#00F5FF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">turquoise2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 229, 238)">turquoise2</div>
+ <td>rgb( 0, 229, 238)</td>
+ <td class="pe-3 font-monospace">#00E5EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">turquoise3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 197, 205)">turquoise3</div>
+ <td>rgb( 0, 197, 205)</td>
+ <td class="pe-3 font-monospace">#00C5CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">turquoise4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 134, 139)">turquoise4</div>
+ <td>rgb( 0, 134, 139)</td>
+ <td class="pe-3 font-monospace">#00868B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cadet blue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 95, 158, 160)">cadet blue</div>
+ <td>rgb( 95, 158, 160)</td>
+ <td class="pe-3 font-monospace">#5F9EA0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">CadetBlue</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 95, 158, 160)">CadetBlue</div>
+ <td>rgb( 95, 158, 160)</td>
+ <td class="pe-3 font-monospace">#5F9EA0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkTurquoise</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 206, 209)">DarkTurquoise</div>
+ <td>rgb( 0, 206, 209)</td>
+ <td class="pe-3 font-monospace">#00CED1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">azure</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 255, 255)">azure</div>
+ <td>rgb(240, 255, 255)</td>
+ <td class="pe-3 font-monospace">#F0FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">azure1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 255, 255)">azure1</div>
+ <td>rgb(240, 255, 255)</td>
+ <td class="pe-3 font-monospace">#F0FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightCyan</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(224, 255, 255)">LightCyan</div>
+ <td>rgb(224, 255, 255)</td>
+ <td class="pe-3 font-monospace">#E0FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightCyan1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(224, 255, 255)">LightCyan1</div>
+ <td>rgb(224, 255, 255)</td>
+ <td class="pe-3 font-monospace">#E0FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">azure2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(224, 238, 238)">azure2</div>
+ <td>rgb(224, 238, 238)</td>
+ <td class="pe-3 font-monospace">#E0EEEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightCyan2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(209, 238, 238)">LightCyan2</div>
+ <td>rgb(209, 238, 238)</td>
+ <td class="pe-3 font-monospace">#D1EEEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleTurquoise1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(187, 255, 255)">PaleTurquoise1</div>
+ <td>rgb(187, 255, 255)</td>
+ <td class="pe-3 font-monospace">#BBFFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleTurquoise</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(175, 238, 238)">PaleTurquoise</div>
+ <td>rgb(175, 238, 238)</td>
+ <td class="pe-3 font-monospace">#AFEEEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleTurquoise2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(174, 238, 238)">PaleTurquoise2</div>
+ <td>rgb(174, 238, 238)</td>
+ <td class="pe-3 font-monospace">#AEEEEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateGray1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(151, 255, 255)">DarkSlateGray1</div>
+ <td>rgb(151, 255, 255)</td>
+ <td class="pe-3 font-monospace">#97FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">azure3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(193, 205, 205)">azure3</div>
+ <td>rgb(193, 205, 205)</td>
+ <td class="pe-3 font-monospace">#C1CDCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightCyan3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(180, 205, 205)">LightCyan3</div>
+ <td>rgb(180, 205, 205)</td>
+ <td class="pe-3 font-monospace">#B4CDCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateGray2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(141, 238, 238)">DarkSlateGray2</div>
+ <td>rgb(141, 238, 238)</td>
+ <td class="pe-3 font-monospace">#8DEEEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleTurquoise3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(150, 205, 205)">PaleTurquoise3</div>
+ <td>rgb(150, 205, 205)</td>
+ <td class="pe-3 font-monospace">#96CDCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateGray3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(121, 205, 205)">DarkSlateGray3</div>
+ <td>rgb(121, 205, 205)</td>
+ <td class="pe-3 font-monospace">#79CDCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">azure4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(131, 139, 139)">azure4</div>
+ <td>rgb(131, 139, 139)</td>
+ <td class="pe-3 font-monospace">#838B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightCyan4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(122, 139, 139)">LightCyan4</div>
+ <td>rgb(122, 139, 139)</td>
+ <td class="pe-3 font-monospace">#7A8B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">aqua</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 255)">aqua</div>
+ <td>rgb( 0, 255, 255)</td>
+ <td class="pe-3 font-monospace">#00FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cyan</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 255)">cyan</div>
+ <td>rgb( 0, 255, 255)</td>
+ <td class="pe-3 font-monospace">#00FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cyan1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 255)">cyan1</div>
+ <td>rgb( 0, 255, 255)</td>
+ <td class="pe-3 font-monospace">#00FFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleTurquoise4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(102, 139, 139)">PaleTurquoise4</div>
+ <td>rgb(102, 139, 139)</td>
+ <td class="pe-3 font-monospace">#668B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cyan2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 238, 238)">cyan2</div>
+ <td>rgb( 0, 238, 238)</td>
+ <td class="pe-3 font-monospace">#00EEEE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateGray4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 82, 139, 139)">DarkSlateGray4</div>
+ <td>rgb( 82, 139, 139)</td>
+ <td class="pe-3 font-monospace">#528B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cyan3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 205, 205)">cyan3</div>
+ <td>rgb( 0, 205, 205)</td>
+ <td class="pe-3 font-monospace">#00CDCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cyan4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 139, 139)">cyan4</div>
+ <td>rgb( 0, 139, 139)</td>
+ <td class="pe-3 font-monospace">#008B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkCyan</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 139, 139)">DarkCyan</div>
+ <td>rgb( 0, 139, 139)</td>
+ <td class="pe-3 font-monospace">#008B8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">teal</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 128, 128)">teal</div>
+ <td>rgb( 0, 128, 128)</td>
+ <td class="pe-3 font-monospace">#008080</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateGray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 47, 79, 79)">DarkSlateGray</div>
+ <td>rgb( 47, 79, 79)</td>
+ <td class="pe-3 font-monospace">#2F4F4F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSlateGrey</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 47, 79, 79)">DarkSlateGrey</div>
+ <td>rgb( 47, 79, 79)</td>
+ <td class="pe-3 font-monospace">#2F4F4F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumTurquoise</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 72, 209, 204)">MediumTurquoise</div>
+ <td>rgb( 72, 209, 204)</td>
+ <td class="pe-3 font-monospace">#48D1CC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSeaGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 32, 178, 170)">LightSeaGreen</div>
+ <td>rgb( 32, 178, 170)</td>
+ <td class="pe-3 font-monospace">#20B2AA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">turquoise</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 64, 224, 208)">turquoise</div>
+ <td>rgb( 64, 224, 208)</td>
+ <td class="pe-3 font-monospace">#40E0D0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">aquamarine4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 69, 139, 116)">aquamarine4</div>
+ <td>rgb( 69, 139, 116)</td>
+ <td class="pe-3 font-monospace">#458B74</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">aquamarine</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(127, 255, 212)">aquamarine</div>
+ <td>rgb(127, 255, 212)</td>
+ <td class="pe-3 font-monospace">#7FFFD4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">aquamarine1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(127, 255, 212)">aquamarine1</div>
+ <td>rgb(127, 255, 212)</td>
+ <td class="pe-3 font-monospace">#7FFFD4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">aquamarine2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(118, 238, 198)">aquamarine2</div>
+ <td>rgb(118, 238, 198)</td>
+ <td class="pe-3 font-monospace">#76EEC6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">aquamarine3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(102, 205, 170)">aquamarine3</div>
+ <td>rgb(102, 205, 170)</td>
+ <td class="pe-3 font-monospace">#66CDAA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumAquamarine</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(102, 205, 170)">MediumAquamarine</div>
+ <td>rgb(102, 205, 170)</td>
+ <td class="pe-3 font-monospace">#66CDAA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumSpringGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 250, 154)">MediumSpringGreen</div>
+ <td>rgb( 0, 250, 154)</td>
+ <td class="pe-3 font-monospace">#00FA9A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MintCream</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(245, 255, 250)">MintCream</div>
+ <td>rgb(245, 255, 250)</td>
+ <td class="pe-3 font-monospace">#F5FFFA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SpringGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 127)">SpringGreen</div>
+ <td>rgb( 0, 255, 127)</td>
+ <td class="pe-3 font-monospace">#00FF7F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SpringGreen1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 127)">SpringGreen1</div>
+ <td>rgb( 0, 255, 127)</td>
+ <td class="pe-3 font-monospace">#00FF7F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SpringGreen2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 238, 118)">SpringGreen2</div>
+ <td>rgb( 0, 238, 118)</td>
+ <td class="pe-3 font-monospace">#00EE76</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SpringGreen3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 205, 102)">SpringGreen3</div>
+ <td>rgb( 0, 205, 102)</td>
+ <td class="pe-3 font-monospace">#00CD66</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SpringGreen4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 139, 69)">SpringGreen4</div>
+ <td>rgb( 0, 139, 69)</td>
+ <td class="pe-3 font-monospace">#008B45</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumSeaGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 60, 179, 113)">MediumSeaGreen</div>
+ <td>rgb( 60, 179, 113)</td>
+ <td class="pe-3 font-monospace">#3CB371</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SeaGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 46, 139, 87)">SeaGreen</div>
+ <td>rgb( 46, 139, 87)</td>
+ <td class="pe-3 font-monospace">#2E8B57</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SeaGreen3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 67, 205, 128)">SeaGreen3</div>
+ <td>rgb( 67, 205, 128)</td>
+ <td class="pe-3 font-monospace">#43CD80</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SeaGreen1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 84, 255, 159)">SeaGreen1</div>
+ <td>rgb( 84, 255, 159)</td>
+ <td class="pe-3 font-monospace">#54FF9F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SeaGreen4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 46, 139, 87)">SeaGreen4</div>
+ <td>rgb( 46, 139, 87)</td>
+ <td class="pe-3 font-monospace">#2E8B57</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SeaGreen2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 78, 238, 148)">SeaGreen2</div>
+ <td>rgb( 78, 238, 148)</td>
+ <td class="pe-3 font-monospace">#4EEE94</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumForestGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 50, 129, 75)">MediumForestGreen</div>
+ <td>rgb( 50, 129, 75)</td>
+ <td class="pe-3 font-monospace">#32814B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">honeydew</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 255, 240)">honeydew</div>
+ <td>rgb(240, 255, 240)</td>
+ <td class="pe-3 font-monospace">#F0FFF0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">honeydew1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 255, 240)">honeydew1</div>
+ <td>rgb(240, 255, 240)</td>
+ <td class="pe-3 font-monospace">#F0FFF0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">honeydew2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(224, 238, 224)">honeydew2</div>
+ <td>rgb(224, 238, 224)</td>
+ <td class="pe-3 font-monospace">#E0EEE0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSeaGreen1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(193, 255, 193)">DarkSeaGreen1</div>
+ <td>rgb(193, 255, 193)</td>
+ <td class="pe-3 font-monospace">#C1FFC1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSeaGreen2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(180, 238, 180)">DarkSeaGreen2</div>
+ <td>rgb(180, 238, 180)</td>
+ <td class="pe-3 font-monospace">#B4EEB4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleGreen1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(154, 255, 154)">PaleGreen1</div>
+ <td>rgb(154, 255, 154)</td>
+ <td class="pe-3 font-monospace">#9AFF9A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(152, 251, 152)">PaleGreen</div>
+ <td>rgb(152, 251, 152)</td>
+ <td class="pe-3 font-monospace">#98FB98</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">honeydew3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(193, 205, 193)">honeydew3</div>
+ <td>rgb(193, 205, 193)</td>
+ <td class="pe-3 font-monospace">#C1CDC1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(144, 238, 144)">LightGreen</div>
+ <td>rgb(144, 238, 144)</td>
+ <td class="pe-3 font-monospace">#90EE90</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleGreen2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(144, 238, 144)">PaleGreen2</div>
+ <td>rgb(144, 238, 144)</td>
+ <td class="pe-3 font-monospace">#90EE90</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSeaGreen3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(155, 205, 155)">DarkSeaGreen3</div>
+ <td>rgb(155, 205, 155)</td>
+ <td class="pe-3 font-monospace">#9BCD9B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSeaGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(143, 188, 143)">DarkSeaGreen</div>
+ <td>rgb(143, 188, 143)</td>
+ <td class="pe-3 font-monospace">#8FBC8F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleGreen3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(124, 205, 124)">PaleGreen3</div>
+ <td>rgb(124, 205, 124)</td>
+ <td class="pe-3 font-monospace">#7CCD7C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">honeydew4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(131, 139, 131)">honeydew4</div>
+ <td>rgb(131, 139, 131)</td>
+ <td class="pe-3 font-monospace">#838B83</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">green1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 0)">green1</div>
+ <td>rgb( 0, 255, 0)</td>
+ <td class="pe-3 font-monospace">#00FF00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">lime</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 255, 0)">lime</div>
+ <td>rgb( 0, 255, 0)</td>
+ <td class="pe-3 font-monospace">#00FF00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LimeGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 50, 205, 50)">LimeGreen</div>
+ <td>rgb( 50, 205, 50)</td>
+ <td class="pe-3 font-monospace">#32CD32</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSeaGreen4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 139, 105)">DarkSeaGreen4</div>
+ <td>rgb(105, 139, 105)</td>
+ <td class="pe-3 font-monospace">#698B69</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">green2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 238, 0)">green2</div>
+ <td>rgb( 0, 238, 0)</td>
+ <td class="pe-3 font-monospace">#00EE00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleGreen4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 84, 139, 84)">PaleGreen4</div>
+ <td>rgb( 84, 139, 84)</td>
+ <td class="pe-3 font-monospace">#548B54</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">green3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 205, 0)">green3</div>
+ <td>rgb( 0, 205, 0)</td>
+ <td class="pe-3 font-monospace">#00CD00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">ForestGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 34, 139, 34)">ForestGreen</div>
+ <td>rgb( 34, 139, 34)</td>
+ <td class="pe-3 font-monospace">#228B22</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">green4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 139, 0)">green4</div>
+ <td>rgb( 0, 139, 0)</td>
+ <td class="pe-3 font-monospace">#008B00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">green</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 128, 0)">green</div>
+ <td>rgb( 0, 128, 0)</td>
+ <td class="pe-3 font-monospace">#008000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 100, 0)">DarkGreen</div>
+ <td>rgb( 0, 100, 0)</td>
+ <td class="pe-3 font-monospace">#006400</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LawnGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(124, 252, 0)">LawnGreen</div>
+ <td>rgb(124, 252, 0)</td>
+ <td class="pe-3 font-monospace">#7CFC00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chartreuse</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(127, 255, 0)">chartreuse</div>
+ <td>rgb(127, 255, 0)</td>
+ <td class="pe-3 font-monospace">#7FFF00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chartreuse1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(127, 255, 0)">chartreuse1</div>
+ <td>rgb(127, 255, 0)</td>
+ <td class="pe-3 font-monospace">#7FFF00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chartreuse2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(118, 238, 0)">chartreuse2</div>
+ <td>rgb(118, 238, 0)</td>
+ <td class="pe-3 font-monospace">#76EE00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chartreuse3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(102, 205, 0)">chartreuse3</div>
+ <td>rgb(102, 205, 0)</td>
+ <td class="pe-3 font-monospace">#66CD00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chartreuse4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 69, 139, 0)">chartreuse4</div>
+ <td>rgb( 69, 139, 0)</td>
+ <td class="pe-3 font-monospace">#458B00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">GreenYellow</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(173, 255, 47)">GreenYellow</div>
+ <td>rgb(173, 255, 47)</td>
+ <td class="pe-3 font-monospace">#ADFF2F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOliveGreen3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(162, 205, 90)">DarkOliveGreen3</div>
+ <td>rgb(162, 205, 90)</td>
+ <td class="pe-3 font-monospace">#A2CD5A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOliveGreen1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(202, 255, 112)">DarkOliveGreen1</div>
+ <td>rgb(202, 255, 112)</td>
+ <td class="pe-3 font-monospace">#CAFF70</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOliveGreen2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(188, 238, 104)">DarkOliveGreen2</div>
+ <td>rgb(188, 238, 104)</td>
+ <td class="pe-3 font-monospace">#BCEE68</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOliveGreen4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(110, 139, 61)">DarkOliveGreen4</div>
+ <td>rgb(110, 139, 61)</td>
+ <td class="pe-3 font-monospace">#6E8B3D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOliveGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 85, 107, 47)">DarkOliveGreen</div>
+ <td>rgb( 85, 107, 47)</td>
+ <td class="pe-3 font-monospace">#556B2F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OliveDrab</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(107, 142, 35)">OliveDrab</div>
+ <td>rgb(107, 142, 35)</td>
+ <td class="pe-3 font-monospace">#6B8E23</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OliveDrab1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(192, 255, 62)">OliveDrab1</div>
+ <td>rgb(192, 255, 62)</td>
+ <td class="pe-3 font-monospace">#C0FF3E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OliveDrab2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(179, 238, 58)">OliveDrab2</div>
+ <td>rgb(179, 238, 58)</td>
+ <td class="pe-3 font-monospace">#B3EE3A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OliveDrab3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(154, 205, 50)">OliveDrab3</div>
+ <td>rgb(154, 205, 50)</td>
+ <td class="pe-3 font-monospace">#9ACD32</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">YellowGreen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(154, 205, 50)">YellowGreen</div>
+ <td>rgb(154, 205, 50)</td>
+ <td class="pe-3 font-monospace">#9ACD32</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OliveDrab4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 139, 34)">OliveDrab4</div>
+ <td>rgb(105, 139, 34)</td>
+ <td class="pe-3 font-monospace">#698B22</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">ivory</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 240)">ivory</div>
+ <td>rgb(255, 255, 240)</td>
+ <td class="pe-3 font-monospace">#FFFFF0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">ivory1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 240)">ivory1</div>
+ <td>rgb(255, 255, 240)</td>
+ <td class="pe-3 font-monospace">#FFFFF0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightYellow</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 224)">LightYellow</div>
+ <td>rgb(255, 255, 224)</td>
+ <td class="pe-3 font-monospace">#FFFFE0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightYellow1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 224)">LightYellow1</div>
+ <td>rgb(255, 255, 224)</td>
+ <td class="pe-3 font-monospace">#FFFFE0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">beige</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(245, 245, 220)">beige</div>
+ <td>rgb(245, 245, 220)</td>
+ <td class="pe-3 font-monospace">#F5F5DC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">ivory2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 238, 224)">ivory2</div>
+ <td>rgb(238, 238, 224)</td>
+ <td class="pe-3 font-monospace">#EEEEE0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGoldenrodYellow</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(250, 250, 210)">LightGoldenrodYellow</div>
+ <td>rgb(250, 250, 210)</td>
+ <td class="pe-3 font-monospace">#FAFAD2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightYellow2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 238, 209)">LightYellow2</div>
+ <td>rgb(238, 238, 209)</td>
+ <td class="pe-3 font-monospace">#EEEED1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">ivory3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 205, 193)">ivory3</div>
+ <td>rgb(205, 205, 193)</td>
+ <td class="pe-3 font-monospace">#CDCDC1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightYellow3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 205, 180)">LightYellow3</div>
+ <td>rgb(205, 205, 180)</td>
+ <td class="pe-3 font-monospace">#CDCDB4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">ivory4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 139, 131)">ivory4</div>
+ <td>rgb(139, 139, 131)</td>
+ <td class="pe-3 font-monospace">#8B8B83</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightYellow4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 139, 122)">LightYellow4</div>
+ <td>rgb(139, 139, 122)</td>
+ <td class="pe-3 font-monospace">#8B8B7A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">yellow</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 0)">yellow</div>
+ <td>rgb(255, 255, 0)</td>
+ <td class="pe-3 font-monospace">#FFFF00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">yellow1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 0)">yellow1</div>
+ <td>rgb(255, 255, 0)</td>
+ <td class="pe-3 font-monospace">#FFFF00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">yellow2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 238, 0)">yellow2</div>
+ <td>rgb(238, 238, 0)</td>
+ <td class="pe-3 font-monospace">#EEEE00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">yellow3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 205, 0)">yellow3</div>
+ <td>rgb(205, 205, 0)</td>
+ <td class="pe-3 font-monospace">#CDCD00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">yellow4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 139, 0)">yellow4</div>
+ <td>rgb(139, 139, 0)</td>
+ <td class="pe-3 font-monospace">#8B8B00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">olive</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(128, 128, 0)">olive</div>
+ <td>rgb(128, 128, 0)</td>
+ <td class="pe-3 font-monospace">#808000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkKhaki</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(189, 183, 107)">DarkKhaki</div>
+ <td>rgb(189, 183, 107)</td>
+ <td class="pe-3 font-monospace">#BDB76B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">khaki2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 230, 133)">khaki2</div>
+ <td>rgb(238, 230, 133)</td>
+ <td class="pe-3 font-monospace">#EEE685</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LemonChiffon4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 137, 112)">LemonChiffon4</div>
+ <td>rgb(139, 137, 112)</td>
+ <td class="pe-3 font-monospace">#8B8970</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">khaki1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 246, 143)">khaki1</div>
+ <td>rgb(255, 246, 143)</td>
+ <td class="pe-3 font-monospace">#FFF68F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">khaki3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 198, 115)">khaki3</div>
+ <td>rgb(205, 198, 115)</td>
+ <td class="pe-3 font-monospace">#CDC673</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">khaki4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 134, 78)">khaki4</div>
+ <td>rgb(139, 134, 78)</td>
+ <td class="pe-3 font-monospace">#8B864E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PaleGoldenrod</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 232, 170)">PaleGoldenrod</div>
+ <td>rgb(238, 232, 170)</td>
+ <td class="pe-3 font-monospace">#EEE8AA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LemonChiffon</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 250, 205)">LemonChiffon</div>
+ <td>rgb(255, 250, 205)</td>
+ <td class="pe-3 font-monospace">#FFFACD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LemonChiffon1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 250, 205)">LemonChiffon1</div>
+ <td>rgb(255, 250, 205)</td>
+ <td class="pe-3 font-monospace">#FFFACD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">khaki</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 230, 140)">khaki</div>
+ <td>rgb(240, 230, 140)</td>
+ <td class="pe-3 font-monospace">#F0E68C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LemonChiffon3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 201, 165)">LemonChiffon3</div>
+ <td>rgb(205, 201, 165)</td>
+ <td class="pe-3 font-monospace">#CDC9A5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LemonChiffon2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 233, 191)">LemonChiffon2</div>
+ <td>rgb(238, 233, 191)</td>
+ <td class="pe-3 font-monospace">#EEE9BF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MediumGoldenRod</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(209, 193, 102)">MediumGoldenRod</div>
+ <td>rgb(209, 193, 102)</td>
+ <td class="pe-3 font-monospace">#D1C166</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cornsilk4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 136, 120)">cornsilk4</div>
+ <td>rgb(139, 136, 120)</td>
+ <td class="pe-3 font-monospace">#8B8878</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gold</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 215, 0)">gold</div>
+ <td>rgb(255, 215, 0)</td>
+ <td class="pe-3 font-monospace">#FFD700</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gold1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 215, 0)">gold1</div>
+ <td>rgb(255, 215, 0)</td>
+ <td class="pe-3 font-monospace">#FFD700</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gold2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 201, 0)">gold2</div>
+ <td>rgb(238, 201, 0)</td>
+ <td class="pe-3 font-monospace">#EEC900</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gold3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 173, 0)">gold3</div>
+ <td>rgb(205, 173, 0)</td>
+ <td class="pe-3 font-monospace">#CDAD00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gold4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 117, 0)">gold4</div>
+ <td>rgb(139, 117, 0)</td>
+ <td class="pe-3 font-monospace">#8B7500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGoldenrod</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 221, 130)">LightGoldenrod</div>
+ <td>rgb(238, 221, 130)</td>
+ <td class="pe-3 font-monospace">#EEDD82</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGoldenrod4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 129, 76)">LightGoldenrod4</div>
+ <td>rgb(139, 129, 76)</td>
+ <td class="pe-3 font-monospace">#8B814C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGoldenrod1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 236, 139)">LightGoldenrod1</div>
+ <td>rgb(255, 236, 139)</td>
+ <td class="pe-3 font-monospace">#FFEC8B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGoldenrod3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 190, 112)">LightGoldenrod3</div>
+ <td>rgb(205, 190, 112)</td>
+ <td class="pe-3 font-monospace">#CDBE70</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGoldenrod2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 220, 130)">LightGoldenrod2</div>
+ <td>rgb(238, 220, 130)</td>
+ <td class="pe-3 font-monospace">#EEDC82</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cornsilk3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 200, 177)">cornsilk3</div>
+ <td>rgb(205, 200, 177)</td>
+ <td class="pe-3 font-monospace">#CDC8B1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cornsilk2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 232, 205)">cornsilk2</div>
+ <td>rgb(238, 232, 205)</td>
+ <td class="pe-3 font-monospace">#EEE8CD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cornsilk</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 248, 220)">cornsilk</div>
+ <td>rgb(255, 248, 220)</td>
+ <td class="pe-3 font-monospace">#FFF8DC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">cornsilk1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 248, 220)">cornsilk1</div>
+ <td>rgb(255, 248, 220)</td>
+ <td class="pe-3 font-monospace">#FFF8DC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">goldenrod</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(218, 165, 32)">goldenrod</div>
+ <td>rgb(218, 165, 32)</td>
+ <td class="pe-3 font-monospace">#DAA520</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">goldenrod1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 193, 37)">goldenrod1</div>
+ <td>rgb(255, 193, 37)</td>
+ <td class="pe-3 font-monospace">#FFC125</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">goldenrod2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 180, 34)">goldenrod2</div>
+ <td>rgb(238, 180, 34)</td>
+ <td class="pe-3 font-monospace">#EEB422</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">goldenrod3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 155, 29)">goldenrod3</div>
+ <td>rgb(205, 155, 29)</td>
+ <td class="pe-3 font-monospace">#CD9B1D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">goldenrod4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 105, 20)">goldenrod4</div>
+ <td>rgb(139, 105, 20)</td>
+ <td class="pe-3 font-monospace">#8B6914</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGoldenrod</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(184, 134, 11)">DarkGoldenrod</div>
+ <td>rgb(184, 134, 11)</td>
+ <td class="pe-3 font-monospace">#B8860B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGoldenrod1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 185, 15)">DarkGoldenrod1</div>
+ <td>rgb(255, 185, 15)</td>
+ <td class="pe-3 font-monospace">#FFB90F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGoldenrod2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 173, 14)">DarkGoldenrod2</div>
+ <td>rgb(238, 173, 14)</td>
+ <td class="pe-3 font-monospace">#EEAD0E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGoldenrod3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 149, 12)">DarkGoldenrod3</div>
+ <td>rgb(205, 149, 12)</td>
+ <td class="pe-3 font-monospace">#CD950C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGoldenrod4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 101, 8)">DarkGoldenrod4</div>
+ <td>rgb(139, 101, 8)</td>
+ <td class="pe-3 font-monospace">#8B6508</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">FloralWhite</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 250, 240)">FloralWhite</div>
+ <td>rgb(255, 250, 240)</td>
+ <td class="pe-3 font-monospace">#FFFAF0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">wheat2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 216, 174)">wheat2</div>
+ <td>rgb(238, 216, 174)</td>
+ <td class="pe-3 font-monospace">#EED8AE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OldLace</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(253, 245, 230)">OldLace</div>
+ <td>rgb(253, 245, 230)</td>
+ <td class="pe-3 font-monospace">#FDF5E6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">wheat</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(245, 222, 179)">wheat</div>
+ <td>rgb(245, 222, 179)</td>
+ <td class="pe-3 font-monospace">#F5DEB3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">wheat1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 231, 186)">wheat1</div>
+ <td>rgb(255, 231, 186)</td>
+ <td class="pe-3 font-monospace">#FFE7BA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">wheat3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 186, 150)">wheat3</div>
+ <td>rgb(205, 186, 150)</td>
+ <td class="pe-3 font-monospace">#CDBA96</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">orange</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 165, 0)">orange</div>
+ <td>rgb(255, 165, 0)</td>
+ <td class="pe-3 font-monospace">#FFA500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">orange1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 165, 0)">orange1</div>
+ <td>rgb(255, 165, 0)</td>
+ <td class="pe-3 font-monospace">#FFA500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">orange2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 154, 0)">orange2</div>
+ <td>rgb(238, 154, 0)</td>
+ <td class="pe-3 font-monospace">#EE9A00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">orange3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 133, 0)">orange3</div>
+ <td>rgb(205, 133, 0)</td>
+ <td class="pe-3 font-monospace">#CD8500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">orange4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 90, 0)">orange4</div>
+ <td>rgb(139, 90, 0)</td>
+ <td class="pe-3 font-monospace">#8B5A00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">wheat4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 126, 102)">wheat4</div>
+ <td>rgb(139, 126, 102)</td>
+ <td class="pe-3 font-monospace">#8B7E66</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">moccasin</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 228, 181)">moccasin</div>
+ <td>rgb(255, 228, 181)</td>
+ <td class="pe-3 font-monospace">#FFE4B5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PapayaWhip</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 239, 213)">PapayaWhip</div>
+ <td>rgb(255, 239, 213)</td>
+ <td class="pe-3 font-monospace">#FFEFD5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">NavajoWhite3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 179, 139)">NavajoWhite3</div>
+ <td>rgb(205, 179, 139)</td>
+ <td class="pe-3 font-monospace">#CDB38B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">BlanchedAlmond</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 235, 205)">BlanchedAlmond</div>
+ <td>rgb(255, 235, 205)</td>
+ <td class="pe-3 font-monospace">#FFEBCD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">NavajoWhite</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 222, 173)">NavajoWhite</div>
+ <td>rgb(255, 222, 173)</td>
+ <td class="pe-3 font-monospace">#FFDEAD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">NavajoWhite1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 222, 173)">NavajoWhite1</div>
+ <td>rgb(255, 222, 173)</td>
+ <td class="pe-3 font-monospace">#FFDEAD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">NavajoWhite2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 207, 161)">NavajoWhite2</div>
+ <td>rgb(238, 207, 161)</td>
+ <td class="pe-3 font-monospace">#EECFA1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">NavajoWhite4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 121, 94)">NavajoWhite4</div>
+ <td>rgb(139, 121, 94)</td>
+ <td class="pe-3 font-monospace">#8B795E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">AntiqueWhite4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 131, 120)">AntiqueWhite4</div>
+ <td>rgb(139, 131, 120)</td>
+ <td class="pe-3 font-monospace">#8B8378</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">AntiqueWhite</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(250, 235, 215)">AntiqueWhite</div>
+ <td>rgb(250, 235, 215)</td>
+ <td class="pe-3 font-monospace">#FAEBD7</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tan</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(210, 180, 140)">tan</div>
+ <td>rgb(210, 180, 140)</td>
+ <td class="pe-3 font-monospace">#D2B48C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">bisque4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 125, 107)">bisque4</div>
+ <td>rgb(139, 125, 107)</td>
+ <td class="pe-3 font-monospace">#8B7D6B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">burlywood</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(222, 184, 135)">burlywood</div>
+ <td>rgb(222, 184, 135)</td>
+ <td class="pe-3 font-monospace">#DEB887</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">AntiqueWhite2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 223, 204)">AntiqueWhite2</div>
+ <td>rgb(238, 223, 204)</td>
+ <td class="pe-3 font-monospace">#EEDFCC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">burlywood1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 211, 155)">burlywood1</div>
+ <td>rgb(255, 211, 155)</td>
+ <td class="pe-3 font-monospace">#FFD39B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">burlywood3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 170, 125)">burlywood3</div>
+ <td>rgb(205, 170, 125)</td>
+ <td class="pe-3 font-monospace">#CDAA7D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">burlywood2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 197, 145)">burlywood2</div>
+ <td>rgb(238, 197, 145)</td>
+ <td class="pe-3 font-monospace">#EEC591</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">AntiqueWhite1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 239, 219)">AntiqueWhite1</div>
+ <td>rgb(255, 239, 219)</td>
+ <td class="pe-3 font-monospace">#FFEFDB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">burlywood4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 115, 85)">burlywood4</div>
+ <td>rgb(139, 115, 85)</td>
+ <td class="pe-3 font-monospace">#8B7355</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">AntiqueWhite3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 192, 176)">AntiqueWhite3</div>
+ <td>rgb(205, 192, 176)</td>
+ <td class="pe-3 font-monospace">#CDC0B0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrange</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 140, 0)">DarkOrange</div>
+ <td>rgb(255, 140, 0)</td>
+ <td class="pe-3 font-monospace">#FF8C00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">bisque2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 213, 183)">bisque2</div>
+ <td>rgb(238, 213, 183)</td>
+ <td class="pe-3 font-monospace">#EED5B7</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">bisque</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 228, 196)">bisque</div>
+ <td>rgb(255, 228, 196)</td>
+ <td class="pe-3 font-monospace">#FFE4C4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">bisque1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 228, 196)">bisque1</div>
+ <td>rgb(255, 228, 196)</td>
+ <td class="pe-3 font-monospace">#FFE4C4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">bisque3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 183, 158)">bisque3</div>
+ <td>rgb(205, 183, 158)</td>
+ <td class="pe-3 font-monospace">#CDB79E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrange1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 127, 0)">DarkOrange1</div>
+ <td>rgb(255, 127, 0)</td>
+ <td class="pe-3 font-monospace">#FF7F00</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">linen</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(250, 240, 230)">linen</div>
+ <td>rgb(250, 240, 230)</td>
+ <td class="pe-3 font-monospace">#FAF0E6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrange2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 118, 0)">DarkOrange2</div>
+ <td>rgb(238, 118, 0)</td>
+ <td class="pe-3 font-monospace">#EE7600</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrange3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 102, 0)">DarkOrange3</div>
+ <td>rgb(205, 102, 0)</td>
+ <td class="pe-3 font-monospace">#CD6600</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkOrange4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 69, 0)">DarkOrange4</div>
+ <td>rgb(139, 69, 0)</td>
+ <td class="pe-3 font-monospace">#8B4500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">peru</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 133, 63)">peru</div>
+ <td>rgb(205, 133, 63)</td>
+ <td class="pe-3 font-monospace">#CD853F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tan1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 165, 79)">tan1</div>
+ <td>rgb(255, 165, 79)</td>
+ <td class="pe-3 font-monospace">#FFA54F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tan2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 154, 73)">tan2</div>
+ <td>rgb(238, 154, 73)</td>
+ <td class="pe-3 font-monospace">#EE9A49</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tan3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 133, 63)">tan3</div>
+ <td>rgb(205, 133, 63)</td>
+ <td class="pe-3 font-monospace">#CD853F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tan4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 90, 43)">tan4</div>
+ <td>rgb(139, 90, 43)</td>
+ <td class="pe-3 font-monospace">#8B5A2B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PeachPuff</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 218, 185)">PeachPuff</div>
+ <td>rgb(255, 218, 185)</td>
+ <td class="pe-3 font-monospace">#FFDAB9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PeachPuff1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 218, 185)">PeachPuff1</div>
+ <td>rgb(255, 218, 185)</td>
+ <td class="pe-3 font-monospace">#FFDAB9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PeachPuff4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 119, 101)">PeachPuff4</div>
+ <td>rgb(139, 119, 101)</td>
+ <td class="pe-3 font-monospace">#8B7765</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PeachPuff2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 203, 173)">PeachPuff2</div>
+ <td>rgb(238, 203, 173)</td>
+ <td class="pe-3 font-monospace">#EECBAD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">PeachPuff3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 175, 149)">PeachPuff3</div>
+ <td>rgb(205, 175, 149)</td>
+ <td class="pe-3 font-monospace">#CDAF95</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SandyBrown</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(244, 164, 96)">SandyBrown</div>
+ <td>rgb(244, 164, 96)</td>
+ <td class="pe-3 font-monospace">#F4A460</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">seashell4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 134, 130)">seashell4</div>
+ <td>rgb(139, 134, 130)</td>
+ <td class="pe-3 font-monospace">#8B8682</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">seashell2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 229, 222)">seashell2</div>
+ <td>rgb(238, 229, 222)</td>
+ <td class="pe-3 font-monospace">#EEE5DE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">seashell3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 197, 191)">seashell3</div>
+ <td>rgb(205, 197, 191)</td>
+ <td class="pe-3 font-monospace">#CDC5BF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chocolate</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(210, 105, 30)">chocolate</div>
+ <td>rgb(210, 105, 30)</td>
+ <td class="pe-3 font-monospace">#D2691E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chocolate1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 127, 36)">chocolate1</div>
+ <td>rgb(255, 127, 36)</td>
+ <td class="pe-3 font-monospace">#FF7F24</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chocolate2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 118, 33)">chocolate2</div>
+ <td>rgb(238, 118, 33)</td>
+ <td class="pe-3 font-monospace">#EE7621</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chocolate3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 102, 29)">chocolate3</div>
+ <td>rgb(205, 102, 29)</td>
+ <td class="pe-3 font-monospace">#CD661D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">chocolate4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 69, 19)">chocolate4</div>
+ <td>rgb(139, 69, 19)</td>
+ <td class="pe-3 font-monospace">#8B4513</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">SaddleBrown</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 69, 19)">SaddleBrown</div>
+ <td>rgb(139, 69, 19)</td>
+ <td class="pe-3 font-monospace">#8B4513</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">seashell</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 245, 238)">seashell</div>
+ <td>rgb(255, 245, 238)</td>
+ <td class="pe-3 font-monospace">#FFF5EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">seashell1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 245, 238)">seashell1</div>
+ <td>rgb(255, 245, 238)</td>
+ <td class="pe-3 font-monospace">#FFF5EE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">sienna4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 71, 38)">sienna4</div>
+ <td>rgb(139, 71, 38)</td>
+ <td class="pe-3 font-monospace">#8B4726</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">sienna</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(160, 82, 45)">sienna</div>
+ <td>rgb(160, 82, 45)</td>
+ <td class="pe-3 font-monospace">#A0522D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">sienna1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 130, 71)">sienna1</div>
+ <td>rgb(255, 130, 71)</td>
+ <td class="pe-3 font-monospace">#FF8247</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">sienna2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 121, 66)">sienna2</div>
+ <td>rgb(238, 121, 66)</td>
+ <td class="pe-3 font-monospace">#EE7942</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">sienna3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 104, 57)">sienna3</div>
+ <td>rgb(205, 104, 57)</td>
+ <td class="pe-3 font-monospace">#CD6839</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSalmon3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 129, 98)">LightSalmon3</div>
+ <td>rgb(205, 129, 98)</td>
+ <td class="pe-3 font-monospace">#CD8162</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSalmon</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 160, 122)">LightSalmon</div>
+ <td>rgb(255, 160, 122)</td>
+ <td class="pe-3 font-monospace">#FFA07A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSalmon1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 160, 122)">LightSalmon1</div>
+ <td>rgb(255, 160, 122)</td>
+ <td class="pe-3 font-monospace">#FFA07A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSalmon4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 87, 66)">LightSalmon4</div>
+ <td>rgb(139, 87, 66)</td>
+ <td class="pe-3 font-monospace">#8B5742</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightSalmon2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 149, 114)">LightSalmon2</div>
+ <td>rgb(238, 149, 114)</td>
+ <td class="pe-3 font-monospace">#EE9572</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">coral</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 127, 80)">coral</div>
+ <td>rgb(255, 127, 80)</td>
+ <td class="pe-3 font-monospace">#FF7F50</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OrangeRed</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 69, 0)">OrangeRed</div>
+ <td>rgb(255, 69, 0)</td>
+ <td class="pe-3 font-monospace">#FF4500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OrangeRed1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 69, 0)">OrangeRed1</div>
+ <td>rgb(255, 69, 0)</td>
+ <td class="pe-3 font-monospace">#FF4500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OrangeRed2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 64, 0)">OrangeRed2</div>
+ <td>rgb(238, 64, 0)</td>
+ <td class="pe-3 font-monospace">#EE4000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OrangeRed3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 55, 0)">OrangeRed3</div>
+ <td>rgb(205, 55, 0)</td>
+ <td class="pe-3 font-monospace">#CD3700</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">OrangeRed4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 37, 0)">OrangeRed4</div>
+ <td>rgb(139, 37, 0)</td>
+ <td class="pe-3 font-monospace">#8B2500</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkSalmon</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(233, 150, 122)">DarkSalmon</div>
+ <td>rgb(233, 150, 122)</td>
+ <td class="pe-3 font-monospace">#E9967A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">salmon1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 140, 105)">salmon1</div>
+ <td>rgb(255, 140, 105)</td>
+ <td class="pe-3 font-monospace">#FF8C69</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">salmon2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 130, 98)">salmon2</div>
+ <td>rgb(238, 130, 98)</td>
+ <td class="pe-3 font-monospace">#EE8262</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">salmon3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 112, 84)">salmon3</div>
+ <td>rgb(205, 112, 84)</td>
+ <td class="pe-3 font-monospace">#CD7054</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">salmon4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 76, 57)">salmon4</div>
+ <td>rgb(139, 76, 57)</td>
+ <td class="pe-3 font-monospace">#8B4C39</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">coral1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 114, 86)">coral1</div>
+ <td>rgb(255, 114, 86)</td>
+ <td class="pe-3 font-monospace">#FF7256</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">coral2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 106, 80)">coral2</div>
+ <td>rgb(238, 106, 80)</td>
+ <td class="pe-3 font-monospace">#EE6A50</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">coral3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 91, 69)">coral3</div>
+ <td>rgb(205, 91, 69)</td>
+ <td class="pe-3 font-monospace">#CD5B45</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">coral4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 62, 47)">coral4</div>
+ <td>rgb(139, 62, 47)</td>
+ <td class="pe-3 font-monospace">#8B3E2F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tomato4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 54, 38)">tomato4</div>
+ <td>rgb(139, 54, 38)</td>
+ <td class="pe-3 font-monospace">#8B3626</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tomato</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 99, 71)">tomato</div>
+ <td>rgb(255, 99, 71)</td>
+ <td class="pe-3 font-monospace">#FF6347</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tomato1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 99, 71)">tomato1</div>
+ <td>rgb(255, 99, 71)</td>
+ <td class="pe-3 font-monospace">#FF6347</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tomato2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 92, 66)">tomato2</div>
+ <td>rgb(238, 92, 66)</td>
+ <td class="pe-3 font-monospace">#EE5C42</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">tomato3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 79, 57)">tomato3</div>
+ <td>rgb(205, 79, 57)</td>
+ <td class="pe-3 font-monospace">#CD4F39</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MistyRose4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(139, 125, 123)">MistyRose4</div>
+ <td>rgb(139, 125, 123)</td>
+ <td class="pe-3 font-monospace">#8B7D7B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MistyRose2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(238, 213, 210)">MistyRose2</div>
+ <td>rgb(238, 213, 210)</td>
+ <td class="pe-3 font-monospace">#EED5D2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MistyRose</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 228, 225)">MistyRose</div>
+ <td>rgb(255, 228, 225)</td>
+ <td class="pe-3 font-monospace">#FFE4E1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MistyRose1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 228, 225)">MistyRose1</div>
+ <td>rgb(255, 228, 225)</td>
+ <td class="pe-3 font-monospace">#FFE4E1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">salmon</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(250, 128, 114)">salmon</div>
+ <td>rgb(250, 128, 114)</td>
+ <td class="pe-3 font-monospace">#FA8072</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">MistyRose3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(205, 183, 181)">MistyRose3</div>
+ <td>rgb(205, 183, 181)</td>
+ <td class="pe-3 font-monospace">#CDB7B5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">white</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 255)">white</div>
+ <td>rgb(255, 255, 255)</td>
+ <td class="pe-3 font-monospace">#FFFFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray100</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 255)">gray100</div>
+ <td>rgb(255, 255, 255)</td>
+ <td class="pe-3 font-monospace">#FFFFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey100</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(255, 255, 255)">grey100</div>
+ <td>rgb(255, 255, 255)</td>
+ <td class="pe-3 font-monospace">#FFFFFF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray99</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(252, 252, 252)">gray99</div>
+ <td>rgb(252, 252, 252)</td>
+ <td class="pe-3 font-monospace">#FCFCFC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey99</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(252, 252, 252)">grey99</div>
+ <td>rgb(252, 252, 252)</td>
+ <td class="pe-3 font-monospace">#FCFCFC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray98</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(250, 250, 250)">gray98</div>
+ <td>rgb(250, 250, 250)</td>
+ <td class="pe-3 font-monospace">#FAFAFA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey98</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(250, 250, 250)">grey98</div>
+ <td>rgb(250, 250, 250)</td>
+ <td class="pe-3 font-monospace">#FAFAFA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray97</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(247, 247, 247)">gray97</div>
+ <td>rgb(247, 247, 247)</td>
+ <td class="pe-3 font-monospace">#F7F7F7</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey97</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(247, 247, 247)">grey97</div>
+ <td>rgb(247, 247, 247)</td>
+ <td class="pe-3 font-monospace">#F7F7F7</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray96</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(245, 245, 245)">gray96</div>
+ <td>rgb(245, 245, 245)</td>
+ <td class="pe-3 font-monospace">#F5F5F5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey96</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(245, 245, 245)">grey96</div>
+ <td>rgb(245, 245, 245)</td>
+ <td class="pe-3 font-monospace">#F5F5F5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">WhiteSmoke</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(245, 245, 245)">WhiteSmoke</div>
+ <td>rgb(245, 245, 245)</td>
+ <td class="pe-3 font-monospace">#F5F5F5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray95</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(242, 242, 242)">gray95</div>
+ <td>rgb(242, 242, 242)</td>
+ <td class="pe-3 font-monospace">#F2F2F2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey95</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(242, 242, 242)">grey95</div>
+ <td>rgb(242, 242, 242)</td>
+ <td class="pe-3 font-monospace">#F2F2F2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray94</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 240, 240)">gray94</div>
+ <td>rgb(240, 240, 240)</td>
+ <td class="pe-3 font-monospace">#F0F0F0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey94</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(240, 240, 240)">grey94</div>
+ <td>rgb(240, 240, 240)</td>
+ <td class="pe-3 font-monospace">#F0F0F0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray93</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(237, 237, 237)">gray93</div>
+ <td>rgb(237, 237, 237)</td>
+ <td class="pe-3 font-monospace">#EDEDED</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey93</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(237, 237, 237)">grey93</div>
+ <td>rgb(237, 237, 237)</td>
+ <td class="pe-3 font-monospace">#EDEDED</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray92</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(235, 235, 235)">gray92</div>
+ <td>rgb(235, 235, 235)</td>
+ <td class="pe-3 font-monospace">#EBEBEB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey92</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(235, 235, 235)">grey92</div>
+ <td>rgb(235, 235, 235)</td>
+ <td class="pe-3 font-monospace">#EBEBEB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray91</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(232, 232, 232)">gray91</div>
+ <td>rgb(232, 232, 232)</td>
+ <td class="pe-3 font-monospace">#E8E8E8</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey91</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(232, 232, 232)">grey91</div>
+ <td>rgb(232, 232, 232)</td>
+ <td class="pe-3 font-monospace">#E8E8E8</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray90</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(229, 229, 229)">gray90</div>
+ <td>rgb(229, 229, 229)</td>
+ <td class="pe-3 font-monospace">#E5E5E5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey90</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(229, 229, 229)">grey90</div>
+ <td>rgb(229, 229, 229)</td>
+ <td class="pe-3 font-monospace">#E5E5E5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray89</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(227, 227, 227)">gray89</div>
+ <td>rgb(227, 227, 227)</td>
+ <td class="pe-3 font-monospace">#E3E3E3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey89</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(227, 227, 227)">grey89</div>
+ <td>rgb(227, 227, 227)</td>
+ <td class="pe-3 font-monospace">#E3E3E3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray88</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(224, 224, 224)">gray88</div>
+ <td>rgb(224, 224, 224)</td>
+ <td class="pe-3 font-monospace">#E0E0E0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey88</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(224, 224, 224)">grey88</div>
+ <td>rgb(224, 224, 224)</td>
+ <td class="pe-3 font-monospace">#E0E0E0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray87</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(222, 222, 222)">gray87</div>
+ <td>rgb(222, 222, 222)</td>
+ <td class="pe-3 font-monospace">#DEDEDE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey87</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(222, 222, 222)">grey87</div>
+ <td>rgb(222, 222, 222)</td>
+ <td class="pe-3 font-monospace">#DEDEDE</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gainsboro</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(220, 220, 220)">gainsboro</div>
+ <td>rgb(220, 220, 220)</td>
+ <td class="pe-3 font-monospace">#DCDCDC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray86</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(219, 219, 219)">gray86</div>
+ <td>rgb(219, 219, 219)</td>
+ <td class="pe-3 font-monospace">#DBDBDB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey86</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(219, 219, 219)">grey86</div>
+ <td>rgb(219, 219, 219)</td>
+ <td class="pe-3 font-monospace">#DBDBDB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray85</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(217, 217, 217)">gray85</div>
+ <td>rgb(217, 217, 217)</td>
+ <td class="pe-3 font-monospace">#D9D9D9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey85</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(217, 217, 217)">grey85</div>
+ <td>rgb(217, 217, 217)</td>
+ <td class="pe-3 font-monospace">#D9D9D9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray84</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(214, 214, 214)">gray84</div>
+ <td>rgb(214, 214, 214)</td>
+ <td class="pe-3 font-monospace">#D6D6D6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey84</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(214, 214, 214)">grey84</div>
+ <td>rgb(214, 214, 214)</td>
+ <td class="pe-3 font-monospace">#D6D6D6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray83</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(212, 212, 212)">gray83</div>
+ <td>rgb(212, 212, 212)</td>
+ <td class="pe-3 font-monospace">#D4D4D4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey83</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(212, 212, 212)">grey83</div>
+ <td>rgb(212, 212, 212)</td>
+ <td class="pe-3 font-monospace">#D4D4D4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(211, 211, 211)">LightGray</div>
+ <td>rgb(211, 211, 211)</td>
+ <td class="pe-3 font-monospace">#D3D3D3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">LightGrey</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(211, 211, 211)">LightGrey</div>
+ <td>rgb(211, 211, 211)</td>
+ <td class="pe-3 font-monospace">#D3D3D3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray82</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(209, 209, 209)">gray82</div>
+ <td>rgb(209, 209, 209)</td>
+ <td class="pe-3 font-monospace">#D1D1D1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey82</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(209, 209, 209)">grey82</div>
+ <td>rgb(209, 209, 209)</td>
+ <td class="pe-3 font-monospace">#D1D1D1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray81</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(207, 207, 207)">gray81</div>
+ <td>rgb(207, 207, 207)</td>
+ <td class="pe-3 font-monospace">#CFCFCF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey81</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(207, 207, 207)">grey81</div>
+ <td>rgb(207, 207, 207)</td>
+ <td class="pe-3 font-monospace">#CFCFCF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray80</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(204, 204, 204)">gray80</div>
+ <td>rgb(204, 204, 204)</td>
+ <td class="pe-3 font-monospace">#CCCCCC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey80</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(204, 204, 204)">grey80</div>
+ <td>rgb(204, 204, 204)</td>
+ <td class="pe-3 font-monospace">#CCCCCC</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray79</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(201, 201, 201)">gray79</div>
+ <td>rgb(201, 201, 201)</td>
+ <td class="pe-3 font-monospace">#C9C9C9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey79</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(201, 201, 201)">grey79</div>
+ <td>rgb(201, 201, 201)</td>
+ <td class="pe-3 font-monospace">#C9C9C9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray78</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(199, 199, 199)">gray78</div>
+ <td>rgb(199, 199, 199)</td>
+ <td class="pe-3 font-monospace">#C7C7C7</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey78</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(199, 199, 199)">grey78</div>
+ <td>rgb(199, 199, 199)</td>
+ <td class="pe-3 font-monospace">#C7C7C7</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray77</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(196, 196, 196)">gray77</div>
+ <td>rgb(196, 196, 196)</td>
+ <td class="pe-3 font-monospace">#C4C4C4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey77</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(196, 196, 196)">grey77</div>
+ <td>rgb(196, 196, 196)</td>
+ <td class="pe-3 font-monospace">#C4C4C4</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray76</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(194, 194, 194)">gray76</div>
+ <td>rgb(194, 194, 194)</td>
+ <td class="pe-3 font-monospace">#C2C2C2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey76</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(194, 194, 194)">grey76</div>
+ <td>rgb(194, 194, 194)</td>
+ <td class="pe-3 font-monospace">#C2C2C2</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">silver</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(192, 192, 192)">silver</div>
+ <td>rgb(192, 192, 192)</td>
+ <td class="pe-3 font-monospace">#C0C0C0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray75</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(191, 191, 191)">gray75</div>
+ <td>rgb(191, 191, 191)</td>
+ <td class="pe-3 font-monospace">#BFBFBF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey75</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(191, 191, 191)">grey75</div>
+ <td>rgb(191, 191, 191)</td>
+ <td class="pe-3 font-monospace">#BFBFBF</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray74</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(189, 189, 189)">gray74</div>
+ <td>rgb(189, 189, 189)</td>
+ <td class="pe-3 font-monospace">#BDBDBD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey74</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(189, 189, 189)">grey74</div>
+ <td>rgb(189, 189, 189)</td>
+ <td class="pe-3 font-monospace">#BDBDBD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray73</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(186, 186, 186)">gray73</div>
+ <td>rgb(186, 186, 186)</td>
+ <td class="pe-3 font-monospace">#BABABA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey73</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(186, 186, 186)">grey73</div>
+ <td>rgb(186, 186, 186)</td>
+ <td class="pe-3 font-monospace">#BABABA</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray72</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(184, 184, 184)">gray72</div>
+ <td>rgb(184, 184, 184)</td>
+ <td class="pe-3 font-monospace">#B8B8B8</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey72</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(184, 184, 184)">grey72</div>
+ <td>rgb(184, 184, 184)</td>
+ <td class="pe-3 font-monospace">#B8B8B8</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray71</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(181, 181, 181)">gray71</div>
+ <td>rgb(181, 181, 181)</td>
+ <td class="pe-3 font-monospace">#B5B5B5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey71</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(181, 181, 181)">grey71</div>
+ <td>rgb(181, 181, 181)</td>
+ <td class="pe-3 font-monospace">#B5B5B5</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray70</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(179, 179, 179)">gray70</div>
+ <td>rgb(179, 179, 179)</td>
+ <td class="pe-3 font-monospace">#B3B3B3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey70</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(179, 179, 179)">grey70</div>
+ <td>rgb(179, 179, 179)</td>
+ <td class="pe-3 font-monospace">#B3B3B3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray69</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(176, 176, 176)">gray69</div>
+ <td>rgb(176, 176, 176)</td>
+ <td class="pe-3 font-monospace">#B0B0B0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey69</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(176, 176, 176)">grey69</div>
+ <td>rgb(176, 176, 176)</td>
+ <td class="pe-3 font-monospace">#B0B0B0</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray68</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(173, 173, 173)">gray68</div>
+ <td>rgb(173, 173, 173)</td>
+ <td class="pe-3 font-monospace">#ADADAD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey68</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(173, 173, 173)">grey68</div>
+ <td>rgb(173, 173, 173)</td>
+ <td class="pe-3 font-monospace">#ADADAD</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray67</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(171, 171, 171)">gray67</div>
+ <td>rgb(171, 171, 171)</td>
+ <td class="pe-3 font-monospace">#ABABAB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey67</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(171, 171, 171)">grey67</div>
+ <td>rgb(171, 171, 171)</td>
+ <td class="pe-3 font-monospace">#ABABAB</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(169, 169, 169)">DarkGray</div>
+ <td>rgb(169, 169, 169)</td>
+ <td class="pe-3 font-monospace">#A9A9A9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DarkGrey</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(169, 169, 169)">DarkGrey</div>
+ <td>rgb(169, 169, 169)</td>
+ <td class="pe-3 font-monospace">#A9A9A9</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray66</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(168, 168, 168)">gray66</div>
+ <td>rgb(168, 168, 168)</td>
+ <td class="pe-3 font-monospace">#A8A8A8</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey66</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(168, 168, 168)">grey66</div>
+ <td>rgb(168, 168, 168)</td>
+ <td class="pe-3 font-monospace">#A8A8A8</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray65</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(166, 166, 166)">gray65</div>
+ <td>rgb(166, 166, 166)</td>
+ <td class="pe-3 font-monospace">#A6A6A6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey65</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(166, 166, 166)">grey65</div>
+ <td>rgb(166, 166, 166)</td>
+ <td class="pe-3 font-monospace">#A6A6A6</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray64</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(163, 163, 163)">gray64</div>
+ <td>rgb(163, 163, 163)</td>
+ <td class="pe-3 font-monospace">#A3A3A3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey64</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(163, 163, 163)">grey64</div>
+ <td>rgb(163, 163, 163)</td>
+ <td class="pe-3 font-monospace">#A3A3A3</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray63</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(161, 161, 161)">gray63</div>
+ <td>rgb(161, 161, 161)</td>
+ <td class="pe-3 font-monospace">#A1A1A1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey63</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(161, 161, 161)">grey63</div>
+ <td>rgb(161, 161, 161)</td>
+ <td class="pe-3 font-monospace">#A1A1A1</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray62</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(158, 158, 158)">gray62</div>
+ <td>rgb(158, 158, 158)</td>
+ <td class="pe-3 font-monospace">#9E9E9E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey62</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(158, 158, 158)">grey62</div>
+ <td>rgb(158, 158, 158)</td>
+ <td class="pe-3 font-monospace">#9E9E9E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray61</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(156, 156, 156)">gray61</div>
+ <td>rgb(156, 156, 156)</td>
+ <td class="pe-3 font-monospace">#9C9C9C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey61</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(156, 156, 156)">grey61</div>
+ <td>rgb(156, 156, 156)</td>
+ <td class="pe-3 font-monospace">#9C9C9C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray60</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(153, 153, 153)">gray60</div>
+ <td>rgb(153, 153, 153)</td>
+ <td class="pe-3 font-monospace">#999999</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey60</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(153, 153, 153)">grey60</div>
+ <td>rgb(153, 153, 153)</td>
+ <td class="pe-3 font-monospace">#999999</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray59</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(150, 150, 150)">gray59</div>
+ <td>rgb(150, 150, 150)</td>
+ <td class="pe-3 font-monospace">#969696</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey59</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(150, 150, 150)">grey59</div>
+ <td>rgb(150, 150, 150)</td>
+ <td class="pe-3 font-monospace">#969696</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray58</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(148, 148, 148)">gray58</div>
+ <td>rgb(148, 148, 148)</td>
+ <td class="pe-3 font-monospace">#949494</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey58</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(148, 148, 148)">grey58</div>
+ <td>rgb(148, 148, 148)</td>
+ <td class="pe-3 font-monospace">#949494</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray57</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(145, 145, 145)">gray57</div>
+ <td>rgb(145, 145, 145)</td>
+ <td class="pe-3 font-monospace">#919191</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey57</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(145, 145, 145)">grey57</div>
+ <td>rgb(145, 145, 145)</td>
+ <td class="pe-3 font-monospace">#919191</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray56</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(143, 143, 143)">gray56</div>
+ <td>rgb(143, 143, 143)</td>
+ <td class="pe-3 font-monospace">#8F8F8F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey56</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(143, 143, 143)">grey56</div>
+ <td>rgb(143, 143, 143)</td>
+ <td class="pe-3 font-monospace">#8F8F8F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray55</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(140, 140, 140)">gray55</div>
+ <td>rgb(140, 140, 140)</td>
+ <td class="pe-3 font-monospace">#8C8C8C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey55</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(140, 140, 140)">grey55</div>
+ <td>rgb(140, 140, 140)</td>
+ <td class="pe-3 font-monospace">#8C8C8C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray54</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(138, 138, 138)">gray54</div>
+ <td>rgb(138, 138, 138)</td>
+ <td class="pe-3 font-monospace">#8A8A8A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey54</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(138, 138, 138)">grey54</div>
+ <td>rgb(138, 138, 138)</td>
+ <td class="pe-3 font-monospace">#8A8A8A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray53</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(135, 135, 135)">gray53</div>
+ <td>rgb(135, 135, 135)</td>
+ <td class="pe-3 font-monospace">#878787</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey53</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(135, 135, 135)">grey53</div>
+ <td>rgb(135, 135, 135)</td>
+ <td class="pe-3 font-monospace">#878787</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray52</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(133, 133, 133)">gray52</div>
+ <td>rgb(133, 133, 133)</td>
+ <td class="pe-3 font-monospace">#858585</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey52</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(133, 133, 133)">grey52</div>
+ <td>rgb(133, 133, 133)</td>
+ <td class="pe-3 font-monospace">#858585</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray51</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(130, 130, 130)">gray51</div>
+ <td>rgb(130, 130, 130)</td>
+ <td class="pe-3 font-monospace">#828282</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey51</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(130, 130, 130)">grey51</div>
+ <td>rgb(130, 130, 130)</td>
+ <td class="pe-3 font-monospace">#828282</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">fractal</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(128, 128, 128)">fractal</div>
+ <td>rgb(128, 128, 128)</td>
+ <td class="pe-3 font-monospace">#808080</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray50</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(127, 127, 127)">gray50</div>
+ <td>rgb(127, 127, 127)</td>
+ <td class="pe-3 font-monospace">#7F7F7F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey50</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(127, 127, 127)">grey50</div>
+ <td>rgb(127, 127, 127)</td>
+ <td class="pe-3 font-monospace">#7F7F7F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(126, 126, 126)">gray</div>
+ <td>rgb(126, 126, 126)</td>
+ <td class="pe-3 font-monospace">#7E7E7E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray49</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(125, 125, 125)">gray49</div>
+ <td>rgb(125, 125, 125)</td>
+ <td class="pe-3 font-monospace">#7D7D7D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey49</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(125, 125, 125)">grey49</div>
+ <td>rgb(125, 125, 125)</td>
+ <td class="pe-3 font-monospace">#7D7D7D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray48</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(122, 122, 122)">gray48</div>
+ <td>rgb(122, 122, 122)</td>
+ <td class="pe-3 font-monospace">#7A7A7A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey48</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(122, 122, 122)">grey48</div>
+ <td>rgb(122, 122, 122)</td>
+ <td class="pe-3 font-monospace">#7A7A7A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray47</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(120, 120, 120)">gray47</div>
+ <td>rgb(120, 120, 120)</td>
+ <td class="pe-3 font-monospace">#787878</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey47</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(120, 120, 120)">grey47</div>
+ <td>rgb(120, 120, 120)</td>
+ <td class="pe-3 font-monospace">#787878</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray46</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(117, 117, 117)">gray46</div>
+ <td>rgb(117, 117, 117)</td>
+ <td class="pe-3 font-monospace">#757575</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey46</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(117, 117, 117)">grey46</div>
+ <td>rgb(117, 117, 117)</td>
+ <td class="pe-3 font-monospace">#757575</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray45</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(115, 115, 115)">gray45</div>
+ <td>rgb(115, 115, 115)</td>
+ <td class="pe-3 font-monospace">#737373</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey45</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(115, 115, 115)">grey45</div>
+ <td>rgb(115, 115, 115)</td>
+ <td class="pe-3 font-monospace">#737373</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray44</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(112, 112, 112)">gray44</div>
+ <td>rgb(112, 112, 112)</td>
+ <td class="pe-3 font-monospace">#707070</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey44</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(112, 112, 112)">grey44</div>
+ <td>rgb(112, 112, 112)</td>
+ <td class="pe-3 font-monospace">#707070</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray43</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(110, 110, 110)">gray43</div>
+ <td>rgb(110, 110, 110)</td>
+ <td class="pe-3 font-monospace">#6E6E6E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey43</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(110, 110, 110)">grey43</div>
+ <td>rgb(110, 110, 110)</td>
+ <td class="pe-3 font-monospace">#6E6E6E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray42</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(107, 107, 107)">gray42</div>
+ <td>rgb(107, 107, 107)</td>
+ <td class="pe-3 font-monospace">#6B6B6B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey42</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(107, 107, 107)">grey42</div>
+ <td>rgb(107, 107, 107)</td>
+ <td class="pe-3 font-monospace">#6B6B6B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DimGray</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 105, 105)">DimGray</div>
+ <td>rgb(105, 105, 105)</td>
+ <td class="pe-3 font-monospace">#696969</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">DimGrey</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 105, 105)">DimGrey</div>
+ <td>rgb(105, 105, 105)</td>
+ <td class="pe-3 font-monospace">#696969</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray41</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 105, 105)">gray41</div>
+ <td>rgb(105, 105, 105)</td>
+ <td class="pe-3 font-monospace">#696969</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey41</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(105, 105, 105)">grey41</div>
+ <td>rgb(105, 105, 105)</td>
+ <td class="pe-3 font-monospace">#696969</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray40</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(102, 102, 102)">gray40</div>
+ <td>rgb(102, 102, 102)</td>
+ <td class="pe-3 font-monospace">#666666</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey40</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb(102, 102, 102)">grey40</div>
+ <td>rgb(102, 102, 102)</td>
+ <td class="pe-3 font-monospace">#666666</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray39</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 99, 99, 99)">gray39</div>
+ <td>rgb( 99, 99, 99)</td>
+ <td class="pe-3 font-monospace">#636363</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey39</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 99, 99, 99)">grey39</div>
+ <td>rgb( 99, 99, 99)</td>
+ <td class="pe-3 font-monospace">#636363</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray38</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 97, 97, 97)">gray38</div>
+ <td>rgb( 97, 97, 97)</td>
+ <td class="pe-3 font-monospace">#616161</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey38</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 97, 97, 97)">grey38</div>
+ <td>rgb( 97, 97, 97)</td>
+ <td class="pe-3 font-monospace">#616161</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray37</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 94, 94, 94)">gray37</div>
+ <td>rgb( 94, 94, 94)</td>
+ <td class="pe-3 font-monospace">#5E5E5E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey37</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 94, 94, 94)">grey37</div>
+ <td>rgb( 94, 94, 94)</td>
+ <td class="pe-3 font-monospace">#5E5E5E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray36</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 92, 92, 92)">gray36</div>
+ <td>rgb( 92, 92, 92)</td>
+ <td class="pe-3 font-monospace">#5C5C5C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey36</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 92, 92, 92)">grey36</div>
+ <td>rgb( 92, 92, 92)</td>
+ <td class="pe-3 font-monospace">#5C5C5C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray35</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 89, 89, 89)">gray35</div>
+ <td>rgb( 89, 89, 89)</td>
+ <td class="pe-3 font-monospace">#595959</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey35</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 89, 89, 89)">grey35</div>
+ <td>rgb( 89, 89, 89)</td>
+ <td class="pe-3 font-monospace">#595959</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray34</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 87, 87, 87)">gray34</div>
+ <td>rgb( 87, 87, 87)</td>
+ <td class="pe-3 font-monospace">#575757</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey34</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 87, 87, 87)">grey34</div>
+ <td>rgb( 87, 87, 87)</td>
+ <td class="pe-3 font-monospace">#575757</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray33</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 84, 84, 84)">gray33</div>
+ <td>rgb( 84, 84, 84)</td>
+ <td class="pe-3 font-monospace">#545454</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey33</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 84, 84, 84)">grey33</div>
+ <td>rgb( 84, 84, 84)</td>
+ <td class="pe-3 font-monospace">#545454</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray32</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 82, 82, 82)">gray32</div>
+ <td>rgb( 82, 82, 82)</td>
+ <td class="pe-3 font-monospace">#525252</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey32</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 82, 82, 82)">grey32</div>
+ <td>rgb( 82, 82, 82)</td>
+ <td class="pe-3 font-monospace">#525252</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray31</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 79, 79, 79)">gray31</div>
+ <td>rgb( 79, 79, 79)</td>
+ <td class="pe-3 font-monospace">#4F4F4F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey31</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 79, 79, 79)">grey31</div>
+ <td>rgb( 79, 79, 79)</td>
+ <td class="pe-3 font-monospace">#4F4F4F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray30</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 77, 77, 77)">gray30</div>
+ <td>rgb( 77, 77, 77)</td>
+ <td class="pe-3 font-monospace">#4D4D4D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey30</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 77, 77, 77)">grey30</div>
+ <td>rgb( 77, 77, 77)</td>
+ <td class="pe-3 font-monospace">#4D4D4D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray29</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 74, 74, 74)">gray29</div>
+ <td>rgb( 74, 74, 74)</td>
+ <td class="pe-3 font-monospace">#4A4A4A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey29</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 74, 74, 74)">grey29</div>
+ <td>rgb( 74, 74, 74)</td>
+ <td class="pe-3 font-monospace">#4A4A4A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray28</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 71, 71, 71)">gray28</div>
+ <td>rgb( 71, 71, 71)</td>
+ <td class="pe-3 font-monospace">#474747</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey28</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 71, 71, 71)">grey28</div>
+ <td>rgb( 71, 71, 71)</td>
+ <td class="pe-3 font-monospace">#474747</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray27</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 69, 69, 69)">gray27</div>
+ <td>rgb( 69, 69, 69)</td>
+ <td class="pe-3 font-monospace">#454545</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey27</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 69, 69, 69)">grey27</div>
+ <td>rgb( 69, 69, 69)</td>
+ <td class="pe-3 font-monospace">#454545</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray26</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 66, 66, 66)">gray26</div>
+ <td>rgb( 66, 66, 66)</td>
+ <td class="pe-3 font-monospace">#424242</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey26</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 66, 66, 66)">grey26</div>
+ <td>rgb( 66, 66, 66)</td>
+ <td class="pe-3 font-monospace">#424242</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray25</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 64, 64, 64)">gray25</div>
+ <td>rgb( 64, 64, 64)</td>
+ <td class="pe-3 font-monospace">#404040</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey25</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 64, 64, 64)">grey25</div>
+ <td>rgb( 64, 64, 64)</td>
+ <td class="pe-3 font-monospace">#404040</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray24</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 61, 61, 61)">gray24</div>
+ <td>rgb( 61, 61, 61)</td>
+ <td class="pe-3 font-monospace">#3D3D3D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey24</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 61, 61, 61)">grey24</div>
+ <td>rgb( 61, 61, 61)</td>
+ <td class="pe-3 font-monospace">#3D3D3D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray23</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 59, 59, 59)">gray23</div>
+ <td>rgb( 59, 59, 59)</td>
+ <td class="pe-3 font-monospace">#3B3B3B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey23</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 59, 59, 59)">grey23</div>
+ <td>rgb( 59, 59, 59)</td>
+ <td class="pe-3 font-monospace">#3B3B3B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray22</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 56, 56, 56)">gray22</div>
+ <td>rgb( 56, 56, 56)</td>
+ <td class="pe-3 font-monospace">#383838</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey22</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 56, 56, 56)">grey22</div>
+ <td>rgb( 56, 56, 56)</td>
+ <td class="pe-3 font-monospace">#383838</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray21</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 54, 54, 54)">gray21</div>
+ <td>rgb( 54, 54, 54)</td>
+ <td class="pe-3 font-monospace">#363636</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey21</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 54, 54, 54)">grey21</div>
+ <td>rgb( 54, 54, 54)</td>
+ <td class="pe-3 font-monospace">#363636</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray20</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 51, 51, 51)">gray20</div>
+ <td>rgb( 51, 51, 51)</td>
+ <td class="pe-3 font-monospace">#333333</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey20</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 51, 51, 51)">grey20</div>
+ <td>rgb( 51, 51, 51)</td>
+ <td class="pe-3 font-monospace">#333333</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray19</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 48, 48, 48)">gray19</div>
+ <td>rgb( 48, 48, 48)</td>
+ <td class="pe-3 font-monospace">#303030</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey19</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 48, 48, 48)">grey19</div>
+ <td>rgb( 48, 48, 48)</td>
+ <td class="pe-3 font-monospace">#303030</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray18</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 46, 46, 46)">gray18</div>
+ <td>rgb( 46, 46, 46)</td>
+ <td class="pe-3 font-monospace">#2E2E2E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey18</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 46, 46, 46)">grey18</div>
+ <td>rgb( 46, 46, 46)</td>
+ <td class="pe-3 font-monospace">#2E2E2E</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray17</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 43, 43, 43)">gray17</div>
+ <td>rgb( 43, 43, 43)</td>
+ <td class="pe-3 font-monospace">#2B2B2B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey17</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 43, 43, 43)">grey17</div>
+ <td>rgb( 43, 43, 43)</td>
+ <td class="pe-3 font-monospace">#2B2B2B</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray16</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 41, 41, 41)">gray16</div>
+ <td>rgb( 41, 41, 41)</td>
+ <td class="pe-3 font-monospace">#292929</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey16</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 41, 41, 41)">grey16</div>
+ <td>rgb( 41, 41, 41)</td>
+ <td class="pe-3 font-monospace">#292929</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray15</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 38, 38, 38)">gray15</div>
+ <td>rgb( 38, 38, 38)</td>
+ <td class="pe-3 font-monospace">#262626</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey15</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 38, 38, 38)">grey15</div>
+ <td>rgb( 38, 38, 38)</td>
+ <td class="pe-3 font-monospace">#262626</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray14</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 36, 36, 36)">gray14</div>
+ <td>rgb( 36, 36, 36)</td>
+ <td class="pe-3 font-monospace">#242424</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey14</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 36, 36, 36)">grey14</div>
+ <td>rgb( 36, 36, 36)</td>
+ <td class="pe-3 font-monospace">#242424</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray13</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 33, 33, 33)">gray13</div>
+ <td>rgb( 33, 33, 33)</td>
+ <td class="pe-3 font-monospace">#212121</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey13</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 33, 33, 33)">grey13</div>
+ <td>rgb( 33, 33, 33)</td>
+ <td class="pe-3 font-monospace">#212121</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray12</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 31, 31, 31)">gray12</div>
+ <td>rgb( 31, 31, 31)</td>
+ <td class="pe-3 font-monospace">#1F1F1F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey12</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 31, 31, 31)">grey12</div>
+ <td>rgb( 31, 31, 31)</td>
+ <td class="pe-3 font-monospace">#1F1F1F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray11</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 28, 28, 28)">gray11</div>
+ <td>rgb( 28, 28, 28)</td>
+ <td class="pe-3 font-monospace">#1C1C1C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey11</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 28, 28, 28)">grey11</div>
+ <td>rgb( 28, 28, 28)</td>
+ <td class="pe-3 font-monospace">#1C1C1C</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray10</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 26, 26, 26)">gray10</div>
+ <td>rgb( 26, 26, 26)</td>
+ <td class="pe-3 font-monospace">#1A1A1A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey10</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 26, 26, 26)">grey10</div>
+ <td>rgb( 26, 26, 26)</td>
+ <td class="pe-3 font-monospace">#1A1A1A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray9</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 23, 23, 23)">gray9</div>
+ <td>rgb( 23, 23, 23)</td>
+ <td class="pe-3 font-monospace">#171717</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey9</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 23, 23, 23)">grey9</div>
+ <td>rgb( 23, 23, 23)</td>
+ <td class="pe-3 font-monospace">#171717</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray8</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 20, 20, 20)">gray8</div>
+ <td>rgb( 20, 20, 20)</td>
+ <td class="pe-3 font-monospace">#141414</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey8</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 20, 20, 20)">grey8</div>
+ <td>rgb( 20, 20, 20)</td>
+ <td class="pe-3 font-monospace">#141414</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray7</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 18, 18, 18)">gray7</div>
+ <td>rgb( 18, 18, 18)</td>
+ <td class="pe-3 font-monospace">#121212</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey7</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 18, 18, 18)">grey7</div>
+ <td>rgb( 18, 18, 18)</td>
+ <td class="pe-3 font-monospace">#121212</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray6</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 15, 15, 15)">gray6</div>
+ <td>rgb( 15, 15, 15)</td>
+ <td class="pe-3 font-monospace">#0F0F0F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey6</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 15, 15, 15)">grey6</div>
+ <td>rgb( 15, 15, 15)</td>
+ <td class="pe-3 font-monospace">#0F0F0F</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray5</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 13, 13, 13)">gray5</div>
+ <td>rgb( 13, 13, 13)</td>
+ <td class="pe-3 font-monospace">#0D0D0D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey5</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 13, 13, 13)">grey5</div>
+ <td>rgb( 13, 13, 13)</td>
+ <td class="pe-3 font-monospace">#0D0D0D</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 10, 10, 10)">gray4</div>
+ <td>rgb( 10, 10, 10)</td>
+ <td class="pe-3 font-monospace">#0A0A0A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey4</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 10, 10, 10)">grey4</div>
+ <td>rgb( 10, 10, 10)</td>
+ <td class="pe-3 font-monospace">#0A0A0A</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 8, 8, 8)">gray3</div>
+ <td>rgb( 8, 8, 8)</td>
+ <td class="pe-3 font-monospace">#080808</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey3</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 8, 8, 8)">grey3</div>
+ <td>rgb( 8, 8, 8)</td>
+ <td class="pe-3 font-monospace">#080808</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 5, 5, 5)">gray2</div>
+ <td>rgb( 5, 5, 5)</td>
+ <td class="pe-3 font-monospace">#050505</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey2</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 5, 5, 5)">grey2</div>
+ <td>rgb( 5, 5, 5)</td>
+ <td class="pe-3 font-monospace">#050505</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 3, 3, 3)">gray1</div>
+ <td>rgb( 3, 3, 3)</td>
+ <td class="pe-3 font-monospace">#030303</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey1</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 3, 3, 3)">grey1</div>
+ <td>rgb( 3, 3, 3)</td>
+ <td class="pe-3 font-monospace">#030303</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">black</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 0)">black</div>
+ <td>rgb( 0, 0, 0)</td>
+ <td class="pe-3 font-monospace">#000000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">gray0</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 0)">gray0</div>
+ <td>rgb( 0, 0, 0)</td>
+ <td class="pe-3 font-monospace">#000000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">grey0</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 0)">grey0</div>
+ <td>rgb( 0, 0, 0)</td>
+ <td class="pe-3 font-monospace">#000000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">opaque</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: rgb( 0, 0, 0)">opaque</div>
+ <td>rgb( 0, 0, 0)</td>
+ <td class="pe-3 font-monospace">#000000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">none</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: white">none</div>
+ <td>rgba( 0, 0, 0, 0.0)</td>
+ <td class="pe-3 font-monospace">#00000000</td>
+ </tr>
+
+ <tr>
+ <td class="ps-3 fw-medium">transparent</td>
+ <td class="text-center">
+ <div class="d-inline-block rounded border border-secondary-subtle px-3 py-1 text-white small w-100" style="background-color: white">transparent</div>
+ <td>rgba( 0, 0, 0, 0.0)</td>
+ <td class="pe-3 font-monospace">#00000000</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </div>
+ </section>
+</div>
-<p>ImageMagick also supports wide-gamut color such as <code>Lab</code>, <code>LCH</code>, and <code>Display-P3</code>.</p>
-
-<h2><a class="anchor" id="color_names"></a>List of Color Names</h2>
-
-<p>The table below provides a list of named colors recognized by ImageMagick:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
-<tbody>
- <tr>
- <th align="right">Name</th>
- <th align="center">Color</th>
- <th align="left">RGB</th>
- <th align="left">Hex</th>
- </tr>
-
- <tr>
- <td align="right">snow</td>
- <td align="center" style="background-color: rgb(255, 250, 250)">snow</td>
- <td align="left">rgb(255, 250, 250)</td>
- <td align="left">#FFFAFA</td>
- </tr>
-
- <tr>
- <td align="right">snow1</td>
- <td align="center" style="background-color: rgb(255, 250, 250)">snow1</td>
- <td align="left">rgb(255, 250, 250)</td>
- <td align="left">#FFFAFA</td>
- </tr>
-
- <tr>
- <td align="right">snow2</td>
- <td align="center" style="background-color: rgb(238, 233, 233)">snow2</td>
- <td align="left">rgb(238, 233, 233)</td>
- <td align="left">#EEE9E9</td>
- </tr>
-
- <tr>
- <td align="right">RosyBrown1</td>
- <td align="center" style="background-color: rgb(255, 193, 193)">RosyBrown1</td>
- <td align="left">rgb(255, 193, 193)</td>
- <td align="left">#FFC1C1</td>
- </tr>
-
- <tr>
- <td align="right">RosyBrown2</td>
- <td align="center" style="background-color: rgb(238, 180, 180)">RosyBrown2</td>
- <td align="left">rgb(238, 180, 180)</td>
- <td align="left">#EEB4B4</td>
- </tr>
-
- <tr>
- <td align="right">snow3</td>
- <td align="center" style="background-color: rgb(205, 201, 201)">snow3</td>
- <td align="left">rgb(205, 201, 201)</td>
- <td align="left">#CDC9C9</td>
- </tr>
-
- <tr>
- <td align="right">LightCoral</td>
- <td align="center" style="background-color: rgb(240, 128, 128)">LightCoral</td>
- <td align="left">rgb(240, 128, 128)</td>
- <td align="left">#F08080</td>
- </tr>
-
- <tr>
- <td align="right">IndianRed1</td>
- <td align="center" style="background-color: rgb(255, 106, 106)">IndianRed1</td>
- <td align="left">rgb(255, 106, 106)</td>
- <td align="left">#FF6A6A</td>
- </tr>
-
- <tr>
- <td align="right">RosyBrown3</td>
- <td align="center" style="background-color: rgb(205, 155, 155)">RosyBrown3</td>
- <td align="left">rgb(205, 155, 155)</td>
- <td align="left">#CD9B9B</td>
- </tr>
-
- <tr>
- <td align="right">IndianRed2</td>
- <td align="center" style="background-color: rgb(238, 99, 99)">IndianRed2</td>
- <td align="left">rgb(238, 99, 99)</td>
- <td align="left">#EE6363</td>
- </tr>
-
- <tr>
- <td align="right">RosyBrown</td>
- <td align="center" style="background-color: rgb(188, 143, 143)">RosyBrown</td>
- <td align="left">rgb(188, 143, 143)</td>
- <td align="left">#BC8F8F</td>
- </tr>
-
- <tr>
- <td align="right">brown1</td>
- <td align="center" style="background-color: rgb(255, 64, 64)">brown1</td>
- <td align="left">rgb(255, 64, 64)</td>
- <td align="left">#FF4040</td>
- </tr>
-
- <tr>
- <td align="right">firebrick1</td>
- <td align="center" style="background-color: rgb(255, 48, 48)">firebrick1</td>
- <td align="left">rgb(255, 48, 48)</td>
- <td align="left">#FF3030</td>
- </tr>
-
- <tr>
- <td align="right">brown2</td>
- <td align="center" style="background-color: rgb(238, 59, 59)">brown2</td>
- <td align="left">rgb(238, 59, 59)</td>
- <td align="left">#EE3B3B</td>
- </tr>
-
- <tr>
- <td align="right">IndianRed</td>
- <td align="center" style="background-color: rgb(205, 92, 92)">IndianRed</td>
- <td align="left">rgb(205, 92, 92)</td>
- <td align="left">#CD5C5C</td>
- </tr>
-
- <tr>
- <td align="right">IndianRed3</td>
- <td align="center" style="background-color: rgb(205, 85, 85)">IndianRed3</td>
- <td align="left">rgb(205, 85, 85)</td>
- <td align="left">#CD5555</td>
- </tr>
-
- <tr>
- <td align="right">firebrick2</td>
- <td align="center" style="background-color: rgb(238, 44, 44)">firebrick2</td>
- <td align="left">rgb(238, 44, 44)</td>
- <td align="left">#EE2C2C</td>
- </tr>
-
- <tr>
- <td align="right">snow4</td>
- <td align="center" style="background-color: rgb(139, 137, 137)">snow4</td>
- <td align="left">rgb(139, 137, 137)</td>
- <td align="left">#8B8989</td>
- </tr>
-
- <tr>
- <td align="right">brown3</td>
- <td align="center" style="background-color: rgb(205, 51, 51)">brown3</td>
- <td align="left">rgb(205, 51, 51)</td>
- <td align="left">#CD3333</td>
- </tr>
-
- <tr>
- <td align="right">red</td>
- <td align="center" style="background-color: rgb(255, 0, 0)">red</td>
- <td align="left">rgb(255, 0, 0)</td>
- <td align="left">#FF0000</td>
- </tr>
-
- <tr>
- <td align="right">red1</td>
- <td align="center" style="background-color: rgb(255, 0, 0)">red1</td>
- <td align="left">rgb(255, 0, 0)</td>
- <td align="left">#FF0000</td>
- </tr>
-
- <tr>
- <td align="right">RosyBrown4</td>
- <td align="center" style="background-color: rgb(139, 105, 105)">RosyBrown4</td>
- <td align="left">rgb(139, 105, 105)</td>
- <td align="left">#8B6969</td>
- </tr>
-
- <tr>
- <td align="right">firebrick3</td>
- <td align="center" style="background-color: rgb(205, 38, 38)">firebrick3</td>
- <td align="left">rgb(205, 38, 38)</td>
- <td align="left">#CD2626</td>
- </tr>
-
- <tr>
- <td align="right">red2</td>
- <td align="center" style="background-color: rgb(238, 0, 0)">red2</td>
- <td align="left">rgb(238, 0, 0)</td>
- <td align="left">#EE0000</td>
- </tr>
-
- <tr>
- <td align="right">firebrick</td>
- <td align="center" style="background-color: rgb(178, 34, 34)">firebrick</td>
- <td align="left">rgb(178, 34, 34)</td>
- <td align="left">#B22222</td>
- </tr>
-
- <tr>
- <td align="right">brown</td>
- <td align="center" style="background-color: rgb(165, 42, 42)">brown</td>
- <td align="left">rgb(165, 42, 42)</td>
- <td align="left">#A52A2A</td>
- </tr>
-
- <tr>
- <td align="right">red3</td>
- <td align="center" style="background-color: rgb(205, 0, 0)">red3</td>
- <td align="left">rgb(205, 0, 0)</td>
- <td align="left">#CD0000</td>
- </tr>
-
- <tr>
- <td align="right">IndianRed4</td>
- <td align="center" style="background-color: rgb(139, 58, 58)">IndianRed4</td>
- <td align="left">rgb(139, 58, 58)</td>
- <td align="left">#8B3A3A</td>
- </tr>
-
- <tr>
- <td align="right">brown4</td>
- <td align="center" style="background-color: rgb(139, 35, 35)">brown4</td>
- <td align="left">rgb(139, 35, 35)</td>
- <td align="left">#8B2323</td>
- </tr>
-
- <tr>
- <td align="right">firebrick4</td>
- <td align="center" style="background-color: rgb(139, 26, 26)">firebrick4</td>
- <td align="left">rgb(139, 26, 26)</td>
- <td align="left">#8B1A1A</td>
- </tr>
-
- <tr>
- <td align="right">DarkRed</td>
- <td align="center" style="background-color: rgb(139, 0, 0)">DarkRed</td>
- <td align="left">rgb(139, 0, 0)</td>
- <td align="left">#8B0000</td>
- </tr>
-
- <tr>
- <td align="right">red4</td>
- <td align="center" style="background-color: rgb(139, 0, 0)">red4</td>
- <td align="left">rgb(139, 0, 0)</td>
- <td align="left">#8B0000</td>
- </tr>
-
- <tr>
- <td align="right">maroon</td>
- <td align="center" style="background-color: rgb(128, 0, 0)">maroon (SVG compliance)</td>
- <td align="left">rgb(128, 0, 0)</td>
- <td align="left">#800000</td>
- </tr>
-
- <tr>
- <td align="right">LightPink1</td>
- <td align="center" style="background-color: rgb(255, 174, 185)">LightPink1</td>
- <td align="left">rgb(255, 174, 185)</td>
- <td align="left">#FFAEB9</td>
- </tr>
-
- <tr>
- <td align="right">LightPink3</td>
- <td align="center" style="background-color: rgb(205, 140, 149)">LightPink3</td>
- <td align="left">rgb(205, 140, 149)</td>
- <td align="left">#CD8C95</td>
- </tr>
-
- <tr>
- <td align="right">LightPink4</td>
- <td align="center" style="background-color: rgb(139, 95, 101)">LightPink4</td>
- <td align="left">rgb(139, 95, 101)</td>
- <td align="left">#8B5F65</td>
- </tr>
-
- <tr>
- <td align="right">LightPink2</td>
- <td align="center" style="background-color: rgb(238, 162, 173)">LightPink2</td>
- <td align="left">rgb(238, 162, 173)</td>
- <td align="left">#EEA2AD</td>
- </tr>
-
- <tr>
- <td align="right">LightPink</td>
- <td align="center" style="background-color: rgb(255, 182, 193)">LightPink</td>
- <td align="left">rgb(255, 182, 193)</td>
- <td align="left">#FFB6C1</td>
- </tr>
-
- <tr>
- <td align="right">pink</td>
- <td align="center" style="background-color: rgb(255, 192, 203)">pink</td>
- <td align="left">rgb(255, 192, 203)</td>
- <td align="left">#FFC0CB</td>
- </tr>
-
- <tr>
- <td align="right">crimson</td>
- <td align="center" style="background-color: rgb(220, 20, 60)">crimson</td>
- <td align="left">rgb(220, 20, 60)</td>
- <td align="left">#DC143C</td>
- </tr>
-
- <tr>
- <td align="right">pink1</td>
- <td align="center" style="background-color: rgb(255, 181, 197)">pink1</td>
- <td align="left">rgb(255, 181, 197)</td>
- <td align="left">#FFB5C5</td>
- </tr>
-
- <tr>
- <td align="right">pink2</td>
- <td align="center" style="background-color: rgb(238, 169, 184)">pink2</td>
- <td align="left">rgb(238, 169, 184)</td>
- <td align="left">#EEA9B8</td>
- </tr>
-
- <tr>
- <td align="right">pink3</td>
- <td align="center" style="background-color: rgb(205, 145, 158)">pink3</td>
- <td align="left">rgb(205, 145, 158)</td>
- <td align="left">#CD919E</td>
- </tr>
-
- <tr>
- <td align="right">pink4</td>
- <td align="center" style="background-color: rgb(139, 99, 108)">pink4</td>
- <td align="left">rgb(139, 99, 108)</td>
- <td align="left">#8B636C</td>
- </tr>
-
- <tr>
- <td align="right">PaleVioletRed4</td>
- <td align="center" style="background-color: rgb(139, 71, 93)">PaleVioletRed4</td>
- <td align="left">rgb(139, 71, 93)</td>
- <td align="left">#8B475D</td>
- </tr>
-
- <tr>
- <td align="right">PaleVioletRed</td>
- <td align="center" style="background-color: rgb(219, 112, 147)">PaleVioletRed</td>
- <td align="left">rgb(219, 112, 147)</td>
- <td align="left">#DB7093</td>
- </tr>
-
- <tr>
- <td align="right">PaleVioletRed2</td>
- <td align="center" style="background-color: rgb(238, 121, 159)">PaleVioletRed2</td>
- <td align="left">rgb(238, 121, 159)</td>
- <td align="left">#EE799F</td>
- </tr>
-
- <tr>
- <td align="right">PaleVioletRed1</td>
- <td align="center" style="background-color: rgb(255, 130, 171)">PaleVioletRed1</td>
- <td align="left">rgb(255, 130, 171)</td>
- <td align="left">#FF82AB</td>
- </tr>
-
- <tr>
- <td align="right">PaleVioletRed3</td>
- <td align="center" style="background-color: rgb(205, 104, 137)">PaleVioletRed3</td>
- <td align="left">rgb(205, 104, 137)</td>
- <td align="left">#CD6889</td>
- </tr>
-
- <tr>
- <td align="right">LavenderBlush</td>
- <td align="center" style="background-color: rgb(255, 240, 245)">LavenderBlush</td>
- <td align="left">rgb(255, 240, 245)</td>
- <td align="left">#FFF0F5</td>
- </tr>
-
- <tr>
- <td align="right">LavenderBlush1</td>
- <td align="center" style="background-color: rgb(255, 240, 245)">LavenderBlush1</td>
- <td align="left">rgb(255, 240, 245)</td>
- <td align="left">#FFF0F5</td>
- </tr>
-
- <tr>
- <td align="right">LavenderBlush3</td>
- <td align="center" style="background-color: rgb(205, 193, 197)">LavenderBlush3</td>
- <td align="left">rgb(205, 193, 197)</td>
- <td align="left">#CDC1C5</td>
- </tr>
-
- <tr>
- <td align="right">LavenderBlush2</td>
- <td align="center" style="background-color: rgb(238, 224, 229)">LavenderBlush2</td>
- <td align="left">rgb(238, 224, 229)</td>
- <td align="left">#EEE0E5</td>
- </tr>
-
- <tr>
- <td align="right">LavenderBlush4</td>
- <td align="center" style="background-color: rgb(139, 131, 134)">LavenderBlush4</td>
- <td align="left">rgb(139, 131, 134)</td>
- <td align="left">#8B8386</td>
- </tr>
-
- <tr>
- <td align="right">maroon</td>
- <td align="center" style="background-color: rgb(176, 48, 96)">maroon (X11 compliance)</td>
- <td align="left">rgb(176, 48, 96)</td>
- <td align="left">#B03060</td>
- </tr>
-
- <tr>
- <td align="right">HotPink3</td>
- <td align="center" style="background-color: rgb(205, 96, 144)">HotPink3</td>
- <td align="left">rgb(205, 96, 144)</td>
- <td align="left">#CD6090</td>
- </tr>
-
- <tr>
- <td align="right">VioletRed3</td>
- <td align="center" style="background-color: rgb(205, 50, 120)">VioletRed3</td>
- <td align="left">rgb(205, 50, 120)</td>
- <td align="left">#CD3278</td>
- </tr>
-
- <tr>
- <td align="right">VioletRed1</td>
- <td align="center" style="background-color: rgb(255, 62, 150)">VioletRed1</td>
- <td align="left">rgb(255, 62, 150)</td>
- <td align="left">#FF3E96</td>
- </tr>
-
- <tr>
- <td align="right">VioletRed2</td>
- <td align="center" style="background-color: rgb(238, 58, 140)">VioletRed2</td>
- <td align="left">rgb(238, 58, 140)</td>
- <td align="left">#EE3A8C</td>
- </tr>
-
- <tr>
- <td align="right">VioletRed4</td>
- <td align="center" style="background-color: rgb(139, 34, 82)">VioletRed4</td>
- <td align="left">rgb(139, 34, 82)</td>
- <td align="left">#8B2252</td>
- </tr>
-
- <tr>
- <td align="right">HotPink2</td>
- <td align="center" style="background-color: rgb(238, 106, 167)">HotPink2</td>
- <td align="left">rgb(238, 106, 167)</td>
- <td align="left">#EE6AA7</td>
- </tr>
-
- <tr>
- <td align="right">HotPink1</td>
- <td align="center" style="background-color: rgb(255, 110, 180)">HotPink1</td>
- <td align="left">rgb(255, 110, 180)</td>
- <td align="left">#FF6EB4</td>
- </tr>
-
- <tr>
- <td align="right">HotPink4</td>
- <td align="center" style="background-color: rgb(139, 58, 98)">HotPink4</td>
- <td align="left">rgb(139, 58, 98)</td>
- <td align="left">#8B3A62</td>
- </tr>
-
- <tr>
- <td align="right">HotPink</td>
- <td align="center" style="background-color: rgb(255, 105, 180)">HotPink</td>
- <td align="left">rgb(255, 105, 180)</td>
- <td align="left">#FF69B4</td>
- </tr>
-
- <tr>
- <td align="right">DeepPink</td>
- <td align="center" style="background-color: rgb(255, 20, 147)">DeepPink</td>
- <td align="left">rgb(255, 20, 147)</td>
- <td align="left">#FF1493</td>
- </tr>
-
- <tr>
- <td align="right">DeepPink1</td>
- <td align="center" style="background-color: rgb(255, 20, 147)">DeepPink1</td>
- <td align="left">rgb(255, 20, 147)</td>
- <td align="left">#FF1493</td>
- </tr>
-
- <tr>
- <td align="right">DeepPink2</td>
- <td align="center" style="background-color: rgb(238, 18, 137)">DeepPink2</td>
- <td align="left">rgb(238, 18, 137)</td>
- <td align="left">#EE1289</td>
- </tr>
-
- <tr>
- <td align="right">DeepPink3</td>
- <td align="center" style="background-color: rgb(205, 16, 118)">DeepPink3</td>
- <td align="left">rgb(205, 16, 118)</td>
- <td align="left">#CD1076</td>
- </tr>
-
- <tr>
- <td align="right">DeepPink4</td>
- <td align="center" style="background-color: rgb(139, 10, 80)">DeepPink4</td>
- <td align="left">rgb(139, 10, 80)</td>
- <td align="left">#8B0A50</td>
- </tr>
-
- <tr>
- <td align="right">maroon1</td>
- <td align="center" style="background-color: rgb(255, 52, 179)">maroon1</td>
- <td align="left">rgb(255, 52, 179)</td>
- <td align="left">#FF34B3</td>
- </tr>
-
- <tr>
- <td align="right">maroon2</td>
- <td align="center" style="background-color: rgb(238, 48, 167)">maroon2</td>
- <td align="left">rgb(238, 48, 167)</td>
- <td align="left">#EE30A7</td>
- </tr>
-
- <tr>
- <td align="right">maroon3</td>
- <td align="center" style="background-color: rgb(205, 41, 144)">maroon3</td>
- <td align="left">rgb(205, 41, 144)</td>
- <td align="left">#CD2990</td>
- </tr>
-
- <tr>
- <td align="right">maroon4</td>
- <td align="center" style="background-color: rgb(139, 28, 98)">maroon4</td>
- <td align="left">rgb(139, 28, 98)</td>
- <td align="left">#8B1C62</td>
- </tr>
-
- <tr>
- <td align="right">MediumVioletRed</td>
- <td align="center" style="background-color: rgb(199, 21, 133)">MediumVioletRed</td>
- <td align="left">rgb(199, 21, 133)</td>
- <td align="left">#C71585</td>
- </tr>
-
- <tr>
- <td align="right">VioletRed</td>
- <td align="center" style="background-color: rgb(208, 32, 144)">VioletRed</td>
- <td align="left">rgb(208, 32, 144)</td>
- <td align="left">#D02090</td>
- </tr>
-
- <tr>
- <td align="right">orchid2</td>
- <td align="center" style="background-color: rgb(238, 122, 233)">orchid2</td>
- <td align="left">rgb(238, 122, 233)</td>
- <td align="left">#EE7AE9</td>
- </tr>
-
- <tr>
- <td align="right">orchid</td>
- <td align="center" style="background-color: rgb(218, 112, 214)">orchid</td>
- <td align="left">rgb(218, 112, 214)</td>
- <td align="left">#DA70D6</td>
- </tr>
-
- <tr>
- <td align="right">orchid1</td>
- <td align="center" style="background-color: rgb(255, 131, 250)">orchid1</td>
- <td align="left">rgb(255, 131, 250)</td>
- <td align="left">#FF83FA</td>
- </tr>
-
- <tr>
- <td align="right">orchid3</td>
- <td align="center" style="background-color: rgb(205, 105, 201)">orchid3</td>
- <td align="left">rgb(205, 105, 201)</td>
- <td align="left">#CD69C9</td>
- </tr>
-
- <tr>
- <td align="right">orchid4</td>
- <td align="center" style="background-color: rgb(139, 71, 137)">orchid4</td>
- <td align="left">rgb(139, 71, 137)</td>
- <td align="left">#8B4789</td>
- </tr>
-
- <tr>
- <td align="right">thistle1</td>
- <td align="center" style="background-color: rgb(255, 225, 255)">thistle1</td>
- <td align="left">rgb(255, 225, 255)</td>
- <td align="left">#FFE1FF</td>
- </tr>
-
- <tr>
- <td align="right">thistle2</td>
- <td align="center" style="background-color: rgb(238, 210, 238)">thistle2</td>
- <td align="left">rgb(238, 210, 238)</td>
- <td align="left">#EED2EE</td>
- </tr>
-
- <tr>
- <td align="right">plum1</td>
- <td align="center" style="background-color: rgb(255, 187, 255)">plum1</td>
- <td align="left">rgb(255, 187, 255)</td>
- <td align="left">#FFBBFF</td>
- </tr>
-
- <tr>
- <td align="right">plum2</td>
- <td align="center" style="background-color: rgb(238, 174, 238)">plum2</td>
- <td align="left">rgb(238, 174, 238)</td>
- <td align="left">#EEAEEE</td>
- </tr>
-
- <tr>
- <td align="right">thistle</td>
- <td align="center" style="background-color: rgb(216, 191, 216)">thistle</td>
- <td align="left">rgb(216, 191, 216)</td>
- <td align="left">#D8BFD8</td>
- </tr>
-
- <tr>
- <td align="right">thistle3</td>
- <td align="center" style="background-color: rgb(205, 181, 205)">thistle3</td>
- <td align="left">rgb(205, 181, 205)</td>
- <td align="left">#CDB5CD</td>
- </tr>
-
- <tr>
- <td align="right">plum</td>
- <td align="center" style="background-color: rgb(221, 160, 221)">plum</td>
- <td align="left">rgb(221, 160, 221)</td>
- <td align="left">#DDA0DD</td>
- </tr>
-
- <tr>
- <td align="right">violet</td>
- <td align="center" style="background-color: rgb(238, 130, 238)">violet</td>
- <td align="left">rgb(238, 130, 238)</td>
- <td align="left">#EE82EE</td>
- </tr>
-
- <tr>
- <td align="right">plum3</td>
- <td align="center" style="background-color: rgb(205, 150, 205)">plum3</td>
- <td align="left">rgb(205, 150, 205)</td>
- <td align="left">#CD96CD</td>
- </tr>
-
- <tr>
- <td align="right">thistle4</td>
- <td align="center" style="background-color: rgb(139, 123, 139)">thistle4</td>
- <td align="left">rgb(139, 123, 139)</td>
- <td align="left">#8B7B8B</td>
- </tr>
-
- <tr>
- <td align="right">fuchsia</td>
- <td align="center" style="background-color: rgb(255, 0, 255)">fuchsia</td>
- <td align="left">rgb(255, 0, 255)</td>
- <td align="left">#FF00FF</td>
- </tr>
-
- <tr>
- <td align="right">magenta</td>
- <td align="center" style="background-color: rgb(255, 0, 255)">magenta</td>
- <td align="left">rgb(255, 0, 255)</td>
- <td align="left">#FF00FF</td>
- </tr>
-
- <tr>
- <td align="right">magenta1</td>
- <td align="center" style="background-color: rgb(255, 0, 255)">magenta1</td>
- <td align="left">rgb(255, 0, 255)</td>
- <td align="left">#FF00FF</td>
- </tr>
-
- <tr>
- <td align="right">plum4</td>
- <td align="center" style="background-color: rgb(139, 102, 139)">plum4</td>
- <td align="left">rgb(139, 102, 139)</td>
- <td align="left">#8B668B</td>
- </tr>
-
- <tr>
- <td align="right">magenta2</td>
- <td align="center" style="background-color: rgb(238, 0, 238)">magenta2</td>
- <td align="left">rgb(238, 0, 238)</td>
- <td align="left">#EE00EE</td>
- </tr>
-
- <tr>
- <td align="right">magenta3</td>
- <td align="center" style="background-color: rgb(205, 0, 205)">magenta3</td>
- <td align="left">rgb(205, 0, 205)</td>
- <td align="left">#CD00CD</td>
- </tr>
-
- <tr>
- <td align="right">DarkMagenta</td>
- <td align="center" style="background-color: rgb(139, 0, 139)">DarkMagenta</td>
- <td align="left">rgb(139, 0, 139)</td>
- <td align="left">#8B008B</td>
- </tr>
-
- <tr>
- <td align="right">magenta4</td>
- <td align="center" style="background-color: rgb(139, 0, 139)">magenta4</td>
- <td align="left">rgb(139, 0, 139)</td>
- <td align="left">#8B008B</td>
- </tr>
-
- <tr>
- <td align="right">purple</td>
- <td align="center" style="background-color: rgb(128, 0, 128)">purple (SVG compliance)</td>
- <td align="left">rgb(128, 0, 128)</td>
- <td align="left">#800080</td>
- </tr>
-
- <tr>
- <td align="right">MediumOrchid</td>
- <td align="center" style="background-color: rgb(186, 85, 211)">MediumOrchid</td>
- <td align="left">rgb(186, 85, 211)</td>
- <td align="left">#BA55D3</td>
- </tr>
-
- <tr>
- <td align="right">MediumOrchid1</td>
- <td align="center" style="background-color: rgb(224, 102, 255)">MediumOrchid1</td>
- <td align="left">rgb(224, 102, 255)</td>
- <td align="left">#E066FF</td>
- </tr>
-
- <tr>
- <td align="right">MediumOrchid2</td>
- <td align="center" style="background-color: rgb(209, 95, 238)">MediumOrchid2</td>
- <td align="left">rgb(209, 95, 238)</td>
- <td align="left">#D15FEE</td>
- </tr>
-
- <tr>
- <td align="right">MediumOrchid3</td>
- <td align="center" style="background-color: rgb(180, 82, 205)">MediumOrchid3</td>
- <td align="left">rgb(180, 82, 205)</td>
- <td align="left">#B452CD</td>
- </tr>
-
- <tr>
- <td align="right">MediumOrchid4</td>
- <td align="center" style="background-color: rgb(122, 55, 139)">MediumOrchid4</td>
- <td align="left">rgb(122, 55, 139)</td>
- <td align="left">#7A378B</td>
- </tr>
-
- <tr>
- <td align="right">DarkViolet</td>
- <td align="center" style="background-color: rgb(148, 0, 211)">DarkViolet</td>
- <td align="left">rgb(148, 0, 211)</td>
- <td align="left">#9400D3</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrchid</td>
- <td align="center" style="background-color: rgb(153, 50, 204)">DarkOrchid</td>
- <td align="left">rgb(153, 50, 204)</td>
- <td align="left">#9932CC</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrchid1</td>
- <td align="center" style="background-color: rgb(191, 62, 255)">DarkOrchid1</td>
- <td align="left">rgb(191, 62, 255)</td>
- <td align="left">#BF3EFF</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrchid3</td>
- <td align="center" style="background-color: rgb(154, 50, 205)">DarkOrchid3</td>
- <td align="left">rgb(154, 50, 205)</td>
- <td align="left">#9A32CD</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrchid2</td>
- <td align="center" style="background-color: rgb(178, 58, 238)">DarkOrchid2</td>
- <td align="left">rgb(178, 58, 238)</td>
- <td align="left">#B23AEE</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrchid4</td>
- <td align="center" style="background-color: rgb(104, 34, 139)">DarkOrchid4</td>
- <td align="left">rgb(104, 34, 139)</td>
- <td align="left">#68228B</td>
- </tr>
-
- <tr>
- <td align="right">purple</td>
- <td align="center" style="background-color: rgb(160, 32, 240)">purple (X11 compliance)</td>
- <td align="left">rgb(160, 32, 240)</td>
- <td align="left">#A020F0</td>
- </tr>
-
- <tr>
- <td align="right">indigo</td>
- <td align="center" style="background-color: rgb( 75, 0, 130)">indigo</td>
- <td align="left">rgb( 75, 0, 130)</td>
- <td align="left">#4B0082</td>
- </tr>
-
- <tr>
- <td align="right">BlueViolet</td>
- <td align="center" style="background-color: rgb(138, 43, 226)">BlueViolet</td>
- <td align="left">rgb(138, 43, 226)</td>
- <td align="left">#8A2BE2</td>
- </tr>
-
- <tr>
- <td align="right">purple2</td>
- <td align="center" style="background-color: rgb(145, 44, 238)">purple2</td>
- <td align="left">rgb(145, 44, 238)</td>
- <td align="left">#912CEE</td>
- </tr>
-
- <tr>
- <td align="right">purple3</td>
- <td align="center" style="background-color: rgb(125, 38, 205)">purple3</td>
- <td align="left">rgb(125, 38, 205)</td>
- <td align="left">#7D26CD</td>
- </tr>
-
- <tr>
- <td align="right">purple4</td>
- <td align="center" style="background-color: rgb( 85, 26, 139)">purple4</td>
- <td align="left">rgb( 85, 26, 139)</td>
- <td align="left">#551A8B</td>
- </tr>
-
- <tr>
- <td align="right">purple1</td>
- <td align="center" style="background-color: rgb(155, 48, 255)">purple1</td>
- <td align="left">rgb(155, 48, 255)</td>
- <td align="left">#9B30FF</td>
- </tr>
-
- <tr>
- <td align="right">MediumPurple</td>
- <td align="center" style="background-color: rgb(147, 112, 219)">MediumPurple</td>
- <td align="left">rgb(147, 112, 219)</td>
- <td align="left">#9370DB</td>
- </tr>
-
- <tr>
- <td align="right">MediumPurple1</td>
- <td align="center" style="background-color: rgb(171, 130, 255)">MediumPurple1</td>
- <td align="left">rgb(171, 130, 255)</td>
- <td align="left">#AB82FF</td>
- </tr>
-
- <tr>
- <td align="right">MediumPurple2</td>
- <td align="center" style="background-color: rgb(159, 121, 238)">MediumPurple2</td>
- <td align="left">rgb(159, 121, 238)</td>
- <td align="left">#9F79EE</td>
- </tr>
-
- <tr>
- <td align="right">MediumPurple3</td>
- <td align="center" style="background-color: rgb(137, 104, 205)">MediumPurple3</td>
- <td align="left">rgb(137, 104, 205)</td>
- <td align="left">#8968CD</td>
- </tr>
-
- <tr>
- <td align="right">MediumPurple4</td>
- <td align="center" style="background-color: rgb( 93, 71, 139)">MediumPurple4</td>
- <td align="left">rgb( 93, 71, 139)</td>
- <td align="left">#5D478B</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateBlue</td>
- <td align="center" style="background-color: rgb( 72, 61, 139)">DarkSlateBlue</td>
- <td align="left">rgb( 72, 61, 139)</td>
- <td align="left">#483D8B</td>
- </tr>
-
- <tr>
- <td align="right">LightSlateBlue</td>
- <td align="center" style="background-color: rgb(132, 112, 255)">LightSlateBlue</td>
- <td align="left">rgb(132, 112, 255)</td>
- <td align="left">#8470FF</td>
- </tr>
-
- <tr>
- <td align="right">MediumSlateBlue</td>
- <td align="center" style="background-color: rgb(123, 104, 238)">MediumSlateBlue</td>
- <td align="left">rgb(123, 104, 238)</td>
- <td align="left">#7B68EE</td>
- </tr>
-
- <tr>
- <td align="right">SlateBlue</td>
- <td align="center" style="background-color: rgb(106, 90, 205)">SlateBlue</td>
- <td align="left">rgb(106, 90, 205)</td>
- <td align="left">#6A5ACD</td>
- </tr>
-
- <tr>
- <td align="right">SlateBlue1</td>
- <td align="center" style="background-color: rgb(131, 111, 255)">SlateBlue1</td>
- <td align="left">rgb(131, 111, 255)</td>
- <td align="left">#836FFF</td>
- </tr>
-
- <tr>
- <td align="right">SlateBlue2</td>
- <td align="center" style="background-color: rgb(122, 103, 238)">SlateBlue2</td>
- <td align="left">rgb(122, 103, 238)</td>
- <td align="left">#7A67EE</td>
- </tr>
-
- <tr>
- <td align="right">SlateBlue3</td>
- <td align="center" style="background-color: rgb(105, 89, 205)">SlateBlue3</td>
- <td align="left">rgb(105, 89, 205)</td>
- <td align="left">#6959CD</td>
- </tr>
-
- <tr>
- <td align="right">SlateBlue4</td>
- <td align="center" style="background-color: rgb( 71, 60, 139)">SlateBlue4</td>
- <td align="left">rgb( 71, 60, 139)</td>
- <td align="left">#473C8B</td>
- </tr>
-
- <tr>
- <td align="right">GhostWhite</td>
- <td align="center" style="background-color: rgb(248, 248, 255)">GhostWhite</td>
- <td align="left">rgb(248, 248, 255)</td>
- <td align="left">#F8F8FF</td>
- </tr>
-
- <tr>
- <td align="right">lavender</td>
- <td align="center" style="background-color: rgb(230, 230, 250)">lavender</td>
- <td align="left">rgb(230, 230, 250)</td>
- <td align="left">#E6E6FA</td>
- </tr>
-
- <tr>
- <td align="right">blue</td>
- <td align="center" style="background-color: rgb( 0, 0, 255)">blue</td>
- <td align="left">rgb( 0, 0, 255)</td>
- <td align="left">#0000FF</td>
- </tr>
-
- <tr>
- <td align="right">blue1</td>
- <td align="center" style="background-color: rgb( 0, 0, 255)">blue1</td>
- <td align="left">rgb( 0, 0, 255)</td>
- <td align="left">#0000FF</td>
- </tr>
+ </div>
- <tr>
- <td align="right">blue2</td>
- <td align="center" style="background-color: rgb( 0, 0, 238)">blue2</td>
- <td align="left">rgb( 0, 0, 238)</td>
- <td align="left">#0000EE</td>
- </tr>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
- <tr>
- <td align="right">blue3</td>
- <td align="center" style="background-color: rgb( 0, 0, 205)">blue3</td>
- <td align="left">rgb( 0, 0, 205)</td>
- <td align="left">#0000CD</td>
- </tr>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
- <tr>
- <td align="right">MediumBlue</td>
- <td align="center" style="background-color: rgb( 0, 0, 205)">MediumBlue</td>
- <td align="left">rgb( 0, 0, 205)</td>
- <td align="left">#0000CD</td>
- </tr>
-
- <tr>
- <td align="right">blue4</td>
- <td align="center" style="background-color: rgb( 0, 0, 139)">blue4</td>
- <td align="left">rgb( 0, 0, 139)</td>
- <td align="left">#00008B</td>
- </tr>
-
- <tr>
- <td align="right">DarkBlue</td>
- <td align="center" style="background-color: rgb( 0, 0, 139)">DarkBlue</td>
- <td align="left">rgb( 0, 0, 139)</td>
- <td align="left">#00008B</td>
- </tr>
-
- <tr>
- <td align="right">MidnightBlue</td>
- <td align="center" style="background-color: rgb( 25, 25, 112)">MidnightBlue</td>
- <td align="left">rgb( 25, 25, 112)</td>
- <td align="left">#191970</td>
- </tr>
-
- <tr>
- <td align="right">navy</td>
- <td align="center" style="background-color: rgb( 0, 0, 128)">navy</td>
- <td align="left">rgb( 0, 0, 128)</td>
- <td align="left">#000080</td>
- </tr>
-
- <tr>
- <td align="right">NavyBlue</td>
- <td align="center" style="background-color: rgb( 0, 0, 128)">NavyBlue</td>
- <td align="left">rgb( 0, 0, 128)</td>
- <td align="left">#000080</td>
- </tr>
-
- <tr>
- <td align="right">RoyalBlue</td>
- <td align="center" style="background-color: rgb( 65, 105, 225)">RoyalBlue</td>
- <td align="left">rgb( 65, 105, 225)</td>
- <td align="left">#4169E1</td>
- </tr>
-
- <tr>
- <td align="right">RoyalBlue1</td>
- <td align="center" style="background-color: rgb( 72, 118, 255)">RoyalBlue1</td>
- <td align="left">rgb( 72, 118, 255)</td>
- <td align="left">#4876FF</td>
- </tr>
-
- <tr>
- <td align="right">RoyalBlue2</td>
- <td align="center" style="background-color: rgb( 67, 110, 238)">RoyalBlue2</td>
- <td align="left">rgb( 67, 110, 238)</td>
- <td align="left">#436EEE</td>
- </tr>
-
- <tr>
- <td align="right">RoyalBlue3</td>
- <td align="center" style="background-color: rgb( 58, 95, 205)">RoyalBlue3</td>
- <td align="left">rgb( 58, 95, 205)</td>
- <td align="left">#3A5FCD</td>
- </tr>
-
- <tr>
- <td align="right">RoyalBlue4</td>
- <td align="center" style="background-color: rgb( 39, 64, 139)">RoyalBlue4</td>
- <td align="left">rgb( 39, 64, 139)</td>
- <td align="left">#27408B</td>
- </tr>
-
- <tr>
- <td align="right">CornflowerBlue</td>
- <td align="center" style="background-color: rgb(100, 149, 237)">CornflowerBlue</td>
- <td align="left">rgb(100, 149, 237)</td>
- <td align="left">#6495ED</td>
- </tr>
-
- <tr>
- <td align="right">LightSteelBlue</td>
- <td align="center" style="background-color: rgb(176, 196, 222)">LightSteelBlue</td>
- <td align="left">rgb(176, 196, 222)</td>
- <td align="left">#B0C4DE</td>
- </tr>
-
- <tr>
- <td align="right">LightSteelBlue1</td>
- <td align="center" style="background-color: rgb(202, 225, 255)">LightSteelBlue1</td>
- <td align="left">rgb(202, 225, 255)</td>
- <td align="left">#CAE1FF</td>
- </tr>
-
- <tr>
- <td align="right">LightSteelBlue2</td>
- <td align="center" style="background-color: rgb(188, 210, 238)">LightSteelBlue2</td>
- <td align="left">rgb(188, 210, 238)</td>
- <td align="left">#BCD2EE</td>
- </tr>
-
- <tr>
- <td align="right">LightSteelBlue3</td>
- <td align="center" style="background-color: rgb(162, 181, 205)">LightSteelBlue3</td>
- <td align="left">rgb(162, 181, 205)</td>
- <td align="left">#A2B5CD</td>
- </tr>
-
- <tr>
- <td align="right">LightSteelBlue4</td>
- <td align="center" style="background-color: rgb(110, 123, 139)">LightSteelBlue4</td>
- <td align="left">rgb(110, 123, 139)</td>
- <td align="left">#6E7B8B</td>
- </tr>
-
- <tr>
- <td align="right">SlateGray4</td>
- <td align="center" style="background-color: rgb(108, 123, 139)">SlateGray4</td>
- <td align="left">rgb(108, 123, 139)</td>
- <td align="left">#6C7B8B</td>
- </tr>
-
- <tr>
- <td align="right">SlateGray1</td>
- <td align="center" style="background-color: rgb(198, 226, 255)">SlateGray1</td>
- <td align="left">rgb(198, 226, 255)</td>
- <td align="left">#C6E2FF</td>
- </tr>
-
- <tr>
- <td align="right">SlateGray2</td>
- <td align="center" style="background-color: rgb(185, 211, 238)">SlateGray2</td>
- <td align="left">rgb(185, 211, 238)</td>
- <td align="left">#B9D3EE</td>
- </tr>
-
- <tr>
- <td align="right">SlateGray3</td>
- <td align="center" style="background-color: rgb(159, 182, 205)">SlateGray3</td>
- <td align="left">rgb(159, 182, 205)</td>
- <td align="left">#9FB6CD</td>
- </tr>
-
- <tr>
- <td align="right">LightSlateGray</td>
- <td align="center" style="background-color: rgb(119, 136, 153)">LightSlateGray</td>
- <td align="left">rgb(119, 136, 153)</td>
- <td align="left">#778899</td>
- </tr>
-
- <tr>
- <td align="right">LightSlateGrey</td>
- <td align="center" style="background-color: rgb(119, 136, 153)">LightSlateGrey</td>
- <td align="left">rgb(119, 136, 153)</td>
- <td align="left">#778899</td>
- </tr>
-
- <tr>
- <td align="right">SlateGray</td>
- <td align="center" style="background-color: rgb(112, 128, 144)">SlateGray</td>
- <td align="left">rgb(112, 128, 144)</td>
- <td align="left">#708090</td>
- </tr>
-
- <tr>
- <td align="right">SlateGrey</td>
- <td align="center" style="background-color: rgb(112, 128, 144)">SlateGrey</td>
- <td align="left">rgb(112, 128, 144)</td>
- <td align="left">#708090</td>
- </tr>
-
- <tr>
- <td align="right">DodgerBlue</td>
- <td align="center" style="background-color: rgb( 30, 144, 255)">DodgerBlue</td>
- <td align="left">rgb( 30, 144, 255)</td>
- <td align="left">#1E90FF</td>
- </tr>
-
- <tr>
- <td align="right">DodgerBlue1</td>
- <td align="center" style="background-color: rgb( 30, 144, 255)">DodgerBlue1</td>
- <td align="left">rgb( 30, 144, 255)</td>
- <td align="left">#1E90FF</td>
- </tr>
-
- <tr>
- <td align="right">DodgerBlue2</td>
- <td align="center" style="background-color: rgb( 28, 134, 238)">DodgerBlue2</td>
- <td align="left">rgb( 28, 134, 238)</td>
- <td align="left">#1C86EE</td>
- </tr>
-
- <tr>
- <td align="right">DodgerBlue4</td>
- <td align="center" style="background-color: rgb( 16, 78, 139)">DodgerBlue4</td>
- <td align="left">rgb( 16, 78, 139)</td>
- <td align="left">#104E8B</td>
- </tr>
-
- <tr>
- <td align="right">DodgerBlue3</td>
- <td align="center" style="background-color: rgb( 24, 116, 205)">DodgerBlue3</td>
- <td align="left">rgb( 24, 116, 205)</td>
- <td align="left">#1874CD</td>
- </tr>
-
- <tr>
- <td align="right">AliceBlue</td>
- <td align="center" style="background-color: rgb(240, 248, 255)">AliceBlue</td>
- <td align="left">rgb(240, 248, 255)</td>
- <td align="left">#F0F8FF</td>
- </tr>
-
- <tr>
- <td align="right">SteelBlue4</td>
- <td align="center" style="background-color: rgb( 54, 100, 139)">SteelBlue4</td>
- <td align="left">rgb( 54, 100, 139)</td>
- <td align="left">#36648B</td>
- </tr>
-
- <tr>
- <td align="right">SteelBlue</td>
- <td align="center" style="background-color: rgb( 70, 130, 180)">SteelBlue</td>
- <td align="left">rgb( 70, 130, 180)</td>
- <td align="left">#4682B4</td>
- </tr>
-
- <tr>
- <td align="right">SteelBlue1</td>
- <td align="center" style="background-color: rgb( 99, 184, 255)">SteelBlue1</td>
- <td align="left">rgb( 99, 184, 255)</td>
- <td align="left">#63B8FF</td>
- </tr>
-
- <tr>
- <td align="right">SteelBlue2</td>
- <td align="center" style="background-color: rgb( 92, 172, 238)">SteelBlue2</td>
- <td align="left">rgb( 92, 172, 238)</td>
- <td align="left">#5CACEE</td>
- </tr>
-
- <tr>
- <td align="right">SteelBlue3</td>
- <td align="center" style="background-color: rgb( 79, 148, 205)">SteelBlue3</td>
- <td align="left">rgb( 79, 148, 205)</td>
- <td align="left">#4F94CD</td>
- </tr>
-
- <tr>
- <td align="right">SkyBlue4</td>
- <td align="center" style="background-color: rgb( 74, 112, 139)">SkyBlue4</td>
- <td align="left">rgb( 74, 112, 139)</td>
- <td align="left">#4A708B</td>
- </tr>
-
- <tr>
- <td align="right">SkyBlue1</td>
- <td align="center" style="background-color: rgb(135, 206, 255)">SkyBlue1</td>
- <td align="left">rgb(135, 206, 255)</td>
- <td align="left">#87CEFF</td>
- </tr>
-
- <tr>
- <td align="right">SkyBlue2</td>
- <td align="center" style="background-color: rgb(126, 192, 238)">SkyBlue2</td>
- <td align="left">rgb(126, 192, 238)</td>
- <td align="left">#7EC0EE</td>
- </tr>
-
- <tr>
- <td align="right">SkyBlue3</td>
- <td align="center" style="background-color: rgb(108, 166, 205)">SkyBlue3</td>
- <td align="left">rgb(108, 166, 205)</td>
- <td align="left">#6CA6CD</td>
- </tr>
-
- <tr>
- <td align="right">LightSkyBlue</td>
- <td align="center" style="background-color: rgb(135, 206, 250)">LightSkyBlue</td>
- <td align="left">rgb(135, 206, 250)</td>
- <td align="left">#87CEFA</td>
- </tr>
-
- <tr>
- <td align="right">LightSkyBlue4</td>
- <td align="center" style="background-color: rgb( 96, 123, 139)">LightSkyBlue4</td>
- <td align="left">rgb( 96, 123, 139)</td>
- <td align="left">#607B8B</td>
- </tr>
-
- <tr>
- <td align="right">LightSkyBlue1</td>
- <td align="center" style="background-color: rgb(176, 226, 255)">LightSkyBlue1</td>
- <td align="left">rgb(176, 226, 255)</td>
- <td align="left">#B0E2FF</td>
- </tr>
-
- <tr>
- <td align="right">LightSkyBlue2</td>
- <td align="center" style="background-color: rgb(164, 211, 238)">LightSkyBlue2</td>
- <td align="left">rgb(164, 211, 238)</td>
- <td align="left">#A4D3EE</td>
- </tr>
-
- <tr>
- <td align="right">LightSkyBlue3</td>
- <td align="center" style="background-color: rgb(141, 182, 205)">LightSkyBlue3</td>
- <td align="left">rgb(141, 182, 205)</td>
- <td align="left">#8DB6CD</td>
- </tr>
-
- <tr>
- <td align="right">SkyBlue</td>
- <td align="center" style="background-color: rgb(135, 206, 235)">SkyBlue</td>
- <td align="left">rgb(135, 206, 235)</td>
- <td align="left">#87CEEB</td>
- </tr>
-
- <tr>
- <td align="right">LightBlue3</td>
- <td align="center" style="background-color: rgb(154, 192, 205)">LightBlue3</td>
- <td align="left">rgb(154, 192, 205)</td>
- <td align="left">#9AC0CD</td>
- </tr>
-
- <tr>
- <td align="right">DeepSkyBlue</td>
- <td align="center" style="background-color: rgb( 0, 191, 255)">DeepSkyBlue</td>
- <td align="left">rgb( 0, 191, 255)</td>
- <td align="left">#00BFFF</td>
- </tr>
-
- <tr>
- <td align="right">DeepSkyBlue1</td>
- <td align="center" style="background-color: rgb( 0, 191, 255)">DeepSkyBlue1</td>
- <td align="left">rgb( 0, 191, 255)</td>
- <td align="left">#00BFFF</td>
- </tr>
-
- <tr>
- <td align="right">DeepSkyBlue2</td>
- <td align="center" style="background-color: rgb( 0, 178, 238)">DeepSkyBlue2</td>
- <td align="left">rgb( 0, 178, 238)</td>
- <td align="left">#00B2EE</td>
- </tr>
-
- <tr>
- <td align="right">DeepSkyBlue4</td>
- <td align="center" style="background-color: rgb( 0, 104, 139)">DeepSkyBlue4</td>
- <td align="left">rgb( 0, 104, 139)</td>
- <td align="left">#00688B</td>
- </tr>
-
- <tr>
- <td align="right">DeepSkyBlue3</td>
- <td align="center" style="background-color: rgb( 0, 154, 205)">DeepSkyBlue3</td>
- <td align="left">rgb( 0, 154, 205)</td>
- <td align="left">#009ACD</td>
- </tr>
-
- <tr>
- <td align="right">LightBlue1</td>
- <td align="center" style="background-color: rgb(191, 239, 255)">LightBlue1</td>
- <td align="left">rgb(191, 239, 255)</td>
- <td align="left">#BFEFFF</td>
- </tr>
-
- <tr>
- <td align="right">LightBlue2</td>
- <td align="center" style="background-color: rgb(178, 223, 238)">LightBlue2</td>
- <td align="left">rgb(178, 223, 238)</td>
- <td align="left">#B2DFEE</td>
- </tr>
-
- <tr>
- <td align="right">LightBlue</td>
- <td align="center" style="background-color: rgb(173, 216, 230)">LightBlue</td>
- <td align="left">rgb(173, 216, 230)</td>
- <td align="left">#ADD8E6</td>
- </tr>
-
- <tr>
- <td align="right">LightBlue4</td>
- <td align="center" style="background-color: rgb(104, 131, 139)">LightBlue4</td>
- <td align="left">rgb(104, 131, 139)</td>
- <td align="left">#68838B</td>
- </tr>
-
- <tr>
- <td align="right">PowderBlue</td>
- <td align="center" style="background-color: rgb(176, 224, 230)">PowderBlue</td>
- <td align="left">rgb(176, 224, 230)</td>
- <td align="left">#B0E0E6</td>
- </tr>
-
- <tr>
- <td align="right">CadetBlue1</td>
- <td align="center" style="background-color: rgb(152, 245, 255)">CadetBlue1</td>
- <td align="left">rgb(152, 245, 255)</td>
- <td align="left">#98F5FF</td>
- </tr>
-
- <tr>
- <td align="right">CadetBlue2</td>
- <td align="center" style="background-color: rgb(142, 229, 238)">CadetBlue2</td>
- <td align="left">rgb(142, 229, 238)</td>
- <td align="left">#8EE5EE</td>
- </tr>
-
- <tr>
- <td align="right">CadetBlue3</td>
- <td align="center" style="background-color: rgb(122, 197, 205)">CadetBlue3</td>
- <td align="left">rgb(122, 197, 205)</td>
- <td align="left">#7AC5CD</td>
- </tr>
-
- <tr>
- <td align="right">CadetBlue4</td>
- <td align="center" style="background-color: rgb( 83, 134, 139)">CadetBlue4</td>
- <td align="left">rgb( 83, 134, 139)</td>
- <td align="left">#53868B</td>
- </tr>
-
- <tr>
- <td align="right">turquoise1</td>
- <td align="center" style="background-color: rgb( 0, 245, 255)">turquoise1</td>
- <td align="left">rgb( 0, 245, 255)</td>
- <td align="left">#00F5FF</td>
- </tr>
-
- <tr>
- <td align="right">turquoise2</td>
- <td align="center" style="background-color: rgb( 0, 229, 238)">turquoise2</td>
- <td align="left">rgb( 0, 229, 238)</td>
- <td align="left">#00E5EE</td>
- </tr>
-
- <tr>
- <td align="right">turquoise3</td>
- <td align="center" style="background-color: rgb( 0, 197, 205)">turquoise3</td>
- <td align="left">rgb( 0, 197, 205)</td>
- <td align="left">#00C5CD</td>
- </tr>
-
- <tr>
- <td align="right">turquoise4</td>
- <td align="center" style="background-color: rgb( 0, 134, 139)">turquoise4</td>
- <td align="left">rgb( 0, 134, 139)</td>
- <td align="left">#00868B</td>
- </tr>
-
- <tr>
- <td align="right">cadet blue</td>
- <td align="center" style="background-color: rgb( 95, 158, 160)">cadet blue</td>
- <td align="left">rgb( 95, 158, 160)</td>
- <td align="left">#5F9EA0</td>
- </tr>
-
- <tr>
- <td align="right">CadetBlue</td>
- <td align="center" style="background-color: rgb( 95, 158, 160)">CadetBlue</td>
- <td align="left">rgb( 95, 158, 160)</td>
- <td align="left">#5F9EA0</td>
- </tr>
-
- <tr>
- <td align="right">DarkTurquoise</td>
- <td align="center" style="background-color: rgb( 0, 206, 209)">DarkTurquoise</td>
- <td align="left">rgb( 0, 206, 209)</td>
- <td align="left">#00CED1</td>
- </tr>
-
- <tr>
- <td align="right">azure</td>
- <td align="center" style="background-color: rgb(240, 255, 255)">azure</td>
- <td align="left">rgb(240, 255, 255)</td>
- <td align="left">#F0FFFF</td>
- </tr>
-
- <tr>
- <td align="right">azure1</td>
- <td align="center" style="background-color: rgb(240, 255, 255)">azure1</td>
- <td align="left">rgb(240, 255, 255)</td>
- <td align="left">#F0FFFF</td>
- </tr>
-
- <tr>
- <td align="right">LightCyan</td>
- <td align="center" style="background-color: rgb(224, 255, 255)">LightCyan</td>
- <td align="left">rgb(224, 255, 255)</td>
- <td align="left">#E0FFFF</td>
- </tr>
-
- <tr>
- <td align="right">LightCyan1</td>
- <td align="center" style="background-color: rgb(224, 255, 255)">LightCyan1</td>
- <td align="left">rgb(224, 255, 255)</td>
- <td align="left">#E0FFFF</td>
- </tr>
-
- <tr>
- <td align="right">azure2</td>
- <td align="center" style="background-color: rgb(224, 238, 238)">azure2</td>
- <td align="left">rgb(224, 238, 238)</td>
- <td align="left">#E0EEEE</td>
- </tr>
-
- <tr>
- <td align="right">LightCyan2</td>
- <td align="center" style="background-color: rgb(209, 238, 238)">LightCyan2</td>
- <td align="left">rgb(209, 238, 238)</td>
- <td align="left">#D1EEEE</td>
- </tr>
-
- <tr>
- <td align="right">PaleTurquoise1</td>
- <td align="center" style="background-color: rgb(187, 255, 255)">PaleTurquoise1</td>
- <td align="left">rgb(187, 255, 255)</td>
- <td align="left">#BBFFFF</td>
- </tr>
-
- <tr>
- <td align="right">PaleTurquoise</td>
- <td align="center" style="background-color: rgb(175, 238, 238)">PaleTurquoise</td>
- <td align="left">rgb(175, 238, 238)</td>
- <td align="left">#AFEEEE</td>
- </tr>
-
- <tr>
- <td align="right">PaleTurquoise2</td>
- <td align="center" style="background-color: rgb(174, 238, 238)">PaleTurquoise2</td>
- <td align="left">rgb(174, 238, 238)</td>
- <td align="left">#AEEEEE</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateGray1</td>
- <td align="center" style="background-color: rgb(151, 255, 255)">DarkSlateGray1</td>
- <td align="left">rgb(151, 255, 255)</td>
- <td align="left">#97FFFF</td>
- </tr>
-
- <tr>
- <td align="right">azure3</td>
- <td align="center" style="background-color: rgb(193, 205, 205)">azure3</td>
- <td align="left">rgb(193, 205, 205)</td>
- <td align="left">#C1CDCD</td>
- </tr>
-
- <tr>
- <td align="right">LightCyan3</td>
- <td align="center" style="background-color: rgb(180, 205, 205)">LightCyan3</td>
- <td align="left">rgb(180, 205, 205)</td>
- <td align="left">#B4CDCD</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateGray2</td>
- <td align="center" style="background-color: rgb(141, 238, 238)">DarkSlateGray2</td>
- <td align="left">rgb(141, 238, 238)</td>
- <td align="left">#8DEEEE</td>
- </tr>
-
- <tr>
- <td align="right">PaleTurquoise3</td>
- <td align="center" style="background-color: rgb(150, 205, 205)">PaleTurquoise3</td>
- <td align="left">rgb(150, 205, 205)</td>
- <td align="left">#96CDCD</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateGray3</td>
- <td align="center" style="background-color: rgb(121, 205, 205)">DarkSlateGray3</td>
- <td align="left">rgb(121, 205, 205)</td>
- <td align="left">#79CDCD</td>
- </tr>
-
- <tr>
- <td align="right">azure4</td>
- <td align="center" style="background-color: rgb(131, 139, 139)">azure4</td>
- <td align="left">rgb(131, 139, 139)</td>
- <td align="left">#838B8B</td>
- </tr>
-
- <tr>
- <td align="right">LightCyan4</td>
- <td align="center" style="background-color: rgb(122, 139, 139)">LightCyan4</td>
- <td align="left">rgb(122, 139, 139)</td>
- <td align="left">#7A8B8B</td>
- </tr>
-
- <tr>
- <td align="right">aqua</td>
- <td align="center" style="background-color: rgb( 0, 255, 255)">aqua</td>
- <td align="left">rgb( 0, 255, 255)</td>
- <td align="left">#00FFFF</td>
- </tr>
-
- <tr>
- <td align="right">cyan</td>
- <td align="center" style="background-color: rgb( 0, 255, 255)">cyan</td>
- <td align="left">rgb( 0, 255, 255)</td>
- <td align="left">#00FFFF</td>
- </tr>
-
- <tr>
- <td align="right">cyan1</td>
- <td align="center" style="background-color: rgb( 0, 255, 255)">cyan1</td>
- <td align="left">rgb( 0, 255, 255)</td>
- <td align="left">#00FFFF</td>
- </tr>
-
- <tr>
- <td align="right">PaleTurquoise4</td>
- <td align="center" style="background-color: rgb(102, 139, 139)">PaleTurquoise4</td>
- <td align="left">rgb(102, 139, 139)</td>
- <td align="left">#668B8B</td>
- </tr>
-
- <tr>
- <td align="right">cyan2</td>
- <td align="center" style="background-color: rgb( 0, 238, 238)">cyan2</td>
- <td align="left">rgb( 0, 238, 238)</td>
- <td align="left">#00EEEE</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateGray4</td>
- <td align="center" style="background-color: rgb( 82, 139, 139)">DarkSlateGray4</td>
- <td align="left">rgb( 82, 139, 139)</td>
- <td align="left">#528B8B</td>
- </tr>
-
- <tr>
- <td align="right">cyan3</td>
- <td align="center" style="background-color: rgb( 0, 205, 205)">cyan3</td>
- <td align="left">rgb( 0, 205, 205)</td>
- <td align="left">#00CDCD</td>
- </tr>
-
- <tr>
- <td align="right">cyan4</td>
- <td align="center" style="background-color: rgb( 0, 139, 139)">cyan4</td>
- <td align="left">rgb( 0, 139, 139)</td>
- <td align="left">#008B8B</td>
- </tr>
-
- <tr>
- <td align="right">DarkCyan</td>
- <td align="center" style="background-color: rgb( 0, 139, 139)">DarkCyan</td>
- <td align="left">rgb( 0, 139, 139)</td>
- <td align="left">#008B8B</td>
- </tr>
-
- <tr>
- <td align="right">teal</td>
- <td align="center" style="background-color: rgb( 0, 128, 128)">teal</td>
- <td align="left">rgb( 0, 128, 128)</td>
- <td align="left">#008080</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateGray</td>
- <td align="center" style="background-color: rgb( 47, 79, 79)">DarkSlateGray</td>
- <td align="left">rgb( 47, 79, 79)</td>
- <td align="left">#2F4F4F</td>
- </tr>
-
- <tr>
- <td align="right">DarkSlateGrey</td>
- <td align="center" style="background-color: rgb( 47, 79, 79)">DarkSlateGrey</td>
- <td align="left">rgb( 47, 79, 79)</td>
- <td align="left">#2F4F4F</td>
- </tr>
-
- <tr>
- <td align="right">MediumTurquoise</td>
- <td align="center" style="background-color: rgb( 72, 209, 204)">MediumTurquoise</td>
- <td align="left">rgb( 72, 209, 204)</td>
- <td align="left">#48D1CC</td>
- </tr>
-
- <tr>
- <td align="right">LightSeaGreen</td>
- <td align="center" style="background-color: rgb( 32, 178, 170)">LightSeaGreen</td>
- <td align="left">rgb( 32, 178, 170)</td>
- <td align="left">#20B2AA</td>
- </tr>
-
- <tr>
- <td align="right">turquoise</td>
- <td align="center" style="background-color: rgb( 64, 224, 208)">turquoise</td>
- <td align="left">rgb( 64, 224, 208)</td>
- <td align="left">#40E0D0</td>
- </tr>
-
- <tr>
- <td align="right">aquamarine4</td>
- <td align="center" style="background-color: rgb( 69, 139, 116)">aquamarine4</td>
- <td align="left">rgb( 69, 139, 116)</td>
- <td align="left">#458B74</td>
- </tr>
-
- <tr>
- <td align="right">aquamarine</td>
- <td align="center" style="background-color: rgb(127, 255, 212)">aquamarine</td>
- <td align="left">rgb(127, 255, 212)</td>
- <td align="left">#7FFFD4</td>
- </tr>
-
- <tr>
- <td align="right">aquamarine1</td>
- <td align="center" style="background-color: rgb(127, 255, 212)">aquamarine1</td>
- <td align="left">rgb(127, 255, 212)</td>
- <td align="left">#7FFFD4</td>
- </tr>
-
- <tr>
- <td align="right">aquamarine2</td>
- <td align="center" style="background-color: rgb(118, 238, 198)">aquamarine2</td>
- <td align="left">rgb(118, 238, 198)</td>
- <td align="left">#76EEC6</td>
- </tr>
-
- <tr>
- <td align="right">aquamarine3</td>
- <td align="center" style="background-color: rgb(102, 205, 170)">aquamarine3</td>
- <td align="left">rgb(102, 205, 170)</td>
- <td align="left">#66CDAA</td>
- </tr>
-
- <tr>
- <td align="right">MediumAquamarine</td>
- <td align="center" style="background-color: rgb(102, 205, 170)">MediumAquamarine</td>
- <td align="left">rgb(102, 205, 170)</td>
- <td align="left">#66CDAA</td>
- </tr>
-
- <tr>
- <td align="right">MediumSpringGreen</td>
- <td align="center" style="background-color: rgb( 0, 250, 154)">MediumSpringGreen</td>
- <td align="left">rgb( 0, 250, 154)</td>
- <td align="left">#00FA9A</td>
- </tr>
-
- <tr>
- <td align="right">MintCream</td>
- <td align="center" style="background-color: rgb(245, 255, 250)">MintCream</td>
- <td align="left">rgb(245, 255, 250)</td>
- <td align="left">#F5FFFA</td>
- </tr>
-
- <tr>
- <td align="right">SpringGreen</td>
- <td align="center" style="background-color: rgb( 0, 255, 127)">SpringGreen</td>
- <td align="left">rgb( 0, 255, 127)</td>
- <td align="left">#00FF7F</td>
- </tr>
-
- <tr>
- <td align="right">SpringGreen1</td>
- <td align="center" style="background-color: rgb( 0, 255, 127)">SpringGreen1</td>
- <td align="left">rgb( 0, 255, 127)</td>
- <td align="left">#00FF7F</td>
- </tr>
-
- <tr>
- <td align="right">SpringGreen2</td>
- <td align="center" style="background-color: rgb( 0, 238, 118)">SpringGreen2</td>
- <td align="left">rgb( 0, 238, 118)</td>
- <td align="left">#00EE76</td>
- </tr>
-
- <tr>
- <td align="right">SpringGreen3</td>
- <td align="center" style="background-color: rgb( 0, 205, 102)">SpringGreen3</td>
- <td align="left">rgb( 0, 205, 102)</td>
- <td align="left">#00CD66</td>
- </tr>
-
- <tr>
- <td align="right">SpringGreen4</td>
- <td align="center" style="background-color: rgb( 0, 139, 69)">SpringGreen4</td>
- <td align="left">rgb( 0, 139, 69)</td>
- <td align="left">#008B45</td>
- </tr>
-
- <tr>
- <td align="right">MediumSeaGreen</td>
- <td align="center" style="background-color: rgb( 60, 179, 113)">MediumSeaGreen</td>
- <td align="left">rgb( 60, 179, 113)</td>
- <td align="left">#3CB371</td>
- </tr>
-
- <tr>
- <td align="right">SeaGreen</td>
- <td align="center" style="background-color: rgb( 46, 139, 87)">SeaGreen</td>
- <td align="left">rgb( 46, 139, 87)</td>
- <td align="left">#2E8B57</td>
- </tr>
-
- <tr>
- <td align="right">SeaGreen3</td>
- <td align="center" style="background-color: rgb( 67, 205, 128)">SeaGreen3</td>
- <td align="left">rgb( 67, 205, 128)</td>
- <td align="left">#43CD80</td>
- </tr>
-
- <tr>
- <td align="right">SeaGreen1</td>
- <td align="center" style="background-color: rgb( 84, 255, 159)">SeaGreen1</td>
- <td align="left">rgb( 84, 255, 159)</td>
- <td align="left">#54FF9F</td>
- </tr>
-
- <tr>
- <td align="right">SeaGreen4</td>
- <td align="center" style="background-color: rgb( 46, 139, 87)">SeaGreen4</td>
- <td align="left">rgb( 46, 139, 87)</td>
- <td align="left">#2E8B57</td>
- </tr>
-
- <tr>
- <td align="right">SeaGreen2</td>
- <td align="center" style="background-color: rgb( 78, 238, 148)">SeaGreen2</td>
- <td align="left">rgb( 78, 238, 148)</td>
- <td align="left">#4EEE94</td>
- </tr>
-
- <tr>
- <td align="right">MediumForestGreen</td>
- <td align="center" style="background-color: rgb( 50, 129, 75)">MediumForestGreen</td>
- <td align="left">rgb( 50, 129, 75)</td>
- <td align="left">#32814B</td>
- </tr>
-
- <tr>
- <td align="right">honeydew</td>
- <td align="center" style="background-color: rgb(240, 255, 240)">honeydew</td>
- <td align="left">rgb(240, 255, 240)</td>
- <td align="left">#F0FFF0</td>
- </tr>
-
- <tr>
- <td align="right">honeydew1</td>
- <td align="center" style="background-color: rgb(240, 255, 240)">honeydew1</td>
- <td align="left">rgb(240, 255, 240)</td>
- <td align="left">#F0FFF0</td>
- </tr>
-
- <tr>
- <td align="right">honeydew2</td>
- <td align="center" style="background-color: rgb(224, 238, 224)">honeydew2</td>
- <td align="left">rgb(224, 238, 224)</td>
- <td align="left">#E0EEE0</td>
- </tr>
-
- <tr>
- <td align="right">DarkSeaGreen1</td>
- <td align="center" style="background-color: rgb(193, 255, 193)">DarkSeaGreen1</td>
- <td align="left">rgb(193, 255, 193)</td>
- <td align="left">#C1FFC1</td>
- </tr>
-
- <tr>
- <td align="right">DarkSeaGreen2</td>
- <td align="center" style="background-color: rgb(180, 238, 180)">DarkSeaGreen2</td>
- <td align="left">rgb(180, 238, 180)</td>
- <td align="left">#B4EEB4</td>
- </tr>
-
- <tr>
- <td align="right">PaleGreen1</td>
- <td align="center" style="background-color: rgb(154, 255, 154)">PaleGreen1</td>
- <td align="left">rgb(154, 255, 154)</td>
- <td align="left">#9AFF9A</td>
- </tr>
-
- <tr>
- <td align="right">PaleGreen</td>
- <td align="center" style="background-color: rgb(152, 251, 152)">PaleGreen</td>
- <td align="left">rgb(152, 251, 152)</td>
- <td align="left">#98FB98</td>
- </tr>
-
- <tr>
- <td align="right">honeydew3</td>
- <td align="center" style="background-color: rgb(193, 205, 193)">honeydew3</td>
- <td align="left">rgb(193, 205, 193)</td>
- <td align="left">#C1CDC1</td>
- </tr>
-
- <tr>
- <td align="right">LightGreen</td>
- <td align="center" style="background-color: rgb(144, 238, 144)">LightGreen</td>
- <td align="left">rgb(144, 238, 144)</td>
- <td align="left">#90EE90</td>
- </tr>
-
- <tr>
- <td align="right">PaleGreen2</td>
- <td align="center" style="background-color: rgb(144, 238, 144)">PaleGreen2</td>
- <td align="left">rgb(144, 238, 144)</td>
- <td align="left">#90EE90</td>
- </tr>
-
- <tr>
- <td align="right">DarkSeaGreen3</td>
- <td align="center" style="background-color: rgb(155, 205, 155)">DarkSeaGreen3</td>
- <td align="left">rgb(155, 205, 155)</td>
- <td align="left">#9BCD9B</td>
- </tr>
-
- <tr>
- <td align="right">DarkSeaGreen</td>
- <td align="center" style="background-color: rgb(143, 188, 143)">DarkSeaGreen</td>
- <td align="left">rgb(143, 188, 143)</td>
- <td align="left">#8FBC8F</td>
- </tr>
-
- <tr>
- <td align="right">PaleGreen3</td>
- <td align="center" style="background-color: rgb(124, 205, 124)">PaleGreen3</td>
- <td align="left">rgb(124, 205, 124)</td>
- <td align="left">#7CCD7C</td>
- </tr>
-
- <tr>
- <td align="right">honeydew4</td>
- <td align="center" style="background-color: rgb(131, 139, 131)">honeydew4</td>
- <td align="left">rgb(131, 139, 131)</td>
- <td align="left">#838B83</td>
- </tr>
-
- <tr>
- <td align="right">green1</td>
- <td align="center" style="background-color: rgb( 0, 255, 0)">green1</td>
- <td align="left">rgb( 0, 255, 0)</td>
- <td align="left">#00FF00</td>
- </tr>
-
- <tr>
- <td align="right">lime</td>
- <td align="center" style="background-color: rgb( 0, 255, 0)">lime</td>
- <td align="left">rgb( 0, 255, 0)</td>
- <td align="left">#00FF00</td>
- </tr>
-
- <tr>
- <td align="right">LimeGreen</td>
- <td align="center" style="background-color: rgb( 50, 205, 50)">LimeGreen</td>
- <td align="left">rgb( 50, 205, 50)</td>
- <td align="left">#32CD32</td>
- </tr>
-
- <tr>
- <td align="right">DarkSeaGreen4</td>
- <td align="center" style="background-color: rgb(105, 139, 105)">DarkSeaGreen4</td>
- <td align="left">rgb(105, 139, 105)</td>
- <td align="left">#698B69</td>
- </tr>
-
- <tr>
- <td align="right">green2</td>
- <td align="center" style="background-color: rgb( 0, 238, 0)">green2</td>
- <td align="left">rgb( 0, 238, 0)</td>
- <td align="left">#00EE00</td>
- </tr>
-
- <tr>
- <td align="right">PaleGreen4</td>
- <td align="center" style="background-color: rgb( 84, 139, 84)">PaleGreen4</td>
- <td align="left">rgb( 84, 139, 84)</td>
- <td align="left">#548B54</td>
- </tr>
-
- <tr>
- <td align="right">green3</td>
- <td align="center" style="background-color: rgb( 0, 205, 0)">green3</td>
- <td align="left">rgb( 0, 205, 0)</td>
- <td align="left">#00CD00</td>
- </tr>
-
- <tr>
- <td align="right">ForestGreen</td>
- <td align="center" style="background-color: rgb( 34, 139, 34)">ForestGreen</td>
- <td align="left">rgb( 34, 139, 34)</td>
- <td align="left">#228B22</td>
- </tr>
-
- <tr>
- <td align="right">green4</td>
- <td align="center" style="background-color: rgb( 0, 139, 0)">green4</td>
- <td align="left">rgb( 0, 139, 0)</td>
- <td align="left">#008B00</td>
- </tr>
-
- <tr>
- <td align="right">green</td>
- <td align="center" style="background-color: rgb( 0, 128, 0)">green</td>
- <td align="left">rgb( 0, 128, 0)</td>
- <td align="left">#008000</td>
- </tr>
-
- <tr>
- <td align="right">DarkGreen</td>
- <td align="center" style="background-color: rgb( 0, 100, 0)">DarkGreen</td>
- <td align="left">rgb( 0, 100, 0)</td>
- <td align="left">#006400</td>
- </tr>
-
- <tr>
- <td align="right">LawnGreen</td>
- <td align="center" style="background-color: rgb(124, 252, 0)">LawnGreen</td>
- <td align="left">rgb(124, 252, 0)</td>
- <td align="left">#7CFC00</td>
- </tr>
-
- <tr>
- <td align="right">chartreuse</td>
- <td align="center" style="background-color: rgb(127, 255, 0)">chartreuse</td>
- <td align="left">rgb(127, 255, 0)</td>
- <td align="left">#7FFF00</td>
- </tr>
-
- <tr>
- <td align="right">chartreuse1</td>
- <td align="center" style="background-color: rgb(127, 255, 0)">chartreuse1</td>
- <td align="left">rgb(127, 255, 0)</td>
- <td align="left">#7FFF00</td>
- </tr>
-
- <tr>
- <td align="right">chartreuse2</td>
- <td align="center" style="background-color: rgb(118, 238, 0)">chartreuse2</td>
- <td align="left">rgb(118, 238, 0)</td>
- <td align="left">#76EE00</td>
- </tr>
-
- <tr>
- <td align="right">chartreuse3</td>
- <td align="center" style="background-color: rgb(102, 205, 0)">chartreuse3</td>
- <td align="left">rgb(102, 205, 0)</td>
- <td align="left">#66CD00</td>
- </tr>
-
- <tr>
- <td align="right">chartreuse4</td>
- <td align="center" style="background-color: rgb( 69, 139, 0)">chartreuse4</td>
- <td align="left">rgb( 69, 139, 0)</td>
- <td align="left">#458B00</td>
- </tr>
-
- <tr>
- <td align="right">GreenYellow</td>
- <td align="center" style="background-color: rgb(173, 255, 47)">GreenYellow</td>
- <td align="left">rgb(173, 255, 47)</td>
- <td align="left">#ADFF2F</td>
- </tr>
-
- <tr>
- <td align="right">DarkOliveGreen3</td>
- <td align="center" style="background-color: rgb(162, 205, 90)">DarkOliveGreen3</td>
- <td align="left">rgb(162, 205, 90)</td>
- <td align="left">#A2CD5A</td>
- </tr>
-
- <tr>
- <td align="right">DarkOliveGreen1</td>
- <td align="center" style="background-color: rgb(202, 255, 112)">DarkOliveGreen1</td>
- <td align="left">rgb(202, 255, 112)</td>
- <td align="left">#CAFF70</td>
- </tr>
-
- <tr>
- <td align="right">DarkOliveGreen2</td>
- <td align="center" style="background-color: rgb(188, 238, 104)">DarkOliveGreen2</td>
- <td align="left">rgb(188, 238, 104)</td>
- <td align="left">#BCEE68</td>
- </tr>
-
- <tr>
- <td align="right">DarkOliveGreen4</td>
- <td align="center" style="background-color: rgb(110, 139, 61)">DarkOliveGreen4</td>
- <td align="left">rgb(110, 139, 61)</td>
- <td align="left">#6E8B3D</td>
- </tr>
-
- <tr>
- <td align="right">DarkOliveGreen</td>
- <td align="center" style="background-color: rgb( 85, 107, 47)">DarkOliveGreen</td>
- <td align="left">rgb( 85, 107, 47)</td>
- <td align="left">#556B2F</td>
- </tr>
-
- <tr>
- <td align="right">OliveDrab</td>
- <td align="center" style="background-color: rgb(107, 142, 35)">OliveDrab</td>
- <td align="left">rgb(107, 142, 35)</td>
- <td align="left">#6B8E23</td>
- </tr>
-
- <tr>
- <td align="right">OliveDrab1</td>
- <td align="center" style="background-color: rgb(192, 255, 62)">OliveDrab1</td>
- <td align="left">rgb(192, 255, 62)</td>
- <td align="left">#C0FF3E</td>
- </tr>
-
- <tr>
- <td align="right">OliveDrab2</td>
- <td align="center" style="background-color: rgb(179, 238, 58)">OliveDrab2</td>
- <td align="left">rgb(179, 238, 58)</td>
- <td align="left">#B3EE3A</td>
- </tr>
-
- <tr>
- <td align="right">OliveDrab3</td>
- <td align="center" style="background-color: rgb(154, 205, 50)">OliveDrab3</td>
- <td align="left">rgb(154, 205, 50)</td>
- <td align="left">#9ACD32</td>
- </tr>
-
- <tr>
- <td align="right">YellowGreen</td>
- <td align="center" style="background-color: rgb(154, 205, 50)">YellowGreen</td>
- <td align="left">rgb(154, 205, 50)</td>
- <td align="left">#9ACD32</td>
- </tr>
-
- <tr>
- <td align="right">OliveDrab4</td>
- <td align="center" style="background-color: rgb(105, 139, 34)">OliveDrab4</td>
- <td align="left">rgb(105, 139, 34)</td>
- <td align="left">#698B22</td>
- </tr>
-
- <tr>
- <td align="right">ivory</td>
- <td align="center" style="background-color: rgb(255, 255, 240)">ivory</td>
- <td align="left">rgb(255, 255, 240)</td>
- <td align="left">#FFFFF0</td>
- </tr>
-
- <tr>
- <td align="right">ivory1</td>
- <td align="center" style="background-color: rgb(255, 255, 240)">ivory1</td>
- <td align="left">rgb(255, 255, 240)</td>
- <td align="left">#FFFFF0</td>
- </tr>
-
- <tr>
- <td align="right">LightYellow</td>
- <td align="center" style="background-color: rgb(255, 255, 224)">LightYellow</td>
- <td align="left">rgb(255, 255, 224)</td>
- <td align="left">#FFFFE0</td>
- </tr>
-
- <tr>
- <td align="right">LightYellow1</td>
- <td align="center" style="background-color: rgb(255, 255, 224)">LightYellow1</td>
- <td align="left">rgb(255, 255, 224)</td>
- <td align="left">#FFFFE0</td>
- </tr>
-
- <tr>
- <td align="right">beige</td>
- <td align="center" style="background-color: rgb(245, 245, 220)">beige</td>
- <td align="left">rgb(245, 245, 220)</td>
- <td align="left">#F5F5DC</td>
- </tr>
-
- <tr>
- <td align="right">ivory2</td>
- <td align="center" style="background-color: rgb(238, 238, 224)">ivory2</td>
- <td align="left">rgb(238, 238, 224)</td>
- <td align="left">#EEEEE0</td>
- </tr>
-
- <tr>
- <td align="right">LightGoldenrodYellow</td>
- <td align="center" style="background-color: rgb(250, 250, 210)">LightGoldenrodYellow</td>
- <td align="left">rgb(250, 250, 210)</td>
- <td align="left">#FAFAD2</td>
- </tr>
-
- <tr>
- <td align="right">LightYellow2</td>
- <td align="center" style="background-color: rgb(238, 238, 209)">LightYellow2</td>
- <td align="left">rgb(238, 238, 209)</td>
- <td align="left">#EEEED1</td>
- </tr>
-
- <tr>
- <td align="right">ivory3</td>
- <td align="center" style="background-color: rgb(205, 205, 193)">ivory3</td>
- <td align="left">rgb(205, 205, 193)</td>
- <td align="left">#CDCDC1</td>
- </tr>
-
- <tr>
- <td align="right">LightYellow3</td>
- <td align="center" style="background-color: rgb(205, 205, 180)">LightYellow3</td>
- <td align="left">rgb(205, 205, 180)</td>
- <td align="left">#CDCDB4</td>
- </tr>
-
- <tr>
- <td align="right">ivory4</td>
- <td align="center" style="background-color: rgb(139, 139, 131)">ivory4</td>
- <td align="left">rgb(139, 139, 131)</td>
- <td align="left">#8B8B83</td>
- </tr>
-
- <tr>
- <td align="right">LightYellow4</td>
- <td align="center" style="background-color: rgb(139, 139, 122)">LightYellow4</td>
- <td align="left">rgb(139, 139, 122)</td>
- <td align="left">#8B8B7A</td>
- </tr>
-
- <tr>
- <td align="right">yellow</td>
- <td align="center" style="background-color: rgb(255, 255, 0)">yellow</td>
- <td align="left">rgb(255, 255, 0)</td>
- <td align="left">#FFFF00</td>
- </tr>
-
- <tr>
- <td align="right">yellow1</td>
- <td align="center" style="background-color: rgb(255, 255, 0)">yellow1</td>
- <td align="left">rgb(255, 255, 0)</td>
- <td align="left">#FFFF00</td>
- </tr>
-
- <tr>
- <td align="right">yellow2</td>
- <td align="center" style="background-color: rgb(238, 238, 0)">yellow2</td>
- <td align="left">rgb(238, 238, 0)</td>
- <td align="left">#EEEE00</td>
- </tr>
-
- <tr>
- <td align="right">yellow3</td>
- <td align="center" style="background-color: rgb(205, 205, 0)">yellow3</td>
- <td align="left">rgb(205, 205, 0)</td>
- <td align="left">#CDCD00</td>
- </tr>
-
- <tr>
- <td align="right">yellow4</td>
- <td align="center" style="background-color: rgb(139, 139, 0)">yellow4</td>
- <td align="left">rgb(139, 139, 0)</td>
- <td align="left">#8B8B00</td>
- </tr>
-
- <tr>
- <td align="right">olive</td>
- <td align="center" style="background-color: rgb(128, 128, 0)">olive</td>
- <td align="left">rgb(128, 128, 0)</td>
- <td align="left">#808000</td>
- </tr>
-
- <tr>
- <td align="right">DarkKhaki</td>
- <td align="center" style="background-color: rgb(189, 183, 107)">DarkKhaki</td>
- <td align="left">rgb(189, 183, 107)</td>
- <td align="left">#BDB76B</td>
- </tr>
-
- <tr>
- <td align="right">khaki2</td>
- <td align="center" style="background-color: rgb(238, 230, 133)">khaki2</td>
- <td align="left">rgb(238, 230, 133)</td>
- <td align="left">#EEE685</td>
- </tr>
-
- <tr>
- <td align="right">LemonChiffon4</td>
- <td align="center" style="background-color: rgb(139, 137, 112)">LemonChiffon4</td>
- <td align="left">rgb(139, 137, 112)</td>
- <td align="left">#8B8970</td>
- </tr>
-
- <tr>
- <td align="right">khaki1</td>
- <td align="center" style="background-color: rgb(255, 246, 143)">khaki1</td>
- <td align="left">rgb(255, 246, 143)</td>
- <td align="left">#FFF68F</td>
- </tr>
-
- <tr>
- <td align="right">khaki3</td>
- <td align="center" style="background-color: rgb(205, 198, 115)">khaki3</td>
- <td align="left">rgb(205, 198, 115)</td>
- <td align="left">#CDC673</td>
- </tr>
-
- <tr>
- <td align="right">khaki4</td>
- <td align="center" style="background-color: rgb(139, 134, 78)">khaki4</td>
- <td align="left">rgb(139, 134, 78)</td>
- <td align="left">#8B864E</td>
- </tr>
-
- <tr>
- <td align="right">PaleGoldenrod</td>
- <td align="center" style="background-color: rgb(238, 232, 170)">PaleGoldenrod</td>
- <td align="left">rgb(238, 232, 170)</td>
- <td align="left">#EEE8AA</td>
- </tr>
-
- <tr>
- <td align="right">LemonChiffon</td>
- <td align="center" style="background-color: rgb(255, 250, 205)">LemonChiffon</td>
- <td align="left">rgb(255, 250, 205)</td>
- <td align="left">#FFFACD</td>
- </tr>
-
- <tr>
- <td align="right">LemonChiffon1</td>
- <td align="center" style="background-color: rgb(255, 250, 205)">LemonChiffon1</td>
- <td align="left">rgb(255, 250, 205)</td>
- <td align="left">#FFFACD</td>
- </tr>
-
- <tr>
- <td align="right">khaki</td>
- <td align="center" style="background-color: rgb(240, 230, 140)">khaki</td>
- <td align="left">rgb(240, 230, 140)</td>
- <td align="left">#F0E68C</td>
- </tr>
-
- <tr>
- <td align="right">LemonChiffon3</td>
- <td align="center" style="background-color: rgb(205, 201, 165)">LemonChiffon3</td>
- <td align="left">rgb(205, 201, 165)</td>
- <td align="left">#CDC9A5</td>
- </tr>
-
- <tr>
- <td align="right">LemonChiffon2</td>
- <td align="center" style="background-color: rgb(238, 233, 191)">LemonChiffon2</td>
- <td align="left">rgb(238, 233, 191)</td>
- <td align="left">#EEE9BF</td>
- </tr>
-
- <tr>
- <td align="right">MediumGoldenRod</td>
- <td align="center" style="background-color: rgb(209, 193, 102)">MediumGoldenRod</td>
- <td align="left">rgb(209, 193, 102)</td>
- <td align="left">#D1C166</td>
- </tr>
-
- <tr>
- <td align="right">cornsilk4</td>
- <td align="center" style="background-color: rgb(139, 136, 120)">cornsilk4</td>
- <td align="left">rgb(139, 136, 120)</td>
- <td align="left">#8B8878</td>
- </tr>
-
- <tr>
- <td align="right">gold</td>
- <td align="center" style="background-color: rgb(255, 215, 0)">gold</td>
- <td align="left">rgb(255, 215, 0)</td>
- <td align="left">#FFD700</td>
- </tr>
-
- <tr>
- <td align="right">gold1</td>
- <td align="center" style="background-color: rgb(255, 215, 0)">gold1</td>
- <td align="left">rgb(255, 215, 0)</td>
- <td align="left">#FFD700</td>
- </tr>
-
- <tr>
- <td align="right">gold2</td>
- <td align="center" style="background-color: rgb(238, 201, 0)">gold2</td>
- <td align="left">rgb(238, 201, 0)</td>
- <td align="left">#EEC900</td>
- </tr>
-
- <tr>
- <td align="right">gold3</td>
- <td align="center" style="background-color: rgb(205, 173, 0)">gold3</td>
- <td align="left">rgb(205, 173, 0)</td>
- <td align="left">#CDAD00</td>
- </tr>
-
- <tr>
- <td align="right">gold4</td>
- <td align="center" style="background-color: rgb(139, 117, 0)">gold4</td>
- <td align="left">rgb(139, 117, 0)</td>
- <td align="left">#8B7500</td>
- </tr>
-
- <tr>
- <td align="right">LightGoldenrod</td>
- <td align="center" style="background-color: rgb(238, 221, 130)">LightGoldenrod</td>
- <td align="left">rgb(238, 221, 130)</td>
- <td align="left">#EEDD82</td>
- </tr>
-
- <tr>
- <td align="right">LightGoldenrod4</td>
- <td align="center" style="background-color: rgb(139, 129, 76)">LightGoldenrod4</td>
- <td align="left">rgb(139, 129, 76)</td>
- <td align="left">#8B814C</td>
- </tr>
-
- <tr>
- <td align="right">LightGoldenrod1</td>
- <td align="center" style="background-color: rgb(255, 236, 139)">LightGoldenrod1</td>
- <td align="left">rgb(255, 236, 139)</td>
- <td align="left">#FFEC8B</td>
- </tr>
-
- <tr>
- <td align="right">LightGoldenrod3</td>
- <td align="center" style="background-color: rgb(205, 190, 112)">LightGoldenrod3</td>
- <td align="left">rgb(205, 190, 112)</td>
- <td align="left">#CDBE70</td>
- </tr>
-
- <tr>
- <td align="right">LightGoldenrod2</td>
- <td align="center" style="background-color: rgb(238, 220, 130)">LightGoldenrod2</td>
- <td align="left">rgb(238, 220, 130)</td>
- <td align="left">#EEDC82</td>
- </tr>
-
- <tr>
- <td align="right">cornsilk3</td>
- <td align="center" style="background-color: rgb(205, 200, 177)">cornsilk3</td>
- <td align="left">rgb(205, 200, 177)</td>
- <td align="left">#CDC8B1</td>
- </tr>
-
- <tr>
- <td align="right">cornsilk2</td>
- <td align="center" style="background-color: rgb(238, 232, 205)">cornsilk2</td>
- <td align="left">rgb(238, 232, 205)</td>
- <td align="left">#EEE8CD</td>
- </tr>
-
- <tr>
- <td align="right">cornsilk</td>
- <td align="center" style="background-color: rgb(255, 248, 220)">cornsilk</td>
- <td align="left">rgb(255, 248, 220)</td>
- <td align="left">#FFF8DC</td>
- </tr>
-
- <tr>
- <td align="right">cornsilk1</td>
- <td align="center" style="background-color: rgb(255, 248, 220)">cornsilk1</td>
- <td align="left">rgb(255, 248, 220)</td>
- <td align="left">#FFF8DC</td>
- </tr>
-
- <tr>
- <td align="right">goldenrod</td>
- <td align="center" style="background-color: rgb(218, 165, 32)">goldenrod</td>
- <td align="left">rgb(218, 165, 32)</td>
- <td align="left">#DAA520</td>
- </tr>
-
- <tr>
- <td align="right">goldenrod1</td>
- <td align="center" style="background-color: rgb(255, 193, 37)">goldenrod1</td>
- <td align="left">rgb(255, 193, 37)</td>
- <td align="left">#FFC125</td>
- </tr>
-
- <tr>
- <td align="right">goldenrod2</td>
- <td align="center" style="background-color: rgb(238, 180, 34)">goldenrod2</td>
- <td align="left">rgb(238, 180, 34)</td>
- <td align="left">#EEB422</td>
- </tr>
-
- <tr>
- <td align="right">goldenrod3</td>
- <td align="center" style="background-color: rgb(205, 155, 29)">goldenrod3</td>
- <td align="left">rgb(205, 155, 29)</td>
- <td align="left">#CD9B1D</td>
- </tr>
-
- <tr>
- <td align="right">goldenrod4</td>
- <td align="center" style="background-color: rgb(139, 105, 20)">goldenrod4</td>
- <td align="left">rgb(139, 105, 20)</td>
- <td align="left">#8B6914</td>
- </tr>
-
- <tr>
- <td align="right">DarkGoldenrod</td>
- <td align="center" style="background-color: rgb(184, 134, 11)">DarkGoldenrod</td>
- <td align="left">rgb(184, 134, 11)</td>
- <td align="left">#B8860B</td>
- </tr>
-
- <tr>
- <td align="right">DarkGoldenrod1</td>
- <td align="center" style="background-color: rgb(255, 185, 15)">DarkGoldenrod1</td>
- <td align="left">rgb(255, 185, 15)</td>
- <td align="left">#FFB90F</td>
- </tr>
-
- <tr>
- <td align="right">DarkGoldenrod2</td>
- <td align="center" style="background-color: rgb(238, 173, 14)">DarkGoldenrod2</td>
- <td align="left">rgb(238, 173, 14)</td>
- <td align="left">#EEAD0E</td>
- </tr>
-
- <tr>
- <td align="right">DarkGoldenrod3</td>
- <td align="center" style="background-color: rgb(205, 149, 12)">DarkGoldenrod3</td>
- <td align="left">rgb(205, 149, 12)</td>
- <td align="left">#CD950C</td>
- </tr>
-
- <tr>
- <td align="right">DarkGoldenrod4</td>
- <td align="center" style="background-color: rgb(139, 101, 8)">DarkGoldenrod4</td>
- <td align="left">rgb(139, 101, 8)</td>
- <td align="left">#8B6508</td>
- </tr>
-
- <tr>
- <td align="right">FloralWhite</td>
- <td align="center" style="background-color: rgb(255, 250, 240)">FloralWhite</td>
- <td align="left">rgb(255, 250, 240)</td>
- <td align="left">#FFFAF0</td>
- </tr>
-
- <tr>
- <td align="right">wheat2</td>
- <td align="center" style="background-color: rgb(238, 216, 174)">wheat2</td>
- <td align="left">rgb(238, 216, 174)</td>
- <td align="left">#EED8AE</td>
- </tr>
-
- <tr>
- <td align="right">OldLace</td>
- <td align="center" style="background-color: rgb(253, 245, 230)">OldLace</td>
- <td align="left">rgb(253, 245, 230)</td>
- <td align="left">#FDF5E6</td>
- </tr>
-
- <tr>
- <td align="right">wheat</td>
- <td align="center" style="background-color: rgb(245, 222, 179)">wheat</td>
- <td align="left">rgb(245, 222, 179)</td>
- <td align="left">#F5DEB3</td>
- </tr>
-
- <tr>
- <td align="right">wheat1</td>
- <td align="center" style="background-color: rgb(255, 231, 186)">wheat1</td>
- <td align="left">rgb(255, 231, 186)</td>
- <td align="left">#FFE7BA</td>
- </tr>
-
- <tr>
- <td align="right">wheat3</td>
- <td align="center" style="background-color: rgb(205, 186, 150)">wheat3</td>
- <td align="left">rgb(205, 186, 150)</td>
- <td align="left">#CDBA96</td>
- </tr>
-
- <tr>
- <td align="right">orange</td>
- <td align="center" style="background-color: rgb(255, 165, 0)">orange</td>
- <td align="left">rgb(255, 165, 0)</td>
- <td align="left">#FFA500</td>
- </tr>
-
- <tr>
- <td align="right">orange1</td>
- <td align="center" style="background-color: rgb(255, 165, 0)">orange1</td>
- <td align="left">rgb(255, 165, 0)</td>
- <td align="left">#FFA500</td>
- </tr>
-
- <tr>
- <td align="right">orange2</td>
- <td align="center" style="background-color: rgb(238, 154, 0)">orange2</td>
- <td align="left">rgb(238, 154, 0)</td>
- <td align="left">#EE9A00</td>
- </tr>
-
- <tr>
- <td align="right">orange3</td>
- <td align="center" style="background-color: rgb(205, 133, 0)">orange3</td>
- <td align="left">rgb(205, 133, 0)</td>
- <td align="left">#CD8500</td>
- </tr>
-
- <tr>
- <td align="right">orange4</td>
- <td align="center" style="background-color: rgb(139, 90, 0)">orange4</td>
- <td align="left">rgb(139, 90, 0)</td>
- <td align="left">#8B5A00</td>
- </tr>
-
- <tr>
- <td align="right">wheat4</td>
- <td align="center" style="background-color: rgb(139, 126, 102)">wheat4</td>
- <td align="left">rgb(139, 126, 102)</td>
- <td align="left">#8B7E66</td>
- </tr>
-
- <tr>
- <td align="right">moccasin</td>
- <td align="center" style="background-color: rgb(255, 228, 181)">moccasin</td>
- <td align="left">rgb(255, 228, 181)</td>
- <td align="left">#FFE4B5</td>
- </tr>
-
- <tr>
- <td align="right">PapayaWhip</td>
- <td align="center" style="background-color: rgb(255, 239, 213)">PapayaWhip</td>
- <td align="left">rgb(255, 239, 213)</td>
- <td align="left">#FFEFD5</td>
- </tr>
-
- <tr>
- <td align="right">NavajoWhite3</td>
- <td align="center" style="background-color: rgb(205, 179, 139)">NavajoWhite3</td>
- <td align="left">rgb(205, 179, 139)</td>
- <td align="left">#CDB38B</td>
- </tr>
-
- <tr>
- <td align="right">BlanchedAlmond</td>
- <td align="center" style="background-color: rgb(255, 235, 205)">BlanchedAlmond</td>
- <td align="left">rgb(255, 235, 205)</td>
- <td align="left">#FFEBCD</td>
- </tr>
-
- <tr>
- <td align="right">NavajoWhite</td>
- <td align="center" style="background-color: rgb(255, 222, 173)">NavajoWhite</td>
- <td align="left">rgb(255, 222, 173)</td>
- <td align="left">#FFDEAD</td>
- </tr>
-
- <tr>
- <td align="right">NavajoWhite1</td>
- <td align="center" style="background-color: rgb(255, 222, 173)">NavajoWhite1</td>
- <td align="left">rgb(255, 222, 173)</td>
- <td align="left">#FFDEAD</td>
- </tr>
-
- <tr>
- <td align="right">NavajoWhite2</td>
- <td align="center" style="background-color: rgb(238, 207, 161)">NavajoWhite2</td>
- <td align="left">rgb(238, 207, 161)</td>
- <td align="left">#EECFA1</td>
- </tr>
-
- <tr>
- <td align="right">NavajoWhite4</td>
- <td align="center" style="background-color: rgb(139, 121, 94)">NavajoWhite4</td>
- <td align="left">rgb(139, 121, 94)</td>
- <td align="left">#8B795E</td>
- </tr>
-
- <tr>
- <td align="right">AntiqueWhite4</td>
- <td align="center" style="background-color: rgb(139, 131, 120)">AntiqueWhite4</td>
- <td align="left">rgb(139, 131, 120)</td>
- <td align="left">#8B8378</td>
- </tr>
-
- <tr>
- <td align="right">AntiqueWhite</td>
- <td align="center" style="background-color: rgb(250, 235, 215)">AntiqueWhite</td>
- <td align="left">rgb(250, 235, 215)</td>
- <td align="left">#FAEBD7</td>
- </tr>
-
- <tr>
- <td align="right">tan</td>
- <td align="center" style="background-color: rgb(210, 180, 140)">tan</td>
- <td align="left">rgb(210, 180, 140)</td>
- <td align="left">#D2B48C</td>
- </tr>
-
- <tr>
- <td align="right">bisque4</td>
- <td align="center" style="background-color: rgb(139, 125, 107)">bisque4</td>
- <td align="left">rgb(139, 125, 107)</td>
- <td align="left">#8B7D6B</td>
- </tr>
-
- <tr>
- <td align="right">burlywood</td>
- <td align="center" style="background-color: rgb(222, 184, 135)">burlywood</td>
- <td align="left">rgb(222, 184, 135)</td>
- <td align="left">#DEB887</td>
- </tr>
-
- <tr>
- <td align="right">AntiqueWhite2</td>
- <td align="center" style="background-color: rgb(238, 223, 204)">AntiqueWhite2</td>
- <td align="left">rgb(238, 223, 204)</td>
- <td align="left">#EEDFCC</td>
- </tr>
-
- <tr>
- <td align="right">burlywood1</td>
- <td align="center" style="background-color: rgb(255, 211, 155)">burlywood1</td>
- <td align="left">rgb(255, 211, 155)</td>
- <td align="left">#FFD39B</td>
- </tr>
-
- <tr>
- <td align="right">burlywood3</td>
- <td align="center" style="background-color: rgb(205, 170, 125)">burlywood3</td>
- <td align="left">rgb(205, 170, 125)</td>
- <td align="left">#CDAA7D</td>
- </tr>
-
- <tr>
- <td align="right">burlywood2</td>
- <td align="center" style="background-color: rgb(238, 197, 145)">burlywood2</td>
- <td align="left">rgb(238, 197, 145)</td>
- <td align="left">#EEC591</td>
- </tr>
-
- <tr>
- <td align="right">AntiqueWhite1</td>
- <td align="center" style="background-color: rgb(255, 239, 219)">AntiqueWhite1</td>
- <td align="left">rgb(255, 239, 219)</td>
- <td align="left">#FFEFDB</td>
- </tr>
-
- <tr>
- <td align="right">burlywood4</td>
- <td align="center" style="background-color: rgb(139, 115, 85)">burlywood4</td>
- <td align="left">rgb(139, 115, 85)</td>
- <td align="left">#8B7355</td>
- </tr>
-
- <tr>
- <td align="right">AntiqueWhite3</td>
- <td align="center" style="background-color: rgb(205, 192, 176)">AntiqueWhite3</td>
- <td align="left">rgb(205, 192, 176)</td>
- <td align="left">#CDC0B0</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrange</td>
- <td align="center" style="background-color: rgb(255, 140, 0)">DarkOrange</td>
- <td align="left">rgb(255, 140, 0)</td>
- <td align="left">#FF8C00</td>
- </tr>
-
- <tr>
- <td align="right">bisque2</td>
- <td align="center" style="background-color: rgb(238, 213, 183)">bisque2</td>
- <td align="left">rgb(238, 213, 183)</td>
- <td align="left">#EED5B7</td>
- </tr>
-
- <tr>
- <td align="right">bisque</td>
- <td align="center" style="background-color: rgb(255, 228, 196)">bisque</td>
- <td align="left">rgb(255, 228, 196)</td>
- <td align="left">#FFE4C4</td>
- </tr>
-
- <tr>
- <td align="right">bisque1</td>
- <td align="center" style="background-color: rgb(255, 228, 196)">bisque1</td>
- <td align="left">rgb(255, 228, 196)</td>
- <td align="left">#FFE4C4</td>
- </tr>
-
- <tr>
- <td align="right">bisque3</td>
- <td align="center" style="background-color: rgb(205, 183, 158)">bisque3</td>
- <td align="left">rgb(205, 183, 158)</td>
- <td align="left">#CDB79E</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrange1</td>
- <td align="center" style="background-color: rgb(255, 127, 0)">DarkOrange1</td>
- <td align="left">rgb(255, 127, 0)</td>
- <td align="left">#FF7F00</td>
- </tr>
-
- <tr>
- <td align="right">linen</td>
- <td align="center" style="background-color: rgb(250, 240, 230)">linen</td>
- <td align="left">rgb(250, 240, 230)</td>
- <td align="left">#FAF0E6</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrange2</td>
- <td align="center" style="background-color: rgb(238, 118, 0)">DarkOrange2</td>
- <td align="left">rgb(238, 118, 0)</td>
- <td align="left">#EE7600</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrange3</td>
- <td align="center" style="background-color: rgb(205, 102, 0)">DarkOrange3</td>
- <td align="left">rgb(205, 102, 0)</td>
- <td align="left">#CD6600</td>
- </tr>
-
- <tr>
- <td align="right">DarkOrange4</td>
- <td align="center" style="background-color: rgb(139, 69, 0)">DarkOrange4</td>
- <td align="left">rgb(139, 69, 0)</td>
- <td align="left">#8B4500</td>
- </tr>
-
- <tr>
- <td align="right">peru</td>
- <td align="center" style="background-color: rgb(205, 133, 63)">peru</td>
- <td align="left">rgb(205, 133, 63)</td>
- <td align="left">#CD853F</td>
- </tr>
-
- <tr>
- <td align="right">tan1</td>
- <td align="center" style="background-color: rgb(255, 165, 79)">tan1</td>
- <td align="left">rgb(255, 165, 79)</td>
- <td align="left">#FFA54F</td>
- </tr>
-
- <tr>
- <td align="right">tan2</td>
- <td align="center" style="background-color: rgb(238, 154, 73)">tan2</td>
- <td align="left">rgb(238, 154, 73)</td>
- <td align="left">#EE9A49</td>
- </tr>
-
- <tr>
- <td align="right">tan3</td>
- <td align="center" style="background-color: rgb(205, 133, 63)">tan3</td>
- <td align="left">rgb(205, 133, 63)</td>
- <td align="left">#CD853F</td>
- </tr>
-
- <tr>
- <td align="right">tan4</td>
- <td align="center" style="background-color: rgb(139, 90, 43)">tan4</td>
- <td align="left">rgb(139, 90, 43)</td>
- <td align="left">#8B5A2B</td>
- </tr>
-
- <tr>
- <td align="right">PeachPuff</td>
- <td align="center" style="background-color: rgb(255, 218, 185)">PeachPuff</td>
- <td align="left">rgb(255, 218, 185)</td>
- <td align="left">#FFDAB9</td>
- </tr>
-
- <tr>
- <td align="right">PeachPuff1</td>
- <td align="center" style="background-color: rgb(255, 218, 185)">PeachPuff1</td>
- <td align="left">rgb(255, 218, 185)</td>
- <td align="left">#FFDAB9</td>
- </tr>
-
- <tr>
- <td align="right">PeachPuff4</td>
- <td align="center" style="background-color: rgb(139, 119, 101)">PeachPuff4</td>
- <td align="left">rgb(139, 119, 101)</td>
- <td align="left">#8B7765</td>
- </tr>
-
- <tr>
- <td align="right">PeachPuff2</td>
- <td align="center" style="background-color: rgb(238, 203, 173)">PeachPuff2</td>
- <td align="left">rgb(238, 203, 173)</td>
- <td align="left">#EECBAD</td>
- </tr>
-
- <tr>
- <td align="right">PeachPuff3</td>
- <td align="center" style="background-color: rgb(205, 175, 149)">PeachPuff3</td>
- <td align="left">rgb(205, 175, 149)</td>
- <td align="left">#CDAF95</td>
- </tr>
-
- <tr>
- <td align="right">SandyBrown</td>
- <td align="center" style="background-color: rgb(244, 164, 96)">SandyBrown</td>
- <td align="left">rgb(244, 164, 96)</td>
- <td align="left">#F4A460</td>
- </tr>
-
- <tr>
- <td align="right">seashell4</td>
- <td align="center" style="background-color: rgb(139, 134, 130)">seashell4</td>
- <td align="left">rgb(139, 134, 130)</td>
- <td align="left">#8B8682</td>
- </tr>
-
- <tr>
- <td align="right">seashell2</td>
- <td align="center" style="background-color: rgb(238, 229, 222)">seashell2</td>
- <td align="left">rgb(238, 229, 222)</td>
- <td align="left">#EEE5DE</td>
- </tr>
-
- <tr>
- <td align="right">seashell3</td>
- <td align="center" style="background-color: rgb(205, 197, 191)">seashell3</td>
- <td align="left">rgb(205, 197, 191)</td>
- <td align="left">#CDC5BF</td>
- </tr>
-
- <tr>
- <td align="right">chocolate</td>
- <td align="center" style="background-color: rgb(210, 105, 30)">chocolate</td>
- <td align="left">rgb(210, 105, 30)</td>
- <td align="left">#D2691E</td>
- </tr>
-
- <tr>
- <td align="right">chocolate1</td>
- <td align="center" style="background-color: rgb(255, 127, 36)">chocolate1</td>
- <td align="left">rgb(255, 127, 36)</td>
- <td align="left">#FF7F24</td>
- </tr>
-
- <tr>
- <td align="right">chocolate2</td>
- <td align="center" style="background-color: rgb(238, 118, 33)">chocolate2</td>
- <td align="left">rgb(238, 118, 33)</td>
- <td align="left">#EE7621</td>
- </tr>
-
- <tr>
- <td align="right">chocolate3</td>
- <td align="center" style="background-color: rgb(205, 102, 29)">chocolate3</td>
- <td align="left">rgb(205, 102, 29)</td>
- <td align="left">#CD661D</td>
- </tr>
-
- <tr>
- <td align="right">chocolate4</td>
- <td align="center" style="background-color: rgb(139, 69, 19)">chocolate4</td>
- <td align="left">rgb(139, 69, 19)</td>
- <td align="left">#8B4513</td>
- </tr>
-
- <tr>
- <td align="right">SaddleBrown</td>
- <td align="center" style="background-color: rgb(139, 69, 19)">SaddleBrown</td>
- <td align="left">rgb(139, 69, 19)</td>
- <td align="left">#8B4513</td>
- </tr>
-
- <tr>
- <td align="right">seashell</td>
- <td align="center" style="background-color: rgb(255, 245, 238)">seashell</td>
- <td align="left">rgb(255, 245, 238)</td>
- <td align="left">#FFF5EE</td>
- </tr>
-
- <tr>
- <td align="right">seashell1</td>
- <td align="center" style="background-color: rgb(255, 245, 238)">seashell1</td>
- <td align="left">rgb(255, 245, 238)</td>
- <td align="left">#FFF5EE</td>
- </tr>
-
- <tr>
- <td align="right">sienna4</td>
- <td align="center" style="background-color: rgb(139, 71, 38)">sienna4</td>
- <td align="left">rgb(139, 71, 38)</td>
- <td align="left">#8B4726</td>
- </tr>
-
- <tr>
- <td align="right">sienna</td>
- <td align="center" style="background-color: rgb(160, 82, 45)">sienna</td>
- <td align="left">rgb(160, 82, 45)</td>
- <td align="left">#A0522D</td>
- </tr>
-
- <tr>
- <td align="right">sienna1</td>
- <td align="center" style="background-color: rgb(255, 130, 71)">sienna1</td>
- <td align="left">rgb(255, 130, 71)</td>
- <td align="left">#FF8247</td>
- </tr>
-
- <tr>
- <td align="right">sienna2</td>
- <td align="center" style="background-color: rgb(238, 121, 66)">sienna2</td>
- <td align="left">rgb(238, 121, 66)</td>
- <td align="left">#EE7942</td>
- </tr>
-
- <tr>
- <td align="right">sienna3</td>
- <td align="center" style="background-color: rgb(205, 104, 57)">sienna3</td>
- <td align="left">rgb(205, 104, 57)</td>
- <td align="left">#CD6839</td>
- </tr>
-
- <tr>
- <td align="right">LightSalmon3</td>
- <td align="center" style="background-color: rgb(205, 129, 98)">LightSalmon3</td>
- <td align="left">rgb(205, 129, 98)</td>
- <td align="left">#CD8162</td>
- </tr>
-
- <tr>
- <td align="right">LightSalmon</td>
- <td align="center" style="background-color: rgb(255, 160, 122)">LightSalmon</td>
- <td align="left">rgb(255, 160, 122)</td>
- <td align="left">#FFA07A</td>
- </tr>
-
- <tr>
- <td align="right">LightSalmon1</td>
- <td align="center" style="background-color: rgb(255, 160, 122)">LightSalmon1</td>
- <td align="left">rgb(255, 160, 122)</td>
- <td align="left">#FFA07A</td>
- </tr>
-
- <tr>
- <td align="right">LightSalmon4</td>
- <td align="center" style="background-color: rgb(139, 87, 66)">LightSalmon4</td>
- <td align="left">rgb(139, 87, 66)</td>
- <td align="left">#8B5742</td>
- </tr>
-
- <tr>
- <td align="right">LightSalmon2</td>
- <td align="center" style="background-color: rgb(238, 149, 114)">LightSalmon2</td>
- <td align="left">rgb(238, 149, 114)</td>
- <td align="left">#EE9572</td>
- </tr>
-
- <tr>
- <td align="right">coral</td>
- <td align="center" style="background-color: rgb(255, 127, 80)">coral</td>
- <td align="left">rgb(255, 127, 80)</td>
- <td align="left">#FF7F50</td>
- </tr>
-
- <tr>
- <td align="right">OrangeRed</td>
- <td align="center" style="background-color: rgb(255, 69, 0)">OrangeRed</td>
- <td align="left">rgb(255, 69, 0)</td>
- <td align="left">#FF4500</td>
- </tr>
-
- <tr>
- <td align="right">OrangeRed1</td>
- <td align="center" style="background-color: rgb(255, 69, 0)">OrangeRed1</td>
- <td align="left">rgb(255, 69, 0)</td>
- <td align="left">#FF4500</td>
- </tr>
-
- <tr>
- <td align="right">OrangeRed2</td>
- <td align="center" style="background-color: rgb(238, 64, 0)">OrangeRed2</td>
- <td align="left">rgb(238, 64, 0)</td>
- <td align="left">#EE4000</td>
- </tr>
-
- <tr>
- <td align="right">OrangeRed3</td>
- <td align="center" style="background-color: rgb(205, 55, 0)">OrangeRed3</td>
- <td align="left">rgb(205, 55, 0)</td>
- <td align="left">#CD3700</td>
- </tr>
-
- <tr>
- <td align="right">OrangeRed4</td>
- <td align="center" style="background-color: rgb(139, 37, 0)">OrangeRed4</td>
- <td align="left">rgb(139, 37, 0)</td>
- <td align="left">#8B2500</td>
- </tr>
-
- <tr>
- <td align="right">DarkSalmon</td>
- <td align="center" style="background-color: rgb(233, 150, 122)">DarkSalmon</td>
- <td align="left">rgb(233, 150, 122)</td>
- <td align="left">#E9967A</td>
- </tr>
-
- <tr>
- <td align="right">salmon1</td>
- <td align="center" style="background-color: rgb(255, 140, 105)">salmon1</td>
- <td align="left">rgb(255, 140, 105)</td>
- <td align="left">#FF8C69</td>
- </tr>
-
- <tr>
- <td align="right">salmon2</td>
- <td align="center" style="background-color: rgb(238, 130, 98)">salmon2</td>
- <td align="left">rgb(238, 130, 98)</td>
- <td align="left">#EE8262</td>
- </tr>
-
- <tr>
- <td align="right">salmon3</td>
- <td align="center" style="background-color: rgb(205, 112, 84)">salmon3</td>
- <td align="left">rgb(205, 112, 84)</td>
- <td align="left">#CD7054</td>
- </tr>
-
- <tr>
- <td align="right">salmon4</td>
- <td align="center" style="background-color: rgb(139, 76, 57)">salmon4</td>
- <td align="left">rgb(139, 76, 57)</td>
- <td align="left">#8B4C39</td>
- </tr>
-
- <tr>
- <td align="right">coral1</td>
- <td align="center" style="background-color: rgb(255, 114, 86)">coral1</td>
- <td align="left">rgb(255, 114, 86)</td>
- <td align="left">#FF7256</td>
- </tr>
-
- <tr>
- <td align="right">coral2</td>
- <td align="center" style="background-color: rgb(238, 106, 80)">coral2</td>
- <td align="left">rgb(238, 106, 80)</td>
- <td align="left">#EE6A50</td>
- </tr>
-
- <tr>
- <td align="right">coral3</td>
- <td align="center" style="background-color: rgb(205, 91, 69)">coral3</td>
- <td align="left">rgb(205, 91, 69)</td>
- <td align="left">#CD5B45</td>
- </tr>
-
- <tr>
- <td align="right">coral4</td>
- <td align="center" style="background-color: rgb(139, 62, 47)">coral4</td>
- <td align="left">rgb(139, 62, 47)</td>
- <td align="left">#8B3E2F</td>
- </tr>
-
- <tr>
- <td align="right">tomato4</td>
- <td align="center" style="background-color: rgb(139, 54, 38)">tomato4</td>
- <td align="left">rgb(139, 54, 38)</td>
- <td align="left">#8B3626</td>
- </tr>
-
- <tr>
- <td align="right">tomato</td>
- <td align="center" style="background-color: rgb(255, 99, 71)">tomato</td>
- <td align="left">rgb(255, 99, 71)</td>
- <td align="left">#FF6347</td>
- </tr>
-
- <tr>
- <td align="right">tomato1</td>
- <td align="center" style="background-color: rgb(255, 99, 71)">tomato1</td>
- <td align="left">rgb(255, 99, 71)</td>
- <td align="left">#FF6347</td>
- </tr>
-
- <tr>
- <td align="right">tomato2</td>
- <td align="center" style="background-color: rgb(238, 92, 66)">tomato2</td>
- <td align="left">rgb(238, 92, 66)</td>
- <td align="left">#EE5C42</td>
- </tr>
-
- <tr>
- <td align="right">tomato3</td>
- <td align="center" style="background-color: rgb(205, 79, 57)">tomato3</td>
- <td align="left">rgb(205, 79, 57)</td>
- <td align="left">#CD4F39</td>
- </tr>
-
- <tr>
- <td align="right">MistyRose4</td>
- <td align="center" style="background-color: rgb(139, 125, 123)">MistyRose4</td>
- <td align="left">rgb(139, 125, 123)</td>
- <td align="left">#8B7D7B</td>
- </tr>
-
- <tr>
- <td align="right">MistyRose2</td>
- <td align="center" style="background-color: rgb(238, 213, 210)">MistyRose2</td>
- <td align="left">rgb(238, 213, 210)</td>
- <td align="left">#EED5D2</td>
- </tr>
-
- <tr>
- <td align="right">MistyRose</td>
- <td align="center" style="background-color: rgb(255, 228, 225)">MistyRose</td>
- <td align="left">rgb(255, 228, 225)</td>
- <td align="left">#FFE4E1</td>
- </tr>
-
- <tr>
- <td align="right">MistyRose1</td>
- <td align="center" style="background-color: rgb(255, 228, 225)">MistyRose1</td>
- <td align="left">rgb(255, 228, 225)</td>
- <td align="left">#FFE4E1</td>
- </tr>
-
- <tr>
- <td align="right">salmon</td>
- <td align="center" style="background-color: rgb(250, 128, 114)">salmon</td>
- <td align="left">rgb(250, 128, 114)</td>
- <td align="left">#FA8072</td>
- </tr>
-
- <tr>
- <td align="right">MistyRose3</td>
- <td align="center" style="background-color: rgb(205, 183, 181)">MistyRose3</td>
- <td align="left">rgb(205, 183, 181)</td>
- <td align="left">#CDB7B5</td>
- </tr>
-
- <tr>
- <td align="right">white</td>
- <td align="center" style="background-color: rgb(255, 255, 255)">white</td>
- <td align="left">rgb(255, 255, 255)</td>
- <td align="left">#FFFFFF</td>
- </tr>
-
- <tr>
- <td align="right">gray100</td>
- <td align="center" style="background-color: rgb(255, 255, 255)">gray100</td>
- <td align="left">rgb(255, 255, 255)</td>
- <td align="left">#FFFFFF</td>
- </tr>
-
- <tr>
- <td align="right">grey100</td>
- <td align="center" style="background-color: rgb(255, 255, 255)">grey100</td>
- <td align="left">rgb(255, 255, 255)</td>
- <td align="left">#FFFFFF</td>
- </tr>
-
- <tr>
- <td align="right">gray99</td>
- <td align="center" style="background-color: rgb(252, 252, 252)">gray99</td>
- <td align="left">rgb(252, 252, 252)</td>
- <td align="left">#FCFCFC</td>
- </tr>
-
- <tr>
- <td align="right">grey99</td>
- <td align="center" style="background-color: rgb(252, 252, 252)">grey99</td>
- <td align="left">rgb(252, 252, 252)</td>
- <td align="left">#FCFCFC</td>
- </tr>
-
- <tr>
- <td align="right">gray98</td>
- <td align="center" style="background-color: rgb(250, 250, 250)">gray98</td>
- <td align="left">rgb(250, 250, 250)</td>
- <td align="left">#FAFAFA</td>
- </tr>
-
- <tr>
- <td align="right">grey98</td>
- <td align="center" style="background-color: rgb(250, 250, 250)">grey98</td>
- <td align="left">rgb(250, 250, 250)</td>
- <td align="left">#FAFAFA</td>
- </tr>
-
- <tr>
- <td align="right">gray97</td>
- <td align="center" style="background-color: rgb(247, 247, 247)">gray97</td>
- <td align="left">rgb(247, 247, 247)</td>
- <td align="left">#F7F7F7</td>
- </tr>
-
- <tr>
- <td align="right">grey97</td>
- <td align="center" style="background-color: rgb(247, 247, 247)">grey97</td>
- <td align="left">rgb(247, 247, 247)</td>
- <td align="left">#F7F7F7</td>
- </tr>
-
- <tr>
- <td align="right">gray96</td>
- <td align="center" style="background-color: rgb(245, 245, 245)">gray96</td>
- <td align="left">rgb(245, 245, 245)</td>
- <td align="left">#F5F5F5</td>
- </tr>
-
- <tr>
- <td align="right">grey96</td>
- <td align="center" style="background-color: rgb(245, 245, 245)">grey96</td>
- <td align="left">rgb(245, 245, 245)</td>
- <td align="left">#F5F5F5</td>
- </tr>
-
- <tr>
- <td align="right">WhiteSmoke</td>
- <td align="center" style="background-color: rgb(245, 245, 245)">WhiteSmoke</td>
- <td align="left">rgb(245, 245, 245)</td>
- <td align="left">#F5F5F5</td>
- </tr>
-
- <tr>
- <td align="right">gray95</td>
- <td align="center" style="background-color: rgb(242, 242, 242)">gray95</td>
- <td align="left">rgb(242, 242, 242)</td>
- <td align="left">#F2F2F2</td>
- </tr>
-
- <tr>
- <td align="right">grey95</td>
- <td align="center" style="background-color: rgb(242, 242, 242)">grey95</td>
- <td align="left">rgb(242, 242, 242)</td>
- <td align="left">#F2F2F2</td>
- </tr>
-
- <tr>
- <td align="right">gray94</td>
- <td align="center" style="background-color: rgb(240, 240, 240)">gray94</td>
- <td align="left">rgb(240, 240, 240)</td>
- <td align="left">#F0F0F0</td>
- </tr>
-
- <tr>
- <td align="right">grey94</td>
- <td align="center" style="background-color: rgb(240, 240, 240)">grey94</td>
- <td align="left">rgb(240, 240, 240)</td>
- <td align="left">#F0F0F0</td>
- </tr>
-
- <tr>
- <td align="right">gray93</td>
- <td align="center" style="background-color: rgb(237, 237, 237)">gray93</td>
- <td align="left">rgb(237, 237, 237)</td>
- <td align="left">#EDEDED</td>
- </tr>
-
- <tr>
- <td align="right">grey93</td>
- <td align="center" style="background-color: rgb(237, 237, 237)">grey93</td>
- <td align="left">rgb(237, 237, 237)</td>
- <td align="left">#EDEDED</td>
- </tr>
-
- <tr>
- <td align="right">gray92</td>
- <td align="center" style="background-color: rgb(235, 235, 235)">gray92</td>
- <td align="left">rgb(235, 235, 235)</td>
- <td align="left">#EBEBEB</td>
- </tr>
-
- <tr>
- <td align="right">grey92</td>
- <td align="center" style="background-color: rgb(235, 235, 235)">grey92</td>
- <td align="left">rgb(235, 235, 235)</td>
- <td align="left">#EBEBEB</td>
- </tr>
-
- <tr>
- <td align="right">gray91</td>
- <td align="center" style="background-color: rgb(232, 232, 232)">gray91</td>
- <td align="left">rgb(232, 232, 232)</td>
- <td align="left">#E8E8E8</td>
- </tr>
-
- <tr>
- <td align="right">grey91</td>
- <td align="center" style="background-color: rgb(232, 232, 232)">grey91</td>
- <td align="left">rgb(232, 232, 232)</td>
- <td align="left">#E8E8E8</td>
- </tr>
-
- <tr>
- <td align="right">gray90</td>
- <td align="center" style="background-color: rgb(229, 229, 229)">gray90</td>
- <td align="left">rgb(229, 229, 229)</td>
- <td align="left">#E5E5E5</td>
- </tr>
-
- <tr>
- <td align="right">grey90</td>
- <td align="center" style="background-color: rgb(229, 229, 229)">grey90</td>
- <td align="left">rgb(229, 229, 229)</td>
- <td align="left">#E5E5E5</td>
- </tr>
-
- <tr>
- <td align="right">gray89</td>
- <td align="center" style="background-color: rgb(227, 227, 227)">gray89</td>
- <td align="left">rgb(227, 227, 227)</td>
- <td align="left">#E3E3E3</td>
- </tr>
-
- <tr>
- <td align="right">grey89</td>
- <td align="center" style="background-color: rgb(227, 227, 227)">grey89</td>
- <td align="left">rgb(227, 227, 227)</td>
- <td align="left">#E3E3E3</td>
- </tr>
-
- <tr>
- <td align="right">gray88</td>
- <td align="center" style="background-color: rgb(224, 224, 224)">gray88</td>
- <td align="left">rgb(224, 224, 224)</td>
- <td align="left">#E0E0E0</td>
- </tr>
-
- <tr>
- <td align="right">grey88</td>
- <td align="center" style="background-color: rgb(224, 224, 224)">grey88</td>
- <td align="left">rgb(224, 224, 224)</td>
- <td align="left">#E0E0E0</td>
- </tr>
-
- <tr>
- <td align="right">gray87</td>
- <td align="center" style="background-color: rgb(222, 222, 222)">gray87</td>
- <td align="left">rgb(222, 222, 222)</td>
- <td align="left">#DEDEDE</td>
- </tr>
-
- <tr>
- <td align="right">grey87</td>
- <td align="center" style="background-color: rgb(222, 222, 222)">grey87</td>
- <td align="left">rgb(222, 222, 222)</td>
- <td align="left">#DEDEDE</td>
- </tr>
-
- <tr>
- <td align="right">gainsboro</td>
- <td align="center" style="background-color: rgb(220, 220, 220)">gainsboro</td>
- <td align="left">rgb(220, 220, 220)</td>
- <td align="left">#DCDCDC</td>
- </tr>
-
- <tr>
- <td align="right">gray86</td>
- <td align="center" style="background-color: rgb(219, 219, 219)">gray86</td>
- <td align="left">rgb(219, 219, 219)</td>
- <td align="left">#DBDBDB</td>
- </tr>
-
- <tr>
- <td align="right">grey86</td>
- <td align="center" style="background-color: rgb(219, 219, 219)">grey86</td>
- <td align="left">rgb(219, 219, 219)</td>
- <td align="left">#DBDBDB</td>
- </tr>
-
- <tr>
- <td align="right">gray85</td>
- <td align="center" style="background-color: rgb(217, 217, 217)">gray85</td>
- <td align="left">rgb(217, 217, 217)</td>
- <td align="left">#D9D9D9</td>
- </tr>
-
- <tr>
- <td align="right">grey85</td>
- <td align="center" style="background-color: rgb(217, 217, 217)">grey85</td>
- <td align="left">rgb(217, 217, 217)</td>
- <td align="left">#D9D9D9</td>
- </tr>
-
- <tr>
- <td align="right">gray84</td>
- <td align="center" style="background-color: rgb(214, 214, 214)">gray84</td>
- <td align="left">rgb(214, 214, 214)</td>
- <td align="left">#D6D6D6</td>
- </tr>
-
- <tr>
- <td align="right">grey84</td>
- <td align="center" style="background-color: rgb(214, 214, 214)">grey84</td>
- <td align="left">rgb(214, 214, 214)</td>
- <td align="left">#D6D6D6</td>
- </tr>
-
- <tr>
- <td align="right">gray83</td>
- <td align="center" style="background-color: rgb(212, 212, 212)">gray83</td>
- <td align="left">rgb(212, 212, 212)</td>
- <td align="left">#D4D4D4</td>
- </tr>
-
- <tr>
- <td align="right">grey83</td>
- <td align="center" style="background-color: rgb(212, 212, 212)">grey83</td>
- <td align="left">rgb(212, 212, 212)</td>
- <td align="left">#D4D4D4</td>
- </tr>
-
- <tr>
- <td align="right">LightGray</td>
- <td align="center" style="background-color: rgb(211, 211, 211)">LightGray</td>
- <td align="left">rgb(211, 211, 211)</td>
- <td align="left">#D3D3D3</td>
- </tr>
-
- <tr>
- <td align="right">LightGrey</td>
- <td align="center" style="background-color: rgb(211, 211, 211)">LightGrey</td>
- <td align="left">rgb(211, 211, 211)</td>
- <td align="left">#D3D3D3</td>
- </tr>
-
- <tr>
- <td align="right">gray82</td>
- <td align="center" style="background-color: rgb(209, 209, 209)">gray82</td>
- <td align="left">rgb(209, 209, 209)</td>
- <td align="left">#D1D1D1</td>
- </tr>
-
- <tr>
- <td align="right">grey82</td>
- <td align="center" style="background-color: rgb(209, 209, 209)">grey82</td>
- <td align="left">rgb(209, 209, 209)</td>
- <td align="left">#D1D1D1</td>
- </tr>
-
- <tr>
- <td align="right">gray81</td>
- <td align="center" style="background-color: rgb(207, 207, 207)">gray81</td>
- <td align="left">rgb(207, 207, 207)</td>
- <td align="left">#CFCFCF</td>
- </tr>
-
- <tr>
- <td align="right">grey81</td>
- <td align="center" style="background-color: rgb(207, 207, 207)">grey81</td>
- <td align="left">rgb(207, 207, 207)</td>
- <td align="left">#CFCFCF</td>
- </tr>
-
- <tr>
- <td align="right">gray80</td>
- <td align="center" style="background-color: rgb(204, 204, 204)">gray80</td>
- <td align="left">rgb(204, 204, 204)</td>
- <td align="left">#CCCCCC</td>
- </tr>
-
- <tr>
- <td align="right">grey80</td>
- <td align="center" style="background-color: rgb(204, 204, 204)">grey80</td>
- <td align="left">rgb(204, 204, 204)</td>
- <td align="left">#CCCCCC</td>
- </tr>
-
- <tr>
- <td align="right">gray79</td>
- <td align="center" style="background-color: rgb(201, 201, 201)">gray79</td>
- <td align="left">rgb(201, 201, 201)</td>
- <td align="left">#C9C9C9</td>
- </tr>
-
- <tr>
- <td align="right">grey79</td>
- <td align="center" style="background-color: rgb(201, 201, 201)">grey79</td>
- <td align="left">rgb(201, 201, 201)</td>
- <td align="left">#C9C9C9</td>
- </tr>
-
- <tr>
- <td align="right">gray78</td>
- <td align="center" style="background-color: rgb(199, 199, 199)">gray78</td>
- <td align="left">rgb(199, 199, 199)</td>
- <td align="left">#C7C7C7</td>
- </tr>
-
- <tr>
- <td align="right">grey78</td>
- <td align="center" style="background-color: rgb(199, 199, 199)">grey78</td>
- <td align="left">rgb(199, 199, 199)</td>
- <td align="left">#C7C7C7</td>
- </tr>
-
- <tr>
- <td align="right">gray77</td>
- <td align="center" style="background-color: rgb(196, 196, 196)">gray77</td>
- <td align="left">rgb(196, 196, 196)</td>
- <td align="left">#C4C4C4</td>
- </tr>
-
- <tr>
- <td align="right">grey77</td>
- <td align="center" style="background-color: rgb(196, 196, 196)">grey77</td>
- <td align="left">rgb(196, 196, 196)</td>
- <td align="left">#C4C4C4</td>
- </tr>
-
- <tr>
- <td align="right">gray76</td>
- <td align="center" style="background-color: rgb(194, 194, 194)">gray76</td>
- <td align="left">rgb(194, 194, 194)</td>
- <td align="left">#C2C2C2</td>
- </tr>
-
- <tr>
- <td align="right">grey76</td>
- <td align="center" style="background-color: rgb(194, 194, 194)">grey76</td>
- <td align="left">rgb(194, 194, 194)</td>
- <td align="left">#C2C2C2</td>
- </tr>
-
- <tr>
- <td align="right">silver</td>
- <td align="center" style="background-color: rgb(192, 192, 192)">silver</td>
- <td align="left">rgb(192, 192, 192)</td>
- <td align="left">#C0C0C0</td>
- </tr>
-
- <tr>
- <td align="right">gray75</td>
- <td align="center" style="background-color: rgb(191, 191, 191)">gray75</td>
- <td align="left">rgb(191, 191, 191)</td>
- <td align="left">#BFBFBF</td>
- </tr>
-
- <tr>
- <td align="right">grey75</td>
- <td align="center" style="background-color: rgb(191, 191, 191)">grey75</td>
- <td align="left">rgb(191, 191, 191)</td>
- <td align="left">#BFBFBF</td>
- </tr>
-
- <tr>
- <td align="right">gray74</td>
- <td align="center" style="background-color: rgb(189, 189, 189)">gray74</td>
- <td align="left">rgb(189, 189, 189)</td>
- <td align="left">#BDBDBD</td>
- </tr>
-
- <tr>
- <td align="right">grey74</td>
- <td align="center" style="background-color: rgb(189, 189, 189)">grey74</td>
- <td align="left">rgb(189, 189, 189)</td>
- <td align="left">#BDBDBD</td>
- </tr>
-
- <tr>
- <td align="right">gray73</td>
- <td align="center" style="background-color: rgb(186, 186, 186)">gray73</td>
- <td align="left">rgb(186, 186, 186)</td>
- <td align="left">#BABABA</td>
- </tr>
-
- <tr>
- <td align="right">grey73</td>
- <td align="center" style="background-color: rgb(186, 186, 186)">grey73</td>
- <td align="left">rgb(186, 186, 186)</td>
- <td align="left">#BABABA</td>
- </tr>
-
- <tr>
- <td align="right">gray72</td>
- <td align="center" style="background-color: rgb(184, 184, 184)">gray72</td>
- <td align="left">rgb(184, 184, 184)</td>
- <td align="left">#B8B8B8</td>
- </tr>
-
- <tr>
- <td align="right">grey72</td>
- <td align="center" style="background-color: rgb(184, 184, 184)">grey72</td>
- <td align="left">rgb(184, 184, 184)</td>
- <td align="left">#B8B8B8</td>
- </tr>
-
- <tr>
- <td align="right">gray71</td>
- <td align="center" style="background-color: rgb(181, 181, 181)">gray71</td>
- <td align="left">rgb(181, 181, 181)</td>
- <td align="left">#B5B5B5</td>
- </tr>
-
- <tr>
- <td align="right">grey71</td>
- <td align="center" style="background-color: rgb(181, 181, 181)">grey71</td>
- <td align="left">rgb(181, 181, 181)</td>
- <td align="left">#B5B5B5</td>
- </tr>
-
- <tr>
- <td align="right">gray70</td>
- <td align="center" style="background-color: rgb(179, 179, 179)">gray70</td>
- <td align="left">rgb(179, 179, 179)</td>
- <td align="left">#B3B3B3</td>
- </tr>
-
- <tr>
- <td align="right">grey70</td>
- <td align="center" style="background-color: rgb(179, 179, 179)">grey70</td>
- <td align="left">rgb(179, 179, 179)</td>
- <td align="left">#B3B3B3</td>
- </tr>
-
- <tr>
- <td align="right">gray69</td>
- <td align="center" style="background-color: rgb(176, 176, 176)">gray69</td>
- <td align="left">rgb(176, 176, 176)</td>
- <td align="left">#B0B0B0</td>
- </tr>
-
- <tr>
- <td align="right">grey69</td>
- <td align="center" style="background-color: rgb(176, 176, 176)">grey69</td>
- <td align="left">rgb(176, 176, 176)</td>
- <td align="left">#B0B0B0</td>
- </tr>
-
- <tr>
- <td align="right">gray68</td>
- <td align="center" style="background-color: rgb(173, 173, 173)">gray68</td>
- <td align="left">rgb(173, 173, 173)</td>
- <td align="left">#ADADAD</td>
- </tr>
-
- <tr>
- <td align="right">grey68</td>
- <td align="center" style="background-color: rgb(173, 173, 173)">grey68</td>
- <td align="left">rgb(173, 173, 173)</td>
- <td align="left">#ADADAD</td>
- </tr>
-
- <tr>
- <td align="right">gray67</td>
- <td align="center" style="background-color: rgb(171, 171, 171)">gray67</td>
- <td align="left">rgb(171, 171, 171)</td>
- <td align="left">#ABABAB</td>
- </tr>
-
- <tr>
- <td align="right">grey67</td>
- <td align="center" style="background-color: rgb(171, 171, 171)">grey67</td>
- <td align="left">rgb(171, 171, 171)</td>
- <td align="left">#ABABAB</td>
- </tr>
-
- <tr>
- <td align="right">DarkGray</td>
- <td align="center" style="background-color: rgb(169, 169, 169)">DarkGray</td>
- <td align="left">rgb(169, 169, 169)</td>
- <td align="left">#A9A9A9</td>
- </tr>
-
- <tr>
- <td align="right">DarkGrey</td>
- <td align="center" style="background-color: rgb(169, 169, 169)">DarkGrey</td>
- <td align="left">rgb(169, 169, 169)</td>
- <td align="left">#A9A9A9</td>
- </tr>
-
- <tr>
- <td align="right">gray66</td>
- <td align="center" style="background-color: rgb(168, 168, 168)">gray66</td>
- <td align="left">rgb(168, 168, 168)</td>
- <td align="left">#A8A8A8</td>
- </tr>
-
- <tr>
- <td align="right">grey66</td>
- <td align="center" style="background-color: rgb(168, 168, 168)">grey66</td>
- <td align="left">rgb(168, 168, 168)</td>
- <td align="left">#A8A8A8</td>
- </tr>
-
- <tr>
- <td align="right">gray65</td>
- <td align="center" style="background-color: rgb(166, 166, 166)">gray65</td>
- <td align="left">rgb(166, 166, 166)</td>
- <td align="left">#A6A6A6</td>
- </tr>
-
- <tr>
- <td align="right">grey65</td>
- <td align="center" style="background-color: rgb(166, 166, 166)">grey65</td>
- <td align="left">rgb(166, 166, 166)</td>
- <td align="left">#A6A6A6</td>
- </tr>
-
- <tr>
- <td align="right">gray64</td>
- <td align="center" style="background-color: rgb(163, 163, 163)">gray64</td>
- <td align="left">rgb(163, 163, 163)</td>
- <td align="left">#A3A3A3</td>
- </tr>
-
- <tr>
- <td align="right">grey64</td>
- <td align="center" style="background-color: rgb(163, 163, 163)">grey64</td>
- <td align="left">rgb(163, 163, 163)</td>
- <td align="left">#A3A3A3</td>
- </tr>
-
- <tr>
- <td align="right">gray63</td>
- <td align="center" style="background-color: rgb(161, 161, 161)">gray63</td>
- <td align="left">rgb(161, 161, 161)</td>
- <td align="left">#A1A1A1</td>
- </tr>
-
- <tr>
- <td align="right">grey63</td>
- <td align="center" style="background-color: rgb(161, 161, 161)">grey63</td>
- <td align="left">rgb(161, 161, 161)</td>
- <td align="left">#A1A1A1</td>
- </tr>
-
- <tr>
- <td align="right">gray62</td>
- <td align="center" style="background-color: rgb(158, 158, 158)">gray62</td>
- <td align="left">rgb(158, 158, 158)</td>
- <td align="left">#9E9E9E</td>
- </tr>
-
- <tr>
- <td align="right">grey62</td>
- <td align="center" style="background-color: rgb(158, 158, 158)">grey62</td>
- <td align="left">rgb(158, 158, 158)</td>
- <td align="left">#9E9E9E</td>
- </tr>
-
- <tr>
- <td align="right">gray61</td>
- <td align="center" style="background-color: rgb(156, 156, 156)">gray61</td>
- <td align="left">rgb(156, 156, 156)</td>
- <td align="left">#9C9C9C</td>
- </tr>
-
- <tr>
- <td align="right">grey61</td>
- <td align="center" style="background-color: rgb(156, 156, 156)">grey61</td>
- <td align="left">rgb(156, 156, 156)</td>
- <td align="left">#9C9C9C</td>
- </tr>
-
- <tr>
- <td align="right">gray60</td>
- <td align="center" style="background-color: rgb(153, 153, 153)">gray60</td>
- <td align="left">rgb(153, 153, 153)</td>
- <td align="left">#999999</td>
- </tr>
-
- <tr>
- <td align="right">grey60</td>
- <td align="center" style="background-color: rgb(153, 153, 153)">grey60</td>
- <td align="left">rgb(153, 153, 153)</td>
- <td align="left">#999999</td>
- </tr>
-
- <tr>
- <td align="right">gray59</td>
- <td align="center" style="background-color: rgb(150, 150, 150)">gray59</td>
- <td align="left">rgb(150, 150, 150)</td>
- <td align="left">#969696</td>
- </tr>
-
- <tr>
- <td align="right">grey59</td>
- <td align="center" style="background-color: rgb(150, 150, 150)">grey59</td>
- <td align="left">rgb(150, 150, 150)</td>
- <td align="left">#969696</td>
- </tr>
-
- <tr>
- <td align="right">gray58</td>
- <td align="center" style="background-color: rgb(148, 148, 148)">gray58</td>
- <td align="left">rgb(148, 148, 148)</td>
- <td align="left">#949494</td>
- </tr>
-
- <tr>
- <td align="right">grey58</td>
- <td align="center" style="background-color: rgb(148, 148, 148)">grey58</td>
- <td align="left">rgb(148, 148, 148)</td>
- <td align="left">#949494</td>
- </tr>
-
- <tr>
- <td align="right">gray57</td>
- <td align="center" style="background-color: rgb(145, 145, 145)">gray57</td>
- <td align="left">rgb(145, 145, 145)</td>
- <td align="left">#919191</td>
- </tr>
-
- <tr>
- <td align="right">grey57</td>
- <td align="center" style="background-color: rgb(145, 145, 145)">grey57</td>
- <td align="left">rgb(145, 145, 145)</td>
- <td align="left">#919191</td>
- </tr>
-
- <tr>
- <td align="right">gray56</td>
- <td align="center" style="background-color: rgb(143, 143, 143)">gray56</td>
- <td align="left">rgb(143, 143, 143)</td>
- <td align="left">#8F8F8F</td>
- </tr>
-
- <tr>
- <td align="right">grey56</td>
- <td align="center" style="background-color: rgb(143, 143, 143)">grey56</td>
- <td align="left">rgb(143, 143, 143)</td>
- <td align="left">#8F8F8F</td>
- </tr>
-
- <tr>
- <td align="right">gray55</td>
- <td align="center" style="background-color: rgb(140, 140, 140)">gray55</td>
- <td align="left">rgb(140, 140, 140)</td>
- <td align="left">#8C8C8C</td>
- </tr>
-
- <tr>
- <td align="right">grey55</td>
- <td align="center" style="background-color: rgb(140, 140, 140)">grey55</td>
- <td align="left">rgb(140, 140, 140)</td>
- <td align="left">#8C8C8C</td>
- </tr>
-
- <tr>
- <td align="right">gray54</td>
- <td align="center" style="background-color: rgb(138, 138, 138)">gray54</td>
- <td align="left">rgb(138, 138, 138)</td>
- <td align="left">#8A8A8A</td>
- </tr>
-
- <tr>
- <td align="right">grey54</td>
- <td align="center" style="background-color: rgb(138, 138, 138)">grey54</td>
- <td align="left">rgb(138, 138, 138)</td>
- <td align="left">#8A8A8A</td>
- </tr>
-
- <tr>
- <td align="right">gray53</td>
- <td align="center" style="background-color: rgb(135, 135, 135)">gray53</td>
- <td align="left">rgb(135, 135, 135)</td>
- <td align="left">#878787</td>
- </tr>
-
- <tr>
- <td align="right">grey53</td>
- <td align="center" style="background-color: rgb(135, 135, 135)">grey53</td>
- <td align="left">rgb(135, 135, 135)</td>
- <td align="left">#878787</td>
- </tr>
-
- <tr>
- <td align="right">gray52</td>
- <td align="center" style="background-color: rgb(133, 133, 133)">gray52</td>
- <td align="left">rgb(133, 133, 133)</td>
- <td align="left">#858585</td>
- </tr>
-
- <tr>
- <td align="right">grey52</td>
- <td align="center" style="background-color: rgb(133, 133, 133)">grey52</td>
- <td align="left">rgb(133, 133, 133)</td>
- <td align="left">#858585</td>
- </tr>
-
- <tr>
- <td align="right">gray51</td>
- <td align="center" style="background-color: rgb(130, 130, 130)">gray51</td>
- <td align="left">rgb(130, 130, 130)</td>
- <td align="left">#828282</td>
- </tr>
-
- <tr>
- <td align="right">grey51</td>
- <td align="center" style="background-color: rgb(130, 130, 130)">grey51</td>
- <td align="left">rgb(130, 130, 130)</td>
- <td align="left">#828282</td>
- </tr>
-
- <tr>
- <td align="right">fractal</td>
- <td align="center" style="background-color: rgb(128, 128, 128)">fractal</td>
- <td align="left">rgb(128, 128, 128)</td>
- <td align="left">#808080</td>
- </tr>
-
- <tr>
- <td align="right">gray50</td>
- <td align="center" style="background-color: rgb(127, 127, 127)">gray50</td>
- <td align="left">rgb(127, 127, 127)</td>
- <td align="left">#7F7F7F</td>
- </tr>
-
- <tr>
- <td align="right">grey50</td>
- <td align="center" style="background-color: rgb(127, 127, 127)">grey50</td>
- <td align="left">rgb(127, 127, 127)</td>
- <td align="left">#7F7F7F</td>
- </tr>
-
- <tr>
- <td align="right">gray</td>
- <td align="center" style="background-color: rgb(126, 126, 126)">gray</td>
- <td align="left">rgb(126, 126, 126)</td>
- <td align="left">#7E7E7E</td>
- </tr>
-
- <tr>
- <td align="right">gray49</td>
- <td align="center" style="background-color: rgb(125, 125, 125)">gray49</td>
- <td align="left">rgb(125, 125, 125)</td>
- <td align="left">#7D7D7D</td>
- </tr>
-
- <tr>
- <td align="right">grey49</td>
- <td align="center" style="background-color: rgb(125, 125, 125)">grey49</td>
- <td align="left">rgb(125, 125, 125)</td>
- <td align="left">#7D7D7D</td>
- </tr>
-
- <tr>
- <td align="right">gray48</td>
- <td align="center" style="background-color: rgb(122, 122, 122)">gray48</td>
- <td align="left">rgb(122, 122, 122)</td>
- <td align="left">#7A7A7A</td>
- </tr>
-
- <tr>
- <td align="right">grey48</td>
- <td align="center" style="background-color: rgb(122, 122, 122)">grey48</td>
- <td align="left">rgb(122, 122, 122)</td>
- <td align="left">#7A7A7A</td>
- </tr>
-
- <tr>
- <td align="right">gray47</td>
- <td align="center" style="background-color: rgb(120, 120, 120)">gray47</td>
- <td align="left">rgb(120, 120, 120)</td>
- <td align="left">#787878</td>
- </tr>
-
- <tr>
- <td align="right">grey47</td>
- <td align="center" style="background-color: rgb(120, 120, 120)">grey47</td>
- <td align="left">rgb(120, 120, 120)</td>
- <td align="left">#787878</td>
- </tr>
-
- <tr>
- <td align="right">gray46</td>
- <td align="center" style="background-color: rgb(117, 117, 117)">gray46</td>
- <td align="left">rgb(117, 117, 117)</td>
- <td align="left">#757575</td>
- </tr>
-
- <tr>
- <td align="right">grey46</td>
- <td align="center" style="background-color: rgb(117, 117, 117)">grey46</td>
- <td align="left">rgb(117, 117, 117)</td>
- <td align="left">#757575</td>
- </tr>
-
- <tr>
- <td align="right">gray45</td>
- <td align="center" style="background-color: rgb(115, 115, 115)">gray45</td>
- <td align="left">rgb(115, 115, 115)</td>
- <td align="left">#737373</td>
- </tr>
-
- <tr>
- <td align="right">grey45</td>
- <td align="center" style="background-color: rgb(115, 115, 115)">grey45</td>
- <td align="left">rgb(115, 115, 115)</td>
- <td align="left">#737373</td>
- </tr>
-
- <tr>
- <td align="right">gray44</td>
- <td align="center" style="background-color: rgb(112, 112, 112)">gray44</td>
- <td align="left">rgb(112, 112, 112)</td>
- <td align="left">#707070</td>
- </tr>
-
- <tr>
- <td align="right">grey44</td>
- <td align="center" style="background-color: rgb(112, 112, 112)">grey44</td>
- <td align="left">rgb(112, 112, 112)</td>
- <td align="left">#707070</td>
- </tr>
-
- <tr>
- <td align="right">gray43</td>
- <td align="center" style="background-color: rgb(110, 110, 110)">gray43</td>
- <td align="left">rgb(110, 110, 110)</td>
- <td align="left">#6E6E6E</td>
- </tr>
-
- <tr>
- <td align="right">grey43</td>
- <td align="center" style="background-color: rgb(110, 110, 110)">grey43</td>
- <td align="left">rgb(110, 110, 110)</td>
- <td align="left">#6E6E6E</td>
- </tr>
-
- <tr>
- <td align="right">gray42</td>
- <td align="center" style="background-color: rgb(107, 107, 107)">gray42</td>
- <td align="left">rgb(107, 107, 107)</td>
- <td align="left">#6B6B6B</td>
- </tr>
-
- <tr>
- <td align="right">grey42</td>
- <td align="center" style="background-color: rgb(107, 107, 107)">grey42</td>
- <td align="left">rgb(107, 107, 107)</td>
- <td align="left">#6B6B6B</td>
- </tr>
-
- <tr>
- <td align="right">DimGray</td>
- <td align="center" style="background-color: rgb(105, 105, 105)">DimGray</td>
- <td align="left">rgb(105, 105, 105)</td>
- <td align="left">#696969</td>
- </tr>
-
- <tr>
- <td align="right">DimGrey</td>
- <td align="center" style="background-color: rgb(105, 105, 105)">DimGrey</td>
- <td align="left">rgb(105, 105, 105)</td>
- <td align="left">#696969</td>
- </tr>
-
- <tr>
- <td align="right">gray41</td>
- <td align="center" style="background-color: rgb(105, 105, 105)">gray41</td>
- <td align="left">rgb(105, 105, 105)</td>
- <td align="left">#696969</td>
- </tr>
-
- <tr>
- <td align="right">grey41</td>
- <td align="center" style="background-color: rgb(105, 105, 105)">grey41</td>
- <td align="left">rgb(105, 105, 105)</td>
- <td align="left">#696969</td>
- </tr>
-
- <tr>
- <td align="right">gray40</td>
- <td align="center" style="background-color: rgb(102, 102, 102)">gray40</td>
- <td align="left">rgb(102, 102, 102)</td>
- <td align="left">#666666</td>
- </tr>
-
- <tr>
- <td align="right">grey40</td>
- <td align="center" style="background-color: rgb(102, 102, 102)">grey40</td>
- <td align="left">rgb(102, 102, 102)</td>
- <td align="left">#666666</td>
- </tr>
-
- <tr>
- <td align="right">gray39</td>
- <td align="center" style="background-color: rgb( 99, 99, 99)">gray39</td>
- <td align="left">rgb( 99, 99, 99)</td>
- <td align="left">#636363</td>
- </tr>
-
- <tr>
- <td align="right">grey39</td>
- <td align="center" style="background-color: rgb( 99, 99, 99)">grey39</td>
- <td align="left">rgb( 99, 99, 99)</td>
- <td align="left">#636363</td>
- </tr>
-
- <tr>
- <td align="right">gray38</td>
- <td align="center" style="background-color: rgb( 97, 97, 97)">gray38</td>
- <td align="left">rgb( 97, 97, 97)</td>
- <td align="left">#616161</td>
- </tr>
-
- <tr>
- <td align="right">grey38</td>
- <td align="center" style="background-color: rgb( 97, 97, 97)">grey38</td>
- <td align="left">rgb( 97, 97, 97)</td>
- <td align="left">#616161</td>
- </tr>
-
- <tr>
- <td align="right">gray37</td>
- <td align="center" style="background-color: rgb( 94, 94, 94)">gray37</td>
- <td align="left">rgb( 94, 94, 94)</td>
- <td align="left">#5E5E5E</td>
- </tr>
-
- <tr>
- <td align="right">grey37</td>
- <td align="center" style="background-color: rgb( 94, 94, 94)">grey37</td>
- <td align="left">rgb( 94, 94, 94)</td>
- <td align="left">#5E5E5E</td>
- </tr>
-
- <tr>
- <td align="right">gray36</td>
- <td align="center" style="background-color: rgb( 92, 92, 92)">gray36</td>
- <td align="left">rgb( 92, 92, 92)</td>
- <td align="left">#5C5C5C</td>
- </tr>
-
- <tr>
- <td align="right">grey36</td>
- <td align="center" style="background-color: rgb( 92, 92, 92)">grey36</td>
- <td align="left">rgb( 92, 92, 92)</td>
- <td align="left">#5C5C5C</td>
- </tr>
-
- <tr>
- <td align="right">gray35</td>
- <td align="center" style="background-color: rgb( 89, 89, 89)">gray35</td>
- <td align="left">rgb( 89, 89, 89)</td>
- <td align="left">#595959</td>
- </tr>
-
- <tr>
- <td align="right">grey35</td>
- <td align="center" style="background-color: rgb( 89, 89, 89)">grey35</td>
- <td align="left">rgb( 89, 89, 89)</td>
- <td align="left">#595959</td>
- </tr>
-
- <tr>
- <td align="right">gray34</td>
- <td align="center" style="background-color: rgb( 87, 87, 87)">gray34</td>
- <td align="left">rgb( 87, 87, 87)</td>
- <td align="left">#575757</td>
- </tr>
-
- <tr>
- <td align="right">grey34</td>
- <td align="center" style="background-color: rgb( 87, 87, 87)">grey34</td>
- <td align="left">rgb( 87, 87, 87)</td>
- <td align="left">#575757</td>
- </tr>
-
- <tr>
- <td align="right">gray33</td>
- <td align="center" style="background-color: rgb( 84, 84, 84)">gray33</td>
- <td align="left">rgb( 84, 84, 84)</td>
- <td align="left">#545454</td>
- </tr>
-
- <tr>
- <td align="right">grey33</td>
- <td align="center" style="background-color: rgb( 84, 84, 84)">grey33</td>
- <td align="left">rgb( 84, 84, 84)</td>
- <td align="left">#545454</td>
- </tr>
-
- <tr>
- <td align="right">gray32</td>
- <td align="center" style="background-color: rgb( 82, 82, 82)">gray32</td>
- <td align="left">rgb( 82, 82, 82)</td>
- <td align="left">#525252</td>
- </tr>
-
- <tr>
- <td align="right">grey32</td>
- <td align="center" style="background-color: rgb( 82, 82, 82)">grey32</td>
- <td align="left">rgb( 82, 82, 82)</td>
- <td align="left">#525252</td>
- </tr>
-
- <tr>
- <td align="right">gray31</td>
- <td align="center" style="background-color: rgb( 79, 79, 79)">gray31</td>
- <td align="left">rgb( 79, 79, 79)</td>
- <td align="left">#4F4F4F</td>
- </tr>
-
- <tr>
- <td align="right">grey31</td>
- <td align="center" style="background-color: rgb( 79, 79, 79)">grey31</td>
- <td align="left">rgb( 79, 79, 79)</td>
- <td align="left">#4F4F4F</td>
- </tr>
-
- <tr>
- <td align="right">gray30</td>
- <td align="center" style="background-color: rgb( 77, 77, 77)">gray30</td>
- <td align="left">rgb( 77, 77, 77)</td>
- <td align="left">#4D4D4D</td>
- </tr>
-
- <tr>
- <td align="right">grey30</td>
- <td align="center" style="background-color: rgb( 77, 77, 77)">grey30</td>
- <td align="left">rgb( 77, 77, 77)</td>
- <td align="left">#4D4D4D</td>
- </tr>
-
- <tr>
- <td align="right">gray29</td>
- <td align="center" style="background-color: rgb( 74, 74, 74)">gray29</td>
- <td align="left">rgb( 74, 74, 74)</td>
- <td align="left">#4A4A4A</td>
- </tr>
-
- <tr>
- <td align="right">grey29</td>
- <td align="center" style="background-color: rgb( 74, 74, 74)">grey29</td>
- <td align="left">rgb( 74, 74, 74)</td>
- <td align="left">#4A4A4A</td>
- </tr>
-
- <tr>
- <td align="right">gray28</td>
- <td align="center" style="background-color: rgb( 71, 71, 71)">gray28</td>
- <td align="left">rgb( 71, 71, 71)</td>
- <td align="left">#474747</td>
- </tr>
-
- <tr>
- <td align="right">grey28</td>
- <td align="center" style="background-color: rgb( 71, 71, 71)">grey28</td>
- <td align="left">rgb( 71, 71, 71)</td>
- <td align="left">#474747</td>
- </tr>
-
- <tr>
- <td align="right">gray27</td>
- <td align="center" style="background-color: rgb( 69, 69, 69)">gray27</td>
- <td align="left">rgb( 69, 69, 69)</td>
- <td align="left">#454545</td>
- </tr>
-
- <tr>
- <td align="right">grey27</td>
- <td align="center" style="background-color: rgb( 69, 69, 69)">grey27</td>
- <td align="left">rgb( 69, 69, 69)</td>
- <td align="left">#454545</td>
- </tr>
-
- <tr>
- <td align="right">gray26</td>
- <td align="center" style="background-color: rgb( 66, 66, 66)">gray26</td>
- <td align="left">rgb( 66, 66, 66)</td>
- <td align="left">#424242</td>
- </tr>
-
- <tr>
- <td align="right">grey26</td>
- <td align="center" style="background-color: rgb( 66, 66, 66)">grey26</td>
- <td align="left">rgb( 66, 66, 66)</td>
- <td align="left">#424242</td>
- </tr>
-
- <tr>
- <td align="right">gray25</td>
- <td align="center" style="background-color: rgb( 64, 64, 64)">gray25</td>
- <td align="left">rgb( 64, 64, 64)</td>
- <td align="left">#404040</td>
- </tr>
-
- <tr>
- <td align="right">grey25</td>
- <td align="center" style="background-color: rgb( 64, 64, 64)">grey25</td>
- <td align="left">rgb( 64, 64, 64)</td>
- <td align="left">#404040</td>
- </tr>
-
- <tr>
- <td align="right">gray24</td>
- <td align="center" style="background-color: rgb( 61, 61, 61)">gray24</td>
- <td align="left">rgb( 61, 61, 61)</td>
- <td align="left">#3D3D3D</td>
- </tr>
-
- <tr>
- <td align="right">grey24</td>
- <td align="center" style="background-color: rgb( 61, 61, 61)">grey24</td>
- <td align="left">rgb( 61, 61, 61)</td>
- <td align="left">#3D3D3D</td>
- </tr>
-
- <tr>
- <td align="right">gray23</td>
- <td align="center" style="background-color: rgb( 59, 59, 59)">gray23</td>
- <td align="left">rgb( 59, 59, 59)</td>
- <td align="left">#3B3B3B</td>
- </tr>
-
- <tr>
- <td align="right">grey23</td>
- <td align="center" style="background-color: rgb( 59, 59, 59)">grey23</td>
- <td align="left">rgb( 59, 59, 59)</td>
- <td align="left">#3B3B3B</td>
- </tr>
-
- <tr>
- <td align="right">gray22</td>
- <td align="center" style="background-color: rgb( 56, 56, 56)">gray22</td>
- <td align="left">rgb( 56, 56, 56)</td>
- <td align="left">#383838</td>
- </tr>
-
- <tr>
- <td align="right">grey22</td>
- <td align="center" style="background-color: rgb( 56, 56, 56)">grey22</td>
- <td align="left">rgb( 56, 56, 56)</td>
- <td align="left">#383838</td>
- </tr>
-
- <tr>
- <td align="right">gray21</td>
- <td align="center" style="background-color: rgb( 54, 54, 54)">gray21</td>
- <td align="left">rgb( 54, 54, 54)</td>
- <td align="left">#363636</td>
- </tr>
-
- <tr>
- <td align="right">grey21</td>
- <td align="center" style="background-color: rgb( 54, 54, 54)">grey21</td>
- <td align="left">rgb( 54, 54, 54)</td>
- <td align="left">#363636</td>
- </tr>
-
- <tr>
- <td align="right">gray20</td>
- <td align="center" style="background-color: rgb( 51, 51, 51)">gray20</td>
- <td align="left">rgb( 51, 51, 51)</td>
- <td align="left">#333333</td>
- </tr>
-
- <tr>
- <td align="right">grey20</td>
- <td align="center" style="background-color: rgb( 51, 51, 51)">grey20</td>
- <td align="left">rgb( 51, 51, 51)</td>
- <td align="left">#333333</td>
- </tr>
-
- <tr>
- <td align="right">gray19</td>
- <td align="center" style="background-color: rgb( 48, 48, 48)">gray19</td>
- <td align="left">rgb( 48, 48, 48)</td>
- <td align="left">#303030</td>
- </tr>
-
- <tr>
- <td align="right">grey19</td>
- <td align="center" style="background-color: rgb( 48, 48, 48)">grey19</td>
- <td align="left">rgb( 48, 48, 48)</td>
- <td align="left">#303030</td>
- </tr>
-
- <tr>
- <td align="right">gray18</td>
- <td align="center" style="background-color: rgb( 46, 46, 46)">gray18</td>
- <td align="left">rgb( 46, 46, 46)</td>
- <td align="left">#2E2E2E</td>
- </tr>
-
- <tr>
- <td align="right">grey18</td>
- <td align="center" style="background-color: rgb( 46, 46, 46)">grey18</td>
- <td align="left">rgb( 46, 46, 46)</td>
- <td align="left">#2E2E2E</td>
- </tr>
-
- <tr>
- <td align="right">gray17</td>
- <td align="center" style="background-color: rgb( 43, 43, 43)">gray17</td>
- <td align="left">rgb( 43, 43, 43)</td>
- <td align="left">#2B2B2B</td>
- </tr>
-
- <tr>
- <td align="right">grey17</td>
- <td align="center" style="background-color: rgb( 43, 43, 43)">grey17</td>
- <td align="left">rgb( 43, 43, 43)</td>
- <td align="left">#2B2B2B</td>
- </tr>
-
- <tr>
- <td align="right">gray16</td>
- <td align="center" style="background-color: rgb( 41, 41, 41)">gray16</td>
- <td align="left">rgb( 41, 41, 41)</td>
- <td align="left">#292929</td>
- </tr>
-
- <tr>
- <td align="right">grey16</td>
- <td align="center" style="background-color: rgb( 41, 41, 41)">grey16</td>
- <td align="left">rgb( 41, 41, 41)</td>
- <td align="left">#292929</td>
- </tr>
-
- <tr>
- <td align="right">gray15</td>
- <td align="center" style="background-color: rgb( 38, 38, 38)">gray15</td>
- <td align="left">rgb( 38, 38, 38)</td>
- <td align="left">#262626</td>
- </tr>
-
- <tr>
- <td align="right">grey15</td>
- <td align="center" style="background-color: rgb( 38, 38, 38)">grey15</td>
- <td align="left">rgb( 38, 38, 38)</td>
- <td align="left">#262626</td>
- </tr>
-
- <tr>
- <td align="right">gray14</td>
- <td align="center" style="background-color: rgb( 36, 36, 36)">gray14</td>
- <td align="left">rgb( 36, 36, 36)</td>
- <td align="left">#242424</td>
- </tr>
-
- <tr>
- <td align="right">grey14</td>
- <td align="center" style="background-color: rgb( 36, 36, 36)">grey14</td>
- <td align="left">rgb( 36, 36, 36)</td>
- <td align="left">#242424</td>
- </tr>
-
- <tr>
- <td align="right">gray13</td>
- <td align="center" style="background-color: rgb( 33, 33, 33)">gray13</td>
- <td align="left">rgb( 33, 33, 33)</td>
- <td align="left">#212121</td>
- </tr>
-
- <tr>
- <td align="right">grey13</td>
- <td align="center" style="background-color: rgb( 33, 33, 33)">grey13</td>
- <td align="left">rgb( 33, 33, 33)</td>
- <td align="left">#212121</td>
- </tr>
-
- <tr>
- <td align="right">gray12</td>
- <td align="center" style="background-color: rgb( 31, 31, 31)">gray12</td>
- <td align="left">rgb( 31, 31, 31)</td>
- <td align="left">#1F1F1F</td>
- </tr>
-
- <tr>
- <td align="right">grey12</td>
- <td align="center" style="background-color: rgb( 31, 31, 31)">grey12</td>
- <td align="left">rgb( 31, 31, 31)</td>
- <td align="left">#1F1F1F</td>
- </tr>
-
- <tr>
- <td align="right">gray11</td>
- <td align="center" style="background-color: rgb( 28, 28, 28)">gray11</td>
- <td align="left">rgb( 28, 28, 28)</td>
- <td align="left">#1C1C1C</td>
- </tr>
-
- <tr>
- <td align="right">grey11</td>
- <td align="center" style="background-color: rgb( 28, 28, 28)">grey11</td>
- <td align="left">rgb( 28, 28, 28)</td>
- <td align="left">#1C1C1C</td>
- </tr>
-
- <tr>
- <td align="right">gray10</td>
- <td align="center" style="background-color: rgb( 26, 26, 26)">gray10</td>
- <td align="left">rgb( 26, 26, 26)</td>
- <td align="left">#1A1A1A</td>
- </tr>
-
- <tr>
- <td align="right">grey10</td>
- <td align="center" style="background-color: rgb( 26, 26, 26)">grey10</td>
- <td align="left">rgb( 26, 26, 26)</td>
- <td align="left">#1A1A1A</td>
- </tr>
-
- <tr>
- <td align="right">gray9</td>
- <td align="center" style="background-color: rgb( 23, 23, 23)">gray9</td>
- <td align="left">rgb( 23, 23, 23)</td>
- <td align="left">#171717</td>
- </tr>
-
- <tr>
- <td align="right">grey9</td>
- <td align="center" style="background-color: rgb( 23, 23, 23)">grey9</td>
- <td align="left">rgb( 23, 23, 23)</td>
- <td align="left">#171717</td>
- </tr>
-
- <tr>
- <td align="right">gray8</td>
- <td align="center" style="background-color: rgb( 20, 20, 20)">gray8</td>
- <td align="left">rgb( 20, 20, 20)</td>
- <td align="left">#141414</td>
- </tr>
-
- <tr>
- <td align="right">grey8</td>
- <td align="center" style="background-color: rgb( 20, 20, 20)">grey8</td>
- <td align="left">rgb( 20, 20, 20)</td>
- <td align="left">#141414</td>
- </tr>
-
- <tr>
- <td align="right">gray7</td>
- <td align="center" style="background-color: rgb( 18, 18, 18)">gray7</td>
- <td align="left">rgb( 18, 18, 18)</td>
- <td align="left">#121212</td>
- </tr>
-
- <tr>
- <td align="right">grey7</td>
- <td align="center" style="background-color: rgb( 18, 18, 18)">grey7</td>
- <td align="left">rgb( 18, 18, 18)</td>
- <td align="left">#121212</td>
- </tr>
-
- <tr>
- <td align="right">gray6</td>
- <td align="center" style="background-color: rgb( 15, 15, 15)">gray6</td>
- <td align="left">rgb( 15, 15, 15)</td>
- <td align="left">#0F0F0F</td>
- </tr>
-
- <tr>
- <td align="right">grey6</td>
- <td align="center" style="background-color: rgb( 15, 15, 15)">grey6</td>
- <td align="left">rgb( 15, 15, 15)</td>
- <td align="left">#0F0F0F</td>
- </tr>
-
- <tr>
- <td align="right">gray5</td>
- <td align="center" style="background-color: rgb( 13, 13, 13)">gray5</td>
- <td align="left">rgb( 13, 13, 13)</td>
- <td align="left">#0D0D0D</td>
- </tr>
-
- <tr>
- <td align="right">grey5</td>
- <td align="center" style="background-color: rgb( 13, 13, 13)">grey5</td>
- <td align="left">rgb( 13, 13, 13)</td>
- <td align="left">#0D0D0D</td>
- </tr>
-
- <tr>
- <td align="right">gray4</td>
- <td align="center" style="background-color: rgb( 10, 10, 10)">gray4</td>
- <td align="left">rgb( 10, 10, 10)</td>
- <td align="left">#0A0A0A</td>
- </tr>
-
- <tr>
- <td align="right">grey4</td>
- <td align="center" style="background-color: rgb( 10, 10, 10)">grey4</td>
- <td align="left">rgb( 10, 10, 10)</td>
- <td align="left">#0A0A0A</td>
- </tr>
-
- <tr>
- <td align="right">gray3</td>
- <td align="center" style="background-color: rgb( 8, 8, 8)">gray3</td>
- <td align="left">rgb( 8, 8, 8)</td>
- <td align="left">#080808</td>
- </tr>
-
- <tr>
- <td align="right">grey3</td>
- <td align="center" style="background-color: rgb( 8, 8, 8)">grey3</td>
- <td align="left">rgb( 8, 8, 8)</td>
- <td align="left">#080808</td>
- </tr>
-
- <tr>
- <td align="right">gray2</td>
- <td align="center" style="background-color: rgb( 5, 5, 5)">gray2</td>
- <td align="left">rgb( 5, 5, 5)</td>
- <td align="left">#050505</td>
- </tr>
-
- <tr>
- <td align="right">grey2</td>
- <td align="center" style="background-color: rgb( 5, 5, 5)">grey2</td>
- <td align="left">rgb( 5, 5, 5)</td>
- <td align="left">#050505</td>
- </tr>
-
- <tr>
- <td align="right">gray1</td>
- <td align="center" style="background-color: rgb( 3, 3, 3)">gray1</td>
- <td align="left">rgb( 3, 3, 3)</td>
- <td align="left">#030303</td>
- </tr>
-
- <tr>
- <td align="right">grey1</td>
- <td align="center" style="background-color: rgb( 3, 3, 3)">grey1</td>
- <td align="left">rgb( 3, 3, 3)</td>
- <td align="left">#030303</td>
- </tr>
-
- <tr>
- <td align="right">black</td>
- <td align="center" style="background-color: rgb( 0, 0, 0)">black</td>
- <td align="left">rgb( 0, 0, 0)</td>
- <td align="left">#000000</td>
- </tr>
-
- <tr>
- <td align="right">gray0</td>
- <td align="center" style="background-color: rgb( 0, 0, 0)">gray0</td>
- <td align="left">rgb( 0, 0, 0)</td>
- <td align="left">#000000</td>
- </tr>
-
- <tr>
- <td align="right">grey0</td>
- <td align="center" style="background-color: rgb( 0, 0, 0)">grey0</td>
- <td align="left">rgb( 0, 0, 0)</td>
- <td align="left">#000000</td>
- </tr>
-
- <tr>
- <td align="right">opaque</td>
- <td align="center" style="background-color: rgb( 0, 0, 0)">opaque</td>
- <td align="left">rgb( 0, 0, 0)</td>
- <td align="left">#000000</td>
- </tr>
-
- <tr>
- <td align="right">none</td>
- <td align="center" style="background-color: white">none</td>
- <td align="left">rgba( 0, 0, 0, 0.0)</td>
- <td align="left">#00000000</td>
- </tr>
-
- <tr>
- <td align="right">transparent</td>
- <td align="center" style="background-color: white">transparent</td>
- <td align="left">rgba( 0, 0, 0, 0.0)</td>
- <td align="left">#00000000</td>
- </tr>
-
- </tbody>
-</table>
-</div>
-
-</div>
-
- </div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
- </div>
- </div>
- </div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
- </div>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
</div>
-
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
</body>
-
</html>
diff --git a/www/command-line-options/index.html b/www/command-line-options/index.html
index de5995d7e..6ce92b7dc 100644
--- a/www/command-line-options/index.html
+++ b/www/command-line-options/index.html
@@ -8,559 +8,668 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Options</title>
- <meta name="description" content="Explore the complete list of ImageMagick command-line options with detailed explanations and usage examples. Learn how to control image conversion, editing, and processing through powerful flags and parameters for cross-platform workflows. This reference guide empowers developers and system administrators to master ImageMagick’s versatile CLI tools for automation, scripting, and advanced image manipulation.">
+ <meta name="description" content="Explore the complete ImageMagick command-line option reference, with detailed explanations and practical examples for image conversion, editing, automation, scripting, and advanced processing.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Options">
- <meta property="og:description" content="Explore the complete list of ImageMagick command-line options with detailed explanations and usage examples. Learn how to control image conversion, editing, and processing through powerful flags and parameters for cross-platform workflows. This reference guide empowers developers and system administrators to master ImageMagick’s versatile CLI tools for automation, scripting, and advanced image manipulation.">
+ <meta property="og:description" content="Explore the complete ImageMagick command-line option reference, with detailed explanations and practical examples for image conversion, editing, automation, scripting, and advanced processing.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Options">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Options",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/command-line-options/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore the complete ImageMagick command-line option reference, with detailed explanations and practical examples for image conversion, editing, automation, scripting, and advanced processing.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link active" href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/command-line-options/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/command-line-options/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Options</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Options</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore the complete ImageMagick command-line option reference, with detailed explanations and practical examples for image conversion, editing, automation, scripting, and advanced processing.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <style>
+ .cli-reference { --cli-accent: #8b5cf6; --cli-accent-2: #f59e0b; position: relative; }
+ .cli-reference .reference-toolbar { position: sticky; top: 76px; z-index: 1020; margin: -1rem 0 2.25rem; padding: 1rem; border: 1px solid var(--bs-border-color-translucent); border-radius: 1rem; background: color-mix(in srgb, var(--bs-body-bg) 88%, transparent); box-shadow: 0 12px 35px rgba(15,23,42,.10); backdrop-filter: blur(16px); }
+ .cli-reference .finder-label { font-size: .74rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--bs-secondary-color); }
+ .cli-reference .finder-row { display: grid; grid-template-columns: minmax(0,1fr) minmax(12rem,.72fr) auto; gap: .75rem; align-items: end; }
+ .cli-reference .form-control, .cli-reference .form-select { min-height: 44px; border-radius: .7rem; }
+ .cli-reference .alphabet { display: flex; flex-wrap: wrap; gap: .3rem; margin-top: .8rem; }
+ .cli-reference .alphabet a { display: grid; place-items: center; width: 1.85rem; height: 1.85rem; border-radius: .45rem; color: var(--bs-secondary-color); text-decoration: none; font: 600 .78rem var(--im-font-mono, monospace); }
+ .cli-reference .alphabet a:hover, .cli-reference .alphabet a:focus { color: #fff; background: var(--cli-accent); }
+ .cli-reference .reference-intro { margin-bottom: 2.5rem; padding: 1.25rem 1.4rem; border-left: 4px solid var(--cli-accent); border-radius: 0 .8rem .8rem 0; background: var(--bs-tertiary-bg); }
+ .cli-reference .reference-intro p { margin: 0; }
+ .cli-reference .option-heading { position: relative; scroll-margin-top: 172px; margin: 3.25rem 0 1.15rem; padding: 1.15rem 1.25rem; text-align: left; border: 1px solid var(--bs-border-color-translucent); border-left: 4px solid var(--cli-accent); border-radius: .85rem; background: linear-gradient(135deg, color-mix(in srgb, var(--cli-accent) 9%, var(--bs-body-bg)), var(--bs-body-bg)); box-shadow: 0 8px 24px rgba(15,23,42,.055); }
+ .cli-reference .option-heading h2 { margin: 0; font: 600 clamp(1.08rem, 2vw, 1.35rem)/1.45 var(--im-font-mono, monospace); letter-spacing: -.02em; overflow-wrap: anywhere; }
+ .cli-reference .option-heading h2 + h2 { margin-top: .45rem; padding-top: .45rem; border-top: 1px dashed var(--bs-border-color); }
+ .cli-reference .option-heading .anchor { position: absolute; inset: 0; }
+ .cli-reference .letter-anchor { position: absolute; top: -180px; }
+ .cli-reference p, .cli-reference li, .cli-reference dd { line-height: 1.72; }
+ .cli-reference p.lead { margin: 0 0 1rem; font-size: 1.08rem; font-weight: 500; color: var(--bs-emphasis-color); }
+ .cli-reference code:not(pre code) { padding: .12rem .35rem; border: 1px solid var(--bs-border-color-translucent); border-radius: .35rem; background: var(--bs-tertiary-bg); color: color-mix(in srgb, var(--cli-accent) 72%, var(--bs-emphasis-color)); }
+ .cli-reference pre { position: relative; max-height: 75svh; margin: 1.15rem 0 1.5rem !important; padding: 1.15rem 1.25rem !important; overflow: auto; border: 1px solid rgba(139,92,246,.22); border-radius: .8rem; background: #090d16 !important; color: #dbeafe !important; box-shadow: inset 0 1px rgba(255,255,255,.05); }
+ .cli-reference pre code, .cli-reference pre samp, .cli-reference pre var { color: inherit; }
+ .cli-reference .copy-code { position: sticky; float: right; top: .15rem; margin: -.55rem -.6rem .4rem .6rem; border: 1px solid rgba(255,255,255,.16); border-radius: .45rem; background: #171d2b; color: #dbeafe; font-size: .75rem; padding: .28rem .55rem; }
+ .cli-reference table { border-color: var(--bs-border-color); }
+ .cli-reference table th { background: color-mix(in srgb, var(--cli-accent) 10%, var(--bs-tertiary-bg)); }
+ .cli-reference img { border-radius: .75rem; }
+ .cli-reference .back-to-top { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 44px; height: 44px; border: 0; border-radius: 50%; background: var(--cli-accent); color: white; box-shadow: 0 10px 25px rgba(124,58,237,.35); opacity: 0; transform: translateY(12px); pointer-events: none; transition: .2s ease; }
+ .cli-reference .back-to-top.visible { opacity: 1; transform: none; pointer-events: auto; }
+ .cli-reference .reading-progress { position: fixed; inset: 0 0 auto; z-index: 2000; height: 3px; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, var(--cli-accent), var(--cli-accent-2)); }
+ .cli-reference :target { scroll-margin-top: 172px; }
+ @media (max-width: 767.98px) { .cli-reference .reference-toolbar { top: 68px; } .cli-reference .finder-row { grid-template-columns: 1fr; } .cli-reference .finder-row .btn { width: 100%; } .cli-reference .alphabet { display: none; } .cli-reference .option-heading { margin-top: 2.5rem; padding: 1rem; } }
+ @media (prefers-reduced-motion: reduce) { .cli-reference *, .cli-reference *::before, .cli-reference *::after { scroll-behavior: auto !important; transition: none !important; } }
+</style>
+
+
+
+<div class="cli-reference" id="cli-reference">
+ <div class="reading-progress" id="readingProgress" aria-hidden="true"></div>
+ <section class="reference-toolbar" aria-label="Command-line option finder">
+ <div class="finder-row">
+ <div>
+ <label class="finder-label mb-1" for="optionSearch">Find an option</label>
+ <input class="form-control" id="optionSearch" type="search" placeholder="Type blur, resize, color…" autocomplete="off" aria-describedby="searchHint">
+ </div>
+ <div>
+ <label class="finder-label mb-1" for="optionSelect">Browse all options</label>
+ <select class="form-select" id="optionSelect">
+ <option value="">Select a CLI option…</option>
+ <option value="#adaptive-blur">-adaptive-blur</option>
+ <option value="#adaptive-resize">-adaptive-resize</option>
+ <option value="#adaptive-sharpen">-adaptive-sharpen</option>
+ <option value="#adjoin">-adjoin</option>
+ <option value="#affine">-affine</option>
+ <option value="#alpha">-alpha</option>
+ <option value="#annotate">-annotate</option>
+ <option value="#antialias">-antialias</option>
+ <option value="#append">-append</option>
+ <option value="#attenuate">-attenuate</option>
+ <option value="#authenticate">-authenticate</option>
+ <option value="#auto-gamma">-auto-gamma</option>
+ <option value="#auto-level">-auto-level</option>
+ <option value="#auto-orient">-auto-orient</option>
+ <option value="#auto-threshold">-auto-threshold</option>
+ <option value="#backdrop">-backdrop</option>
+ <option value="#background">-background</option>
+ <option value="#bench">-bench</option>
+ <option value="#bias">-bias</option>
+ <option value="#bilateral-blur">-bilateral-blur</option>
+ <option value="#black-point-compensation">-black-point-compensation</option>
+ <option value="#black-threshold">-black-threshold</option>
+ <option value="#blend">-blend</option>
+ <option value="#blue-primary">-blue-primary</option>
+ <option value="#blue-shift">-blue-shift</option>
+ <option value="#blur">-blur</option>
+ <option value="#border">-border</option>
+ <option value="#bordercolor">-bordercolor</option>
+ <option value="#borderwidth">-borderwidth</option>
+ <option value="#brightness-contrast">-brightness-contrast</option>
+ <option value="#cache">-cache</option>
+ <option value="#canny">-canny</option>
+ <option value="#caption">-caption</option>
+ <option value="#cdl">-cdl</option>
+ <option value="#channel">-channel</option>
+ <option value="#channel-fx">-channel-fx</option>
+ <option value="#charcoal">-charcoal</option>
+ <option value="#chop">-chop</option>
+ <option value="#clahe">-clahe</option>
+ <option value="#clamp">-clamp</option>
+ <option value="#clip">-clip</option>
+ <option value="#clip-mask">-clip-mask</option>
+ <option value="#clip-path">-clip-path</option>
+ <option value="#clone">-clone</option>
+ <option value="#clut">-clut</option>
+ <option value="#coalesce">-coalesce</option>
+ <option value="#colorize">-colorize</option>
+ <option value="#colormap">-colormap</option>
+ <option value="#color-matrix">-color-matrix</option>
+ <option value="#colors">-colors</option>
+ <option value="#colorspace">-colorspace</option>
+ <option value="#color-threshold">-color-threshold</option>
+ <option value="#combine">-combine</option>
+ <option value="#comment">-comment</option>
+ <option value="#compare">-compare</option>
+ <option value="#complex">-complex</option>
+ <option value="#compose">-compose</option>
+ <option value="#composite">-composite</option>
+ <option value="#compress">-compress</option>
+ <option value="#connected-components">-connected-components</option>
+ <option value="#contrast">-contrast</option>
+ <option value="#contrast-stretch">-contrast-stretch</option>
+ <option value="#convolve">-convolve</option>
+ <option value="#copy">-copy</option>
+ <option value="#crop">-crop</option>
+ <option value="#cycle">-cycle</option>
+ <option value="#debug">-debug</option>
+ <option value="#decipher">-decipher</option>
+ <option value="#deconstruct">-deconstruct</option>
+ <option value="#define">-define</option>
+ <option value="#delay">-delay</option>
+ <option value="#delete">-delete</option>
+ <option value="#density">-density</option>
+ <option value="#depth">-depth</option>
+ <option value="#descend">-descend</option>
+ <option value="#deskew">-deskew</option>
+ <option value="#despeckle">-despeckle</option>
+ <option value="#direction">-direction</option>
+ <option value="#displace">-displace</option>
+ <option value="#display">-display</option>
+ <option value="#dispose">-dispose</option>
+ <option value="#dissimilarity-threshold">-dissimilarity-threshold</option>
+ <option value="#dissolve">-dissolve</option>
+ <option value="#distort">-distort</option>
+ <option value="#distribute-cache">-distribute-cache</option>
+ <option value="#dither">-dither</option>
+ <option value="#draw">-draw</option>
+ <option value="#duplicate">-duplicate</option>
+ <option value="#edge">-edge</option>
+ <option value="#emboss">-emboss</option>
+ <option value="#encipher">-encipher</option>
+ <option value="#encoding">-encoding</option>
+ <option value="#endian">-endian</option>
+ <option value="#enhance">-enhance</option>
+ <option value="#equalize">-equalize</option>
+ <option value="#evaluate">-evaluate</option>
+ <option value="#evaluate-sequence">-evaluate-sequence</option>
+ <option value="#exit">-exit</option>
+ <option value="#extent">-extent</option>
+ <option value="#extract">-extract</option>
+ <option value="#family">-family</option>
+ <option value="#features">-features</option>
+ <option value="#fft">-fft</option>
+ <option value="#fill">-fill</option>
+ <option value="#filter">-filter</option>
+ <option value="#flatten">-flatten</option>
+ <option value="#flip">-flip</option>
+ <option value="#floodfill">-floodfill</option>
+ <option value="#flop">-flop</option>
+ <option value="#font">-font</option>
+ <option value="#foreground">-foreground</option>
+ <option value="#format">-format</option>
+ <option value="#format_identify">-format[identify]</option>
+ <option value="#frame">-frame</option>
+ <option value="#frame_import_">-frame[import]</option>
+ <option value="#function">-function</option>
+ <option value="#fuzz">-fuzz</option>
+ <option value="#fx">-fx</option>
+ <option value="#gamma">-gamma</option>
+ <option value="#gaussian-blur">-gaussian-blur</option>
+ <option value="#geometry">-geometry</option>
+ <option value="#gravity">-gravity</option>
+ <option value="#grayscale">-grayscale</option>
+ <option value="#green-primary">-green-primary</option>
+ <option value="#hald-clut">-hald-clut</option>
+ <option value="#help">-help</option>
+ <option value="#highlight-color">-highlight-color</option>
+ <option value="#hough-lines">-hough-lines</option>
+ <option value="#iconGeometry">-iconGeometry</option>
+ <option value="#iconic">-iconic</option>
+ <option value="#identify">-identify</option>
+ <option value="#ift">-ift</option>
+ <option value="#illuminant">-illuminant</option>
+ <option value="#immutable">-immutable</option>
+ <option value="#implode">-implode</option>
+ <option value="#insert">-insert</option>
+ <option value="#intensity">-intensity</option>
+ <option value="#intent">-intent</option>
+ <option value="#interlace">-interlace</option>
+ <option value="#interline-spacing">-interline-spacing</option>
+ <option value="#interpolate">-interpolate</option>
+ <option value="#interpolative-resize">-interpolative-resize</option>
+ <option value="#interword-spacing">-interword-spacing</option>
+ <option value="#integral">-integral</option>
+ <option value="#kerning">-kerning</option>
+ <option value="#kmeans">-kmeans</option>
+ <option value="#kuwahara">-kuwahara</option>
+ <option value="#label">-label</option>
+ <option value="#lat">-lat</option>
+ <option value="#layers">-layers</option>
+ <option value="#level">-level</option>
+ <option value="#level-colors">-level-colors</option>
+ <option value="#limit">-limit</option>
+ <option value="#linear-stretch">-linear-stretch</option>
+ <option value="#linewidth">-linewidth</option>
+ <option value="#liquid-rescale">-liquid-rescale</option>
+ <option value="#list">-list</option>
+ <option value="#log">-log</option>
+ <option value="#loop">-loop</option>
+ <option value="#lowlight-color">-lowlight-color</option>
+ <option value="#magnify">-magnify</option>
+ <option value="#map">-map</option>
+ <option value="#map_stream_">-map[stream]</option>
+ <option value="#mattecolor">-mattecolor</option>
+ <option value="#median">-median</option>
+ <option value="#mean-shift">-mean-shift</option>
+ <option value="#metric">-metric</option>
+ <option value="#mode">-mode</option>
+ <option value="#modulate">-modulate</option>
+ <option value="#moments">-moments</option>
+ <option value="#monitor">-monitor</option>
+ <option value="#monochrome">-monochrome</option>
+ <option value="#morph">-morph</option>
+ <option value="#morphology">-morphology</option>
+ <option value="#mosaic">-mosaic</option>
+ <option value="#motion-blur">-motion-blur</option>
+ <option value="#name">-name</option>
+ <option value="#negate">-negate</option>
+ <option value="#noise">-noise</option>
+ <option value="#normalize">-normalize</option>
+ <option value="#opaque">-opaque</option>
+ <option value="#ordered-dither">-ordered-dither</option>
+ <option value="#orient">-orient</option>
+ <option value="#page">-page</option>
+ <option value="#paint">-paint</option>
+ <option value="#path">-path</option>
+ <option value="#pause_animate_">-pause[animate]</option>
+ <option value="#pause_import_">-pause[import]</option>
+ <option value="#perceptible">-perceptible</option>
+ <option value="#ping">-ping</option>
+ <option value="#pointsize">-pointsize</option>
+ <option value="#polaroid">-polaroid</option>
+ <option value="#poly">-poly</option>
+ <option value="#posterize">-posterize</option>
+ <option value="#precision">-precision</option>
+ <option value="#preview">-preview</option>
+ <option value="#print">-print</option>
+ <option value="#process">-process</option>
+ <option value="#profile">-profile</option>
+ <option value="#quality">-quality</option>
+ <option value="#quantize">-quantize</option>
+ <option value="#quiet">-quiet</option>
+ <option value="#raise">-raise</option>
+ <option value="#random-threshold">-random-threshold</option>
+ <option value="#range-threshold">-range-threshold</option>
+ <option value="#read">-read</option>
+ <option value="#read-mask">-read-mask</option>
+ <option value="#red-primary">-red-primary</option>
+ <option value="#regard-warnings">-regard-warnings</option>
+ <option value="#region">-region</option>
+ <option value="#remap">-remap</option>
+ <option value="#remote">-remote</option>
+ <option value="#render">-render</option>
+ <option value="#repage">-repage</option>
+ <option value="#resample">-resample</option>
+ <option value="#reshape">-reshape</option>
+ <option value="#resize">-resize</option>
+ <option value="#respect-parentheses">-respect-parentheses</option>
+ <option value="#reverse">-reverse</option>
+ <option value="#roll">-roll</option>
+ <option value="#rotate">-rotate</option>
+ <option value="#rotational-blur">-rotational-blur</option>
+ <option value="#sample">-sample</option>
+ <option value="#sampling-factor">-sampling-factor</option>
+ <option value="#scale">-scale</option>
+ <option value="#scene">-scene</option>
+ <option value="#screen">-screen</option>
+ <option value="#script">-script</option>
+ <option value="#seed">-seed</option>
+ <option value="#segment">-segment</option>
+ <option value="#selective-blur">-selective-blur</option>
+ <option value="#separate">-separate</option>
+ <option value="#sepia-tone">-sepia-tone</option>
+ <option value="#set">-set</option>
+ <option value="#shade">-shade</option>
+ <option value="#shadow">-shadow</option>
+ <option value="#shared-memory">-shared-memory</option>
+ <option value="#sharpen">-sharpen</option>
+ <option value="#shave">-shave</option>
+ <option value="#shear">-shear</option>
+ <option value="#shuffle">-shuffle</option>
+ <option value="#sigmoidal-contrast">-sigmoidal-contrast</option>
+ <option value="#silent">-silent</option>
+ <option value="#similarity-threshold">-similarity-threshold</option>
+ <option value="#size">-size</option>
+ <option value="#sketch">-sketch</option>
+ <option value="#smush">-smush</option>
+ <option value="#snaps">-snaps</option>
+ <option value="#solarize">-solarize</option>
+ <option value="#sort-pixels">-sort-pixels</option>
+ <option value="#sparse-color">-sparse-color</option>
+ <option value="#splice">-splice</option>
+ <option value="#spread">-spread</option>
+ <option value="#statistic">-statistic</option>
+ <option value="#stegano">-stegano</option>
+ <option value="#stereo">-stereo</option>
+ <option value="#storage-type">-storage-type</option>
+ <option value="#stretch">-stretch</option>
+ <option value="#strip">-strip</option>
+ <option value="#stroke">-stroke</option>
+ <option value="#strokewidth">-strokewidth</option>
+ <option value="#style">-style</option>
+ <option value="#subimage-search">-subimage-search</option>
+ <option value="#swap">-swap</option>
+ <option value="#swirl">-swirl</option>
+ <option value="#synchronize">-synchronize</option>
+ <option value="#taint">-taint</option>
+ <option value="#text-font">-text-font</option>
+ <option value="#texture">-texture</option>
+ <option value="#threshold">-threshold</option>
+ <option value="#thumbnail">-thumbnail</option>
+ <option value="#tile">-tile</option>
+ <option value="#tile-offset">-tile-offset</option>
+ <option value="#tint">-tint</option>
+ <option value="#title">-title</option>
+ <option value="#transform">-transform</option>
+ <option value="#transparent">-transparent</option>
+ <option value="#transparent-color">-transparent-color</option>
+ <option value="#transpose">-transpose</option>
+ <option value="#transverse">-transverse</option>
+ <option value="#treedepth">-treedepth</option>
+ <option value="#trim">-trim</option>
+ <option value="#type">-type</option>
+ <option value="#undercolor">-undercolor</option>
+ <option value="#unique-colors">-unique-colors</option>
+ <option value="#units">-units</option>
+ <option value="#unsharp">-unsharp</option>
+ <option value="#update">-update</option>
+ <option value="#verbose">-verbose</option>
+ <option value="#version">-version</option>
+ <option value="#view">-view</option>
+ <option value="#vignette">-vignette</option>
+ <option value="#virtual-pixel">-virtual-pixel</option>
+ <option value="#visual">-visual</option>
+ <option value="#watermark">-watermark</option>
+ <option value="#wave">-wave</option>
+ <option value="#wavelet-denoise">-wavelet-denoise</option>
+ <option value="#weight">-weight</option>
+ <option value="#white-balance">-white-balance</option>
+ <option value="#white-point">-white-point</option>
+ <option value="#white-threshold">-white-threshold</option>
+ <option value="#window">-window</option>
+ <option value="#window-group">-window-group</option>
+ <option value="#word-break">-word-break</option>
+ <option value="#write">-write</option>
+ <option value="#write-mask">-write-mask</option>
+ </select>
+ </div>
+ <button class="btn btn-primary px-3" id="jumpButton" type="button"><i class="bi bi-arrow-down-circle me-1"></i> Jump</button>
+ </div>
+ <div id="searchHint" class="form-text">Press Enter to jump to the first matching option.</div>
+ <nav class="alphabet" aria-label="Browse options alphabetically"><a href="#letter-a" data-letter="A" aria-label="Options beginning with A">A</a><a href="#letter-b" data-letter="B" aria-label="Options beginning with B">B</a><a href="#letter-c" data-letter="C" aria-label="Options beginning with C">C</a><a href="#letter-d" data-letter="D" aria-label="Options beginning with D">D</a><a href="#letter-e" data-letter="E" aria-label="Options beginning with E">E</a><a href="#letter-f" data-letter="F" aria-label="Options beginning with F">F</a><a href="#letter-g" data-letter="G" aria-label="Options beginning with G">G</a><a href="#letter-h" data-letter="H" aria-label="Options beginning with H">H</a><a href="#letter-i" data-letter="I" aria-label="Options beginning with I">I</a><a href="#letter-k" data-letter="K" aria-label="Options beginning with K">K</a><a href="#letter-l" data-letter="L" aria-label="Options beginning with L">L</a><a href="#letter-m" data-letter="M" aria-label="Options beginning with M">M</a><a href="#letter-n" data-letter="N" aria-label="Options beginning with N">N</a><a href="#letter-o" data-letter="O" aria-label="Options beginning with O">O</a><a href="#letter-p" data-letter="P" aria-label="Options beginning with P">P</a><a href="#letter-q" data-letter="Q" aria-label="Options beginning with Q">Q</a><a href="#letter-r" data-letter="R" aria-label="Options beginning with R">R</a><a href="#letter-s" data-letter="S" aria-label="Options beginning with S">S</a><a href="#letter-t" data-letter="T" aria-label="Options beginning with T">T</a><a href="#letter-u" data-letter="U" aria-label="Options beginning with U">U</a><a href="#letter-v" data-letter="V" aria-label="Options beginning with V">V</a><a href="#letter-w" data-letter="W" aria-label="Options beginning with W">W</a></nav>
+ </section>
+ <div class="reference-intro">
+<p class="lead">Below is a complete list of command-line options recognized by the ImageMagick <a href="../command-line-tools/index.html">command-line tools</a>. If you want a description of a particular option, choose its name from the option finder above to jump directly to it. Unless otherwise noted, each option is recognized by the commands: <a href="../magick/index.html">magick</a> and <a href="../mogrify/index.html">mogrify</a>.</p>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<br/>
-<div class="btn-group">
-<button class="btn btn-secondary dropdown-toggle" type="button" id="defaultDropdown" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false">
- Select CLI Option
-</button>
-<ul class="dropdown-menu overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" aria-labelledby="defaultDropdown">
- <li><a class="dropdown-divider" href="#"><b>A</b></a></li>
- <li><a class="dropdown-item" href="#adaptive-blur">adaptive-blur</a></li>
- <li><a class="dropdown-item" href="#adaptive-resize">adaptive-resize</a></li>
- <li><a class="dropdown-item" href="#adaptive-sharpen">adaptive-sharpen</a></li>
- <li><a class="dropdown-item" href="#adjoin">adjoin</a></li>
- <li><a class="dropdown-item" href="#affine">affine</a></li>
- <li><a class="dropdown-item" href="#alpha">alpha</a></li>
- <li><a class="dropdown-item" href="#annotate">annotate</a></li>
- <li><a class="dropdown-item" href="#antialias">antialias</a></li>
- <li><a class="dropdown-item" href="#append">append</a></li>
- <li><a class="dropdown-item" href="#attenuate">attenuate</a></li>
- <li><a class="dropdown-item" href="#authenticate">authenticate</a></li>
- <li><a class="dropdown-item" href="#auto-gamma">auto-gamma</a></li>
- <li><a class="dropdown-item" href="#auto-level">auto-level</a></li>
- <li><a class="dropdown-item" href="#auto-orient">auto-orient</a></li>
- <li><a class="dropdown-item" href="#auto-threshold">auto-threshold</a></li>
- <li><a class="dropdown-divider" href="#"><b>B</b></a></li>
- <li><a class="dropdown-item" href="#backdrop">backdrop</a></li>
- <li><a class="dropdown-item" href="#background">background</a></li>
- <li><a class="dropdown-item" href="#bench">bench</a></li>
- <li><a class="dropdown-item" href="#bias">bias</a></li>
- <li><a class="dropdown-item" href="#bilateral-blur">bilateral-blur</a></li>
- <li><a class="dropdown-item" href="#black-point-compensation">black-point-compensation</a></li>
- <li><a class="dropdown-item" href="#black-threshold">black-threshold</a></li>
- <li><a class="dropdown-item" href="#blend">blend</a></li>
- <li><a class="dropdown-item" href="#blue-primary">blue-primary</a></li>
- <li><a class="dropdown-item" href="#blue-shift">blue-shift</a></li>
- <li><a class="dropdown-item" href="#blur">blur</a></li>
- <li><a class="dropdown-item" href="#border">border</a></li>
- <li><a class="dropdown-item" href="#bordercolor">bordercolor</a></li>
- <li><a class="dropdown-item" href="#borderwidth">borderwidth</a></li>
- <li><a class="dropdown-item" href="#brightness-contrast">brightness-contrast</a></li>
- <li><a class="dropdown-divider" href="#"><b>C</b></a></li>
- <li><a class="dropdown-item" href="#cache">cache</a></li>
- <li><a class="dropdown-item" href="#canny">canny</a></li>
- <li><a class="dropdown-item" href="#caption">caption</a></li>
- <li><a class="dropdown-item" href="#cdl">cdl</a></li>
- <li><a class="dropdown-item" href="#channel">channel</a></li>
- <li><a class="dropdown-item" href="#channel-fx">channel-fx</a></li>
- <li><a class="dropdown-item" href="#charcoal">charcoal</a></li>
- <li><a class="dropdown-item" href="#chop">chop</a></li>
- <li><a class="dropdown-item" href="#clahe">clahe</a></li>
- <li><a class="dropdown-item" href="#clamp">clamp</a></li>
- <li><a class="dropdown-item" href="#clip">clip</a></li>
- <li><a class="dropdown-item" href="#clip-mask">clip-mask</a></li>
- <li><a class="dropdown-item" href="#clip-path">clip-path</a></li>
- <li><a class="dropdown-item" href="#clone">clone</a></li>
- <li><a class="dropdown-item" href="#clut">clut</a></li>
- <li><a class="dropdown-item" href="#coalesce">coalesce</a></li>
- <li><a class="dropdown-item" href="#colorize">colorize</a></li>
- <li><a class="dropdown-item" href="#colormap">colormap</a></li>
- <li><a class="dropdown-item" href="#color-matrix">color-matrix</a></li>
- <li><a class="dropdown-item" href="#colors">colors</a></li>
- <li><a class="dropdown-item" href="#colorspace">colorspace</a></li>
- <li><a class="dropdown-item" href="#color-threshold">color-threshold</a></li>
- <li><a class="dropdown-item" href="#combine">combine</a></li>
- <li><a class="dropdown-item" href="#comment">comment</a></li>
- <li><a class="dropdown-item" href="#compare">compare</a></li>
- <li><a class="dropdown-item" href="#complex">complex</a></li>
- <li><a class="dropdown-item" href="#compose">compose</a></li>
- <li><a class="dropdown-item" href="#composite">composite</a></li>
- <li><a class="dropdown-item" href="#compress">compress</a></li>
- <li><a class="dropdown-item" href="#connected-components">connected-components</a></li>
- <li><a class="dropdown-item" href="#contrast">contrast</a></li>
- <li><a class="dropdown-item" href="#contrast-stretch">contrast-stretch</a></li>
- <li><a class="dropdown-item" href="#convolve">convolve</a></li>
- <li><a class="dropdown-item" href="#copy">copy</a></li>
- <li><a class="dropdown-item" href="#crop">crop</a></li>
- <li><a class="dropdown-item" href="#cycle">cycle</a></li>
- <li><a class="dropdown-divider" href="#"><b>D</b></a></li>
- <li><a class="dropdown-item" href="#debug">debug</a></li>
- <li><a class="dropdown-item" href="#decipher">decipher</a></li>
- <li><a class="dropdown-item" href="#deconstruct">deconstruct</a></li>
- <li><a class="dropdown-item" href="#define">define</a></li>
- <li><a class="dropdown-item" href="#delay">delay</a></li>
- <li><a class="dropdown-item" href="#delete">delete</a></li>
- <li><a class="dropdown-item" href="#density">density</a></li>
- <li><a class="dropdown-item" href="#depth">depth</a></li>
- <li><a class="dropdown-item" href="#descend">descend</a></li>
- <li><a class="dropdown-item" href="#deskew">deskew</a></li>
- <li><a class="dropdown-item" href="#despeckle">despeckle</a></li>
- <li><a class="dropdown-item" href="#direction">direction</a></li>
- <li><a class="dropdown-item" href="#displace">displace</a></li>
- <li><a class="dropdown-item" href="#display">display</a></li>
- <li><a class="dropdown-item" href="#dispose">dispose</a></li>
- <li><a class="dropdown-item" href="#dissimilarity-threshold">dissimilarity-threshold</a></li>
- <li><a class="dropdown-item" href="#dissolve">dissolve</a></li>
- <li><a class="dropdown-item" href="#distort">distort</a></li>
- <li><a class="dropdown-item" href="#distribute-cache">distribute-cache</a></li>
- <li><a class="dropdown-item" href="#dither">dither</a></li>
- <li><a class="dropdown-item" href="#draw">draw</a></li>
- <li><a class="dropdown-item" href="#duplicate">duplicate</a></li>
- <li><a class="dropdown-divider" href="#"><b>E</b></a></li>
- <li><a class="dropdown-item" href="#edge">edge</a></li>
- <li><a class="dropdown-item" href="#emboss">emboss</a></li>
- <li><a class="dropdown-item" href="#encipher">encipher</a></li>
- <li><a class="dropdown-item" href="#encoding">encoding</a></li>
- <li><a class="dropdown-item" href="#endian">endian</a></li>
- <li><a class="dropdown-item" href="#enhance">enhance</a></li>
- <li><a class="dropdown-item" href="#equalize">equalize</a></li>
- <li><a class="dropdown-item" href="#evaluate">evaluate</a></li>
- <li><a class="dropdown-item" href="#evaluate-sequence">evaluate-sequence</a></li>
- <li><a class="dropdown-item" href="#exit">exit</a></li>
- <li><a class="dropdown-item" href="#extent">extent</a></li>
- <li><a class="dropdown-item" href="#extract">extract</a></li>
- <li><a class="dropdown-divider" href="#"><b>F</b></a></li>
- <li><a class="dropdown-item" href="#family">family</a></li>
- <li><a class="dropdown-item" href="#features">features</a></li>
- <li><a class="dropdown-item" href="#fft">fft</a></li>
- <li><a class="dropdown-item" href="#fill">fill</a></li>
- <li><a class="dropdown-item" href="#filter">filter</a></li>
- <li><a class="dropdown-item" href="#flatten">flatten</a></li>
- <li><a class="dropdown-item" href="#flip">flip</a></li>
- <li><a class="dropdown-item" href="#floodfill">floodfill</a></li>
- <li><a class="dropdown-item" href="#flop">flop</a></li>
- <li><a class="dropdown-item" href="#font">font</a></li>
- <li><a class="dropdown-item" href="#foreground">foreground</a></li>
- <li><a class="dropdown-item" href="#format">format</a></li>
- <li><a class="dropdown-item" href="#format_identify">format[identify]</a></li>
- <li><a class="dropdown-item" href="#frame">frame</a></li>
- <li><a class="dropdown-item" href="#frame_import_">frame[import]</a></li>
- <li><a class="dropdown-item" href="#function">function</a></li>
- <li><a class="dropdown-item" href="#fuzz">fuzz</a></li>
- <li><a class="dropdown-item" href="#fx">fx</a></li>
- <li><a class="dropdown-divider" href="#"><b>G</b></a></li>
- <li><a class="dropdown-item" href="#gamma">gamma</a></li>
- <li><a class="dropdown-item" href="#gaussian-blur">gaussian-blur</a></li>
- <li><a class="dropdown-item" href="#geometry">geometry</a></li>
- <li><a class="dropdown-item" href="#gravity">gravity</a></li>
- <li><a class="dropdown-item" href="#grayscale">grayscale</a></li>
- <li><a class="dropdown-item" href="#green-primary">green-primary</a></li>
- <li><a class="dropdown-divider" href="#"><b>H</b></a></li>
- <li><a class="dropdown-item" href="#hald-clut">hald-clut</a></li>
- <li><a class="dropdown-item" href="#help">help</a></li>
- <li><a class="dropdown-item" href="#highlight-color">highlight-color</a></li>
- <li><a class="dropdown-item" href="#hough-lines">hough-lines</a></li>
- <li><a class="dropdown-divider" href="#"><b>I</b></a></li>
- <li><a class="dropdown-item" href="#iconGeometry">iconGeometry</a></li>
- <li><a class="dropdown-item" href="#iconic">iconic</a></li>
- <li><a class="dropdown-item" href="#identify">identify</a></li>
- <li><a class="dropdown-item" href="#ift">ift</a></li>
- <li><a class="dropdown-item" href="#illuminant">illuminant</a></li>
- <li><a class="dropdown-item" href="#immutable">immutable</a></li>
- <li><a class="dropdown-item" href="#implode">implode</a></li>
- <li><a class="dropdown-item" href="#insert">insert</a></li>
- <li><a class="dropdown-item" href="#intensity">intensity</a></li>
- <li><a class="dropdown-item" href="#intent">intent</a></li>
- <li><a class="dropdown-item" href="#interlace">interlace</a></li>
- <li><a class="dropdown-item" href="#interline-spacing">interline-spacing</a></li>
- <li><a class="dropdown-item" href="#interpolate">interpolate</a></li>
- <li><a class="dropdown-item" href="#interpolative-resize">interpolative-resize</a></li>
- <li><a class="dropdown-item" href="#interword-spacing">interword-spacing</a></li>
- <li><a class="dropdown-item" href="#integral">integral</a></li>
- <li><a class="dropdown-divider" href="#"><b>K</b></a></li>
- <li><a class="dropdown-item" href="#kerning">kerning</a></li>
- <li><a class="dropdown-item" href="#kmeans">kmeans</a></li>
- <li><a class="dropdown-item" href="#kuwahara">kuwahara</a></li>
- <li><a class="dropdown-divider" href="#"><b>L</b></a></li>
- <li><a class="dropdown-item" href="#label">label</a></li>
- <li><a class="dropdown-item" href="#lat">lat</a></li>
- <li><a class="dropdown-item" href="#layers">layers</a></li>
- <li><a class="dropdown-item" href="#level">level</a></li>
- <li><a class="dropdown-item" href="#level-colors">level-colors</a></li>
- <li><a class="dropdown-item" href="#limit">limit</a></li>
- <li><a class="dropdown-item" href="#linear-stretch">linear-stretch</a></li>
- <li><a class="dropdown-item" href="#linewidth">linewidth</a></li>
- <li><a class="dropdown-item" href="#liquid-rescale">liquid-rescale</a></li>
- <li><a class="dropdown-item" href="#list">list</a></li>
- <li><a class="dropdown-item" href="#log">log</a></li>
- <li><a class="dropdown-item" href="#loop">loop</a></li>
- <li><a class="dropdown-item" href="#lowlight-color">lowlight-color</a></li>
- <li><a class="dropdown-divider" href="#"><b>M</b></a></li>
- <li><a class="dropdown-item" href="#magnify">magnify</a></li>
- <li><a class="dropdown-item" href="#map">map</a></li>
- <li><a class="dropdown-item" href="#map_stream_">map[stream]</a></li>
- <li><a class="dropdown-item" href="#mattecolor">mattecolor</a></li>
- <li><a class="dropdown-item" href="#median">median</a></li>
- <li><a class="dropdown-item" href="#mean-shift">mean-shift</a></li>
- <li><a class="dropdown-item" href="#metric">metric</a></li>
- <li><a class="dropdown-item" href="#mode">mode</a></li>
- <li><a class="dropdown-item" href="#modulate">modulate</a></li>
- <li><a class="dropdown-item" href="#moments">moments</a></li>
- <li><a class="dropdown-item" href="#monitor">monitor</a></li>
- <li><a class="dropdown-item" href="#monochrome">monochrome</a></li>
- <li><a class="dropdown-item" href="#morph">morph</a></li>
- <li><a class="dropdown-item" href="#morphology">morphology</a></li>
- <li><a class="dropdown-item" href="#mosaic">mosaic</a></li>
- <li><a class="dropdown-item" href="#motion-blur">motion-blur</a></li>
- <li><a class="dropdown-divider" href="#"><b>N</b></a></li>
- <li><a class="dropdown-item" href="#name">name</a></li>
- <li><a class="dropdown-item" href="#negate">negate</a></li>
- <li><a class="dropdown-item" href="#noise">noise</a></li>
- <li><a class="dropdown-item" href="#normalize">normalize</a></li>
- <li><a class="dropdown-divider" href="#"><b>O</b></a></li>
- <li><a class="dropdown-item" href="#opaque">opaque</a></li>
- <li><a class="dropdown-item" href="#ordered-dither">ordered-dither</a></li>
- <li><a class="dropdown-item" href="#orient">orient</a></li>
- <li><a class="dropdown-divider" href="#"><b>P</b></a></li>
- <li><a class="dropdown-item" href="#page">page</a></li>
- <li><a class="dropdown-item" href="#paint">paint</a></li>
- <li><a class="dropdown-item" href="#path">path</a></li>
- <li><a class="dropdown-item" href="#pause_animate_">pause[animate]</a></li>
- <li><a class="dropdown-item" href="#pause_import_">pause[import]</a></li>
- <li><a class="dropdown-item" href="#perceptible">perceptible</a></li>
- <li><a class="dropdown-item" href="#ping">ping</a></li>
- <li><a class="dropdown-item" href="#pointsize">pointsize</a></li>
- <li><a class="dropdown-item" href="#polaroid">polaroid</a></li>
- <li><a class="dropdown-item" href="#poly">poly</a></li>
- <li><a class="dropdown-item" href="#posterize">posterize</a></li>
- <li><a class="dropdown-item" href="#precision">precision</a></li>
- <li><a class="dropdown-item" href="#preview">preview</a></li>
- <li><a class="dropdown-item" href="#print">print</a></li>
- <li><a class="dropdown-item" href="#process">process</a></li>
- <li><a class="dropdown-item" href="#profile">profile</a></li>
- <li><a class="dropdown-divider" href="#"><b>Q</b></a></li>
- <li><a class="dropdown-item" href="#quality">quality</a></li>
- <li><a class="dropdown-item" href="#quantize">quantize</a></li>
- <li><a class="dropdown-item" href="#quiet">quiet</a></li>
- <li><a class="dropdown-divider" href="#"><b>R</b></a></li>
- <li><a class="dropdown-item" href="#raise">raise</a></li>
- <li><a class="dropdown-item" href="#random-threshold">random-threshold</a></li>
- <li><a class="dropdown-item" href="#range-threshold">range-threshold</a></li>
- <li><a class="dropdown-item" href="#read">read</a></li>
- <li><a class="dropdown-item" href="#read-mask">read-mask</a></li>
- <li><a class="dropdown-item" href="#red-primary">red-primary</a></li>
- <li><a class="dropdown-item" href="#regard-warnings">regard-warnings</a></li>
- <li><a class="dropdown-item" href="#region">region</a></li>
- <li><a class="dropdown-item" href="#remap">remap</a></li>
- <li><a class="dropdown-item" href="#remote">remote</a></li>
- <li><a class="dropdown-item" href="#render">render</a></li>
- <li><a class="dropdown-item" href="#repage">repage</a></li>
- <li><a class="dropdown-item" href="#resample">resample</a></li>
- <li><a class="dropdown-item" href="#reshape">reshape</a></li>
- <li><a class="dropdown-item" href="#resize">resize</a></li>
- <li><a class="dropdown-item" href="#respect-parentheses">respect-parentheses</a></li>
- <li><a class="dropdown-item" href="#reverse">reverse</a></li>
- <li><a class="dropdown-item" href="#roll">roll</a></li>
- <li><a class="dropdown-item" href="#rotate">rotate</a></li>
- <li><a class="dropdown-item" href="#rotational-blur">rotational-blur</a></li>
- <li><a class="dropdown-divider" href="#"><b>S</b></a></li>
- <li><a class="dropdown-item" href="#sample">sample</a></li>
- <li><a class="dropdown-item" href="#sampling-factor">sampling-factor</a></li>
- <li><a class="dropdown-item" href="#scale">scale</a></li>
- <li><a class="dropdown-item" href="#scene">scene</a></li>
- <li><a class="dropdown-item" href="#screen">screen</a></li>
- <li><a class="dropdown-item" href="#script">script</a></li>
- <li><a class="dropdown-item" href="#seed">seed</a></li>
- <li><a class="dropdown-item" href="#segment">segment</a></li>
- <li><a class="dropdown-item" href="#selective-blur">selective-blur</a></li>
- <li><a class="dropdown-item" href="#separate">separate</a></li>
- <li><a class="dropdown-item" href="#sepia-tone">sepia-tone</a></li>
- <li><a class="dropdown-item" href="#set">set</a></li>
- <li><a class="dropdown-item" href="#shade">shade</a></li>
- <li><a class="dropdown-item" href="#shadow">shadow</a></li>
- <li><a class="dropdown-item" href="#shared-memory">shared-memory</a></li>
- <li><a class="dropdown-item" href="#sharpen">sharpen</a></li>
- <li><a class="dropdown-item" href="#shave">shave</a></li>
- <li><a class="dropdown-item" href="#shear">shear</a></li>
- <li><a class="dropdown-item" href="#sigmoidal-contrast">sigmoidal-contrast</a></li>
- <li><a class="dropdown-item" href="#silent">silent</a></li>
- <li><a class="dropdown-item" href="#similarity-threshold">similarity-threshold</a></li>
- <li><a class="dropdown-item" href="#size">size</a></li>
- <li><a class="dropdown-item" href="#sketch">sketch</a></li>
- <li><a class="dropdown-item" href="#smush">smush</a></li>
- <li><a class="dropdown-item" href="#snaps">snaps</a></li>
- <li><a class="dropdown-item" href="#solarize">solarize</a></li>
- <li><a class="dropdown-item" href="#sort-pixels">sort-pixels</a></li>
- <li><a class="dropdown-item" href="#sparse-color">sparse-color</a></li>
- <li><a class="dropdown-item" href="#splice">splice</a></li>
- <li><a class="dropdown-item" href="#spread">spread</a></li>
- <li><a class="dropdown-item" href="#statistic">statistic</a></li>
- <li><a class="dropdown-item" href="#stegano">stegano</a></li>
- <li><a class="dropdown-item" href="#stereo">stereo</a></li>
- <li><a class="dropdown-item" href="#storage-type">storage-type</a></li>
- <li><a class="dropdown-item" href="#stretch">stretch</a></li>
- <li><a class="dropdown-item" href="#strip">strip</a></li>
- <li><a class="dropdown-item" href="#stroke">stroke</a></li>
- <li><a class="dropdown-item" href="#strokewidth">strokewidth</a></li>
- <li><a class="dropdown-item" href="#style">style</a></li>
- <li><a class="dropdown-item" href="#subimage-search">subimage-search</a></li>
- <li><a class="dropdown-item" href="#swap">swap</a></li>
- <li><a class="dropdown-item" href="#swirl">swirl</a></li>
- <li><a class="dropdown-item" href="#synchronize">synchronize</a></li>
- <li><a class="dropdown-divider" href="#"><b>T</b></a></li>
- <li><a class="dropdown-item" href="#taint">taint</a></li>
- <li><a class="dropdown-item" href="#text-font">text-font</a></li>
- <li><a class="dropdown-item" href="#texture">texture</a></li>
- <li><a class="dropdown-item" href="#threshold">threshold</a></li>
- <li><a class="dropdown-item" href="#thumbnail">thumbnail</a></li>
- <li><a class="dropdown-item" href="#tile">tile</a></li>
- <li><a class="dropdown-item" href="#tile-offset">tile-offset</a></li>
- <li><a class="dropdown-item" href="#tint">tint</a></li>
- <li><a class="dropdown-item" href="#title">title</a></li>
- <li><a class="dropdown-item" href="#transform">transform</a></li>
- <li><a class="dropdown-item" href="#transparent">transparent</a></li>
- <li><a class="dropdown-item" href="#transparent-color">transparent-color</a></li>
- <li><a class="dropdown-item" href="#transpose">transpose</a></li>
- <li><a class="dropdown-item" href="#transverse">transverse</a></li>
- <li><a class="dropdown-item" href="#treedepth">treedepth</a></li>
- <li><a class="dropdown-item" href="#trim">trim</a></li>
- <li><a class="dropdown-item" href="#type">type</a></li>
- <li><a class="dropdown-divider" href="#"><b>U</b></a></li>
- <li><a class="dropdown-item" href="#undercolor">undercolor</a></li>
- <li><a class="dropdown-item" href="#unique-colors">unique-colors</a></li>
- <li><a class="dropdown-item" href="#units">units</a></li>
- <li><a class="dropdown-item" href="#unsharp">unsharp</a></li>
- <li><a class="dropdown-item" href="#update">update</a></li>
- <li><a class="dropdown-divider" href="#"><b>V</b></a></li>
- <li><a class="dropdown-item" href="#verbose">verbose</a></li>
- <li><a class="dropdown-item" href="#version">version</a></li>
- <li><a class="dropdown-item" href="#view">view</a></li>
- <li><a class="dropdown-item" href="#vignette">vignette</a></li>
- <li><a class="dropdown-item" href="#virtual-pixel">virtual-pixel</a></li>
- <li><a class="dropdown-item" href="#visual">visual</a></li>
- <li><a class="dropdown-divider" href="#"><b>W</b></a></li>
- <li><a class="dropdown-item" href="#watermark">watermark</a></li>
- <li><a class="dropdown-item" href="#wave">wave</a></li>
- <li><a class="dropdown-item" href="#wavelet-denoise">wavelet-denoise</a></li>
- <li><a class="dropdown-item" href="#weight">weight</a></li>
- <li><a class="dropdown-item" href="#white-balance">white-balance</a></li>
- <li><a class="dropdown-item" href="#white-point">white-point</a></li>
- <li><a class="dropdown-item" href="#white-threshold">white-threshold</a></li>
- <li><a class="dropdown-item" href="#window">window</a></li>
- <li><a class="dropdown-item" href="#window-group">window-group</a></li>
- <li><a class="dropdown-item" href="#word-break">word-break</a></li>
- <li><a class="dropdown-item" href="#write">write</a></li>
- <li><a class="dropdown-item" href="#write-mask">write-mask</a></li>
- </ul>
-</div>
-<p> </p>
-<p class="lead">Below is list of command-line options recognized by the ImageMagick <a href="../command-line-tools/index.html">command-line tools</a>. If you want a description of a particular option, click on the option name in the navigation bar above and you will go right to it. Unless otherwise noted, each option is recognized by the commands: <a href="../magick/index.html">magick</a> and <a href="../mogrify/index.html">mogrify</a>.</p>
-
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="adaptive-blur"></a>-adaptive-blur <var>radius</var>[x<var>sigma</var>]</h2>
+<div class="option-heading">
+ <h2><span id="letter-a" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="adaptive-blur"></a>-adaptive-blur <var>radius</var>[x<var>sigma</var>]</h2>
</div>
<p class="lead">Adaptively blur pixels, with decreasing effect near edges.</p>
@@ -576,7 +685,7 @@ integer. If not given, or set to zero, IM will calculate the largest possible
radius that will provide meaningful results for the Gaussian distribution.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="adaptive-resize"></a>-adaptive-resize <var>geometry</var></h2>
</div>
@@ -588,7 +697,7 @@ href="#filter">-filter</a> to choose a different resampling algorithm.
Offsets, if present in the geometry string, are ignored, and the <a
href="#gravity">-gravity</a> option has no effect.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="adaptive-sharpen"></a>-adaptive-sharpen <var>radius</var>[x<var>sigma</var>]</h2>
</div>
@@ -606,7 +715,7 @@ integer. If not given, or set to zero, IM will calculate the largest possible
radius that will provide meaningful results for the Gaussian distribution.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="adjoin"></a>-adjoin</h2>
</div>
@@ -631,7 +740,7 @@ strings, such as '<code>%d</code>' or '<code>%03d</code>', are familiar to those
who have used the standard <code>printf()</code>' C-library function. As an
example, the command</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick logo: rose: -morph 15 my%02dmorph.jpg</samp></pre></pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: rose: -morph 15 my%02dmorph.jpg</samp></pre>
<p>will create a sequence of 17 images (the two given plus 15 more created by
<a href="#morph">-morph</a>), named: my00morph.jpg, my01morph.jpg,
@@ -647,7 +756,7 @@ save to multiple files, if any of the following conditions exist...</p>
</ol>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="affine"></a>-affine
<var>s<sub>x</sub></var>,<var>r<sub>x</sub></var>,<var>r<sub>y</sub></var>,<var>s<sub>y</sub></var>[,<var>t<sub>x</sub></var>,<var>t<sub>y</sub></var>]</h2>
</div>
@@ -714,7 +823,7 @@ of the individual transformations.</p>
<p>An attempt is made to detect near-singular transformation matrices. If the
matrix determinant has a sufficiently small absolute value it is rejected.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="alpha"></a>-alpha <var>type</var></h2>
</div>
@@ -822,7 +931,7 @@ same as "<code><a href="#alpha" >-alpha</a> Off</code>", the <code>
>-matte</code> operation was the same as "<code><a href="#alpha" >-alpha</a>
Set</code>" and not "<code><a href="#alpha" >-alpha</a> On</code>". </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="annotate"></a>-annotate <var>degrees</var> <var>text</var></h2>
<h2><a class="anchor"></a>-annotate <var>Xdegrees</var>x<var>Ydegrees</var> <var>text</var></h2>
<h2><a class="anchor"></a>-annotate <var>Xdegrees</var>x<var>Ydegrees</var>{+-}<var>t<sub>x</sub></var>{+-}<var>t<sub>y</sub></var> <var>text</var></h2>
@@ -859,7 +968,7 @@ is of the form '@mytext.txt', the text is read from the file
<code>mytext.txt</code>. Text in a file is taken literally; no embedded
formatting characters are recognized.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="antialias"></a>-antialias</h2>
</div>
@@ -871,7 +980,7 @@ antialiasing edge pixels. This will then reduce the number of colors added to
an image to just the colors being directly drawn. That is, no mixed colors
are added when drawing such objects. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="append"></a>-append</h2>
</div>
@@ -889,7 +998,7 @@ href="#gravity">-gravity</a> setting. </p>
<p>For more flexible options, including the ability to add space between images,
use <a href="#smush">-smush</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="attenuate"></a>-attenuate <var>value</var></h2>
</div>
@@ -897,7 +1006,7 @@ use <a href="#smush">-smush</a>.</p>
<p>If unset the value is equivalent to 1.0, or a maximum noise addition</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="authenticate"></a>-authenticate <var>password</var></h2>
</div>
@@ -911,7 +1020,7 @@ encrypting using the MSC API is not supported.</p>
and <a href="#decipher">-decipher</a>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="auto-gamma"></a>-auto-gamma</h2>
</div>
@@ -936,7 +1045,7 @@ together by the same gamma value, preserving colors. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="auto-level"></a>-auto-level</h2>
</div>
@@ -969,7 +1078,7 @@ together by the same gamma value, preserving colors, and ignoring
transparency. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="auto-orient"></a>-auto-orient</h2>
</div>
@@ -986,7 +1095,7 @@ resetting this setting, may be 'corrected' again resulting in a incorrect
result. If the EXIF profile was previously stripped, the <a
href="#auto-orient" >-auto-orient</a> operator will do nothing. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="auto-threshold"></a>-auto-threshold <var>method</var></h2>
</div>
@@ -1005,7 +1114,7 @@ href="#auto-orient" >-auto-orient</a> operator will do nothing. </p>
<p>The computed threshold is returned as the <code>auto-threshold:verbose</code> image property. To instead print to your device, use <code>-define auto-threshold:verbose=true</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="average"></a>-average</h2>
</div>
@@ -1014,8 +1123,8 @@ href="#auto-orient" >-auto-orient</a> operator will do nothing. </p>
<p>An error results if the images are not identically sized.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="backdrop"></a>-backdrop</h2>
+<div class="option-heading">
+ <h2><span id="letter-b" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="backdrop"></a>-backdrop</h2>
</div>
<p class="lead">Display the image centered on a backdrop.</p>
@@ -1025,7 +1134,7 @@ other X window activity while viewing the image. The color of the backdrop is
specified as the background color. The color is specified using the format
described under the <a href="#fill">-fill</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="background"></a>-background <var>color</var></h2>
</div>
@@ -1035,7 +1144,7 @@ described under the <a href="#fill">-fill</a> option.</p>
href="#fill">-fill</a> option. The default background color (if none is
specified or found in the image) is white.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="bench"></a>-bench <var>iterations</var></h2>
</div>
@@ -1058,7 +1167,7 @@ Performance[4]: 5i 0.875657ips 6.880u 0:05.710
second, using 3 threads and 3.190 seconds of the user allotted time, for
a total elapsed time of 2.300 seconds.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="bias"></a>-bias <var>value</var>{<var>%</var>}</h2>
</div>
@@ -1085,7 +1194,7 @@ href="https://usage.imagemagick.org/basics/#hdri" >Usage</a> pages or this
href="https://en.wikipedia.org/wiki/High_dynamic_range_imaging">Wikipedia</a>
entry. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="bilateral-blur"></a>-bilateral-blur <var>width</var>{x<var>height</var>}{<var>+intensity-sigma</var>}{<var>+spatial-sigma</var>}</h2>
</div>
@@ -1110,13 +1219,13 @@ spatial-sigma.</p>
<p>The default value for the intensity and spatial sigmas are <var>0.75*diameter</var> and <var>0.25*diameter</var> respectively.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="black-point-compensation"></a>-black-point-compensation</h2>
</div>
<p class="lead">Use black point compensation.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="black-threshold"></a>-black-threshold <var>value</var>{<var>%</var>}</h2>
</div>
@@ -1128,7 +1237,7 @@ desired <a href="#channel">channel</a> value. See <a href="#threshold">-threshol
for more details on thresholds and resulting values. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="blend"></a>-blend <var>geometry</var></h2>
</div>
@@ -1142,21 +1251,21 @@ the background image is weighted by the exact opposite amount. That is a
'destination' image. Thus it is equivalent to <code>-blend 30x70%</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="blue-primary"></a>-blue-primary <var>x</var>,<var>y</var></h2>
</div>
<p class="lead">Set the blue chromaticity primary point.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="blue-shift"></a>-blue-shift <var>factor</var></h2>
</div>
<p class="lead">Simulate a scene at nighttime in the moonlight. Start with a factor of 1.5</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="blur"></a>-blur <var>radius</var><br />-blur <var>radius</var>{x<var>sigma</var>}</h2>
</div>
@@ -1192,7 +1301,7 @@ pixels which are outside the image proper are blurred into the final result.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="border"></a>-border <var>geometry</var></h2>
</div>
@@ -1246,7 +1355,7 @@ be replaced by the current <a href="#bordercolor">-bordercolor</a> setting.</p>
<p>See also the <a href="#frame">-frame</a> option, which has more
functionality.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="bordercolor"></a>-bordercolor <var>color</var></h2>
</div>
@@ -1256,13 +1365,13 @@ functionality.</p>
<p>The default border color is <code>#DFDFDF</code>, <span style="background-color: #dfdfdf;">this shade of gray</span>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="borderwidth"></a>-borderwidth <var>geometry</var> </h2>
</div>
<p class="lead">Set the border width.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="brightness-contrast"></a>-brightness-contrast <var>brightness</var><br />-brightness-contrast <var>brightness</var>{x<var>contrast</var>}{<var>%</var>}</h2>
</div>
@@ -1300,13 +1409,13 @@ totally black.</p>
<p>As the range of values for the arguments are -100 to +100, adding the '%'
symbol is no different than leaving it off.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="cache"></a>-cache <var>threshold</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-c" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="cache"></a>-cache <var>threshold</var></h2>
</div>
<p class="lead">(This option has been replaced by the <a href='#limit'>-limit</a> option).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="canny"></a>-canny <var>radius</var><br/>-canny <var>radius</var>{x<var>sigma</var>}{<var>+lower-percent</var>}{<var>+upper-percent</var>}</h2>
</div>
@@ -1323,7 +1432,7 @@ integer. If not given, or set to zero, IM will calculate the largest possible
radius that will provide meaningful results for the Gaussian distribution.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="caption"></a>-caption <var>string</var></h2>
</div>
@@ -1356,7 +1465,7 @@ that the image <code>bird.miff</code> has a width of 512 and a height of
480.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="cdl"></a>-cdl <var>filename</var></h2>
</div>
@@ -1379,7 +1488,7 @@ that the image <code>bird.miff</code> has a width of 512 and a height of
</ColorCorrectionCollection>
</code></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="channel"></a>-channel <var>type</var></h2>
</div>
@@ -1515,7 +1624,7 @@ alpha channel present, and the <a href="#channel" >-channel</a> setting tells
the operator to apply the operation using alpha channels. The <a
href="#clut">-clut</a> operator is a good example of this. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="channel-fx"></a>-channel-fx <var>expression</var></h2>
</div>
@@ -1541,29 +1650,33 @@ href="#clut">-clut</a> operator is a good example of this. </p>
<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick wizard.png mask.pgm -channel-fx '| gray=>alpha' wizard-alpha.png
</samp></pre>
<p>Use a similar command to define a read mask:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick wizard.png mask.pgm -channel-fx '| gray=>read-mask' wizard-mask.png</samp></pre></pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick wizard.png mask.pgm -channel-fx '| gray=>read-mask' wizard-mask.png</samp></pre>
<p>In this example, we compute the mean RGB value for all opaque pixels of an image:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick wizard-alpha.png -channel-fx "alpha=>read-mask" -channel rgb -format "%[fx:mean]\n" info:</samp></pre></pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick wizard-alpha.png -channel-fx "alpha=>read-mask" -channel rgb -format "%[fx:mean]\n" info:</samp></pre>
<p>Let's create two meta channels and populate them with a copy of the gray pixels:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick gray.pgm -channel-fx "gray=>meta, gray=>meta1" gray.tif</samp></pre></pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick gray.pgm -channel-fx "gray=>meta, gray=>meta1" gray.tif</samp></pre>
<p>Notice we save the results into a TIFF image file. Not all formats support multispectral images. TIFF, MIFF, MPC, and FTXT do.</p>
<p>Add <code>-debug pixel</code> prior to the <code>-channel-fx</code> option to track the channel morphology.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="charcoal"></a>-charcoal <var>factor</var></h2>
</div>
<p class="lead">Simulate a charcoal drawing.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="chop"></a>-chop <var>geometry</var></h2>
</div>
<p class="lead">Remove pixels from the interior of an image.</p>
+<p>Specify both dimensions explicitly: for example, <code>-chop 1x1</code>
+removes one column and one row. A single value such as <code>-chop 1</code>
+does not mean <code>1x1</code>; the omitted height depends on the page geometry.</p>
+
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument. The <var>width</var>
and <var>height</var> given in the of the <var>size</var>
portion of the <var>geometry</var> argument give the number of
@@ -1583,7 +1696,7 @@ sides of the image. </p>
<p>Using <a href="#chop">-chop</a> effectively undoes the results of a <a
href="#splice">-splice</a> that was given the same <var>geometry</var> and <a href="#gravity">-gravity</a> settings. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clahe"></a>-clahe <var>width</var>x<var>height</var>{%}{+}<var>number-bins</var>{+}<var>clip-limit</var>{!}</h2>
</div>
@@ -1591,13 +1704,13 @@ href="#splice">-splice</a> that was given the same <var>geometry</var> and <a hr
<p> The image is divided into tiles of <var>width</var> and <var>height</var> pixels. Append <code>%</code> to define the width and height as percentages of the image's dimensions. The tile size should be larger than the size of features to be preserved and respects the aspect ratio of the image. Add <code>!</code> to force an exact tile width and height. <var>number-bins</var> is the number of histogram bins per tile (min 2, max 65536). The number of histogram bins should be smaller than the number of pixels in a single tile. <var>clip-limit</var> is the contrast limit for localized changes in contrast. A clip-limit of 2 to 3 is a good starting place (e.g. -clahe 50x50%+128+3). Very large values will let the histogram equalization do whatever it wants to do, that is result in maximal local contrast. The value 1 will result in the original image. Note, if the number of bins and the clip-limit are omitted, they default to 128 and no clipping respectively.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clamp"></a>-clamp</h2>
</div>
<p class="lead">Set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clip"></a>-clip</h2>
</div>
@@ -1617,7 +1730,7 @@ delegate library is not present, the option is ignored.</p>
<p>Use <a href="#clip">+clip</a> to disable clipping for subsequent operations.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clip-mask"></a>-clip-mask</h2>
</div>
@@ -1635,7 +1748,7 @@ operation. </p>
<p>Use <a href="#clip-mask">+clip-mask</a> to disable clipping for subsequent operations.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clip-path"></a>-clip-path <var>id</var></h2>
</div>
@@ -1645,7 +1758,7 @@ operation. </p>
<p>Use <a href="#clip-path">+clip-path</a> to disable clipping for subsequent operations.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clone"></a>-clone <var>index(s)</var></h2>
</div>
@@ -1667,7 +1780,7 @@ effectively clone all the images. </p>
in the image sequence, and is thus equivalent to using an argument of
'<code>−1</code>'. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="clut"></a>-clut</h2>
</div>
@@ -1708,7 +1821,7 @@ according to the lookup of the full color RGB value from a 2D representation
of a 3D color cube. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="coalesce"></a>-coalesce</h2>
</div>
@@ -1728,7 +1841,7 @@ there is no guarantee that the restored GIF animation optimization is
better than the original. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="colorize"></a>-colorize <var>value</var></h2>
</div>
@@ -1739,7 +1852,7 @@ values can be applied to the red, green, and blue channels of the image with
a comma-delimited list of colorization
values (e.g., <code>-colorize 0,0,50</code>).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="colormap"></a>-colormap <var>type</var></h2>
</div>
@@ -1757,7 +1870,7 @@ If <code>private</code> is chosen, the image colors appear exactly
as they are defined. However, other clients may go <var>technicolor</var>
when the image colormap is installed.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="colors"></a>-colors <var>value</var></h2>
</div>
@@ -1773,7 +1886,7 @@ reducing the number of colors. Refer to
the <a href="../quantize/index.html">
color reduction algorithm</a> for more details.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="color-matrix"></a>-color-matrix <var>matrix</var></h2>
</div>
@@ -1797,7 +1910,7 @@ for CMYKA (or RGBA with offsets). The matrix is similar to
0.0 0.0 0.0 0.0, 1.0, 0.0 \
0.0 0.0 0.0 0.0, 0.0, 1.0" kittens.png
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="colorspace"></a>-colorspace <var>value</var></h2>
</div>
@@ -1985,13 +2098,13 @@ for CMYKA (or RGBA with offsets). The matrix is similar to
<p>Use the <code>Undefined</code> colorspace to identify multi-spectral images.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="color-threshold"></a>-color-threshold <var>start-color</var>-<var>stop-color</var></h2>
</div>
<p>Return a binary image where all colors within the specified range are changed to white. All other colors are changed to black.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="combine"></a>-combine</h2>
<h2>+combine <var>colorspace</var></h2>
</div>
@@ -2014,7 +2127,7 @@ convert sepimage-0.png sepimage-1.png sepimage-2.png -channel RGB \
-combine imagecopy.png
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="comment"></a>-comment <var>string</var></h2>
</div>
@@ -2046,7 +2159,7 @@ instead.</p>
that the image <code>bird.miff</code> has a width of 512 and a height of
480.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="compare"></a>-compare</h2>
</div>
@@ -2063,7 +2176,7 @@ that the image <code>bird.miff</code> has a width of 512 and a height of
"%[distortion]" info:
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="complex"></a>-complex <var>operator</var></h2>
</div>
@@ -2082,7 +2195,7 @@ subtract
<p>Optionally specify the <code>divide</code> operator SNR with <code><a href="#define">-define</a> complex:snr=float</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="compose"></a>-compose <var>operator</var></h2>
</div>
@@ -2107,7 +2220,7 @@ and <a href="#extent">-extent</a>. </p>
command. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="composite"></a>-composite</h2>
</div>
@@ -2135,7 +2248,7 @@ image outside the overlay area. It is disabled by default. You can enable this
<p>The SVG compositing specification requires that color and opacity values range between zero and QuantumRange inclusive. You can permit values outside this range with this option: <a href="#set">-set</a> '<code>option:compose:clamp=false</code></p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="compress"></a>-compress <var>type</var></h2>
</div>
@@ -2173,7 +2286,7 @@ Use the <a href="#sampling-factor">-sampling-factor</a> option to set the
sampling factor to be used by JPEG, MPEG, and YUV encoders for down-sampling
the chroma channels.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="connected-components"></a>-connected-components <var>connectivity</var></h2>
</div>
@@ -2181,7 +2294,7 @@ the chroma channels.</p>
<p>Use <code><a href="#define" >-define</a> connected-components:verbose=true</code> to output statistics associated with each unique label.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="contrast"></a>-contrast</h2>
</div>
@@ -2197,7 +2310,7 @@ contrast.</p>
<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose: -contrast -contrast rose_c2.png
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="contrast-stretch"></a>-contrast-stretch <var>black-point</var><br />-contrast-stretch <var>black-point</var>{x<var>white-point</var>}{<var>%</var>}</h2>
</div>
@@ -2231,7 +2344,7 @@ normalization of mathematical images. </p>
<p>This operator is under review for re-development. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="convolve"></a>-convolve <var>kernel</var></h2>
</div>
@@ -2263,13 +2376,13 @@ href="https://usage.imagemagick.org/basics/#hdri">Usage</a> pages or this
entry. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="copy"></a>-copy <var>geometry</var> <var>offset</var></h2>
</div>
<p class="lead">Copy pixels from one area of an image to another.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="crop"></a>-crop <var>geometry</var>{<var>@</var>}{<var>!</var>}</h2>
</div>
@@ -2321,7 +2434,7 @@ remove the page offset that will be left behind. This is especially true when
you are going to write to an image format such as PNG that supports an image
offset.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="cycle"></a>-cycle <var>amount</var></h2>
</div>
@@ -2331,8 +2444,8 @@ offset.</p>
colormap entry is shifted.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="debug"></a>-debug <var>events</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-d" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="debug"></a>-debug <var>events</var></h2>
</div>
<p class="lead">Enable debug printout.</p>
@@ -2369,7 +2482,7 @@ environment variable are the same as for the <a href="#debug">-debug</a>
option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="decipher"></a>-decipher <var>filename</var></h2>
</div>
@@ -2381,7 +2494,7 @@ option.</p>
Decipher an Image</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="deconstruct"></a>-deconstruct</h2>
</div>
@@ -2400,7 +2513,7 @@ animation can go from opaque to transparent. </p>
method '<code>compare-any</code>'. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="define"></a>-define <var>key</var>{<var>=value</var>}<var>...</var></h2>
</div>
@@ -2441,7 +2554,7 @@ use:</p>
<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>-define registry:temporary-path=/data/tmp
</code></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="delay"></a>-delay <var>ticks</var> <br />-delay <var>ticks</var>x<var>ticks-per-second</var> {<var><</var>} {<var>></var>}</h2>
</div>
@@ -2462,7 +2575,7 @@ to 30. Enclose the given delay in quotation marks to prevent the
a file redirection.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="delete"></a>-delete <var>indexes</var></h2>
</div>
@@ -2478,7 +2591,7 @@ a dash (e.g. 0-4). Separate indexes with a comma (e.g. 0,2). Use
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="density"></a>-density <var>width</var><br />-density <var>width</var>x<var>height</var></h2>
</div>
@@ -2511,7 +2624,7 @@ to the pixels. To change the number of pixels in the image so that it has the
same physical dimensions (in inches or centimeters), use the
<a href="#resample">-resample</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="depth"></a>-depth <var>value</var></h2>
</div>
@@ -2521,13 +2634,13 @@ same physical dimensions (in inches or centimeters), use the
<p>Use <a href="#depth">+depth</a> to return depth to its default value.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="descend"></a>-descend</h2>
</div>
<p class="lead">Obtain image by descending window hierarchy.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="deskew"></a>-deskew <var>threshold{%}</var></h2>
</div>
@@ -2536,19 +2649,19 @@ same physical dimensions (in inches or centimeters), use the
<p>Use <a href="#set">-set</a> <code>option:deskew:auto-crop
<var>true | false</var></code> to auto crop the image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="despeckle"></a>-despeckle</h2>
</div>
<p class="lead">Reduce the speckles within an image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="direction"></a>-direction <var>type</var></h2>
</div>
<p class="lead">Render text right-to-left or left-to-right. Requires the <a href="https://github.com/HOST-Oman/libraqm">RAQM</a> delegate library and <a href="https://en.wikipedia.org/wiki/Complex_text_layout">complex text layout</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="displace"></a>-displace <var>horizontal-scale</var>{%}{!}<br />-displace <var>horizontal-scale</var>x<var>vertical-scale</var>{%}{!}</h2>
</div>
@@ -2608,7 +2721,7 @@ mask the transparency of the destination image. However areas outside the
overlaid areas will not be affected. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="display"></a>-display <var>host:display[.screen]</var></h2>
</div>
@@ -2617,7 +2730,7 @@ overlaid areas will not be affected. </p>
<p>This option is used with convert for obtaining image or font from this
X server. See <var>X(1)</var>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="dispose"></a>-dispose <var>method</var></h2>
</div>
@@ -2650,14 +2763,14 @@ resetting the layer disposal methods of images being read in. </p>
<p>Use <a href="#set">-set</a> '<code>dispose</code>' method to set the image
disposal method for images already in memory.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="dissimilarity-threshold"></a>-dissimilarity-threshold <var>value</var></h2>
</div>
<p class="lead">Maximum RMSE for subimage match (default 0.2).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="dissolve"></a>-dissolve <var>src_percent</var>[x<var>dst_percent</var>]</h2>
</div>
@@ -2673,7 +2786,7 @@ are given, each image are dissolved to the percentages given. </p>
'50,50', produce a 75% transparency. For a 50% + 50% blending of the two
images, you would need to use dissolve values of '50,100'. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="distort"></a>-distort <var>method arguments</var></h2>
</div>
@@ -3082,13 +3195,13 @@ Weighted Average) resampling algorithm. Note this table uses a squared radius
lookup value. This is typically only used for debugging EWA resampling. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="distribute-cache"></a>-distribute-cache <var>port</var></h2>
</div>
<p class="lead">Launch a distributed pixel cache server. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="dither"></a>-dither <var>method</var></h2>
</div>
@@ -3124,7 +3237,7 @@ patterns, using uniform color maps, rather than specific color maps. </p>
<p>Use "<code><a href="#define" >-define</a> dither:diffusion-amount=35%</code>, for example, to control the amount of Floyd-Steinberg dither.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="draw"></a>-draw <var>string</var></h2>
</div>
@@ -3214,7 +3327,7 @@ to be removed.</p>
<p>The <code>circle</code> primitive makes a disk (filled) or circle (unfilled).
Give the center and any point on the perimeter (boundary). Note, by using a translation, you can remove the need to calculate the circles edge coordinate, but can just give the radius directly:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><pre><samp>$ magick -size 100x60 xc: -stroke SeaGreen -fill PaleGreen -strokewidth 2 -draw 'translate 50,30 circle 0,0 25,0' circle.gif</samp></pre></pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick -size 100x60 xc: -stroke SeaGreen -fill PaleGreen -strokewidth 2 -draw 'translate 50,30 circle 0,0 25,0' circle.gif</samp></pre>
<p>The <code>arc</code> primitive is used to inscribe an elliptical segment in
to a given rectangle. An <code>arc</code> requires the two corners used for
@@ -3363,7 +3476,7 @@ Vector Graphics</a> format.</p>
<p>Note, drawing requires an alpha channel. If none is available, an all opaque alpha channel is implicitly created.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="duplicate"></a>-duplicate <var>count,indexes</var></h2>
</div>
@@ -3376,19 +3489,19 @@ a range of images with a dash (e.g. 0-4). Separate indexes with a comma (e.g.
0,2). Use <code>+duplicate</code> to duplicate the last image in the current
image sequence.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="edge"></a>-edge <var>radius</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-e" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="edge"></a>-edge <var>radius</var></h2>
</div>
<p class="lead">Detect edges within an image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="emboss"></a>-emboss <var>radius</var>{x<var>sigma</var></h2>
</div>
<p class="lead">Emboss an image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="encipher"></a>-encipher <var>filename</var></h2>
</div>
@@ -3401,7 +3514,7 @@ Decipher an Image</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="encoding"></a>-encoding <var>type</var></h2>
</div>
@@ -3417,7 +3530,7 @@ SJIScode Symbol
Unicode Wansung
</code></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="endian"></a>-endian <var>type</var></h2>
</div>
@@ -3428,14 +3541,14 @@ Unicode Wansung
<p>Use <a href="#endian">+endian</a> to revert to unspecified endianness.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="enhance"></a>-enhance</h2>
</div>
<p class="lead">Apply a digital filter to enhance a noisy image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="equalize"></a>-equalize</h2>
</div>
@@ -3453,7 +3566,7 @@ components transformation that puts most of the information in the first
channel. Here we have ... <code>-colorspace OHTA -channel red -equalize
-colorspace sRGB</code> ...</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="evaluate"></a>-evaluate <var>operator value</var></h2>
</div>
@@ -3599,7 +3712,7 @@ then the effective period is the <var>half</var> the <var>QuantumRange</var>.</p
<p>See also the <a href="#function" >-function</a> operator, which is a
multi-value version of evaluate. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="evaluate-sequence"></a>-evaluate-sequence <var>operator</var></h2>
</div>
@@ -3609,14 +3722,14 @@ multi-value version of evaluate. </p>
href="#evaluate-sequence">-evaluate-sequence</a> operators, use <a
href="#list">-list evaluate</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="exit"></a>-exit</h2>
</div>
<p class="lead">Stop processing at this point.</p>
<p> No further options are processed after this option. Useful in a script to force the <code>magick</code> command to exit without actually closing the pipeline that it is processing options from. You can also use the option as a <em>final</em> option on the <code>magick</code> command line instead of an implicit output image, to completely prevent any image write. Note, even the <code>NULL:</code> coder requires at least one image, for it to 'not write'! This option does not require any images at all.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="extent"></a>-extent <var>geometry</var></h2>
</div>
@@ -3647,7 +3760,7 @@ image is centered on an 800x600 black canvas: </p>
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="extract"></a>-extract <var>geometry</var></h2>
</div>
@@ -3676,8 +3789,8 @@ equivalent to:</p>
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="family"></a>-family <var>fontFamily</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-f" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="family"></a>-family <var>fontFamily</var></h2>
</div>
<p class="lead">Set a font family for text.</p>
@@ -3694,7 +3807,7 @@ rendering text. If the family can be found it is used; if not, a default font
<a href="#style">-style</a>,
and <a href="#weight">-weight</a>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="features"></a>-features <var>distance</var></h2>
</div>
@@ -3709,7 +3822,7 @@ Sum Average Information Measure of Correlation 2
Sum Variance Maximum Correlation Coefficient
</code></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="fft"></a>-fft</h2>
</div>
@@ -3817,7 +3930,7 @@ href="http://www.fmwconcepts.com/imagemagick/fourier_transforms/fourier.html"
<p>By default the FFT is normalized (and the IFT is not). Use "<code><a href="#define" >-define</a> fourier:normalize=forward</code> to explicitly normalize the FFT and unnormalize the IFT.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="fill"></a>-fill <var>color</var></h2>
</div>
@@ -3841,7 +3954,7 @@ the parentheses from being interpreted by your shell.</p>
<p>To print a complete list of color names, use the <a href="#list">-list color</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="filter"></a>-filter <var>type</var></h2>
</div>
@@ -4048,14 +4161,14 @@ involved, using expert settings are more likely to be detrimental to your image
resizing.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="flatten"></a>-flatten</h2>
</div>
<p class="lead">This is a simple alias for the <a href="#layers" >-layers</a> method "flatten".</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="flip"></a>-flip</h2>
</div>
@@ -4065,7 +4178,7 @@ resizing.</p>
upside-down. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="floodfill"></a>-floodfill {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var> <var>color</var></h2>
</div>
@@ -4086,7 +4199,7 @@ point'. For this form of flood fill, look at <a href="#draw" >-draw</a> and
its 'color floodfill' drawing method. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="flop"></a>-flop</h2>
</div>
@@ -4096,7 +4209,7 @@ its 'color floodfill' drawing method. </p>
a vertical mirror. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="font"></a>-font <var>name</var></h2>
</div>
@@ -4117,7 +4230,7 @@ href="#style">-style</a>, and <a href="#weight">-weight</a>. </p>
<p>To specify an explicit font filename or collection, specify the font path preceded with a <code>@</code>, e.g., <code>@arial.ttf</code>. You can specify the font face index for font collections, e.g., <code>@msgothic.ttc[1]</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="foreground"></a>-foreground <var>color</var></h2>
</div>
@@ -4128,7 +4241,7 @@ href="#fill">-fill</a> option.</p>
<p>The default foreground color is black.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="format"></a>-format <var>type</var></h2>
</div>
@@ -4146,7 +4259,7 @@ example, if you specify <var>tiff</var> as the format type and the
input image filename is <var>image.gif</var>, the output image
filename becomes <var>image.tiff</var>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="format_identify"></a>-format <var>expression</var></h2>
</div>
@@ -4156,7 +4269,7 @@ filename becomes <var>image.tiff</var>.</p>
Properties</a> for an explanation on how to specify the argument to this
option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="frame"></a>-frame <var>geometry</var></h2>
</div>
@@ -4188,12 +4301,12 @@ href="#bordercolor">-bordercolor</a> setting.</p>
affected by the <a href="#gravity">-gravity</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="frame_import_"></a>-frame</h2>
</div>
<p class="lead">Include the X window frame in the imported image. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="function"></a>-function <var>function</var> <var>parameters</var></h2>
</div>
@@ -4359,7 +4472,7 @@ All these values can be adjusted via the arguments.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="fuzz"></a>-fuzz <var>distance</var>{<var>%</var>}</h2>
</div>
@@ -4379,7 +4492,7 @@ appending <code>%</code> as a percentage of the maximum possible intensity (255,
<p>Use <a href="#fuzz" >+fuzz</a> to reset the fuzz value to 0.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="fx"></a>-fx <var>expression</var></h2>
</div>
@@ -4394,8 +4507,8 @@ The Special Effects Image Operator</a> for a detailed discussion of this
option.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="gamma"></a>-gamma <var>value</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-g" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="gamma"></a>-gamma <var>value</var></h2>
</div>
<p class="lead">Level of gamma correction.</p>
@@ -4427,7 +4540,7 @@ chunk, use</p>
<p>Note that gamma adjustments are also available via the <a href="#level">-level</a> operator.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="gaussian-blur"></a>-gaussian-blur <var>radius</var><br />-gaussian-blur <var>radius</var>{x<var>sigma</var>}</h2>
</div>
@@ -4462,7 +4575,7 @@ pixels which are outside the image proper are blurred into the final result.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="geometry"></a>-geometry <var>geometry</var></h2>
</div>
@@ -4470,7 +4583,7 @@ pixels which are outside the image proper are blurred into the final result.
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="gravity"></a>-gravity <var>type</var></h2>
</div>
@@ -4524,7 +4637,7 @@ within a tile. The default gravity is <code>Center</code> for this purpose.</p>
<p>Use <a href="#gravity">+gravity</a> to return gravity to its default value.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="grayscale"></a>-grayscale <var>method</var></h2>
</div>
@@ -4540,9 +4653,7 @@ convert the given image into a grayscale image. </p>
<p>which is equivalent to:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">
-<pre><samp>$ magick in.png -colorspace LinearGray out.png</samp></pre>
-</pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick in.png -colorspace LinearGray out.png</samp></pre>
<p>Similarly, to convert an image to (non-linear) Rec709Luma grayscale, type:</p>
@@ -4564,15 +4675,15 @@ it does not use or set the <a href="#intensity" >-intensity</a> setting, so
will not affect other operations that may use that setting.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="green-primary"></a>-green-primary <var>x,y</var></h2>
</div>
<p class="lead">Green chromaticity primary point.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="hald-clut"></a>-hald-clut</h2>
+<div class="option-heading">
+ <h2><span id="letter-h" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="hald-clut"></a>-hald-clut</h2>
</div>
<p class="lead">Apply a Hald color lookup table to the image.</p>
@@ -4601,19 +4712,19 @@ image. E.g: grayscale to color replacement, or modification by a histogram
mapping. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="help"></a>-help</h2>
</div>
<p class="lead">Print usage instructions.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="highlight-color"></a>-highlight-color <var>color</var></h2>
</div>
<p class="lead">When comparing images, emphasize pixel differences with this color.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="hough-lines"></a>-hough-lines <var>width</var>x<var>height</var>{<var>+threshold</var>}</h2>
</div>
@@ -4635,8 +4746,8 @@ mapping. </p>
<p>Use <code><a href="#define" >-define</a> hough-lines:accumulator=true</code> to return the accumulator image in addition to the lines image.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="iconGeometry"></a>-iconGeometry <var>geometry</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-i" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="iconGeometry"></a>-iconGeometry <var>geometry</var></h2>
</div>
<p class="lead">Specify the icon geometry.</p>
@@ -4647,13 +4758,13 @@ handle negative offsets.</p>
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="iconic"></a>-iconic</h2>
</div>
<p class="lead">Start in icon mode in X Windows", 'animate', 'display</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="identify"></a>-identify</h2>
</div>
@@ -4684,7 +4795,7 @@ reduction algorithm</a> for a description of these values.</p>
amounts of image properties are displayed including image statistics, profiles,
image histogram, and others.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="ift"></a>-ift</h2>
</div>
@@ -4723,25 +4834,25 @@ and imaginary images from the frequency domain to a single image in the normal
<p>By default the IFT is not normalized (and the FFT is). Use "<code><a href="#define" >-define</a> fourier:normalize=inverse</code> to explicitly normalize the IFT and unnormalize the FFT.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="illuminant"></a>-illuminant <var>method</var></h2>
</div>
<p class="lead">reference illuminant. Choose from <code>A</code>, <code>B</code>, <code>C</code>, <code>D50</code>, <code>D55</code>, <code>D65</code>, <code>E</code>, <code>F2</code>, <code>F7</code>, or <code>F11</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="immutable"></a>-immutable</h2>
</div>
<p class="lead">Make image immutable.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="implode"></a>-implode <var>factor</var></h2>
</div>
<p class="lead">Implode image pixels about the center.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="insert"></a>-insert <var>index</var></h2>
</div>
@@ -4756,7 +4867,7 @@ calculated before the last image is removed from the sequence. As such
other words, insert the last image, at the end of the current image sequence.
Consequently this has no effect on the image sequence order.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="intensity"></a>-intensity <var>method</var></h2>
</div>
@@ -4838,7 +4949,7 @@ function.</p>
-white-threshold
</code></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="intent"></a>-intent <var>type</var></h2>
</div>
@@ -4852,7 +4963,7 @@ Perceptual, Relative, Saturation</code>.</p>
<p>To print a complete list of rendering intents, use <a href="#list">-list intent</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="interlace"></a>-interlace <var>type</var></h2>
</div>
@@ -4888,13 +4999,13 @@ PNG</code> or <code>GIF</code> or <code>progressive JPEG</code> image.</p>
interlace</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="interline-spacing"></a>-interline-spacing <var>value</var></h2>
</div>
<p class="lead">The space between two text lines.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="interpolate"></a>-interpolate <var>type</var></h2>
</div>
@@ -4935,7 +5046,7 @@ point that falls between two, or even four different colored pixels. </p>
</dl>
</div>
-<p>This most important for distortion operators such as <a href="#distort"
+<p>This is most important for distortion operators such as <a href="#distort"
>-distort</a>, <a href="#implode" >-implode</a>, <a href="#transform"
>-transform</a> and <a href="#fx" >-fx</a>. </p>
@@ -4944,37 +5055,37 @@ point that falls between two, or even four different colored pixels. </p>
<p>See also <a href="#virtual-pixel" >-virtual-pixel</a>, for control of the
lookup for positions outside the boundaries of the image. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="interpolative-resize"></a>-interpolative-resize <var>geometry</var></h2>
</div>
<p class="lead">Resize with interpolation. See the <a href="#interpolate">-interpolate</a> setting.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="interword-spacing"></a>-interword-spacing <var>value</var></h2>
</div>
<p class="lead">The space between two words.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="integral"></a>-integral</h2>
</div>
<p class="lead">Calculate the sum of values (pixel values) in the image.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="kerning"></a>-kerning <var>value</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-k" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="kerning"></a>-kerning <var>value</var></h2>
</div>
<p class="lead">The space between two letters.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="kmeans"></a>-kmeans <var>colors</var>{x<var>iterations</var>}{+<var>tolerance</var>}</h2>
</div>
<p class="lead">Kmeans (iterative) color reduction (e.g. <code>-kmeans 5x300+0.0001</code>). Colors is the desired number of colors. Initial colors are found using color quantization. Iterations is the stopping number of iterations (default=300). Convergence is the stopping threshold on the color change between iterations (default=0.0001). Processing finishes, if either iterations or tolerance are reached. Use <code>-define kmeans:seed-colors=<var>color-list</var></code> to initialize the colors, where color-list is a semicolon delimited list of seed colors (e.g. <code>-define kmeans:seed-colors="red;sRGB(19,167,254);#00ffff</code>). A color list overrides the color quantization. A non-empty list of colors overrides the number of colors. Any unassigned initial colors are assigned random colors from the image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="kuwahara"></a>-kuwahara <var>radius</var><br />-kuwahara <var>radius</var>{x<var>sigma</var>}</h2>
</div>
@@ -4983,8 +5094,8 @@ lookup for positions outside the boundaries of the image. </p>
<p>The <var >radius</var> is more important than the <var >sigma</var>. If <var >sigma</var> is left off, it will be computed automatically from the <var >radius</var> as <var >sigma</var>=<var >radius</var>-0.5. The <var >sigma</var> provides a bit of additional smoothing control.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="label"></a>-label <var>name</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-l" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="label"></a>-label <var>name</var></h2>
</div>
<p class="lead">Assign a label to an image.</p>
@@ -5023,7 +5134,7 @@ remaining characters in the string. Labels in a file are literal, no embedded
formatting characters are recognized.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="lat"></a>-lat <var>width</var><br />-lat <var>width</var>x<var>height</var>{<var>+-</var>}<var>offset</var>{<var>%</var>}</h2>
</div>
@@ -5041,7 +5152,7 @@ based on the assumption that average color of the small window is the
the local background color, from which to separate the foreground color. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="layers"></a>-layers <var>method</var></h2>
</div>
@@ -5319,7 +5430,7 @@ GIF <a href="#dispose" >-dispose</a> and <a href="#delay" >-delay</a>
settings. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="level"></a>-level <var>black_point</var>{,<var>white_point</var>}{<var>%</var>}{,<var>gamma</var>}</h2>
</div>
@@ -5357,7 +5468,7 @@ limit the effect of this operator. </p>
values (0 is opaque) and not as 'alpha' values (0 is transparent).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="level-colors"></a>-level-colors {<var>black_color</var>}{,}{<var>white_color</var>}</h2>
</div>
@@ -5387,7 +5498,7 @@ threshold the images around that color (- form) or set all colors to that
color (+ form). </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="limit"></a>-limit <var>type value</var></h2>
</div>
@@ -5492,7 +5603,7 @@ through <code>grep memory|open|destroy|disk</code> for more readable sifting.
<p>For more about ImageMagick's use of resources, see the section <b>Cache
Storage and Resource Requirements</b> on the <a href="../architecture/index.html#cache">Architecture</a> page. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="linear-stretch"></a>-linear-stretch <var>black-point</var><br />-linear-stretch <var>black-point</var>{x<var>white-point</var>}{<var>%</var>}</h2>
</div>
@@ -5517,13 +5628,13 @@ normalization of mathematical images. </p>
<p>This operator is under review for re-development. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="linewidth"></a>-linewidth</h2>
</div>
<p class="lead">The line width for subsequent draw operations.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="liquid-rescale"></a>-liquid-rescale <var>geometry</var></h2>
</div>
@@ -5531,7 +5642,7 @@ normalization of mathematical images. </p>
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="list"></a>-list <var>type</var></h2>
</div>
@@ -5617,7 +5728,7 @@ available:</p>
<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -list list
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="log"></a>-log <var>string</var></h2>
</div>
@@ -5653,7 +5764,7 @@ characters:</p>
<p>The default behavior is to print all of the components.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="loop"></a>-loop <var>iterations</var></h2>
</div>
@@ -5663,20 +5774,20 @@ characters:</p>
otherwise the animation repeats itself up to <var>iterations</var>
times.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="lowlight-color"></a>-lowlight-color <var>color</var></h2>
</div>
<p class="lead">When comparing images, de-emphasize pixel differences with this color.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="magnify"></a>-magnify</h2>
+<div class="option-heading">
+ <h2><span id="letter-m" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="magnify"></a>-magnify</h2>
</div>
<p class="lead">Double or triple the size of the image with pixel art scaling. Specify an alternative scaling method with <code>-define magnify:method=<var>method</var></code> Choose from these methods: <code>eagle2X, eagle3X, eagle3XB, epb2X, fish2X, hq2X, scale2X, scale3X, xbr2X</code>. The default is scale2X.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="map"></a>-map <var>type</var></h2>
</div>
@@ -5698,7 +5809,7 @@ the type and <code>display</code> searches the list of colormap types in
<code>top-to-bottom</code> order until one is located. See <var>xstdcmap(1)</var> for one way of creating Standard Colormaps.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="map_stream_"></a>-map <var>components</var></h2>
</div>
@@ -5726,7 +5837,7 @@ the type and <code>display</code> searches the list of colormap types in
bgr). The components can repeat as well (e.g. rgbr).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="mattecolor"></a>-mattecolor <var>color</var></h2>
</div>
@@ -5737,7 +5848,7 @@ bgr). The components can repeat as well (e.g. rgbr).</p>
<p>The default matte color is <code>#BDBDBD</code>, <span
style="background-color: #bdbdbd;">this shade of gray</span>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="maximum"></a>-maximum</h2>
</div>
@@ -5748,7 +5859,7 @@ style="background-color: #bdbdbd;">this shade of gray</span>.</p>
<p>This is legacy option from the <a href="#statistic" >method</a> of the same
name. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="median"></a>-median <var>geometry</var></h2>
</div>
@@ -5759,7 +5870,7 @@ name. </p>
<p>This is legacy option from the <a href="#statistic" >method</a> of the same
name. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="mean-shift"></a>-mean-shift <var>width</var>x<var>height</var>{<var>+distance</var>{%}</h2>
</div>
@@ -5769,7 +5880,7 @@ name. </p>
<p>The mean shift algorithm is iterative and thus slower the larger the window size. For each pixel, it gets all the pixels in the window centered at the pixel and excludes those that are outside the <var>radius=sqrt((width-1)(height-1)/4)</var> surrounding the pixel. From those pixels, it finds which of them are within the specified squared color distance from the current mean. It then computes a new x,y centroid from those coordinates and a new mean. This new x,y centroid is used as the center for a new window. This process is iterated until it converges and the final mean is then used to replace the original pixel value. It repeats this process for the next pixel, etc, until it processes all pixels in the image. Results are better when using other colorspaces rather than RGB. Recommend YIQ, YUV or YCbCr, which seem to give equivalent results.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="metric"></a>-metric <var>type</var></h2>
</div>
@@ -5815,7 +5926,7 @@ normalized) from a single comparison run. </p>
metric</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="minimum"></a>-minimum</h2>
</div>
@@ -5828,13 +5939,13 @@ name. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="mode"></a>-mode <var>geometry</var></h2>
</div>
<p class="lead">Make each pixel the \'predominant color\' of the neighborhood.'</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2>-mode <var>value</var></h2>
</div>
@@ -5848,7 +5959,7 @@ for a list of <a href="#mode" >-mode</a> arguments available in your
ImageMagick installation.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="modulate"></a>-modulate <var>brightness</var>[,<var>saturation</var>,<var>hue</var>]</h2>
</div>
@@ -5883,27 +5994,27 @@ modulate. Choose from <code>HCL</code>, <code>HCLp</code>, <code>HSB</code>, <c
<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick image.png -set option:modulate:colorspace hsb -modulate 120,90 modulate.png
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="moments"></a>-moments</h2>
</div>
<p class="lead">Report image moments and perceptual hash.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="monitor"></a>-monitor</h2>
</div>
<p class="lead">Monitor progress.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="monochrome"></a>-monochrome</h2>
</div>
<p class="lead">Transform the image to black and white.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="morph"></a>-morph <var>frames</var></h2>
</div>
@@ -5916,7 +6027,7 @@ href="#blend">-blend</a> composition. The <var>frames</var>
argument determine how many images to interpolate between each image. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="morphology"></a>-morphology</h2>
<h2>-morphology <var>method</var> <var>kernel</var></h2>
</div>
@@ -5926,14 +6037,14 @@ argument determine how many images to interpolate between each image. </p>
<p>See <a href="https://usage.imagemagick.org/morphology/" >IM Usage Examples, Morphology</a>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="mosaic"></a>-mosaic</h2>
</div>
<p class="lead">A simple alias for the <a href="#layers" >-layers</a> method "mosaic"</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="motion-blur"></a>-motion-blur <var>radius</var><br />-motion-blur <var>radius</var>{x<var>sigma</var>}+<var>angle</var></h2>
</div>
@@ -5950,12 +6061,12 @@ definite sense of direction of movement. </p>
pixels which are outside the image proper are blurred into the final result.
</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="name"></a>-name</h2>
+<div class="option-heading">
+ <h2><span id="letter-n" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="name"></a>-name</h2>
</div>
<p class="lead">Name an image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="negate"></a>-negate</h2>
</div>
@@ -5965,7 +6076,7 @@ pixels which are outside the image proper are blurred into the final result.
black, yellow becomes blue, etc. Use <a href="#negate">+negate</a> to only
negate the grayscale pixels of the image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="noise"></a>-noise <var>geometry</var><br/>
+noise <var>type</var></h2>
</div>
@@ -6009,7 +6120,7 @@ the use of a controlling value to specify the amount of noise that should be
added to an image. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="normalize"></a>-normalize</h2>
</div>
@@ -6036,8 +6147,8 @@ that is better suited to mathematically generated images. </p>
<p>This operator is under review for re-development. </p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="opaque"></a>-opaque <var>color</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-o" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="opaque"></a>-opaque <var>color</var></h2>
</div>
<p class="lead">Change this color to the fill color within the image.</p>
@@ -6059,7 +6170,7 @@ the new transparent colors, and does not require you to modify the <a
href="#channel">-channel</a> to enable alpha channel handling. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="ordered-dither"></a>-ordered-dither <var>threshold_map</var>{,<var>level</var>...}</h2>
</div>
@@ -6118,7 +6229,7 @@ looking. Large dots can be made to look better with a small amount of blurring
after being created. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="orient"></a>-orient <var>image orientation</var></h2>
</div>
@@ -6147,8 +6258,8 @@ after being created. </p>
orientation</a> option.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="page"></a>-page <var>geometry</var><br/>
+<div class="option-heading">
+ <h2><span id="letter-p" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="page"></a>-page <var>geometry</var><br/>
-page <var>media</var>[<var>offset</var>][{<var>^!<></var>}]<br/>
+page
</h2>
@@ -6164,7 +6275,7 @@ href="#page">-page</a> <code>Letter+43+43</code>).</p>
<p>Use <var>media</var> as shorthand to specify the dimensions (<var>width</var>x<var>height</var>) of the <var>PostScript</var> page in dots per inch or a TEXT page in pixels.
The choices for paper sizes are: <code>4x6</code>, <code>5x7</code>, <code>7x9</code>, <code>8x10</code>, <code>9x11</code>, <code>9x12</code>, <code>10x13</code>, <code>10x14</code>, <code>11x17</code>, <code>4A0</code>, <code>2A0</code>, <code>a0</code>, <code>a1</code>, <code>a2</code>, <code>a3</code>, <code>a4</code>, <code>a4small</code>, <code>a5</code>, <code>a6</code>, <code>a7</code>, <code>a8</code>, <code>a9</code>, <code>a10</code>, <code>archa</code>, <code>archb</code>, <code>archC</code>, <code>archd</code>, <code>arche</code>, <code>b0</code>, <code>b1</code>, <code>b10</code>, <code>b2</code>, <code>b3</code>, <code>b4</code>, <code>b5</code>, <code>b6</code>, <code>b7</code>, <code>b8</code>, <code>b9</code>, <code>c0</code>, <code>c1</code>, <code>c2</code>, <code>c3</code>, <code>c4</code>, <code>c5</code>, <code>c6</code>, <code>c7</code>, <code>csheet</code>, <code>dsheet</code>, <code>esheet</code>, <code>executive</code>, <code>flsa</code>, <code>flse</code>, <code>folio</code>, <code>halfletter</code>, <code>isob0</code>, <code>isob1</code>, <code>isob10</code>, <code>isob2</code>, <code>isob3</code>, <code>isob4</code>, <code>isob5</code>, <code>isob6</code>, <code>isob7</code>, <code>isob8</code>, <code>isob9</code>, <code>jisb0</code>, <code>jisb1</code>, <code>jisb2</code>, <code>jisb3</code>, <code>jisb4</code>, <code>jisb5</code>, <code>jisb6</code>, <code>ledger</code>, <code>legal</code>, <code>letter</code>, <code>lettersmall</code>, <code>monarch</code>, <code>quarto</code>, <code>statement</code>, <code>tabloid</code>. To determine the corresponding size in pixels at 72DPI, use this command for example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick xc: -format "%[papersize:a4]" info:</samp></pre></pre>
+<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick xc: -format "%[papersize:a4]" info:</samp></pre>
<p>This option is also used to place subimages when writing to a multi-image
format that supports offsets, such as GIF89 and MNG. When used for this
@@ -6195,7 +6306,7 @@ present with a value other than <var>NorthWest</var>.</p>
<p>To print a complete list of pagesizes, use <a href="#list">-list pagesize</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="paint"></a>-paint <var>radius</var></h2>
</div>
@@ -6204,12 +6315,12 @@ present with a value other than <var>NorthWest</var>.</p>
<p>Each pixel is replaced by the most frequent color in a circular
neighborhood whose width is specified with <var>radius</var>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="path"></a>-path <var>path</var></h2></div>
<p class="lead">Write images to this path on disk.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="pause_animate_"></a>-pause <var>seconds</var></h2>
</div>
@@ -6217,7 +6328,7 @@ neighborhood whose width is specified with <var>radius</var>.</p>
<p>Pause for the specified number of seconds before repeating the animation.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="pause_import_"></a>-pause <var>seconds</var></h2>
</div>
@@ -6225,25 +6336,25 @@ neighborhood whose width is specified with <var>radius</var>.</p>
<p>Pause for the specified number of seconds before taking the next snapshot.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="perceptible"></a>-perceptible <var>epsilon</var></h2>
</div>
<p class="lead">Set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="ping"></a>-ping</h2>
</div>
<p class="lead">Efficiently determine these image characteristics: image number, the file name, the width and height of the image, whether the image is colormapped or not, the number of colors in the image, the number of bytes in the image, the format of the image (JPEG, PNM, etc.). Use <code>+ping</code> to ensure accurate image properties.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="pointsize"></a>-pointsize <var>value</var></h2>
</div>
<p class="lead">Pointsize of the PostScript, X11, or TrueType font.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="polaroid"></a>-polaroid <var>angle</var></h2>
</div>
@@ -6251,7 +6362,7 @@ neighborhood whose width is specified with <var>radius</var>.</p>
<p>Use <code>+polaroid</code> to rotate the image at a random angle between -15 and +15 degrees.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="poly"></a>-poly <var>"wt,exp ..."</var></h2>
</div>
@@ -6274,7 +6385,7 @@ neighborhood whose width is specified with <var>radius</var>.</p>
<p>Similarly one may add white to the expression by simply using null: (or xc:white) for one of the images with the appropriate weight and exponent equal to 0.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="posterize"></a>-posterize <var>levels</var></h2>
</div>
@@ -6283,13 +6394,13 @@ neighborhood whose width is specified with <var>radius</var>.</p>
<p>Very low values of <var>levels</var>, e.g., 2, 3, 4, have the most
visible effect.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="precision"></a>-precision <var>value</var></h2>
</div>
<p class="lead">Set the maximum number of significant digits to be printed.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="preview"></a>-preview <var>type</var></h2>
</div>
@@ -6335,13 +6446,13 @@ Wave
<p>The default preview is <code>JPEG</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="print"></a>-print <var>string</var></h2>
</div>
<p class="lead">Interpret string and print to console.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="process"></a>-process <var>command</var></h2>
</div>
@@ -6352,7 +6463,7 @@ argN"</code> where <code>module</code> is the name of the module to invoke (e.g.
"Analyze") and arg1 arg2 arg3 ... argN are an arbitrary number of arguments to
pass to the process module.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="profile"></a>-profile <var>filename</var><br/>
+profile <var>profile_name</var></h2>
</div>
@@ -6399,8 +6510,8 @@ conversion steps can yield unwanted results. CMYK profiles are often very
asymmetric since they involve 3−>4 and 4−>3 channel mapping.
</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="quality"></a>-quality <var>value</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-q" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="quality"></a>-quality <var>value</var></h2>
</div>
<p class="lead">control the compression quality of JPEG, PNG, HEIC, and WebP image files when you are creating or saving them. This option is important for managing the trade-off between image quality and file size.</p>
@@ -6478,7 +6589,7 @@ the <a href="http://www.w3.org/pub/WWW/TR">PNG</a> specification.</p>
<p>For the BPG image format, quality/2 is the actual BPG compression level (range from 0 to 51).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="quantize"></a>-quantize <var>colorspace</var></h2>
</div>
@@ -6491,7 +6602,7 @@ automatically when saving images to color-limited image file formats, such as
GIF, and PNG8.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="quiet"></a>-quiet</h2>
</div>
@@ -6502,8 +6613,8 @@ pixels which are outside the image proper are blurred into the final result.
</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="raise"></a>-raise <var>thickness</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-r" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="raise"></a>-raise <var>thickness</var></h2>
</div>
<p class="lead">Lighten or darken image edges.</p>
@@ -6514,26 +6625,26 @@ a raised effect, otherwise use <a href="#raise">+raise</a>. </p>
<p>Unlike the similar <a href="#frame">-frame</a> option, <a
href="#raise">-raise</a> does not alter the dimensions of the image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="random-threshold"></a>-random-threshold <var>low</var>x<var>high</var></h2>
</div>
<p class="lead">Apply a random threshold to the image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="range-threshold"></a>-range-threshold <var>low-black</var>,<var>low-white</var>,<var>high-white</var>,<var>high-black</var></h2>
</div>
<p class="lead">Perform either hard or soft thresholding within some range of values in an image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="read"></a>-read <var>filename</var></h2>
</div>
<p class="lead">Explicit read of an image rather than an implicit read.</p>
<p>This option allows you to read from filenames that start with an 'option' character, and which otherwise could be mistaken as an option (unknown or otherwise).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="read-mask"></a>-read-mask <var>filename</var></h2>
</div>
@@ -6548,13 +6659,13 @@ grayscale values causing blended updates of the image the mask is attached to.
<p>Also see <a href="#clip-mask">-clip-mask</a> which work in the same way,
but with strict boolean masking. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="red-primary"></a>-red-primary <var>x,y</var></h2>
</div>
<p class="lead">Set the red chromaticity primary point.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="regard-warnings"></a>-regard-warnings</h2>
</div>
@@ -6563,7 +6674,7 @@ but with strict boolean masking. </p>
<p>This option causes some warnings in some image formats to be treated
as errors. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="remap"></a>-remap <var>filename</var></h2>
</div>
@@ -6595,7 +6706,7 @@ reduce the number of colors in an animated image sequence. </p>
<p>Note, the remap image colormap has at most 8-bits of precision. Deeper color maps are automagically coalesced with other colors to meet this requirement.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="region"></a>-region <var>geometry</var></h2>
</div>
@@ -6608,7 +6719,7 @@ in the same manner as in <a href="#crop">-crop</a>.</p>
<p>Use <code>+region</code> to remove any previously set regions.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="remote"></a>-remote</h2>
</div>
@@ -6620,7 +6731,7 @@ in the same manner as in <a href="#crop">-crop</a>.</p>
running simultaneously, use the <a href="#window"> window</a> option to
specify which application to control.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="render"></a>-render</h2>
</div>
@@ -6629,7 +6740,7 @@ specify which application to control.</p>
<p>Use <a href="#render">+render</a> to turn off rendering vector operations.
This is useful when saving the result to vector formats such as MVG or SVG.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="repage"></a>-repage <var>geometry</var></h2>
</div>
@@ -6656,7 +6767,7 @@ canvas meta-data from the images. </p>
directly assign virtual canvas meta-data. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="resample"></a>-resample <var>horizontal</var>x<var>vertical</var></h2>
</div>
@@ -6677,13 +6788,13 @@ embedded profile. If this profile exists in the image, then Photoshop will
continue to treat the image using its former resolution, ignoring the image
resolution specified in the standard file header.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="reshape"></a>-reshape <var>geometry</var></h2>
</div>
<p class="lead">Reshape an image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="resize"></a>-resize <var>geometry</var></h2>
</div>
@@ -6707,20 +6818,20 @@ correction, apply the transform, then restore it like this:</p>
<p>Note, some resampling functions are damped oscillations in approximation of a Sinc function. As such, you may get negative lobes if your release of ImageMagick is HDRI-enabled. To eliminate them, add <a href="#clamp">-clamp</a> to your command-line.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="respect-parentheses"></a>-respect-parentheses</h2>
</div>
<p class="lead">Settings remain in effect until parenthesis boundary.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="reverse"></a>-reverse</h2>
</div>
<p class="lead">Reverse the order of images in the current image list.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="roll"></a>-roll {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></h2>
</div>
@@ -6730,7 +6841,7 @@ correction, apply the transform, then restore it like this:</p>
A negative <var>y</var> offset rolls the image bottom-to-top.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="rotate"></a>-rotate <var>degrees</var>{<var><</var>}{<var>></var>}</h2>
</div>
@@ -6752,7 +6863,7 @@ filled with the <code>background</code> color. </p>
<p>The page or virtual canvas information of the image is also rotated. Use a <a href="#repage">+repage</a> to remove the virtual canvas page information if it is unwanted.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="rotational-blur"></a>-rotational-blur <var>angle</var></h2>
</div>
@@ -6760,8 +6871,8 @@ filled with the <code>background</code> color. </p>
<p>This operation used to be called "-radial-blur".</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="sample"></a>-sample <var>geometry</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-s" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="sample"></a>-sample <var>geometry</var></h2>
</div>
<p class="lead">Minify / magnify the image with pixel subsampling and pixel replication, respectively.</p>
@@ -6797,7 +6908,7 @@ separate X and Y offsets such as '<code>0x50</code>' for left-middle edge of
sampling sub-region.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="sampling-factor"></a>-sampling-factor <var>horizontal-factor</var>x<var>vertical-factor</var></h2>
</div>
@@ -6811,7 +6922,7 @@ href="#sampling-factor">-sampling-factor 2x1</a> or <a
href="#sampling-factor">-sampling-factor 4:2:2</a> to specify the 4:2:2
downsampling method.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="scale"></a>-scale <var>geometry</var></h2>
</div>
@@ -6833,7 +6944,7 @@ noise in image such as those generated by digital cameras, especially in low
light conditions. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="scene"></a>-scene <var>value</var></h2>
</div>
@@ -6842,7 +6953,7 @@ light conditions. </p>
<p>This option sets the scene number of an image or the first image in an image sequence.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="screen"></a>-screen</h2>
</div>
@@ -6854,19 +6965,19 @@ window. In this way, you can obtain pieces of other windows that overlap the
specified window, and more importantly, you can capture menus or other popups
that are independent windows but appear over the specified window.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="script"></a>-script <var>filename</var></h2>
</div>
<p class="lead">Transfer control to the named file.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="seed"></a>-seed</h2>
</div>
<p class="lead">Seed a new sequence of pseudo-random numbers</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="segment"></a>-segment <var>cluster-threshold</var>x<var>smoothing-threshold</var></h2>
</div>
@@ -6886,7 +6997,7 @@ a smoother second derivative. The default is 1.5.</p>
of the color clusters is returned.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="selective-blur"></a>-selective-blur <var>radius</var><br />-selective-blur <var>radius</var>{x<var>sigma</var>}{<var>+threshold</var>}</h2>
</div>
@@ -6905,13 +7016,13 @@ radius that will provide meaningful results for the Gaussian distribution.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="separate"></a>-separate</h2>
</div>
<p class="lead">Separate an image channel into a grayscale image. Specify the channel with <a href="#channel">-channel</a>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="sepia-tone"></a>-sepia-tone <var>percent-threshold</var></h2>
</div>
@@ -6926,7 +7037,7 @@ tone.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="set"></a>-set <var>key value</var></h2>
<h2>+set <var>key</var></h2>
</div>
@@ -7037,7 +7148,7 @@ subsequent profiles from overwriting the preceding ones, e.g.,</p>
-profile PNG-chunk-b02:file02 out.png
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="shade"></a>-shade <var>azimuth</var>x<var>elevation</var></h2>
</div>
@@ -7047,13 +7158,13 @@ subsequent profiles from overwriting the preceding ones, e.g.,</p>
the position of the light source. Use <a href="#shade">+shade</a> to return
the shading results as a grayscale image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="shadow"></a>-shadow <var>percent-opacity</var>{x<var>sigma</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var>{<var>%</var>}</h2>
</div>
<p class="lead">Simulate an image shadow.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a
id="shared-memory"></a>-shared-memory</h2>
</div>
@@ -7065,7 +7176,7 @@ memory for pixmaps. ImageMagick must be compiled with shared memory support,
and the display must support the <var>MIT-SHM</var> extension.
Otherwise, this option is ignored. The default is <code>True</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="sharpen"></a>-sharpen <var>radius</var><br />-sharpen <var>radius</var>{x<var>sigma</var>}</h2>
</div>
@@ -7082,7 +7193,7 @@ integer. If not given, or set to zero, IM will calculate the largest possible
radius that will provide meaningful results for the Gaussian distribution.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="shave"></a>-shave <var>geometry</var></h2>
</div>
@@ -7095,7 +7206,7 @@ Offsets are ignored.</p>
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="shear"></a>-shear <var>Xdegrees</var>[x<var>Ydegrees</var>]</h2>
</div>
@@ -7132,7 +7243,26 @@ a smaller image, and so is a better choice in terms of time and space.</p>
<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -shear 20x60 logo-sheared.png
</samp></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
+ <h2><a class="anchor" id="shuffle"></a>-shuffle <var>mode</var>]</h2>
+</div>
+
+<p class="lead">Reorders the sequence of images in an image list based on <code>ascending</code>, <code>descending</code>, or <code>random</code> mode.</p>
+
+<p>This operator rearranges the order of images in the current image sequence according to the specified mode, allowing you to sort frames in ascending or descending order or mix them up entirely at random. This provides a built-in mechanism for batch-processing frames, testing animations, or randomizing image layouts directly within your command-line workflows without needing external scripting.</p>
+
+<p>Choose from these strategies:</p>
+
+<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
+<dl class="row">
+<dt class="col-md-4">Undefined</dt><dd class="col-md-8">0: No strategy specified (equivalent to '<code>random</code>').</dd>
+<dt class="col-md-4">Ascending</dt><dd class="col-md-8">Sort the images by filename in alphabetical order.</dd>
+<dt class="col-md-4">Descending</dt><dd class="col-md-8">Sort the images by filename in reverse alphabetical order.</dd>
+<dt class="col-md-4">Random</dt><dd class="col-md-8">Shuffle the positions of the images into a completely randomized order.</dd>
+</dl>
+</div>
+
+<div class="option-heading">
<h2><a class="anchor" id="sigmoidal-contrast"></a>-sigmoidal-contrast <var>contrast</var>x<var>mid-point</var></h2>
</div>
@@ -7160,7 +7290,7 @@ Note the use of '0' for the mid-point of the sigmoidal curve. </p>
effects) of a true threshold, but with tapered gray-levels around the threshold
<var>mid-point</var>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="silent"></a>-silent</h2>
@@ -7169,7 +7299,7 @@ effects) of a true threshold, but with tapered gray-levels around the threshold
<p class="lead">Operate silently. This option is only used
by the <a href="../import/index.html">import</a> tool.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="similarity-threshold"></a>-similarity-threshold <var>value</var></h2>
</div>
@@ -7177,7 +7307,7 @@ by the <a href="../import/index.html">import</a> tool.</p>
<p>If this setting is used, then the search will stop as soon as it finds a match whose metric is less than or equal to the value. A partially filled second output image will result. Using a value of zero, will cause the search to stop at the first perfect match it finds. If this setting is left off, then the search will proceed to completion or as limited by <var>-dissimilarity-threshold</var>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="size"></a>-size <var>width</var>[x<var>height</var>][<var>+offset</var>]</h2>
</div>
@@ -7199,7 +7329,7 @@ image or tell the number of colors in a <code>MAP</code> image file, (e.g. -size
3072x2048
</code></pre>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="sketch"></a>-sketch <var>radius</var><br />-sketch <var>radius</var>{x<var>sigma</var>}+<var>angle</var></h2>
</div>
@@ -7209,7 +7339,7 @@ image or tell the number of colors in a <code>MAP</code> image file, (e.g. -size
angle given is the angle toward which the image is sketched. That is the
direction people would consider the object is coming from. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="smush"></a>-smush <var>offset</var></h2>
</div>
@@ -7223,7 +7353,7 @@ direction people would consider the object is coming from. </p>
<p>For zero offset and transparent images, the non-transparent parts of the two images will be aligned as close as possible without overlapping.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="snaps"></a>-snaps <var>value</var></h2>
</div>
@@ -7231,7 +7361,7 @@ direction people would consider the object is coming from. </p>
<p>Use this option to grab more than one image from the X server screen, to create an animation sequence.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="solarize"></a>-solarize <var>percent-threshold</var></h2>
</div>
@@ -7242,13 +7372,13 @@ direction people would consider the object is coming from. </p>
<p>This option produces a <var>solarization</var> effect seen when
exposing a photographic film to light during the development process.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="sort-pixels"></a>-sort-pixels</h2>
</div>
<p class="lead">sorts pixels within each scanline in ascending order of intensity.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="sparse-color"></a>-sparse-color <var>method</var> '<var>x</var>,<var>y</var> <var>color</var> ...'</h2>
</div>
@@ -7303,12 +7433,16 @@ logical, and provides an alternative technique to recolor an image to some
default value. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="splice"></a>-splice <var>geometry</var></h2>
</div>
<p class="lead">Splice the current background color into the image.</p>
+<p>Specify both dimensions explicitly: for example, <code>-splice 3x3</code>
+adds three columns and three rows. A single value such as <code>-splice 3</code>
+does not mean <code>3x3</code>; the omitted height depends on the page geometry.</p>
+
<p>This will add rows and columns of the current <a
href="#background">-background</a> color into the given image according to the
given <a href="#gravity">-gravity</a> geometry setting. See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument. Essentially <a href="#splice">-splice</a> will divide the
@@ -7325,7 +7459,7 @@ href="#splice">-splice</a> is most commonly used for. </p>
href="#gravity">-gravity</a> is later used with <a href="#chop">-chop</a> the
added all splices removed. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="spread"></a>-spread <var>amount</var></h2>
</div>
@@ -7337,7 +7471,7 @@ blend.</p>
<p>The lookup is controlled by the <a href="#interpolate">-interpolate</a> setting.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="statistic"></a>-statistic <var>type</var> <var>geometry</var></h2>
</div>
@@ -7361,7 +7495,7 @@ blend.</p>
</dl>
</div>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="stegano"></a>-stegano <var>offset</var></h2>
</div>
@@ -7372,7 +7506,7 @@ beginning of the image. Note this offset and the image size. You will need
this information to recover the steganographic image (e.g. display -size
320x256+35 stegano:image.png).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="stereo"></a>-stereo <var>+x</var>{<var>+y</var>}</h2>
</div>
@@ -7380,7 +7514,7 @@ this information to recover the steganographic image (e.g. display -size
<p>The left side of the stereo pair (second image) is saved as the red channel of the output image. The right side (first image) is saved as the green and blue channels. Red-green stereo glasses are required to properly view the stereo image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="storage-type"></a>-storage-type <var>type</var></h2>
</div>
@@ -7401,7 +7535,7 @@ this information to recover the steganographic image (e.g. display -size
<p>Float and double types are normalized from 0.0 to 1.0 otherwise the pixels
values range from 0 to the maximum value the storage type can support.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="stretch"></a>-stretch <var>fontStretch</var></h2>
</div>
@@ -7429,13 +7563,13 @@ stretch</a>.</p>
href="#font">-font</a>, <a href="#family">-family</a>, <a
href="#style">-style</a>, and <a href="#weight">-weight</a>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="strip"></a>-strip</h2>
</div>
<p class="lead">Strip the image of any profiles, comments or these PNG chunks: bKGD,cHRM,EXIF,gAMA,iCCP,iTXt,sRGB,tEXt,zCCP,zTXt,date. To remove the orientation chunk, <code>orNT</code>, set the orientation to undefined, e.g., <code>-orient Undefined</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="stroke"></a>-stroke <var>color</var></h2>
</div>
@@ -7445,7 +7579,7 @@ href="#style">-style</a>, and <a href="#weight">-weight</a>. </p>
<p>See <a href="#draw">-draw</a> for further details.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="strokewidth"></a>-strokewidth <var>value</var></h2>
</div>
@@ -7453,7 +7587,7 @@ href="#style">-style</a>, and <a href="#weight">-weight</a>. </p>
<p>See <a href="#draw">-draw</a> for further details.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="style"></a>-style <var>fontStyle</var></h2>
</div>
@@ -7473,7 +7607,7 @@ Oblique
href="#font">-font</a>, <a href="#family">-family</a>, <a
href="#stretch">-stretch</a>, and <a href="#weight">-weight</a>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="subimage-search"></a>-subimage-search</h2>
</div>
@@ -7489,7 +7623,7 @@ href="#stretch">-stretch</a>, and <a href="#weight">-weight</a>. </p>
<p>It is important to note that the best match in the similarity image does not necessarily imply a perfect match. The actual brightness of the peak reflects the quality of the match. Additionally, other bright peaks in the similarity image may indicate alternate potential matching locations.</p>
<p>Metrics differ in their definition of a <i>perfect match</i>. For metrics like <strong>MSE</strong>, <strong>RMSE</strong>, <strong>PSNR</strong> (<strong>MAE</strong>, <strong>FUZZ</strong>, <strong>DSIM</strong>, and <strong>PHASH</strong>), a perfect match has a value of 0. Conversely, metrics such as <strong>NCC</strong>, <strong>PHASE</strong>, <strong>DPC</strong>, <strong>AE</strong>, <strong>PDC</strong>, <strong>PAE</strong>, <strong>MEPP</strong>, and <strong>SSIM</strong> define a perfect match as 1. To maintain consistency, for metrics where the perfect match is 0, the similarity image is inverted, ensuring that the best match location appears as the brightest point, just as it does for metrics with a perfect match at 1. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="swap"></a>-swap <var>index,index</var></h2>
</div>
@@ -7499,7 +7633,7 @@ href="#stretch">-stretch</a>, and <a href="#weight">-weight</a>. </p>
images in the current image sequence. Use <a href="#swap">+swap</a> to switch
the last two images in the sequence.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="swirl"></a>-swirl <var>degrees</var></h2>
</div>
@@ -7507,7 +7641,7 @@ the last two images in the sequence.</p>
<p><var>Degrees</var> defines the tightness of the swirl.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="synchronize"></a>-synchronize</h2>
</div>
@@ -7518,13 +7652,13 @@ to disk. There is a performance penalty, but the benefits include ensuring a
valid image file in the event of a system crash and early reporting if there
is not enough disk space for the image pixel cache.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="taint"></a>-taint</h2>
+<div class="option-heading">
+ <h2><span id="letter-t" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="taint"></a>-taint</h2>
</div>
<p class="lead">Mark the image as modified.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="text-font"></a>-text-font <var>name</var></h2>
</div>
@@ -7537,13 +7671,13 @@ formatted text. The default is 14 point <var>Courier</var>.</p>
X11 font. For example, <code>Courier.ttf</code> is a TrueType font and
<code>x:fixed</code> is X11.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="texture"></a>-texture <var>filename</var></h2>
</div>
<p class="lead">Name of texture to tile onto the image background.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="threshold"></a>-threshold <var>value</var>{<var>%</var>}</h2>
</div>
@@ -7589,7 +7723,7 @@ convert in.png -channel RGB -threshold -1 white.png
<p> See also <a href="#black-threshold">-black-threshold</a> and <a href="#white-threshold">-white-threshold</a>.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="thumbnail"></a>-thumbnail <var>geometry</var></h2>
</div>
@@ -7600,13 +7734,13 @@ for performance. In addition, comments and color profiles are removed, and <cod
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="tile"></a>-tile <var>filename</var></h2>
</div>
<p class="lead">Set the tile image used for filling a subsequent graphic primitive.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2>-tile <var>geometry</var></h2>
</div>
@@ -7614,13 +7748,13 @@ for performance. In addition, comments and color profiles are removed, and <cod
<p>See <a href="../command-line-processing/index.html#geometry">Image Geometry</a> for complete details about the <em class="arg">geometry</em> argument.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2>-tile</h2>
</div>
<p class="lead">Specifies that a subsequent composite operation is repeated across and down image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="tile-offset"></a>-tile-offset {<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></h2>
</div>
@@ -7634,7 +7768,7 @@ formats. </p>
<p>Internally ImageMagick does a <a href="#roll" >-roll</a> of the tile image
by the arguments given when the tile image is set. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="tint"></a>-tint <var>value</var></h2>
</div>
@@ -7646,7 +7780,7 @@ by the arguments given when the tile image is set. </p>
white red, yellow, will not be affected by -tint. Only mid-range colors such
as the various shades of grey.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="title"></a>-title <var>string</var></h2>
</div>
@@ -7667,7 +7801,7 @@ under the <a href="#format">-format</a> option.</p>
titled <code>bird.miff</code> and whose width is 512 and height is 480.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="transform"></a>-transform</h2>
</div>
@@ -7683,7 +7817,7 @@ titled <code>bird.miff</code> and whose width is 512 and height is 480.</p>
href="#distort">-distort</a> '<code>AffineProjection</code>' method. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="transparent"></a>-transparent <var>color</var></h2>
</div>
@@ -7710,7 +7844,7 @@ used for color-mapped image formats, such as GIF. For that use <a
href="#transparent-color" >-transparent-color</a> </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="transparent-color"></a>-transparent-color <var>color</var></h2>
</div>
@@ -7732,7 +7866,7 @@ type. </p>
<p>The default transparent color is <code>#00000000</code>, which is fully transparent black.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="transpose"></a>-transpose</h2>
</div>
@@ -7741,14 +7875,14 @@ type. </p>
<p> This option mathematically transposes the pixel array. It is equivalent to the sequence <code>-flip -rotate 90</code>.
</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="transverse"></a>-transverse</h2>
</div>
<p class="lead">Mirror the image along the images bottom-left top-right diagonal. Equivalent to the operations <code>-flop -rotate 90</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="treedepth"></a>-treedepth <var>value</var></h2>
</div>
@@ -7768,7 +7902,7 @@ the <a href="../quantize/index.html"
option, or writing to an image format which requires color reduction, is
required for this option to take effect.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="trim"></a>-trim</h2>
</div>
@@ -7801,7 +7935,7 @@ identify background color surrounding the region of interest.</p>
<p>Fully transparent pixels are typically treated as if they lack color or that their color is irrelevant. When comparing two pixels that are both fully transparent, they are often considered equal. This means that any attributes related to their color are disregarded in the evaluation process.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="type"></a>-type <var>type</var></h2>
</div>
@@ -7825,8 +7959,8 @@ output format supports transparency.</p>
<p>Use <a href="#type">-type optimize</a> to ensure the image is written in the smallest possible file size.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="undercolor"></a>-undercolor <var>color</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-u" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="undercolor"></a>-undercolor <var>color</var></h2>
</div>
<p class="lead">Set the color of the annotation bounding box.</p>
@@ -7836,7 +7970,7 @@ output format supports transparency.</p>
<p>See <a href="#draw">-draw</a> for further details.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="update"></a>-update <var>seconds</var></h2>
</div>
@@ -7848,14 +7982,14 @@ the input file has been changed and update the displayed image
accordingly.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="unique-colors"></a>-unique-colors</h2>
</div>
<p class="lead">Discard all but one of any pixel color.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="units"></a>-units <var>type</var></h2>
</div>
@@ -7866,7 +8000,7 @@ accordingly.</p>
with the <a href="#density">-density</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="unsharp"></a>-unsharp <var>radius</var><br />-unsharp <var>radius</var>{x<var>sigma</var>}{<var>+gain</var>}{<var>+threshold</var>}</h2>
</div>
@@ -7901,28 +8035,28 @@ radius that will provide meaningful results for the Gaussian distribution.
</dl>
</div>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="verbose"></a>-verbose</h2>
+<div class="option-heading">
+ <h2><span id="letter-v" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="verbose"></a>-verbose</h2>
</div>
<p class="lead">Print detailed information about the image when this option precedes the <a href="#identify">-identify</a> option or <code>info:</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="version"></a>-version</h2>
</div>
<p class="lead">Print ImageMagick version string and exit.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="view"></a>-view <var>string</var></h2>
</div>
<p class="lead">FlashPix viewing parameters.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="vignette"></a>-vignette <var>radius</var>{x<var>sigma</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var>{<var>%</var>}</h2>
</div>
@@ -7930,7 +8064,7 @@ radius that will provide meaningful results for the Gaussian distribution.
<p>The vignette effect rolloff is controlled by radiusxsigma. For nominal rolloff, this would be set to 0xsigma. A value of 0x0 will produce a circle/ellipse with no rolloff. The arguments x and y control the size of the circle. Larger values decrease the radii and smaller values increase the radii. Values of +0+0 will generate a circle/ellipse the same size as the image. The default values for x and y are 10% of the corresponding image dimension. Thus, the radii will be decreased by 10%, i.e., the diameters of the circle/ellipse will be 80% of the corresponding image dimension. Note, the percent symbol in a geometry affects <var>x</var> and <var>y</var>, whereas <var>radius</var> and <var>sigma</var> are absolute (e.g., <code>-vignette "0x2+10%+10%"</code>).</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="virtual-pixel"></a>-virtual-pixel <var>method</var></h2>
</div>
@@ -7975,7 +8109,7 @@ href="#blur">-blur</a>, and <a href="#sharpen">-sharpen</a>. </p>
href="#list">-list virtual-pixel</a> option.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="visual"></a>-visual <var>type</var></h2>
</div>
@@ -7994,8 +8128,8 @@ If a visual is not specified, the visual class that can display the most
simultaneous colors on the default screen is chosen.</p>
-<div style="mx-auto my-3 text-center">
- <h2><a class="anchor" id="watermark"></a>-watermark <var>brightness</var>x<var>saturation</var></h2>
+<div class="option-heading">
+ <h2><span id="letter-w" class="letter-anchor" aria-hidden="true"></span><a class="anchor" id="watermark"></a>-watermark <var>brightness</var>x<var>saturation</var></h2>
</div>
<p class="lead">Watermark an image using the given percentages of brightness and saturation.</p>
@@ -8007,19 +8141,19 @@ attribute is just direct modified by the <var>saturation</var>
percentage, which defaults to 100 percent (no color change). </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="wave"></a>-wave <var>amplitude</var><br />-wave <var>amplitude</var>x<var>wavelength</var></h2>
</div>
<p class="lead">Shear the columns of an image into a sine wave.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="wavelet-denoise"></a>-wavelet-denoise <var>threshold</var><br />-wavelet-denoise <var>threshold</var>x<var>softness</var></h2>
</div>
<p class="lead">Removes noise from the image using a wavelet transform. The threshold is the value below which everything is considered noise and ranges from 0.0 (none) to QuantumRange or use percent (e.g. 5%). Softness attenuates the threshold and typically ranges from 0.0 (none, default) to 1.0. The higher the value, the more noise that remains in the image.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="weight"></a>-weight <var>fontWeight</var></h2>
</div>
@@ -8059,19 +8193,19 @@ the currently selected font family. Use a positive integer for
href="#font">-font</a>, <a href="#family">-family</a>, <a
href="#stretch">-stretch</a>, and <a href="#style">-style</a>. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="white-balance"></a>-white-balance</h2>
</div>
<p>Applies white balancing to an image according to a grayworld assumption in the LAB colorspace.</p>
<p>Use <code>-define white-balance:vibrance=<em>value{%}</em></code> to change the color vibrance of the a & b channels.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="white-point"></a>-white-point <var>x,y</var></h2>
</div>
<p class="lead">Chromaticity white point.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="white-threshold"></a>-white-threshold <var>value</var>{<var>%</var>}</h2>
</div>
@@ -8082,7 +8216,7 @@ value within [0, <var>QuantumRange</var>] corresponding to the
desired <a href="#channel">-channel</a> value. See <a href="#threshold">-threshold</a>
for more details on thresholds and resulting values. </p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="window"></a>-window <var>id</var></h2>
</div>
@@ -8100,19 +8234,19 @@ for details.</p>
colors than the target window colormap allows. Use <a
href="#colors">-colors</a> to reduce the number of colors.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="window-group"></a>-window-group</h2>
</div>
<p class="lead">Specify the window group.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="word-break"></a>-word-break <var>type</var></h2>
</div>
<p class="lead">Sets whether line breaks appear wherever the text would otherwise overflow its content box. Choose from <code>normal</code>, the default, or <code>break-word</code>.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="write"></a>-write <var>filename</var></h2>
</div>
@@ -8122,7 +8256,7 @@ href="#colors">-colors</a> to reduce the number of colors.</p>
<p>Use <a href="#compress">-compress</a> to specify the type of image compression.</p>
-<div style="mx-auto my-3 text-center">
+<div class="option-heading">
<h2><a class="anchor" id="write-mask"></a>-write-mask <var>filename</var></h2>
</div>
@@ -8136,70 +8270,141 @@ grayscale values causing blended updates of the image the mask is attached to.
<p>Also see <a href="#clip-mask">-clip-mask</a> which work in the same way,
but with strict boolean masking. </p>
-</div>
-</div>
+
+ <button class="back-to-top" id="backToTop" type="button" aria-label="Back to top"><i class="bi bi-arrow-up"></i></button>
+</div>
+</div>
+<script>
+(() => {
+ const select = document.getElementById('optionSelect');
+ const search = document.getElementById('optionSearch');
+ const jump = document.getElementById('jumpButton');
+ const topButton = document.getElementById('backToTop');
+ const progress = document.getElementById('readingProgress');
+ const original = [...select.options].slice(1).map(o => ({ value: o.value, text: o.textContent }));
+ const go = value => { if (!value) return; const target = document.querySelector(value); if (target) { history.pushState(null, '', value); target.scrollIntoView({ behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }); } };
+ const filter = () => {
+ const q = search.value.trim().toLowerCase().replace(/^[-+]/, '');
+ const matches = original.filter(o => o.text.toLowerCase().includes(q));
+ select.innerHTML = '<option value="">' + (matches.length ? `Select from ${matches.length} match${matches.length === 1 ? '' : 'es'}…` : 'No matching options') + '</option>' + matches.map(o => `<option value="${o.value}">${o.text}</option>`).join('');
+ if (matches.length === 1) select.value = matches[0].value;
+ return matches;
+ };
+ search.addEventListener('input', filter);
+ search.addEventListener('keydown', e => { if (e.key === 'Enter') { e.preventDefault(); const matches = filter(); if (matches[0]) go(matches[0].value); } });
+ select.addEventListener('change', () => go(select.value));
+ jump.addEventListener('click', () => go(select.value || filter()[0]?.value));
+ document.querySelectorAll('.cli-reference pre').forEach(pre => {
+ const button = document.createElement('button');
+ button.className = 'copy-code'; button.type = 'button'; button.textContent = 'Copy'; button.setAttribute('aria-label', 'Copy code');
+ button.addEventListener('click', async () => { try { await navigator.clipboard.writeText(pre.innerText.replace(/^Copy\s*/, '')); button.textContent = 'Copied'; setTimeout(() => button.textContent = 'Copy', 1400); } catch (_) { button.remove(); } });
+ pre.prepend(button);
+ });
+ const update = () => {
+ const max = document.documentElement.scrollHeight - innerHeight;
+ progress.style.transform = `scaleX(${max > 0 ? scrollY / max : 0})`;
+ topButton.classList.toggle('visible', scrollY > 800);
+ };
+ addEventListener('scroll', update, { passive: true }); update();
+ topButton.addEventListener('click', () => scrollTo({ top: 0, behavior: matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth' }));
+})();
+</script>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/command-line-processing/index.html b/www/command-line-processing/index.html
index 5e784d5f7..c7bba024c 100644
--- a/www/command-line-processing/index.html
+++ b/www/command-line-processing/index.html
@@ -8,1091 +8,658 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Processing</title>
- <meta name="description" content="Learn how ImageMagick interprets and executes command-line instructions for image manipulation. This guide explains the processing order, option handling, and input/output management, helping developers and system administrators build efficient scripts and workflows. Master the fundamentals of ImageMagick’s CLI processing to achieve precise, reproducible results across platforms.">
+ <meta name="description" content="Learn how ImageMagick interprets and executes command-line instructions for image manipulation. Master processing order, options, and input/output workflows.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Processing">
- <meta property="og:description" content="Learn how ImageMagick interprets and executes command-line instructions for image manipulation. This guide explains the processing order, option handling, and input/output management, helping developers and system administrators build efficient scripts and workflows. Master the fundamentals of ImageMagick’s CLI processing to achieve precise, reproducible results across platforms.">
+ <meta property="og:description" content="Learn how ImageMagick interprets and executes command-line instructions for image manipulation. Master processing order, options, and input/output workflows.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Processing">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Processing",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/command-line-processing/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick interprets and executes command-line instructions for image manipulation. Master processing order, options, and input/output workflows.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link active"" href="index.html">CLI</a>
+ <a class="nav-link active" href="index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/command-line-processing/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/command-line-processing/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Processing</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#anatomy">The Anatomy of the Command-line</a> • <a href="#input">Input Filename</a> • <a href="#option">Command-line Options</a> • <a href="#output">Output Filename</a></p>
-
-<p class="lead">The ImageMagick command-line <a href="../command-line-tools/index.html">tools</a> can be as simple as this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick image.jpg image.png </samp></pre></pre>
-
-<p>Or it can be complex with a plethora of <a href="#option">options</a>, as in the following:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick label.gif -alpha Set \
- \( +clone -shade 110x90 -normalize -negate +clone -compose Plus -composite \) \
- \( -clone 0 -shade 110x50 -normalize -channel BG -fx 0 +channel -alpha Off \) \
- -delete 0 +swap -compose Multiply -composite button.gif</samp></pre>
-
-<p class="text-info">This example command is long enough that the command must be written across several lines, so we formatted it for clarity by inserting backslashes (<code>\</code>). The backslash is the Linux <var>line-continuation</var> character. In the Windows shell, use a caret character (<code>^</code>) for line-continuation. We use the Linux style on these web pages, as above. Sometimes, however, the lines are wrapped by your browser if the browser window is small enough, but the command-lines, shown in white, are still intended to be typed as one line. Line continuation characters need not be entered. The <var>parentheses</var> that are <var>escaped</var> above using the backslash are not escaped in Windows. There are some other differences between Windows and Linux (involving quotation marks, for instance), but we'll discuss some of those issues later, as they arise. </p>
-
-<p class="text-info"><b>For most command line examples on this site, if there is an equivalent translation to run on windows there will be a dropdown in the bottom right, letting you switch which operating system you are previewing the command for.</b></p>
-
-<p>Without knowing much about the ImageMagick command-line, you can probably surmise that the first command above converts an image in the JPEG format to one in the PNG format. However, very few may realize the second, more complex command, gives a flat two-dimensional label a three-dimensional look with rich textures and simulated depth:</p>
-
-<ul>
- <a href="../image/label.gif"><img src="../image/label.gif" width="78" height="53" alt="label" /></a>
-<img style="margin-top:16px; margin-bottom:17px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/button.gif">
- <img src="../image/button.gif" width="78" height="53" alt="button" /></a>
-</ul>
-
-
-<p>Here we show percent completion of a task as a shaded cylinder:</p>
-
-<ul>
- <img src="../image/cylinder_shaded.png" width="320" height="200" alt="Shaded Cylinder" />
-</ul>
-
-<p>Given the complexity of the rendering, you might be surprised it is accomplished by a single command-line:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 320x90 canvas:none -stroke snow4 -size 1x90 -tile gradient:white-snow4 \
- -draw 'roundrectangle 16, 5, 304, 85 20,40' +tile -fill snow \
- -draw 'roundrectangle 264, 5, 304, 85 20,40' \
- -tile gradient:chartreuse-green -draw 'roundrectangle 16, 5, 180, 85 20,40' \
- -tile gradient:chartreuse1-chartreuse3 \
- -draw 'roundrectangle 140, 5, 180, 85 20,40' +tile -fill none \
- -draw 'roundrectangle 264, 5, 304, 85 20,40' -strokewidth 2 \
- -draw 'roundrectangle 16, 5, 304, 85 20,40' \( +clone -background snow4 \
- -shadow 80x3+3+3 \) +swap -background none -layers merge \
- \( +size -pointsize 90 -strokewidth 1 -fill red label:'50 %' \
- -trim +repage \( +clone -background firebrick3 -shadow 80x3+3+3 \) \
- +swap -background none -layers merge \) -insert 0 -gravity center \
- -append -background white -gravity center -extent 320x200 \
- cylinder_shaded.png</samp></pre>
-
-<p>Run this script contributed by <a href="https://github.com/geemack">Geemack</a>. You'll get a glimpse of the power and versatility of the ImageMagick command-line:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -background none -size 960x960 xc:black \( xc:darkred -duplicate 1 \
- +append \) xc:gold \( xc:teal -duplicate 2 +append \) \
- -modulate 100,100,"%[fx:rand()*200]" xc:white -scale x1 +append \
- -write mpr:clut +delete radial-gradient: mpr:clut -clut -scale 100x4% \
- -wave "%[fx:rand()*24+24]"x"%[fx:w/ceil(rand()*4+1)]" \
- -extent "%[w]x%[w]" -roll +0+"%[fx:(rand()*w*0.05)+(w*0.51)]" \( +clone \
- -blur 0x4 \) -insert 0 -composite -duplicate "%[fx:floor(rand()*3+3)*2-1]" \
- -set option:rot "%[fx:180/n]" -virtual-pixel tile -virtual-pixel none \
- -distort SRT "%[fx:t*360/n]" +repage -flatten -extent 100x50% \
- \( +clone -rotate 180 \) -append +channel -virtual-pixel none \
- -distort SRT "0.96 %[fx:rand()*360]" \( +clone -flop \) +repage \
- -insert "%[fx:round(rand())]" -background black -flatten \
- -brightness-contrast 20,20 -normalize dragonFire.png</samp></pre>
-<p>To ensure the script can run under Windows, change any backslash-parens (\() to just parens, the backslash (\) to <code>^</code>, and double-up the percent (%) signs.</p>
-<p>In the next sections we dissect the anatomy of the ImageMagick command-line. Hopefully, after carefully reading and better understanding how the command-line works, you should be able to accomplish complex image-processing tasks without resorting to the sometimes daunting <a href="../develop/index.html">program interfaces</a>.</p>
-
-<p>See <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a> for additional help when using ImageMagick from the command-line.</p>
-
-<h2><a class="anchor" id="anatomy"></a>The Anatomy of the Command-line</h2>
-<p>The ImageMagick command-line consists of</p>
-
-<ul>
-<li>one or more required input filenames.</li>
-<li>zero, one, or more image settings.</li>
-<li>zero, one, or more image operators.</li>
-<li>zero, one, or more image sequence operators.</li>
-<li>zero, one, or more image stacks.</li>
-<li>zero or one output image filenames (required by
-<a href="../magick/index.html">magick</a>,
-<a href="../convert/index.html">convert</a>,
-<a href="../composite/index.html">composite</a>,
-<a href="../montage/index.html">montage</a>,
-<a href="../compare/index.html">compare</a>,
-<a href="../import/index.html">import</a>,
-<a href="../conjure/index.html">conjure</a>).
-</li>
-</ul>
-
-<p>You can find a detailed explanation of each of the constituent parts of the command-line in the sections that follow.</p>
-
-<h2><a class="anchor" id="input"></a>Input Filename</h2>
-
-<p>ImageMagick extends the concept of an input filename to include:</p>
-<ul>
-<li>filename globbing</li>
-<li>an explicit image format</li>
-<li>using built-in images and patterns</li>
-<li>STDIN, STDOUT, and file descriptors</li>
-<li>selecting certain frames from an image</li>
-<li>selecting a region of an image</li>
-<li>forcing an inline image resize</li>
-<li>forcing an inline image crop</li>
-<li>using filename references</li>
-</ul>
-
-<p>These extensions are explained in the next few paragraphs.</p>
-
-<p>Note, by default, if a command-line option is also a filename (e.g., <code>-quality</code>), it is interpreted as a filename. Use <code>-define registry:option:pedantic=true</code> to instead interpret it as an option. </p>
-
-<h4>Filename Globbing</h4>
-<p>In Linux shells, certain characters such as the asterisk (<code>*</code>) and question mark (<code>?</code>) automagically cause lists of filenames to be generated based on pattern matches. This feature is known as globbing. ImageMagick supports filename globbing for systems, such as Windows, that does not natively support it. For example, suppose you want to convert <code>1.jpg</code>, <code>2.jpg</code>, <code>3.jpg</code>, <code>4.jpg</code>, and <code>5.jpg</code> in your current directory to a GIF animation. You can conveniently refer to all of the JPEG files with this command:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick *.jpg images.gif</samp></pre></pre>
-
-<h4>Explicit Image Format</h4>
-<p>Images are stored in a myriad of image formats including
-the better known JPEG, PNG, TIFF and others. ImageMagick must know the format
-of the image before it can be read and processed. Most formats have a
-signature within the image that uniquely identifies the format. Failing
-that, ImageMagick leverages the filename extension to determine the format.
-For example, <code>image.jpg</code> or <code>image.JPG</code> tells ImageMagick
-it is reading an image in the JPEG format. </p>
-
- <p>In some cases the image may not contain a signature
-and/or the filename does not identify the image format. In these cases an
-explicit image format must be specified. For example, suppose our image
-is named <code>image</code> and contains raw red, green, and blue intensity
-values. ImageMagick has no way to automagically determine the image format
-so we explicitly set one:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 640x480 -depth 8 rgb:image image.png</samp></pre></pre>
-
-<h4>Built-in Images and Patterns</h4>
-
-<p>ImageMagick has a number of built-in <a href="../formats/index.html#builtin-images">images</a> and <a href="../formats/index.html#builtin-patterns">patterns</a>. To utilize the checkerboard pattern, for example, use:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 640x480 pattern:checkerboard checkerboard.png</samp></pre></pre>
-
-<h4>STDIN, STDOUT, and file descriptors</h4>
-<p>Linux and Windows permit the output of one command to be piped to the input of another. ImageMagick permits image data to be read and written from the <a href="https://en.wikipedia.org/wiki/Standard_streams">standard streams</a> STDIN (<var>standard in</var>) and STDOUT (<var>standard out</var>), respectively, using a pseudo-filename of <code>-</code>. In this example we pipe the output of
-<a href="../magick/index.html">magick</a> to the <a href="../display/index.html">display</a> program:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick logo: gif:- | magick display gif:-</samp></pre></pre>
-
-<p>The second explicit format "<code>gif:</code>" is optional in the preceding example. The GIF image format has a unique signature within the image so ImageMagick's <a href="../display/index.html">display</a>
- command can readily recognize the format as GIF. The <a href="../magick/index.html">magick</a> program also accepts STDIN as input in this way:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick rose: gif:- | magick - -resize "200%" bigrose.jpg'</samp></pre></pre>
-
-<p>Other pipes can be accessed via their <var>file descriptors</var> (as of version 6.4.9-3). The file descriptors 0, 1, and 2 are reserved for the standard streams STDIN, STDOUT, and STDERR, respectively, but a pipe associated with a file descriptor number <var>N</var>>2 can be accessed using the pseudonym <code>fd:</code><var>N</var>. (The pseudonyms <code>fd:0</code> and <code>fd:1</code> can be used for STDIN and STDOUT.) The next example shows how to append image data piped from files with descriptors 3 and 4 and direct the result to the file with descriptor number 5.
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick fd:3 fd:4 -append fd:5</samp></pre></pre>
-
-<p>When needed, explicit image formats can be given as mentioned earlier, as in the following.
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick gif:fd:3 jpg:fd:4 -append tif:fd:5</samp></pre></pre>
-
-<h4>Selecting Frames</h4>
-<p>Some images formats contain more than one image frame. Perhaps you only want the first image, or the last, or some number of images in-between. You can specify which image frames to read by appending the image filename with the frame range enclosed in brackets. Here our image (an animated GIF) contains more than one frame but we only want the first:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick 'images.gif[0]' image.png</samp></pre></pre>
-
-<p class="text-info">Linux shells generally interpret brackets so we enclosed the filename in quotes above.
-In a Windows command shell the brackets are not interpreted but using quotes doesn't hurt. However, in most cases the roles of single-quotes and double-quotes are reversed with respect to Linux and Windows, so Windows users should usually try double-quotes where we display single-quotes, and vice versa.
-</p>
-
-<p>You can read more than one image from a sequence with a frame range. For example, you can extract the first four frames of an image sequence:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick 'images.gif[0-3]' images.mng</samp></pre></pre>
-
-<p>The default is to step one frame at a time so frames 0, 1, 2, and 3 are returned. Set the step to 2 with <code>-define frames:step=2</code> and we instead get frames 0 and 2.</p>
-
-<p>Finally, you can read more than one image from a sequence, out-of-order. The next command gets the fourth image in the sequence, followed by the third, and then the fifth:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick 'images.gif[3,2,4]' images.mng</samp></pre></pre>
-
-<p>Notice that in the last two commands, a single image is written. The output in this case, where the image type is MNG, is a multi-frame file because the MNG format supports multiple frames. Had the output format been JPG, which only supports single frames, the output would have consisted of separate frames. More about that below, in the section about the <a href="#output">Output Filename</a>.
-</p>
-<p>The <code>-define image:frames=<i>list</i></code> define provides an alternative to the bracket syntax for selecting specific frames from multi‑image formats such as GIF, TIFF, PDF, MIFF, and MNG. Instead of appending a frame range to the input filename, you can specify the desired frames directly with a define:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -define image:frames=0-3 images.gif images.mng</samp></pre></pre>
-
-<p>This example extracts frames 0 through 3. The define accepts the same grammar as the bracket syntax.</p>
-
-<h4>Selecting an Image Region</h4>
-<p>Raw images are a sequence of color intensities without additional meta information such as width, height, or image signature. With raw image formats, you must specify the image width and height but you can also specify a region of the image to read. In our example, the image is in the raw 8-bit RGB format and is 6000 pixels wide and 4000 pixels high. However, we only want a region of 600 by 400 near the center of the image:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 6000x4000 -depth 8 'rgb:image[600x400+1900+2900]' image.jpg</samp></pre></pre>
-
-<p>
- You can get the same results with the <a href="../command-line-options/index.html#extract">-extract</a> option:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 6000x4000 -depth 8 -extract 600x400+1900+2900 rgb:image image.jpg</samp></pre></pre>
-
-<h4>Inline Image Resize</h4>
-<p>It is sometimes convenient to resize an image as they are read. Suppose you have hundreds of large JPEG images you want to convert to a sequence of PNG thumbnails:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick '*.jpg' -resize 120x120 thumbnail%03d.png</samp></pre></pre>
-
-<p>Here <var>all</var> the images are read and subsequently
-resized. It is faster and less resource intensive to resize each image as it
-is read:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick '*.jpg[120x120]' thumbnail%03d.png</samp></pre></pre>
-
-<h4>Inline Image Crop</h4>
-<p>It is sometimes convenient to crop an image as they are read. Suppose you have hundreds of large JPEG images you want to convert to a sequence of PNG thumbnails:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick '*.jpg' -crop 120x120+10+5 thumbnail%03d.png</samp></pre></pre>
-
-<p>Here <var>all</var> the images are read and subsequently cropped. It is faster and less resource-intensive to crop each image as it is read:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick '*.jpg[120x120+10+5]' thumbnail%03d.png</samp></pre></pre>
-
-
-<h4>Filename References</h4>
-
-<p>There are two methods to use a filename to reference other image filenames.
-The first is with '<code>@</code>' which reads image filenames separated by white space from the specified file. Assume the file <code>myimages.txt</code> consists of a list of filenames, like so:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">frame001.jpg
-frame002.jpg
-frame003.jpg</pre>
-
-<p>We then expect this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick @myimages.txt mymovie.gif</samp></pre></pre>
-
-<p>to read the images <code>frame001.jpg</code>, <code>frame002.jpg</code>, and <code>frame003.jpg</code> and convert them to a GIF image sequence. </p>
-<p>If the image path includes one or more spaces, enclose the path in quotes:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">'my title.jpg'</pre>
-
-
- <p>Some ImageMagick command-line <a href="../command-line-options/index.html">options</a> may exceed the capabilities of
-your command-line processor. Windows, for example, limits command-lines
-to 8192 characters. If, for example, you have a draw option with polygon
-points that exceed the command-line length limit, put the draw option instead
-in a file and reference the file with
-the <code>@</code> (e.g. <code>@mypoly.txt</code>).</p>
-
-<p>Another method of referring to other image files is by
-embedding a formatting character in the filename with a scene range. Consider
-the filename <code>image-%d.jpg[1-5]</code>. The command</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick image-%d.jpg[1-5]</samp></pre></pre>
-
-<p>causes ImageMagick to attempt to read images with these filenames:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">image-1.jpg
-image-2.jpg
-image-3.jpg
-image-4.jpg
-image-5.jpg</pre>
-
-<h4>Stream Buffering</h4>
-<p>By default, the input stream is buffered. To ensure information on the source file or terminal is read as soon as its available, set the buffer size to 0:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick logo: gif:- | magick display -define stream:buffer-size=0 gif:-</samp></pre></pre>
-
-<h2><a class="anchor" id="option"></a>Command-line Options</h2>
-
-<p>You can direct the behavior of ImageMagick utilities with these command-line <a href="../command-line-options/index.html">options</a>. The behavior of an option falls into one of these categories:</p>
-
-<ul>
-<li><a href="#setting">Image Setting</a></li>
-<li><a href="#operator">Image Operator</a></li>
-<li><a href="#channel">Image Channel Operator</a></li>
-<li><a href="#sequence">Image Sequence Operator</a></li>
-<li><a href="#geometry">Image Geometry</a></li>
-<li><a href="#stack">Image Stack</a></li>
-</ul>
-
-<h4><a class="anchor" id="setting"></a>Image Setting</h4>
-
-<p>An image setting persists as it appears on the command-line and may affect
-subsequent processing such as reading an image, an image operator, or when
-writing an image as appropriate. An image setting stays in effect until it
-is reset or the command-line terminates. The image settings include:</p>
-
-<ul class="list-unstyled d-flex flex-wrap">
- <li class="text-nowrap">• <a href="../command-line-options/index.html#adjoin" class="me-2">-adjoin</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#affine" class="me-2">-affine</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#alpha" class="me-2">-alpha</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#antialias" class="me-2">-antialias</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#authenticate" class="me-2">-authenticate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#background" class="me-2">-background</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#bias" class="me-2">-bias</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#black-point-compensation" class="me-2">-black-point-compensation</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#blue-primary" class="me-2">-blue-primary</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#bordercolor" class="me-2">-bordercolor</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#caption" class="me-2">-caption</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#channel" class="me-2">-channel</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#comment" class="me-2">-comment</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#compress" class="me-2">-compress</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#debug" class="me-2">-debug</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#define" class="me-2">-define</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#delay" class="me-2">-delay</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#density" class="me-2">-density</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#depth" class="me-2">-depth</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#direction" class="me-2">-direction</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#display" class="me-2">-display</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#dispose" class="me-2">-dispose</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#dither" class="me-2">-dither</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#encoding" class="me-2">-encoding</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#endian" class="me-2">-endian</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#extract" class="me-2">-extract</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#family" class="me-2">-family</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#fill" class="me-2">-fill</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#filter" class="me-2">-filter</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#font" class="me-2">-font</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#format" class="me-2">-format</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#fuzz" class="me-2">-fuzz</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#geometry" class="me-2">-geometry</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#gravity" class="me-2">-gravity</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#green-primary" class="me-2">-green-primary</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#interlace" class="me-2">-interlace</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#intent" class="me-2">-intent</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#interpolate" class="me-2">-interpolate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#label" class="me-2">-label</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#limit" class="me-2">-limit</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#linewidth" class="me-2">-linewidth</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#log" class="me-2">-log</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#loop" class="me-2">-loop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#mattecolor" class="me-2">-mattecolor</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#monitor" class="me-2">-monitor</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#orient" class="me-2">-orient</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#page" class="me-2">-page</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#pointsize" class="me-2">-pointsize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#preview" class="me-2">-preview</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#quality" class="me-2">-quality</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#quiet" class="me-2">-quiet</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#read-mask" class="me-2">-read-mask</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#red-primary" class="me-2">-red-primary</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#region" class="me-2">-region</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#render" class="me-2">-render</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#repage" class="me-2">-repage</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#sampling-factor" class="me-2">-sampling-factor</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#scene" class="me-2">-scene</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#seed" class="me-2">-seed</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#size" class="me-2">-size</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#stretch" class="me-2">-stretch</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#stroke" class="me-2">-stroke</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#strokewidth" class="me-2">-strokewidth</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#style" class="me-2">-style</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#texture" class="me-2">-texture</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#tile" class="me-2">-tile</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#transparent-color" class="me-2">-transparent-color</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#treedepth" class="me-2">-treedepth</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#type" class="me-2">-type</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#undercolor" class="me-2">-undercolor</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#units" class="me-2">-units</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#verbose" class="me-2">-verbose</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#virtual-pixel" class="me-2">-virtual-pixel</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#weight" class="me-2">-weight</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#write-mask" class="me-2">-write-mask</a></li>
-</ul>
-
-<p>In this example, <var>-channel</var> applies to each of the images, since, as we mentioned, settings persist:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -channel RGB wand.png wizard.png images.png</samp></pre></pre>
-
-<h4><a class="anchor" id="operator"></a>Image Operator</h4>
-
-<p>An image operator differs from a setting in that it affects the image
-immediately as it appears on the command-line. An operator is
-any command-line <a href="../command-line-options/index.html">option</a> not listed as a
-<a href="#setting">image setting</a> or
-<a href="#sequence">image sequence operator</a>. Unlike an
-image setting, which persists until the command-line terminates,
-an operator is applied to the current image set and forgotten. The image operators include:</p>
-
-<ul class="list-unstyled d-flex flex-wrap">
- <li class="text-nowrap">• <a href="../command-line-options/index.html#annotate" class="me-2">-annotate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#black-threshold" class="me-2">-black-threshold</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#blur" class="me-2">-blur</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#border" class="me-2">-border</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#charcoal" class="me-2">-charcoal</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#chop" class="me-2">-chop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#clip" class="me-2">-clip</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#clip-path" class="me-2">-clip-path</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#clip-mask" class="me-2">-clip-mask</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#colors" class="me-2">-colors</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#colorize" class="me-2">-colorize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#colorspace" class="me-2">-colorspace</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#color-threshold" class="me-2">-color-threshold</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#compose" class="me-2">-compose</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#contrast" class="me-2">-contrast</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#convolve" class="me-2">-convolve</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#crop" class="me-2">-crop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#cycle" class="me-2">-cycle</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#despeckle" class="me-2">-despeckle</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#draw" class="me-2">-draw</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#edge" class="me-2">-edge</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#emboss" class="me-2">-emboss</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#enhance" class="me-2">-enhance</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#equalize" class="me-2">-equalize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#evaluate" class="me-2">-evaluate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#extent" class="me-2">-extent</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#flip" class="me-2">-flip</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#flop" class="me-2">-flop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#floodfill" class="me-2">-floodfill</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#frame" class="me-2">-frame</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#fx" class="me-2">-fx</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#gamma" class="me-2">-gamma</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#gaussian-blur" class="me-2">-gaussian-blur</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#grayscale" class="me-2">-grayscale</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#implode" class="me-2">-implode</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#integral" class="me-2">-integral</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#kmeans" class="me-2">-kmeans</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#lat" class="me-2">-lat</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#level" class="me-2">-level</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#map" class="me-2">-map</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#median" class="me-2">-median</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#modulate" class="me-2">-modulate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#monochrome" class="me-2">-monochrome</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#negate" class="me-2">-negate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#noise" class="me-2">-noise</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#normalize" class="me-2">-normalize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#opaque" class="me-2">-opaque</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#ordered-dither" class="me-2">-ordered-dither</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#paint" class="me-2">-paint</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#posterize" class="me-2">-posterize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#raise" class="me-2">-raise</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#profile" class="me-2">-profile</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#random-threshold" class="me-2">-random-threshold</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#resample" class="me-2">-resample</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#resize" class="me-2">-resize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#roll" class="me-2">-roll</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#rotate" class="me-2">-rotate</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#rotational-blur" class="me-2">-rotational-blur</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#sample" class="me-2">-sample</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#scale" class="me-2">-scale</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#sepia-tone" class="me-2">-sepia-tone</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#segment" class="me-2">-segment</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#shade" class="me-2">-shade</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#shadow" class="me-2">-shadow</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#sharpen" class="me-2">-sharpen</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#shave" class="me-2">-shave</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#shear" class="me-2">-shear</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#sigmoidal-contrast" class="me-2">-sigmoidal-contrast</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#solarize" class="me-2">-solarize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#splice" class="me-2">-splice</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#spread" class="me-2">-spread</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#strip" class="me-2">-strip</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#swirl" class="me-2">-swirl</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#threshold" class="me-2">-threshold</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#transparent" class="me-2">-transparent</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#thumbnail" class="me-2">-thumbnail</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#tint" class="me-2">-tint</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#transform" class="me-2">-transform</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#trim" class="me-2">-trim</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#unsharp" class="me-2">-unsharp</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#version" class="me-2">-version</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#wave" class="me-2">-wave</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#white-balance" class="me-2">-white-balance</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#white-point" class="me-2">-white-point</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#white-threshold" class="me-2">-white-threshold</a></li>
-</ul>
-
-<p>In this example, <var>-negate</var> negates the wand image but not the wizard:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick wand.png -negate wizard.png images.png</samp></pre></pre>
-
-<p>Note that an image operator will be applied to each images in an image
-sequence. For example, if you use <a href="../command-line-options/index.html#resize">-resize</a> option to resize a
-GIF image, each frames will be resized to the given size. However, some frames
-may be smaller than the whole image and resizing all the frames into the same
-size may result in an unexpected output. In such a case,
-<a href="../command-line-options/index.html#coalesce">-coalesce</a> should be used to prepare those frames.</p>
-
-<h4><a class="anchor" id="channel"></a>Image Channel Operator</h4>
-<p>Operate directly on image channels:</p>
-<ul class="list-unstyled d-flex flex-wrap">
- <li class="text-nowrap">• <a href="../command-line-options/index.html#channel-fx" class="me-2">-channel-fx</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#separate">-separate</a></li>
-</ul>
-
-<h4><a class="anchor" id="sequence"></a>Image Sequence Operator</h4>
-
-<p>An image sequence operator differs from a setting in that it affects an
-image sequence immediately as it appears on the command-line. Choose from
-these image sequence operators:</p>
-
-<ul class="list-unstyled d-flex flex-wrap">
- <li class="text-nowrap">• <a href="../command-line-options/index.html#append" class="me-2">-append</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#affinity" class="me-2">-affinity</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#average" class="me-2">-average</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#clut" class="me-2">-clut</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#coalesce" class="me-2">-coalesce</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#combine" class="me-2">-combine</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#compare" class="me-2">-compare</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#complex" class="me-2">-complex</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#composite" class="me-2">-composite</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#copy" class="me-2">-copy</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#crop" class="me-2">-crop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#debug" class="me-2">-debug</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#deconstruct" class="me-2">-deconstruct</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#delete" class="me-2">-delete</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#evaluate-sequence" class="me-2">-evaluate-sequence</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#fft" class="me-2">-fft</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#flatten" class="me-2">-flatten</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#fx" class="me-2">-fx</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#hald-clut" class="me-2">-hald-clut</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#ift" class="me-2">-ift</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#identify" class="me-2">-identify</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#insert" class="me-2">-insert</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#layers" class="me-2">-layers</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#limit" class="me-2">-limit</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#map" class="me-2">-map</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#maximum" class="me-2">-maximum</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#minimum" class="me-2">-minimum</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#morph" class="me-2">-morph</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#mosaic" class="me-2">-mosaic</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#optimize" class="me-2">-optimize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#print" class="me-2">-print</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#process" class="me-2">-process</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#quiet" class="me-2">-quiet</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#read" class="me-2">-read</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#swap" class="me-2">-swap</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#write" class="me-2">-write</a></li>
-</ul>
-<p>In this example, <var>-append</var> appends three images into one:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick mikayla.png picnic.png beach.png -append vacation.png</samp></pre></pre>
-
-<h4><a class="anchor" id="geometry"></a>Image Geometry</h4>
-
-<p>Many command-line <a href="../command-line-options/index.html">options</a> take a <var>geometry</var> argument
-to specify such things as the desired width and height of an image and other
-dimensional quantities. Because users want so many variations on the resulting
-dimensions, sizes, and positions of images (and because ImageMagick wants to
-provide them), the <var>geometry</var> argument can take many
-forms. We describe many of these in this section. </p>
-
-<p>The image options and settings that take some form of
-a <var>geometry</var> argument include the following.
-Keep in mind that some of these parse their arguments in slightly
-different ways. See the documentation for the individual option or
-setting for more specifics.</p>
-
-<ul class="list-unstyled d-flex flex-wrap">
- <li class="text-nowrap">• <a href="../command-line-options/index.html#adaptive-resize" class="me-2">-adaptive-resize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#border" class="me-2">-border</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#borderwidth" class="me-2">-borderwidth</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#chop" class="me-2">-chop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#crop" class="me-2">-crop</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#density" class="me-2">-density</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#extent" class="me-2">-extent</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#extract" class="me-2">-extract</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#frame" class="me-2">-frame</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#geometry" class="me-2">-geometry</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#iconGeometry" class="me-2">-iconGeometry</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#liquid-rescale" class="me-2">-liquid-rescale</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#page" class="me-2">-page</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#region" class="me-2">-region</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#repage" class="me-2">-repage</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#resize" class="me-2">-resize</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#sample" class="me-2">-sample</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#scale" class="me-2">-scale</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#shave" class="me-2">-shave</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#splice" class="me-2">-splice</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#thumbnail" class="me-2">-thumbnail</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#window" class="me-2">-window</a></li>
-</ul>
-
-<p>The <var>geometry</var> argument might take any of the forms listed in the table below. These will described in more detail in the subsections following the table. The usual form is <var>size</var>[<var>offset</var>], meaning <var>size</var> is required and <var>offset</var> is optional. Occasionally, [<var>size</var>]<var>offset</var> is possible. In no cases are spaces permitted within the <var>geometry</var> argument.</p>
-
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <thead>
- <tr>
- <th style="text-align:center"><var>size</var></th>
- <th>General description (actual behavior can vary for different options and settings)</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><var>scale</var>%</td>
- <td>Height and width both scaled by specified percentage.</td>
- </tr>
- <tr>
- <td><var>scale-x</var>%x<var>scale-y</var>%</td>
- <td>Height and width individually scaled by specified percentages. (Only one % symbol needed.)</td>
- </tr>
- <tr>
- <td><var>width</var></td>
- <td>Width given, height automagically selected to preserve aspect ratio.</td>
- </tr>
- <tr>
- <td>x<var>height</var></td>
- <td>Height given, width automagically selected to preserve aspect ratio.</td>
- </tr>
- <tr>
- <td><var>width</var>x<var>height</var></td>
- <td>Maximum values of height and width given, aspect ratio preserved.</td>
- </tr>
- <tr>
- <td><var>width</var>x<var>height</var>^</td>
- <td>Minimum values of width and height given, aspect ratio preserved.</td>
- </tr>
- <tr>
- <td><var>width</var>x<var>height</var>!</td>
- <td>Width and height emphatically given, original aspect ratio ignored.</td>
- </tr>
- <tr>
- <td><var>width</var>x<var>height</var>></td>
- <td>Shrinks an image with dimension(s) <b>larger</b> than the corresponding <var>width</var> and/or <var>height</var> argument(s).</td>
- </tr>
- <tr>
- <td><var>width</var>x<var>height</var><</td>
- <td>Enlarges an image with dimension(s) <b>smaller</b> than the corresponding <var>width</var> and/or <var>height</var> argument(s).</td>
- </tr>
- <tr>
- <td><var>area</var>@</td>
- <td>Resize image to have specified area in pixels. Aspect ratio is preserved.</td>
- <tr>
- <td><var>x</var>:<var>y</var></td>
- <td>Here x and y denotes an aspect ratio (e.g. 3:2 = 1.5).</td>
- </tr>
- <tr>
- <td><var>x</var>:<var>y</var>^</td>
- <td>remove rows or columns to achieve the given aspect ratio.</td>
- </tr>
- <tr>
- <td><var>x</var>:<var>y</var>#</td>
- <td>add rows or columns to achieve the given aspect ratio.</td>
- </tr>
- <tr>
- <td>{<var>size</var>}{<var>offset</var>}</td>
- <td>Specifying the <var>offset</var> (default is <code>+0+0</code>). Below, {<var>size</var>} refers to any of the forms above.</td>
- </tr>
- <tr>
- <td>{<var>size</var>}{<var>+-</var>}<var>x</var>{<var>+-</var>}<var>y</var></td>
- <td>Horizontal and vertical offsets <var>x</var> and <var>y</var>, specified in pixels. Signs are required for both. Offsets are affected by <a href="../command-line-options/index.html#gravity">-gravity</a> setting. Offsets are not affected by <code>%</code> or other <var>size</var> operators. Note that positive X and Y offsets are in the inward direction towards the center of the image for all <a href="../command-line-options/index.html#gravity">-gravity</a> options, except 'center'. For East, +X is left. For South, +Y is up. For SouthEast, +X is left and +Y is up. For center, the normal X and Y directional convention is used (+X is right and +Y is down).</td>
- </tr>
- </tbody>
-</table></div>
-
-
-<h4>Basic adjustments to width and height; the operators <code>%</code>, <code>^</code>, and <code>!</code> </h4>
-<p>Here, just below, are a few simple examples of <var>geometry</var>, showing how it might be used as an argument to the <a href="../command-line-options/index.html#resize">-resize</a> option. We'll use the internal image <code>logo:</code> for our input image.
-<a href="../image/logo.png">
-This fine image</a> is 640 pixels wide and 480 pixels high. We say its <var>dimensions</var> are 640x480. When we give dimensions of an image, the width (the horizontal dimension) always precedes the height (the vertical dimension). This will be true when we speak of coordinates or <var>offsets</var> into an image, which will always be <var>x</var>–value followed by <var>y</var>. Just think of your high school algebra classes and the <var>xy</var>–plane. (Well, almost: our <var>y</var>–axis will always go downward!)
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -resize '200%' bigWiz.png
-$ magick logo: -resize '200x50%' longShortWiz.png
-$ magick logo: -resize '100x200' notThinWiz.png
-$ magick logo: -resize '100x200^' biggerNotThinWiz.png
-$ magick logo: -resize '100x200!' dochThinWiz.png</samp></pre>
-
-<p>The first of the four commands is simple—it stretches both the width and height of the input image by <code>200%</code> in each direction; it magnifies the whole thing by a factor of two. The second command specifies different percentages for each direction, stretching the width to <code>200</code>% and squashing the height to <code>50%</code>. The resulting image (in this example) has dimensions 1280x240. Notice that the percent symbol needn't be repeated; the following are equivalent: <code>200x50%</code>, <code>200%x50</code>, <code>200%x50%</code>.
-</p>
-
-<p>By default, the width and height given in a <var>geometry</var> argument are <var>maximum</var> values unless a percentage is specified. That is, the image is expanded or contracted to fit the specified width and height value while maintaining the <var>aspect ratio</var> (the ratio of its height to its width) of the image. For instance, the third command above "tries" to set the dimensions to <code>100x200</code>. Imagine gradually shrinking the original image (which is 640x480), keeping is aspect ratio constant, until it just fits into a 100x200 rectangle. Since the image is longer than it is tall, it will fit when its width shrinks to 100 pixels. To preserve the aspect ratio, the height will therefore have to be (480/640)×100 pixels=75 pixels, so the final dimensions will be 100x75.</p>
-
-<p> Notice that in the previous example, at least one of the specified dimensions will be attained (in this case, the width, 100 pixels). The resulting image fits snugly within the original. One can do just the opposite of this by invoking the <code>^</code> operator, as in the fourth example above. In that case, when <code>100x200^</code> is given as the argument, again at least one of the dimensions will be attained, but in this case the resulting image can snugly contain the original. Here the <var>geometry</var> argument gives <var>minimum</var> values. In our example, the height will become 200 and the width will be scaled to preserve the aspect ratio, becoming (640/480)×200 pixels=267 pixels. With the <code>^</code> operator, one of those dimensions will match the requested size, but the image will likely overflow the dimensions requested to preserve its aspect ratio. (The <code>^</code> feature is new as of IM 6.3.8-2.)</p>
-
-<p>We see that ImageMagick is very good about preserving aspect ratios of images, to prevent distortion of your favorite photos and images. But you might really want the dimensions to be <code>100x200</code>, thereby stretching the image. In this case just tell ImageMagick you really mean it (!) by appending an exclamation operator to the geometry. This will force the image size to exactly what you specify. So, for example, if you specify <code>100x200!</code> the dimensions will become exactly 100x200 (giving a small, vertically elongated wizard).</p>
-
-<h4>Bounding the width, height, and area; the operators <code>></code>, <code><</code>, and <code>@</code> </h4>
-<p>
-Here are a few more examples:
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -resize '100' wiz1.png
-$ magick logo: -resize 'x200' wiz2.png
-$ magick logo: -resize '100x200>' wiz3.png
-$ magick logo: -resize '100x200<' wiz4.png</samp></pre>
-
-<p>If only one dimension is given it is taken to be the width. When only the width is specified, as in the first example above, the width is accepted as given and the height is chosen to maintain the aspect ratio of the input image. Similarly, if only the height is specified, as in the second example above, the height is accepted and the width is chosen to maintain the aspect ratio.</p>
-
-
-<p>Use <code>></code> to shrink an image <var>only</var> if its dimension(s) are <b>larger</b> than the corresponding <var>width</var> and/or <var>height</var> arguments. Use <code><</code> to enlarge an image <var>only</var> if its dimension(s) are <b>smaller</b> than the corresponding <var>width</var> and/or <var>height</var> arguments. In either case, if a change is made, the result is as if the <code>></code> or <code><</code> operator was not present. So, in the third example above, we specified <code>100x200></code> and the original image size is 640x480, so the image size is reduced as if we had specified <code>100x200</code>. However, in the fourth example above, there will be no change to its size.</p>
-
-<p>Finally, use <code>@</code> to specify the maximum area in pixels of an image, again while attempting to preserve aspect ratio. (Pixels take only integer values, so some approximation is always at work.) In the following example, an area of 10000 pixels is requested. The resulting file has dimensions 115x86, which has 9890 pixels. </p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick logo: -resize '10000@' wiz10000.png</samp></pre></pre>
-
-<p class="text-info">In all the examples above and below, we have enclosed the <var>geometry</var> arguments within quotation marks. Doing so is optional in many cases, but not always. We <var>must</var> enclose the geometry specifications in quotation marks when using <code><</code> or <code>></code> to prevent these characters from being interpreted by the shell as <var>file redirection</var>. On Windows systems, the caret <code>^</code> needs to be within quotes, else it is ignored. To be safe, one should probably maintain a habit of enclosing all <var>geometry</var> arguments in quotes, as we have here.
-</p>
-
-<h4>Offsets in geometry</h4>
-<p>
-Here are some examples to illustrate the use of <var>offsets</var> in <var>geometry</var> arguments. One typical use of offsets is in conjunction with the
-<a href="../command-line-options/index.html#region">-region</a> option. This option allows many other options to modify the pixels within a specified rectangular subregion of an image. As such, it needs to be given the width and height of that region, and also an <var>offset</var> into the image, which is a pair of coordinates that indicate the location of the region within the larger image. Below, in the first example, we specify a region of size <code>100x200</code> to be located at the <var>xy</var>–coordinates <var>x</var>=10, <var>y</var>=20. Let's use the usual algebraic notation (<var>x</var>,<var>y</var>)=(10,20), for convenience.
-</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -region '100x200+10+20' -negate wizNeg1.png
-$ magick logo: -region '100x200-10+20' -negate wizNeg2.png
-$ magick logo: -gravity center -region '100x200-10+20' -negate wizNeg3.png</samp></pre>
-
-<p>Note that offsets always require +/− signs. The offset is not actually a true location within the image; its coordinates must be added to some other location. Let's refer to that as the <var>current location</var>. In the first two examples above, though, that location is the upper-left hand corner of the image, which has coordinates (0,0). (That is the default situation when there are no other directives given to change it.) The first example above puts the <code>100x200</code> rectangle's own upper-left corner at (10,20). </p>
-
-<p>A negative offset can make sense in many cases. In the second example above, the offset is (-10,20), specified by <code>-10+20</code>. In that case, only the portion of the (virtual) rectangle obtained that lies within the image can be negated; here it is equivalent to specifying the geometry as <code>90x200+0+20</code>.</p>
-
-<p>In the third example above, the a href="/command-line-options/#gravity">-gravity</a> setting precedes the others and sets the current location within the image at the very center of the image. In this case that is at pixel (320,240), since the size of the image is 640x480. This means that the offsets apply to that location, which thereby gets moved, in this case, to (320-10,240+20)=(310,260). But the <code>100x200</code> region itself is affected by the a href="/command-line-options/#gravity">-gravity</a> setting, so instead of affecting its upper-left corner, the region's own center (at (+50,+100) within it) is determined. Therefore the center of the <code>100x200</code> rectangle is moved to (310,260). The negated rectangle's upper-left corner is now at (310-50,260-100)=(260,160).
-</p>
-
-
-<h4><a class="anchor" id="stack"></a>Image Stack</h4>
-
-<p>In school, your teacher probably permitted you to work on problems on a scrap of paper and then copy the results to your test paper. An image stack is similar. It permits you to work on an image or image sequence in isolation and subsequently introduce the results back into the command-line. The image stack is delineated with parenthesis. Image operators only affect images in the current stack. For example, we can limit the image rotation to just the wizard image like this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick wand.gif \( wizard.gif -rotate 30 \) +append images.gif</samp></pre>
-
-
-<p class="text-info">Notice again that the parentheses are <var>escaped</var> by preceding them with
-backslashes. This is required under Linux, where parentheses are special
-<var>shell</var> characters. The backslash tells the shell not to interpret
-these characters, but to pass them directly to the command being executed. Do
-not escape the parentheses under Windows. Each parenthesis (or escaped
-parenthesis) must have spaces on either side, as in the example shown
-above.</p>
-
-<p>In addition to the image operators already discussed, the following image operators are most useful when processing images in an image stack:</p>
-
-<ul class="list-unstyled d-flex flex-wrap">
- <li class="text-nowrap">• <a href="../command-line-options/index.html#clone" class="me-2">-clone</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#delete" class="me-2">-delete</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#insert" class="me-2">-insert</a></li>
- <li class="text-nowrap">• <a href="../command-line-options/index.html#swap" class="me-2">-swap</a></li>
-</ul>
-
-<p>The arguments to these operators are indexes into the image sequence by number, starting with zero, for the first image, and so on. However if you give a negative index, the images are indexed from the end (last image added). That is, an index of -1 is the last image in the current image sequence, -2 gives the second-to-last, and so on.</p>
-
-<h2><a class="anchor" id="output"></a>Output Filename</h2>
-
-<p>ImageMagick extends the concept of an output filename to include:</p>
-
-<ol>
-<li>an explicit image format</li>
-<li>write to <var>standard out</var></li>
-<li>filename references</li>
-</ol>
-
-<p>Each of these extensions are explained in the next few paragraphs.</p>
-
-<p>Instead of an output filename, you use <a href="../command-line-options/index.html#exit">-exit</a> to completely prevent any image write.</p>
-
-<h4>Explicit Image Format</h4>
- <p>Images can be stored in a myriad of image formats including the better known JPEG, PNG, TIFF and others. ImageMagick must know the desired format of the image before it is written. ImageMagick leverages the filename extension to determine the format. For example, <code>image.jpg</code> tells ImageMagick to write the image in the JPEG format. In some cases the filename does not identify the image format. In these cases, the image is written in the format it was originally read unless an explicit image format is specified. For example, suppose we want to write our image to a filename of <code>image</code> in the raw red, green, and blue intensity format:
- </p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Processing</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick interprets and executes command-line instructions for image manipulation. Master processing order, options, and input/output workflows.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick image.jpg rgb:image</samp></pre></pre>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Jump Navigation -->
+<section class="mb-4">
+ <div class="p-3 rounded-3 bg-body-tertiary border text-center">
+ <div class="d-flex flex-wrap justify-content-center gap-2 small">
+ <a href="#anatomy" class="btn btn-sm btn-outline-secondary">Anatomy</a>
+ <a href="#input" class="btn btn-sm btn-outline-secondary">Input Filename</a>
+ <a href="#option" class="btn btn-sm btn-outline-secondary">Command Options</a>
+ <a href="#setting" class="btn btn-sm btn-outline-secondary">Settings</a>
+ <a href="#operator" class="btn btn-sm btn-outline-secondary">Operators</a>
+ <a href="#sequence" class="btn btn-sm btn-outline-secondary">Sequence</a>
+ <a href="#geometry" class="btn btn-sm btn-outline-secondary">Geometry</a>
+ <a href="#stack" class="btn btn-sm btn-outline-secondary">Stack</a>
+ <a href="#output" class="btn btn-sm btn-outline-secondary">Output Filename</a>
+ </div>
+ </div>
+</section>
+
+<!-- Introduction Section -->
+<section class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border">
+ <p class="lead mb-4">
+ The ImageMagick command-line <a href="../command-line-tools/index.html" class="text-decoration-none fw-medium">tools</a> can range from simple single-file conversions:
+ </p>
+
+ <div class="bg-dark text-light p-3 rounded font-mono small mb-3">
+ $ magick image.jpg image.png
+ </div>
+ <p class="text-body-secondary mb-3">Or scale into complex multi-step processing pipelines with a plethora of options:</p>
+
+ <div class="bg-dark text-light p-3 rounded font-mono small mb-4 overflow-x-auto">
+ $ magick label.gif -alpha Set \<br>
+ \( +clone -shade 110x90 -normalize -negate +clone -compose Plus -composite \) \<br>
+ \( -clone 0 -shade 110x50 -normalize -channel BG -fx 0 +channel -alpha Off \) \<br>
+ -delete 0 +swap -compose Multiply -composite button.gif
+ </div>
-<h4>Standard Out</h4>
- <p>Linux permits the output of one command to be piped to another. ImageMagick permits piping one command to another with a filename of <code>-</code>. In this example we pipe the output of <a href="../magick/index.html">magick</a> to the <a href="../display/index.html">display</a> program:
- </p>
+ <div class="alert alert-info mb-3 small">
+ <i class="bi bi-info-circle-fill me-2"></i>
+ <strong>Cross-Platform Note:</strong> Linux uses the backslash (<code>\</code>) for line continuation, whereas Windows uses a caret (<code>^</code>). Parentheses do not require escaping under Windows.
+ </div>
+ </div>
+</section>
+
+<!-- Visual Showcase Cards -->
+<div class="row g-4 mb-5">
+ <div class="col-md-6">
+ <div class="card im-card p-4 h-100">
+ <h6 class="fw-bold mb-3">2D Label to 3D Simulated Depth</h6>
+ <div class="d-flex align-items-center justify-content-center gap-3 bg-body-secondary p-3 rounded mb-3">
+ <a href="../image/label.gif" target="_blank"><img src="../image/label.gif" width="78" height="53" alt="label" class="border rounded"></a>
+ <i class="bi bi-arrow-right fs-4 text-primary"></i>
+ <a href="../image/button.gif" target="_blank"><img src="../image/button.gif" width="78" height="53" alt="button" class="border rounded"></a>
+ </div>
+ <p class="small text-body-secondary mb-0">Transform flat typography into rich, textured dimensional UI buttons using single-line execution.</p>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick logo: gif:- | magick display gif:-</samp></pre></pre>
+ <div class="col-md-6">
+ <div class="card im-card p-4 h-100">
+ <h6 class="fw-bold mb-3">Dynamic Shaded Progress Cylinder</h6>
+ <div class="text-center bg-body-secondary p-2 rounded mb-3">
+ <img src="../image/cylinder_shaded.png" alt="Shaded Cylinder" class="img-fluid rounded" style="max-height: 110px;">
+ </div>
+ <p class="small text-body-secondary mb-0">Generate complex vector-like primitives, gradients, shadows, and labels programmatically.</p>
+ </div>
+ </div>
+</div>
-<p>Here the explicit format is optional. The GIF image format has a signature that uniquely identifies it so ImageMagick can readily recognize the format as GIF.</p>
+<!-- Anatomy Section -->
+<section id="anatomy" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-diagram-3-fill fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">The Anatomy of the Command-line</h2>
+ </div>
+ <p class="text-body-secondary mb-3">An ImageMagick command string consists of the following modular building blocks:</p>
+
+ <div class="card im-card p-4">
+ <ul class="list-unstyled mb-0 d-flex flex-column gap-2">
+ <li><i class="bi bi-check2-circle text-success me-2"></i> One or more required <strong>input filenames</strong>.</li>
+ <li><i class="bi bi-check2-circle text-success me-2"></i> Zero, one, or more persistent <strong>image settings</strong>.</li>
+ <li><i class="bi bi-check2-circle text-success me-2"></i> Zero, one, or more immediate <strong>image operators</strong>.</li>
+ <li><i class="bi bi-check2-circle text-success me-2"></i> Zero, one, or more <strong>image sequence operators</strong>.</li>
+ <li><i class="bi bi-check2-circle text-success me-2"></i> Zero, one, or more isolated <strong>image stacks</strong> (parentheses).</li>
+ <li><i class="bi bi-check2-circle text-success me-2"></i> Zero or one <strong>output image filename</strong>.</li>
+ </ul>
+ </div>
+</section>
-<h4>Filename References</h4>
-<p>Optionally, use an embedded formatting character to write a sequential image list. Suppose our output filename is <code>image-%d.jpg</code> and our image list includes 3 images. You can expect these images files to be written:
-</p>
+<!-- Input Filename Section -->
+<section id="input" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-box-arrow-in-right fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Input Filename Extensions</h2>
+ </div>
+ <p class="text-body-secondary mb-4">ImageMagick extends input filenames far beyond simple file paths to support globbing, built-ins, and direct streams.</p>
+
+ <div class="row g-3">
+ <div class="col-md-6">
+ <div class="card im-card p-3 h-100">
+ <h6 class="fw-bold text-primary">Filename Globbing</h6>
+ <p class="small text-body-secondary mb-2">Wildcards like asterisks automatically match sets of files across all platforms (e.g., Windows and Linux):</p>
+ <div class="bg-dark text-light p-2 rounded small font-mono">$ magick *.jpg images.gif</div>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">image-0.jpg
-image-1.jpg
-image-2.jpg</pre>
+ <div class="col-md-6">
+ <div class="card im-card p-3 h-100">
+ <h6 class="fw-bold text-primary">Explicit Image Format</h6>
+ <p class="small text-body-secondary mb-2">Force signature-less raw data streams by prefixing formats explicitly:</p>
+ <div class="bg-dark text-light p-2 rounded small font-mono">$ magick -size 640x480 -depth 8 rgb:image image.png</div>
+ </div>
+ </div>
-<p>Or retrieve image properties to modify the image filename. For example, the command
-</p>
+ <div class="col-md-6">
+ <div class="card im-card p-3 h-100">
+ <h6 class="fw-bold text-primary">Built-in Images & Patterns</h6>
+ <p class="small text-body-secondary mb-2">Generate standard procedural patterns instantly:</p>
+ <div class="bg-dark text-light p-2 rounded small font-mono">$ magick -size 640x480 pattern:checkerboard checkerboard.png</div>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick rose: -set filename:area '%wx%h' 'rose-%[filename:area].png'</samp></pre></pre>
+ <div class="col-md-6">
+ <div class="card im-card p-3 h-100">
+ <h6 class="fw-bold text-primary">STDIN / STDOUT Pipes</h6>
+ <p class="small text-body-secondary mb-2">Stream image pipelines seamlessly between processes using <code>-</code>:</p>
+ <div class="bg-dark text-light p-2 rounded small font-mono">$ magick logo: gif:- | magick display gif:-</div>
+ </div>
+ </div>
+ </div>
+</section>
-<p>writes an image with this filename:
-</p>
+<!-- Options & Settings Sections -->
+<section id="option" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-sliders fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Command-line Options & Settings</h2>
+ </div>
+ <p class="text-body-secondary mb-4">Options dictate execution behavior and are categorized into persistent settings, immediate operators, sequence operators, and geometry modifiers.</p>
+
+ <!-- Settings Grid -->
+ <div id="setting" class="card im-card p-4 mb-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-gear me-2"></i> Image Settings (Persistent)</h5>
+ <p class="small text-body-secondary mb-3">Persist across the command line until execution terminates or settings are overridden:</p>
+ <ul class="list-unstyled d-flex flex-wrap gap-2 small font-mono">
+ <li><a href="../command-line-options/index.html#adjoin" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-adjoin</a></li>
+ <li><a href="../command-line-options/index.html#alpha" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-alpha</a></li>
+ <li><a href="../command-line-options/index.html#background" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-background</a></li>
+ <li><a href="../command-line-options/index.html#colorspace" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-colorspace</a></li>
+ <li><a href="../command-line-options/index.html#density" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-density</a></li>
+ <li><a href="../command-line-options/index.html#depth" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-depth</a></li>
+ <li><a href="../command-line-options/index.html#font" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-font</a></li>
+ <li><a href="../command-line-options/index.html#format" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-format</a></li>
+ <li><a href="../command-line-options/index.html#quality" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-quality</a></li>
+ <li><a href="../command-line-options/index.html#size" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">-size</a></li>
+ </ul>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">rose-70x46.png</pre>
+ <!-- Operators Grid -->
+ <div id="operator" class="card im-card p-4 mb-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-lightning-charge me-2"></i> Image Operators (Immediate)</h5>
+ <p class="small text-body-secondary mb-3">Execute immediately against the current active image set:</p>
+ <ul class="list-unstyled d-flex flex-wrap gap-2 small font-mono">
+ <li><a href="../command-line-options/index.html#blur" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-blur</a></li>
+ <li><a href="../command-line-options/index.html#charcoal" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-charcoal</a></li>
+ <li><a href="../command-line-options/index.html#crop" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-crop</a></li>
+ <li><a href="../command-line-options/index.html#despeckle" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-despeckle</a></li>
+ <li><a href="../command-line-options/index.html#flop" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-flop</a></li>
+ <li><a href="../command-line-options/index.html#negate" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-negate</a></li>
+ <li><a href="../command-line-options/index.html#resize" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-resize</a></li>
+ <li><a href="../command-line-options/index.html#rotate" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-rotate</a></li>
+ <li><a href="../command-line-options/index.html#sharpen" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-sharpen</a></li>
+ <li><a href="../command-line-options/index.html#trim" class="badge bg-primary-subtle text-primary-emphasis text-decoration-none p-2">-trim</a></li>
+ </ul>
+ </div>
+</section>
-<p>Finally to convert multiple JPEG images to individual PDF pages, use:</p>
+<!-- Geometry Section -->
+<section id="geometry" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-aspect-ratio fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Image Geometry Reference</h2>
+ </div>
+ <p class="text-body-secondary mb-4">Geometry arguments control target widths, heights, percentages, and coordinate offsets without spaces.</p>
+
+ <div class="card im-card overflow-hidden mb-4">
+ <div class="table-responsive" style="max-height: 500px;">
+ <table class="table table-hover table-striped mb-0 align-middle">
+ <thead class="table-dark">
+ <tr>
+ <th class="ps-3 font-mono">Size / Modifier</th>
+ <th class="pe-3">Description & Behavior</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono">scale%</td>
+ <td class="pe-3 small text-body-secondary">Height and width both scaled by specified percentage.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">widthxheight</td>
+ <td class="pe-3 small text-body-secondary">Maximum values of height and width given; aspect ratio preserved.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">widthxheight^</td>
+ <td class="pe-3 small text-body-secondary">Minimum values of width and height given; aspect ratio preserved.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">widthxheight!</td>
+ <td class="pe-3 small text-body-secondary">Width and height strictly forced; original aspect ratio ignored.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">widthxheight></td>
+ <td class="pe-3 small text-body-secondary">Shrink image only if dimensions are larger than specified bounds.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">widthxheight<</td>
+ <td class="pe-3 small text-body-secondary">Enlarge image only if dimensions are smaller than specified bounds.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">area@</td>
+ <td class="pe-3 small text-body-secondary">Resize image to total pixel area limit while preserving aspect ratio.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">size+x+y</td>
+ <td class="pe-3 small text-body-secondary">Pixel offset coordinates adjusted by gravity rules.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick *.jpg +adjoin page-%d.pdf</samp></pre></pre>
+<!-- Stack & Output Section -->
+<section id="stack" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-stack fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Image Stack & Output Management</h2>
+ </div>
+ <p class="text-body-secondary mb-4">Isolate operations using parenthesis blocks and export results using advanced formatting strings.</p>
-<p>Use <code>-define registry:filename:literal=true</code> to bypass interpreting embedded formatting characters and instead use the filename literally.</p>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-2">Isolated Stack Processing Example</h5>
+ <p class="small text-body-secondary mb-3">Apply rotation strictly inside a parentheses stack without affecting preceding files:</p>
+ <div class="bg-dark text-light p-3 rounded font-mono small">
+ $ magick wand.gif \( wizard.gif -rotate 30 \) +append images.gif
+ </div>
+ </div>
-<h4>Stream Buffering</h4>
+ <div id="output" class="card im-card p-4">
+ <h5 class="fw-bold mb-2">Sequential Output Formatting</h5>
+ <p class="small text-body-secondary mb-3">Extract property strings or format multi-page sequence outputs dynamically:</p>
+ <div class="bg-dark text-light p-3 rounded font-mono small mb-2">
+ $ magick rose: -set filename:area '%wx%h' 'rose-%[filename:area].png'
+ </div>
+ <div class="bg-dark text-light p-3 rounded font-mono small">
+ $ magick *.jpg +adjoin page-%d.pdf
+ </div>
+ </div>
+</section>
-<p>By default, the output stream is buffered. To ensure information appears on the destination file or terminal as soon as written, set the buffer size to 0:</p>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -define stream:buffer-size=0 logo: gif:- | magick display gif:-</samp></pre></pre>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/command-line-tools/index.html b/www/command-line-tools/index.html
index 493471b97..f983cac11 100644
--- a/www/command-line-tools/index.html
+++ b/www/command-line-tools/index.html
@@ -8,308 +8,569 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools</title>
- <meta name="description" content="Explore ImageMagick’s powerful command-line tools to create, edit, compose, and convert images. Learn how to automate tasks like resizing, cropping, animating, comparing, and streaming images with versatile utilities designed for dynamic workflows and batch processing.">
+ <meta name="description" content="Explore ImageMagick’s powerful command-line tools to create, edit, compose, and convert images across dynamic workflows and batch processing.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools">
- <meta property="og:description" content="Explore ImageMagick’s powerful command-line tools to create, edit, compose, and convert images. Learn how to automate tasks like resizing, cropping, animating, comparing, and streaming images with versatile utilities designed for dynamic workflows and batch processing.">
+ <meta property="og:description" content="Explore ImageMagick’s powerful command-line tools to create, edit, compose, and convert images across dynamic workflows and batch processing.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/command-line-tools/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore ImageMagick’s powerful command-line tools to create, edit, compose, and convert images across dynamic workflows and batch processing.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link active"" href="index.html">Tools</a>
+ <a class="nav-link active" href="index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/command-line-tools/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/command-line-tools/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore ImageMagick’s powerful command-line tools to create, edit, compose, and convert images across dynamic workflows and batch processing.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">ImageMagick is a collection of command-line tools that can be used to modify and manipulate images. While many people are used to using graphical user interfaces (GUIs) like Gimp or Photoshop to edit images individually, these tools may not always be practical. For instance, if you need to process an image dynamically from a web script or apply the same operations to multiple images, or if you need to repeat a specific operation on the same or different images at different times, using a command-line utility like ImageMagick may be more efficient.</p>
-
-<p>The ImageMagick <a href="../command-line-processing/index.html">command-line</a> tools exit with a status of 0 if the command line arguments have a proper syntax and no problems are encountered. Expect a descriptive message and an exit status of 1 if any exception occurs such as improper syntax, a problem reading or writing an image, or any other problem that prevents the command from completing successfully.</p>
-
-<p>Here is a short description for each command-line tool. Click on the program name to get details about the program usage and a list of command-line options that alters how the program behaves. If you are just getting acquainted with ImageMagick, start with the <a href="#magick">magick</a> program. Be sure to peruse Anthony Thyssen's tutorial on how to use ImageMagick utilities to <a href="https://usage.imagemagick.org/">create, edit, compose, or convert</a> images from the command-line.</p>
-
-<dl class="row">
- <dt class="col-md-4"><a class="anchor" id="magick"></a><a href="../magick/index.html">magick</a></dt><dd class="col-md-8">convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
- <dt class="col-md-4"><a class="anchor" id="magick-script"></a><a href="../magick-script/index.html">magick-script</a></dt><dd class="col-md-8">use this scripting language interpreter to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.</dd>
-</dl>
-<p>We also support sub-commands for compatibility with ImageMagick <a href="http://legacy.imagemagick.org/">version 6</a>:</p>
-<dl class="row">
- <dt class="col-md-4"><a href="../animate/index.html">magick animate</a></dt><dd class="col-md-8">animate an image sequence on any X server.</dd>
- <dt class="col-md-4"><a class="anchor" id="compare"></a><a href="../compare/index.html">magick compare</a></dt><dd class="col-md-8">mathematically and visually annotate the difference between an image and its reconstruction.</dd>
- <dt class="col-md-4"><a class="anchor" id="composite"></a><a href="../composite/index.html">magick composite</a></dt><dd class="col-md-8">overlap one image over another.</dd>
- <dt class="col-md-4"><a class="anchor" id="conjure"></a><a href="../conjure/index.html">magick conjure</a></dt><dd class="col-md-8">interpret and execute scripts written in the Magick Scripting Language (MSL).</dd>
- <dt class="col-md-4"><a class="anchor" id="display"></a><a href="../display/index.html">magick display</a></dt><dd class="col-md-8">display an image or image sequence on any X server.</dd>
- <dt class="col-md-4"><a class="anchor" id="identify"></a><a href="../identify/index.html">magick identify</a></dt><dd class="col-md-8">describe the format and characteristics of one or more image files.</dd>
- <dt class="col-md-4"><a class="anchor" id="import"></a><a href="../import/index.html">magick import</a></dt><dd class="col-md-8">save any visible window on an X server and outputs it as an image file. You can capture a single window, the entire screen, or any rectangular portion of the screen.</dd>
- <dt class="col-md-4"><a class="anchor" id="mogrify"></a><a href="../mogrify/index.html">magick mogrify</a></dt><dd class="col-md-8">resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. Mogrify overwrites the original image file, whereas, <a href="../magick/index.html">magick</a> writes to a different image file.</dd>
- <dt class="col-md-4"><a class="anchor" id="montage"></a><a href="../montage/index.html">magick montage</a></dt><dd class="col-md-8">create a composite image by combining several separate images. The images are tiled on the composite image optionally adorned with a border, frame, image name, and more.</dd>
- <dt class="col-md-4"><a class="anchor" id="stream"></a><a href="../stream/index.html">magick stream</a></dt><dd class="col-md-8">a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats. It writes the pixel components as they are read from the input image a row at a time making <code>stream</code> desirable when working with large images or when you require raw pixel components.</dd>
-</dl>
-<p>Your installation may have direct ImageMagick version 6 compatibility links. If so, you can access the tools directly by referring to them by name. For example,
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -verbose myImage.png</samp></pre>
-
-</div>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Intro Section -->
+<section class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border">
+ <p class="lead mb-4">
+ ImageMagick is a collection of command-line tools for modifying and manipulating images. While graphical interfaces (GUIs) like Gimp or Photoshop are useful for individual edits, command-line utilities are far more efficient for web script automation, batch processing multiple files, or repeating complex tasks.
+ </p>
+ </div>
+</section>
+<!-- Core Tools Section -->
+<section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-terminal-fill fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Core Tools</h2>
+ </div>
+ <p class="text-body-secondary mb-4">
+ If you are just getting acquainted with ImageMagick, start with the <a href="#magick" class="text-decoration-none fw-medium">magick</a> program.
+ </p>
+
+ <div class="row row-cols-1 row-cols-md-2 g-4 mb-4">
+ <div class="col">
+ <div class="card h-100 im-card p-4 border-primary">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="../magick/index.html" class="fw-bold fs-5 text-decoration-none font-mono">magick</a>
+ <span class="badge bg-primary">Primary Tool</span>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
- </div>
+ <p class="small text-body-secondary mb-0">
+ Convert between image formats as well as resize, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.
+ </p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-4">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="../magick-script/index.html" class="fw-bold fs-5 text-decoration-none font-mono">magick-script</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Interpreter</span>
</div>
+ <p class="small text-body-secondary mb-0">
+ Use this scripting language interpreter to convert, resize, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and more.
+ </p>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+ </div>
+</section>
+
+<!-- Compatibility Sub-commands Section -->
+<section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-layers-fill fs-3 text-secondary"></i>
+ <h2 class="fw-bold mb-0">Version 6 Compatibility Sub-commands</h2>
+ </div>
+ <p class="text-body-secondary mb-4">
+ ImageMagick supports legacy compatibility sub-commands for seamless workflow transitions from <a href="http://legacy.imagemagick.org/" target="_blank" class="text-decoration-none">version 6</a>.
+ </p>
+
+ <div class="row row-cols-1 row-cols-md-2 g-3">
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../animate/index.html" class="fw-bold text-decoration-none font-mono">magick animate</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Animation</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Animate an image sequence on any X server.</p>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../compare/index.html" class="fw-bold text-decoration-none font-mono">magick compare</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Analysis</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Mathematically and visually annotate the difference between an image and its reconstruction.</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../composite/index.html" class="fw-bold text-decoration-none font-mono">magick composite</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Composition</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Overlap one image over another.</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../conjure/index.html" class="fw-bold text-decoration-none font-mono">magick conjure</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Scripting</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Interpret and execute scripts written in the Magick Scripting Language (MSL).</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../display/index.html" class="fw-bold text-decoration-none font-mono">magick display</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Viewer</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Display an image or image sequence on any X server.</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../identify/index.html" class="fw-bold text-decoration-none font-mono">magick identify</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Inspection</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Describe the format and characteristics of one or more image files.</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../import/index.html" class="fw-bold text-decoration-none font-mono">magick import</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Capture</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Save any visible window or rectangular screen portion on an X server as an image file.</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../mogrify/index.html" class="fw-bold text-decoration-none font-mono">magick mogrify</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Batch Edit</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Resize, blur, crop, etc. Overwrites original source files directly (unlike <code>magick</code>).</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../montage/index.html" class="fw-bold text-decoration-none font-mono">magick montage</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Grid Layout</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Create a composite image by combining tiled separate images with optional frames and borders.</p>
+ </div>
+ </div>
+
+ <div class="col">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-1">
+ <a href="../stream/index.html" class="fw-bold text-decoration-none font-mono">magick stream</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Streaming</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Lightweight tool to stream raw pixel components row-by-row, ideal for large or tera-pixel images.</p>
+ </div>
+ </div>
+
</div>
+</section>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+<!-- Example Usage Snippet -->
+<section class="card im-card p-4">
+ <h6 class="fw-bold mb-2"><i class="bi bi-code-square me-2 text-primary"></i> Direct Command Execution</h6>
+ <p class="small text-body-secondary mb-3">
+ If your installation includes direct v6 compatibility symlinks, you can reference tools directly from your terminal:
+ </p>
+ <div class="bg-dark text-light p-3 rounded font-mono small">
+ $ magick identify -verbose myImage.png
+ </div>
+</section>
+
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/compare/index.html b/www/compare/index.html
index 2f1b4662b..f54c30ed1 100644
--- a/www/compare/index.html
+++ b/www/compare/index.html
@@ -11,648 +11,725 @@
<meta name="description" content="Learn how to use ImageMagick’s Compare tool to visually and mathematically analyze differences between images. Explore example commands, metrics like RMSE and PSNR, and advanced options including subimage search and FFTW acceleration.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Compare">
<meta property="og:description" content="Learn how to use ImageMagick’s Compare tool to visually and mathematically analyze differences between images. Explore example commands, metrics like RMSE and PSNR, and advanced options including subimage search and FFTW acceleration.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Compare">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Compare",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/compare/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to use ImageMagick’s Compare tool to visually and mathematically analyze differences between images. Explore example commands, metrics like RMSE and PSNR, and advanced options including subimage search and FFTW acceleration.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/compare/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/compare/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Compare</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>compare</code> program to mathematically and visually annotate the difference between an image and its reconstruction. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>compare</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>compare</code> command here to illustrate its usefulness and ease of use. To get started, lets compare an image to one that's been sharpened:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Compare</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to use ImageMagick’s Compare tool to visually and mathematically analyze differences between images. Explore example commands, metrics like RMSE and PSNR, and advanced options including subimage search and FFTW acceleration.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg -sharpen 0x1 reconstruct.jpg
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="comparison-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#usage" class="text-decoration-none text-primary"><i class="bi bi-terminal me-1"></i> Example Usage</a>
+ <span class="text-muted">•</span>
+ <a href="#options" class="text-decoration-none text-primary"><i class="bi bi-list-columns me-1"></i> Option Summary</a>
+ </div>
+ </div>
+ <p class="lead text-body-secondary mb-4">
+ Use the <code>compare</code> program to mathematically and visually annotate the difference between an image and its reconstruction. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>compare</code> command or explore the examples below.
+ </p>
+ <!-- Example Usage Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="usage">
+ <a class="anchor text-decoration-none text-body" href="#usage">Example Usage</a>
+ </h2>
+ <p>We list a few examples of the <code>compare</code> command here to illustrate its usefulness and ease of use. To get started, let's compare an image to one that's been sharpened:</p>
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <pre class="p-3 mb-3 text-body-secondary bg-body-tertiary rounded border font-mono small"><code>$ magick rose.jpg -sharpen 0x1 reconstruct.jpg
$ magick compare rose.jpg reconstruct.jpg difference.png
-$ magick compare -compose src rose.jpg reconstruct.jpg difference.png </samp></pre>
-
-<ul>
- <a href="../image/rose.jpg"><img src="../image/rose.jpg" width="70" height="46" alt="rose" /></a>
- <a href="https://imagemagick.org/image/reconstruct.jpg"><img src="https://imagemagick.org/image/reconstruct.jpg" width="70" height="46" alt="rose" /></a>
- <img style="margin:13px 0;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="https://imagemagick.org/image/difference.png"><img src="https://imagemagick.org/image/difference.png" width="70" height="46" alt="rose" /></a>
-</ul>
-
-<p>The red areas of the difference image emphasizes (highlight) pixels that are affected by the image sharpening, whereas white de-emphasizes (lowlight) pixels that are untouched by the sharpening process.</p>
-
-<p>In addition to the visual interpretation of the difference in an image and its reconstruction, we report a mathematical measure of the difference:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick compare -verbose -metric rmse rose.jpg reconstruct.jpg difference.png
+$ magick compare -compose src rose.jpg reconstruct.jpg difference.png</code></pre>
+ <!-- Visual Image Flow Showcase -->
+ <div class="d-flex align-items-center justify-content-center flex-wrap gap-3 p-3 bg-body-tertiary rounded border">
+ <div class="text-center">
+ <a href="https://imagemagick.org/image/rose.jpg" target="_blank" class="d-block mb-1">
+ <img src="https://imagemagick.org/image/rose.jpg" width="70" height="46" alt="Original Rose" class="rounded shadow-sm border" />
+ </a>
+ <span class="small text-muted font-mono">rose.jpg</span>
+ </div>
+ <div class="text-center">
+ <a href="https://imagemagick.org/image/reconstruct.jpg" target="_blank" class="d-block mb-1">
+ <img src="https://imagemagick.org/image/reconstruct.jpg" width="70" height="46" alt="Reconstructed Rose" class="rounded shadow-sm border" />
+ </a>
+ <span class="small text-muted font-mono">reconstruct.jpg</span>
+ </div>
+ <div>
+ <img src="https://imagemagick.org/image/right.gif" width="20" height="20" alt="==>" class="opacity-75" />
+ </div>
+ <div class="text-center">
+ <a href="https://imagemagick.org/image/difference.png" target="_blank" class="d-block mb-1">
+ <img src="https://imagemagick.org/image/difference.png" width="70" height="46" alt="Difference Result" class="rounded shadow-sm border" />
+ </a>
+ <span class="small text-muted font-mono">difference.png</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ <p>The red areas of the difference image emphasize (highlight) pixels that are affected by the image sharpening, whereas white de-emphasizes (lowlight) pixels that are untouched by the sharpening process.</p>
+ <p>In addition to the visual interpretation of the difference in an image and its reconstruction, we report a mathematical measure of the difference:</p>
+ <pre class="p-3 mb-3 text-body-secondary bg-body-tertiary rounded border font-mono small"><code>$ magick compare -verbose -metric rmse rose.jpg reconstruct.jpg difference.png
Image: rose.jpg
Channel distortion: RMSE
red: 2833.91 (0.0432427)
green: 2401.45 (0.0366438)
blue: 2560.43 (0.0390696)
- all: 2604.73 (0.0397456)
-</samp></pre>
-<p>Or, if you just want the red channel distortion, use this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick compare -channel red -metric PSNR rose.jpg reconstruct.jpg difference.png
-27.2817 (0.227348) </samp></pre>
-
-<p>Or, if you just want the overall image distortion, use this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick compare -metric PSNR rose.jpg reconstruct.jpg difference.png
-28.0142 (0.233452) </samp></pre>
-
-<p>If the reconstructed image is a subimage of the image, the compare program returns the best match offset. In addition, it returns a similarity image such that an exact match location is completely white and if none of the pixels match, black, otherwise some gray level in-between:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick compare -metric NCC -subimage-search logo.png hat.png similarity.pfm
+ all: 2604.73 (0.0397456)</code></pre>
+ <p>Or, if you just want the red channel distortion, use this command:</p>
+ <pre class="p-3 mb-3 text-body-secondary bg-body-tertiary rounded border font-mono small"><code>$ magick compare -channel red -metric PSNR rose.jpg reconstruct.jpg difference.png
+27.2817 (0.227348)</code></pre>
+ <p>Or, if you just want the overall image distortion, use this command:</p>
+ <pre class="p-3 mb-3 text-body-secondary bg-body-tertiary rounded border font-mono small"><code>$ magick compare -metric PSNR rose.jpg reconstruct.jpg difference.png
+28.0142 (0.233452)</code></pre>
+ <p>If the reconstructed image is a subimage of the image, the compare program returns the best match offset. In addition, it returns a similarity image such that an exact match location is completely white and if none of the pixels match, black, otherwise some gray level in-between:</p>
+ <pre class="p-3 mb-3 text-body-secondary bg-body-tertiary rounded border font-mono small"><code>$ magick compare -metric NCC -subimage-search logo.png hat.png similarity.pfm
0 (0) @ 417,44 [0]
$ magick identify -define identify:locate=maximum -define identify:limit=1 similarity.pfm
Channel maximum locations:
- Gray: 65532.9 (0.999967) 417,44
-</samp></pre>
-
-<p>The value in the brackets is the normalized similarity metric.</p>
-
-<p>Note, similarity search respects the virtual page offset. To ensure expected results, make sure your image page offset is +0+0.</p>
-
-<p>The subimage search feature in ImageMagick can be quite slow due to its iterative nature. However, if your release of ImageMagick includes FFTW (Fastest Fourier Transform in the West) support and your metric is DPC, MSE, NCC, RMSE, PHASE, or PSNR, you can expect an order of magnitude speed increase in processing time. For discussion, refer to <a href="https://github.com/ImageMagick/ImageMagick/discussions/3950" target="_blank">Accelerated Subimage-search Compare</a>.</p>
-
-<p>If the <code>-subimage-search</code> option is not enabled, ImageMagick performs a direct pixel-by-pixel comparison between the two images, starting from their page offset, typically the top-left corners. In cases where the images differ in size, the smaller image is aligned with the larger one. The extra areas in the smaller image are treated as virtual pixels. These virtual pixels can be processed according to the chosen virtual pixel method, which influences how unmatched regions are handled in the comparison. Consequently, the comparison metrics may be affected by these additional areas, potentially impacting the overall similarity assessment. To only compare authentic pixels, use <code>-define compare:virtual-pixels=false</code>.</p>
-
-<p>You can find additional examples of using <code>compare</code> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<p>Two images are considered similar if their difference according to the specified metric and fuzz value is 0, with the exception of the normalized cross correlation metric (NCC), where two images are considered similar when their normalized cross correlation is 1. The default metric is NCC.</p>
-
-<p>The compare program returns 2 on error, 0 if the images are similar, or a value between 0 and 1 if they are not similar.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>compare</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#brightness-contrast">-brightness-contrast <var>geometry</var></a></td>
- <td>improve brightness / contrast of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>crop the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dissimilarity-threshold">-dissimilarity-threshold <var>value</var></a></td>
- <td>maximum distortion for (sub)image match (default 0.2)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distort">-distort <var>type coefficients</var></a></td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fuzz">-fuzz <var>distance</var></a></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#highlight-color">-highlight-color <var>color</var></a></td>
- <td>emphasize pixel differences with this color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#level">-level <var>value</var></a></td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#lowlight-color">-lowlight-color <var>color</var></a></td>
- <td>de-emphasize pixel differences with this color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#metric">-metric <var>type</var></a></td>
- <td>measure differences between images with this metric. The default metric is RMSE.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#read-mask">-read-mask <var>filename</var></a></td>
- <td>associate a read mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#separate">-separate</a></td>
- <td>separate an image channel into a grayscale image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sigmoidal">-sigmoidal-contrast <var>geometry</var></a></td>
- <td>increase the contrast without saturating highlights or shadows</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#similarity-threshold">-similarity-threshold <var>value</var></a></td>
- <td>minimum distortion for (sub)image match (default 0.0)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#subimage-search">-subimage-search</a></td>
- <td>search for subimage</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write-mask">-write-mask <var>filename</var></a></td>
- <td>associate a write mask with the image</td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ Gray: 65532.9 (0.999967) 417,44</code></pre>
+ <p>The value in the brackets is the normalized similarity metric.</p>
+ <blockquote class="border-start border-4 border-primary ps-3 my-4 text-muted small">
+ <p class="mb-0"><strong>Note:</strong> Similarity search respects the virtual page offset. To ensure expected results, make sure your image page offset is +0+0.</p>
+ </blockquote>
+ <p>The subimage search feature in ImageMagick can be quite slow due to its iterative nature. However, if your release of ImageMagick includes FFTW (Fastest Fourier Transform in the West) support and your metric is DPC, MSE, NCC, RMSE, PHASE, or PSNR, you can expect an order of magnitude speed increase in processing time. For discussion, refer to <a href="https://github.com/ImageMagick/ImageMagick/discussions/3950" target="_blank" class="text-decoration-none">Accelerated Subimage-search Compare <i class="bi bi-box-arrow-up-right small"></i></a>.</p>
+ <p>If the <code>-subimage-search</code> option is not enabled, ImageMagick performs a direct pixel-by-pixel comparison between the two images, starting from their page offset, typically the top-left corners. In cases where the images differ in size, the smaller image is aligned with the larger one. The extra areas in the smaller image are treated as virtual pixels. These virtual pixels can be processed according to the chosen virtual pixel method, which influences how unmatched regions are handled in the comparison. Consequently, the comparison metrics may be affected by these additional areas, potentially impacting the overall similarity assessment. To only compare authentic pixels, use <code>-define compare:virtual-pixels=false</code>.</p>
+ <p>You can find additional examples of using <code>compare</code> in <a href="https://usage.imagemagick.org/" class="text-decoration-none">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a>.</p>
+ <p>Two images are considered similar if their difference according to the specified metric and fuzz value is 0, with the exception of the normalized cross correlation metric (NCC), where two images are considered similar when their normalized cross correlation is 1. The default metric is NCC.</p>
+ <p class="mb-5">The compare program returns 2 on error, 0 if the images are similar, or a value between 0 and 1 if they are not similar.</p>
+ <!-- Option Summary Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">Option Summary</a>
+ </h2>
+ <p class="text-body-secondary mb-3">The <code>compare</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
+ <div class="card im-card shadow-sm overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width:30%">
+ <col style="width:70%">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Option</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#adjoin" class="text-decoration-none fw-semibold">-adjoin</a></td>
+ <td>join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#alpha" class="text-decoration-none fw-semibold">-alpha</a></td>
+ <td>on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#authenticate" class="text-decoration-none fw-semibold">-authenticate <var>value</var></a></td>
+ <td>decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#auto-orient" class="text-decoration-none fw-semibold">-auto-orient</a></td>
+ <td>automagically orient image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#background" class="text-decoration-none fw-semibold">-background <var>color</var></a></td>
+ <td>background color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#brightness-contrast" class="text-decoration-none fw-semibold">-brightness-contrast <var>geometry</var></a></td>
+ <td>improve brightness / contrast of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-semibold">-channel <var>type</var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-semibold">-colorspace <var>type</var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#compose" class="text-decoration-none fw-semibold">-compose <var>operator</var></a></td>
+ <td>set image composite operator</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#crop" class="text-decoration-none fw-semibold">-crop <var>geometry</var></a></td>
+ <td>crop the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#decipher" class="text-decoration-none fw-semibold">-decipher <var>filename</var></a></td>
+ <td>convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-semibold">-debug <var>events</var></a></td>
+ <td>display copious debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#define" class="text-decoration-none fw-semibold">-define <var>format:option</var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#density" class="text-decoration-none fw-semibold">-density <var>geometry</var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-semibold">-depth <var>value</var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#dissimilarity-threshold" class="text-decoration-none fw-semibold">-dissimilarity-threshold <var>value</var></a></td>
+ <td>maximum distortion for (sub)image match (default 0.2)</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#distort" class="text-decoration-none fw-semibold">-distort <var>type coefficients</var></a></td>
+ <td>distort image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#encipher" class="text-decoration-none fw-semibold">-encipher <var>filename</var></a></td>
+ <td>convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#extract" class="text-decoration-none fw-semibold">-extract <var>geometry</var></a></td>
+ <td>extract area from image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#fuzz" class="text-decoration-none fw-semibold">-fuzz <var>distance</var></a></td>
+ <td>colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#gravity" class="text-decoration-none fw-semibold">-gravity <var>type</var></a></td>
+ <td>horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#help" class="text-decoration-none fw-semibold">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#highlight-color" class="text-decoration-none fw-semibold">-highlight-color <var>color</var></a></td>
+ <td>emphasize pixel differences with this color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#identify" class="text-decoration-none fw-semibold">-identify</a></td>
+ <td>identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-semibold">-interlace <var>type</var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#level" class="text-decoration-none fw-semibold">-level <var>value</var></a></td>
+ <td>adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-semibold">-limit <var>type value</var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#log" class="text-decoration-none fw-semibold">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#lowlight-color" class="text-decoration-none fw-semibold">-lowlight-color <var>color</var></a></td>
+ <td>de-emphasize pixel differences with this color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#metric" class="text-decoration-none fw-semibold">-metric <var>type</var></a></td>
+ <td>measure differences between images with this metric. The default metric is RMSE.</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#negate" class="text-decoration-none fw-semibold">-negate</a></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#profile" class="text-decoration-none fw-semibold">-profile <var>filename</var></a></td>
+ <td>add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quality" class="text-decoration-none fw-semibold">-quality <var>value</var></a></td>
+ <td>JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quantize" class="text-decoration-none fw-semibold">-quantize <var>colorspace</var></a></td>
+ <td>reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-semibold">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#read-mask" class="text-decoration-none fw-semibold">-read-mask <var>filename</var></a></td>
+ <td>associate a read mask with the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-semibold">-regard-warnings</a></td>
+ <td>pay attention to warning messages.</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#repage" class="text-decoration-none fw-semibold">-repage <var>geometry</var></a></td>
+ <td>size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#resize" class="text-decoration-none fw-semibold">-resize <var>geometry</var></a></td>
+ <td>resize the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-semibold">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary.</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#rotate" class="text-decoration-none fw-semibold">-rotate <var>degrees</var></a></td>
+ <td>apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-semibold">-sampling-factor <var>geometry</var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-semibold">-seed <var>value</var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#separate" class="text-decoration-none fw-semibold">-separate</a></td>
+ <td>separate an image channel into a grayscale image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#set" class="text-decoration-none fw-semibold">-set <var>attribute value</var></a></td>
+ <td>set an image attribute</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#sigmoidal" class="text-decoration-none fw-semibold">-sigmoidal-contrast <var>geometry</var></a></td>
+ <td>increase the contrast without saturating highlights or shadows</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#similarity-threshold" class="text-decoration-none fw-semibold">-similarity-threshold <var>value</var></a></td>
+ <td>minimum distortion for (sub)image match (default 0.0)</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#size" class="text-decoration-none fw-semibold">-size <var>geometry</var></a></td>
+ <td>width and height of image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#subimage-search" class="text-decoration-none fw-semibold">-subimage-search</a></td>
+ <td>search for subimage</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#synchronize" class="text-decoration-none fw-semibold">-synchronize</a></td>
+ <td>synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#taint" class="text-decoration-none fw-semibold">-taint</a></td>
+ <td>mark the image as modified</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#transparent-color" class="text-decoration-none fw-semibold">-transparent-color <var>color</var></a></td>
+ <td>transparent color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#trim" class="text-decoration-none fw-semibold">-trim</a></td>
+ <td>trim image edges</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-semibold">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#version" class="text-decoration-none fw-semibold">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-semibold">-virtual-pixel <var>method</var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#write-mask" class="text-decoration-none fw-semibold">-write-mask <var>filename</var></a></td>
+ <td>associate a write mask with the image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/compose/index.html b/www/compose/index.html
index 6426e718a..0ecdb8ade 100644
--- a/www/compose/index.html
+++ b/www/compose/index.html
@@ -11,1175 +11,946 @@
<meta name="description" content="Complete guide to ImageMagick's -compose operators: Porter–Duff alpha blending, mathematical, lighting, and SVG 1.2 blend modes, with CLI examples.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Alpha Compositing">
<meta property="og:description" content="Complete guide to ImageMagick's -compose operators: Porter–Duff alpha blending, mathematical, lighting, and SVG 1.2 blend modes, with CLI examples.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Alpha Compositing">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Alpha Compositing",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/compose/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Complete guide to ImageMagick's -compose operators: Porter–Duff alpha blending, mathematical, lighting, and SVG 1.2 blend modes, with CLI examples.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/compose/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/compose/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Alpha Compositing</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<div id="cli-examples"></div>
-
-<p class="lead">This page describes the image composition methods that define how
-two images are merged together during the many image operations that combine a
-'source' (overlay) image with a 'destination' (background) image. For the
-Command Line API the method is normally selected with the <a
-href="../command-line-options/index.html#compose">-compose</a> setting, and then applied by
-operators such as <a href="../command-line-options/index.html#composite">-composite</a>,
-<a href="../command-line-options/index.html#layers">-layers</a>, <a
-href="../command-line-options/index.html#flatten">-flatten</a>, <a
-href="../command-line-options/index.html#mosaic">-mosaic</a>, <a
-href="../command-line-options/index.html#draw">-draw</a>, and many others. </p>
-
-<p>Most of the alpha-blending operators, and a large number of the blend
-(lighting) modes, follow the W3C <a href="https://www.w3.org/TR/SVGCompositing/"
->SVG Compositing Specification</a>, which extends the SVG 1.1 and
-SVG 1.2 languages with the full set of <a
-href="https://en.wikipedia.org/wiki/Alpha_compositing">Porter–Duff</a>
-alpha operators and blend modes. Where an operator is defined by that standard,
-ImageMagick implements the same mathematical result, so the behaviour is
-directly comparable to SVG, PDF, and most modern graphics libraries. You can
-review the precise formulae in the SVG specification, or in the ImageMagick
-"<a href="https://usage.imagemagick.org/compose/">Compositing Images</a>" usage
-examples.</p>
-
-<p>The description of composition uses abstract terminology in order to keep the
-definitions precise, while avoiding constant values that are specific to a
-particular build configuration. Each image pixel is represented by red, green,
-and blue levels (which are equal for a gray pixel). The build-dependent value
-<var>QuantumRange</var> is the maximum value that may be stored, per pixel, in
-the red, green, or blue channels of the image. Each image pixel may also
-optionally (if the image alpha/matte channel is enabled) have an associated
-level of opacity, ranging from <var>opaque</var> to <var>transparent</var>,
-which determines the influence of the pixel color when it is composited with
-another image pixel. If the alpha channel is disabled, then all pixels in the
-image are treated as opaque. The color of an opaque pixel is fully visible,
-while the color of a fully transparent pixel is entirely absent (its color is
-ignored).</p>
-
-<p>By definition, raster images have a rectangular shape: all image rows are of
-equal length, as are all image columns. By treating the alpha channel as a
-visual "mask", the rectangular image may be given an arbitrary "shape", with the
-alpha channel acting as a cookie-cutter for the image. This is done by setting
-the pixels within the shape to be opaque, and the pixels outside the shape to be
-transparent. Pixels on the boundary of the shape may lie between opaque and
-transparent in order to provide antialiasing (visually smooth edges). The
-descriptions of the composition operators use this concept of image "shape" to
-make them easier to understand. While it is convenient to describe the operators
-in terms of "shapes", they are by no means limited to mask-style operations,
-since they are based on continuous floating-point mathematics rather than simple
-boolean operations.</p>
-
-<p>The compose method names are case-insensitive, and the '<code>_</code>' or
-'<code>-</code>' separators are optional. As such the method
-'<code>Dst-Over</code>' may equally be written as '<code>dst_over</code>',
-'<code>DstOver</code>', or '<code>dstover</code>'. They all mean the same
-thing.</p>
-
-<h2>Duff–Porter Alpha Composition Methods</h2>
-
-<p>The following alpha-blending (Duff–Porter) compose methods are
-available. These are the twelve classical Porter–Duff operators, defined
-by the SVG 1.2 Compositing standard, which merge two images purely
-according to their transparency (alpha channel).</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>clear</td>
- <td>Both the color and the alpha of the destination are cleared. Neither the
- source nor the destination is used as input (except for the
- destination's size and other meta-data, which are always preserved).
- The result is a fully transparent image.</td>
- </tr>
-
- <tr>
- <td>src</td>
- <td>The source is copied to the destination. The destination is not used as
- input; it is completely replaced, and any area not overlaid by the
- source is cleared to transparency.</td>
- </tr>
-
- <tr>
- <td>dst</td>
- <td>The destination is left untouched. The source image is completely
- ignored. This is effectively a "no operation" for the color data,
- useful mainly for testing or for building larger expressions.</td>
- </tr>
-
- <tr>
- <td>src-over</td>
- <td>The source is composited over the destination. This is the default
- alpha-blending compose method, used when the compose setting is neither
- set on the command line nor recorded in the image meta-data. It is the
- result most people expect when overlaying one image on another.</td>
- </tr>
-
- <tr>
- <td>dst-over</td>
- <td>The destination is composited over the source, and the result replaces
- the destination. In effect the source is placed <em>under</em> the
- destination, so only the parts of the source not hidden by the
- destination remain visible. This is ideal for adding backgrounds or
- drop shadows without altering the destination's size.</td>
- </tr>
-
- <tr>
- <td>src-in</td>
- <td>The part of the source lying inside of the destination shape replaces
- the destination. Everything outside the overlap (including the original
- destination) is cleared to transparency.</td>
- </tr>
-
- <tr>
- <td>dst-in</td>
- <td>The part of the destination lying inside of the source shape replaces
- the destination. Areas not overlaid are cleared. This is a convenient
- way to use the source purely as an alpha mask for the destination.</td>
- </tr>
-
- <tr>
- <td>src-out</td>
- <td>The part of the source lying outside of the destination shape replaces
- the destination. The overlapping region and the original destination are
- cleared to transparency.</td>
- </tr>
-
- <tr>
- <td>dst-out</td>
- <td>The part of the destination lying outside of the source shape replaces
- the destination. In other words, the source shape is "punched out" of
- the destination, leaving a hole.</td>
- </tr>
-
- <tr>
- <td>src-atop</td>
- <td>The part of the source lying inside of the destination shape is
- composited onto the destination. The destination keeps its shape and
- alpha, while the source colors sit on top within that shape.</td>
- </tr>
-
- <tr>
- <td>dst-atop</td>
- <td>The part of the destination lying inside of the source shape is
- composited over the source and replaces the destination. Areas not
- overlaid are cleared. The result keeps the shape of the source but the
- colors of the destination within it.</td>
- </tr>
-
- <tr>
- <td>xor</td>
- <td>The part of the source that lies outside of the destination is combined
- with the part of the destination that lies outside of the source. That
- is, the result shows the source or the destination, but not where the
- two overlap (which is cleared).</td>
- </tr>
-
- </tbody>
-</table>
-</div>
-
-<p>Any of the '<code>Src-*</code>' methods can also be specified without the
-'<code>Src-</code>' prefix. For example the default compose method may be
-specified as just '<code>Over</code>', and similarly '<code>In</code>',
-'<code>Out</code>', and '<code>ATop</code>' are shorthand for
-'<code>Src-In</code>', '<code>Src-Out</code>', and '<code>Src-ATop</code>'.</p>
-
-<p>Many of these compose methods will clear the part of the destination image
-that was not overlaid by the source image. This is an intended part of that
-method's definition. The methods that clear the un-overlaid area are
-'<code>Clear</code>', '<code>Src</code>', '<code>Src-In</code>',
-'<code>Dst-In</code>', '<code>Src-Out</code>', and '<code>Dst-ATop</code>'. You
-can disable this behaviour by setting the special <a
-href="../command-line-options/index.html#define">-define</a>
-'<code>compose:outside-overlay</code>' to a value of '<code>false</code>', so
-that only the overlaid region is modified.</p>
-
-<p>On top of the above twelve Duff–Porter alpha-composition methods, one
-special related method '<code>Copy</code>' is provided. It is equivalent to
-using '<code>Src</code>' with the '<code>compose:outside-overlay</code>' define
-set to '<code>false</code>', so as to modify only the overlaid area without
-clearing the rest of the destination image.</p>
-
-<p>For example, to overlay a centered label over the built-in rose image using
-the default '<code>Over</code>' method…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>magick rose: label.png -gravity center -compose Over -composite result.png</samp></pre>
-
-<p>Or, to place the overlay <em>under</em> the destination — handy for
-adding a hard drop shadow without changing the image size…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>magick label_white.png label_black.png -geometry +5+5 -compose Dst-Over -composite shadow.png</samp></pre>
-
-<h2>Mathematical Composition Methods</h2>
-
-<p>The following mathematical composition methods are also available. Rather
-than blending by transparency, these combine the source and destination
-color channels using a specific arithmetic or comparison formula. Several of
-them (<code>Multiply</code>, <code>Screen</code>, <code>Darken</code>,
-<code>Lighten</code>, <code>Difference</code>, and <code>Exclusion</code>) are
-the "separable blend modes" defined by the SVG 1.2 Compositing standard,
-and behave identically to their SVG, PDF, and Photoshop equivalents.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>multiply</td>
- <td>The source is multiplied by the destination and replaces the
- destination. The resultant color is always at least as dark as either
- of the two constituent colors. Multiplying any color with black produces
- black; multiplying any color with white leaves the original color
- unchanged.</td>
- </tr>
-
- <tr>
- <td>divide</td>
- <td>Works by dividing the pixel values of one input image by those of another, channel by channel. This produces specialized blending effects, often for normalization or highlighting contrasts.</td>
- </tr>
-
- <tr>
- <td>screen</td>
- <td>The source and destination are complemented, then multiplied, and the
- result is complemented again and replaces the destination. The resultant
- color is always at least as light as either of the two constituent
- colors. Screening any color with white produces white; screening any
- color with black leaves the original color unchanged. It is the
- mathematical opposite of '<code>Multiply</code>'.</td>
- </tr>
-
- <tr>
- <td>bumpmap</td>
- <td>The intensity (grayscale value) of the source is multiplied with the
- destination color. Unlike '<code>Multiply</code>', which multiplies each
- channel by the matching source channel, '<code>Bumpmap</code>' uses the
- single luminance of the source to shade the destination, which makes it
- well suited to applying an embossed or relief texture as a light/shadow
- map.</td>
- </tr>
-
- <tr>
- <td>divide-dst</td>
- <td>Performs a true mathematical division of the destination color by the
- source color, channel by channel ( <code>Dc / Sc</code> ), and replaces
- the destination. Where the two images are equal the result is white
- (1.0). This is the standard '<code>Divide</code>' operator, and is an
- efficient built-in replacement for the equivalent (but slow) <a
- href="../command-line-options/index.html#fx">-fx</a> "divide" expression. It is
- widely used to flatten uneven lighting or remove a background gradient,
- e.g. by dividing a scan by a heavily blurred copy of itself.</td>
- </tr>
-
- <tr>
- <td>divide-src</td>
- <td>The reverse of '<code>Divide-Dst</code>': divides the source color by
- the destination color ( <code>Sc / Dc</code> ) and replaces the
- destination. Choose '<code>Divide-Src</code>' or
- '<code>Divide-Dst</code>' depending on which image should be the
- numerator.</td>
- </tr>
-
- <tr>
- <td>plus</td>
- <td>The source is added to the destination and replaces the destination,
- with the alpha channels also added. This operator is useful for
- averaging, or for a controlled merger of two images, rather than a
- direct overlay. Values that exceed <var>QuantumRange</var> are clamped
- to white.</td>
- </tr>
-
- <tr>
- <td>add<br/>(modulus-add)</td>
- <td>As per '<code>Plus</code>', but any result that exceeds
- <var>QuantumRange</var> "wraps around" using modulus arithmetic rather
- than being clamped. Transparency data is treated as matte values, so any
- transparent areas in either image remain transparent. Also available as
- the explicit name '<code>Modulus-Add</code>'.</td>
- </tr>
-
- <tr>
- <td>minus<br/>(minus-dst)</td>
- <td>Subtracts the source color from the destination color
- ( <code>Dc - Sc</code> ), with negative results clamped to black. When
- transparency is involved, the source opaque areas are subtracted from
- the destination opaque areas.</td>
- </tr>
-
- <tr>
- <td>minus-src</td>
- <td>The reverse of '<code>Minus-Dst</code>': subtracts the destination color
- from the source color ( <code>Sc - Dc</code> ), with negative results
- clamped to black.</td>
- </tr>
-
- <tr>
- <td>subtract<br/>(modulus-subtract)</td>
- <td>Subtracts the source color from the destination color, but any negative
- result "wraps around" using modulus arithmetic rather than being clamped
- to black. When transparency is involved, transparent areas are
- subtracted, so only the opaque areas in the source remain opaque in the
- destination image. Also available as '<code>Modulus-Subtract</code>'.</td>
- </tr>
-
- <tr>
- <td>difference</td>
- <td>Subtracts the darker of the two constituent colors from the lighter one,
- giving the absolute difference between them. Compositing with white
- inverts the destination color; compositing with black produces no
- change. Identical destination and source colors produce black, which
- makes this method a convenient way to visually compare two images.</td>
- </tr>
-
- <tr>
- <td>exclusion</td>
- <td>Produces an effect similar to '<code>Difference</code>', but lower in
- contrast. Compositing with white inverts the destination color;
- compositing with black produces no change.</td>
- </tr>
-
- <tr>
- <td>darken</td>
- <td>Selects the darker of the destination and source colors, compared
- channel by channel. The destination is replaced with the source only
- where the source is darker; otherwise it is left unchanged.</td>
- </tr>
-
- <tr>
- <td>lighten</td>
- <td>Selects the lighter of the destination and source colors, compared
- channel by channel. The destination is replaced with the source only
- where the source is lighter; otherwise it is left unchanged.</td>
- </tr>
-
- <tr>
- <td>darken-intensity</td>
- <td>Like '<code>Darken</code>', but the choice is made by comparing the
- overall pixel intensity (luminance) rather than each channel
- separately. Whichever whole pixel is darker is kept, preserving its hue
- instead of mixing channels from both images.</td>
- </tr>
-
- <tr>
- <td>lighten-intensity</td>
- <td>Like '<code>Lighten</code>', but the choice is made by comparing the
- overall pixel intensity (luminance) rather than each channel
- separately. Whichever whole pixel is lighter is kept.</td>
- </tr>
-
- <tr>
- <td>negate</td>
- <td>The "opposite" of '<code>Difference</code>' mode. Note that it is not
- simply '<code>Difference</code>' inverted, because black and white
- return the same result, but intermediate colors become brighter instead
- of darker.</td>
- </tr>
-
- <tr>
- <td>reflect</td>
- <td>Useful when adding shining objects or bright light zones to an image.
- The formula is related to '<code>Color-Dodge</code>', but the result is
- generally not as bright, giving something between a dodge and a soft
- light.</td>
- </tr>
-
- <tr>
- <td>freeze</td>
- <td>Another variation of '<code>Reflect</code>' mode, computed by inverting
- the base and blend colors, applying the reflect formula, and inverting
- the result again. It tends to deepen and intensify shadow regions.</td>
- </tr>
-
- <tr>
- <td>stamp</td>
- <td>Similar in spirit to an "average" mode. It is helpful when applying
- relief or bump-style textures to an image while retaining the
- destination's mid-tones.</td>
- </tr>
-
- <tr>
- <td>interpolate</td>
- <td>Combines aspects of '<code>Multiply</code>' and '<code>Screen</code>'
- mode using a smooth cosine interpolation, producing a gentle S-curve.
- It looks very similar to the constituent colors for very dark or very
- bright values.</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p>Typically these methods use the default '<code>Over</code>' alpha blending
-when transparencies are involved, except for '<code>Plus</code>' (and
-'<code>Add</code>'), which use a '<code>Plus</code>' alpha blending. This means
-the alpha channels of both images are used only to ensure that any visible input
-remains visible even in parts that are not overlaid, and that the color values
-are weighted by the alpha of the input and output images. This '<code>Over</code>'
-alpha blending is also applied to the lighting composition methods below.</p>
-
-<p>Use <code>-define compose:sync=false</code> and the above mathematical
-compositions will no longer synchronise their action with the alpha channel.
-Instead the math composition is applied on an individual channel basis, as
-selected by the <a href="../command-line-options/index.html#channel">-channel</a> setting;
-this includes the alpha channel itself. This special usage allows you to perform
-true mathematics on the image channels, without the alpha composition becoming
-involved.</p>
-
-<p>This define is not applied to the lighting composition methods (see below),
-even though they are closely related to the mathematical composition
-methods.</p>
-
-<p>A classic use of '<code>Divide</code>' is to flatten uneven lighting or
-remove a background gradient by dividing an image by a heavily blurred copy of
-itself. Note the parentheses, which limit the blur to just the cloned copy…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>magick scan.png \( +clone -blur 0x20 \) -compose Divide_Src -composite flattened.png</samp></pre>
-
-<h2>Lighting Composition Methods</h2>
-
-<p>The following lighting composition methods (the "light", "dodge", and "burn"
-blend modes) are also available. Many are the standard <em>non-separable</em>
-blend modes described by the SVG 1.2 Compositing standard, and match the
-equivalent modes found in SVG, PDF, and popular image editors.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>linear-dodge</td>
- <td>Equivalent to '<code>Plus</code>' in that the color channels are simply
- added; however it does not add the alpha channel, but instead uses the
- normal '<code>Over</code>' alpha blending when transparencies are
- involved. Produces an additive, brightening result.</td>
- </tr>
-
- <tr>
- <td>linear-burn</td>
- <td>As '<code>Linear-Dodge</code>', but also subtracts one (full white) from
- the result, darkening the image. It is, in effect, an additive
- counterpart to '<code>Screen</code>'.</td>
- </tr>
-
- <tr>
- <td>color-dodge</td>
- <td>Brightens the destination color to reflect the source color, by dividing
- the destination by the inverse of the source. Compositing with black
- produces no change, while brighter source colors progressively blow out
- the destination toward white.</td>
- </tr>
-
- <tr>
- <td>color-burn</td>
- <td>Darkens the destination color to reflect the source color, the inverse
- operation to '<code>Color-Dodge</code>'. Compositing with white produces
- no change, while darker source colors progressively burn the destination
- toward black.</td>
- </tr>
-
- <tr>
- <td>overlay</td>
- <td>Multiplies or screens the colors, depending on the destination color.
- Source colors overlay the destination while preserving its highlights
- and shadows. The destination color is not replaced, but is mixed with
- the source color to reflect the lightness or darkness of the
- destination. This is '<code>Hard-Light</code>' with the source and
- destination roles swapped.</td>
- </tr>
-
- <tr>
- <td>hard-light</td>
- <td>Multiplies or screens the colors, depending on the source color value.
- If the source color is lighter than 0.5, the destination is lightened as
- if screened; if the source color is darker than 0.5, the destination is
- darkened as if multiplied. The degree of lightening or darkening is
- proportional to the difference between the source color and 0.5. If the
- source equals 0.5 the destination is unchanged. Compositing with pure
- black or white produces black or white.</td>
- </tr>
-
- <tr>
- <td>hard-mix</td>
- <td>Adds the source and destination color values and then thresholds the
- result to pure black or pure white on each channel. This produces a
- high-contrast, posterised image restricted to the primary and secondary
- colors.</td>
- </tr>
-
- <tr>
- <td>linear-light</td>
- <td>Like '<code>Hard-Light</code>', but using '<code>Linear-Dodge</code>'
- and '<code>Linear-Burn</code>' instead of screen and multiply. It
- increases contrast noticeably, with a strong impact on the foreground's
- tonal values.</td>
- </tr>
-
- <tr>
- <td>soft-burn</td>
- <td>A combination of color-burn and inverse color-dodge modes, but much
- smoother than either. The base image is lightened a little, while very
- dark blend colors are "burned" in.</td>
- </tr>
-
- <tr>
- <td>soft-dodge</td>
- <td>A combination of color-dodge and inverse color-burn modes, but much
- smoother than either. The base image is darkened a little, while very
- bright blend colors are "dodged" in.</td>
- </tr>
-
- <tr>
- <td>soft-light</td>
- <td>Darkens or lightens the colors, depending on the source color value. If
- the source color is lighter than 0.5, the destination is lightened; if
- it is darker than 0.5, the destination is darkened, as if burned in. The
- degree of change is proportional to the difference between the source
- color and 0.5. If the source equals 0.5 the destination is unchanged.
- Compositing with pure black or white produces a distinctly darker or
- lighter area, but never pure black or white. This is the SVG 1.2
- "soft-light" blend mode.</td>
- </tr>
-
- <tr>
- <td>pegtop-light</td>
- <td>Almost equivalent to '<code>Soft-Light</code>', but computed with a
- single continuous mathematical formula rather than two conditionally
- selected formulae. This avoids the subtle discontinuity that
- '<code>Soft-Light</code>' can show at a source value of 0.5.</td>
- </tr>
-
- <tr>
- <td>vivid-light</td>
- <td>A modified '<code>Linear-Light</code>' (a combination of
- '<code>Color-Dodge</code>' and '<code>Color-Burn</code>') designed to
- preserve very strong primary and secondary colors in the image.</td>
- </tr>
-
- <tr>
- <td>pin-light</td>
- <td>Similar to '<code>Hard-Light</code>', but using sharp linear shadings,
- to simulate the effect of a strong "pinhole" light source. It replaces
- colors based on how light or dark the source is, which can remove
- mid-tone detail.</td>
- </tr>
-
- </tbody>
-</table>
-</div>
-
-<p>These blend modes are selected the same way as any other method. For
-instance, to blend a texture into a photo with '<code>Soft-Light</code>'…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>magick photo.png texture.png -compose Soft-Light -composite result.png</samp></pre>
-
-<h2>Channel-Copying and Color (HSL) Methods</h2>
-
-<p>These methods do not blend the two images arithmetically. Instead they either
-transfer individual channels from the source to the destination, or transfer one
-component of the HSL color model (hue, saturation, or luminosity). The four HSL
-methods (<code>Hue</code>, <code>Saturate</code>, <code>Luminize</code>, and
-<code>Colorize</code>) correspond to the non-separable color blend modes of the
-SVG 1.2 Compositing standard.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>copy</td>
- <td>Equivalent to the Duff–Porter '<code>Src</code>' composition
- method, but <em>without</em> clearing the parts of the destination image
- that are not overlaid. Only the overlaid area is replaced.</td>
- </tr>
-
- <tr>
- <td>copy-<em><channel></em></td>
- <td>Copies the specified channel (<code>Red</code>, <code>Green</code>,
- <code>Blue</code>, <code>Cyan</code>, <code>Magenta</code>,
- <code>Yellow</code>, <code>Black</code>, or <code>Alpha</code>) from the
- source image into the same channel of the destination image, leaving the
- other channels untouched. If the requested channel does not exist in the
- source image (which can only happen for '<code>Copy-Alpha</code>' or
- '<code>Copy-Black</code>'), then the source is assumed to be a grayscale
- image whose intensity supplies the values to be copied.
- '<code>Copy-Alpha</code>' (formerly '<code>Copy-Opacity</code>') is the
- classic way to apply an explicit transparency mask to an image.</td>
- </tr>
-
- <tr>
- <td>hue</td>
- <td>Replaces the hue of the destination with the hue of the source, while
- keeping the destination's saturation and luminosity.</td>
- </tr>
-
- <tr>
- <td>saturate</td>
- <td>Replaces the saturation of the destination with the saturation of the
- source, while keeping the destination's hue and luminosity.</td>
- </tr>
-
- <tr>
- <td>luminize</td>
- <td>Replaces the luminosity (brightness) of the destination with that of the
- source, while keeping the destination's hue and saturation.</td>
- </tr>
-
- <tr>
- <td>colorize</td>
- <td>Replaces the hue and saturation of the destination with those of the
- source, while keeping the destination's luminosity. It is the exact
- complement of '<code>Luminize</code>' and is ideal for tinting a
- grayscale image with a color.</td>
- </tr>
-
- </tbody>
-</table>
-</div>
-
-<p>For example, to tint a grayscale portrait with a solid color using
-'<code>Colorize</code>', which keeps the destination's luminosity but takes the
-hue and saturation from the source…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>magick portrait.png xc:steelblue -compose Colorize -composite tinted.png</samp></pre>
-
-<h2>Other Special-Purpose Methods</h2>
-
-<p>Also included are these special-purpose compose methods:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>no</td>
- <td>A true "no operation". Used internally, and when layering images, to
- indicate that no composition should be performed. The destination is
- returned unchanged.</td>
- </tr>
-
- <tr>
- <td>change-mask</td>
- <td>Replaces any destination pixel that is similar to the corresponding
- source pixel (as defined by the current <a
- href="../command-line-options/index.html#fuzz">-fuzz</a> factor) with transparency.
- This is useful for producing a minimal "difference" overlay, such as when
- optimising an animation.</td>
- </tr>
-
- <tr>
- <td>stereo</td>
- <td>Creates a stereo anaglyph by taking the red channel from the source
- image and the green and blue channels from the destination image, so the
- combined result can be viewed with red/cyan 3D glasses.</td>
- </tr>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Alpha Compositing</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Complete guide to ImageMagick's -compose operators: Porter–Duff alpha blending, mathematical, lighting, and SVG 1.2 blend modes, with CLI examples.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- </tbody>
-</table>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Header & Quick Navigation -->
+<div class="mb-5 border-bottom pb-4">
+ <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+ <a href="#cli-examples" class="btn btn-sm btn-outline-primary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-terminal-fill"></i> Overview
+ </a>
+ <a href="#duff-porter" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-layers-fill"></i> Porter–Duff
+ </a>
+ <a href="#mathematical" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-calculator-fill"></i> Mathematical
+ </a>
+ <a href="#lighting" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-sun-fill"></i> Lighting
+ </a>
+ <a href="#channel-copying" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-palette-fill"></i> HSL & Color
+ </a>
+ <a href="#argumented" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-sliders"></i> Arguments
+ </a>
+ </div>
+ <p class="lead text-body-secondary mb-3">
+ This page describes the image composition methods that define how two images are merged together during operations combining a 'source' (overlay) image with a 'destination' (background) image. For the Command Line API, the method is normally selected with the <a href="../command-line-options/index.html#compose" class="text-decoration-none fw-semibold">-compose</a> setting, and applied by operators such as <a href="../command-line-options/index.html#composite" class="text-decoration-none">-composite</a>, <a href="../command-line-options/index.html#layers" class="text-decoration-none">-layers</a>, <a href="../command-line-options/index.html#flatten" class="text-decoration-none">-flatten</a>, <a href="../command-line-options/index.html#mosaic" class="text-decoration-none">-mosaic</a>, <a href="../command-line-options/index.html#draw" class="text-decoration-none">-draw</a>, and others.
+ </p>
+
+ <div class="p-4 bg-body-tertiary border rounded-3 mb-4">
+ <p class="mb-2">
+ Most alpha-blending operators and lighting modes follow the W3C <a href="https://www.w3.org/TR/SVGCompositing/" target="_blank" class="text-decoration-none">SVG Compositing Specification</a>, extending SVG 1.1 and 1.2 with full Porter–Duff alpha operators. ImageMagick implements identical mathematical results to SVG, PDF, and modern graphics libraries.
+ </p>
+ <p class="mb-0 text-body-secondary small">
+ Composition terminology uses abstract values like <var>QuantumRange</var> and opacity ranging from <var>opaque</var> to <var>transparent</var>. Method names are case-insensitive and allow <code>_</code> or <code>-</code> separators (e.g., <code>Dst-Over</code> equals <code>dstover</code>).
+ </p>
+ </div>
</div>
+<!-- Section: Porter-Duff Alpha Composition Methods -->
+<section id="duff-porter" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Porter–Duff Alpha Composition Methods</h2>
+ <a href="#duff-porter" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ The following twelve classical Porter–Duff operators defined by the SVG 1.2 standard merge two images purely according to transparency.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm mb-4">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold">clear</code></td>
+ <td class="font-sans">Both color and alpha of the destination are cleared. Neither source nor destination is used as input (except meta-data). Result is fully transparent.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">src</code></td>
+ <td class="font-sans">The source is copied to the destination, completely replacing it. Un-overlaid areas are cleared to transparency.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">dst</code></td>
+ <td class="font-sans">The destination is left untouched. Source image is ignored (no-op for color data, useful for testing).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">src-over</code></td>
+ <td class="font-sans">Source composited over destination. This is the default alpha-blending method when unspecified.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">dst-over</code></td>
+ <td class="font-sans">Destination composited over source. Places source <em>under</em> destination; ideal for backgrounds or drop shadows.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">src-in</code></td>
+ <td class="font-sans">Part of source inside destination shape replaces destination. Everything outside is cleared.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">dst-in</code></td>
+ <td class="font-sans">Part of destination inside source shape replaces destination. Convenient for alpha masks.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">src-out</code></td>
+ <td class="font-sans">Part of source outside destination shape replaces destination. Overlapping region cleared.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">dst-out</code></td>
+ <td class="font-sans">Part of destination outside source shape replaces destination ("punched out" hole).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">src-atop</code></td>
+ <td class="font-sans">Part of source inside destination shape is composited onto destination, keeping destination shape/alpha.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">dst-atop</code></td>
+ <td class="font-sans">Part of destination inside source shape replaces destination. Result keeps source shape and destination colors.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">xor</code></td>
+ <td class="font-sans">Combines parts of source and destination outside their overlap. Overlapping area is cleared.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p class="text-body-secondary small mb-3">
+ Shorthand notes: <code class="text-primary">Src-</code> prefixes can be omitted (e.g., <code>Over</code>, <code>In</code>, <code>Out</code>, <code>ATop</code>). Un-overlaid clearing behavior for <code>Clear</code>, <code>Src</code>, <code>Src-In</code>, <code>Dst-In</code>, <code>Src-Out</code>, and <code>Dst-ATop</code> can be disabled via <code class="text-primary">-define compose:outside-overlay=false</code>.
+ </p>
+ <!-- CLI Example 1 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">overlay-rose.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/compose/magick rose: label.png -gravity center -compose Over -composite result.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick rose: label.png -gravity center -compose Over -composite result.png</code></pre>
+ </div>
+ </div>
+ <!-- CLI Example 2 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">drop-shadow.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/compose/magick label_white.png label_black.png -geometry +5+5 -compose Dst-Over -composite shadow.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick label_white.png label_black.png -geometry +5+5 -compose Dst-Over -composite shadow.png</code></pre>
+ </div>
+ </div>
+</section>
+<!-- Section: Mathematical Composition Methods -->
+<section id="mathematical" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Mathematical Composition Methods</h2>
+ <a href="#mathematical" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ These methods combine color channels using arithmetic or comparison formulas rather than transparency alone. Includes SVG 1.2 separable blend modes like <code>Multiply</code>, <code>Screen</code>, <code>Darken</code>, <code>Lighten</code>, <code>Difference</code>, and <code>Exclusion</code>.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm mb-4">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold">multiply</code></td>
+ <td class="font-sans">Source multiplied by destination. Result is at least as dark as inputs. Black produces black; white leaves color unchanged.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">divide</code></td>
+ <td class="font-sans">Divides pixel values of one input image by another channel by channel for normalization or contrast.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">screen</code></td>
+ <td class="font-sans">Complements multiplied, then complemented again. Result is at least as light as inputs (mathematical opposite of multiply).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">bumpmap</code></td>
+ <td class="font-sans">Source intensity multiplied with destination color using single luminance to shade destination (great for embossed textures).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">divide-dst</code></td>
+ <td class="font-sans">True mathematical division of destination by source (<var>Dc / Sc</var>). Equal colors yield white (1.0). Efficient built-in background removal.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">divide-src</code></td>
+ <td class="font-sans">Reverse of divide-dst: divides source by destination (<var>Sc / Dc</var>).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">plus</code></td>
+ <td class="font-sans">Source added to destination with alpha channels added. Exceeding <var>QuantumRange</var> is clamped to white.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">add<br/><span class="text-muted">(modulus-add)</span></code></td>
+ <td class="font-sans">Like plus, but exceeding <var>QuantumRange</var> wraps around using modulus arithmetic. Transparent areas remain transparent.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">minus<br/><span class="text-muted">(minus-dst)</span></code></td>
+ <td class="font-sans">Subtracts source color from destination (<var>Dc - Sc</var>) with negative results clamped to black.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">minus-src</code></td>
+ <td class="font-sans">Reverse of minus-dst: subtracts destination from source (<var>Sc - Dc</var>).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">subtract<br/><span class="text-muted">(modulus-subtract)</span></code></td>
+ <td class="font-sans">Subtracts source from destination, wrapping negative results with modulus arithmetic rather than clamping.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">difference</code></td>
+ <td class="font-sans">Absolute difference between colors. White inverts destination; black produces no change; identical colors produce black.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">exclusion</code></td>
+ <td class="font-sans">Similar to difference but lower in contrast.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">darken</code></td>
+ <td class="font-sans">Selects darker of destination and source channel-by-channel.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">lighten</code></td>
+ <td class="font-sans">Selects lighter of destination and source channel-by-channel.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">darken-intensity</code></td>
+ <td class="font-sans">Compares overall luminance rather than channels; keeps whole pixel that is darker, preserving hue.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">lighten-intensity</code></td>
+ <td class="font-sans">Compares overall luminance; keeps whole pixel that is lighter.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">negate</code></td>
+ <td class="font-sans">Opposite of difference; intermediate colors become brighter instead of darker.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">reflect</code></td>
+ <td class="font-sans">Related to color-dodge for adding shiny objects or bright light zones.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">freeze</code></td>
+ <td class="font-sans">Inverts base and blend colors, applies reflect, and inverts result to deepen shadows.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">stamp</code></td>
+ <td class="font-sans">Similar to average mode for relief/bump textures while retaining mid-tones.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">interpolate</code></td>
+ <td class="font-sans">Combines multiply and screen using smooth cosine interpolation (gentle S-curve).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p class="text-body-secondary small mb-3">
+ Use <code class="text-primary">-define compose:sync=false</code> to apply math composition on individual channel bases (including alpha) without alpha composition interference.
+ </p>
+ <!-- CLI Example 3 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">flatten-lighting.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/compose/magick scan.png\\( +clone -blur 0x20 \\) -compose Divide_Src -composite flattened.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick scan.png \( +clone -blur 0x20 \) -compose Divide_Src -composite flattened.png</code></pre>
+ </div>
+ </div>
+</section>
+<!-- Section: Lighting Composition Methods -->
+<section id="lighting" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Lighting Composition Methods</h2>
+ <a href="#lighting" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ Light, dodge, and burn blend modes standard to SVG 1.2 and popular image editors.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm mb-4">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold">linear-dodge</code></td>
+ <td class="font-sans">Equivalent to plus (adds channels without adding alpha), using normal <var>Over</var> alpha blending.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">linear-burn</code></td>
+ <td class="font-sans">Additive counterpart to screen; subtracts one (full white) from result, darkening image.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">color-dodge</code></td>
+ <td class="font-sans">Brightens destination to reflect source by dividing destination by inverse source.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">color-burn</code></td>
+ <td class="font-sans">Darkens destination to reflect source (inverse of color-dodge).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">overlay</code></td>
+ <td class="font-sans">Multiplies or screens colors based on destination color, preserving highlights and shadows.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">hard-light</code></td>
+ <td class="font-sans">Multiplies or screens based on source color value (<0.5 darkens like multiply, >0.5 lightens like screen).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">hard-mix</code></td>
+ <td class="font-sans">Adds source and destination values then thresholds result to pure black or white per channel.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">linear-light</code></td>
+ <td class="font-sans">Like hard-light, but using linear-dodge and linear-burn for strong contrast impact.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">soft-burn</code></td>
+ <td class="font-sans">Combination of color-burn and inverse color-dodge; lightens base slightly while burning dark blend colors.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">soft-dodge</code></td>
+ <td class="font-sans">Combination of color-dodge and inverse color-burn; darkens base slightly while dodging bright blend colors.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">soft-light</code></td>
+ <td class="font-sans">SVG 1.2 soft-light mode; darkens or lightens depending on source value (<0.5 darkens, >0.5 lightens) without pure black/white.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">pegtop-light</code></td>
+ <td class="font-sans">Computed with a continuous mathematical formula to avoid soft-light's discontinuity at 0.5.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">vivid-light</code></td>
+ <td class="font-sans">Modified linear-light designed to preserve strong primary and secondary colors.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">pin-light</code></td>
+ <td class="font-sans">Simulates pinhole light source using sharp linear shadings.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- CLI Example 4 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">blend-texture.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/compose/magick photo.png texture.png -compose Soft-Light -composite result.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick photo.png texture.png -compose Soft-Light -composite result.png</code></pre>
+ </div>
+ </div>
+</section>
+<!-- Section: Channel-Copying and Color (HSL) Methods -->
+<section id="channel-copying" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Channel-Copying & Color (HSL) Methods</h2>
+ <a href="#channel-copying" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ Transfer individual channels or HSL components (hue, saturation, luminosity) without arithmetical blending.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm mb-4">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold">copy</code></td>
+ <td class="font-sans">Equivalent to Src composition without clearing un-overlaid destination parts.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">copy-<channel></code></td>
+ <td class="font-sans">Copies specified channel (<code class="text-primary">Red</code>, <code class="text-primary">Green</code>, <code class="text-primary">Blue</code>, <code class="text-primary">Cyan</code>, <code class="text-primary">Magenta</code>, <code class="text-primary">Yellow</code>, <code class="text-primary">Black</code>, <code class="text-primary">Alpha</code>) from source to destination.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">hue</code></td>
+ <td class="font-sans">Replaces destination hue with source hue while keeping saturation and luminosity.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">saturate</code></td>
+ <td class="font-sans">Replaces destination saturation with source saturation while keeping hue and luminosity.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">luminize</code></td>
+ <td class="font-sans">Replaces destination luminosity with source luminosity while keeping hue and saturation.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">colorize</code></td>
+ <td class="font-sans">Replaces destination hue and saturation with source while keeping luminosity (ideal for tinting grayscale images).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- CLI Example 5 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">colorize-portrait.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/compose/magick portrait.png xc:steelblue -compose Colorize -composite tinted.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick portrait.png xc:steelblue -compose Colorize -composite tinted.png</code></pre>
+ </div>
+ </div>
+</section>
+<!-- Section: Other Special-Purpose Methods -->
+<section id="special-purpose" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Other Special-Purpose Methods</h2>
+ <a href="#special-purpose" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <div class="card im-card overflow-hidden shadow-sm mb-4">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold">no</code></td>
+ <td class="font-sans">True no-op indicating no composition should be performed.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">change-mask</code></td>
+ <td class="font-sans">Replaces destination pixels similar to source pixel (within <a href="../command-line-options/index.html#fuzz" class="text-decoration-none">-fuzz</a> factor) with transparency.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">stereo</code></td>
+ <td class="font-sans">Creates stereo anaglyph taking red channel from source and green/blue from destination.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
+<!-- Section: Composition Methods That Take Arguments -->
+<section id="argumented" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Composition Methods That Take Arguments</h2>
+ <a href="#argumented" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ These methods require extra numerical arguments, passed via <code class="text-primary">-define compose:args=...</code> in the <samp>magick</samp> command.
+ </p>
+ <!-- CLI Example 6 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">compose-args.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('magick ... -compose blend -define compose:args=50,50 -composite ...')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick ... -compose blend -define compose:args=50,50 -composite ...</code></pre>
+ </div>
+ </div>
+ <div class="card im-card overflow-hidden shadow-sm mb-4">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 30%;">Method</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold">dissolve</code></td>
+ <td class="font-sans">Arguments: <var>src_percent</var>[x<br><var>dst_percent</var>]. Dissolves source image by percentage before overlaying.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">blend</code></td>
+ <td class="font-sans">Arguments: <var>src_percent</var>[x<br><var>dst_percent</var>]. Averages images together according to percentages and transparency.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">mathematics</code></td>
+ <td class="font-sans">Arguments: <var>A, B, C, D</var>. Merges via formula <code class="text-primary">A*Sc*Dc + B*Sc + C*Dc + D</code>.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">modulate</code></td>
+ <td class="font-sans">Arguments: <var>brightness</var>[x<br><var>saturation</var>]. Takes grayscale image/mask to modify destination brightness/saturation.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">displace</code></td>
+ <td class="font-sans">Arguments: <var>X-scale</var>[x<br><var>Y-scale</var>][!][%]. Uses overlay as relative displacement map (lens distortion).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">distort</code></td>
+ <td class="font-sans">Arguments: <var>X-scale</var>[x<br><var>Y-scale</var>[+<br><var>X-center</var>+<br><var>Y-center</var>]]][!][%]. Uses absolute coordinates relative to overlay center.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">blur</code></td>
+ <td class="font-sans">Arguments: <br><var>Width</var>[x<var>Height</var>[+<var>Angle</var>][+<var>Angle2</var>]]. Variable-blur mapping composition via EWA ellipse.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">seamless-blend</code></td>
+ <td class="font-sans">Arguments: <var>max-iterations</var>x<br><var>distortion</var>. Seamlessly inserts overlay onto background using a mask (best with HDRI).</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold">saliency-blend</code></td>
+ <td class="font-sans">Arguments: <var>max-iterations</var>x<br><var>distortion</var>. Merges images based on which has most detail at each pixel (requires mask).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p class="text-body-secondary small">
+ To print a complete list of all available compose operators supported by your specific build, run <a href="../command-line-options/index.html#list" class="text-decoration-none fw-semibold">magick -list compose</a>.
+ </p>
+</section>
-<h2>Composition Methods That Take Arguments</h2>
-
-<p>On top of the methods above are a few special ones that not only require the
-two images being merged, but also take some extra numerical arguments, which are
-tabled below.</p>
-
-<p>In the "<code>composite</code>" command these composition methods are usually
-selected using dedicated options that carry the arguments they need. Those
-option names are usually—but not always—the same as the compose
-'method' they use, and they replace the normal <a
-href="../command-line-options/index.html#compose">-compose</a> setting. For example…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>magick composite ... -blend 50x50 ...</code></pre>
-
-<p>The "<samp>magick</samp>" command can pass these extra arguments to its <a
-href="../command-line-options/index.html#composite">-composite</a> operator using the
-special <a href="../command-line-options/index.html#define">-define</a> attribute
-<code>compose:args</code>. This means you can make use of these augmented <a
-href="../command-line-options/index.html#compose">-compose</a> methods, though the argument
-and the method must each be set separately. For example…</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>magick ... -compose blend -define compose:args=50,50 -composite ...</samp></pre>
-
-<p>The following is a table of these special 'argumented' compose methods, with
-a brief summary of what they do. For more detail see the equivalent
-"<code>composite</code>" command option.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>dissolve</td>
- <td>Arguments:
- <var>src_percent</var>[x<var>dst_percent</var>]
- <br/>Equivalent to "<code>composite</code>" <a href="../command-line-options/index.html#dissolve">-dissolve</a>.
- Dissolves the 'source' image by the percentage given before overlaying it
- 'over' the 'destination' image. If <var>src_percent</var> is greater than
- 100, it starts dissolving the destination image as well, so the
- destination becomes fully transparent at a value of <code>200</code>. If
- both percentages are given, each image is dissolved to the percentage
- given.
- </td>
- </tr>
-
- <tr>
- <td>blend</td>
- <td>Arguments:
- <var>src_percent</var>[x<var>dst_percent</var>]
- <br/>Equivalent to "<code>composite</code>" <a
- href="../command-line-options/index.html#blend">-blend</a>.
- Averages the images together ('plus') according to the percentages given and
- each pixel's transparency. If only a single percentage is given, it sets
- the weight of the 'source' image, while the 'destination' image is
- weighted by the exact opposite amount. That is, <code>-blend 30</code>
- merges 30% of the source with 70% of the destination, and is therefore
- equivalent to <code>-blend 30x70</code>.
- </td>
- </tr>
-
- <tr>
- <td>mathematics</td>
- <td>Arguments: <var>A, B, C, D</var>
- <br/>Not available in "<code>composite</code>" at this time.
- Merges the source and destination images according to the formula
- <ul><code>A*Sc*Dc + B*Sc + C*Dc + D</code></ul>
- where <code>Sc</code> and <code>Dc</code> are the source and destination
- color values. This can generate a custom composition method that would
- otherwise need the slow <a href="../command-line-options/index.html#fx">-fx</a> DIY
- image operator. For example, setting <var>A=1</var> with the other
- coefficients zero reproduces '<code>Multiply</code>'.
- </td>
- </tr>
-
- <tr>
- <td>modulate</td>
- <td>Arguments:
- <var>brightness</var>[x<var>saturation</var>]
- <br/>Equivalent to "<code>composite</code>" <a href="../command-line-options/index.html#watermark">-watermark</a>.
- Takes a grayscale image (with an alpha mask) and modifies the destination
- image's brightness according to the source image's grayscale value and
- the <var>brightness</var> percentage. The destination's color saturation
- is scaled directly by the <var>saturation</var> percentage, which
- defaults to 100 percent (no color change).
- </td>
- </tr>
-
- <tr>
- <td>displace</td>
- <td>Arguments:
- <var>X-scale</var>[x<var>Y-scale</var>][!][%]
- <br/>Equivalent to "<code>composite</code>" <a href="../command-line-options/index.html#displace">-displace</a>.
- With this method, the 'overlay' image (and optionally the 'mask' image) is
- used as a relative displacement map, which shifts the lookup of the
- destination pixel that is seen at each point of the overlaid area. It is
- much like a 'lens' that distorts the background image behind it.
- <br/><br/>
- The X-scale is modulated by the red channel of the overlay image, while
- the Y-scale is modulated by the green channel (if a mask image is given,
- it is rolled into the green channel of the overlay). This separation lets
- you modulate the X and Y lookups independently, allowing 2-dimensional
- displacements rather than the 1-dimensional vectored displacement of a
- single grayscale image.
- <br/><br/>
- If the overlay image contains transparency, it is used as a mask on the
- result to remove 'invalid' pixels.
- <br/><br/>
- The '<code>%</code>' flag makes the displacement scale relative to the
- size of the overlay image (100% = half the width/height of the image).
- Using '<code>!</code>' switches the percentage arguments to refer to the
- destination image size instead.
- </td>
- </tr>
-
- <tr>
- <td>distort</td>
- <td>Arguments:
- <var>X-scale</var>[x<var>Y-scale</var>[+<var>X-center</var>+<var>Y-center</var>]][!][%]
- <br/>Not available in "<code>composite</code>" at this time.
- Exactly as per '<code>Displace</code>' (above), but using absolute
- coordinates relative to the center of the overlay (or to the center
- given). This lets you generate absolute distortion maps, where 'black'
- looks up the left/top edge and 'white' looks up the bottom/right edge of
- the destination image, according to the scale given.
- <br/><br/>
- The '<code>!</code>' flag not only switches the percentage scaling to use
- the destination image, but also references the center offset against the
- destination. This means the overlay can look up a completely different
- region of the destination image.
- </td>
- </tr>
-
- <tr>
- <td>blur</td>
- <td>Arguments:
- <var>Width</var>[x<var>Height</var>[+<var>Angle</var>][+<var>Angle2</var>]]
- <br/>Equivalent to "<code>composite</code>" <a href="../command-line-options/index.html#blur-composite">-blur</a>.
- A variable-blur mapping composition method, where each pixel in the overlaid
- region is replaced with an Elliptical Weighted Average (EWA), using an
- ellipse (typically a circle) of the given sigma size, scaled according
- to the overlay (source) grayscale mapping.
- <br/><br/>
- As with '<code>Displace</code>' and '<code>Distort</code>', the red
- channel modulates the width of the ellipse while the green channel
- modulates its height. If a single Angle value is given, the ellipse is
- rotated by that angle.
- <br/><br/>
- Normally the blue channel of the mapping overlay is ignored. However if a
- second angle is given, the blue channel is taken to define a variable
- angle for the ellipse, ranging from the first angle to the second. This
- lets you generate radial blurs, a rough approximation of rotational blur,
- or any mix of the two.
- </td>
- </tr>
-
- <tr>
- <td>seamless-blend</td>
- <td>Arguments: <var>max-iterations</var>x<var>distortion</var>
- <p>Seamlessly inserts the overlay image onto the background image. This
- operator requires a mask. Set the maximum number of iterations and the
- target distortion when seamlessly blending a foreground object onto a
- background. The distortion is the RMSE between each iteration; a good
- starting point is <code>300x0.0001</code>. Note that seamless blending
- works most effectively when the HDRI feature is enabled.</p>
- </td>
- </tr>
-
- <tr>
- <td>saliency-blend</td>
- <td>Arguments: <var>max-iterations</var>x<var>distortion</var>
- <p>Merges the overlay image with the background image such that whichever
- image is most salient (has the most detail) at a given pixel is the one
- that shows in the result. This operator requires a mask. Set the maximum
- number of iterations and the target distortion as for
- '<code>Seamless-Blend</code>'; a good starting point is
- <code>300x0.0001</code>. Note that this works most effectively when the
- HDRI feature is enabled, and it is a little slower than seamless
- blending.</p>
- </td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ </div>
-<p>To print a complete list of all the available compose operators supported by
-your particular build, use <a href="../command-line-options/index.html#list">-list
-compose</a>.</p>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/composite/index.html b/www/composite/index.html
index 7f048fe83..4cfa51221 100644
--- a/www/composite/index.html
+++ b/www/composite/index.html
@@ -11,738 +11,895 @@
<meta name="description" content="Use ImageMagick’s Composite tool to overlay, blend, and seamlessly merge images. Explore example commands, advanced options like masks and seamless blending, and learn how to create rich visual compositions.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Composite">
<meta property="og:description" content="Use ImageMagick’s Composite tool to overlay, blend, and seamlessly merge images. Explore example commands, advanced options like masks and seamless blending, and learn how to create rich visual compositions.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Composite">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Composite",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/composite/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use ImageMagick’s Composite tool to overlay, blend, and seamlessly merge images. Explore example commands, advanced options like masks and seamless blending, and learn how to create rich visual compositions.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/composite/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/composite/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Composite</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Composite</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use ImageMagick’s Composite tool to overlay, blend, and seamlessly merge images. Explore example commands, advanced options like masks and seamless blending, and learn how to create rich visual compositions.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>composite</code> program to overlap one image over another. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>composite</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>composite</code> command here to illustrate its usefulness and ease of use. To get started, lets overlay a smiley face over a rose:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick composite -gravity center smile.gif rose: rose-over.png </samp></pre>
-
-<ul>
- <a href="../image/smile.gif"><img src="../image/smile.gif" width="48" height="48" alt="smile" /></a>
- <img src="../image/over.gif" width="56" height="46" alt="over" />
- <a href="../image/rose.jpg"><img src="../image/rose.jpg" width="70" height="46" alt="rose" /></a>
- <img style="margin-top:13px; margin-bottom:13px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/rose-over.png"><img src="../image/rose-over.png" width="70" height="46" alt="rose" /></a>
-</ul>
-
-<p>You can create three-dimensional effect with the <var>Atop</var>:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 70x70 canvas:none -fill red -draw 'circle 35,35 10,30' red-circle.png
-$ magick -size 70x70 canvas:none -draw "circle 35,35 35,20" -channel RGB -negate -channel A -gaussian-blur 0x8 white-highlight.png
-$ magick composite -compose atop -geometry -13-17 white-highlight.png red-circle.png red-ball.png </samp></pre>
-
-<ul>
- <a href="../image/white-highlight.png"><img src="../image/white-highlight.png" width="70" height="70" alt="white highlight" /></a>
- <img src="../image/atop.gif" width="56" height="70" alt="atop" />
- <a href="../image/red-circle.png"><img src="../image/red-circle.png" width="70" height="70" alt="red circle" /></a>
- <img style="margin-top:25px; margin-bottom:25px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/red-ball.png"><img src="../image/red-ball.png" width="70" height="70" alt="red ball" /></a>
-</ul>
-
-<p>Or suppose you want to blend a bear into a stream <a href="https://github.com/ImageMagick/ImageMagick/discussions/4712">seamlessly</a>. Try this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -verbose stream.jpg bear.jpg bear_mask.png -define compose:args=400x0.0002+100 \
- -compose seamless-blend -geometry +30+30 -composite bear-in-stream.png </samp></pre>
-<p>The mask marks the area around the bear to blend. Seamless blending is an iterative process. Here, we limit the iterations to 400 or less if the blending converges (residual has an RMSE of less than 0.0002). The residual value (RMSE) is printed every 100 iterations. Note, seamless blending works most effectively when the HDRI feature is enabled.</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -verbose stream.jpg \( bear.jpg -read-mask only_bear.png \) bear_mask.png \
- -define compose:args=400x0.0002+100 -compose seamless-blend -geometry +30+30 -composite \
- bear-in-stream.png </samp></pre>
-<p>Here we create read mask that marks the foreground object from its background. No blending is applied to the foreground object, just its surroundings. The read-mask preserves the colors of the bear and prevents them from lightening as in the first example. Note that read-masks must be black on white background as opposed to normal masks, which are white on black background.</p>
-
-<p>You can find additional examples of using <code>composite</code> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>. You can find out more about them and the mathematics by looking at <a href="http://www.w3.org/TR/SVG12/rendering.html">SVG Alpha Compositing</a></p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>composite</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#affine">-affine <var>matrix</var></a></td>
- <td>affine transform matrix</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blend">-blend <var>geometry</var></a></td>
- <td>blend images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-primary">-blue-primary <var>point</var></a></td>
- <td>chromaticity blue primary point</td>
- </tr>
-
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#displace">-displace <var>geometry</var></a></td>
- <td>shift image pixels defined by a displacement map</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dissolve">-dissolve <var>value</var></a></td>
- <td>dissolve the two images a given percent</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encoding">-encoding <var>type</var></a></td>
- <td>text encoding type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#font">-font <var>name</var></a></td>
- <td>render text with this font</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#green-primary">-green-primary <var>point</var></a></td>
- <td>chromaticity green primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>string</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#level">-level <var>value</var></a></td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pointsize">-pointsize <var>value</var></a></td>
- <td>font point size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#red-primary">-red-primary <var>point</var></a></td>
- <td>chromaticity red primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shave">-shave <var>geometry</var></a></td>
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stegano">-stegano <var>offset</var></a></td>
- <td>hide watermark within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stereo">-stereo <var>geometry</var></a></td>
- <td>combine two image to create a stereo anaglyph</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swap">-swap <var>indexes</var></a></td>
- <td>swap two images in the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile">-tile</a></td>
- <td>repeat composite operation across and down image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transform">-transform</a></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#treedepth">-treedepth <var>value</var></a></td>
- <td>color tree depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#type">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unsharp">-unsharp <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#watermark">-watermark <var>geometry</var></a></td>
- <td>percent brightness and saturation of a watermark</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-point">-white-point <var>point</var></a></td>
- <td>chromaticity white point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-threshold">-white-threshold <var>value</var></a></td>
- <td>force all pixels above the threshold into white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-write <var>filename</var></a></td>
- <td>write images to this file</td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Header & Quick Navigation -->
+<div class="mb-5 border-bottom pb-4">
+ <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+ <a href="#usage" class="btn btn-sm btn-outline-primary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-play-circle-fill"></i> Example Usage
+ </a>
+ <a href="#options" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-list-nested"></i> Option Summary
+ </a>
+ </div>
+ <p class="lead text-body-secondary mb-0">
+ Use the <code class="text-primary fw-semibold">composite</code> program to overlap one image over another. See <a href="../command-line-processing/index.html" class="text-decoration-none">Command Line Processing</a> for advice on how to structure your <code class="text-primary fw-semibold">composite</code> command, or check below for usage examples.
+ </p>
</div>
+<!-- Section: Example Usage -->
+<section id="usage" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Example Usage</h2>
+ <a href="#usage" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ We list a few examples of the <code class="text-primary">composite</code> command here to illustrate its usefulness and ease of use. To get started, let's overlay a smiley face over a rose:
+ </p>
+ <!-- Terminal Code Block 1 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">composite-smiley.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/composite/magick composite -gravity center smile.gif rose: rose-over.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick composite -gravity center smile.gif rose: rose-over.png</code></pre>
+ </div>
+ </div>
+ <!-- Image Flow Preview 1 -->
+ <div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 bg-body-tertiary border rounded-3 mb-4 shadow-sm">
+ <a href="https://imagemagick.org/image/smile.gif" class="text-decoration-none text-center"><img src="https://imagemagick.org/image/smile.gif" width="48" height="48" alt="smile" class="rounded border bg-white p-1" /><div class="small text-muted mt-1">smile.gif</div></a>
+ <img src="https://imagemagick.org/image/over.gif" width="56" height="46" alt="over" />
+ <a href="https://imagemagick.org/image/rose.jpg" class="text-decoration-none text-center"><img src="https://imagemagick.org/image/rose.jpg" width="70" height="46" alt="rose" class="rounded border" /><div class="small text-muted mt-1">rose:</div></a>
+ <img src="https://imagemagick.org/image/right.gif" width="20" height="20" alt="==>" />
+ <a href="https://imagemagick.org/image/rose-over.png" class="text-decoration-none text-center"><img src="https://imagemagick.org/image/rose-over.png" width="70" height="46" alt="rose" class="rounded border" /><div class="small text-muted mt-1">rose-over.png</div></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ You can create a three-dimensional effect with the <var class="text-primary fw-semibold">Atop</var> operator:
+ </p>
+ <!-- Terminal Code Block 2 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">red-ball.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('magick -size 70x70 canvas:none -fill red -draw \'circle 35,35 10,30\' red-circle.png\nmagick -size 70x70 canvas:none -draw \"circle 35,35 35,20\" -channel RGB -negate -channel A -gaussian-blur 0x8 white-highlight.png\nmagick composite -compose atop -geometry -13-17 white-highlight.png red-circle.png red-ball.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code><span class="text-success">$</span> magick -size 70x70 canvas:none -fill red -draw 'circle 35,35 10,30' red-circle.png
+<span class="text-success">$</span> magick -size 70x70 canvas:none -draw "circle 35,35 35,20" -channel RGB -negate -channel A -gaussian-blur 0x8 white-highlight.png
+<span class="text-success">$</span> magick composite -compose atop -geometry -13-17 white-highlight.png red-circle.png red-ball.png</code></pre>
+ </div>
+ </div>
+ <!-- Image Flow Preview 2 -->
+ <div class="d-flex flex-wrap align-items-center justify-content-center gap-3 p-3 bg-body-tertiary border rounded-3 mb-4 shadow-sm">
+ <a href="https://imagemagick.org/image/white-highlight.png" class="text-decoration-none text-center"><img src="https://imagemagick.org/image/white-highlight.png" width="70" height="70" alt="white highlight" class="rounded border bg-white p-1" /><div class="small text-muted mt-1">highlight</div></a>
+ <img src="https://imagemagick.org/image/atop.gif" width="56" height="70" alt="atop" />
+ <a href="https://imagemagick.org/image/red-circle.png" class="text-decoration-none text-center"><img src="https://imagemagick.org/image/red-circle.png" width="70" height="70" alt="red circle" class="rounded border bg-white p-1" /><div class="small text-muted mt-1">circle</div></a>
+ <img src="https://imagemagick.org/image/right.gif" width="20" height="20" alt="==>" />
+ <a href="https://imagemagick.org/image/red-ball.png" class="text-decoration-none text-center"><img src="https://imagemagick.org/image/red-ball.png" width="70" height="70" alt="red ball" class="rounded border bg-white p-1" /><div class="small text-muted mt-1">red-ball.png</div></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ Or suppose you want to blend a bear into a stream <a href="https://github.com/ImageMagick/ImageMagick/discussions/4712" target="_blank" class="text-decoration-none">seamlessly</a>. Try this command:
+ </p>
+ <!-- Terminal Code Block 3 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">seamless-blend.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/composite/magick -verbose stream.jpg bear.jpg bear_mask.png -define compose:args=400x0.0002+100 -compose seamless-blend -geometry +30+30 -composite bear-in-stream.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code><span class="text-success">$</span> magick -verbose stream.jpg bear.jpg bear_mask.png \
+ -define compose:args=400x0.0002+100 -compose seamless-blend \
+ -geometry +30+30 -composite bear-in-stream.png</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">
+ The mask marks the area around the bear to blend. Seamless blending is an iterative process. Here, we limit the iterations to 400 or less if the blending converges (residual has an RMSE of less than 0.0002). The residual value (RMSE) is printed every 100 iterations. Note that seamless blending works most effectively when the HDRI feature is enabled.
+ </p>
+ <!-- Terminal Code Block 4 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">read-mask.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/composite/magick -verbose stream.jpg\\( bear.jpg -read-mask only_bear.png \\) bear_mask.png -define compose:args=400x0.0002+100 -compose seamless-blend -geometry +30+30 -composite bear-in-stream.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code><span class="text-success">$</span> magick -verbose stream.jpg \( bear.jpg -read-mask only_bear.png \) bear_mask.png \
+ -define compose:args=400x0.0002+100 -compose seamless-blend \
+ -geometry +30+30 -composite bear-in-stream.png</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-4">
+ Here we create a read mask that marks the foreground object from its background. No blending is applied to the foreground object, just its surroundings. The read-mask preserves the colors of the bear and prevents them from lightening as in the first example. Note that read-masks must be black on white background as opposed to normal masks, which are white on black background.
+ </p>
+ <div class="alert alert-info d-flex align-items-center gap-3 border-0 bg-info bg-opacity-10 text-info-emphasis rounded-3" role="alert">
+ <i class="bi bi-info-circle-fill fs-4 flex-shrink-0"></i>
+ <div>
+ You can find additional examples in <a href="https://usage.imagemagick.org/" target="_blank" class="alert-link">Examples of ImageMagick Usage</a>, and learn more about mathematics at <a href="http://www.w3.org/TR/SVG12/rendering.html" target="_blank" class="alert-link">SVG Alpha Compositing</a>.
+ </div>
+ </div>
+</section>
+<!-- Section: Option Summary -->
+<section id="options" class="mb-5">
+ <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-3">
+ <div class="d-flex align-items-center gap-2">
+ <h2 class="h3 fw-bold mb-0">Option Summary</h2>
+ <a href="#options" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <!-- Live Search Filter for Options -->
+ <div class="input-group input-group-sm" style="max-width: 280px;">
+ <span class="input-group-text bg-body-tertiary border-end-0"><i class="bi bi-filter text-secondary"></i></span>
+ <input type="text" id="optionSearch" class="form-control border-start-0 bg-body-tertiary" placeholder="Filter options..." onkeyup="filterOptions()">
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">
+ The <code class="text-primary">composite</code> command recognizes these options. Click on an option to get more details about how that option works.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0" id="optionsTable">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 35%;">Option</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><a href="../command-line-options/index.html#affine" class="fw-semibold text-decoration-none">-affine <var class="text-secondary"><matrix></var></a></td>
+ <td class="font-sans">affine transform matrix</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="fw-semibold text-decoration-none">-alpha</a></td>
+ <td class="font-sans">on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="fw-semibold text-decoration-none">-authenticate <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blend" class="fw-semibold text-decoration-none">-blend <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">blend images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-primary" class="fw-semibold text-decoration-none">-blue-primary <var class="text-secondary"><point></var></a></td>
+ <td class="font-sans">chromaticity blue primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="fw-semibold text-decoration-none">-border <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="fw-semibold text-decoration-none">-bordercolor <var class="text-secondary"><color></var></a></td>
+ <td class="font-sans">border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="fw-semibold text-decoration-none">-channel <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="fw-semibold text-decoration-none">-colors <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="fw-semibold text-decoration-none">-colorspace <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="fw-semibold text-decoration-none">-comment <var class="text-secondary"><string></var></a></td>
+ <td class="font-sans">annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compose" class="fw-semibold text-decoration-none">-compose <var class="text-secondary"><operator></var></a></td>
+ <td class="font-sans">set image composite operator</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="fw-semibold text-decoration-none">-compress <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="fw-semibold text-decoration-none">-debug <var class="text-secondary"><events></var></a></td>
+ <td class="font-sans">display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#decipher" class="fw-semibold text-decoration-none">-decipher <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="fw-semibold text-decoration-none">-define <var class="text-secondary"><format:option></var></a></td>
+ <td class="font-sans">define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="fw-semibold text-decoration-none">-density <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="fw-semibold text-decoration-none">-depth <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#displace" class="fw-semibold text-decoration-none">-displace <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">shift image pixels defined by a displacement map</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dissolve" class="fw-semibold text-decoration-none">-dissolve <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">dissolve the two images a given percent</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="fw-semibold text-decoration-none">-dither <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encipher" class="fw-semibold text-decoration-none">-encipher <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encoding" class="fw-semibold text-decoration-none">-encoding <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">text encoding type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="fw-semibold text-decoration-none">-endian <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="fw-semibold text-decoration-none">-extract <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="fw-semibold text-decoration-none">-filter <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#font" class="fw-semibold text-decoration-none">-font <var class="text-secondary"><name></var></a></td>
+ <td class="font-sans">render text with this font</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="fw-semibold text-decoration-none">-geometry <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="fw-semibold text-decoration-none">-gravity <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#green-primary" class="fw-semibold text-decoration-none">-green-primary <var class="text-secondary"><point></var></a></td>
+ <td class="font-sans">chromaticity green primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="fw-semibold text-decoration-none">-help</a></td>
+ <td class="font-sans">print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="fw-semibold text-decoration-none">-identify</a></td>
+ <td class="font-sans">identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="fw-semibold text-decoration-none">-interlace <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="fw-semibold text-decoration-none">-interpolate <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="fw-semibold text-decoration-none">-label <var class="text-secondary"><string></var></a></td>
+ <td class="font-sans">assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#level" class="fw-semibold text-decoration-none">-level <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="fw-semibold text-decoration-none">-limit <var class="text-secondary"><type value></var></a></td>
+ <td class="font-sans">pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="fw-semibold text-decoration-none">-log <var class="text-secondary"><format></var></a></td>
+ <td class="font-sans">format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="fw-semibold text-decoration-none">-monitor</a></td>
+ <td class="font-sans">monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="fw-semibold text-decoration-none">-monochrome</a></td>
+ <td class="font-sans">transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#negate" class="fw-semibold text-decoration-none">-negate</a></td>
+ <td class="font-sans">replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="fw-semibold text-decoration-none">-page <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#pointsize" class="fw-semibold text-decoration-none">-pointsize <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">font point size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="fw-semibold text-decoration-none">-profile <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quality" class="fw-semibold text-decoration-none">-quality <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="fw-semibold text-decoration-none">-quantize <var class="text-secondary"><colorspace></var></a></td>
+ <td class="font-sans">reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="fw-semibold text-decoration-none">-quiet</a></td>
+ <td class="font-sans">suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#red-primary" class="fw-semibold text-decoration-none">-red-primary <var class="text-secondary"><point></var></a></td>
+ <td class="font-sans">chromaticity red primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="fw-semibold text-decoration-none">-regard-warnings</a></td>
+ <td class="font-sans">pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="fw-semibold text-decoration-none">-respect-parentheses</a></td>
+ <td class="font-sans">settings remain in effect until parenthesis boundary</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="fw-semibold text-decoration-none">-rotate <var class="text-secondary"><degrees></var></a></td>
+ <td class="font-sans">apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="fw-semibold text-decoration-none">-sampling-factor <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scene" class="fw-semibold text-decoration-none">-scene <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">image scene number</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="fw-semibold text-decoration-none">-seed <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="fw-semibold text-decoration-none">-set <var class="text-secondary"><attribute value></var></a></td>
+ <td class="font-sans">set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sharpen" class="fw-semibold text-decoration-none">-sharpen <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shave" class="fw-semibold text-decoration-none">-shave <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">shave pixels from the image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="fw-semibold text-decoration-none">-size <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stegano" class="fw-semibold text-decoration-none">-stegano <var class="text-secondary"><offset></var></a></td>
+ <td class="font-sans">hide watermark within an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stereo" class="fw-semibold text-decoration-none">-stereo <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">combine two image to create a stereo anaglyph</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="fw-semibold text-decoration-none">-strip</a></td>
+ <td class="font-sans">strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swap" class="fw-semibold text-decoration-none">-swap <var class="text-secondary"><indexes></var></a></td>
+ <td class="font-sans">swap two images in the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#synchronize" class="fw-semibold text-decoration-none">-synchronize</a></td>
+ <td class="font-sans">synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#taint" class="fw-semibold text-decoration-none">-taint</a></td>
+ <td class="font-sans">mark the image as modified</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#thumbnail" class="fw-semibold text-decoration-none">-thumbnail <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">create a thumbnail of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile" class="fw-semibold text-decoration-none">-tile</a></td>
+ <td class="font-sans">repeat composite operation across and down image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transform" class="fw-semibold text-decoration-none">-transform</a></td>
+ <td class="font-sans">affine transform image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="fw-semibold text-decoration-none">-transparent-color <var class="text-secondary"><color></var></a></td>
+ <td class="font-sans">transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#treedepth" class="fw-semibold text-decoration-none">-treedepth <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">color tree depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#type" class="fw-semibold text-decoration-none">-type <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">image type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#units" class="fw-semibold text-decoration-none">-units <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">the units of image resolution</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unsharp" class="fw-semibold text-decoration-none">-unsharp <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="fw-semibold text-decoration-none">-verbose</a></td>
+ <td class="font-sans">print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="fw-semibold text-decoration-none">-version</a></td>
+ <td class="font-sans">print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="fw-semibold text-decoration-none">-virtual-pixel <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#watermark" class="fw-semibold text-decoration-none">-watermark <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">percent brightness and saturation of a watermark</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-point" class="fw-semibold text-decoration-none">-white-point <var class="text-secondary"><point></var></a></td>
+ <td class="font-sans">chromaticity white point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-threshold" class="fw-semibold text-decoration-none">-white-threshold <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">force all pixels above the threshold into white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="fw-semibold text-decoration-none">-write <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">write images to this file</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
+<script>
+ function filterOptions() {
+ const input = document.getElementById('optionSearch');
+ const filter = input.value.toLowerCase();
+ const table = document.getElementById('optionsTable');
+ const tr = table.getElementsByTagName('tr');
+ for (let i = 1; i < tr.length; i++) {
+ const tdOption = tr[i].getElementsByTagName('td')[0];
+ const tdDesc = tr[i].getElementsByTagName('td')[1];
+ if (tdOption || tdDesc) {
+ const optionText = tdOption.textContent || tdOption.innerText;
+ const descText = tdDesc.textContent || tdDesc.innerText;
+ if (optionText.toLowerCase().indexOf(filter) > -1 || descText.toLowerCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+ }
+</script>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/conjure/index.html b/www/conjure/index.html
index da271f1f2..614207b77 100644
--- a/www/conjure/index.html
+++ b/www/conjure/index.html
@@ -8,233 +8,324 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Conjure</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how to use ImageMagick’s conjure program to run custom image processing workflows using XML-based Magick Scripting Language (MSL) scripts.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Conjure">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how to use ImageMagick’s conjure program to run custom image processing workflows using XML-based Magick Scripting Language (MSL) scripts.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Conjure">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Conjure",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/conjure/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to use ImageMagick’s conjure program to run custom image processing workflows using XML-based Magick Scripting Language (MSL) scripts.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/conjure/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/conjure/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Conjure</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a> • <a href="#msl">Magick Scripting Language (MSL)</a> </p>
-
-<p class="lead">The <code>conjure</code> program gives you the ability to perform custom image processing tasks from a script written in the Magick Scripting Language (MSL). MSL is XML-based and consists of action statements with attributes. Actions include reading an image, processing an image, getting attributes from an image, writing an image, and more. An attribute is a key/value pair that modifies the behavior of an action. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>conjure</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>conjure</code> command here to illustrate its usefulness and ease of use. To get started, here is simple <code>conjure</code> command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick conjure -dimensions 400x400 msl:incantation.msl
-</code></pre>
-
-<p>The MSL script <a href="https://imagemagick.org/source/incantation.msl">incantation.msl</a> used above is here:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Conjure</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to use ImageMagick’s conjure program to run custom image processing workflows using XML-based Magick Scripting Language (MSL) scripts.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><?xml version="1.0" encoding="UTF-8"?>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="conjure-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#usage" class="text-decoration-none text-primary"><i class="bi bi-terminal me-1"></i> Example Usage</a>
+ <span class="text-muted">•</span>
+ <a href="#options" class="text-decoration-none text-primary"><i class="bi bi-list-columns me-1"></i> Option Summary</a>
+ <span class="text-muted">•</span>
+ <a href="#msl" class="text-decoration-none text-primary"><i class="bi bi-code-square me-1"></i> MSL Elements</a>
+ </div>
+ </div>
+ <p class="lead text-body-secondary mb-4">
+ The <code>conjure</code> program gives you the ability to perform custom image processing tasks from a script written in the Magick Scripting Language (MSL). MSL is XML-based and consists of action statements with attributes. Actions include reading an image, processing an image, getting attributes from an image, writing an image, and more. An attribute is a key/value pair that modifies the behavior of an action. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>conjure</code> command or explore the examples below.
+ </p>
+ <!-- Example Usage Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="usage">
+ <a class="anchor text-decoration-none text-body" href="#usage">Example Usage</a>
+ </h2>
+ <p>We list a few examples of the <code>conjure</code> command here to illustrate its usefulness and ease of use. To get started, here is a simple <code>conjure</code> command:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick conjure -dimensions 400x400 msl:incantation.msl</code></pre>
+ <p>The MSL script <a href="https://imagemagick.org/source/incantation.msl" class="text-decoration-none">incantation.msl <i class="bi bi-box-arrow-up-right small"></i></a> used above is shown here:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code><?xml version="1.0" encoding="UTF-8"?>
<image>
<read filename="image.gif" />
<get width="base-width" height="base-height" />
@@ -242,42 +333,33 @@
<get width="resize-width" height="resize-height" />
<print output="Image sized from %[base-width]x%[base-height] to %[resize-width]x%[resize-height].\n" />
<write filename="image.png" />
-</image>
-</code></pre>
-
-<p>In this example, a family stayed home for their vacation but as far as their friends are concerned they went to a beautiful beach in the Caribbean:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><?xml version="1.0" encoding="UTF-8"?>
-<group>
- <image id="family">
- <read filename="family.gif"/>
- <resize geometry="300x300"/>
- </image>
- <image id="palm-trees">
- <read filename="palm-trees.gif"/>
- <resize geometry="300x100"/>
- </image>
- <image>
- <read filename="beach.jpg"/>
- <composite image="family" geometry="+30+40"/>
- <composite image="palm-trees" geometry="+320+90"/>
- </image>
- <write filename="family-vacation.png"/>
-</group>
-</code></pre>
-
-<p>Here we display the width in pixels of text for a particular font and pointsize.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><?xml version="1.0" encoding="UTF-8"?>
+</image></code></pre>
+ <p>In this example, a family stayed home for their vacation, but as far as their friends are concerned, they went to a beautiful beach in the Caribbean:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code><?xml version="1.0" encoding="UTF-8"?>
+<group>
+ <image id="family">
+ <read filename="family.gif"/>
+ <resize geometry="300x300"/>
+ </image>
+ <image id="palm-trees">
+ <read filename="palm-trees.gif"/>
+ <resize geometry="300x100"/>
+ </image>
+ <image>
+ <read filename="beach.jpg"/>
+ <composite image="family" geometry="+30+40"/>
+ <composite image="palm-trees" geometry="+320+90"/>
+ </image>
+ <write filename="family-vacation.png"/>
+</group></code></pre>
+ <p>Here we display the width in pixels of text for a particular font and pointsize:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code><?xml version="1.0" encoding="UTF-8"?>
<image>
<query-font-metrics text="ImageMagick" font="helvetica" pointsize="48" />
<print output="Text width is %[msl:font-metrics.width] pixels.\n" />
-</image>
-</code></pre>
-
-<p>The <code>query-font-metrics</code> tag supports these properties:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>msl:font-metrics.pixels_per_em.x
+</image></code></pre>
+ <p>The <code>query-font-metrics</code> tag supports these properties:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>msl:font-metrics.pixels_per_em.x
msl:font-metrics.pixels_per_em.y
msl:font-metrics.ascent
msl:font-metrics.descent
@@ -289,1073 +371,850 @@ msl:font-metrics.bounds.y1
msl:font-metrics.bounds.x2
msl:font-metrics.bounds.y2
msl:font-metrics.origin.x
-msl:font-metrics.origin.y
-</code></pre>
-
-<p>MSL supports most methods and attributes discussed in the <a href="../perl-magick/index.html">Perl API for ImageMagick</a>.
-</p>
-
-<p>In addition, MSL supports the <code>swap</code> element with a single <code>indexes</code> element.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>conjure</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
-<thead>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- </tbody>
-</table>
+msl:font-metrics.origin.y</code></pre>
+ <p class="mb-3">MSL supports most methods and attributes discussed in the <a href="../perl-magick/index.html" class="text-decoration-none">Perl API for ImageMagick</a>.</p>
+ <p class="mb-5">In addition, MSL supports the <code>swap</code> element with a single <code>indexes</code> element.</p>
+ <!-- Option Summary Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">Option Summary</a>
+ </h2>
+ <p class="text-body-secondary mb-3">The <code>conjure</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
+ <div class="card im-card shadow-sm mb-5 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width:30%">
+ <col style="width:70%">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Option</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-semibold">-debug <var>events</var></a></td>
+ <td>display copious debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#help" class="text-decoration-none fw-semibold">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#log" class="text-decoration-none fw-semibold">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-semibold">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-semibold">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-semibold">-regard-warnings</a></td>
+ <td>pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-semibold">-seed <var>value</var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-semibold">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#version" class="text-decoration-none fw-semibold">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- Magick Scripting Language Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="msl">
+ <a class="anchor text-decoration-none text-body" href="#msl">Magick Scripting Language (MSL)</a>
+ </h2>
+ <p class="text-body-secondary mb-3">The <code>conjure</code> command recognizes these MSL elements. Any element with a strike-through is not supported yet.</p>
+ <div class="card im-card shadow-sm overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width:25%">
+ <col style="width:35%">
+ <col style="width:40%">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Method</th>
+ <th class="py-2">Parameters</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">adaptiveblur</td>
+ <td class="font-mono small">geometry="geometry", radius="double", sigma="double", bias="double", channel="..."</td>
+ <td>adaptively blur the image with a Gaussian operator of the given radius and standard deviation (sigma). Decrease the effect near edges.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">adaptiveresize</td>
+ <td class="font-mono small">geometry="geometry", width="integer", height="integer", filter="...", support="double", blur="double"</td>
+ <td>adaptively resize image using data dependant triangulation. Specify blur > 1 for blurry or < 1 for sharp</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">adaptivesharpen</td>
+ <td class="font-mono small">geometry="geometry", radius="double", sigma="double", bias="double", channel="..."</td>
+ <td>adaptively sharpen the image with a Gaussian operator of the given radius and standard deviation (sigma). Increase the effect near edges.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">adaptivethreshold</td>
+ <td class="font-mono small">geometry="geometry", width="integer", height="integer", offset="integer"</td>
+ <td>local adaptive thresholding.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">addnoise</td>
+ <td class="font-mono small">noise="...", attenuate="double", channel="..."</td>
+ <td>add noise to an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">affinetransform</td>
+ <td class="font-mono small">affine="...", translate="...", scale="...", rotate="...", skewX="...", skewY="...", interpolate="...", background="..."</td>
+ <td>affine transform image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">affinity</td>
+ <td class="font-mono small">image="image-handle", method="..."</td>
+ <td>choose a particular set of colors from this image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><annotate></td>
+ <td class="font-mono small">text="string", font="string", family="string", style="...", pointsize="integer", fill="color name", ...</td>
+ <td>annotate an image with text. See QueryFontMetrics to get font metrics without rendering any text.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">autogamma</td>
+ <td class="font-mono small">channel="..."</td>
+ <td>automagically adjust gamma level of image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">autolevel</td>
+ <td class="font-mono small">channel="..."</td>
+ <td>automagically adjust color levels of image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary">autoorient</td>
+ <td class="font-mono small"> </td>
+ <td>adjusts an image so that its orientation is suitable for viewing (i.e. top-left orientation)</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">blackthreshold</td>
+ <td class="font-mono small">threshold="string", channel="..."</td>
+ <td>force all pixels below the threshold intensity into black</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">blueshift</td>
+ <td class="font-mono small">factor="double"</td>
+ <td>simulate a scene at nighttime in the moonlight. Start with a factor of 1.5.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><blur></td>
+ <td class="font-mono small">geometry="geometry", radius="double", sigma="double", bias="double", channel="..."</td>
+ <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><border></td>
+ <td class="font-mono small">geometry="geometry", width="integer", height="integer", bordercolor="color name", compose="..."</td>
+ <td>surround the image with a border of color</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><charcoal></td>
+ <td class="font-mono small">geometry="geometry", radius="double", sigma="double"</td>
+ <td>simulate a charcoal drawing</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><chop></td>
+ <td class="font-mono small">geometry="geometry", width="integer", height="integer", x="integer", y="integer"</td>
+ <td>chop an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">clamp</td>
+ <td class="font-mono small">channel="..."</td>
+ <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">clip</td>
+ <td class="font-mono small">id="name", inside="true, false"</td>
+ <td>apply along a named path from the 8BIM profile.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">clipmask</td>
+ <td class="font-mono small">mask="image-handle"</td>
+ <td>clip image as defined by the image mask</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">clut</td>
+ <td class="font-mono small">image="image-handle", interpolate="...", channel="..."</td>
+ <td>apply a color lookup table to an image sequence</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">coalesce</td>
+ <td class="font-mono small"> </td>
+ <td>merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">color</td>
+ <td class="font-mono small">color="color name"</td>
+ <td>set the entire image to this color.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">colordecisionlist</td>
+ <td class="font-mono small">filename="string"</td>
+ <td>color correct with a color decision list.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><colorize></td>
+ <td class="font-mono small">fill="color name", blend="string"</td>
+ <td>colorize the image with the fill color</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">colormatrix</td>
+ <td class="font-mono small">matrix="..."</td>
+ <td>apply color correction to the image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><comment></td>
+ <td class="font-mono small">string</td>
+ <td>add a comment to your image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">comparelayers</td>
+ <td class="font-mono small">method="..."</td>
+ <td>compares each image with the next in a sequence and returns the minimum bounding region of any pixel differences.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><composite></td>
+ <td class="font-mono small">image="image-handle", compose="...", geometry="..."</td>
+ <td>composite one image onto another. Use the rotate parameter in concert with the tile parameter.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><contrast></td>
+ <td class="font-mono small">sharpen="True, False"</td>
+ <td>enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">contraststretch</td>
+ <td class="font-mono small">levels="..."</td>
+ <td>improve the contrast in an image by 'stretching' the range of intensity values</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">convolve</td>
+ <td class="font-mono small">coefficients="..."</td>
+ <td>apply a convolution kernel to the image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><crop></td>
+ <td class="font-mono small">geometry="geometry", width="integer", height="integer", x="integer", y="integer"</td>
+ <td>crop an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">cyclecolormap</td>
+ <td class="font-mono small">amount="integer"</td>
+ <td>displace image colormap by amount</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">decipher</td>
+ <td class="font-mono small">passphrase="string"</td>
+ <td>convert cipher pixels to plain pixels</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">deconstruct</td>
+ <td class="font-mono small"> </td>
+ <td>break down an image sequence into constituent parts</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">deskew</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>straighten the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><despeckle></td>
+ <td class="font-mono small"> </td>
+ <td>reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">difference</td>
+ <td class="font-mono small">image="image-handle"</td>
+ <td>compute the difference metrics between two images</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">distort</td>
+ <td class="font-mono small">points="..."</td>
+ <td>distort image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><draw></td>
+ <td class="font-mono small">primitive="..."</td>
+ <td>annotate an image with one or more graphic primitives.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">encipher</td>
+ <td class="font-mono small">passphrase="string"</td>
+ <td>convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><edge></td>
+ <td class="font-mono small">radius="double"</td>
+ <td>enhance edges within the image with a convolution filter of the given radius.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><emboss></td>
+ <td class="font-mono small">geometry="geometry", radius="double", sigma="double"</td>
+ <td>emboss the image with a convolution filter of the given radius and standard deviation (sigma).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><enhance></td>
+ <td class="font-mono small"> </td>
+ <td>apply a digital filter to enhance a noisy image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><equalize></td>
+ <td class="font-mono small">channel="..."</td>
+ <td>perform histogram equalization to the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">extent</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>set the image size</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">evaluate</td>
+ <td class="font-mono small">value="double", operator="..."</td>
+ <td>apply an arithmetic, relational, or logical expression to the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">filter</td>
+ <td class="font-mono small">kernel="..."</td>
+ <td>apply a convolution kernel to the image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><flip></td>
+ <td class="font-mono small"> </td>
+ <td>reflect the image scanlines in the vertical direction</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><flop></td>
+ <td class="font-mono small"> </td>
+ <td>reflect the image scanlines in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">floodfillpaint</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>changes the color value of any pixel that matches the color of the target pixel and is a neighbor.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">forwardfouriertransform</td>
+ <td class="font-mono small">magnitude="True, False"</td>
+ <td>implements the forward discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><frame></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>surround the image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">function</td>
+ <td class="font-mono small">parameters="..."</td>
+ <td>apply a function to the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><gamma></td>
+ <td class="font-mono small">gamma="string"</td>
+ <td>gamma correct the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">gaussianblur</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>reduce image noise and reduce detail levels with a Gaussian operator.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">getpixel</td>
+ <td class="font-mono small">x="integer", y="integer"</td>
+ <td>get a single pixel.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">getpixels</td>
+ <td class="font-mono small">width="integer", height="integer"</td>
+ <td>get image pixels as defined by the map.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">grayscale</td>
+ <td class="font-mono small">channel="..."</td>
+ <td>convert image to grayscale</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">haldclut</td>
+ <td class="font-mono small">image="image-handle"</td>
+ <td>apply a Hald color lookup table to an image sequence</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">identify</td>
+ <td class="font-mono small">file="file"</td>
+ <td>identify the attributes of an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><implode></td>
+ <td class="font-mono small">amount="double"</td>
+ <td>implode image pixels about the center</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">inversediscretefouriertransform</td>
+ <td class="font-mono small">magnitude="True, False"</td>
+ <td>implements the inverse discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><label></td>
+ <td class="font-mono small">string</td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">layers</td>
+ <td class="font-mono small">method="..."</td>
+ <td>compare each image the GIF disposed forms of the previous image in the sequence.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><level></td>
+ <td class="font-mono small">levels="string"</td>
+ <td>adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">levelcolors</td>
+ <td class="font-mono small">invert="True, False"</td>
+ <td>level image with the given colors</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">linearstretch</td>
+ <td class="font-mono small">levels="..."</td>
+ <td>linear with saturation stretch</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">liquidresize</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>rescale image with seam-carving.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><magnify></td>
+ <td class="font-mono small"> </td>
+ <td>double the size of the image with pixel art scaling</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">mask</td>
+ <td class="font-mono small">mask="image-handle"</td>
+ <td>composite image pixels as defined by the mask</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">mattefloodfill</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>changes the matte value of any pixel that matches the color of the target pixel and is a neighbor.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">medianfilter</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>replace each pixel with the median intensity pixel of a neighborhood.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><minify></td>
+ <td class="font-mono small"> </td>
+ <td>half the size of an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">mode</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>make each pixel the "predominant color" of the neighborhood.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><modulate></td>
+ <td class="font-mono small">factor="geometry"</td>
+ <td>vary the brightness, saturation, and hue of an image by the specified percentage</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">morphology</td>
+ <td class="font-mono small">kernel="..."</td>
+ <td>apply a morphology method to the image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">motionblur</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>reduce image noise with a Gaussian operator at the given angle.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><negate></td>
+ <td class="font-mono small">gray="True, False"</td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><normalize></td>
+ <td class="font-mono small">channel="..."</td>
+ <td>transform image to span the full range of color values</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">oilpaint</td>
+ <td class="font-mono small">radius="integer"</td>
+ <td>simulate an oil painting</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><opaque></td>
+ <td class="font-mono small">color="color name", fill="color name"</td>
+ <td>change this color to the fill color within the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">ordereddither</td>
+ <td class="font-mono small">threshold="..."</td>
+ <td>order dither image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">perceptible</td>
+ <td class="font-mono small">epsilon="double"</td>
+ <td>set each pixel whose value is less than |epsilon| to -epsilon or epsilon.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">polaroid</td>
+ <td class="font-mono small">caption="string"</td>
+ <td>simulate a Polaroid picture.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">posterize</td>
+ <td class="font-mono small">levels="integer"</td>
+ <td>reduce the image to a limited number of color level</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><profile></td>
+ <td class="font-mono small">name="string", profile="blob"</td>
+ <td>add or remove ICC or IPTC image profile.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><quantize></td>
+ <td class="font-mono small">colors="integer", colorspace="..."</td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">radialblur</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>radial blur the image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><raise></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>lighten or darken image edges to create a 3-D effect</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">reducenoise</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>reduce noise in the image with a noise peak elimination filter</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">remap</td>
+ <td class="font-mono small">image="image-handle"</td>
+ <td>replace the colors of an image with the closest color from a reference image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><resample></td>
+ <td class="font-mono small">density="..."</td>
+ <td>resample image to desired resolution.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><resize></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>scale image to desired size.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><roll></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>roll an image vertically or horizontally</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><rotate></td>
+ <td class="font-mono small">degrees="double"</td>
+ <td>rotate an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><sample></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>scale image with pixel sampling.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><scale></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>scale image to desired size</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><segment></td>
+ <td class="font-mono small">colorspace="..."</td>
+ <td>segment an image by analyzing histograms of color components</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">selectiveblur</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>selectively blur pixels within a contrast threshold.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">separate</td>
+ <td class="font-mono small">channel="..."</td>
+ <td>separate a channel from the image into a grayscale image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><shade></td>
+ <td class="font-mono small">azimuth="double", elevation="double"</td>
+ <td>shade the image using a distant light source</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">setpixel</td>
+ <td class="font-mono small">x="integer", y="integer"</td>
+ <td>set a single pixel.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><shadow></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>simulate an image shadow</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><sharpen></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>sharpen the image with a Gaussian operator.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><shave></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>shave pixels from the image edges</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><shear></td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>shear the image along the X or Y axis</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">sigmoidalcontrast</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>sigmoidal non-linearity contrast control.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><signature></td>
+ <td class="font-mono small"> </td>
+ <td>generate an SHA-256 message digest for the image pixel stream</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">sketch</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>sketch the image with a Gaussian operator.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><solarize></td>
+ <td class="font-mono small">threshold="double"</td>
+ <td>negate all pixels above the threshold level</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">sparsecolor</td>
+ <td class="font-mono small">points="..."</td>
+ <td>interpolate the image colors around the supplied points</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">splice</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>splice an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><spread></td>
+ <td class="font-mono small">radius="double"</td>
+ <td>displace image pixels by a random amount</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">statistic</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>replace each pixel with corresponding statistic from the neighborhood.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><stegano></td>
+ <td class="font-mono small">image="image-handle"</td>
+ <td>hide a digital watermark within the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><stereo></td>
+ <td class="font-mono small">image="image-handle"</td>
+ <td>composites two images and produces a single stereo pair image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><strip></td>
+ <td class="font-mono small"> </td>
+ <td>strip an image of all profiles and comments.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><swirl></td>
+ <td class="font-mono small">degrees="double"</td>
+ <td>swirl image pixels about the center</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">texture</td>
+ <td class="font-mono small">texture="image-handle"</td>
+ <td>name of texture to tile onto the image background</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">thumbnail</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>changes the size of an image and removes profiles.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><threshold></td>
+ <td class="font-mono small">threshold="string"</td>
+ <td>threshold the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">tint</td>
+ <td class="font-mono small">fill="color name"</td>
+ <td>tint the image with the fill color.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><transparent></td>
+ <td class="font-mono small">color="color name"</td>
+ <td>make this color transparent within the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">transpose</td>
+ <td class="font-mono small"> </td>
+ <td>flip image vertically and rotate 90 degrees</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">transverse</td>
+ <td class="font-mono small"> </td>
+ <td>flop image horizontally and rotate 270 degrees</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono fw-bold text-primary"><trim></td>
+ <td class="font-mono small"> </td>
+ <td>remove edges that are the background color from the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">unsharpmask</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>sharpen the image with the unsharp mask algorithm.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">vignette</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>offset the edges of the image in vignette style</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">wave</td>
+ <td class="font-mono small">geometry="..."</td>
+ <td>alter an image along a sine wave</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono text-muted text-decoration-line-through">whitethreshold</td>
+ <td class="font-mono small">threshold="string"</td>
+ <td>force all pixels above the threshold intensity into white</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
-<h2><a class="anchor" id="msl"></a>Magick Scripting Language</h2>
-<p>The <code>conjure</code> command recognizes these MSL elements. Any element with a strike-thru is not supported yet.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
- <colgroup>
- <col style="width:20%">
- <col style="width:20%">
- <col style="width:60%">
- </colgroup>
-<caption>Magick Scripting Language (MSL)</caption>
-<thead>
- <tr>
- <th>Method</th>
- <th>Parameters</th>
- <th>Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td><strike>adaptiveblur</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>adaptively blur the image with a Gaussian operator of the given radius and standard deviation (sigma). Decrease the effect near edges.</td>
- </tr>
-
- <tr>
- <td><strike>adaptiveresize</strike></td>
- <td>geometry="geometry", width="integer", height="integer", filter="Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc", support="double", blur="double"</td>
-
- <td>adaptively resize image using data dependant triangulation. Specify blur > 1 for blurry or < 1 for sharp</td>
- </tr>
-
- <tr>
- <td><strike>adaptivesharpen</strike></td>
-
- <td>geometry="geometry", radius="double", sigma="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>adaptively sharpen the image with a Gaussian operator of the given radius and standard deviation (sigma). Increase the effect near edges.</td>
- </tr>
-
- <tr>
- <td><strike>adaptivethreshold</strike></td>
- <td>geometry="geometry", width="integer", height="integer", offset="integer"</td>
- <td>local adaptive thresholding.</td>
-
- </tr>
-
- <tr>
- <td><strike>addnoise</strike></td>
- <td>noise="Uniform, Gaussian, Multiplicative, Impulse, Laplacian, Poisson", attenuate="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>add noise to an image</td>
-
- </tr>
-
- <tr>
- <td><strike>affinetransform</strike></td>
- <td>affine="array of float values", translate="float, float", scale= "float, float", rotate="float", skewX="float", skewY="float", interpolate="Average, Bicubic, Bilinear, Filter, Integer, Mesh, NearestNeighbor", background="color name"</td>
-
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><strike>affinity</strike></td>
- <td>image="image-handle", method="None, FloydSteinberg, Riemersma"</td>
-
- <td>choose a particular set of colors from this image</td>
- </tr>
-
- <tr>
- <td><annotate></td>
- <td>text="string", font="string", family="string", style="Normal, Italic, Oblique, Any", stretch="Normal, UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded", weight="integer", pointsize="integer", density="geometry", stroke="color name", strokewidth="integer", fill="color name", undercolor="color name", kerning="float", geometry="geometry", gravity="NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast", antialias="true, false", x="integer", y="integer", affine="array of float values", translate="float, float", scale="float, float", rotate="float". skewX="float", skewY= "float", align="Left, Center, Right", encoding="UTF-8", interline-spacing="double", interword-spacing="double", direction="right-to-left, left-to-right"</td>
-
- <td>annotate an image with text. See QueryFontMetrics to get font metrics without rendering any text.</td>
- </tr>
-
- <tr>
- <td><strike>autogamma</strike></td>
- <td>channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>automagically adjust gamma level of image</td>
- </tr>
-
- <tr>
- <td><strike>autolevel</strike></td>
- <td>channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>automagically adjust color levels of image</td>
-
- </tr>
-
- <tr>
- <td>autoorient</td>
- <td> </td>
- <td>adjusts an image so that its orientation is suitable for viewing (i.e. top-left orientation)</td>
- </tr>
-
- <tr>
-
- <td><strike>blackthreshold</strike></td>
- <td>threshold="string", , channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>force all pixels below the threshold intensity into black</td>
- </tr>
-
- <tr>
-
- <td><strike>blueshift</strike></td>
- <td>factor="double",</td>
- <td>simulate a scene at nighttime in the moonlight. Start with a factor of 1.5.</td>
- </tr>
-
- <tr>
- <td><blur></td>
-
- <td>geometry="geometry", radius="double", sigma="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td><border></td>
- <td>geometry="geometry", width="integer", height="integer", bordercolor="color name", compose="Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyOpacity, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor ",</td>
-
- <td>surround the image with a border of color</td>
- </tr>
-
- <tr>
- <td><charcoal></td>
- <td>geometry="geometry", radius="double", sigma="double"</td>
-
- <td>simulate a charcoal drawing</td>
- </tr>
-
- <tr>
- <td><chop></td>
- <td>geometry="geometry", width="integer", height="integer", x="integer", y="integer"</td>
-
- <td>chop an image</td>
- </tr>
-
- <tr>
- <td><strike>clamp</strike></td>
- <td>channel="Red, RGB, All, etc."</td>
- <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
-
- </tr>
-
- <tr>
- <td><strike>clip</strike></td>
- <td>id="name", inside=""true, false"",</td>
- <td>apply along a named path from the 8BIM profile.</td>
-
- </tr>
-
- <tr>
- <td><strike>clipmask</strike></td>
- <td>mask="image-handle"</td>
- <td>clip image as defined by the image mask</td>
- </tr>
-
- <tr>
- <td><strike>clut</strike></td>
- <td>image="image-handle", interpolate="Average, Bicubic, Bilinear, Filter, Integer, Mesh, NearestNeighbor", channel="Red, RGB, All, etc."</td>
- <td>apply a color lookup table to an image sequence</td>
- </tr>
-
- <tr>
- <td><strike>coalesce</strike></td>
- <td> </td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><strike>color</strike></td>
-
- <td>color="color name"</td>
- <td>set the entire image to this color.</td>
- </tr>
-
- <tr>
- <td><strike>colordecisionlist</strike></td>
- <td>filename="string",</td>
-
- <td>color correct with a color decision list.</td>
- </tr>
-
- <tr>
- <td><colorize></td>
- <td>fill="color name", blend="string"</td>
-
- <td>colorize the image with the fill color</td>
- </tr>
-
- <tr>
- <td><strike>colormatrix</strike></td>
- <td>matrix="array of float values"</td>
- <td>apply color correction to the image. Although you can use variable sized matrices, typically you use a 5 x 5 for an RGBA image and a 6x6 for CMYKA. A 6x6 matrix is required for offsets (populate the last column with normalized values).</td>
-
- </tr>
-
- <tr>
- <td><comment></td>
- <td>string</td>
- <td>add a comment to your image</td>
- </tr>
-
- <tr>
- <td><strike>comparelayers</strike></td>
- <td>method="any, clear, overlay"</td>
- <td>compares each image with the next in a sequence and returns the minimum bounding region of any pixel differences it discovers. Images do not have to be the same size, though it is best that all the images are coalesced (images are all the same size, on a flattened canvas, so as to represent exactly how a specific frame should look).</td>
- </tr>
-
- <tr>
-
- <td><composite></td>
- <td>image="image-handle", compose="Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyOpacity, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor ", mask="image-handle", geometry="geometry", x="integer", y="integer", gravity="NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast", opacity="integer", tile="True, False", rotate="double", color="color name", blend="geometry", interpolate="undefined, average, bicubic, bilinear, filter, integer, mesh, nearest-neighbor, spline"</td>
-
- <td>composite one image onto another. Use the rotate parameter in concert with the tile parameter.</td>
- </tr>
-
- <tr>
- <td><contrast></td>
- <td>sharpen="True, False"</td>
- <td>enhance or reduce the image contrast</td>
-
- </tr>
-
- <tr>
- <td><strike>contraststretch</strike></td>
- <td>levels="string", 'black-point'="double", 'white-point'="double", channel="Red, RGB, All, etc."</td>
-
- <td>improve the contrast in an image by `stretching' the range of intensity values</td>
- </tr>
-
- <tr>
- <td><strike>convolve</strike></td>
- <td>coefficients="array of float values", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", bias="double"</td>
-
- <td>apply a convolution kernel to the image. Given a kernel "order" , you would supply "order*order" float values (e.g. 3x3 implies 9 values).</td>
- </tr>
-
- <tr>
- <td><crop></td>
-
- <td>geometry="geometry", width="integer", height="integer", x="integer", y="integer", fuzz="double", gravity="NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast"</td>
- <td>crop an image</td>
-
- </tr>
-
- <tr>
- <td><strike>cyclecolormap</strike></td>
- <td>amount="integer"</td>
- <td>displace image colormap by amount</td>
- </tr>
-
- <tr>
- <td><strike>decipher</strike></td>
- <td>passphrase="string"</td>
- <td>convert cipher pixels to plain pixels</td>
- </tr>
-
- <tr>
-
- <td><strike>deconstruct</strike></td>
- <td> </td>
- <td>break down an image sequence into constituent parts</td>
- </tr>
-
- <tr>
- <td><strike>deskew</strike></td>
- <td>geometry="string",threshold="double"</td>
-
- <td>straighten the image</td>
- </tr>
-
- <tr>
- <td><despeckle></td>
- <td> </td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><strike>difference</strike></td>
- <td>image="image-handle"</td>
- <td>compute the difference metrics between two images </td>
- </tr>
-
- <tr>
-
- <td><strike>distort</strike></td>
- <td>points="array of float values", method="Affine, AffineProjection, Bilinear, Perspective, Resize, ScaleRotateTranslate", virtual-pixel="Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White", best-fit="True, False"</td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><draw></td>
- <td>primitive="point, line, rectangle, arc, ellipse, circle, path, polyline, polygon, bezier, color, matte, text, @"filename"", points="string" , method=""Point, Replace, Floodfill, FillToBorder, Reset"", stroke="color name", fill="color name", font="string", pointsize="integer", strokewidth="float", antialias="true, false", bordercolor="color name", x="float", y="float", dash-offset="float", dash-pattern="array of float values", affine="array of float values", translate="float, float", scale="float, float", rotate="float", skewX="float", skewY="float", interpolate="undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline", kerning="float", text="string", vector-graphics="string", interline-spacing="double", interword-spacing="double", direction="right-to-left, left-to-right"</td>
-
- <td>annotate an image with one or more graphic primitives.</td>
- </tr>
-
- <tr>
- <td><strike>encipher</strike></td>
- <td>passphrase="string"</td>
- <td>convert plain pixels to cipher pixels</td>
-
- </tr>
-
- <tr>
- <td><edge></td>
- <td>radius="double"</td>
- <td>enhance edges within the image with a convolution filter of the given radius.</td>
- </tr>
-
- <tr>
- <td><emboss></td>
- <td>geometry="geometry", radius="double", sigma="double"</td>
- <td>emboss the image with a convolution filter of the given radius and standard deviation (sigma).</td>
-
- </tr>
-
- <tr>
- <td><enhance></td>
- <td> </td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
-
- <td><equalize></td>
- <td>channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow" </td>
- <td>perform histogram equalization to the image</td>
- </tr>
-
- <tr>
- <td><strike>extent</strike></td>
-
- <td>geometry="geometry", width="integer", height="integer", x="integer", y="integer", fuzz="double", background="color name", gravity="NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast"</td>
-
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td><strike>evaluate</strike></td>
- <td>value="double", operator=""Add, And, Divide, LeftShift, Max, Min, Multiply, Or, Rightshift, Subtract, Xor"", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow" </td>
-
- <td>apply an arithmetic, relational, or logical expression to the image</td>
- </tr>
-
- <tr>
- <td><strike>filter</strike></td>
- <td>kernel="string", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", bias="double"</td>
-
- <td>apply a convolution kernel to the image.</td>
- </tr>
-
- <tr>
- <td><flip></td>
- <td> </td>
- <td>reflect the image scanlines in the vertical direction</td>
- </tr>
-
- <tr>
- <td><flop></td>
- <td> </td>
- <td>reflect the image scanlines in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><strike>floodfillpaint</strike></td>
-
- <td>geometry="geometry", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", x="integer", y="integer" , fill="color name", bordercolor="color name", fuzz="double", invert="True, False"</td>
-
- <td>changes the color value of any pixel that matches the color of the target pixel and is a neighbor. If you specify a border color, the color value is changed for any neighbor pixel that is not that color.</td>
- </tr>
-
- <tr>
- <td><strike>forwardfouriertransform</strike></td>
- <td>magnitude="True, False"</td>
- <td>implements the forward discrete Fourier transform (DFT)</td>
-
- </tr>
-
- <tr>
- <td><frame></td>
- <td>geometry="geometry", width="integer", height="integer", inner="integer", outer="integer", fill="color name", compose="Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyOpacity, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor ",</td>
-
- <td>surround the image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><strike>function</strike></td>
- <td>parameters="array of float values", function="Sin", virtual-pixel="Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White"</td>
-
- <td>apply a function to the image</td>
- </tr>
-
- <tr>
- <td><gamma></td>
- <td>gamma="string", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>gamma correct the image</td>
- </tr>
-
- <tr>
- <td><strike>gaussianblur</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td><strike>getpixel</strike></td>
- <td>geometry="geometry", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", normalize="true, false", x="integer", y="integer"</td>
-
- <td>get a single pixel. By default normalized pixel values are returned.</td>
- </tr>
-
- <tr>
- <td><strike>getpixels</strike></td>
- <td>geometry="geometry", width="integer", height="integer", x="integer", y="integer", map="string", normalize="true, false"</td>
-
- <td>get image pixels as defined by the map (e.g. "RGB", "RGBA", etc.). By default non-normalized pixel values are returned.</td>
- </tr>
-
- <tr>
- <td><strike>grayscale</strike></td>
- <td>channel="Average, Brightness, Lightness, Rec601Luma, Rec601Luminance, Rec709Luma, Rec709Luminance, RMS"</td>
- <td>convert image to grayscale</td>
-
- </tr>
-
- <tr>
- <td><strike>haldclut</strike></td>
- <td>image="image-handle", channel="Red, RGB, All, etc."</td>
- <td>apply a Hald color lookup table to an image sequence</td>
-
- </tr>
-
- <tr>
- <td><strike>identify</strike></td>
- <td>file="file", features="distance", unique="True, False"</td>
- <td>identify the attributes of an image</td>
-
- </tr>
-
- <tr>
- <td><implode></td>
- <td>amount="double", interpolate="undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline"</td>
- <td>implode image pixels about the center</td>
-
- </tr>
-
- <tr>
- <td><strike>inversediscretefouriertransform</strike></td>
- <td>magnitude="True, False"</td>
- <td>implements the inverse discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><label></td>
- <td>string</td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
-
- <td><strike>layers</strike></td>
- <td>method="coalesce, compare-any, compare-clear, compare-over, composite, dispose, flatten, merge, mosaic, optimize, optimize-image, optimize-plus, optimize-trans, remove-dups, remove-zero", compose="Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyOpacity, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, LinearLight, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor ", dither="true, false"</td>
- <td>compare each image the GIF disposed forms of the previous image in the sequence. From this, attempt to select the smallest cropped image to replace each frame, while preserving the results of the animation.</td>
- </tr>
-
- <tr>
-
- <td><level></td>
- <td>levels="string", 'black-point'="double", 'gamma'="double", 'white-point'="double", channel="Red, RGB, All, etc."</td>
- <td>adjust the level of image contrast</td>
-
- </tr>
-
- <tr>
- <td><strike>levelcolors</strike></td>
- <td>invert=>"True, False", 'black-point'="string", 'white-point'="string", channel="Red, RGB, All, etc."</td>
-
- <td>level image with the given colors</td>
- </tr>
-
- <tr>
- <td><strike>linearstretch</strike></td>
- <td>levels="string", 'black-point'="double", 'white-point'="double"</td>
-
- <td>linear with saturation stretch</td>
- </tr>
-
- <tr>
- <td><strike>liquidresize</strike></td>
- <td>geometry="geometry", width="integer", height="integer", delta-x="double", rigidity="double"</td>
-
- <td>rescale image with seam-carving.</td>
- </tr>
-
- <tr>
- <td><magnify></td>
- <td> </td>
- <td>double the size of the image with pixel art scaling</td>
- </tr>
-
- <tr>
- <td><strike>mask</strike></td>
- <td>mask="image-handle"</td>
- <td>composite image pixels as defined by the mask</td>
- </tr>
-
- <tr>
-
- <td><strike>mattefloodfill</strike></td>
- <td>geometry="geometry", x="integer", y="integer" , matte="integer", bordercolor="color name", fuzz="double", invert="True, False"</td>
-
- <td>changes the matte value of any pixel that matches the color of the target pixel and is a neighbor. If you specify a border color, the matte value is changed for any neighbor pixel that is not that color.</td>
- </tr>
-
- <tr>
- <td><strike>medianfilter</strike></td>
- <td>geometry="geometry", width="integer", height="integer", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>replace each pixel with the median intensity pixel of a neighborhood.</td>
- </tr>
-
- <tr>
- <td><minify></td>
- <td> </td>
- <td>half the size of an image</td>
- </tr>
-
- <tr>
- <td><strike>mode</strike></td>
- <td>geometry="geometry", width="integer", height="integer", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>make each pixel the "predominant color" of the neighborhood.</td>
-
- </tr>
-
- <tr>
- <td><modulate></td>
- <td>factor="geometry", brightness="double", saturation="double", hue="double", lightness="double", whiteness="double", blackness="double" </td>
-
- <td>vary the brightness, saturation, and hue of an image by the specified percentage</td>
- </tr>
-
- <tr>
- <td><strike>morphology</strike></td>
- <td>kernel="string", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", iterations="integer"</td>
-
- <td>apply a morphology method to the image.</td>
- </tr>
-
- <tr>
- <td><strike>motionblur</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", angle="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma) at the given angle to simulate the effect of motion</td>
- </tr>
-
- <tr>
- <td><negate></td>
- <td>gray="True, False", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>replace each pixel with its complementary color (white becomes black, yellow becomes blue, etc.)</td>
-
- </tr>
-
- <tr>
- <td><normalize></td>
- <td>channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow" </td>
- <td>transform image to span the full range of color values</td>
- </tr>
-
- <tr>
- <td><strike>oilpaint</strike></td>
- <td>radius="integer"</td>
- <td>simulate an oil painting</td>
- </tr>
-
- <tr>
-
- <td><opaque></td>
- <td>color="color name",
-fill="color name", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", invert="True, False"</td>
- <td>change this color to the fill color within the image</td>
- </tr>
-
- <tr>
- <td><strike>ordereddither</strike></td>
- <td>threshold="threshold, checks, o2x2, o3x3, o4x4, o8x8, h4x4a, h6x6a, h8x8a, h4x4o, h6x6o, h8x8o, h16x16o, hlines6x4", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>order dither image</td>
- </tr>
-
- <tr>
- <td><strike>perceptible</strike></td>
- <td>epsilon="double", channel="Red, RGB, All, etc."</td>
- <td>set each pixel whose value is less than |"epsilon"| to "-epsilon" or "epsilon" (whichever is closer) otherwise the pixel value remains unchanged..</td>
-
- </tr>
-
- <tr>
- <td><strike>polaroid</strike></td>
- <td>caption="string", angle="double", pointsize="double", font="string", stroke= "color name", strokewidth="integer", fill="color name", gravity="NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast", background="color name"</td>
-
- <td>simulate a Polaroid picture.</td>
- </tr>
-
- <tr>
- <td><strike>posterize</strike></td>
- <td>levels="integer", dither="True, False"</td>
-
- <td>reduce the image to a limited number of color level</td>
- </tr>
-
- <tr>
- <td><profile></td>
- <td>name="string", profile="blob", rendering-intent="Undefined, Saturation, Perceptual, Absolute, Relative", black-point-compensation="True, False"</td>
-
- <td>add or remove ICC or IPTC image profile; name is formal name (e.g. ICC or filename; set profile to '' to remove profile</td>
- </tr>
-
- <tr>
- <td><quantize></td>
- <td>colors="integer", colorspace="RGB, Gray, Transparent, OHTA, XYZ, YCbCr, YIQ, YPbPr, YUV, CMYK, sRGB, HSL, HSB", treedepth= "integer", dither="True, False", dither-method="Riemersma, Floyd-Steinberg", measure_error="True, False", global_colormap="True, False", transparent-color="color"</td>
-
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><strike>radialblur</strike></td>
- <td>geometry="geometry", angle="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>radial blur the image.</td>
- </tr>
-
- <tr>
- <td><raise></td>
- <td>geometry="geometry", width="integer", height="integer", x="integer", y="integer", raise="True, False"</td>
-
- <td>lighten or darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><strike>reducenoise</strike></td>
- <td>geometry="geometry", width="integer", height="integer", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>reduce noise in the image with a noise peak elimination filter</td>
- </tr>
-
- <tr>
- <td><strike>remap</strike></td>
- <td>image="image-handle", dither="true, false", dither-method="Riemersma, Floyd-Steinberg"</td>
-
- <td>replace the colors of an image with the closest color from a reference image.</td>
- </tr>
-
- <tr>
- <td><resample></td>
- <td>density="geometry", x="double", y="double", filter="Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc", support="double"</td>
-
- <td>resample image to desired resolution. Specify blur > 1 for blurry or < 1 for sharp</td>
- </tr>
-
- <tr>
- <td><resize></td>
-
- <td>geometry="geometry", width="integer", height="integer", filter="Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc", support="double", blur="double"</td>
- <td>scale image to desired size. Specify blur > 1 for blurry or < 1 for sharp</td>
-
- </tr>
-
- <tr>
- <td><roll></td>
- <td>geometry="geometry", x="integer", y="integer"</td>
- <td>roll an image vertically or horizontally</td>
-
- </tr>
-
- <tr>
- <td><rotate></td>
- <td>degrees="double", background="color name"</td>
- <td>rotate an image</td>
-
- </tr>
-
- <tr>
- <td><sample></td>
- <td>geometry="geometry", width="integer", height="integer"</td>
- <td>scale image with pixel sampling.</td>
-
- </tr>
-
- <tr>
- <td><scale></td>
- <td>geometry="geometry", width="integer", height="integer"</td>
- <td>scale image to desired size</td>
-
- </tr>
-
- <tr>
- <td><segment></td>
- <td>colorspace="RGB, Gray, Transparent, OHTA, XYZ, YCbCr, YCC, YIQ, YPbPr, YUV, CMYK", verbose="True, False", cluster-threshold="double", smoothing-threshold="double"</td>
- <td>segment an image by analyzing the histograms of the color components and identifying units that are homogeneous</td>
-
- </tr>
-
- <tr>
- <td><strike>selectiveblur</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", threshold="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>selectively blur pixels within a contrast threshold.</td>
- </tr>
- <tr>
- <td><strike>separate</strike></td>
- <td>channel="Red, RGB, All, etc."</td>
- <td>separate a channel from the image into a grayscale image</td>
-
- </tr>
-
- <tr>
- <td><shade></td>
- <td>geometry="geometry", azimuth="double", elevation="double", gray="true, false"</td>
-
- <td>shade the image using a distant light source</td>
- </tr>
-
- <tr>
- <td><strike>setpixel</strike></td>
- <td>geometry="geometry", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", color="array of float values", x="integer", y="integer", color="array of float values"</td>
-
- <td>set a single pixel. By default normalized pixel values are expected.</td>
- </tr>
-
- <tr>
- <td><shadow></td>
- <td>geometry="geometry", opacity="double", sigma="double", x="integer", y="integer"</td>
-
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td><sharpen></td>
- <td>geometry="geometry", radius="double", sigma="double", bias="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>sharpen the image with a Gaussian operator of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td><shave></td>
- <td>geometry="geometry", width="integer", height="integer"</td>
-
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td><shear></td>
- <td>geometry="geometry", x="double", y="double" fill="color name"</td>
-
- <td>shear the image along the X or Y axis by a positive or negative shear angle</td>
- </tr>
-
- <tr>
- <td><strike>sigmoidalcontrast</strike></td>
- <td>geometry="string", 'contrast'="double", 'mid-point'="double" channel="Red, RGB, All, etc.", sharpen="True, False"</td>
-
- <td>sigmoidal non-linearity contrast control. Increase the contrast of the image using a sigmoidal transfer function without saturating highlights or shadows. Contrast" indicates how much to increase the contrast (0 is none; 3 is typical; 20 is a lot); mid-point" indicates where midtones fall in the resultant image (0 is white; 50% is middle-gray; 100% is black). To decrease contrast, set sharpen to False.</td>
- </tr>
-
- <tr>
- <td><signature></td>
-
- <td> </td>
- <td>generate an SHA-256 message digest for the image pixel stream</td>
- </tr>
-
- <tr>
- <td><strike>sketch</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", angle="double"</td>
-
- <td>sketch the image with a Gaussian operator of the given radius and standard deviation (sigma) at the given angle</td>
- </tr>
-
- <tr>
- <td><solarize></td>
- <td>geometry="string", threshold="double", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
-
- <td>negate all pixels above the threshold level</td>
- </tr>
-
- <tr>
- <td><strike>sparsecolor</strike></td>
- <td>points="array of float values", method="Barycentric, Bilinear, Shepards, Voronoi", virtual-pixel="Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White"</td>
-
- <td>interpolate the image colors around the supplied points</td>
- </tr>
-
- <tr>
- <td><strike>splice</strike></td>
- <td>geometry="geometry", width="integer", height="integer", x="integer", y="integer", fuzz="double", background="color name", gravity="NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast"</td>
-
- <td>splice an image</td>
- </tr>
-
- <tr>
- <td><spread></td>
- <td>radius="double", interpolate="undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline"</td>
-
- <td>displace image pixels by a random amount</td>
- </tr>
-
- <tr>
- <td><strike>statistic</strike></td>
- <td>geometry="geometry", width="integer", height="integer", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow", type="Median, Mode, Mean, Maximum, Minimum, ReduceNoise"</td>
-
- <td>replace each pixel with corresponding statistic from the neighborhood.</td>
- </tr>
- <tr>
- <td><stegano></td>
- <td>image="image-handle", offset="integer"</td>
- <td>hide a digital watermark within the image</td>
-
- </tr>
-
- <tr>
- <td><stereo></td>
- <td>image="image-handle", x="integer", y="integer"</td>
- <td>composites two images and produces a single image that is the composite of a left and right image of a stereo pair</td>
-
- </tr>
-
- <tr>
- <td><strip></td>
- <td> </td>
- <td>strip an image of all profiles and comments.</td>
- </tr>
-
- <tr>
-
- <td><swirl></td>
- <td>degrees="double", interpolate="undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline"</td>
- <td>swirl image pixels about the center</td>
- </tr>
-
- <tr>
-
- <td><strike>texture</strike></td>
- <td>texture="image-handle"</td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td><strike>thumbnail</strike></td>
-
- <td>geometry="geometry", width="integer", height="integer"</td>
- <td>changes the size of an image to the given dimensions and removes any associated profiles.</td>
- </tr>
-
- <tr>
- <td><threshold></td>
-
- <td>threshold="string", channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
- <td>threshold the image</td>
- </tr>
-
- <tr>
- <td><strike>tint</strike></td>
-
- <td>fill="color name", blend="string"</td>
- <td>tint the image with the fill color.</td>
- </tr>
-
- <tr>
- <td><transparent></td>
-
- <td>color="color name", invert="True, False"</td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td><strike>transpose</strike></td>
-
- <td> </td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td><strike>transverse</strike></td>
- <td> </td>
- <td>flop image in the horizontal direction and rotate 270 degrees</td>
-
- </tr>
-
- <tr>
- <td><trim></td>
- <td> </td>
- <td>remove edges that are the background color from the image</td>
- </tr>
-
- <tr>
-
- <td><strike>unsharpmask</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", gain="double", threshold="double"</td>
- <td>sharpen the image with the unsharp mask algorithm.</td>
-
- </tr>
-
- <tr>
- <td><strike>vignette</strike></td>
- <td>geometry="geometry", radius="double", sigma="double", x="integer", y="integer", background="color name"</td>
-
- <td>offset the edges of the image in vignette style</td>
- </tr>
-
- <tr>
- <td><strike>wave</strike></td>
- <td>geometry="geometry", amplitude="double", wavelength="double", interpolate="undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline"</td>
-
- <td>alter an image along a sine wave</td>
- </tr>
-
- <tr>
- <td><strike>whitethreshold</strike></td>
- <td>threshold="string", , channel="All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Opacity, Red, RGB, Yellow"</td>
+ </div>
- <td>force all pixels above the threshold intensity into white</td>
- </tr>
-</tbody>
-</table>
-</div>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/connected-components/index.html b/www/connected-components/index.html
index 1522e1331..0dff0d992 100644
--- a/www/connected-components/index.html
+++ b/www/connected-components/index.html
@@ -8,344 +8,571 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Connected Components Labeling</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how to use ImageMagick's connected components labeling to detect, segment, measure, and filter object regions in images.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Connected Components Labeling">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how to use ImageMagick's connected components labeling to detect, segment, measure, and filter object regions in images.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Connected Components Labeling">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Connected Components Labeling",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/connected-components/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to use ImageMagick's connected components labeling to detect, segment, measure, and filter object regions in images.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/connected-components/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/connected-components/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Connected Components Labeling</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Connected Components Labeling</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to use ImageMagick's connected components labeling to detect, segment, measure, and filter object regions in images.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Connected-component labeling (alternatively connected-component analysis, blob extraction, region labeling, blob discovery, or region extraction) uniquely labels connected components in an image. The labeling process scans the image, pixel-by-pixel from top-left to bottom-right, in order to identify connected pixel regions, i.e. regions of adjacent pixels which share the same set of intensity values. For example, let's find the objects in this image:</p>
-<ul>
- <a href="../image/objects.gif"><img src="../image/objects.gif" width="256" height="171" class="image-slices" alt="purse" /></a>
-</ul>
-<p>To identify the objects in this image, use this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick objects.gif -connected-components 4 -auto-level -depth 8 objects.png</samp></pre></pre>
-<p>The detected objects are uniquely labeled. Use auto leveling to visualize the detected objects:</p>
-<ul>
- <a href="../image/objects.png"><img src="../image/objects.png" width="256" height="171" class="image-slices" alt="Objects" /></a>
-</ul>
-<p>Object statistics is useful to review. To display them, use this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick objects.gif -define connected-components:verbose=true -connected-components 4 objects.png</samp></pre></pre>
-<p>Five objects were detected in the source image with these statistics:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Objects (id: bounding-box centroid area mean-color):
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ Connected-component labeling (also known as connected-component analysis, blob extraction, or region extraction) uniquely labels connected pixel regions in an image. Scanning pixel-by-pixel from top-left to bottom-right, it identifies adjacent pixels sharing identical or similar intensity values.
+ </p>
+ </div>
+ </div>
+
+ <!-- Detection & Statistics Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Basic Object Detection</h2>
+ <p>To demonstrate connected-component labeling, consider this initial source image:</p>
+
+ <div class="text-center my-3">
+ <a href="https://imagemagick.org/image/objects.gif">
+ <img src="https://imagemagick.org/image/objects.gif" width="256" height="171" class="img-fluid rounded shadow-sm border" alt="Source Objects" />
+ </a>
+ </div>
+
+ <p>To detect and uniquely label objects, process the image and apply auto-leveling for clear visual distinction:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick objects.gif -connected-components 4 -auto-level -depth 8 objects.png</samp></pre>
+ </div>
+ </div>
+
+ <div class="text-center my-3">
+ <a href="https://imagemagick.org/image/objects.png">
+ <img src="https://imagemagick.org/image/objects.png" width="256" height="171" class="img-fluid rounded shadow-sm border" alt="Detected Objects" />
+ </a>
+ </div>
+
+ <h3 class="h5 mt-4 mb-3">Inspecting Object Statistics</h3>
+ <p>To retrieve verbose object metadata (bounding boxes, centroids, areas, and mean colors), enable the verbose definition:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick objects.gif -define connected-components:verbose=true -connected-components 4 objects.png</samp></pre>
+ </div>
+ </div>
+
+ <p>Output details for the five detected components:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary small"><code>Objects (id: bounding-box centroid area mean-color):
0: 256x171+0+0 119.2,80.8 33117 srgb(0,0,0)
2: 120x135+104+18 159.5,106.5 8690 srgb(255,255,255)
3: 50x36+129+44 154.2,63.4 1529 srgb(0,0,0)
4: 21x23+0+45 8.8,55.9 409 srgb(255,255,255)
- 1: 4x10+252+0 253.9,4.1 31 srgb(255,255,255)
-</code></pre>
-<p>Add <code>-define connected-components:exclude-header=true</code> to show the objects without the header-line. Add <code>-define connected-components:exclude-ids=true</code>. Use <code>-define connected-components:sort=<var>area | width | height | x | y</code> to sort the verbose connected components objects. By default, the objects are listed in decreasing area. Add <code>-define connected-components:sort-order=<var>increasing | decreasing</var> to specify the sort order.</p>
-<p>Use <code>-connected-components 8</code> to visit 8 neighbors rather than 4. By default, neighbor colors must be exact to be part of a unique object. Use the <a href="../command-line-options/index.html#fuzz">-fuzz</a> option to include pixels as part of an object that are <var>close</var> in color.</p>
-<p>You might want to eliminate small objects by merging them with their larger neighbors. If so, use this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick objects.gif -define connected-components:area-threshold=410 -connected-components 4 \
+ 1: 4x10+252+0 253.9,4.1 31 srgb(255,255,255)</code></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- Filtering & Thresholding Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Filtering and Merging Objects</h2>
+ <p>
+ Small noise objects can be eliminated by merging them into adjacent larger neighbors using an area threshold:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick objects.gif -define connected-components:area-threshold=410 -connected-components 4 \
-auto-level objects.jpg</samp></pre>
-<p>Here are the expected results. Notice, how the small objects are now merged with the background.</p>
-<ul>
- <a href="../image/objects.jpg"><img src="../image/objects.jpg" width="256" height="171" class="image-slices" alt="Objects" /></a>
-</ul>
-<p>Notice how two of the objects were merged leaving three remaining objects:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Objects (id: bounding-box centroid area mean-color):
+ </div>
+ </div>
+
+ <div class="text-center my-3">
+ <a href="https://imagemagick.org/image/objects.jpg">
+ <img src="https://imagemagick.org/image/objects.jpg" width="256" height="171" class="img-fluid rounded shadow-sm border" alt="Filtered Objects" />
+ </a>
+ </div>
+
+ <p class="small text-muted mb-3">
+ Notice how two small regions were merged into the background, leaving three primary objects:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary small"><code>Objects (id: bounding-box centroid area mean-color):
0: 256x171+0+0 118.0,80.4 33557 srgb(0,0,0)
2: 120x135+104+18 159.5,106.5 8690 srgb(255,255,255)
3: 50x36+129+44 154.2,63.4 1529 srgb(0,0,0)</code></pre>
-<p>By default, the labeled image is grayscale. You can instead replace the object color in the labeled image with the mean-color from the source image. Simply add this setting, <code>-define connected-components:mean-color=true</code>, to your command line.</p>
-<p>Thresholds can optionally include ranges, e.g. <code>-define connected-components:area-threshold=410-1600</code>. To keep the background object, identify it with <code>-define connected-components:background-id=<var>object-id</var></code>. The default background object is the object with the largest area.</p>
-<p>In addition to area, there is support for these thresholding metrics:</p>
-<ul>
-<li>connected-components:angle-threshold (from equivalent ellipse)</li>
-<li>connected-components:circularity-threshold (4*pi*area/perimeter^2)</li>
-<li>connected-components:diameter-threshold (sqrt(4*area/pi))</li>
-<li>connected-components:eccentricity-threshold (from equivalent ellipse)</li>
-<li>connected-components:major-axis-threshold (diameter from equivalent ellipse)</li>
-<li>connected-components:minor-axis-threshold (diameter from equivalent ellipse)</li>
-<li>connected-components:perimeter-threshold</li>
-</ul>
-<p>You may want to remove certain objects. Use <code>-define connected-components:remove-ids=<em>list-of-ids</em></code> (e.g. -define connected-components:remove-ids=2,4-5). Or use <code>-define connected-components:keep-ids=<em>list-of-ids</em></code> to keep these objects and merge all others. For convenience, you can keep the top objects, in addition to the background object, with this option: <code>-define connected-components:keep-top=<em>number-of-objects</em></code>. Rather than object ids, you can instead remove or keep objects identified by there color, e.g. <code>-define connected-components:keep-colors=<em>red;green;blue</em></code>.</p>
-<p>Objects in your image may look homogeneous but have slightly different color values. By default, only pixels that match exactly are considered as part of a particular object. For slight variations of color in an object, use <code>-fuzz</code>. For example,</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick star-map.png -fuzz 5% -define connected-components:verbose=true \
+ </div>
+ </div>
+
+ <h3 class="h5 mt-4 mb-3">Available Threshold Metrics</h3>
+ <p>In addition to area, ImageMagick supports several geometry metrics for filtering:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <ul class="mb-0 small font-monospace">
+ <li>connected-components:angle-threshold <span class="text-muted font-sans-serif">(from equivalent ellipse)</span></li>
+ <li>connected-components:circularity-threshold <span class="text-muted font-sans-serif">(4 * π * area / perimeter<sup>2</sup>)</span></li>
+ <li>connected-components:diameter-threshold <span class="text-muted font-sans-serif">(√(4 * area / π))</span></li>
+ <li>connected-components:eccentricity-threshold <span class="text-muted font-sans-serif">(from equivalent ellipse)</span></li>
+ <li>connected-components:major-axis-threshold <span class="text-muted font-sans-serif">(diameter from equivalent ellipse)</span></li>
+ <li>connected-components:minor-axis-threshold <span class="text-muted font-sans-serif">(diameter from equivalent ellipse)</span></li>
+ <li>connected-components:perimeter-threshold</li>
+ </ul>
+ </div>
+ </div>
+ </section>
+
+ <!-- Control Definitions & Settings Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Advanced Command Definitions</h2>
+ <div class="row g-4">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Sorting and Formatting</h3>
+ <ul class="small text-muted mb-0">
+ <li><code>exclude-header=true</code> – Omits the header row from verbose output.</li>
+ <li><code>exclude-ids=true</code> – Suppresses ID numbers in output.</li>
+ <li><code>sort=area|width|height|x|y</code> – Defines sorting field (defaults to area).</li>
+ <li><code>sort-order=increasing|decreasing</code> – Sets sort direction.</li>
+ <li><code>mean-color=true</code> – Colors labeled objects using source mean colors instead of grayscale IDs.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Object Inclusion & Exclusion</h3>
+ <ul class="small text-muted mb-0">
+ <li><code>remove-ids=list</code> – Explicitly removes specific component IDs (e.g., <code>2,4-5</code>).</li>
+ <li><code>keep-ids=list</code> – Keeps specified IDs and merges all others.</li>
+ <li><code>keep-top=number</code> – Retains top N largest components along with background.</li>
+ <li><code>keep-colors=r;g;b</code> – Retains or removes components matching specific colors.</li>
+ <li><code>background-id=id</code> – Overrides default largest-area background assignment.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- Color Fuzz & Algorithm Details -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Connectivity, Color Fuzz, and Rotation</h2>
+ <p>
+ Use <code>-connected-components 8</code> to visit 8-connected neighbors rather than 4-connected neighbors. For real-world images with minor color variations within regions, use <a href="../command-line-options/index.html#fuzz">-fuzz</a> to group near-matching pixels:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-4">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick star-map.png -fuzz 5% -define connected-components:verbose=true \
-define connected-components:mean-color=true -connected-components 4 stars.gif</samp></pre>
-<h4>Connected Components</h4>
-<p>The algorithm walks through the pixels of a component, in the usual row-column order, looking for a component above or to the left. For the component at top-left, there are no components above or to the left to merge into. As a result, there are special cases where you need to rotate, repeat the connected components, then rotate back. For example</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick \
- objects.gif \
+ </div>
+ </div>
+
+ <h3 class="h5 mt-4 mb-3">Handling Scan Edge Cases</h3>
+ <p>
+ Because the component algorithm scans row-by-row looking above and to the left, top-left components lack preceding neighbors to merge into. For complex edge-boundary cases, rotate the image, re-run labeling, and rotate back:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick \
+ objects.gif \
-define connected-components:verbose=true \
-define connected-components:area-threshold=6000 \
-virtual-pixel None \
-connected-components 4 -rotate 180 \
-connected-components 4 -rotate -180 \
- objects.png
-</samp></pre>
-
+ objects.png</samp></pre>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/content-provenance-authenticity/index.html b/www/content-provenance-authenticity/index.html
index 30d1555a8..7c7992df8 100644
--- a/www/content-provenance-authenticity/index.html
+++ b/www/content-provenance-authenticity/index.html
@@ -11,289 +11,424 @@
<meta name="description" content="Content Provenance and Authenticity (C2PA) is an open standard that provides a framework for embedding secure, tamper-evident metadata into digital media to prove its origin, authenticity, and any edits made">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Content Provenance and Authenticity">
<meta property="og:description" content="Content Provenance and Authenticity (C2PA) is an open standard that provides a framework for embedding secure, tamper-evident metadata into digital media to prove its origin, authenticity, and any edits made">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Content Provenance and Authenticity">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Content Provenance and Authenticity",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/content-provenance-authenticity/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Content Provenance and Authenticity (C2PA) is an open standard that provides a framework for embedding secure, tamper-evident metadata into digital media to prove its origin, authenticity, and any edits made",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/content-provenance-authenticity/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/content-provenance-authenticity/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Content Provenance and Authenticity</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Content Provenance and Authenticity</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Content Provenance and Authenticity (C2PA) is an open standard that provides a framework for embedding secure, tamper-evident metadata into digital media to prove its origin, authenticity, and any edits made</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">ImageMagick integrates the <strong>C2PA coder</strong> to verify content provenance. This enables trusted workflows for digital assets.</p>
-<h2 class="mt-5">Decoding Example</h2>
-<p>
-To inspect and verify the embedded C2PA data, run:
-</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>magick identify c2pa:signed_image.png</samp></pre>
-
-<h2 class="mt-5">Conclusion</h2>
-<p> The C2PA coder extends ImageMagick’s capabilities by allowing developers to decode provenance metadata alongside standard image processing tasks.
-</p>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="c2pa-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#decoding" class="text-decoration-none text-primary"><i class="bi bi-terminal me-1"></i> Decoding Example</a>
+ <span class="text-muted">•</span>
+ <a href="#conclusion" class="text-decoration-none text-primary"><i class="bi bi-check-circle me-1"></i> Conclusion</a>
+ </div>
+ </div>
+ <!-- Introductory Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-0">
+ ImageMagick integrates the <strong>C2PA coder</strong> to verify content provenance. This enables trusted workflows for digital assets.
+ </p>
+ </div>
+ <!-- Decoding Example Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="decoding">
+ <a class="anchor text-decoration-none text-body" href="#decoding">Decoding Example</a>
+ </h2>
+ <p class="mb-3">To inspect and verify the embedded C2PA data, run:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick identify c2pa:signed_image.png</code></pre>
+ <!-- Conclusion Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="conclusion">
+ <a class="anchor text-decoration-none text-body" href="#conclusion">Conclusion</a>
+ </h2>
+ <p class="text-body-secondary mb-4">
+ The C2PA coder extends ImageMagick’s capabilities by allowing developers to decode provenance metadata alongside standard image processing tasks.
+ </p>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/convert/index.html b/www/convert/index.html
index c5d646cbd..5b10050e0 100644
--- a/www/convert/index.html
+++ b/www/convert/index.html
@@ -1,1585 +1,89 @@
-
-
<!DOCTYPE html>
-<html lang="en" data-bs-theme="auto">
-
-
-<head>
- <meta charset="utf-8">
- <meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <title>ImageMagick | Command-line Tools: Convert</title>
- <meta name="description" content="Convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.">
- <link rel="canonical" href="index.html">
- <meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
- <link rel="shortcut icon" href="../image/wand.png" type="image/png">
- <link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
- <style>
- html {
- scroll-padding-top: 70px;
- }
-
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
- }
-
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
- }
-
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
- }
-
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
- }
-
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
- }
-
- :root {
- --bs-code-color: revert;
- }
-
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
- }
-
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
- }
- </style>
- <!-- Open Graph Meta Tags -->
- <meta property="og:title" content="ImageMagick | Command-line Tools: Convert">
- <meta property="og:description" content="Convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more.">
- <meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
- <meta property="og:url" content="index.html">
- <meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Convert">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
- <!-- JSON-LD Structured Data -->
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Convert",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
+<html>
+ <head>
+ <meta http-equiv="Content-type" content="text/html; charset=utf-8">
+ <meta http-equiv="Content-Security-Policy" content="default-src 'none'; style-src 'unsafe-inline'; img-src data:; connect-src 'self'">
+ <title>Page not found · GitHub Pages</title>
+ <style type="text/css" media="screen">
+ body {
+ background-color: #f1f1f1;
+ margin: 0;
+ font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
- </script>
- <!-- Google Custom Search -->
- <script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
-</head>
-
-<body>
- <script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
- </script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
- <li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
- </li>
- <li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
- </li>
- <li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
- </li>
- <li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
- </li>
- </ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/convert/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </nav>
-
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Convert</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Use the <code>magick</code> program to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>magick</code> command or see below for example usages of the command.</p>
-
-<p>We list a few examples of the <code>magick</code> command here to illustrate its usefulness and ease of use. To get started, lets convert an image in the JPEG format to PNG:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg rose.png</samp></pre>
-
-<p>Next, we reduce the image size before it is written to the PNG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg -resize 50% rose.png</samp></pre>
-
-<ul>
- <a href="../image/rose.jpg">
- <img src="../image/rose.jpg" width="70" height="46" alt="rose" />
- </a>
- <img style="margin-top:13px; margin-bottom:13px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/rose.png">
- <img style="margin-top:11px; margin-bottom:12px;" src="../image/rose.png" width="35" height="23" alt="rose" />
- </a>
-</ul>
-
-<p>You can combine multiple image-processing operations to produce complex results:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 320x85 canvas:none -font Bookman-DemiItalic -pointsize 72 \
- -draw "text 25,60 \'Magick\'" -channel RGBA -blur 0x6 -fill darkred -stroke magenta \
- -draw "text 20,55 \'Magick\'" fuzzy-magick.png</code></pre>
-
-<ul>
- <a href="../image/fuzzy-magick.png"><img src="../image/fuzzy-magick.png" width="320" height="85" alt="fuzzy-magick" /></a>
-</ul>
-
-<p>or here we resize an image with improved quality:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick input.png -colorspace RGB +sigmoidal-contrast 11.6933 \
- -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 \
- -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png');</code></pre>
-
-<p>You can find additional examples of using <samp>$ magick</samp> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>magick</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
- <td>adaptively blur pixels; decrease effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-resize">-adaptive-resize <var>geometry</var></a></td>
- <td>adaptively resize image with data dependent triangulation.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-sharpen">-adaptive-sharpen <var>geometry</var></a></td>
- <td>adaptively sharpen pixels; increase effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#affine">-affine <var>matrix</var></a></td>
- <td>affine transform matrix</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#annotate">-annotate <var>geometry text</var></a></td>
- <td>annotate the image with text</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#append">-append</a></td>
- <td>append an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decipher image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-gamma">-auto-gamma</a></td>
- <td>automagically adjust gamma level of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-level">-auto-level</a></td>
- <td>automagically adjust color levels of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-threshold">-auto-threshold <var>method</var></a></td>
- <td>automatically perform image thresholding</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bench">-bench <var>iterations</var></a></td>
- <td>measure performance</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bias">-bias <var>value</var></a></td>
- <td>add bias when convolving an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bilateral-blur">-bilateral-blur <var>geometry</var></a></td>
- <td>non-linear, edge-preserving, and noise-reducing smoothing filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#black-threshold">-black-threshold <var>value</var></a></td>
- <td>force all pixels below the threshold into black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-primary">-blue-primary <var>point</var></a></td>
- <td>chromaticity blue primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-shift">-blue-shift <var>factor</var></a></td>
- <td>simulate a scene at nighttime in the moonlight</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blur">-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#brightness-contrast">-brightness-contrast <var>geometry</var></a></td>
- <td>improve brightness / contrast of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#canny">-canny <var>geometry</var></a></td>
- <td>use a multi-stage algorithm to detect a wide range of edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#caption">-caption <var>string</var></a></td>
- <td>assign a caption to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cdl">-cdl <var>filename</var></a></td>
- <td>color correct with a color decision list</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#charcoal">-charcoal <var>radius</var></a></td>
- <td>simulate a charcoal drawing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#chop">-chop <var>geometry</var></a></td>
- <td>remove pixels from the image interior</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clahe">-clahe <var>geometry</var></a></td>
- <td>contrast limited adaptive histogram equalization</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clamp">-clamp</a></td>
- <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-mask">-clip-mask</a> <var>filename</var></td>
- <td>associate clip mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clone">-clone <var>index</var></a></td>
- <td>clone an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clut">-clut</a></td>
- <td>apply a color lookup table to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#connected-components">-connected-components <var>connectivity</var></a></td>
- <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast-stretch">-contrast-stretch <var>geometry</var></a></td>
- <td>improve the contrast in an image by `stretching' the range of intensity value</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorize">-colorize <var>value</var></a></td>
- <td>colorize the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#color-matrix">-color-matrix <var>matrix</var></a></td>
- <td>apply color correction to the image.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#color-threshold">-color-threshold <var>start-color</var>-<var>stop-color</var></a></td>
- <td>force all pixels in the color range to white otherwise black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#combine">-combine</a></td>
- <td>combine a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compare">-compare</a></td>
- <td>compare image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#complex">-complex<var>operator</var></a></td>
- <td>perform complex mathematics on an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#composite">-composite</a></td>
- <td>composite image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#convolve">-convolve <var>coefficients</var></a></td>
- <td>apply a convolution kernel to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#copy">-copy <var>geometry</var> <var>offset</var></a></td>
- <td>copy pixels from one area of an image to another</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>crop the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cycle">-cycle <var>amount</var></a></td>
- <td>cycle the image colormap</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#deconstruct">-deconstruct</a></td>
- <td>break down an image sequence into constituent parts</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>display the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delete">-delete <var>index</var></a></td>
- <td>delete the image from the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-despeckle</a></td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#direction">-direction <var>type</var></a></td>
- <td>render text right-to-left or left-to-right</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distribute-cache">-distribute-cache <var>port</var></a></td>
- <td>launch a distributed pixel cache server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distort">-distort <var>type coefficients</var></a></td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#draw">-draw <var>string</var></a></td>
- <td>annotate the image with a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#duplicate">-duplicate <var>count,indexes</var></a></td>
- <td>duplicate an image one or more times</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#edge">-edge <var>radius</var></a></td>
- <td>apply a filter to detect edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#emboss">-emboss <var>radius</var></a></td>
- <td>emboss an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encoding">-encoding <var>type</var></a></td>
- <td>text encoding type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#enhance">-enhance</a></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#equalize">-equalize</a></td>
- <td>perform histogram equalization to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate">-evaluate <var>operator value</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate-sequence">-evaluate-sequence <var>operator</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression for an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extent">-extent <var>geometry</var></a></td>
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#family">-family <var>name</var></a></td>
- <td>render text with this font family</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#features">-features <var>distance</var></a></td>
- <td>analyze image features (e.g. contract, correlations, etc.).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fft">-fft</a></td>
- <td>implements the discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fill">-fill <var>color</var></a></td>
- <td>color to use when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#floodfill">-floodfill <var>geometry color</var></a></td>
- <td>floodfill the image with color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#font">-font <var>name</var></a></td>
- <td>render text with this font</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#format_identify_">-format <var>string</var></a></td>
- <td>output formatted image characteristics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#function">-function <var>name</var></a></td>
- <td>apply a function to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fuzz">-fuzz <var>distance</var></a></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fx">-fx <var>expression</var></a></td>
- <td>apply mathematical expression to an image channel(s)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gaussian-blur">-gaussian-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#grayscale">-grayscale <var>method</var></a></td>
- <td>convert image to grayscale</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#green-primary">-green-primary <var>point</var></a></td>
- <td>chromaticity green primary point</td>
- </tr>
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
+ .container { margin: 50px auto 40px auto; width: 600px; text-align: center; }
- <tr>
- <td><a href="../command-line-options/index.html#hough-lines">-hough-lines <var>geometry</var></a></td>
- <td>identify lines in the image</td>
- </tr>
+ a { color: #4183c4; text-decoration: none; }
+ a:hover { text-decoration: underline; }
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
+ h1 { width: 800px; position:relative; left: -100px; letter-spacing: -1px; line-height: 60px; font-size: 60px; font-weight: 100; margin: 0px 0 50px 0; text-shadow: 0 1px 0 #fff; }
+ p { color: rgba(0, 0, 0, 0.5); margin: 20px 0; line-height: 1.6; }
- <tr>
- <td><a href="../command-line-options/index.html#ift">-ift</a></td>
- <td>implements the inverse discrete Fourier transform (DFT)</td>
- </tr>
+ ul { list-style: none; margin: 25px 0; padding: 0; }
+ li { display: table-cell; font-weight: bold; width: 1%; }
- <tr>
- <td><a href="../command-line-options/index.html#illuminant">-illuminant <var>type</var></a></td>
- <td>reference illuminant</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#implode">-implode <var>amount</var></a></td>
- <td>implode image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#insert">-insert <var>index</var></a></td>
- <td>insert last image into the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#integral">-integral</a></td>
- <td>Calculate the sum of values (pixel values) in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intensity">-intensity <var>method</var></a></td>
- <td>method to generate an intensity value from a pixel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intent">-intent <var>type</var></a></td>
- <td>type of rendering intent when managing the image color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interline-spacing">-interline-spacing <var>value</var></a></td>
- <td>the space between two text lines</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interword-spacing">-interword-spacing <var>value</var></a></td>
- <td>the space between two words</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kerning">-kerning <var>value</var></a></td>
- <td>the space between two characters</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-kmeans <var>geometry</var></a></td>
- <td>K means color reduction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kuwahara">-kuwahara <var>geometry</var></a></td>
- <td>edge preserving noise reduction filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>string</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#lat">-lat <var>geometry</var></a></td>
- <td>local adaptive thresholding</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#layers">-layers <var>method</var></a></td>
- <td>optimize or compare image layers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#level">-level <var>value</var></a></td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#linear-stretch">-linear-stretch <var>geometry</var></a></td>
- <td>linear with saturation histogram stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#liquid-rescale">-liquid-rescale <var>geometry</var></a></td>
- <td>rescale image with seam-carving</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#list">-list <var>type</var></a></td>
- <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#loop">-loop <var>iterations</var></a></td>
- <td>add Netscape loop extension to your GIF animation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#median">-median <var>radius</var></a></td>
- <td>apply a median filter to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mean-shift">-mean-shift <var>geometry</var></a></td>
- <td>delineate arbitrarily shaped clusters in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#metric">-metric <var>type</var></a></td>
- <td>measure differences between images with this metric</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mode">-mode <var>radius</var></a></td>
- <td>make each pixel the 'predominant color' of the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#modulate">-modulate <var>value</var></a></td>
- <td>vary the brightness, saturation, and hue</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#moments">-moments</a></td>
- <td>display image moments.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morph">-morph <var>value</var></a></td>
- <td>morph an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morphology">-morphology <var>method</var></a> <var>kernel</var></td>
- <td>apply a morphology method to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#motion-blur">-motion-blur <var>geometry</var></a></td>
- <td>simulate motion blur</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#noise">-noise <var>radius</var></a></td>
- <td>add or reduce noise in an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#normalize">-normalize</a></td>
- <td>transform image to span the full range of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#opaque">-opaque <var>color</var></a></td>
- <td>change this color to the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ordered-dither">-ordered-dither <var>NxN</var></a></td>
- <td>ordered dither the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#orient">-orient <var>type</var></a></td>
- <td>image orientation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#paint">-paint <var>radius</var></a></td>
- <td>simulate an oil painting</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#perceptible">-perceptible</a></td>
- <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ping">-ping</a></td>
- <td>efficiently determine image attributes</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pointsize">-pointsize <var>value</var></a></td>
- <td>font point size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#polaroid">-polaroid <var>angle</var></a></td>
- <td>simulate a Polaroid picture</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#poly">-poly <var>terms</var></a></td>
- <td>build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#posterize">-posterize <var>levels</var></a></td>
- <td>reduce the image to a limited number of color levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#precision">-precision <var>value</var></a></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#preview">-preview <var>type</var></a></td>
- <td>image preview type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#print">-print <var>string</var></a></td>
- <td>interpret string and print to console</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#process">-process <var>image-filter</var></a></td>
- <td>process the image with a custom image filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotational-blur">-rotational-blur <var>angle</var></a></td>
- <td>radial blur the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#raise">-raise <var>value</var></a></td>
- <td>lighten/darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#random-threshold">-random-threshold <var>low, high</var></a></td>
- <td>random threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#range-threshold">-range-threshold <var>low-black, low-white, high-white, high-black</var></a></td>
- <td>perform either hard or soft thresholding within some range of values in an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#read-mask">-read-mask <var>filename</var></a></td>
- <td>associate a read mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#red-primary">-red-primary <var>point</var></a></td>
- <td>chromaticity red primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#region">-region <var>geometry</var></a></td>
- <td>apply options to a portion of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#remap">-remap <var>filename</var></a></td>
- <td>transform image colors to match this set of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#render">-render</a></td>
- <td>render vector graphics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resample">-resample <var>geometry</var></a></td>
- <td>change the resolution of an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#reshape">-reshape <var>geometry</var></a></td>
- <td>reshape the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#roll">-roll <var>geometry</var></a></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sample">-sample <var>geometry</var></a></td>
- <td>scale image with pixel sampling</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scale">-scale <var>geometry</var></a></td>
- <td>scale the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#segment">-segment <var>values</var></a></td>
- <td>segment an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-selective-blur <var>geometry</var></a></td>
- <td>selectively blur pixels within a contrast threshold</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#separate">-separate</a></td>
- <td>separate an image channel into a grayscale image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sepia-tone">-sepia-tone <var>threshold</var></a></td>
- <td>simulate a sepia-toned photo</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shade">-shade <var>degrees</var></a></td>
- <td>shade the image using a distant light source</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shadow">-shadow <var>geometry</var></a></td>
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shave">-shave <var>geometry</var></a></td>
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shear">-shear <var>geometry</var></a></td>
- <td>slide one edge of the image along the X or Y axis</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sigmoidal">-sigmoidal-contrast <var>geometry</var></a></td>
- <td>increase the contrast without saturating highlights or shadows</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#smush">-smush <var>offset</var></a></td>
- <td>smush an image sequence together</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sketch">-sketch <var>geometry</var></a></td>
- <td>simulate a pencil sketch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#solarize">-solarize <var>threshold</var></a></td>
- <td>negate all pixels above the threshold level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sort-pixels">-sort-pixels</a></td>
- <td>sorts pixels within each scanline in ascending order of intensity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#splice">-splice <var>geometry</var></a></td>
- <td>splice the background color into the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#spread">-spread <var>radius</var></a></td>
- <td>displace image pixels by a random amount</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#statistic">-statistic <var>type</var> <var>geometry</var></a></td>
- <td>replace each pixel with corresponding statistic from the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stroke">-stroke <var>color</var></a></td>
- <td>graphic primitive stroke color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strokewidth">-strokewidth <var>value</var></a></td>
- <td>graphic primitive stroke width</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stretch">-stretch <var>type</var></a></td>
- <td>render text with this font stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#style">-style <var>type</var></a></td>
- <td>render text with this font style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swap">-swap <var>indexes</var></a></td>
- <td>swap two images in the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swirl">-swirl <var>degrees</var></a></td>
- <td>swirl image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#texture">-texture <var>filename</var></a></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-threshold <var>value</var></a></td>
- <td>threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile">-tile <var>filename</var></a></td>
- <td>tile image when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile-offset">-tile-offset <var>geometry</var></a></td>
- <td>set the image tile offset</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tint">-tint <var>value</var></a></td>
- <td>tint the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transform">-transform</a></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent">-transparent <var>color</var></a></td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transpose">-transpose</a></td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transverse">-transverse</a></td>
- <td>flop image in the horizontal direction and rotate 270 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#treedepth">-treedepth <var>value</var></a></td>
- <td>color tree depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#type">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#undercolor">-undercolor <var>color</var></a></td>
- <td>annotation bounding box color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unique-colors">-unique-colors</a></td>
- <td>discard all but one of any pixel color.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unsharp">-unsharp <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#view">-view</a></td>
- <td>FlashPix viewing transforms</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#vignette">-vignette <var>geometry</var></a></td>
- <td>soften the edges of the image in vignette style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#wave">-wave <var>geometry</var></a></td>
- <td>alter an image along a sine wave</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#wavelet">-wavelet-denoise <var>threshold</var></a></td>
- <td>removes noise from the image using a wavelet transform</td>
- </tr>
+ .logo { display: inline-block; margin-top: 35px; }
+ .logo-img-2x { display: none; }
+ @media
+ only screen and (-webkit-min-device-pixel-ratio: 2),
+ only screen and ( min--moz-device-pixel-ratio: 2),
+ only screen and ( -o-min-device-pixel-ratio: 2/1),
+ only screen and ( min-device-pixel-ratio: 2),
+ only screen and ( min-resolution: 192dpi),
+ only screen and ( min-resolution: 2dppx) {
+ .logo-img-1x { display: none; }
+ .logo-img-2x { display: inline-block; }
+ }
- <tr>
- <td><a href="../command-line-options/index.html#weight">-weight <var>type</var></a></td>
- <td>render text with this font weight</td>
- </tr>
+ #suggestions {
+ margin-top: 35px;
+ color: #ccc;
+ }
+ #suggestions a {
+ color: #666666;
+ font-weight: 200;
+ font-size: 14px;
+ margin: 0 10px;
+ }
- <tr>
- <td><a href="../command-line-options/index.html#white-point">-white-point <var>point</var></a></td>
- <td>chromaticity white point</td>
- </tr>
+ </style>
+ </head>
+ <body>
- <tr>
- <td><a href="../command-line-options/index.html#white-threshold">-white-threshold <var>value</var></a></td>
- <td>force all pixels above the threshold into white</td>
- </tr>
+ <div class="container">
- <tr>
- <td><a href="../command-line-options/index.html#word-break">-word-break <var>type</var></a></td>
- <td>sets whether line breaks appear wherever the text would otherwise overflow its content box. Choose from <code>normal</code>, the default, or <code>break-word</code>.</td>
- </tr>
+ <h1>404</h1>
+ <p><strong>File not found</strong></p>
- <tr>
- <td><a href="../command-line-options/index.html#write">-write <var>filename</var></a></td>
- <td>write images to this file</td>
- </tr>
+ <p>
+ The site configured at this address does not
+ contain the requested file.
+ </p>
- <tr>
- <td><a href="../command-line-options/index.html#write-mask">-write-mask <var>filename</var></a></td>
- <td>associate a write mask with the image</td>
- </tr>
+ <p>
+ If this is your site, make sure that the filename case matches the URL
+ as well as any file permissions.<br>
+ For root URLs (like <code>http://example.com/</code>) you must provide an
+ <code>index.html</code> file.
+ </p>
-</table>
-</div>
-</div>
+ <p>
+ <a href="https://help.github.com/pages/">Read the full documentation</a>
+ for more information about using <strong>GitHub Pages</strong>.
+ </p>
- </div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
- </div>
- </div>
+ <div id="suggestions">
+ <a href="https://githubstatus.com">GitHub Status</a> —
+ <a href="https://twitter.com/githubstatus">@githubstatus</a>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
- </div>
- </div>
-
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ <a href="/" class="logo logo-img-1x">
+ <img width="32" height="32" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpFMTZCRDY3REIzRjAxMUUyQUQzREIxQzRENUFFNUM5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpFMTZCRDY3RUIzRjAxMUUyQUQzREIxQzRENUFFNUM5NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUxNkJENjdCQjNGMDExRTJBRDNEQjFDNEQ1QUU1Qzk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUxNkJENjdDQjNGMDExRTJBRDNEQjFDNEQ1QUU1Qzk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+SM9MCAAAA+5JREFUeNrEV11Ik1EY3s4+ddOp29Q5b0opCgKFsoKoi5Kg6CIhuwi6zLJLoYLopq4qsKKgi4i6CYIoU/q5iDAKs6syoS76IRWtyJ+p7cdt7sf1PGOD+e0c3dygAx/67ZzzPM95/877GYdHRg3ZjMXFxepQKNS6sLCwJxqNNuFpiMfjVs4ZjUa/pmmjeD6VlJS8NpvNT4QQ7mxwjSsJiEQim/1+/9lgMHgIr5ohuxG1WCw9Vqv1clFR0dCqBODElV6v90ogEDjGdYbVjXhpaendioqK07CIR7ZAqE49PT09BPL2PMgTByQGsYiZlQD4uMXtdr+JxWINhgINYhGT2MsKgMrm2dnZXgRXhaHAg5jEJodUAHxux4LudHJE9RdEdA+i3Juz7bGHe4mhE9FNrgwBCLirMFV9Okh5eflFh8PR5nK5nDabrR2BNJlKO0T35+Li4n4+/J+/JQCxhmu5h3uJoXNHPbmWZAHMshWB8l5/ipqammaAf0zPDDx1ONV3vurdidqwAQL+pEc8sLcAe1CCvQ3YHxIW8Pl85xSWNC1hADDIv0rIE/o4J0k3kww4xSlwIhcq3EFFOm7KN/hUGOQkt0CFa5WpNJlMvxBEz/IVQAxg/ZRZl9wiHA63yDYieM7DnLP5CiAGsC7I5sgtYKJGWe2A8seFqgFJrJjEPY1Cn3pJ8/9W1e5VWsFDTEmFrBcoDhZJEQkXuhICMyKpjhahqN21hRYATKfUOlDmkygrR4o4C0VOLGJKrOITKB4jijzdXygBKixyC5TDQdnk/Pz8qRw6oOWGlsTKGOQW6OH6FBWsyePxdOXLTgxiyebILZCjz+GLgMIKnXNzc49YMlcRdHXcSwxFVgTInQhC9G33UhNoJLuqq6t345p9y3eUy8OTk5PjAHuI9uo4b07FBaOhsu0A4Unc+T1TU1Nj3KsSSE5yJ65jqF2DDd8QqWYmAZrIM2VlZTdnZmb6AbpdV9V6ec9znf5Q7HjYumdRE0JOp3MjitO4SFa+cZz8Umqe3TCbSLvdfkR/kWDdNQl5InuTcysOcpFT35ZrbBxx4p3JAHlZVVW1D/634VRt+FvLBgK/v5LV9WS+10xMTEwtRw7XvqOL+e2Q8V3AYIOIAXQ26/heWVnZCVfcyKHg2CBgTpmPmjYM8l24GyaUHyaIh7XwfR9ErE8qHoDfn2LTNAVC0HX6MFcBIP8Bi+6F6cdW/DICkANRfx99fEYFQ7Nph5i/uQiA214gno7K+guhaiKg9gC62+M8eR7XsBsYJ4ilam60Fb7r7uAj8wFyuwM1oIOWgfmDy6RXEEQzJMPe23DXrVS7rtyD3Df8z/FPgAEAzWU5Ku59ZAUAAAAASUVORK5CYII=">
+ </a>
+ <a href="/" class="logo logo-img-2x">
+ <img width="32" height="32" title="" alt="" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAYAAACqaXHeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpEQUM1QkUxRUI0MUMxMUUyQUQzREIxQzRENUFFNUM5NiIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpEQUM1QkUxRkI0MUMxMUUyQUQzREIxQzRENUFFNUM5NiI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkUxNkJENjdGQjNGMDExRTJBRDNEQjFDNEQ1QUU1Qzk2IiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkUxNkJENjgwQjNGMDExRTJBRDNEQjFDNEQ1QUU1Qzk2Ii8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+hfPRaQAAB6lJREFUeNrsW2mME2UYbodtt+2222u35QheoCCYGBQligIJgkZJNPzgigoaTEj8AdFEMfADfyABkgWiiWcieK4S+QOiHAYUj2hMNKgYlEujpNttu9vttbvdw+chU1K6M535pt3ubHCSyezR+b73eb73+t7vrfXsufOW4bz6+vom9/b23ovnNNw34b5xYGAgODg46Mbt4mesVmsWd1qSpHhdXd2fuP/Afcput5/A88xwymcdBgLqenp6FuRyuWV4zu/v759QyWBjxoz5t76+/gun09mK5xFyakoCAPSaTCazNpvNPoYVbh6O1YKGRF0u13sNDQ27QMzfpiAAKj0lnU6/gBVfAZW2WWpwwVzy0IgP3G73FpjI6REhAGA9qVRqA1b9mVoBVyIC2tDi8Xg24+dUzQiAbS/s7Ox8G2o/3mKCC+Zw0efzPQEfcVjYrARX3dbV1bUtHo8fMgt42f+Mp0yUTVQbdWsAHVsikdiHkHaPxcQXQufXgUBgMRxme9U0AAxfH4vFvjM7eF6UkbJS5qoQwEQGA57Ac5JllFyUVZZ5ckUEgMVxsK2jlSYzI+QXJsiyjzNEAJyJAzb/KQa41jJKL8pODMQiTEAymXw5n8/P0IjD3bh7Rgog59aanxiIRTVvV/oj0tnHca/WMrVwODwB3raTGxzkBg/gnZVapFV62Wy2n5AO70HM/5wbJ0QnXyQSaVPDIuNZzY0V3ntHMwxiwHA0Gj2Np7ecIBDgaDAYXKCQJM1DhrgJ3nhulcPbl8j4NmHe46X/g60fwbz3aewjkqFQaAqebWU1AOqyQwt8Id6qEHMc97zu7u7FGGsn7HAiVuosVw7P35C1nccdgSCxop1dHeZswmfHMnxBo6ZTk+jN8dl/vF7vWofDsa+MLN9oEUBMxOb3+1eoEsBVw6Zmua49r8YmhAKDiEPcMwBsxMiqQ+ixzPFxZyqRpXARG/YOr1ObFJ0gUskXBbamcR1OKmMUvDxHRAu8/LmY3jFLMUpFqz9HxG65smYJdyKyECOxDiEAe/p1gjF2oonivZAsxVgl2daa4EQWCW6J55qFAFFZiJWYLxNQy2qOSUzGRsyXCUDIeliwAHEO4WSlWQBRFoZakXcKmCXmyXAKs0Ve9vl8q42WoIYpJU4hV3hKcNs8m9gl7p/xQ73eF5kB4j5mNrWmTJRNwAzqiV1CxjVTZCIkEq+Z1bZFZSN2CenmVAFVy4Plz8xKAGWjjAKFk6lCBMDR/MJjLLMSQNm43xAiQKTaA+9/wewhDjL+JVI1kkTSSOTcKbMTwPqESAot6dn6Fr1gHwVJju6IRuyiByPuUUBAg5DGkAgBmxlvdgIEK9gDkohdY/BJo4CAG0R8miRSsGABkgVQs4KXu098IgUXSSRsFAoKZiVAVDY2WUiiPTjYRi41KwGisrGsLtlsth8Fiwnz2fBkQvWfRtlE3iF2yW63/yCacXZ1dW02GwGyTFaRd4idJnCKHRaCxYRHoG5LTKT6SyiToP1fJHbmAYPYRR0UnZQtMnA6s0zg+GZBlt0Gdo7EPHgpE3Q6nZ8YyLhc8Xj8MJh/aKTAY+5FPAKHLE7RdwuYJZmNwzyCMkBCYyKROJBMJl9B/PXXCjjmCmDOVzH3fiPpObEWGqoKe4EBl8v1hlqsdLvd23mkxHM9pc9kMpmno9HoeTii7ewbHEZPPx1ztLS1tV3AnGuMjiNjvbQFuHw6zDo5By7dTPAQNBgMLrRarTkSls1mnwT7uwp9virx9QzbW/HuV/j5d/b+6jniKlllP8lkeONJDk+dq9GsQTnC4fB1heO0K47Hwe7WdDr9nAKgXwOBwHI+C45Htj1d6sd429TUNEcmUdc+PRaLHcvn87dXW4ugzdsaGxufL94NFv9zi1J7GVbhlvb2dnaJ3SVrxfc+n2+NTsZ7/H7/Mr3g5XdSIHyJSH1PZ+7fToyl2+ErqilgZ4NaLYB9goVGaHjR93Hv1ZrU4XDsFT20kH3PObzbWk0CgG1jacVIUnAQb9F+VexyLMzkpcLv0IJV7AHQIOCAUYHx7v5qgScmYHtTqSAyZLEJTK22Bie4iq3xsqpm4SAf9Hq9a2DnJ4uLK3SEULcdRvp3i3zHySqpficxEdsQc1NrlYXXvR+O7qASSezXB+h1SuUomgg9LL8BUoV4749EIolKh+EiqWmqVEZlDgHks2pxHw7xTqUQw9J5NcAXOK10AGIoZ6Zli6JY6Z1Q461KoZ4NiKLHarW+KDsxlDUPHZ5zPQZqUVDPJsTqb5n9malbpAh8C2XXDLl62+WZIDFRUlNVOiwencnNU3aQEkL+cDMSoLvZo2fQB7AJssNAuFuvorlDVVkkg2I87+jo2K2QAVphDrfyViK5VqtO34OkaxXCp+7drdDBCAdubm6eidX+2WwqT5komwh4YQLk+H4aE93h8Xg2gvHekQZOGSgLZTLyDTLJ4Lx9/KZWKBSainT4Iy3FqQBfnUZR42PKQFksBr9QKVXCPusD3OiA/RkQ5kP8qV/Jl1WywAp/6+dcmPM2zL1UrUahe4JqfnWWKXIul3uUbfP8njAFLW1OFr3gdFtZ72cNH+PtQT7/brW+NXqJAHh0y9V8/U/A1U7AfwIMAD7mS3pCbuWJAAAAAElFTkSuQmCC">
+ </a>
+ </div>
+ </body>
</html>
diff --git a/www/convex-hull/index.html b/www/convex-hull/index.html
index 1dc02ac73..f28998aae 100644
--- a/www/convex-hull/index.html
+++ b/www/convex-hull/index.html
@@ -8,338 +8,521 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Convex Hull</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how ImageMagick computes convex hulls, minimum bounding boxes, and automatically unrotates images using image geometry properties.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Convex Hull">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how ImageMagick computes convex hulls, minimum bounding boxes, and automatically unrotates images using image geometry properties.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Convex Hull">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Convex Hull",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/convex-hull/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick computes convex hulls, minimum bounding boxes, and automatically unrotates images using image geometry properties.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/convex-hull/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/convex-hull/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Convex Hull</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#about">Convex Hull</a> • <a href="#box">Minimum Bounding Box</a> • <a href="#unrotate">Unrotate an Image</a></p>
-
-<p>The convex hull is the is the smallest area convex polygon containing the set of points inside it. The convex hull may be visualized as the shape enclosed by a rubber band stretched around the set of points.</p>
-
-<p>The convex-hull string format returns a list of x,y coordinates of the vertices of the convex-hull polygon containing all the non-black pixels within it.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick [-fuzz <var>value</var>%] [-background <var>background-color</var>] -format "%[convex-hull]" info:</samp> </pre>
-
-<p>Use <code>%[convex-hull:extreme-points]</code> to only return the top, right, bottom, and left extreme points.</p>
-
-<p>where the string format is sensitive to an optional <code>-fuzz</code> value and to an optional background color specified by the define. The command above will find the background color automatically according to the fuzz value unless the background color is defined. The fuzz value defaults to 0 when not specified.</p>
-
-<p>For example, consider the following white rectangle on a black background:</p>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/convex-hull.png" alt="[Convex Hull]" width="250" height="250" name="convert-hull" /></ul>
-
-<p>The convex hull set of points may be computed as:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rect.png -format "%[convex-hull]" info:
-190,121 193,122 281,154 377,189 378,190 377,193 345,281 310,377 309,378 306,377 218,345 122,310 121,309 122,306 154,218 189,122 190,121
-</samp></pre>
-
-<p>The convex hull may also be drawn as a polygon (filled or unfilled) using <code>-draw</code> as follows:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rect.png -set option:hull "%[convex-hull]" -fill none -stroke red -strokewidth 1 -draw "polygon %[hull]" blocks_hull.png</samp></pre>
-
-<p>Here is an example using a non-convex shaped image on a black background:</p>
-
-<ul><img class="img-fluid img-thumbnail" src="../image/convex-hull-blocks.png" alt="[Convex Hull Blocks]" width="128" height="128" name="convert-hull-blocks" /></ul>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Convex Hull</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick computes convex hulls, minimum bounding boxes, and automatically unrotates images using image geometry properties.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick blocks_black.png -set option:hull "%[convex-hull]" -fill none -stroke red -strokewidth 1 -draw "polygon %[hull]" blocks_hull.png</samp></pre>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Quick Navigation & Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap gap-2 pt-2 pb-3 border-bottom mb-3">
+ <a href="#about" class="btn btn-outline-secondary btn-sm">Convex Hull</a>
+ <a href="#box" class="btn btn-outline-secondary btn-sm">Minimum Bounding Box</a>
+ <a href="#unrotate" class="btn btn-outline-secondary btn-sm">Unrotate an Image</a>
+ </div>
+ <p class="lead text-body-secondary" id="about">
+ The convex hull is the smallest area convex polygon containing the set of points inside it. It may be visualized as the shape enclosed by a rubber band stretched around the set of points.
+ </p>
+ <p class="text-muted small">
+ The convex-hull string format returns a list of <em>x</em>,<em>y</em> coordinates of the vertices of the polygon containing all non-black pixels within it.
+ </p>
+ </div>
+ </div>
-<ul><img class="img-fluid img-thumbnail" src="../image/convex-hull-blocks-closure.png" alt="[Convex Hull Blocks Closure]" width="128" height="128" name="convert-hull" /></ul>
+ <!-- Convex Hull Syntax & Basics -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Convex Hull Format & Options</h2>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick [-fuzz <var>value</var>%] [-background <var>background-color</var>] -format "%[convex-hull]" info:</samp></pre>
+ </div>
+ </div>
-<p>Finally, here is an example with a non-constant, non-black background using -fuzz to determine the background color:</p>
+ <p>
+ Use <code>%[convex-hull:extreme-points]</code> to return only the top, right, bottom, and left extreme points. The string format is sensitive to an optional <code>-fuzz</code> value and an optional background color specified by the define. The command automatically finds the background color according to the fuzz value unless the background color is explicitly defined. The fuzz value defaults to 0 when not specified.
+ </p>
-<ul><img class="img-fluid img-thumbnail" src="../image/convex-hull-barn.jpg" alt="[Convex Hull Barn]" width="250" height="250" name="convert-hull-barn" /></ul>
+ <h3 class="h5 mt-4 mb-3">Example 1: White Rectangle</h3>
+ <p>Consider the following white rectangle on a black background:</p>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="../image/convex-hull.png" alt="[Convex Hull]" width="250" height="250" />
+ </div>
-<p>Now let's highlight the convex hull of the image foreground object:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick barn_rot20.png -fuzz 10% -set hull "%[convex-hull]" -fill none -stroke red -strokewidth 1 -draw "polygon %[hull]" barn_rot20_hull.png</samp></pre>
+ <p>The convex hull set of points is computed as follows:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary small"><code>$ magick rect.png -format "%[convex-hull]" info:
+190,121 193,122 281,154 377,189 378,190 377,193 345,281 310,377 309,378 306,377 218,345 122,310 121,309 122,306 154,218 189,122 190,121</code></pre>
+ </div>
+ </div>
-<ul><img class="img-fluid img-thumbnail" src="../image/convex-hull-barn-closure.jpg" alt="[Convex Hull Barn Closure]" width="250" height="250" name="convert-hull-barn-closure" /></ul>
+ <p>The convex hull can also be drawn as a polygon (filled or unfilled) using <code>-draw</code>:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick rect.png -set option:hull "%[convex-hull]" -fill none -stroke red -strokewidth 1 -draw "polygon %[hull]" blocks_hull.png</samp></pre>
+ </div>
+ </div>
-<h2><a class="anchor" id="box"></a>Minimum Bounding Box</h2>
-<p>Similar to the convex hull of the image foreground object(s), is the minimum bounding box. Use <code>%[minimum-bounding-box]</code> to return the points that make up the bounding box. In addition, these properties are set: <code>minimum-bounding-box:area</code>, <code>minimum-bounding-box:width</code>, <code>minimum-bounding-box:height</code>, and <code>minimum-bounding-box:angle</code>.
+ <h3 class="h5 mt-4 mb-3">Example 2: Non-Convex Shapes</h3>
+ <p>Here is an example using a non-convex shaped image on a black background:</p>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="../image/convex-hull-blocks.png" alt="[Convex Hull Blocks]" width="128" height="128" />
+ </div>
-pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick barn_rot20.png -fuzz 10% -background gray25 -set MBR "%[minimum-bounding-box]" -fill none -stroke red -strokewidth 1 -draw "polygon %[MBR]" barn-mbr.png</samp></pre>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick blocks_black.png -set option:hull "%[convex-hull]" -fill none -stroke red -strokewidth 1 -draw "polygon %[hull]" blocks_hull.png</samp></pre>
+ </div>
+ </div>
-<h2><a class="anchor" id="unrotate"></a>Unrotate an Image</h2>
-<p>Use <code>%[minimum-bounding-box:unrotate]</code> to correct for any rotation the image may exhibit. Unless you specify the image orientation, the unrotate angle should properly align the image to the correct coordinate axis for angles <= 45. For angles > 45, the image will align with the wrong coordinate axis. Set the correct image orientation to ensure the proper unrotate angle is returned. Use <code>-define minimum-bounding-box:orientation=<em>{landscape,portrait}</em></code> to set the image orientation. Note, that like convex-hull, the string format is sensitive to an optional <a href="../command-line-options/index.html#fuzz">-fuzz</a> value and an optional <a href="../command-line-options/index.html#background">-background</a> color.</p>
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="../image/convex-hull-blocks-closure.png" alt="[Convex Hull Blocks Closure]" width="128" height="128" />
+ </div>
-<p>The barn image above is rotated by 20 degrees. Here is how we can automatically correct for the rotation and return it to its original landscape orientation:
+ <h3 class="h5 mt-4 mb-3">Example 3: Non-Constant Background</h3>
+ <p>Finally, here is an example with a non-constant, non-black background using <code>-fuzz</code> to determine the background color:</p>
+
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="../image/convex-hull-barn.jpg" alt="[Convex Hull Barn]" width="250" height="250" />
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick barn_rotate20.jpg -fuzz 15% -set option:angle "%[minimum-bounding-box:unrotate]" -background gray -rotate "%[angle]" -trim barn_unrotate.jpg</samp></pre>
-</p>
+ <p>Highlighting the convex hull of the image foreground object:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick barn_rot20.png -fuzz 10% -set hull "%[convex-hull]" -fill none -stroke red -strokewidth 1 -draw "polygon %[hull]" barn_rot20_hull.png</samp></pre>
+ </div>
+ </div>
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="../image/convex-hull-barn-closure.jpg" alt="[Convex Hull Barn Closure]" width="250" height="250" />
+ </div>
+ </section>
+
+ <!-- Minimum Bounding Box Section -->
+ <section id="box" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Minimum Bounding Box</h2>
+ <p>
+ Similar to the convex hull of foreground objects, the minimum bounding box provides bounding geometry. Use <code>%[minimum-bounding-box]</code> to return the points making up the bounding box. Additionally, properties such as <code>minimum-bounding-box:area</code>, <code>minimum-bounding-box:width</code>, <code>minimum-bounding-box:height</code>, and <code>minimum-bounding-box:angle</code> are set.
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick barn_rot20.png -fuzz 10% -background gray25 -set MBR "%[minimum-bounding-box]" -fill none -stroke red -strokewidth 1 -draw "polygon %[MBR]" barn-mbr.png</samp></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- Unrotate an Image Section -->
+ <section id="unrotate" class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Unrotate an Image</h2>
+ <p>
+ Use <code>%[minimum-bounding-box:unrotate]</code> to correct for rotation in an image. Unless you specify orientation, the unrotate angle properly aligns the image for angles <= 45°; for angles > 45°, it aligns with the incorrect coordinate axis.
+ </p>
+ <p>
+ Set the correct image orientation using <code>-define minimum-bounding-box:orientation=<em>{landscape,portrait}</em></code> to ensure the proper unrotate angle is returned. Like convex-hull, the string format is sensitive to optional <a href="../command-line-options/index.html#fuzz">-fuzz</a> and <a href="../command-line-options/index.html#background">-background</a> values.
+ </p>
+
+ <p>Since the barn image above is rotated by 20 degrees, here is how we automatically correct for rotation and restore its original landscape orientation:</p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick barn_rotate20.jpg -fuzz 15% -set option:angle "%[minimum-bounding-box:unrotate]" -background gray -rotate "%[angle]" -trim barn_unrotate.jpg</samp></pre>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/defines/index.html b/www/defines/index.html
index 84edd0d98..01868b59b 100644
--- a/www/defines/index.html
+++ b/www/defines/index.html
@@ -11,2075 +11,1184 @@
<meta name="description" content="Maximize image processing with the -define command-line option, tailor coders/decoders, and control operations with precision for optimal results.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Defines">
<meta property="og:description" content="Maximize image processing with the -define command-line option, tailor coders/decoders, and control operations with precision for optimal results.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Defines">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Defines",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/defines/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Maximize image processing with the -define command-line option, tailor coders/decoders, and control operations with precision for optimal results.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/defines/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/defines/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Defines</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-
-<p class="lead">The <a href="../command-line-options/index.html#define">-define</a> command-line option adds specific global settings generally used to control coders and image processing operations.</p>
-
-<p>This option creates one or more definitions for coders and decoders to use
-while reading and writing image data. Definitions are generally used to
-control image file format coder modules, and image processing operations,
-beyond what is provided by normal means. Defined settings are listed in <a href="../command-line-options/index.html#verbose">-verbose</a> information ("<code>info:</code>" output format) as "Artifacts". </p>
-
-<p>If <var>value</var> is missing for a definition, an empty-valued
-definition of a flag is created with that name. This is used to control on/off
-options. Use <a href="../command-line-options/index.html#define">-define keys</a> to remove definitions
-previously created. Use <a href="../command-line-options/index.html#define">+define "*"</a> to remove all existing definitions.</p>
-
-<p>The same 'artifact' settings can also be defined using the <a href="../command-line-options/index.html#set">-set "option:<var>key</var>" "<var>value</var>"</a> option, which also allows the use of <a href="../escape/index.html" >Format and Print Image Properties</a> in the defined value. </p>
-
-<p>The <var>option</var> and <var>key</var> are case-independent (they are
-converted to lowercase for use within the decoders) while the <var>value</var>
-is case-dependent.</p>
-
-<p>Such settings are global in scope, and affect all images and operations. </p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick bilevel.tif -define ps:imagemask eps3:stencil.ps
-magick arrow.tga -set colorspace:auto-grayscale=off myArrow.tga </code></pre>
-
-<p>Set attributes of the image registry by prefixing the value with
-<code>registry:</code>. For example, to set a temporary path to put work files,
-use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-define registry:temporary-path=/data/tmp </code></pre>
-
-<p>Here is a list of recognized defines:</p>
-
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tr>
- <th align="center" colspan=2>Command-line Defines</th>
- </tr>
-
- <tr>
- <td colspan=2><p></p></td>
- </tr>
-
- <tr>
- <td>ashlar:best-fit</td>
- <td>align tiles on both the left and right edges.</td>
- </tr>
-
- <tr>
- <td>ashlar:tiles</td>
- <td>set the maximum number of image tiles to render per canvas.</td>
- </tr>
-
- <tr>
- <td>auto-threshold:verbose</td>
- <td>return derived threshold as the <code>auto-threshold:threshold</code> image property.</td>
- </tr>
-
- <tr>
- <td>color:illuminant</td>
- <td>reference illuminant, defaults to D65.</td>
- </tr>
-
- <tr>
- <td>colorspace:auto-grayscale=<var>on|off</var></td>
- <td>Prevent automatic conversion to grayscale inside coders that support
- grayscale. This should be accompanied by -type truecolor. PNG and TIF do
- not need this define. With PNG, just use PNG24:image. With TIF, just use
- -type truecolor. JPG and PSD will need this define.</td>
- </tr>
-
- <tr>
- <td>compare:frequency-domain=<var>boolean</var></td>
- <td>Certain similarity metrics such as DPC, MSE, NCC, PSNR, Phase, and RMSE operate in the frequency domain when FFTW and HDRI are enabled. To utilize their spatial equivalents, you can use the command <code>-define compare:frequency-domain=false</code>. However, note that DPC and PHASE metrics do not have spatial equivalents, so this command will be ignored for them.</td>
- </tr>
-
- <tr>
- <td>compare:ssim-radius=<var>value</var></td>
- <td>Set the structural similarity index radius.</td>
- </tr>
-
- <tr>
- <td>compare:ssim-sigma=<var>value</var></td>
- <td>Set the structural similarity index sigma.</td>
- </tr>
-
- <tr>
- <td>compare:ssim-k1=<var>value</var></td>
- <td>Set the structural similarity index k1 argument.</td>
- </tr>
-
- <tr>
- <td>compare:ssim-k2=<var>value</var></td>
- <td>Set the structural similarity index k2 argument.</td>
- </tr>
-
- <tr>
- <td>compare:virtual-pixels=<var>boolean</var></td>
- <td>ImageMagick compares images pixel by pixel, aligning from the top-left corner. If sizes differ, unmatched areas in the smaller image are treated as virtual pixels, possibly affecting comparison results. To limit comparison to authentic pixels only, use <code>-define compare:virtual-pixels=false</code>.</td>
- </tr>
-
- <tr>
- <td>complex:snr=<var>value</var></td>
- <td>Set the divide SNR constant <a href="../command-line-options/index.html#complex">-complex</a>.</td>
- </tr>
-
- <tr>
- <td>compose:args=<var>arguments</var></td>
- <td>Set certain compose argument values when using convert ... -compose ...
- -composite. See <a href="../compose/index.html"
- >Image Composition</a>.</td>
- </tr>
-
- <tr>
- <td>compose:clip-to-self=<var>true|false</var></td>
- <td>Some <a href="../command-line-options/index.html#compose" >-compose</a> methods can modify the
- 'destination' image outside the overlay area. It is disabled by default.</td>
- </tr>
-
- <tr>
- <td>compose:clamp=<var>on|off</var></td>
- <td>Set each pixel whose value is below zero to zero and any the pixel
- whose value is above the quantum range to the quantum range (e.g. 65535)
- otherwise the pixel value remains unchanged. Define supported in
- ImageMagick 6.9.1-3 and above.</td>
- </tr>
-
- <tr>
- <td>compose:colorspace=<var>colorspace</var></td>
- <td>Set the colorspace for the colorize composite operator. The default is HCL.</td>
- </tr>
-
- <tr>
- <td>compose:compose=<var>on|off</var></td>
- <td>This special usage allows you to perform true mathematics of the image channels, without alpha composition effects, becoming involved.</td>
- </tr>
-
- <tr>
- <td>connected-components:angle-threshold=<var>value</var></td>
- <td>Merges any region with equivalent ellipse angle smaller than
- <var>value</var> into its surrounding region or largest neighbor.
- Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:area-threshold=<var>value</var></td>
- <td>Merges any region with area smaller than <var>value</var> into its
- surrounding region or largest neighbor. Thresholds can optionally include ranges, e.g. 410-1600.</td>
- </tr>
-
- <tr>
- <td>connected-components:background-id=<var>object-id</var></td>
- <td>Identify which object is to be the background object.
- Supported in Imagemagick 7.0.9.21.</td>
- </tr>
-
- <tr>
- <td>connected-components:circularity-threshold=<var>value</var></td>
- <td>Merge any region with circularity smaller than <var>value</var>
- into its surrounding region or largest neighbor. Circularity is
- computed as 4*pi*area/perimeter^2.
- Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:diameter-threshold=<var>value</var></td>
- <td>Merge any region with diameter smaller than <var>value</var>
- into its surrounding region or largest neighbor. Diameter is
- computed as sqrt(4*area/pi).
- Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:eccentricity-threshold=<var>value</var></td>
- <td>Merge any region with equivalent ellipse eccentricity smaller
- than <var>value</var> into its surrounding region or largest neighbor.
- Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:exclude-header=<var>true</var></td>
- <td>List the objects without the header. Supported in Imagemagick 7.0.9.21.</td>
- </tr>
-
- <tr>
- <td>connected-components:keep=<var>list-of-ids</var></td>
- <td>Comma and/or hyphenated list of id values to keep in the output. Supported in Imagemagick 6.9.3-0.</td>
- </tr>
-
- <tr>
- <td>connected-components:keep-colors=<var>red;green;blue</var></td>
- <td>Keeps objects identified by their color in a semicolon separated list. Supported in Imagemagick 6.9.3-0.</td>
- </tr>
-
- <tr>
- <td>connected-components:keep-top=<var>number-of-objects</var></td>
- <td>Keeps only the top number of objects by area. Supported in Imagemagick 7.0.9.21.</td>
- </tr>
-
- <tr>
- <td>connected-components:major-axis-threshold=<var>value</var></td>
- <td>Merge any region with equivalent ellipse major axis diameter smaller
- than <var>value</var> into its surrounding region or largest neighbor.
- Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:mean-color=<var>true</var></td>
- <td>Change the output image from id values to mean color values. Supported in Imagemagick 6.9.2-8.</td>
- </tr>
-
- <tr>
- <td>connected-components:minor-axis-threshold=<var>value</var></td>
- <td>Merge any region with equivalent ellipse minor axis diameter smaller than <var>value</var> into its surrounding region or largest neighbor. Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:perimeter-threshold=<var>value</var></td>
- <td>Merge any region with perimeter smaller than <var>value</var> into its surrounding region or largest neighbor. Supported in Imagemagick 7.0.9.24.</td>
- </tr>
-
- <tr>
- <td>connected-components:remove=<var>list-of-ids</var></td>
- <td>Comma and/or hyphenated list of id values to remove from the output.
- Supported in Imagemagick 6.9.2-9.</td>
- </tr>
-
- <tr>
- <td>connected-components:remove-colors=<var>red;green;blue</var></td>
- <td>Remove objects identified by their color in a semicolon separated list.
- Supported in Imagemagick 6.9.3-0.</td>
- </tr>
-
- <tr>
- <td>connected-components:verbose=<var>true</var></td>
- <td>Lists id, bounding box, centroid, area, mean color for each region.</td>
- </tr>
-
- <tr>
- <td>convolve:scale=<var>{kernel_scale}[!^] [,{origin_addition}] [%]</var></td>
- <td>Define the kernel scaling. The special flag ! automatically scales to
- full dynamic range. The ! flag can be used in combination with a factor or
- percent. The factor or percent is then applied after the automatic scaling.
- An example is 50%!. This produces a result 50% darker than full dynamic
- range scaling. The ^ flag assures the kernel is 'zero-summing', for
- example when some values are positive and some are negative as in edge
- detection kernels. The origin addition adds that value to the center
- pixel of the kernel. This produces an effect that is like adding the image
- that many times to the result of the filtered image. The typical value
- is 1 so that the original image is added to the result of the convolution.
- The default is 0.</td>
- </tr>
-
- <tr>
- <td>deskew:auto-crop=<var>true</var></td>
- <td>auto crop the image after deskewing.</td>
- </tr>
-
- <tr>
- <td>delegate:bimodal=<var>true</var></td>
- <td>Specify direct conversion from Postscript to PDF.</td>
- </tr>
-
- <tr>
- <td>distort:scale=<var>value</var></td>
- <td>Set the output scaling factor for use with <a href="../command-line-options/index.html#distort"
- >-distort</a>.</td>
- </tr>
-
- <tr>
- <td>distort:viewport=<var>WxH+X+Y</var></td>
- <td>Set the viewport for use with <a href="../command-line-options/index.html#distort">-distort</a>.</td>
- </tr>
-
- <tr>
- <td>dither:diffusion-amount=<var>X%</var></td>
- <td>Set the amount of diffusion to use with Floyd-Steinberg diffusion</td>
- </tr>
-
- <tr>
- <td>exif:sync-image=false</td>
- <td>By default, the resolution of the image is synced with the EXIF profile. Use this define to ignore the EXIF profile.</td>
- </tr>
-
- <tr>
- <td>filename:literal=<var>true</var></td>
- <td>By default, output filenames can contain <a href="../command-line-processing/index.html#output">embedded formatting characters</a>. Use this option to bypass interpreting embedded formatting characters and instead use the filename literally.</td>
- </tr>
-
- <tr>
- <td>filter:option=<var>value</var></td>
- <td>Set a filter option for use with <a href="../command-line-options/index.html#resize">-resize</a>.
- See below for specific options.</td>
- </tr>
-
- <tr>
- <td>filter:b=<var>value</var></td>
- <td>Redefine the spline factor used for cubic filters such as Cubic,
- Catrom, Mitchel, and Hermite, as well as the Parzen cubic windowing
- function. If only one of the b or c values are defined, the other is
- set so as to generate a 'Cubic-Keys' filter. The meaning of the b and c
- values was defined in a research paper by Mitchell-Netravali.</td>
- </tr>
-
- <tr>
- <td>filter:blur=<var>factor</var></td>
- <td>Scale the X axis of the filter (and its window). Use > 1.0 for blurry
- or < 1.0 for sharp. This should only be used with Gaussian and
- Gaussian-like filters simple filters, or you may not get the
- expected results.</td>
- </tr>
-
- <tr>
- <td>filter:c=<var>value</var></td>
- <td>Redefine the Keys alpha factor used for cubic filters such as Cubic,
- Catrom, Mitchel, and Hermite, as well as the Parzen cubic windowing
- function. If only one of the b or c values are defined, the other is
- set so as to generate a 'Cubic-Keys' filter. The meaning of the b and c
- values was defined in a research paper by Mitchell-Netravali.</td>
- </tr>
-
- <tr>
- <td>filter:kaiser-alpha=<var>value</var></td>
- <td>Set the Kaiser window alpha value. When it is multiplied by 'PI',
- it is equivalent to "kaiser-beta" and will override that setting.
- It only affects the Kaiser windowing function and does not affect
- any other attributes.</td>
- </tr>
-
- <tr>
- <td>filter:kaiser-beta=<var>value</var></td>
- <td>Set the Kaiser window beta value. It only affects Kaiser windowing
- function and does not affect any other attributes. Before ImageMagick
- v6.7.6-10, this option was known as "filter:alpha" (an inheritance
- from the very old "zoom" program). It was changed to bring the function
- in line with more modern academic research usage and better assign it
- be more definitive. The default value is 6.5</td>
- </tr>
-
- <tr>
- <td>filter:lobes=<var>count</var></td>
- <td>Set the number of lobes to use for the Sinc/Bessel filter.
- This is an alternate way of specifying the 'support' range of the filter,
- that is designed to be more suited to windowed filters, especially when
- used for image distorts.</td>
- </tr>
-
- <tr>
- <td>filter:sigma=<var>value</var></td>
- <td>Set the 'sigma' value used to define the Gaussian filter.
- The default sigma value is '0.5'. It only affects the Gaussian filter,
- but does not shrink (but may enlarge) the filter's 'support'.
- It can be used to generate very small blurs, but without the filter
- 'missing' pixels due to using a small support setting.
- A larger value of '0.707' (a value of '1/sqrt(2)') is another
- common setting.</td>
- </tr>
-
- <tr>
- <td>filter:support=<var>radius</var></td>
- <td>Set the filter support radius. It defines how large the filter
- should be and thus directly defines how slow the filtered resampling
- process is. All filters have a default 'preferred' support size.
- Some filters like Lagrange and windowed filters adjust themselves
- depending on this value. With simple filters this value either does
- nothing (but slow the resampling), or will clip the filter function
- in a detrimental way.</td>
- </tr>
-
- <tr>
- <td>filter:verbose=<var>true</var></td>
- <td>Enable printing of information about the final internal
- filter selection to standard output. This includes a commented header
- on the filter settings being used and data allowing the filter weights
- to be easily graphed. Note however that some filters are internally
- defined in terms of other filters. The Lanczos filter, for example,
- is defined in terms of a SincFast windowed SincFast filter, while
- the Mitchell filter is defined as a general Cubic family filter
- with specific 'B' and 'C' settings.</td>
- </tr>
-
- <tr>
- <td>filter:window=<var>filter_function</var></td>
- <td>The IIR (infinite impulse response) filters Sinc and Jinc are
- windowed (brought down to zero over the defined support range) with
- the given filter. This allows you to specify a filter function to be
- used as a windowing function for these IIR filters. Many of the defined
- filters are actually windowing functions for these IIR filters. A typical
- choices is Box, (which effectively turns off the windowing function).</td>
- </tr>
-
- <tr>
- <td>filter:window-support=<var>radius</var></td>
- <td>Scale the windowing function to this size. This causes
- the windowing (or self-windowing Lagrange filter) to act is if the
- support window is larger than what is actually supplied to the calling
- operator. The filter, however, is still clipped to the true support
- size that is provided. If unset, this will equal the normal filter
- support size.</td>
- </tr>
-
- <tr>
- <td>h:format=<var>value</var></td>
- <td>Set the image encoding format use when writing a C-style header.
- <var>format</var> can be any output format supported by ImageMagick
- except for <var>h</var> and <var>magick</var>. If this
- option is omitted, the default is <var>GIF</var> for PseudoClass
- images and <var>PNM</var> for DirectClass images.</td>
- </tr>
-
- <tr>
- <td>fourier:normalize=<var>inverse</var></td>
- <td>Set the location for the FFT/IFT normalization as use by
- <a href="../command-line-options/index.html#fft">+-fft</a> and <a href="../command-line-options/index.html#ift">+-ift</a>. The default is
- <var>forward</var>.</td>
- </tr>
-
- <tr>
- <td>frames:step</td>
- <td>When selecting image <a href="../command-line-processing/index.html">frames</a>, the default is to step one frame at a time through a list, e.g. [0-3], returns frames 0, 1, 2, and 3. Set the step to 2 in this example and we instead get frames 0 and 2.</td>
- </tr>
-
- <tr>
- <td>fx:debug=true</td>
- <td>Debug <code>-fx</code> expression.</td>
- </tr>
-
- <tr>
- <td>hough-lines:accumulator=true</td>
- <td>Return the accumulator image in addition to the lines image.</td>
- </tr>
-
- <tr>
- <td>identify:convex-hull=<var>true</var></td>
- <td>Display convex hull & minimum bounding box.</td>
- </tr>
-
- <tr>
- <td>identify:locate=<var>value</var></td>
- <td>Display minimum or maximum pixel locations. Valid values are <code>minimum</code> or <code>maximum</code>. The default is <code>maximum</code>.</td>
- </tr>
-
- <tr>
- <td>identify:limit=<var>value</var></td>
- <td>The maximum number of pixel locations to display when using <code>identify:locate</code>.</td>
- </tr>
-
- <tr>
- <td>image:frames</td>
- <td>Select specific frames from multi‑image formats, e.g., <code>-define image:frames=0-3</code>.</td>
- </tr>
-
- <tr>
- <td>json:features</td>
- <td>Include features in verbose information.</td>
- </tr>
-
- <tr>
- <td>kmeans:seed-colors=<var>color-list</var></td>
- <td>Initialize the colors, where color-list is a semicolon delimited
- list of seed colors (e.g. red;sRGB(19,167,254);#00ffff)</td>
- </tr>
-
- <tr>
- <td>magick:format=<var>value</var></td>
- <td>Set the image encoding format use when writing a C-style header.
- This is the same as "h:format=format" described above.</td>
- </tr>
-
- <tr>
- <td>magnify:method=<var>value</var></td>
- <td>Choose the method of pixel art magnification. The choices are:
- eagle2X, eagle3X, eagle3XB, epb2X, fish2X, hq2X, scale2X (default),
- scale3X, xbr2X</td>
- </tr>
-
- <tr>
- <td>modulate:colorspace=<var>colorspace</var></td>
- <td>Define the colorspace to use with <a href="../command-line-options/index.html#modulate">-modulate</a>.
- Any hue-based colorspace may be use. The default is HSL.</td>
- </tr>
-
- <tr>
- <td>morphology:compose=<var>compose-method</var></td>
- <td>Specify how to merge results generated by multiple<a
- href="#morphology" >-morphology</a> kernel. The default is none. One
- typical value is 'lighten' as used, for example, with the sobel edge
- kernels. </td>
- </tr>
-
- <tr>
- <td>morphology:showKernel=<var>1</var></td>
- <td>Output (to 'standard error') all the information about a generated <a
- href="#morphology" >-morphology</a> kernel.</td>
- </tr>
-
- <tr>
- <td>phash:colorspaces=<var>colorspace,colorspace,...</var></td>
- <td>The perceptual hash defaults to the xyY and HSB colorspaces. When
- using this define, you can specify up to six alternative colorspaces. (as
- of IM 7.0.3-8)</td>
- </tr>
-
- <tr>
- <td>phash:normalize=<var>true</var></td>
- <td>Normalize the phash metric</td>
- </tr>
-
- <tr>
- <td>pixel:compliance=<var>{none|undefined|svg|mvg|x11|xpm}</var></td>
- <td>In combination with <a href="../command-line-options/index.html#depth">-depth</a>, this define allows color values to be presented in one or combination of: percent, names, 8-bit components, or hex values. 16-bit depth values are generally shown as percents and 8-bit depth values generally are shown as a combination of color names and 8-bit component values.</td>
- </tr>
-
- <tr>
- <td>png:bit-depth=<var>value</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>png:chunk-malloc-max=<var>value</var></td>
- <td>Set the maximum chunk size.</td>
- </tr>
-
- <tr>
- <td>profile:skip=<var>name1,name2,...</var></td>
- <td>Skip the named profile[s] when reading the image. Use skip="*" to
- skip all named profiles in the image. Many named profiles exist,
- including ICC, EXIF, APP1, IPTC, XMP, and others.</td>
- </tr>
-
- <tr>
- <td>precision:highres-transform=<var>true</var></td>
- <td>Increase the profile transform precision. Note, there is a slight
- performance penalty as the high-precision transform is floating point
- rather than unsigned. It is important to note that results may depend
- on whether or not the original image already has an included profile.</td>
- </tr>
-
- <tr>
- <td>preserve-timestamp=<var>true|false</var></td>
- <td>Preserve file timestamp (<code>mogrify</code> only).</td>
- </tr>
-
- <tr>
- <td>q-table=<var>quantization-table.xml</var></td>
- <td>Custom JPEG quantization tables.</td>
- </tr>
-
- <tr>
- <td>quantum:format=<var>type</var></td>
- <td>Set the type to <code>floating-point</code> to specify a floating-point
- format for raw files (e.g. GRAY:) or for MIFF and TIFF images in HDRI mode
- to preserve negative values. If <a href="../command-line-options/index.html#depth">-depth</a> 16 is
- included, the result is a single precision floating point format.
- If <a href="../command-line-options/index.html#depth">-depth</a> 32 is included, the result is
- double precision floating point format. For signed pixel data, use <code>-define quantum:format=signed</code></td>
- </tr>
-
- <tr>
- <td>quantum:maximum=<var>value</var></td>
- <td>Maximum value for certain image types such as DCM. If not set, the
- the maximum value is QuantumRange.</td>
- </tr>
-
- <tr>
- <td>quantum:minimum=<var>value</var></td>
- <td>Minimum value for certain image types such as DCM. If not set, the
- the minimum value is zero.</td>
- </tr>
-
- <tr>
- <td>quantum:polarity=<var>photometric-interpretation</var></td>
- <td>Set the photometric-interpretation of an image (typically for TIFF
- image file format) to either <code>min-is-black</code> (default) or
- <code>min-is-white</code>.</td>
- </tr>
-
- <tr>
- <td>registry:<var>attribute</var>=<var>value</var></td>
- <td>Set attributes of the image registry, for example,
- registry:temporary-path=/data/tmp.
- </td>
- </tr>
-
- <tr>
- <td>registry:date:precision=<var>length</var></td>
- <td>Set the maximum number of characters printed for any timestamp.</td>
- </tr>
-
- <tr>
- <td>registry:option:pedantic=<var>true | false</var></td>
- <td>By default, if a command-line option is also a filename (e.g., -quality), it is intrepetted as a filename. Set this option to <code>true</code> to interpret it as an option. </td>
- </tr>
-
- <tr>
- <td>registry:precision=<var>value</var></td>
- <td>Set the maximum number of significant digits to be printed.</td>
- </tr>
-
- <tr>
- <td>resample:verbose=<var>true</var></td>
- <td>Output the cylindrical filter lookup table created by the EWA
- (Elliptical Weighted Average) resampling algorithm. Note this table
- uses a squared radius lookup value. This is typically only used for
- debugging EWA resampling.
- </td>
- </tr>
-
- <tr>
- <td>sample:offset=<var>geometry</var></td>
- <td>Location of the sampling point within the sub-region being sampled,
- expressed as percentages (see <a href="../command-line-options/index.html#sample" >-sample</a>).</td>
- </tr>
-
- <tr>
- <td>shepards:power=<var>value</var></td>
- <td>Set the exponent in the Shepard's distortion. The default is 2.</td>
- </tr>
-
- <tr>
- <td>stream:buffer-size=<var>value</var></td>
- <td>Set the stream buffer size. Select 0 for unbuffered I/O.</td>
- </tr>
-
- <tr>
- <td>trim:percent-background=<var>X%</var></td>
- <td>Set the amount of background that is tolerated in an edge. It is
- specified as a percent. 0% means no background is tolerated.
- 50% means an edge can contain up to 50% pixels that are background per
- the fuzz-factor.</td>
- </tr>
-
- <tr>
- <td>trim:edges={<var>north,east,south,west</var>}</td>
- <td>Only trim the specified edges of the image.</td>
- </tr>
-
- <tr>
- <td>trim:minSize=<var>geometry</var></td>
- <td>Limit the trim to the specified size.</td>
- </tr>
-
- <tr>
- <td>type:features=<var>string</var></td>
- <td>Add a font feature to be used by the RAQM delegate during complex
- text layout. This is usually used to turn on optional font features that
- are not enabled by default, but can be also used to turn off default font
- features. Features include those to control kerning, ligature and Arabic.</td>
- </tr>
-
- <tr>
- <td>type:hinting=<var>false</var></td>
- <td>Disable font hinting. Proper glyph rendering needs the scaled points
- to be aligned along the target device pixel grid, through an operation
- often called hinting. One of its main purposes is to ensure that important
- widths and heights are respected throughout the whole font. (For example,
- it is very often desirable that the ‘I’ and the ‘T’ glyphs have their
- central vertical line of the same pixel width. Hinting also manages
- features like stems and overshoots, which can cause problems at small
- pixel sizes.</td>
- </tr>
-
- <tr>
- <td>white-balance:vibrance=<var>value{%}</var></td>
- <td>Change in color vibrance of the a & b channels.</td>
- </tr>
-
- <tr>
- <td>x:screen=<var>true</var></td>
- <td>Obtain the image from the root window.</td>
- </tr>
-
- <tr>
- <td>x:silent=<var>true</var></td>
- <td>Turn off the beep when importing an image.</td>
- </tr>
-
- <tr>
- <td colspan=2><p></p></td>
- </tr>
-
- <tr>
- <td colspan=2><p></p></td>
- </tr>
-
- <tr>
- <th align="center" colspan=2>IMAGE FORMATS</th>
- </tr>
-
- <tr>
- <td colspan=2><p></p></td>
- </tr>
-
- <tr>
- <td>bmp3:alpha=<var>true|false</var></td>
- <td>Include any alpha channel when writing in the BMP image format.</td>
- </tr>
-
- <tr>
- <td>bmp:format=<var>value</var></td>
- <td>Valid values are <var>bmp2</var>, <var>bmp3</var>,
- and <var>bmp4</var>. This option can be useful when the
- method of prepending "BMP2:" to the output filename is inconvenient or
- is not available, such as when using the <a href="../mogrify/index.html">mogrify</a>
- utility.</td>
- </tr>
-
- <tr>
- <td>bmp:subtype=<var>value</var></td>
- <td>BMP channel depth subtypes. The choices are: RGB555, RGB565, ARGB4444,
- ARGB1555. Only support in BMP (BMP4). BMP3 and BMP2 do not contain header
- fields to support these options.</td>
- </tr>
-
- <tr>
- <td>{caption,label}:{max,start}-pointsize=<var>value</var></td>
- <td>This sets the bounding pointsize to use when searching for the maximum pointsize where the text annotation still fits within the image boundaries.</td>
- </tr>
-
- <tr>
- <td>dcm:display-range=<var>reset</var></td>
- <td>Set the display range to the minimum and maximum pixel values for the
- DCM image format.</td>
- </tr>
-
- <tr>
- <td>dcm:fix-byte-order=<var>true</var></td>
- <td>Fix incorrect byte order when reading pixels from the file.</td>
- </tr>
-
- <tr>
- <td>dcm:rescale=<var>true</var></td>
- <td>Enable interpretation of the rescale slope and intercept settings
- in the file.</td>
- </tr>
-
- <tr>
- <td>dcm:window=<var>CxW</var></td>
- <td>Specify the dcm window center and width.</td>
- </tr>
-
- <tr>
- <td>dds:cluster-fit=<var>true|false</var></td>
- <td>Enable the DDS cluster-fit.</td>
- </tr>
-
- <tr>
- <td>dds:compression=<var>dxt1|dxt5|none</var></td>
- <td>Set the dds compression.</td>
- </tr>
-
- <tr>
- <td>dds:mipmaps=<var>value</var></td>
- <td>Set the dds number of mipmaps.</td>
- </tr>
-
- <tr>
- <td>dds:weight-by-alpha=<var>true|false</var></td>
- <td>Enable the DDS alpha weighting.</td>
- </tr>
-
- <tr>
- <td>dng:max-raw-memory=<var>value</var></td>
- <td>Stop processing if raw buffer size grows larger than that value (in megabytes). Default is 8192.</td>
- </tr>
-
- <tr>
- <td>dng:no-auto-bright=<var>true</var></td>
- <td>Disable the histogram-based white level.</td>
- </tr>
-
- <tr>
- <td>dng:output-color=<var>value</var></td>
- <td>Select the output colorspace. The choices are:
- 0 - Raw color (unique to each camera),
- 1 - sRGB D65 (default),
- 2 - Adobe RGB (1998) D65,
- 3 - Wide Gamut RGB D65,
- 4 - Kodak ProPhoto RGB D65,
- 5 - XYZ,
- 6 - ACES</td>
- </tr>
-
- <tr>
- <td>dng:read-thumbnail=<var>true</var></td>
- <td>Read the embedded thumbnail and store it as a profile called 'dng:thumbnail'.</td>
- </tr>
-
- <tr>
- <td>dng:use-auto-wb=<var>true</var></td>
- <td>Compute the white balance by averaging the entire image.</td>
- </tr>
-
- <tr>
- <td>dng:use-camera-wb=<var>true</var></td>
- <td>Uses the white balance specified by the camera. Default is true.</td>
- </tr>
-
- <tr>
- <td>dot:layout-engine=<var>value</var></td>
- <td>Specify the layout engine for the DOT image format (e.g., <code>neato</code>).</td>
- </tr>
-
- <tr>
- <td>eps:use-cropbox=<var>true</var></td>
- <td>Force Imagemagick to respect the crop box.</td>
- </tr>
-
- <tr>
- <td>exr:color-type=<var>value</var></td>
- <td>Specify the color type for the EXR format: RGB, RGBA, YC, YCA, Y,
- YA, R, G, B, A).</td>
- </tr>
-
- <tr>
- <td>fpx:view=<var>value</var></td>
- <td>Specify the FlashPix viewing object, which contains the specification
- of a viewing transform. The viewing transform enables applications to
- represent a set of simple edits as a list of "commands" which are applied
- to the image in real time without altering the original image.</td>
- </tr>
-
- <tr>
- <td>ftxt:chsep=<var>value</var></td>
- <td>A single text character that separates channel values for reading and
- writing. Default: "," (Comma).</td>
- </tr>
-
- <tr>
- <td>ftxt:format=<var>value</var></td>
- <td>The format string for writing and reading. Default: "\x,\y:\c".
- For escapes \x etc, see
- [ftxt: formatted text](http://im.snibgo.com/fmttxt.htm).</td>
- </tr>
-
- <tr>
- <td>ftxt:hasalpha=<var>value</var></td>
- <td>Whether the text has an alpha channel, for reading only.
- Default: false.</td>
- </tr>
-
- <tr>
- <td>ftxt:nummeta=<var>value</var></td>
- <td>The number of meta channels, for reading only. Default 0 (Zero).</td>
- </tr>
-
- <tr>
- <td>heic:chroma=<var>value</var></td>
- <td>Set the HEIC chroma parameter. Possible values are: "420", "422", "444". Default is "420"", except output with preserved CICP matrix coefficient 0 uses "444" when this define is omitted because identity matrix CICP cannot be written with chroma subsampling.</td></td>
- </tr>
-
- <tr>
- <td>heic:cicp=<var>value</var></td>
- <td>Set the HEIC color primaries, transfer characteristics, matrix coefficients, and full range flag. Use <code>1/13/6/1</code> for full range BT.709. If omitted, the source HEIC CICP value is preserved when available unless <code>heic:preserve-cicp=false</code> is set. When preserving source matrix coefficient 0 with <code>heic:chroma=420</code> or <code>422</code>, ImageMagick writes matrix coefficient 6 (BT.601) for the subsampled YCbCr output. Explicit <code>heic:cicp</code> values with matrix coefficient 0 require <code>heic:chroma=444</code>. See ISO/IEC 14496-12:2022 standard for a description of these fields and values.</td>
- </tr>
-
- <tr>
- <td>heic:clli=<var>value</var></td>
- <td>Set the HEIC content light level information as <code>MaxCLL,MaxFALL</code>. If omitted, the source HEIC content light level is preserved when available unless <code>heic:preserve-clli=false</code> is set.</td>
- </tr>
-
- <tr>
- <td>heic:depth-image=<var>true</var></td>
- <td>Extract the depth image if the container has one.</td>
- </tr>
-
- <tr>
- <td>heic:max-number-of-tiles=<var>value</var></td>
- <td>Sets the maximum number of tiles of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:max-bayer-pattern-pixels=<var>value</var></td>
- <td>Sets the maximum bayer pattern size in pixels of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:max-items=<var>value</var></td>
- <td>Sets the maximum number of items in a box of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:max-components=<var>value</var></td>
- <td>Sets the maximum number of components of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:max-iloc-extents-per-item=<var>value</var></td>
- <td>Sets the maximum number of extents in iloc box of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:max-size-entity-group=<var>value</var></td>
- <td>Sets the maximum size of an entity group of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:max-children-per-box=<var>value</var></td>
- <td>Sets the maximum number of children per box of a HEIC image.</td>
- </tr>
-
- <tr>
- <td>heic:preserve-cicp=<var>false</var></td>
- <td>Do not preserve the source HEIC CICP color information when writing HEIC output.</td>
- </tr>
-
- <tr>
- <td>heic:preserve-clli=<var>false</var></td>
- <td>Do not preserve the source HEIC content light level information when writing HEIC output.</td>
- </tr>
-
- <tr>
- <td>heic:preserve-orientation=<var>true</var></td>
- <td>Preserve the original EXIF orientation during HEIC decoding and rotate
- the pixels accordingly. By default, EXIF orientation is reset to "1" to
- match the actual orientation of pixels in HEIC.
- </td>
- </tr>
-
- <tr>
- <td>heic:speed=<var>value</var></td>
- <td>Set the HEIC speed parameter. Integer value from 0-9. Default is 5.</td>
- </tr>
-
- <tr>
- <td>icon:auto-resize</td>
- <td>Automatically stores multiple sizes when writing an ico image
- (requires a 256x256 input image).</td>
- </tr>
-
- <tr>
- <td>icon:png-compression-size</td>
- <td>Set the minimum image size threshold above which a PNG image is stored instead of a BMP image.</td>
- </tr>
-
- <tr>
- <td>json:limit</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>json:locate</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>json:moments</td>
- <td>Include image moments in verbose information.</td>
- </tr>
-
- <tr>
- <td>jp2:layer-number=<var>value</var></td>
- <td>Set the maximum number of quality layers to decode. Same for JPT, JC2,
- and J2K.</td>
- </tr>
-
- <tr>
- <td>jp2:number-resolutions=<var>value</var></td>
- <td>Set the number of resolutions to encode.Same for JPT, JC2, and
- J2K.</td>
- </tr>
-
- <tr>
- <td>jp2:progression-order=<var>value</var></td>
- <td>Choose from LRCP, RLCP, RPCL, PCRL or CPRL. Same for JPT, JC2, and
- J2K.</td>
- </tr>
-
- <tr>
- <td>jp2:quality=<var>value,value...</var></td>
- <td>Set the quality layer PSNR, given in dB. The order is from left to
- right in ascending order. The default is a single lossless quality layer.
- Same for JPT, JC2, and J2K.</td>
- </tr>
-
- <tr>
- <td>jp2:rate=<var>value</var></td>
- <td>Specify the compression factor to use while writing JPEG-2000 files.
- The compression factor is the reciprocal of the compression ratio. The
- valid range is 0.0 to 1.0, with 1.0 indicating lossless compression. If
- defined, this value overrides the -quality setting. A quality setting
- of 75 results in a rate value of 0.06641. Same for JPT, JC2, and J2K.</td>
- </tr>
-
- <tr>
- <td>jp2:reduce-factor=<var>value</var></td>
- <td>Set the number of highest resolution levels to be discarded.Same for
- JPT, JC2, and J2K.</td>
- </tr>
-
- <tr>
- <td>jpeg:arithmetic-coding=<var>on|off</var></td>
- <td>enable/disable Huffman optimization.</td>
- </tr>
-
- <tr>
- <td>jpeg:block-smoothing=<var>on|off</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>jpeg:colors=<var>value</var></td>
- <td>Set the desired number of colors and let the JPEG encoder do the
- quantizing.</td>
- </tr>
-
- <tr>
- <td>jpeg:dct-method=<var>value</var></td>
- <td>Choose from <code>default</code>, <code>fastest</code>,
- <code>float</code>, <code>ifast</code>, and <code>islow</code>.</td>
- </tr>
-
- <tr>
- <td>jpeg:extent=<var>value</var></td>
- <td>Restrict the maximum JPEG file size, for example <code>-define
- jpeg:extent=400KB</code>. The JPEG encoder will search for the highest
- compression quality level that results in an output file that does not
- exceed the value. The <code>-quality</code> option also will be respected
- starting with version 6.9.2-5. Between 6.9.1-0 and 6.9.2-4, add -quality
- 100 in order for the jpeg:extent to work properly. Prior to 6.9.1-0, the
- -quality setting was ignored.</td>
- </tr>
-
- <tr>
- <td>jpeg:fancy-upsampling=<var>on|off</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>jpeg:high-bit-depth=<var>on|off</var></td>
- <td>By default, ImageMagick generates JPEG images at 8‑bit depth. When high bit‑depth is enabled, it will produce 12‑bit or 16‑bit images if the source image depth exceeds 8 bits.</td>
- </tr>
-
- <tr>
- <td>jpeg:optimize-coding=<var>on|off</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>jpeg:q-table=<var>table</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>jpeg:restart-interval=<var>value</var></td>
- <td>Set the restart interval to `interval` MCU blocks.</td>
- </tr>
-
- <tr>
- <td>jpeg:sampling-factor=<var>sampling-factor-string</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>jpeg:size=<var>geometry</var></td>
- <td>Set the size hint of a JPEG image, for
- example, <code>-define jpeg:size=128x128</code>.
- It is most useful for increasing performance and reducing the memory
- requirements when reducing the size of a large JPEG image.</td>
- </tr>
-
- <tr>
- <td>jxl:decoding-speed=<var>value</var></td>
- <td>Set the JPEG XL decoding speed. Valid values are in the range of 0 (slowest) to 4 (fastest, at the cost of some quality/density).</td>
- </tr>
-
- <tr>
- <td>jxl:distance=<var>value</var></td>
- <td>Set the JPEG XL encoder’s frame distance.</td>
- </tr>
-
- <tr>
- <td>jxl:effort=<var>value</var></td>
- <td>Set the JPEG XL encoding effort. Valid values are in the range of 3 (falcon) to 9 (tortoise).</td>
- </tr>
-
- <tr>
- <td>jxl:quality=<var>value</var></td>
- <td>Set the JPEG XL encoder’s frame distance.</td>
- </tr>
-
- <tr>
- <td>minimum-bounding-box:orientation=<var>value</var></td>
- <td>Find smallest perpendicular distance from edge to origin. Valid values are <code>horizontal</code>
- and <code>vertical</code>.
- </td>
- </tr>
-
- <tr>
- <td>mng:need-cacheoff</td>
- <td>turn playback caching off for streaming MNG.</td>
- </tr>
-
- <tr>
- <td>pcl:fit-to-page=<var>true</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>pdf:author=<var>author</var></td>
- <td>Sets the author of the document</td>
- </tr>
-
- <tr>
- <td>pdf:create-epoch=<var>seconds</var></td>
- <td>Sets the creation time of the document</td>
- </tr>
-
- <tr>
- <td>pdf:creator=<var>creator</var></td>
- <td>Sets the creator of the document</td>
- </tr>
-
- <tr>
- <td>pdf:fit-page=<var>geometry</var></td>
- <td><var>Geometry</var> specifies the scaling dimensions for resizing when the PDF is being read. The geometry is either WxH{%} or page size. No offsets are allowed. (introduced in IM 6.8.8-8)</td>
- </tr>
-
- <tr>
- <td>pdf:fit-to-page=<var>true</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>pdf:hide-annotations=<var>true</var></td>
- <td>hide annotations associated with the page Annots key.</td>
- </tr>
-
- <tr>
- <td>pdf:interpolate=<var>true</var></td>
- <td>enable interpolation while rendering</td>
- </tr>
-
- <tr>
- <td>pdf:keywords=<var>keywords</var></td>
- <td>Sets the keywords of the document</td>
- </tr>
-
- <tr>
- <td>pdf:modify-epoch=<var>seconds</var></td>
- <td>Sets the modification time of the document</td>
- </tr>
-
- <tr>
- <td>pdf:no-identifier=<var>true</var></td>
- <td>Do not generate the ID entry</td>
- </tr>
-
- <tr>
- <td>pdf:page-direction=<var>right-to-left</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>pdf:printed=<var>true</var></td>
- <td>Determines whether the file should be displayed or printed using the "screen" or "printer" options for annotations and images.</td>
- </tr>
-
- <tr>
- <td>pdf:producer=<var>producer</var></td>
- <td>Sets the producer of the document</td>
- </tr>
-
- <tr>
- <td>pdf:subject=<var>subject</var></td>
- <td>Sets the subject of the document</td>
- </tr>
-
- <tr>
- <td>pdf:stop-on-error=<var>true</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>pdf:thumbnail=<var>false</var></td>
- <td>Generate image thumbnails when saving a PDF file.</td>
- </tr>
-
- <tr>
- <td>pdf:title=<var>title</var></td>
- <td>Sets the title of the document</td>
- </tr>
-
- <tr>
- <td>pdf:use-cropbox=<var>true</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>pdf:use-trimbox=<var>true</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>png:color-type=<var>value</var></td>
- <td>Desired bit-depth and color-type for PNG output. You can force the
- PNG encoder to use a different bit-depth and color-type than it would have
- normally selected, but only if this does not cause any loss of image
- quality. Any attempt to reduce image quality is treated as an error and no
- PNG file is written. E.g., if you have a 1-bit black-and-white image, you
- can use these "defines" to cause it to be written as an 8-bit grayscale,
- indexed, or even a 64-bit RGBA. But if you have a 16-million color image,
- you cannot force it to be written as a grayscale or indexed PNG. If you
- wish to do this, you must use the appropriate <a href="../command-line-options/index.html#depth">-depth</a>,
- <a href="../command-line-options/index.html#colors">-colors</a>, or <a href="../command-line-options/index.html#type">-type</a> directives to
- reduce the image quality prior to using the PNG encoder. Note that in
- indexed PNG files, "bit-depth" refers to the number of bits per index,
- which can be 1, 2, 4, or 8. In such files, the color samples always have
- 8-bit depth.</td>
- </tr>
-
- <tr>
- <td>png:compression-filter=<var>value</var></td>
- <td>Valid values are 0 through 9. 0-4 are the corresponding PNG filters,
- 5 means adaptive filtering except for images with a colormap, 6 means
- adaptive filtering for all images, 7 means MNG "loco" compression, 8 means
- Z_RLE strategy with adaptive filtering, and 9 means Z_RLE strategy with no
- filtering.</td>
- </tr>
-
- <tr>
- <td>png:compression-level=<var>value</var></td>
- <td>Valid values are 0 through 9, with 0 providing the least, but fastest
- compression and 9 usually providing the best and always the slowest.</td>
- </tr>
-
- <tr>
- <td>png:compression-strategy=<var>value</var></td>
- <td>Valid values are 0 through 4, meaning default, filtered, huffman_only,
- rle, and fixed ZLIB compression strategy. If you are using an old zlib
- that does not support Z_RLE (before 1.2.0) or Z_FIXED (before 1.2.2.2),
- values 3 and 4, respectively, will use the zlib default strategy
- instead.</td>
- </tr>
-
- <tr>
- <td>png:format=<var>value</var></td>
- <td> valid values are <var>png8</var>, <var>png24</var>,
- <var>png32</var>, <var>png48</var>,
- <var>png64</var>, and <var>png00</var>.
- This property is useful for specifying
- the specific PNG format to be used, when the usual method of prepending the
- format name to the output filename is inconvenient, such as when writing
- a PNG-encoded ICO file or when using <a href="../mogrify/index.html">mogrify</a>.
- Value = <var>png8</var> reduces the number of colors to 256,
- only one of which may be fully transparent, if necessary. The other
- values do not force any reduction of quality; it is an error to request
- a format that cannot represent the image data without loss (except that
- it is allowed to reduce the bit-depth from 16 to 8 for all formats).
- Value = <var>png24</var> and <var>png48</var>
- allow transparency, only if a single color is fully transparent and that
- color does not also appear in an opaque pixel; such transparency is
- written in a PNG <code>tRNS</code> chunk.
- Value = <var>png00</var> causes the image to inherit its
- color-type and bit-depth from the input image, if the input was also
- a PNG.</td>
- </tr>
-
- <tr>
- <td>png:exclude-chunk=<var>value</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>png:include-chunk=<var>value</var></td>
- <td>ancillary chunks to be excluded from or included in PNG output.
-
- <p>The <var>value</var> can be the name of a PNG chunk-type such
- as <var>bKGD</var>, a comma-separated list of chunk-names
- (which can include the word <var>date</var>, the word
- <var>all</var>, or the word <var>none</var>).
- Although PNG chunk-names are case-dependent, you can use all lowercase
- names if you prefer.</p>
-
- <p>The "include-chunk" and "exclude-chunk" lists only affect the behavior
- of the PNG encoder and have no effect on the PNG decoder.</p>
-
- <p>As a special case, if the <code>sRGB</code> chunk is excluded and
- the <code>gAMA</code> chunk is included, the <code>gAMA</code> chunk will
- only be written if gamma is not 1/2.2, since most decoders do not assume
- sRGB for gAMA=0.45455 when no colorspace information is included in
- the PNG file. Because the list is processed from left to right, you
- can achieve this with a single define:</p>
-
- <pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-define png:include-chunk=none,gAMA
- </code></pre>
-
- <p>As a special case, if the <code>sRGB</code> chunk is not excluded and
- the PNG encoder recognizes that the image contains the sRGB ICC profile,
- the PNG encoder will write the <code>sRGB</code> chunk instead of the
- entire ICC profile. To force the PNG encoder to write the sRGB
- profile as an <code>iCCP</code> chunk in the output PNG instead of the
- <code>sRGB</code> chunk, exclude the <code>sRGB</code> chunk.</p>
-
- <p>The critical PNG chunks <code>IHDR</code>, <code>PLTE</code>,
- <code>IDAT</code>, and <code>IEND</code> cannot be excluded. Any such
- entries appearing in the list will be ignored.</p>
-
- <p>If the ancillary PNG <code>tRNS</code> chunk is excluded and the
- image has transparency, the PNG colortype is forced to be 4 or 6
- (GRAY_ALPHA or RGBA). If the image is not transparent, then the
- <code>tRNS</code> chunk isn't written anyhow, and there is no effect
- on the PNG colortype of the output image.</p>
-
- <p>The <a href="../command-line-options/index.html#strip">-strip</a>
- option does the equivalent of the following for PNG output:</p>
-
- <pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-define png:exclude-chunk=EXIF,iCCP,iTXt,sRGB,tEXt,zCCP,zTXt,date</code></pre>
-
- <p>The default behavior is to include all known PNG ancillary chunks
- plus ImageMagick's private <code>vpAg</code> ("virtual page") chunk,
- and to exclude all PNG chunks that are unknown to ImageMagick,
- regardless of their PNG "copy-safe" status as described in the
- PNG specification.</p>
-
- <p>Any chunk names that are not known to ImageMagick are ignored
- if they appear in either the "include-chunk" or "exclude-chunk" list.
- The ancillary chunks currently known to ImageMagick are
- <code>bKGD</code>, <code>cHRM</code>, <code>gAMA</code>, <code>iCCP</code>,
- <code>oFFs</code>, <code>orNT</code>, <code>pHYs</code>, <code>sRGB</code>, <code>tEXt</code>,
- <code>tRNS</code>, <code>vpAg</code>, and <code>zTXt</code>.</p>
-
- <p>You can also put <code>date</code> in the list to include or exclude
- the "Date:create" and "Date:modify" text chunks that ImageMagick normally
- inserts in the output PNG.</p></td>
- </tr>
-
- <tr>
- <td>png:ignore-crc[=<var>true</var>]</td>
- <td>When you know your image has no CRC or ADLER32 errors, this can speed
- up decoding. It is also helpful in debugging bug reports from "fuzzers".</td>
- </tr>
-
- <tr>
- <td>png:preserve-colormap[=<var>true</var>]</td>
- <td>Use the existing image->colormap. Normally the PNG encoder will
- try to optimize the palette, eliminating unused entries and putting
- the transparent colors first. If this flag is set, that behavior
- is suppressed.</td>
- </tr>
-
- <tr>
- <td>png:preserve-iCCP[=<var>true</var>]</td>
- <td>By default, the PNG decoder and encoder examine any ICC profile
- that is present, either from an <code>iCCP</code> chunk in the PNG
- input or supplied via an option, and if the profile is recognized
- to be the sRGB profile, converts it to the <code>sRGB</code> chunk.
- You can use <code>-define png:preserve-iCCP</code> to prevent
- this from happening; in such cases the <code>iCCP</code> chunk
- will be read or written and no <code>sRGB</code> chunk will be
- written. There are some ICC profiles that claim to be sRGB but
- have various errors that cause them to be rejected by libpng16; such
- profiles are recognized anyhow and converted to the <code>sRGB</code>
- chunk, but are rejected if the <code>-define png:preserve-iCCP</code>
- is present. Note that not all "sRGB" ICC profiles are recognized
- yet; we will add them to the list as we encounter them.</td>
- </tr>
-
- <tr>
- <td>png:swap-bytes[=<var>true</var>]</td>
- <td>The PNG specification requires that any multi-byte integers be stored
- in network byte order (MSB-LSB endian). This option allows you to
- fix any invalid PNG files that have 16-bit samples stored incorrectly
- in little-endian order (LSB-MSB). The "-define png:swap-bytes" option
- must appear before the input filename on the commandline. The swapping
- is done during the libpng decoding operation.</td>
- </tr>
-
- <tr>
- <td>ps:imagemask</td>
- <td>If the ps:imagemask flag is defined, the PS3 and EPS3 coders will
- create Postscript files that render bilevel images with the Postscript
- imagemask operator instead of the image operator.</td>
- </tr>
-
- <tr>
- <td>psd:additional-info=all|selective</td>
- <td>This option should only be used when converting from a PSD file to
- another PSD file. This should be placed after the image is read. The two
- options are 'all' and 'selective'. The 'selective' option will preserve
- all additional information that is not related to the geometry of the
- image. The 'all' option should only be used when the geometry of the
- image has not been changed. This option is helpful when transferring
- non-simple layers, such as adjustment layers from the input PSD file to
- the output PSD file. If this option is not used, the additional
- information will not be preserved. This define is available as of
- Imagemagick version 6.9.5-8.
- </td>
- </tr>
-
- <tr>
- <td>psd:alpha-unblend=off</td>
- <td>Disable new automatic un-blending of transparency with the base image
- for the flattened layer 0 before adding the alpha channel to the output
- image. This define must be placed before the input psd image. (Available
- as of IM 6.9.2.5). The automatic un-blending is new to IM 6.9.2.5 and
- prevents the transparency from being applied twice in the output
- image. This option should be set before reading the image.</td>
- </tr>
-
- <tr>
- <td>psd:preserve-opacity-mask=<var>true</var></td>
- <td>This option should only be used when converting from a PSD file to
- another PSD file. It will preserve the opacity mask of a layer and add it
- back to the layer when the image is saved. Setting this to 'true' will
- enable this feature. This define is available as of Imagemagick version
- 6.9.5-10.
- </td>
- </tr>
-
- <tr>
- <td>psd:write-layers=<var>false</var></td>
- <td>This option can be used to disable writing the layers of a PSD file.
- </td>
- </tr>
-
- <tr>
- <td>psd:replicate-profile=<var>true</var></td>
- <td>This option can be used to copy the image profile to all the images
- instead of only the first image that is returned.
- </td>
- </tr>
-
- <tr>
- <td>ptif:pyramid=<var>min-base</var>x<var>levels</var></td>
- <td>Specify the min-base and number of levels of the pyramid, e.g., 64x4.</td>
- </tr>
-
- <tr>
- <td>svg:parse-huge=<var>true</var></td>
- <td>Enable rendering of a very large SVG for which you trust the source.</td>
- </tr>
-
- <tr>
- <td>svg:substitute-entities=<var>true</var></td>
- <td>Enable entity substitution if you trust the source.</td>
- </tr>
-
- <tr>
- <td>tga:preserve-orientation=<var>true</var></td>
- <td>Preserve the image orientation.</td>
- </tr>
-
- <tr>
- <td>tga:write-footer=<var>true</var></td>
- <td>Enable writing of an empty optional footer.</td>
- </tr>
-
- <tr>
- <td>tiff:alpha=<var>associated|unassociated|unspecified</var></td>
- <td>Specify the alpha extra samples as associated, unassociated or
- unspecified.</td>
- </tr>
-
- <tr>
- <td>tiff:assume-alpha=<var>true|false</var></td>
- <td>Assume undeclared extra channels are alpha.</td>
- </tr>
-
- <tr>
- <td>tiff:endian=<var>msb|lsb</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>tiff:exif-properties=<var>false</var></td>
- <td>Disable reading the EXIF properties.</td>
- </tr>
-
- <tr>
- <td>tiff:fill-order=<var>msb|lsb</var></td>
- <td> </td>
- </tr>
-
- <tr>
- <td>tiff:peg-tables-mode=<var>0-3</var></td>
- <td>Set the TIFFTAG_JPEGTABLESMODE when the tiff file is written with
- jpeg compression</td>
- </tr>
-
- <tr>
- <td>tiff:gps-properties=<var>false</var></td>
- <td>Disable reading the GPS properties.</td>
- </tr>
-
- <tr>
- <td>tiff:ignore-layers=<var>true</var></td>
- <td>Ignore the Photoshop layers.</td>
- </tr>
-
- <tr>
- <td>tiff:ignore-tags=<var>comma-separate-list-of-tag-IDs</var></td>
- <td>Allow one or more tag ID values to be ignored.</td>
- </tr>
-
- <tr>
- <td>tiff:predictor=<var>[1, 2 or 3]</var></td>
- <td>A mathematical operator that is applied to the image data before an
- encoding scheme is applied. The general idea is that subsequent pixels of
- an image resemble each other. Thus, subtracting the information from a
- pixel that is already contained in previous one is likely to reduce its
- information density considerably and aid subsequent compression.
- 1 = No prediction scheme used before coding. 2 = Horizontal differencing.
- 3 = Floating point horizontal differencing.</td>
- </tr>
-
- <tr>
- <td>tiff:preserve-compression=<var>true</var></td>
- <td>Preserve compression of the source image.</td>
- </tr>
-
- <tr>
- <td>tiff:rows-per-strip=<var>value</var></td>
- <td>Set the number of rows per strip.</td>
- </tr>
-
- <tr>
- <td>tiff:tile-geometry=<var>WxH</var></td>
- <td>Set the tile size for pyramid tiffs. Requires the suffix
- PTIF: before the outputname.</td>
- </tr>
-
- <tr>
- <td>uhdr:gainmap-gamma=<var>value</var></td>
- <td>Set gainmap image encoding gamma. Must be greater than 0.0. Used during
- encoding. Optional. Default value is 1.0.</td>
- </tr>
-
- <tr>
- <td>uhdr:gainmap-quality=<var>value</var></td>
- <td>Set gainmap image encoding quality factor. The valid range is 1 to 100,
- with 1 indicating lowest image quality or highest compression and 100
- indicating best quality or least effective compression. Used during
- encoding. Optional. Default value is 95.</td>
- </tr>
-
- <tr>
- <td>uhdr:gainmap-max-content-boost=<var>value</var></td>
- <td>Specify the maximum allowed ratio of the linear luminance for the target
- HDR rendition relative to (divided by) that of the SDR image, at a given
- pixel. In other words, this specifies how much brighter a pixel can get,
- when shown on an HDR display, relative to the SDR rendition. Must be
- greater than 0.0. Used during encoding. Optional. If not configured,
- this is computed dynamically based on the input.</td>
- </tr>
-
- <tr>
- <td>uhdr:gainmap-min-content-boost=<var>value</var></td>
- <td>Specify the minimum allowed ratio of the linear luminance for the target
- HDR rendition relative to (divided by) that of the SDR image, at a given
- pixel. In other words, this specifies how much darker a pixel can get,
- when shown on an HDR display, relative to the SDR rendition. Must be
- greater than 0.0. Used during encoding. Optional. If not configured,
- this is computed dynamically based on the input.</td>
- </tr>
-
- <tr>
- <td>uhdr:hdr-color-gamut=<var>{bt709|display_p3|bt2100}</var></td>
- <td>Set input HDR intent color gamut. Used during encoding. Required.</td>
- </tr>
-
- <tr>
- <td>uhdr:hdr-color-transfer=<var>{hlg|pq|linear}</var></td>
- <td>Set input HDR intent color transfer. Used during encoding. Required.</td>
- </tr>
-
- <tr>
- <td>uhdr:output-color-transfer=<var>{hlg|pq|linear|srgb}</var></td>
- <td>Set the target display transfer characteristics on which the
- ultrahdr image is rendered. Used during decoding. Required.
- If <em>srgb</em>, only sdr intent is decoded and sent as output,
- otherwise, sdr intent and gainmap are decoded, combined into
- hdr image and sent as output.</td>
- </tr>
-
- <tr>
- <td>uhdr:sdr-color-gamut=<var>{bt709|display_p3|bt2100}</var></td>
- <td>Set input SDR intent color gamut. Used during encoding. Required.</td>
- </tr>
-
- <tr>
- <td>uhdr:uhdr:target-display-peak-brightness=<var>value</var></td>
- <td>Peak brightness refers to the maximum brightness level that a display can achieve. This is important for accurately representing bright highlights in HDR content.</td>
- </tr>
-
- <tr>
- <td>video:intermediate-format=<var>{pam,webp}</var></td>
- <td>Set the video intermediate format option of <code>ffmpeg</code>.</td>
- </tr>
-
- <tr>
- <td>video:pixel-format=<var>value</var></td>
- <td>Set the pixel format option of <code>ffmpeg</code>.</td>
- </tr>
-
- <tr>
- <td>video:vsync=<var>value</var></td>
- <td>Set the vsync option of <code>ffmpeg</code>.</td>
- </tr>
-
- <tr>
- <td colspan=2><p></p></td>
- </tr>
-
- <tr>
- <td colspan=2><p></p></td>
- </tr>
-
- <tr>
- <th align="center" colspan=2>PSEUDO-IMAGE FORMATS</th>
- </tr>
-
- <tr>
- <td>caption:max-pointsize=<var>pointsize</var></td>
- <td>Limit the maximum point size</td>
- </tr>
-
- <tr>
- <td>caption:split=<var>boolean</var></td>
- <td>split text if required to fit caption on canvas</td>
- </tr>
-
- <tr>
- <td>gradient:angle=<var>angle (in degrees)</var></td>
- <td>For a linear gradient, this specifies the direction of
- the gradient going from color1 to color2 in a clockwise
- positive manner relative to north (up). For a radial
- gradient, this specifies the rotation of the gradient in a
- clockwise positive manner from its normal X-Y orientation.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>gradient:bounding-box=<var>WxH+X+Y</var></td>
- <td>Limit the gradient to a larger or smaller region than
- the image dimensions. If the region defined by the bounding
- box is smaller than the image, then color1 will be the color
- of the background.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>gradient:center=<var>x,y</var></td>
- <td>Specify the coordinates of the center point for the
- radial gradient. The default is the center of the image.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>gradient:direction=<var>value</var></td>
- <td>Specify the direction of the linear gradient towards
- the top/bottom/left/right or diagonal corners. The choices are:
- NorthWest, North, Northeast, West, East, SouthWest, South, SouthEast.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>gradient:extent=<var>value</var></td>
- <td>Specify the shape of an image centered radial gradient.
- The choices are: Circle, Diagonal, Ellipse, Maximum, Minimum.
- Circle and Maximum draw a circular radial gradient even for
- rectangular shaped images of radius equal to the larger of
- the half-width and half-height of the image. The Circle and
- Maximum options are both equivalent to the default radial
- gradient. The Minimum option draws a circular radial gradient
- even for rectangular shaped images of radius equal to the
- smaller of the half-width and half-height of the image.
- The Diagonal option draws a circular radial gradient even
- for rectangular shaped images of radius equal to the
- half-diagonal of the image. The Ellipse options draws an
- elliptical radial gradient for rectangular shaped images of
- radii equal to half the width and half the height of the image.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>gradient:radii=<var>x,y</var></td>
- <td>Specify the x and y radii of the gradient. If the
- x radius and the y radius are equal, the shape of the
- radial gradient will be a circle. If they differ, then
- the shape will be an ellipse. The default values are the
- maximum of the half width and half height of the image.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>gradient:vector=<var>x1,y1,x2,y2</var></td>
- <td>Specify the direction of the linear gradient going from
- vector1 (x1,y1) to vector2 (x2,y2). Color1 (fromColor) will be
- located at vector position x1,y1 and color2 (toColor) will be
- located at vector position x2,y2.
- Supported in Imagemagick 6.9.2-5.</td>
- </tr>
-
- <tr>
- <td>histogram:unique-colors=<var>false</var></td>
- <td>Suppress the textual listing of the image's unique colors.</td>
- </tr>
-
- <tr>
- <td>pango:align=<var>left|center|right</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:auto-dir=<var>true|false</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:ellipsize=<var>start|middle|end</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:gravity-hint=<var>natural|strong|line</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:hinting=<var>none|auto|full</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:indent=<var>points</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:justify=<var>true|false</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:language=<var>en_US|others</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:markup=<var>true|false</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:single-paragraph=<var>true|false</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pango:wrap=<var>word|char|word-char</var></td>
- <td></td>
- </tr>
-
- <tr>
- <td>pixel:compliance=<var>value</var></td>
- <td>Set the "pixel:" output format according to several standards.
- The choices are SVG, None, Undefined, MVG, X11, XPM. The default
- list values for (s)RGB colors in the form of (s)rgb(r,g,b) or
- (s)rgba(r,g,b,a). Color names will no longer be presented. For sRGB or
- RGB colors, the SVG, X11, XPM and None options lists color names,
- if they exist. The MVG and Undefined options list hex values. When
- colors are presented or converted to hue-based colorspaces, the values
- listed will be integers for hue and percents for the other two components.
- For other colorspaces, values may be listed as either percents or
- fractional value. Setting the depth to 8 will limit values to the 8-bit
- range, except for hue-based colors.</td>
- </tr>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Defines</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Maximize image processing with the -define command-line option, tailor coders/decoders, and control operations with precision for optimal results.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <tr>
- <td>txt:compliance=<var>value</var></td>
- <td>Set the "txt:" format for the values in parentheses according to
- several standards. The choices are svg, none, undefined, mvg, x11, xpm.
- The default will list values for (s)RGB colors in the quantum range.
- The SVG, X11, XPM, MVG and None options lists values in the 8-bit range
- for all Q-level compiles. The undefined option also lists values in the
- quantum range. When colors are presented or converted to hue-based
- colorspaces, the values listed will be integers for hue and percents for
- the other two components. For other colorspaces, values may be listed as
- either percents or fractional value. Setting the depth to 8 will limit
- values to the 8-bit range, except for hue-based colors.</td>
- </tr>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Lead Section -->
+ <div class="row mb-4">
+ <div class="col-lg-10 mx-auto text-center">
+ <p class="lead text-body-secondary fs-5">
+ The <a href="../command-line-options/index.html#define" class="text-decoration-none fw-semibold">-define</a> command-line option adds specific global settings generally used to control coders and image processing operations.
+ </p>
+ </div>
+ </div>
- <tr>
- <td>webp:<var>tag</var>=<var>value</var></td>
- <td>WebP has a plethora of defines detailed on this <a href="../webp/index.html">page</a>.</td>
- </tr>
+ <!-- Overview Details Card -->
+ <div class="card im-card p-4 mb-4 bg-body-tertiary">
+ <div class="row g-4">
+ <div class="col-md-6">
+ <h6 class="fw-bold mb-2"><i class="bi bi-info-circle text-primary me-2"></i>About Definitions</h6>
+ <p class="small text-body-secondary mb-2">
+ This option creates one or more definitions for coders and decoders while reading and writing image data. Definitions control file format coder modules and image processing operations beyond normal options.
+ </p>
+ <p class="small text-body-secondary mb-0">
+ Defined settings appear in <a href="../command-line-options/index.html#verbose"><code>-verbose</code></a> information ("<code>info:</code>" output format) as <strong>Artifacts</strong>.
+ </p>
+ </div>
+ <div class="col-md-6">
+ <h6 class="fw-bold mb-2"><i class="bi bi-sliders text-primary me-2"></i>Usage & Management</h6>
+ <ul class="list-unstyled small text-body-secondary d-flex flex-column gap-2 mb-0">
+ <li><i class="bi bi-check2 text-success me-1"></i> Missing values create empty-valued flags (on/off control).</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Use <code>-define keys</code> to remove previous definitions.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Use <code>+define "*"</code> to clear all existing definitions.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Equivalent settings can use <a href="../command-line-options/index.html#set"><code>-set "option:key" "value"</code></a> with <a href="../escape/index.html">Format Properties</a>.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
- <tr>
- <td>xmp:validate=<var>{true,false}</var></td>
- <td>By default, ImageMagick validates any XMP profile embedded in an image.</td>
- </tr>
+ <!-- Code Snippets -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-6">
+ <div class="terminal-card h-100">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">example-define.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick bilevel.tif -define ps:imagemask eps3:stencil.ps<br>
+ <span class="text-success">$</span> magick arrow.tga -set colorspace:auto-grayscale=off myArrow.tga
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="terminal-card h-100">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">registry-define.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-secondary"># Set temporary work path in registry</span><br>
+ <span class="text-success">$</span> magick -define registry:temporary-path=/data/tmp input.png output.png
+ </div>
+ </div>
+ </div>
+ </div>
-</table>
+ <!-- Defines Tables Section -->
+ <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-2">
+ <div class="d-flex align-items-center gap-2">
+ <i class="bi bi-table fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Recognized Defines</h2>
+ </div>
+ <span class="badge bg-secondary font-mono">Reference</span>
+ </div>
-</div>
+ <p class="text-body-secondary mb-4">
+ The options and keys are case-independent (converted to lowercase for decoders) while values are case-dependent. Here is the complete list of recognized defines:
+ </p>
+
+ <!-- Table Container -->
+ <div class="card im-card overflow-hidden">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col" style="width: 35%;">Define Key / Pattern</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <!-- SECTION: COMMAND-LINE DEFINES -->
+ <tr class="table-secondary">
+ <th colspan="2" class="text-dark fw-bold text-center">Command-line Defines</th>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">ashlar:best-fit</td>
+ <td class="text-body">align tiles on both the left and right edges.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">ashlar:tiles</td>
+ <td class="text-body">set the maximum number of image tiles to render per canvas.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">auto-threshold:verbose</td>
+ <td class="text-body">return derived threshold as the <code>auto-threshold:threshold</code> image property.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">color:illuminant</td>
+ <td class="text-body">reference illuminant, defaults to D65.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">colorspace:auto-grayscale=<var class="text-secondary">on|off</var></td>
+ <td class="text-body">Prevent automatic conversion to grayscale inside coders that support grayscale. Should be accompanied by -type truecolor.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compare:frequency-domain=<var class="text-secondary">boolean</var></td>
+ <td class="text-body">Certain similarity metrics operate in frequency domain when FFTW and HDRI are enabled. Use <code>-define compare:frequency-domain=false</code> for spatial equivalents.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compare:ssim-radius=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set the structural similarity index radius.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compare:ssim-sigma=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set the structural similarity index sigma.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compare:ssim-k1=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set the structural similarity index k1 argument.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compare:ssim-k2=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set the structural similarity index k2 argument.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compare:virtual-pixels=<var class="text-secondary">boolean</var></td>
+ <td class="text-body">Treat unmatched areas as virtual pixels or limit comparison to authentic pixels using <code>-define compare:virtual-pixels=false</code>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">complex:snr=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set the divide SNR constant <a href="../command-line-options/index.html#complex">-complex</a>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compose:args=<var class="text-secondary">arguments</var></td>
+ <td class="text-body">Set certain compose argument values. See <a href="../compose/index.html">Image Composition</a>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compose:clip-to-self=<var class="text-secondary">true|false</var></td>
+ <td class="text-body">Some <a href="../command-line-options/index.html#compose">-compose</a> methods can modify destination outside overlay area. Disabled by default.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compose:clamp=<var class="text-secondary">on|off</var></td>
+ <td class="text-body">Set each pixel below zero to zero and above quantum range to quantum range. Supported in ImageMagick 6.9.1-3+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compose:colorspace=<var class="text-secondary">colorspace</var></td>
+ <td class="text-body">Set the colorspace for colorize composite operator. Default is HCL.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">compose:compose=<var class="text-secondary">on|off</var></td>
+ <td class="text-body">Perform true mathematics of image channels without alpha composition effects.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:angle-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merges any region with equivalent ellipse angle smaller than value. Imagemagick 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:area-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merges any region with area smaller than value into surrounding region. Optional ranges e.g. 410-1600.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:background-id=<var class="text-secondary">object-id</var></td>
+ <td class="text-body">Identify background object. Imagemagick 7.0.9.21+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:circularity-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merge region with circularity smaller than value. Computed as 4*pi*area/perimeter^2. IM 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:diameter-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merge region with diameter smaller than value. Computed as sqrt(4*area/pi). IM 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:eccentricity-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merge region with equivalent ellipse eccentricity smaller than value. IM 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:exclude-header=<var class="text-secondary">true</var></td>
+ <td class="text-body">List objects without header. IM 7.0.9.21+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:keep=<var class="text-secondary">list-of-ids</var></td>
+ <td class="text-body">Comma and/or hyphenated list of id values to keep. IM 6.9.3-0+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:keep-colors=<var class="text-secondary">red;green;blue</var></td>
+ <td class="text-body">Keeps objects identified by color in semicolon separated list. IM 6.9.3-0+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:keep-top=<var class="text-secondary">number</var></td>
+ <td class="text-body">Keeps only top number of objects by area. IM 7.0.9.21+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:major-axis-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merge region with major axis diameter smaller than value. IM 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:mean-color=<var class="text-secondary">true</var></td>
+ <td class="text-body">Change output image from id values to mean color values. IM 6.9.2-8+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:minor-axis-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merge region with minor axis diameter smaller than value. IM 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:perimeter-threshold=<var class="text-secondary">value</var></td>
+ <td class="text-body">Merge region with perimeter smaller than value. IM 7.0.9.24+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:remove=<var class="text-secondary">list-of-ids</var></td>
+ <td class="text-body">Comma/hyphenated list of id values to remove. IM 6.9.2-9+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:remove-colors=<var class="text-secondary">red;green;blue</var></td>
+ <td class="text-body">Remove objects identified by color in semicolon list. IM 6.9.3-0+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">connected-components:verbose=<var class="text-secondary">true</var></td>
+ <td class="text-body">Lists id, bounding box, centroid, area, mean color for each region.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">convolve:scale=<var class="text-secondary">scale[!^] [,add] [%]</var></td>
+ <td class="text-body">Define kernel scaling. Flag ! auto scales to full range. Flag ^ assures zero-summing. Origin addition adds value to center pixel.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">deskew:auto-crop=<var class="text-secondary">true</var></td>
+ <td class="text-body">Auto crop image after deskewing.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">delegate:bimodal=<var class="text-secondary">true</var></td>
+ <td class="text-body">Specify direct conversion from Postscript to PDF.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">distort:scale=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set output scaling factor for <a href="../command-line-options/index.html#distort">-distort</a>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">distort:viewport=<var class="text-secondary">WxH+X+Y</var></td>
+ <td class="text-body">Set viewport for <a href="../command-line-options/index.html#distort">-distort</a>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dither:diffusion-amount=<var class="text-secondary">X%</var></td>
+ <td class="text-body">Set amount of diffusion for Floyd-Steinberg diffusion.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">exif:sync-image=false</td>
+ <td class="text-body">Ignore EXIF profile for image resolution syncing.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filename:literal=<var class="text-secondary">true</var></td>
+ <td class="text-body">Bypass interpreting embedded formatting characters and use filename literally.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:option=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set filter option for <a href="../command-line-options/index.html#resize">-resize</a>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:b=<var class="text-secondary">value</var></td>
+ <td class="text-body">Redefine spline factor for cubic filters (Mitchell-Netravali definition).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:blur=<var class="text-secondary">factor</var></td>
+ <td class="text-body">Scale X axis of filter (> 1.0 blurry, < 1.0 sharp). Use with Gaussian-like filters.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:c=<var class="text-secondary">value</var></td>
+ <td class="text-body">Redefine Keys alpha factor for cubic filters.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:kaiser-alpha=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set Kaiser window alpha value (equivalent to kaiser-beta when multiplied by PI).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:kaiser-beta=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set Kaiser window beta value. Default is 6.5.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:lobes=<var class="text-secondary">count</var></td>
+ <td class="text-body">Set number of lobes for Sinc/Bessel filter (support range).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:sigma=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set sigma value for Gaussian filter. Default is 0.5.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:support=<var class="text-secondary">radius</var></td>
+ <td class="text-body">Set filter support radius.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:verbose=<var class="text-secondary">true</var></td>
+ <td class="text-body">Enable printing internal filter selection info to standard output.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:window=<var class="text-secondary">filter_function</var></td>
+ <td class="text-body">Specify filter function for windowing IIR filters Sinc and Jinc.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">filter:window-support=<var class="text-secondary">radius</var></td>
+ <td class="text-body">Scale windowing function to this size.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">h:format=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set image encoding format for C-style header. Defaults to GIF (PseudoClass) and PNM (DirectClass).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">fourier:normalize=<var class="text-secondary">inverse</var></td>
+ <td class="text-body">Set FFT/IFT normalization location for <a href="../command-line-options/index.html#fft">+-fft</a> / <a href="../command-line-options/index.html#ift">+-ift</a>. Default is forward.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">frames:step</td>
+ <td class="text-body">Step interval when selecting image frames (e.g., step 2 skips alternating frames).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">fx:debug=true</td>
+ <td class="text-body">Debug <code>-fx</code> expression.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">hough-lines:accumulator=true</td>
+ <td class="text-body">Return accumulator image alongside lines image.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">identify:convex-hull=<var class="text-secondary">true</var></td>
+ <td class="text-body">Display convex hull & minimum bounding box.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">identify:locate=<var class="text-secondary">value</var></td>
+ <td class="text-body">Display minimum or maximum pixel locations (default: maximum).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">identify:limit=<var class="text-secondary">value</var></td>
+ <td class="text-body">Maximum pixel locations to display with <code>identify:locate</code>.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">image:frames</td>
+ <td class="text-body">Select specific frames from multi-image formats (e.g., <code>0-3</code>).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">json:features</td>
+ <td class="text-body">Include features in verbose JSON information.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">kmeans:seed-colors=<var class="text-secondary">color-list</var></td>
+ <td class="text-body">Initialize colors with semicolon-delimited list of seed colors.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">magick:format=<var class="text-secondary">value</var></td>
+ <td class="text-body">Equivalent to <code>h:format=format</code> for C-style headers.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">magnify:method=<var class="text-secondary">value</var></td>
+ <td class="text-body">Choose pixel art magnification method (eagle2X, scale2X default, xbr2X, etc.).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">modulate:colorspace=<var class="text-secondary">colorspace</var></td>
+ <td class="text-body">Define colorspace for <a href="../command-line-options/index.html#modulate">-modulate</a> (default HSL).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">morphology:compose=<var class="text-secondary">method</var></td>
+ <td class="text-body">Specify how to merge multiple <a href="#morphology">-morphology</a> kernels.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">morphology:showKernel=<var class="text-secondary">1</var></td>
+ <td class="text-body">Output kernel information to standard error.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">phash:colorspaces=<var class="text-secondary">list</var></td>
+ <td class="text-body">Specify up to six alternative colorspaces for perceptual hash (IM 7.0.3-8+).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">phash:normalize=<var class="text-secondary">true</var></td>
+ <td class="text-body">Normalize phash metric.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">pixel:compliance=<var class="text-secondary">standard</var></td>
+ <td class="text-body">Format color values based on standard compliance (svg, mvg, x11, etc.).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">png:bit-depth=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set PNG bit depth.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">png:chunk-malloc-max=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set maximum chunk size.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">profile:skip=<var class="text-secondary">names</var></td>
+ <td class="text-body">Skip named profiles (ICC, EXIF, XMP, etc.) when reading image. Use <code>skip="*"</code> for all.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">precision:highres-transform=<var class="text-secondary">true</var></td>
+ <td class="text-body">Increase profile transform precision using floating point.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">preserve-timestamp=<var class="text-secondary">true|false</var></td>
+ <td class="text-body">Preserve file timestamp (<code>mogrify</code> only).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">q-table=<var class="text-secondary">file.xml</var></td>
+ <td class="text-body">Custom JPEG quantization tables.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">quantum:format=<var class="text-secondary">type</var></td>
+ <td class="text-body">Specify <code>floating-point</code> or <code>signed</code> format for raw files or HDRI preservation.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">quantum:maximum=<var class="text-secondary">value</var></td>
+ <td class="text-body">Maximum value for formats like DCM (defaults to QuantumRange).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">quantum:minimum=<var class="text-secondary">value</var></td>
+ <td class="text-body">Minimum value for formats like DCM (defaults to zero).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">quantum:polarity=<var class="text-secondary">interpretation</var></td>
+ <td class="text-body">Set TIFF photometric-interpretation (min-is-black or min-is-white).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">registry:<var class="text-secondary">attr</var>=<var class="text-secondary">val</var></td>
+ <td class="text-body">Set image registry attributes.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">registry:date:precision=<var class="text-secondary">len</var></td>
+ <td class="text-body">Set max characters printed for timestamps.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">registry:option:pedantic=<var class="text-secondary">bool</var></td>
+ <td class="text-body">Interpret ambiguous command-line options as options instead of filenames when true.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">registry:precision=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set max significant digits printed.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">resample:verbose=<var class="text-secondary">true</var></td>
+ <td class="text-body">Output EWA cylindrical filter lookup table for debugging.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">sample:offset=<var class="text-secondary">geometry</var></td>
+ <td class="text-body">Sampling point location expressed as percentages.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">shepards:power=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set exponent in Shepard's distortion (default: 2).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">stream:buffer-size=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set stream buffer size (0 for unbuffered I/O).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">trim:percent-background=<var class="text-secondary">X%</var></td>
+ <td class="text-body">Tolerance amount of background tolerated in an edge.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">trim:edges=<var class="text-secondary">edges</var></td>
+ <td class="text-body">Only trim specified edges (north,east,south,west).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">trim:minSize=<var class="text-secondary">geometry</var></td>
+ <td class="text-body">Limit trim to specified size.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">type:features=<var class="text-secondary">string</var></td>
+ <td class="text-body">Add font feature for RAQM delegate during complex text layout.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">type:hinting=<var class="text-secondary">false</var></td>
+ <td class="text-body">Disable font hinting.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">white-balance:vibrance=<var class="text-secondary">value</var></td>
+ <td class="text-body">Change color vibrance of a & b channels.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">x:screen=<var class="text-secondary">true</var></td>
+ <td class="text-body">Obtain image from root window.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">x:silent=<var class="text-secondary">true</var></td>
+ <td class="text-body">Turn off beep when importing image.</td>
+ </tr>
+
+ <!-- SECTION: IMAGE FORMATS -->
+ <tr class="table-secondary">
+ <th colspan="2" class="text-dark fw-bold text-center">Image Formats</th>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">bmp3:alpha=<var class="text-secondary">true|false</var></td>
+ <td class="text-body">Include alpha channel when writing BMP.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">bmp:format=<var class="text-secondary">value</var></td>
+ <td class="text-body">Valid values: bmp2, bmp3, bmp4. Useful with mogrify.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">bmp:subtype=<var class="text-secondary">value</var></td>
+ <td class="text-body">BMP channel depth subtypes (RGB555, RGB565, ARGB4444, ARGB1555).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">{caption,label}:max-pointsize=<var class="text-secondary">val</var></td>
+ <td class="text-body">Set bounding pointsize for maximum fit.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dcm:display-range=<var class="text-secondary">reset</var></td>
+ <td class="text-body">Set display range to min/max pixel values for DCM.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dcm:fix-byte-order=<var class="text-secondary">true</var></td>
+ <td class="text-body">Fix incorrect byte order when reading DCM pixels.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dcm:rescale=<var class="text-secondary">true</var></td>
+ <td class="text-body">Enable interpretation of rescale slope and intercept.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dcm:window=<var class="text-secondary">CxW</var></td>
+ <td class="text-body">Specify DCM window center and width.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dds:cluster-fit=<var class="text-secondary">true|false</var></td>
+ <td class="text-body">Enable DDS cluster-fit.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dds:compression=<var class="text-secondary">dxt1|dxt5|none</var></td>
+ <td class="text-body">Set DDS compression.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dds:mipmaps=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set DDS number of mipmaps.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dds:weight-by-alpha=<var class="text-secondary">true|false</var></td>
+ <td class="text-body">Enable DDS alpha weighting.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:max-raw-memory=<var class="text-secondary">value</var></td>
+ <td class="text-body">Stop processing if raw buffer exceeds megabytes (default: 8192).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:no-auto-bright=<var class="text-secondary">true</var></td>
+ <td class="text-body">Disable histogram-based white level.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:output-color=<var class="text-secondary">value</var></td>
+ <td class="text-body">Select output colorspace (0-6).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:read-thumbnail=<var class="text-secondary">true</var></td>
+ <td class="text-body">Store embedded thumbnail as 'dng:thumbnail' profile.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:read-thumbnails=<var class="text-secondary">true</var></td>
+ <td class="text-body">Read embedded thumbnails as images instead of full raw image.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:use-auto-wb=<var class="text-secondary">true</var></td>
+ <td class="text-body">Compute white balance by averaging entire image.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dng:use-camera-wb=<var class="text-secondary">true</var></td>
+ <td class="text-body">Use camera-specified white balance (default: true).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">dot:layout-engine=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify layout engine for DOT format (e.g. <code>neato</code>).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">eps:use-cropbox=<var class="text-secondary">true</var></td>
+ <td class="text-body">Force ImageMagick to respect crop box.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">exr:color-type=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify color type for EXR format (RGB, RGBA, YC, Y, etc.).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">fpx:view=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify FlashPix viewing object and transform commands.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">ftxt:chsep=<var class="text-secondary">value</var></td>
+ <td class="text-body">Character separating channel values (default: ",").</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">ftxt:format=<var class="text-secondary">value</var></td>
+ <td class="text-body">Format string for reading/writing text.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">heic:chroma=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set HEIC chroma parameter ("420", "422", "444").</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">heic:cicp=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set HEIC color primaries, transfer characteristics, and matrix.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">heic:preserve-orientation=<var class="text-secondary">true</var></td>
+ <td class="text-body">Preserve original EXIF orientation during HEIC decoding.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">heic:primary-image=<var class="text-secondary">true</var></td>
+ <td class="text-body">Read only primary image of HEIC/AVIF container.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">heic:speed=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set HEIC speed parameter (0-9, default 5).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">icon:auto-resize</td>
+ <td class="text-body">Automatically store multiple sizes when writing ICO (requires 256x256 input).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">json:moments</td>
+ <td class="text-body">Include image moments in verbose JSON information.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jp2:layer-number=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set max quality layers to decode for JPEG-2000.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jp2:rate=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify compression factor (0.0 to 1.0, 1.0 = lossless), overriding -quality.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jpeg:arithmetic-coding=<var class="text-secondary">on|off</var></td>
+ <td class="text-body">Enable/disable Huffman optimization.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jpeg:dct-method=<var class="text-secondary">value</var></td>
+ <td class="text-body">Choose DCT method (default, fastest, float, ifast, islow).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jpeg:extent=<var class="text-secondary">value</var></td>
+ <td class="text-body">Restrict max JPEG file size (e.g., <code>400KB</code>).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jpeg:high-bit-depth=<var class="text-secondary">on|off</var></td>
+ <td class="text-body">Produce 12-bit or 16-bit JPEG images if source depth exceeds 8 bits.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jpeg:size=<var class="text-secondary">geometry</var></td>
+ <td class="text-body">Set size hint for downscaling large JPEGs efficiently.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jxl:decoding-speed=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set JPEG XL decoding speed (0 to 4).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">jxl:effort=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set JPEG XL encoding effort (3 to 9).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">minimum-bounding-box:orientation=<var class="text-secondary">val</var></td>
+ <td class="text-body">Find smallest perpendicular distance (horizontal or vertical).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">pdf:author=<var class="text-secondary">author</var></td>
+ <td class="text-body">Set PDF document author.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">pdf:fit-page=<var class="text-secondary">geometry</var></td>
+ <td class="text-body">Specify scaling dimensions when reading PDF.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">pdf:thumbnail=<var class="text-secondary">false</var></td>
+ <td class="text-body">Generate image thumbnails when saving PDF.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">png:color-type=<var class="text-secondary">value</var></td>
+ <td class="text-body">Force PNG bit-depth and color-type without quality loss.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">png:compression-level=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set zlib compression level (0 through 9).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">png:format=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify PNG format variant (png8, png24, png32, png48, png64, png00).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">png:include-chunk=<var class="text-secondary">value</var></td>
+ <td class="text-body">Ancillary chunks to be included/excluded from PNG output.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">ps:imagemask</td>
+ <td class="text-body">Render bilevel images using PostScript <code>imagemask</code> operator.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">psd:additional-info=<var class="text-secondary">all|selective</var></td>
+ <td class="text-body">Preserve non-geometric additional PSD information between conversions. IM 6.9.5-8+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">ptif:pyramid=<var class="text-secondary">min-base</var>x<var class="text-secondary">levels</var></td>
+ <td class="text-body">Specify pyramid parameters for PTIF (e.g., 64x4).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">svg:parse-huge=<var class="text-secondary">true</var></td>
+ <td class="text-body">Enable rendering of very large trusted SVGs.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">tga:preserve-orientation=<var class="text-secondary">true</var></td>
+ <td class="text-body">Preserve TGA image orientation.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">tiff:alpha=<var class="text-secondary">mode</var></td>
+ <td class="text-body">Specify alpha extra samples (associated, unassociated, unspecified).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">tiff:predictor=<var class="text-secondary">value</var></td>
+ <td class="text-body">Apply mathematical predictor before compression (1=none, 2=horizontal, 3=floating-point).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">uhdr:gainmap-quality=<var class="text-secondary">value</var></td>
+ <td class="text-body">Set UltraHDR gainmap encoding quality (1 to 100).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">video:intermediate-format=<var class="text-secondary">format</var></td>
+ <td class="text-body">Set video intermediate format option for <code>ffmpeg</code> (pam, webp).</td>
+ </tr>
+
+ <!-- SECTION: PSEUDO-IMAGE FORMATS -->
+ <tr class="table-secondary">
+ <th colspan="2" class="text-dark fw-bold text-center">Pseudo-Image Formats</th>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">caption:max-pointsize=<var class="text-secondary">pointsize</var></td>
+ <td class="text-body">Limit maximum point size for caption layout.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">caption:split=<var class="text-secondary">boolean</var></td>
+ <td class="text-body">Split text if required to fit caption on canvas.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:angle=<var class="text-secondary">angle</var></td>
+ <td class="text-body">Specify direction of linear gradient or rotation of radial gradient. IM 6.9.2-5+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:bounding-box=<var class="text-secondary">WxH+X+Y</var></td>
+ <td class="text-body">Limit gradient region. IM 6.9.2-5+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:center=<var class="text-secondary">x,y</var></td>
+ <td class="text-body">Specify coordinates of center point for radial gradient. IM 6.9.2-5+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:direction=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify linear gradient direction (NorthWest, North, etc.). IM 6.9.2-5+.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:extent=<var class="text-secondary">value</var></td>
+ <td class="text-body">Specify shape of centered radial gradient (Circle, Diagonal, Ellipse, Maximum, Minimum).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:radii=<var class="text-secondary">x,y</var></td>
+ <td class="text-body">Specify X and Y radii of gradient.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">gradient:vector=<var class="text-secondary">x1,y1,x2,y2</var></td>
+ <td class="text-body">Specify direction vector from start to end color positions.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">histogram:unique-colors=<var class="text-secondary">false</var></td>
+ <td class="text-body">Suppress textual listing of image's unique colors.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">pango:<var class="text-secondary">tag</var>=<var class="text-secondary">value</var></td>
+ <td class="text-body">Configure Pango layout properties (align, ellipsize, justify, wrap, etc.).</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">webp:<var class="text-secondary">tag</var>=<var class="text-secondary">value</var></td>
+ <td class="text-body">WebP specific encoding options. See WebP documentation.</td>
+ </tr>
+ <tr>
+ <td class="fw-semibold text-primary">xmp:validate=<var class="text-secondary">bool</var></td>
+ <td class="text-body">Validate embedded XMP profiles (enabled by default).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/develop/index.html b/www/develop/index.html
index 8e08bd8e7..c6e7394a4 100644
--- a/www/develop/index.html
+++ b/www/develop/index.html
@@ -7,399 +7,649 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <title>ImageMagick | Develop</title>
- <meta name="description" content="Explore ImageMagick development resources with bindings for C, C++, Java, Python, PHP, Ruby, .NET, Node.js, and more. Learn how to integrate powerful image conversion, composition, and editing capabilities into your applications using MagickCore, MagickWand, and language-specific interfaces.">
+ <title>ImageMagick | Develop & Language APIs</title>
+ <meta name="description" content="Explore ImageMagick development resources with bindings for C, C++, Python, PHP, .NET, Node.js, and more. Integrate image processing directly into your applications.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
- <meta property="og:title" content="ImageMagick | Develop">
- <meta property="og:description" content="Explore ImageMagick development resources with bindings for C, C++, Java, Python, PHP, Ruby, .NET, Node.js, and more. Learn how to integrate powerful image conversion, composition, and editing capabilities into your applications using MagickCore, MagickWand, and language-specific interfaces.">
+
+ <!-- Open Graph -->
+ <meta property="og:title" content="ImageMagick | Develop & Language APIs">
+ <meta property="og:description" content="Explore ImageMagick development resources with bindings for C, C++, Python, PHP, .NET, Node.js, and more. Integrate image processing directly into your applications.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Develop">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Develop",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/develop/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore ImageMagick development resources with bindings for C, C++, Python, PHP, .NET, Node.js, and more. Integrate image processing directly into your applications.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link active"" href="index.html">Develop</a>
+ <a class="nav-link active" href="index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/develop/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/develop/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Develop</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Develop & Language APIs</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore ImageMagick development resources with bindings for C, C++, Python, PHP, .NET, Node.js, and more. Integrate image processing directly into your applications.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Introduction & Quick Jump Section -->
+<section class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border">
+ <p class="lead mb-4">
+ The functionality of ImageMagick can be driven from the command-line or integrated natively into your favorite programming language. Choose from bindings for C, C++, Python, PHP, .NET, Node.js, Rust, and many others to manipulate or create images dynamically.
+ </p>
+
+ <!-- Language Anchor Pills -->
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Jump to Language Binding</h6>
+ <div class="d-flex flex-wrap gap-2">
+ <a href="#c" class="btn btn-sm btn-outline-primary">C / C++</a>
+ <a href="#dot-net" class="btn btn-sm btn-outline-secondary">.NET</a>
+ <a href="#javascript" class="btn btn-sm btn-outline-secondary">JavaScript / WASM</a>
+ <a href="#node.js" class="btn btn-sm btn-outline-secondary">Node.js</a>
+ <a href="#php" class="btn btn-sm btn-outline-secondary">PHP</a>
+ <a href="#python" class="btn btn-sm btn-outline-secondary">Python</a>
+ <a href="#ruby" class="btn btn-sm btn-outline-secondary">Ruby</a>
+ <a href="#rust" class="btn btn-sm btn-outline-secondary">Rust</a>
+ <a href="#go" class="btn btn-sm btn-outline-secondary">Go</a>
+ <a href="#java" class="btn btn-sm btn-outline-secondary">Java</a>
+ <a href="#perl" class="btn btn-sm btn-outline-secondary">Perl</a>
+ </div>
+ </div>
+</section>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">The functionality of ImageMagick is typically utilized from the <a href="../command-line-processing/index.html">command-line</a> or you can use the features from programs written in your favorite language. Choose from these interfaces:
-<a href="index.html#ada">G2F</a> (Ada),
-<a href="index.html#c">MagickCore</a> (C),
-<a href="index.html#c">MagickWand</a> (C),
-<a href="index.html#ch">ChMagick</a> (Ch),
-<a href="index.html#c__">Magick++</a> (C++),
-<a href="index.html#java">JMagick</a> (Java),
-<a href="index.html#javascript">WASM-ImageMagick</a> (Javascript/Typescript),
-<a href="index.html#julia">JuliaIO</a> (Julia),
-<a href="index.html#kmagick">KMagick</a> (Kotlin),
-<a href="index.html#lisp">L-Magick</a> (Lisp),
-<a href="index.html#lua">Lua</a> (LuaJIT),
-<a href="index.html#neko">NMagick</a> (Neko/haXe),
-<a href="index.html#dot-net">Magick.NET</a> (.NET),
-<a href="index.html#node.js">Node-magickwand</a> (Node.js),
-<a href="index.html#pascal">PascalMagick</a> (Pascal),
-<a href="index.html#perl">PerlMagick</a> (Perl),
-<a href="index.html#php">IMagick</a> (PHP),
-<a href="index.html#python">PythonMagick</a> (Python),
-<a href="index.html#r">magick</a> (R),
-<a href="index.html#ruby">RMagick</a> (Ruby),
-<a href="index.html#tcl">TclMagick</a> (Tcl/TK),
-or <a href="index.html#wasm">WASM</a>.
-With a language interface, use ImageMagick to modify or create images dynamically and <var>automagically</var>.</p>
-<p>Choose from these language interfaces:</p>
-
-<dl class="row">
- <dt class="col-md-4"><a class="anchor" id="c"></a>C</dt>
- <dd class="col-md-8">Use the thread-safe <a href="../magick-wand/index.html">MagickWand</a> library to convert, compose, and edit images from the C language. There is also the low-level thread-safe <a href="../magick-core/index.html">MagickCore</a> library for wizard-level developers. The MagickCache API is a development library to utilize an efficient <a href="https://github.com/ImageMagick/MagickCache#readme">image cache</a>.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="ch"></a>Ch</dt>
- <dd class="col-md-8"><a href="https://download.imagemagick.org/archive/ch/">ChMagick</a> is a <a href="http://www.softintegration.com/">Ch</a> binding to the MagickCore and MagickWand API. Ch is an embeddable C/C++ interpreter for cross-platform scripting.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="c__"></a>C++</dt>
- <dd class="col-md-8"><a href="../magick%2b%2b/index.html">Magick++</a> provides a thread-safe object-oriented C++ interface to ImageMagick. See <a href="../magick%2b%2b/tutorial/Magick%2b%2b_tutorial.pdf">A Gentle Introduction to Magick++</a> for an introductory tutorial to Magick++. We include the <a href="../magick%2b%2b/tutorial/Magick%2b%2b_tutorial.odt">source</a> if you want to correct, enhance, or expand the tutorial.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="go"></a>GO</dt>
- <dd class="col-md-8"><a href="https://github.com/gographics/imagick">GoImagick</a> is a set of Go bindings to ImageMagick's MagickWand and MagickCore C APIs.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="java"></a>Java</dt>
- <dd class="col-md-8"><a href="https://jmagick.org/">JMagick</a> provides an object-oriented Java interface to ImageMagick. <a href="http://im4java.sourceforge.net/">Im4java</a> is a pure-java interface to the ImageMagick command-line.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="javascript"></a>Javascript/TypeScript</dt>
- <dd class="col-md-8"><a href="https://github.com/KnicKnic/WASM-ImageMagick">WASM-ImageMagick</a> Webassembly compilation of ImageMagick that allows serverless clientside bindings for Typescript and Javascript. Works in Progressive Web Apps.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="julia"></a>Julia</dt>
- <dd class="col-md-8"><a href="https://github.com/JuliaIO/ImageMagick.jl">JuliaIO</a> provides an object-oriented Julia interface to ImageMagick.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="kmagick"></a>KMagick</dt>
- <dd class="col-md-8"><a href="https://github.com/MolotovCherry/kmagick">KMagick</a> provides Kotlin bindings to ImageMagick.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="labview"></a>LabVIEW</dt>
- <dd class="col-md-8"><a href="https://lavag.org/files/file/48-lvoop-imagemagick-interface/">LVOOP ImageMagick</a> is an object-oriented LabVIEW interface to ImageMagick.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="lisp"></a>Lisp</dt>
- <dd class="col-md-8"><a href="http://common-lisp.net/project/cl-magick/">CL-Magick</a> provides a Common Lisp interface to the ImageMagick library.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="lua"></a>Lua</dt>
- <dd class="col-md-8"><a href="https://github.com/leafo/magick">Lua</a> bindings to ImageMagick for LuaJIT using FFI.</dd>
- <dt class="col-md-4"><a class="anchor" id="lua"></a> </dt>
- <dd class="col-md-8"><a href="https://github.com/isage/lua-imagick">Lua</a> bindings to ImageMagick for Lua using pure-C.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="neko"></a>Neko</dt>
- <dd class="col-md-8"><a href="https://code.google.com/archive/p/nmagick">NMagick</a> is a port of the ImageMagick library to the haXe and Neko platforms. It provides image manipulation capabilities to both web and desktop applications using Neko.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="dot-net"></a>.NET</dt>
- <dd class="col-md-8">Use <a href="https://github.com/dlemstra/Magick.NET">Magick.NET</a> to convert, compose, and edit images from Windows .NET.</dd>
- <dt class="col-md-4"><a class="anchor" id="dot-net"></a> </dt>
- <dd class="col-md-8"><a href="http://sourceforge.net/projects/imagemagickapp/">ImageMagickApp</a> is a .NET application written in C# that utilizes the ImageMagick command line to allow conversion of multiple image formats to different formats.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="node.js"></a>Node.js</dt>
- <dd class="col-md-8"><a href="https://www.npmjs.com/package/node-magickwand" rel="noopener noreferrer" target="_blank">Node-magickwand</a> is a full native port of the ImageMagick-7 C++ library to Node.js using SWIG Node-API. Unlike all other ImageMagick npm packages, it does not use the CLI to interact with the utilities, but offers direct access to the full C++ API. It supports both synchronous and multithreaded asynchronous operations, it is fully integrated with TypedArrays and it has full TypeScript support.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="pascal"></a>Pascal</dt>
- <dd class="col-md-8"><a href="https://wiki.freepascal.org/PascalMagick">PascalMagick</a> a Pascal binding for the MagickWand API and also the low-level MagickCore library. It works with Free Pascal / Lazarus and Delphi.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="perl"></a>Perl</dt>
- <dd class="col-md-8">Use <a href="../perl-magick/index.html">PerlMagick</a> to convert, compose, and edit images from the Perl language.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="php"></a>PHP</dt>
- <dd class="col-md-8"><a href="http://pecl.php.net/package/imagick">IMagick</a> is a native PHP extension to create and modify images using the ImageMagick API. Documentation for the extension is available <a href="https://www.php.net/imagick">here</a>, and a site showing examples is available at <a href="https://phpimagick.com/">PHPImagick.com</a>.</dd>
- <dt class="col-md-4"><a class="anchor" id="php"></a> </dt>
- <dd class="col-md-8"><a href="https://github.com/francodacosta/phmagick">phMagick</a> is a wrapper class for ImageMagick, wrapping the most common web image manipulation actions in easy to use functions, but allowing full access to ImageMagick's power by issuing system calls to it's command-line programs.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="python"></a>Python</dt>
- <dd class="col-md-8"><a href="https://docs.wand-py.org/en/latest/index.html">Wand</a> is a ctypes-based ImageMagick binding library for Python.</dd>
- <dt class="col-md-4"><a class="anchor" id="python"></a> </dt>
- <dd class="col-md-8"><a href="https://download.imagemagick.org/archive/python/">PythonMagick</a> is an object-oriented Python interface to ImageMagick.</dd>
- <dt class="col-md-4"><a class="anchor" id="python"></a> </dt>
- <dd class="col-md-8"><a href="http://www.assembla.com/wiki/show/pythonmagickwand">PythonMagickWand</a> is an object-oriented Python interface to MagickWand based on ctypes.</dd>
- <dt class="col-md-4"><a class="anchor" id="python"></a> </dt>
- <dd class="col-md-8"><a href="http://siptoolbox.sourceforge.net/">Scilab Image Processing</a> toolbox utilizes ImageMagick to do imaging tasks such as filtering, blurring, edge detection, thresholding, histogram manipulation, segmentation, mathematical morphology, color image processing, etc..</dd>
-
- <dt class="col-md-4"><a class="anchor" id="realbasic"></a>REALbasic</dt>
- <dd class="col-md-8">The <a href="http://www.monkeybreadsoftware.de/realbasic/plugin-imagemagick.shtml">MBS Realbasic ImageMagick</a> is a plugin that utilizes the power of ImageMagick from within the RealBasic environment.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="r"></a>R</dt>
- <dd class="col-md-8"> The <a href="https://cran.r-project.org/package=magick">magick</a> package wraps the Magick++ STL to provide vectorized image processing in R. Get started with using the package <a href="https://cran.r-project.org/web/packages/magick/vignettes/intro.html">vignette</a>.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="ruby"></a>Ruby</dt>
- <dd class="col-md-8"><a href="https://rmagick.github.io/">RMagick</a> is an interface between the Ruby programming language and the <a href="../magick-core/index.html">MagickCore</a> image processing libraries. Get started with RMagick by perusing the <a href="https://rmagick.github.io/">documentation</a>.</dd>
- <dt class="col-md-4"><a class="anchor" id="ruby"></a> </dt>
- <dd class="col-md-8"><a href="https://github.com/minimagick">MiniMagick</a> is a Ruby wrapper for ImageMagick command line. MiniMagick gives you convenient access to all the command line options ImageMagick supports.</dd>
-
- <dt class="col-md-4"><a class="anchor" id="rust"></a>Rust</dt>
- <dd class="col-md-8"><a href="https://github.com/nlfiedler/magick-rust">MagickRust</a> is a MagickWand bindings for the Rust language.</dd>
+<!-- Core Libraries Section -->
+<section id="c" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-cpu-fill fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Core C & C++ Libraries</h2>
+ </div>
+ <p class="text-body-secondary mb-4">Direct thread-safe native APIs for high-performance image processing applications.</p>
+
+ <div class="row g-4">
+ <div class="col-md-6">
+ <div class="card im-card p-4 h-100 border-primary">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h5 class="fw-bold mb-0 font-mono">MagickWand & MagickCore</h5>
+ <span class="badge bg-primary">C Native</span>
+ </div>
+ <p class="small text-body-secondary mb-3">
+ Use the thread-safe <a href="../magick-wand/index.html" class="text-decoration-none fw-medium">MagickWand</a> library to convert, compose, and edit images, or drop down to the low-level <a href="../magick-core/index.html" class="text-decoration-none fw-medium">MagickCore</a> API for wizard-level control.
+ </p>
+ <div class="mt-auto pt-2">
+ <a href="https://github.com/ImageMagick/MagickCache#readme" target="_blank" class="small text-decoration-none"><i class="bi bi-box-arrow-up-right me-1"></i> MagickCache API Docs</a>
+ </div>
+ </div>
+ </div>
- <dt class="col-md-4"><a class="anchor" id="tcl"></a>Tcl/Tk</dt>
- <dd class="col-md-8"><a href="https://download.imagemagick.org/archive/tcl/">TclMagick</a> a native Tcl-extension to the ImageMagick MagickWand API.</dd>
+ <div id="c__" class="col-md-6">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h5 class="fw-bold mb-0 font-mono">Magick++</h5>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">C++ OOP</span>
+ </div>
+ <p class="small text-body-secondary mb-3">
+ <a href="../magick%2b%2b/index.html" class="text-decoration-none fw-medium">Magick++</a> provides a thread-safe object-oriented C++ interface to ImageMagick.
+ </p>
+ <div class="mt-auto pt-2 d-flex gap-3 small">
+ <a href="../magick%2b%2b/tutorial/Magick%2b%2b_tutorial.pdf" target="_blank" class="text-decoration-none"><i class="bi bi-file-earmark-pdf me-1"></i> Tutorial (PDF)</a>
+ <a href="../magick%2b%2b/tutorial/Magick%2b%2b_tutorial.odt" target="_blank" class="text-decoration-none"><i class="bi bi-file-earmark-word me-1"></i> Source (ODT)</a>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
- <dt class="col-md-4"><a class="anchor" id="wasm"></a>WebAssembly</dt>
- <dd class="col-md-8"><a href="https://github.com/dlemstra/magick-wasm">magick-wasm</a> the WASM library for ImageMagick.</dd>
+<!-- Language Bindings Grid -->
+<section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-code-square fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Third-Party & Official Language Bindings</h2>
+ </div>
+ <p class="text-body-secondary mb-4">Select bindings tailored to your preferred software stack.</p>
- <dt class="col-md-4"><a class="anchor" id="xml-rpc"></a>XML RPC</dt>
- <dd class="col-md-8"><a href="https://code.google.com/archive/p/remotemagick/">RemoteMagick</a> is an XML-RPC web service that creates image thumbnails.</dd>
-</dl>
-</div>
+ <div class="row row-cols-1 row-cols-md-2 row-cols-lg-3 g-4">
+ <!-- .NET -->
+ <div class="col" id="dot-net">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">.NET / C#</h6>
+ <span class="badge bg-success-subtle text-success-emphasis">Ecosystem</span>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
- </div>
+ <p class="small text-body-secondary mb-0">
+ Use <a href="https://github.com/dlemstra/Magick.NET" target="_blank" class="text-decoration-none fw-medium">Magick.NET</a> to convert, compose, and edit images from Windows .NET.
+ </p>
+ </div>
+ </div>
+
+ <!-- Node.js -->
+ <div class="col" id="node.js">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Node.js</h6>
+ <span class="badge bg-success-subtle text-success-emphasis">Async / Sync</span>
</div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://www.npmjs.com/package/node-magickwand" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-medium">Node-magickwand</a> offers direct native access to the full C++ library with TypedArray and TypeScript support.
+ </p>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+
+ <!-- JavaScript / WASM -->
+ <div class="col" id="javascript">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">JavaScript / TS</h6>
+ <span class="badge bg-warning-subtle text-warning-emphasis">WASM</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://github.com/dlemstra/magick-wasm" target="_blank" class="text-decoration-none fw-medium">magick-wasm</a> provides high-performance WebAssembly bindings for browser and server runtimes.
+ </p>
+ </div>
+ </div>
+
+ <!-- Python -->
+ <div class="col" id="python">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Python</h6>
+ <span class="badge bg-info-subtle text-info-emphasis">Data / Web</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ Use <a href="https://docs.wand-py.org/en/latest/index.html" target="_blank" class="text-decoration-none fw-medium">Wand</a> (ctypes-based) or PythonMagick / PythonMagickWand for object-oriented image processing.
+ </p>
+ </div>
+ </div>
+
+ <!-- PHP -->
+ <div class="col" id="php">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">PHP</h6>
+ <span class="badge bg-primary-subtle text-primary-emphasis">Extension</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="http://pecl.php.net/package/imagick" target="_blank" class="text-decoration-none fw-medium">IMagick</a> is a native PHP extension. Explore guides at <a href="https://phpimagick.com/" target="_blank" class="text-decoration-none">PHPImagick.com</a>.
+ </p>
+ </div>
+ </div>
+
+ <!-- Ruby -->
+ <div class="col" id="ruby">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Ruby</h6>
+ <span class="badge bg-danger-subtle text-danger-emphasis">Wrapper</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://rmagick.github.io/" target="_blank" class="text-decoration-none fw-medium">RMagick</a> interfaces MagickCore libraries, while <a href="https://github.com/minimagick" target="_blank" class="text-decoration-none fw-medium">MiniMagick</a> provides a lightweight CLI wrapper.
+ </p>
+ </div>
+ </div>
+
+ <!-- Rust -->
+ <div class="col" id="rust">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Rust</h6>
+ <span class="badge bg-warning-subtle text-warning-emphasis">Safe</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://github.com/nlfiedler/magick-rust" target="_blank" class="text-decoration-none fw-medium">MagickRust</a> provides robust MagickWand bindings for high-reliability Rust systems.
+ </p>
+ </div>
+ </div>
+
+ <!-- Go -->
+ <div class="col" id="go">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Go (Golang)</h6>
+ <span class="badge bg-info-subtle text-info-emphasis">Concurrent</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://github.com/gographics/imagick" target="_blank" class="text-decoration-none fw-medium">GoImagick</a> connects Go routines directly to ImageMagick's MagickWand and MagickCore C APIs.
+ </p>
+ </div>
+ </div>
+
+ <!-- Java -->
+ <div class="col" id="java">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Java</h6>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Enterprise</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://jmagick.org/" target="_blank" class="text-decoration-none fw-medium">JMagick</a> offers object-oriented Java bindings, alongside <a href="http://im4java.sourceforge.net/" target="_blank" class="text-decoration-none fw-medium">im4java</a>.
+ </p>
+ </div>
+ </div>
+
+ <!-- Perl -->
+ <div class="col" id="perl">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Perl</h6>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Scripting</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ Use <a href="../perl-magick/index.html" class="text-decoration-none fw-medium">PerlMagick</a> to convert, compose, and edit images natively from Perl scripts.
+ </p>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
+
+ <!-- R -->
+ <div class="col" id="r">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">R Language</h6>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Stats</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ The <a href="https://cran.r-project.org/package=magick" target="_blank" class="text-decoration-none fw-medium">magick package</a> wraps Magick++ STL for vectorized statistical image processing in R.
+ </p>
+ </div>
+ </div>
+
+ <!-- Julia -->
+ <div class="col" id="julia">
+ <div class="card im-card p-4 h-100">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <h6 class="fw-bold mb-0">Julia</h6>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Scientific</span>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ <a href="https://github.com/JuliaIO/ImageMagick.jl" target="_blank" class="text-decoration-none fw-medium">JuliaIO</a> provides an object-oriented Julia interface for numerical image workflows.
+ </p>
+ </div>
+ </div>
+
+ </div>
+</section>
+
+<!-- Additional Ecosystem Runtimes -->
+<section class="card im-card p-4 bg-body-tertiary">
+ <h5 class="fw-bold mb-3"><i class="bi bi-hdd-network me-2 text-primary"></i> Additional Community Bindings</h5>
+ <p class="small text-body-secondary mb-3">ImageMagick also supports community-maintained integrations for niche environments:</p>
+ <div class="d-flex flex-wrap gap-2 small">
+ <a href="https://download.imagemagick.org/archive/ch/" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">Ch (ChMagick)</a>
+ <a href="https://github.com/MolotovCherry/kmagick" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">Kotlin (KMagick)</a>
+ <a href="https://lavag.org/files/file/48-lvoop-imagemagick-interface/" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">LabVIEW</a>
+ <a href="http://common-lisp.net/project/cl-magick/" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">Common Lisp</a>
+ <a href="https://github.com/leafo/magick" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">LuaJIT / Lua</a>
+ <a href="https://wiki.freepascal.org/PascalMagick" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">Pascal / Delphi</a>
+ <a href="https://download.imagemagick.org/archive/tcl/" target="_blank" class="badge bg-secondary-subtle text-secondary-emphasis text-decoration-none p-2">Tcl/Tk</a>
</div>
+</section>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/display/index.html b/www/display/index.html
index db42b9223..34de0b54f 100644
--- a/www/display/index.html
+++ b/www/display/index.html
@@ -8,771 +8,909 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Display</title>
- <meta name="description" content="">
+ <meta name="description" content="Use ImageMagick’s display program to showcase images or sequences on any X server. Explore example usages, terminal commands, and an interactive option summary.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Display">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Use ImageMagick’s display program to showcase images or sequences on any X server. Explore example usages, terminal commands, and an interactive option summary.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Display">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Display",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/display/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use ImageMagick’s display program to showcase images or sequences on any X server. Explore example usages, terminal commands, and an interactive option summary.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/display/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/display/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Display</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>display</code> program to display an image or image sequence on any X server. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>display</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>display</code> command here to illustrate its usefulness and ease of use. To get started, lets display an image in the JPEG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick display rose.jpg </samp></pre>
-
-<p>To tile a slate texture onto the root window, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick display -size 1280x1024 -window root slate.png </samp></pre>
-
-<p>To display a visual image directory of all your JPEG images, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick display 'vid:*.jpg' </samp></pre>
-
-<p>The display program defaults to the X screen resolution. To display vector formats at their intended size, override the default resolution:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick display -density 72 drawing.svg </samp></pre>
-
-<p>You can find additional examples of using <code>display</code> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>display</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#backdrop">-backdrop</a></td>
- <td>display image centered on a backdrop</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colormap">-colormap <var>type</var></a></td>
- <td>Shared or Private</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>preferred size and location of the cropped image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>display the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-despeckle</a></td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#edge">-edge <var>radius</var></a></td>
- <td>apply a filter to detect edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#enhance">-enhance</a></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#equalize">-equalize</a></td>
- <td>perform histogram equalization to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fuzz">-fuzz <var>distance</var></a></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>geometry</var></a></td>
- <td>horizontal and vertical backdrop placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#immutable">-immutable <var>type</var></a></td>
- <td>prohibit image edits</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>name</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#map">-map <var>filename</var></a></td>
- <td>transform image colors to match this set of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#normalize">-normalize</a></td>
- <td>transform image to span the full range of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#raise">-raise <var>value</var></a></td>
- <td>lighten/darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#remote">-remote <var>command</var></a></td>
- <td>execute a command in an remote display process</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resample">-resample <var>geometry</var></a></td>
- <td>change the resolution of an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#roll">-roll <var>geometry</var></a></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sample">-sample <var>geometry</var></a></td>
- <td>scale image with pixel sampling</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#segment">-segment <var>values</var></a></td>
- <td>segment an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#black-threshold">-black-threshold <var>value</var></a></td>
- <td>force all pixels below the threshold into black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#update">-update <var>seconds</var></a></td>
- <td>detect when image file is modified and redisplay</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#visual">-visual</a></td>
- <td>display image using this visual type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-window <var>id</var></a></td>
- <td>display image to background of this window</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-window-group <var>id</var></a></td>
- <td>exit program when this window id is destroyed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-write <var>filename</var></a></td>
- <td>write images to this file</td>
- </tr>
- </tbody>
-</table>
-</div>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Display</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use ImageMagick’s display program to showcase images or sequences on any X server. Explore example usages, terminal commands, and an interactive option summary.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Header & Quick Navigation -->
+<div class="mb-5 border-bottom pb-4">
+ <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+ <a href="#usage" class="btn btn-sm btn-outline-primary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-play-circle-fill"></i> Example Usage
+ </a>
+ <a href="#options" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-list-nested"></i> Option Summary
+ </a>
+ </div>
+ <p class="lead text-body-secondary mb-0">
+ Use the <code class="text-primary fw-semibold">display</code> program to display an image or image sequence on any X server. See <a href="../command-line-processing/index.html" class="text-decoration-none">Command Line Processing</a> for advice on how to structure your <code class="text-primary fw-semibold">display</code> command or see below for example usages.
+ </p>
</div>
+<!-- Section: Example Usage -->
+<section id="usage" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Example Usage</h2>
+ <a href="#usage" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-3">
+ We list a few examples of the <code class="text-primary">display</code> command here to illustrate its usefulness and ease of use. To get started, let's display an image in the JPEG format:
+ </p>
+ <!-- Terminal Code Block 1 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">display-jpeg.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/display/magick display rose.jpg')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick display rose.jpg</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">To tile a slate texture onto the root window, use:</p>
+ <!-- Terminal Code Block 2 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">display-root.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/display/magick display -size 1280x1024 -window root slate.png')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick display -size 1280x1024 -window root slate.png</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">To display a visual image directory of all your JPEG images, use:</p>
+ <!-- Terminal Code Block 3 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">display-vid.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('magick display \'vid:*.jpg\'')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick display 'vid:*.jpg'</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">
+ The display program defaults to the X screen resolution. To display vector formats at their intended size, override the default resolution:
+ </p>
+ <!-- Terminal Code Block 4 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header d-flex align-items-center justify-content-between">
+ <div class="d-flex align-items-center gap-2">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">display-density.sh</span>
+ </div>
+ <button class="btn btn-sm text-secondary border-0 p-0" onclick="navigator.clipboard.writeText('https://imagemagick.org/display/magick display -density 72 drawing.svg')" title="Copy Command">
+ <i class="bi bi-clipboard"></i>
+ </button>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono"><code><span class="text-success">$</span> magick display -density 72 drawing.svg</code></pre>
+ </div>
+ </div>
+ <div class="alert alert-info d-flex align-items-center gap-3 border-0 bg-info bg-opacity-10 text-info-emphasis rounded-3" role="alert">
+ <i class="bi bi-info-circle-fill fs-4 flex-shrink-0"></i>
+ <div>
+ You can find additional examples of using <code>display</code> in <a href="https://usage.imagemagick.org/" target="_blank" class="alert-link">Examples of ImageMagick Usage</a>.
+ </div>
+ </div>
+</section>
+<!-- Section: Option Summary -->
+<section id="options" class="mb-5">
+ <div class="d-flex flex-column flex-md-row align-items-md-center justify-content-between gap-3 mb-3">
+ <div class="d-flex align-items-center gap-2">
+ <h2 class="h3 fw-bold mb-0">Option Summary</h2>
+ <a href="#options" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <!-- Live Search Filter for Options -->
+ <div class="input-group input-group-sm" style="max-width: 280px;">
+ <span class="input-group-text bg-body-tertiary border-end-0"><i class="bi bi-filter text-secondary"></i></span>
+ <input type="text" id="optionSearch" class="form-control border-start-0 bg-body-tertiary" placeholder="Filter options..." onkeyup="filterOptions()">
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">
+ The <code class="text-primary">display</code> command recognizes these options. Click on an option to get more details about how that option works.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0" id="optionsTable">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 35%;">Option</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="fw-semibold text-decoration-none">-alpha</a></td>
+ <td class="font-sans">on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#antialias" class="fw-semibold text-decoration-none">-antialias</a></td>
+ <td class="font-sans">remove pixel-aliasing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="fw-semibold text-decoration-none">-authenticate <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#backdrop" class="fw-semibold text-decoration-none">-backdrop</a></td>
+ <td class="font-sans">display image centered on a backdrop</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#background" class="fw-semibold text-decoration-none">-background <var class="text-secondary"><color></var></a></td>
+ <td class="font-sans">background color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="fw-semibold text-decoration-none">-border <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="fw-semibold text-decoration-none">-bordercolor <var class="text-secondary"><color></var></a></td>
+ <td class="font-sans">border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="fw-semibold text-decoration-none">-channel <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip" class="fw-semibold text-decoration-none">-clip</a></td>
+ <td class="font-sans">clip along the first path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-path" class="fw-semibold text-decoration-none">-clip-path <var class="text-secondary"><id></var></a></td>
+ <td class="font-sans">clip along a named path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#coalesce" class="fw-semibold text-decoration-none">-coalesce</a></td>
+ <td class="font-sans">merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colormap" class="fw-semibold text-decoration-none">-colormap <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">Shared or Private</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="fw-semibold text-decoration-none">-colors <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="fw-semibold text-decoration-none">-colorspace <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="fw-semibold text-decoration-none">-comment <var class="text-secondary"><string></var></a></td>
+ <td class="font-sans">annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="fw-semibold text-decoration-none">-compress <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast" class="fw-semibold text-decoration-none">-contrast</a></td>
+ <td class="font-sans">enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#crop" class="fw-semibold text-decoration-none">-crop <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">preferred size and location of the cropped image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="fw-semibold text-decoration-none">-debug <var class="text-secondary"><events></var></a></td>
+ <td class="font-sans">display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#decipher" class="fw-semibold text-decoration-none">-decipher <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="fw-semibold text-decoration-none">-define <var class="text-secondary"><format:option></var></a></td>
+ <td class="font-sans">define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delay" class="fw-semibold text-decoration-none">-delay <var class="text-secondary"><centiseconds></var></a></td>
+ <td class="font-sans">display the next image after pausing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="fw-semibold text-decoration-none">-density <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="fw-semibold text-decoration-none">-depth <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#despeckle" class="fw-semibold text-decoration-none">-despeckle</a></td>
+ <td class="font-sans">reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#display" class="fw-semibold text-decoration-none">-display <var class="text-secondary"><server></var></a></td>
+ <td class="font-sans">get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dispose" class="fw-semibold text-decoration-none">-dispose <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">layer disposal method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="fw-semibold text-decoration-none">-dither <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#edge" class="fw-semibold text-decoration-none">-edge <var class="text-secondary"><radius></var></a></td>
+ <td class="font-sans">apply a filter to detect edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="fw-semibold text-decoration-none">-endian <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#enhance" class="fw-semibold text-decoration-none">-enhance</a></td>
+ <td class="font-sans">apply a digital filter to enhance a noisy image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#equalize" class="fw-semibold text-decoration-none">-equalize</a></td>
+ <td class="font-sans">perform histogram equalization to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="fw-semibold text-decoration-none">-extract <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="fw-semibold text-decoration-none">-filter <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flatten" class="fw-semibold text-decoration-none">-flatten</a></td>
+ <td class="font-sans">flatten a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flip" class="fw-semibold text-decoration-none">-flip</a></td>
+ <td class="font-sans">flip image in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flop" class="fw-semibold text-decoration-none">-flop</a></td>
+ <td class="font-sans">flop image in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#frame" class="fw-semibold text-decoration-none">-frame <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">surround image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fuzz" class="fw-semibold text-decoration-none">-fuzz <var class="text-secondary"><distance></var></a></td>
+ <td class="font-sans">colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gamma" class="fw-semibold text-decoration-none">-gamma <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">level of gamma correction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="fw-semibold text-decoration-none">-geometry <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="fw-semibold text-decoration-none">-gravity <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">horizontal and vertical backdrop placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="fw-semibold text-decoration-none">-help</a></td>
+ <td class="font-sans">print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="fw-semibold text-decoration-none">-identify</a></td>
+ <td class="font-sans">identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#immutable" class="fw-semibold text-decoration-none">-immutable <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">prohibit image edits</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="fw-semibold text-decoration-none">-interlace <var class="text-secondary"><type></var></a></td>
+ <td class="font-sans">type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="fw-semibold text-decoration-none">-interpolate <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="fw-semibold text-decoration-none">-label <var class="text-secondary"><name></var></a></td>
+ <td class="font-sans">assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="fw-semibold text-decoration-none">-limit <var class="text-secondary"><type value></var></a></td>
+ <td class="font-sans">pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="fw-semibold text-decoration-none">-log <var class="text-secondary"><format></var></a></td>
+ <td class="font-sans">format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#map" class="fw-semibold text-decoration-none">-map <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">transform image colors to match this set of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mattecolor" class="fw-semibold text-decoration-none">-mattecolor <var class="text-secondary"><color></var></a></td>
+ <td class="font-sans">frame color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="fw-semibold text-decoration-none">-monitor</a></td>
+ <td class="font-sans">monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="fw-semibold text-decoration-none">-monochrome</a></td>
+ <td class="font-sans">transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#negate" class="fw-semibold text-decoration-none">-negate</a></td>
+ <td class="font-sans">replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#normalize" class="fw-semibold text-decoration-none">-normalize</a></td>
+ <td class="font-sans">transform image to span the full range of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="fw-semibold text-decoration-none">-page <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="fw-semibold text-decoration-none">-profile <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="fw-semibold text-decoration-none">-quantize <var class="text-secondary"><colorspace></var></a></td>
+ <td class="font-sans">reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="fw-semibold text-decoration-none">-quiet</a></td>
+ <td class="font-sans">suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#raise" class="fw-semibold text-decoration-none">-raise <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">lighten/darken image edges to create a 3-D effect</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="fw-semibold text-decoration-none">-regard-warnings</a></td>
+ <td class="font-sans">pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#remote" class="fw-semibold text-decoration-none">-remote <var class="text-secondary"><command></var></a></td>
+ <td class="font-sans">execute a command in a remote display process</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resample" class="fw-semibold text-decoration-none">-resample <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">change the resolution of an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resize" class="fw-semibold text-decoration-none">-resize <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">resize the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="fw-semibold text-decoration-none">-respect-parentheses</a></td>
+ <td class="font-sans">settings remain in effect until parenthesis boundary</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#roll" class="fw-semibold text-decoration-none">-roll <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">roll an image vertically or horizontally</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="fw-semibold text-decoration-none">-rotate <var class="text-secondary"><degrees></var></a></td>
+ <td class="font-sans">apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sample" class="fw-semibold text-decoration-none">-sample <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">scale image with pixel sampling</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="fw-semibold text-decoration-none">-sampling-factor <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scene" class="fw-semibold text-decoration-none">-scene <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">image scene number</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="fw-semibold text-decoration-none">-seed <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#segment" class="fw-semibold text-decoration-none">-segment <var class="text-secondary"><values></var></a></td>
+ <td class="font-sans">segment an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="fw-semibold text-decoration-none">-set <var class="text-secondary"><attribute value></var></a></td>
+ <td class="font-sans">set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sharpen" class="fw-semibold text-decoration-none">-sharpen <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="fw-semibold text-decoration-none">-size <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="fw-semibold text-decoration-none">-strip</a></td>
+ <td class="font-sans">strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#thumbnail" class="fw-semibold text-decoration-none">-thumbnail <var class="text-secondary"><geometry></var></a></td>
+ <td class="font-sans">create a thumbnail of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="fw-semibold text-decoration-none">-transparent-color <var class="text-secondary"><color></var></a></td>
+ <td class="font-sans">transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#black-threshold" class="fw-semibold text-decoration-none">-black-threshold <var class="text-secondary"><value></var></a></td>
+ <td class="font-sans">force all pixels below the threshold into black</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#trim" class="fw-semibold text-decoration-none">-trim</a></td>
+ <td class="font-sans">trim image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#update" class="fw-semibold text-decoration-none">-update <var class="text-secondary"><seconds></var></a></td>
+ <td class="font-sans">detect when image file is modified and redisplay</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="fw-semibold text-decoration-none">-verbose</a></td>
+ <td class="font-sans">print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="fw-semibold text-decoration-none">-version</a></td>
+ <td class="font-sans">print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="fw-semibold text-decoration-none">-virtual-pixel <var class="text-secondary"><method></var></a></td>
+ <td class="font-sans">access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#visual" class="fw-semibold text-decoration-none">-visual</a></td>
+ <td class="font-sans">display image using this visual type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="fw-semibold text-decoration-none">-window <var class="text-secondary"><id></var></a></td>
+ <td class="font-sans">display image to background of this window</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="fw-semibold text-decoration-none">-window-group <var class="text-secondary"><id></var></a></td>
+ <td class="font-sans">exit program when this window id is destroyed</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="fw-semibold text-decoration-none">-write <var class="text-secondary"><filename></var></a></td>
+ <td class="font-sans">write images to this file</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
+<script>
+ function filterOptions() {
+ const input = document.getElementById('optionSearch');
+ const filter = input.value.toLowerCase();
+ const table = document.getElementById('optionsTable');
+ const tr = table.getElementsByTagName('tr');
+ for (let i = 1; i < tr.length; i++) {
+ const tdOption = tr[i].getElementsByTagName('td')[0];
+ const tdDesc = tr[i].getElementsByTagName('td')[1];
+ if (tdOption || tdDesc) {
+ const optionText = tdOption.textContent || tdOption.innerText;
+ const descText = tdDesc.textContent || tdDesc.innerText;
+ if (optionText.toLowerCase().indexOf(filter) > -1 || descText.toLowerCase().indexOf(filter) > -1) {
+ tr[i].style.display = "";
+ } else {
+ tr[i].style.display = "none";
+ }
+ }
+ }
+ }
+</script>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/distribute-pixel-cache/index.html b/www/distribute-pixel-cache/index.html
index 46734bef5..1526fc1b8 100644
--- a/www/distribute-pixel-cache/index.html
+++ b/www/distribute-pixel-cache/index.html
@@ -8,302 +8,485 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Distributed Pixel Cache</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how ImageMagick leverages a distributed pixel cache to offload memory and disk requirements across remote servers for processing large images and sequences.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Distributed Pixel Cache">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how ImageMagick leverages a distributed pixel cache to offload memory and disk requirements across remote servers for processing large images and sequences.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Distributed Pixel Cache">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Distributed Pixel Cache",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/distribute-pixel-cache/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick leverages a distributed pixel cache to offload memory and disk requirements across remote servers for processing large images and sequences.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/distribute-pixel-cache/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/distribute-pixel-cache/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Distributed Pixel Cache</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Distributed Pixel Cache</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick leverages a distributed pixel cache to offload memory and disk requirements across remote servers for processing large images and sequences.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ A distributed pixel cache extends the traditional single-host pixel cache across multiple remote servers. This allows storage and transactional capacity to scale significantly, making it ideal for processing massive images or large image sequences when local resources are constrained.
+ </p>
+ <p class="text-muted small">
+ When local resource limits are reached during image read or processing operations, ImageMagick automatically contacts one or more designated remote pixel cache servers to store or retrieve pixel data seamlessly.
+ </p>
+ </div>
+ </div>
+
+ <!-- Security Configuration Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Security & Setup</h2>
+ <p>
+ To establish communication between client and server nodes, first configure a shared secret in your <code>policy.xml</code> security policy configuration file:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code><policy domain="cache" name="shared-secret" value="<em>passphrase</em>" stealth="true"/></code></pre>
</div>
- </header>
+ </div>
+ </section>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">A distributed pixel cache is an extension of the traditional pixel cache available on a single host. The distributed pixel cache may span multiple servers so that it can grow in size and transactional capacity to support very large images or large image sequences. Start up the pixel cache server on one or more hosts. When you read or operate on an image and the local pixel cache resources are exhausted, ImageMagick contacts one or more of these remote pixel servers to store or retrieve pixels.</p>
-<p>For really large images or large image sequences, or if there is limited resources on your host, you can utilize a distributed pixel cache on one or more remote hosts. To get started, first set your shared secret in the <code>policy.xml</code> security policy configuration file:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>
-<policy domain="cache" name="shared-secret" value="<em>passphrase</em>" stealth="true"/> </code></pre>
-
-<p>Here we create a distributed pixel cache service and utilize it from our desktop:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -distribute-cache 6668 & # start on localhost
+ <!-- Usage Examples Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Usage Examples</h2>
+
+ <h3 class="h5 mt-4 mb-3">Single Remote / Localhost Cache</h3>
+ <p>Start a single distributed pixel cache server and process an image utilizing defined resource limits:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick -distribute-cache 6668 & # start on localhost
$ magick -limit memory 1GiB -limit map 2GiB -limit disk 4GiB \
-define registry:cache:hosts=localhost:6668 \
- myhugeimage.jpg -sharpen 5x2 myhugeimage.png </samp></pre>
+ myhugeimage.jpg -sharpen 5x2 myhugeimage.png</samp></pre>
+ </div>
+ </div>
-<p>Here we create two distributed pixel caches and utilize them from our desktop:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -distribute-cache 6668 & # start on 192.168.100.50
+ <h3 class="h5 mt-4 mb-3">Multi-Server Cluster Cache</h3>
+ <p>Deploy pixel cache servers on multiple hosts to distribute storage load:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick -distribute-cache 6668 & # start on 192.168.100.50
$ magick -distribute-cache 6668 & # start on 192.168.100.51
$ magick -limit memory 1GiB -limit map 2GiB -limit disk 4GiB \
-define registry:cache:hosts=192.168.100.50:6668,192.168.100.51:6668 \
- myhugeimage.jpg -sharpen 5x2 myhugeimage.png </samp></pre>
-<p>For large image sequences, the servers are contacted in a round-robin fashion to distribute the load over multiple distributed pixel caches (assuming you have a host list rather than a single host). In our example, some modest resources are available on the desktop as defined by the -limit option. For smaller images, they are allocated on the desktop up to the specified limits.</p>
-<p>Your image processing tasks are likely to perform slower when utilizing a distributed pixel cache due to shuffling pixels between the client and the server over a network. Algorithms that access virtual pixels (e.g. -sharpen) are noticeably slower, up to 3 times slower, than algorithms that only access authentic pixels (e.g. -negate) due to increased network traffic.</p>
-<p>A client can only contact a compatible distributed pixel cache server. Compatibility requires the same ImageMagick library interface, quantum depth, HDRI status, OS word size, endianness, and passphrase. The distributed pixel cache checks these attributes and throws an exception if these requirements are not met.</p>
+ myhugeimage.jpg -sharpen 5x2 myhugeimage.png</samp></pre>
+ </div>
+ </div>
+
+ <p class="small text-muted mt-3">
+ When multiple hosts are listed, ImageMagick contacts servers in a round-robin fashion to distribute load across the cluster. Smaller images or operations below local <code>-limit</code> thresholds are allocated directly on the host desktop.
+ </p>
+ </section>
+
+ <!-- Performance & Compatibility Considerations -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Performance & Compatibility Considerations</h2>
+
+ <div class="row g-4 mb-3">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Network Impact on Performance</h3>
+ <p class="small text-muted mb-0">
+ Shuffling pixel data over network sockets introduces latency. Algorithms accessing virtual pixels (such as <code>-sharpen</code>) may perform up to 3× slower than algorithms operating solely on authentic pixels (such as <code>-negate</code>) due to increased traffic.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Strict Compatibility Checks</h3>
+ <p class="small text-muted mb-0">
+ Clients can only connect to matching cache servers. Compatibility requires identical library interface versions, quantum depth, HDRI status, OS word size, endianness, and shared secret passphrases. An exception is thrown if attributes mismatch.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/download/index.html b/www/download/index.html
index aed4f0fea..4950c0156 100644
--- a/www/download/index.html
+++ b/www/download/index.html
@@ -8,754 +8,630 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Download</title>
- <meta name="description" content="Download ImageMagick for Linux, macOS, and Windows. Access ready-to-run binaries, portable builds, or source code to convert, edit, and compose images. Includes support for Q8/Q16, HDRI, and cross-platform installation options.">
+ <meta name="description" content="Download ImageMagick for Linux, macOS, and Windows. Access ready-to-run binaries, portable builds, or source code to convert, edit, and compose images.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Download">
- <meta property="og:description" content="Download ImageMagick for Linux, macOS, and Windows. Access ready-to-run binaries, portable builds, or source code to convert, edit, and compose images. Includes support for Q8/Q16, HDRI, and cross-platform installation options.">
+ <meta property="og:description" content="Download ImageMagick for Linux, macOS, and Windows. Access ready-to-run binaries, portable builds, or source code to convert, edit, and compose images.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Download">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Download",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/download/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Download ImageMagick for Linux, macOS, and Windows. Access ready-to-run binaries, portable builds, or source code to convert, edit, and compose images.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link active"" href="index.html">Download</a>
+ <a class="nav-link active" href="index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/download/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/download/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Download</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#linux">Linux Binary Release</a> • <a href="#macos">macOS Binary Release</a> • <a href="#windows">Windows Binary Release</a></p>
-
-<p class="lead">You can install ImageMagick from <a href="../install-source/index.html">source</a>. However, if you don't have a proper development environment or if you're anxious to get started, download a ready-to-run <a href="#linux">Linux</a> or <a href="#windows">Windows</a> executable. Before you download, you may want to review recent <a href="../changelog/index.html">changes</a> to the ImageMagick distribution.</p>
-
-<p>ImageMagick source and binary distributions are available from a variety of FTP and Web <a href="../mirror/index.html">mirrors</a> around the world.</p>
-
-<p>It is strongly recommended to establish a <a href="../security-policy/index.html">security policy</a> suitable for your local environment before utilizing ImageMagick.</p>
-
-<h2><a class="anchor" id="linux"></a>Linux Binary Release</h2>
-
-<p>We provide AppImage as the only pre-built Linux binary. If you require a different binary for your distribution or need custom compile options, you will need to <a href="../install-source/index.html">build from source</a>. Although ImageMagick runs fine on a single core computer, it automagically runs in parallel on multi-core systems reducing run times considerably.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:50%">
- <col style="width:50%">
- </colgroup>
- <thead>
- <tr>
- <th>Version</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
-
- <tr>
- <td>
-
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-gcc-x86_64.AppImage">ImageMagick-7.1.2-31-gcc-x86_64.AppImage</a>
-<br/>
-
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-clang-x86_64.AppImage">ImageMagick-7.1.2-31-clang-x86_64.AppImage</a>
-
- </td>
- <td>Complete portable application on Linux, no installation required. Just download and run. This <a href="https://appimage.org/">AppImage</a> has an open security policy. ImageMagick recommended practices <b>strongly</b> encourage you to configure a <a href="../security-policy/index.html">security policy</a> that suits your local environment. Simply add a custom security policy in your local path, e.g., <code>~/.config/ImageMagick/policy.xml</code> and verify with this command: <code>./magick -list policy</code>.</td>
- </tr>
-
- </tbody>
-</table></div>
-
-<p>Verify its
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31.intoto.jsonl">provenance</a>
-.</p>
-
-<h2><a class="anchor" id="macos"></a>macOS Binary Release</h2>
-
-<p>We recommend <a href="https://brew.sh/">Homebrew</a> which provides pre-built binaries for Mac (some users prefer <a href="https://macports.org/">MacPorts</a>). Download HomeBrew and type:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>brew install imagemagick</code></pre>
-
-<p>ImageMagick depends on Ghostscript fonts. To install them, type:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>brew install ghostscript</code></pre>
-
-<p>If you require a build with a wider set of delegates and codecs (e.g. SVG via librsvg, raw image support via libraw, OpenMP support, JPEG XL, Cairo, and more), Homebrew also provides <code>imagemagick-full</code> as an official formula:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>brew install imagemagick-full</code></pre>
-
-<p>Note that <code>imagemagick-full</code> is keg-only, meaning its binaries are not automatically linked into your <code>PATH</code>.</p>
-
-<p>The <code>brew</code> command downloads and installs ImageMagick with many of its delegate libraries (e.g. JPEG, PNG, Freetype, etc). Homebrew <a href="https://github.com/Homebrew/homebrew-core/issues/31510">no longer allows</a> configurable builds; if you need different compile options (e.g. librsvg support), you will need to build from source.</p>
-
-<h2><a class="anchor" id="windows"></a>Windows Binary Release</h2>
-
-<p>ImageMagick runs on Windows 10 (x86 , x64 & arm64) or newer or Windows Server 2012 or newer.</p>
-
-<p>The amount of memory can be an important factor, especially if you intend to work on large images. A minimum of 512 MB of RAM is recommended, but the more RAM the better. Although ImageMagick runs well on a single core computer, it automagically runs in parallel on multi-core systems reducing run times considerably.</p>
-
-<p>The Windows version of ImageMagick is self-installing. Simply click on the appropriate version below and it will launch itself and ask you a few installation questions. Versions with <var>Q8</var> in the name are 8 bits-per-pixel component (e.g. 8-bit red, 8-bit green, etc.), whereas, <var>Q16</var> in the filename are 16 bits-per-pixel component. A Q16 version permits you to read or write 16-bit images without losing precision but requires twice as much resources as the Q8 version. Versions with <var>dll</var> in the filename include ImageMagick libraries as <a href="http://www.answers.com/topic/dll">dynamic link libraries</a>. Unless you have a Windows 32-bit OS, we recommend this version of ImageMagick for 64-bit Windows:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:50%">
- <col style="width:50%">
- </colgroup>
- <thead>
- <tr>
- <th>Version</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-HDRI-x64-dll.exe">ImageMagick-7.1.2-31-Q16-HDRI-x64-dll.exe</a>
-</td>
- <td>Win64 dynamic at 16 bits-per-pixel component with High-dynamic-range imaging enabled</td>
- </tr>
- </tbody>
-</table></div>
-
-<p>Or choose from these alternate Windows binary distributions:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:50%">
- <col style="width:50%">
- </colgroup>
- <thead>
- <tr>
- <th>Version</th>
- <th>Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-x64-dll.exe">ImageMagick-7.1.2-31-Q16-x64-dll.exe</a>
-</td>
- <td>Win64 dynamic at 16 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-x64-static.exe">ImageMagick-7.1.2-31-Q16-x64-static.exe</a>
-</td>
- <td>Win64 static at 16 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q8-x64-dll.exe">ImageMagick-7.1.2-31-Q8-x64-dll.exe</a>
-</td>
- <td>Win64 dynamic at 8 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q8-x64-static.exe">ImageMagick-7.1.2-31-Q8-x64-static.exe</a>
-</td>
- <td>Win64 static at 8 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-HDRI-x64-static.exe">ImageMagick-7.1.2-31-Q16-HDRI-x64-static.exe</a>
-</td>
- <td>Win64 static at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q8-arm64-dll.exe">ImageMagick-7.1.2-31-Q8-arm64-dll.exe</a>
-</td>
- <td>ARM64 dynamic at 8 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q8-arm64-static.exe">ImageMagick-7.1.2-31-Q8-arm64-static.exe</a>
-</td>
- <td>ARM64 static at 8 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-arm64-dll.exe">ImageMagick-7.1.2-31-Q16-arm64-dll.exe</a>
-</td>
- <td>ARM64 dynamic at 16 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-arm64-static.exe">ImageMagick-7.1.2-31-Q16-arm64-static.exe</a>
-</td>
- <td>ARM64 dynamic at 16 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-HDRI-arm64-dll.exe">ImageMagick-7.1.2-31-Q16-HDRI-arm64-dll.exe</a>
-</td>
- <td>ARM64 dynamic at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-HDRI-arm64-static.exe">ImageMagick-7.1.2-31-Q16-HDRI-arm64-static.exe</a>
-</td>
- <td>ARM64 static at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-x86-dll.exe">ImageMagick-7.1.2-31-Q16-x86-dll.exe</a>
-</td>
- <td>Win32 dynamic at 16 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-x86-static.exe">ImageMagick-7.1.2-31-Q16-x86-static.exe</a>
-</td>
- <td>Win32 static at 16 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q8-x86-dll.exe">ImageMagick-7.1.2-31-Q8-x86-dll.exe</a>
-</td>
- <td>Win32 dynamic at 8 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q8-x86-static.exe">ImageMagick-7.1.2-31-Q8-x86-static.exe</a>
-</td>
- <td>Win32 static at 8 bits-per-pixel component</td>
- </tr>
-
- <tr>
- <td>
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-HDRI-x86-dll.exe">ImageMagick-7.1.2-31-Q16-HDRI-x86-dll.exe</a>
-</td>
- <td>Win32 dynamic at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled</td>
- </tr>
-
- <tr>
- <td>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Download</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Download ImageMagick for Linux, macOS, and Windows. Access ready-to-run binaries, portable builds, or source code to convert, edit, and compose images.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Intro Banner -->
+<section class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border">
+ <div class="d-flex flex-wrap justify-content-center gap-3 mb-4">
+ <a href="#linux" class="btn btn-outline-primary btn-sm px-3"><i class="bi bi-ubuntu me-1"></i> Linux Binary</a>
+ <a href="#macos" class="btn btn-outline-primary btn-sm px-3"><i class="bi bi-apple me-1"></i> macOS Binary</a>
+ <a href="#windows" class="btn btn-outline-primary btn-sm px-3"><i class="bi bi-windows me-1"></i> Windows Binary</a>
+ </div>
+ <p class="lead text-center mb-0">
+ You can install ImageMagick from <a href="../install-source/index.html" class="fw-medium text-decoration-none">source</a>, or grab a ready-to-run package below. Review recent <a href="../changelog/index.html" class="text-decoration-none">changes</a> or check our global <a href="../mirror/index.html" class="text-decoration-none">mirrors</a>.
+ </p>
+ </div>
+</section>
+<!-- Security Alert Notice -->
+<div class="alert alert-warning d-flex align-items-center mb-5" role="alert">
+ <i class="bi bi-shield-exclamation flex-shrink-0 fs-4 me-3"></i>
+ <div>
+ It is strongly recommended to establish a <a href="../security-policy/index.html" class="alert-link fw-semibold">security policy</a> suitable for your local environment before utilizing ImageMagick.
+ </div>
+</div>
+<!-- Linux Section -->
+<section id="linux" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-ubuntu fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Linux Binary Release</h2>
+ </div>
+ <p class="text-body-secondary mb-4">
+ We provide AppImage as the official portable binary format. For specialized configurations, please <a href="../install-source/index.html" class="text-decoration-none">build from source</a>.
+ </p>
+
+ <div class="card im-card p-4 mb-3">
+ <div class="row align-items-center g-3">
+ <div class="col-lg-5">
+ <div class="d-flex flex-column gap-2">
+ <div>
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-Q16-HDRI-x86-static.exe">ImageMagick-7.1.2-31-Q16-HDRI-x86-static.exe</a>
-</td>
- <td>Win32 static at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled</td>
- </tr>
- <tr>
- <td>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-gcc-x86_64.AppImage">ImageMagick-7.1.2-34-gcc-x86_64.AppImage</a>
+</div>
+ <div>
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q16-x64.7z">ImageMagick-7.1.2-31-portable-Q16-x64.7z</a>
-</td>
- <td>Portable Win64 static at 16 bits-per-pixel component. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
- <tr>
- <td>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-clang-x86_64.AppImage">ImageMagick-7.1.2-34-clang-x86_64.AppImage</a>
+</div>
+ </div>
+ </div>
+ <div class="col-lg-7">
+ <p class="small text-body-secondary mb-2">
+ Complete portable application, zero installation required. Verify using its
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34.intoto.jsonl">provenance</a>
+.
+ </p>
+ <div class="bg-dark text-light p-2 rounded small font-mono">
+ $ mkdir -p ~/.config/ImageMagick && ./magick -list policy
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+<!-- macOS Section -->
+<section id="macos" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-apple fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">macOS Binary Release</h2>
+ </div>
+ <p class="text-body-secondary mb-3">
+ We recommend using <a href="https://brew.sh/" target="_blank" class="text-decoration-none">Homebrew</a> for macOS environments.
+ </p>
+
+ <div class="card im-card p-4 mb-3">
+ <h6 class="fw-bold mb-2">Standard Installation</h6>
+ <div class="bg-dark text-light p-3 rounded mb-3 font-mono small">
+ $ brew install imagemagick<br>
+ $ brew install ghostscript
+ </div>
+ <h6 class="fw-bold mb-2">Full Suite (Optional codecs: SVG, RAW, OpenMP)</h6>
+ <div class="bg-dark text-light p-3 rounded font-mono small">
+ $ brew install imagemagick-full
+ </div>
+ <span class="form-text mt-2 d-block">Note: <code>imagemagick-full</code> is keg-only and not automatically linked to your system PATH.</span>
+ </div>
+</section>
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q16-arm64.7z">ImageMagick-7.1.2-31-portable-Q16-arm64.7z</a>
-</td>
- <td>Portable ARM64 static at 16 bits-per-pixel component. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
+<!-- Windows Section -->
+<section id="windows" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-windows fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Windows Binary Release</h2>
+ </div>
+ <p class="text-body-secondary mb-4">
+ Compatible with Windows 10/11 (x86, x64, ARM64) or Windows Server 2012+.
+ </p>
+
+ <!-- Recommended Windows Install Card -->
+ <div class="card im-card p-4 mb-4 border-primary">
+ <div class="d-flex justify-content-between align-items-start mb-3">
+ <div>
+ <span class="badge bg-primary mb-2">Recommended for 64-Bit Windows</span>
+ <h5 class="fw-bold mb-1">Win64 Dynamic Q16-HDRI</h5>
+ <p class="small text-body-secondary mb-0">16 bits-per-pixel component with High Dynamic Range imaging enabled.</p>
+ </div>
+ <div class="fs-4 text-primary"><i class="bi bi-star-fill"></i></div>
+ </div>
+ <div>
+
- <tr>
- <td>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-Q16-HDRI-x64-dll.exe">ImageMagick-7.1.2-34-Q16-HDRI-x64-dll.exe</a>
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q16-x86.7z">ImageMagick-7.1.2-31-portable-Q16-x86.7z</a>
-</td>
- <td>Portable Win32 static at 16 bits-per-pixel component. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
+ </div>
+ </div>
- <tr>
- <td>
+ <!-- Alternate Distributions Accordion / Table -->
+ <h5 class="fw-bold mb-3">Alternate Windows Binaries & Portable Archives</h5>
+ <div class="card im-card overflow-hidden mb-4">
+ <div class="table-responsive" style="max-height: 450px;">
+ <table class="table table-hover table-striped mb-0 align-middle">
+ <thead class="table-dark">
+ <tr>
+ <th class="ps-3">Distribution Variant</th>
+ <th class="pe-3">Specifications & Details</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3">
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q8-x64.7z">ImageMagick-7.1.2-31-portable-Q8-x64.7z</a>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-Q16-x64-dll.exe">ImageMagick-7.1.2-34-Q16-x64-dll.exe</a>
</td>
- <td>Portable Win64 static at 8 bits-per-pixel component. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
+ <td class="pe-3 text-body-secondary small">Win64 dynamic at 16 bits-per-pixel component</td>
+ </tr>
+ <tr>
+ <td class="ps-3">
- <tr>
- <td>
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q8-arm64.7z">ImageMagick-7.1.2-31-portable-Q8-arm64.7z</a>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-Q16-x64-static.exe">ImageMagick-7.1.2-34-Q16-x64-static.exe</a>
</td>
- <td>Portable ARM64 static at 8 bits-per-pixel component. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
-
- <tr>
- <td>
+ <td class="pe-3 text-body-secondary small">Win64 static at 16 bits-per-pixel component</td>
+ </tr>
+ <tr>
+ <td class="ps-3">
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q8-x86.7z">ImageMagick-7.1.2-31-portable-Q8-x86.7z</a>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-Q8-x64-dll.exe">ImageMagick-7.1.2-34-Q8-x64-dll.exe</a>
</td>
- <td>Portable Win32 static at 8 bits-per-pixel component. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
+ <td class="pe-3 text-body-secondary small">Win64 dynamic at 8 bits-per-pixel component</td>
+ </tr>
+ <tr>
+ <td class="ps-3">
- <tr>
- <td>
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q16-HDRI-x64.7z">ImageMagick-7.1.2-31-portable-Q16-HDRI-x64.7z</a>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-Q16-HDRI-x64-static.exe">ImageMagick-7.1.2-34-Q16-HDRI-x64-static.exe</a>
</td>
- <td>Portable Win64 static at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
-
- <tr>
- <td>
+ <td class="pe-3 text-body-secondary small">Win64 static at 16 bits-per-pixel with high dynamic-range enabled</td>
+ </tr>
+ <tr>
+ <td class="ps-3">
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q16-HDRI-arm64.7z">ImageMagick-7.1.2-31-portable-Q16-HDRI-arm64.7z</a>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-portable-Q16-x64.7z">ImageMagick-7.1.2-34-portable-Q16-x64.7z</a>
</td>
- <td>Portable ARM64 static at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
+ <td class="pe-3 text-body-secondary small">Portable Win64 static (No installer or registry changes required)</td>
+ </tr>
+ <tr>
+ <td class="ps-3">
- <tr>
- <td>
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31-portable-Q16-HDRI-x86.7z">ImageMagick-7.1.2-31-portable-Q16-HDRI-x86.7z</a>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34-portable-Q16-HDRI-x64.7z">ImageMagick-7.1.2-34-portable-Q16-HDRI-x64.7z</a>
</td>
- <td>Portable Win32 static at 16 bits-per-pixel component with <a href="../high-dynamic-range/index.html">high dynamic-range imaging</a> enabled. Just copy to your host and run (no installer, no Windows registry entries).</td>
- </tr>
-
- <tbody>
-</table></div>
-
-<p>Verify its
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31.intoto.jsonl">provenance</a>
-.</p>
-
-<p>Alternatively, you can install ImageMagick with <a href="https://learn.microsoft.com/en-us/windows/package-manager/winget/">winget</a>. ImageMagick uses Advanced Installer to <a href="https://www.advancedinstaller.com/imagemagick-latest-release-automatically-published-to-winget.html">publish the latest release to the winget repository</a>.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>winget install ImageMagick.Q16-HDRI</code></pre>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>winget install ImageMagick.Q16</code></pre>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>winget install ImageMagick.Q8</code></pre>
-
-<p>Or through one of the unofficial releases from <a href="https://learn.microsoft.com/en-us/windows/package-manager/winget/">winget</a>, <a href="https://scoop.sh/">scoop</a>, or <a href="https://community.chocolatey.org/">chocolatey</a>.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>winget install ImageMagick.ImageMagick</code></pre>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>scoop install main/imagemagick</code></pre>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>choco install imagemagick</code></pre>
-
-<p>To verify ImageMagick is working properly, type the following in a Command Prompt window:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick logo: logo.gif
-magick identify logo.gif</code></pre>
-
-<p>If you have any problems, you likely need <code>vcomp140.dll</code>. To install it, download <a href="https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170">Visual C++ Redistributable Package</a>.</p>
-
-<p>Note, use a double quote (<code>"</code>) rather than a single quote (<code>'</code>) for the ImageMagick command line under Windows:</p>
+ <td class="pe-3 text-body-secondary small">Portable Win64 HDRI static archive</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick "e:/myimages/image.png" "e:/myimages/image.jpg"</samp></pre>
-<p>Use two double quotes for VBScript scripts:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Set objShell = wscript.createobject("wscript.shell")
-objShell.Exec("magick ""e:/myimages/image.png"" ""e:/myimages/image.jpg""")</code></pre>
+ <!-- Package Managers -->
+ <h5 class="fw-bold mb-3">Command-Line Package Managers</h5>
+ <div class="card im-card p-4 mb-4">
+ <p class="small text-body-secondary mb-3">Quickly install via winget, scoop, or chocolatey:</p>
+ <div class="d-flex flex-column gap-2 font-mono small">
+ <div class="bg-dark text-light p-2 rounded">$ winget install ImageMagick.Q16-HDRI</div>
+ <div class="bg-dark text-light p-2 rounded">$ scoop install main/imagemagick</div>
+ <div class="bg-dark text-light p-2 rounded">$ choco install imagemagick</div>
+ </div>
+ </div>
-<p>It is strongly recommended to establish a <a href="../security-policy/index.html">security policy</a> suitable for your local environment before utilizing ImageMagick.</p>
+ <!-- Verification Snippet -->
+ <div class="card im-card p-4">
+ <h6 class="fw-bold mb-2">Verify Installation</h6>
+ <div class="bg-dark text-light p-3 rounded font-mono small mb-3">
+ $ magick logo: logo.gif<br>
+ $ magick identify logo.gif
+ </div>
+ <p class="small text-body-secondary mb-0">
+ Missing dependencies? You may need the <a href="https://learn.microsoft.com/en-us/cpp/windows/latest-supported-vc-redist?view=msvc-170" target="_blank" class="text-decoration-none">Visual C++ Redistributable Package</a>.
+ </p>
+ </div>
+</section>
-<p>Congratulations, you have a working ImageMagick distribution under Windows and you are ready to use ImageMagick to <a href="https://usage.imagemagick.org/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="../develop/index.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
+ </div>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/escape/index.html b/www/escape/index.html
index 344047e31..3c7e30a53 100644
--- a/www/escape/index.html
+++ b/www/escape/index.html
@@ -8,902 +8,580 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Format and Print Image Properties</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how to access and print image metadata, attributes, properties, artifacts, and options using percent escapes in ImageMagick.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Format and Print Image Properties">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how to access and print image metadata, attributes, properties, artifacts, and options using percent escapes in ImageMagick.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Format and Print Image Properties">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Format and Print Image Properties",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/escape/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to access and print image metadata, attributes, properties, artifacts, and options using percent escapes in ImageMagick.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/escape/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/escape/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Format and Print Image Properties</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">There are copious amounts of extra data associated with images (metadata), beyond the actual image pixels. This metadata can be useful, either for display, or for various calculations, or in modifying the behavior of later image processing operations. You can utilize percent escapes in a number of options, for example in <a href="../command-line-options/index.html#format_identify_">-format</a> or in montage <a href="../command-line-options/index.html#label" >-label</a>, to print various properties and other settings associated with an image.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
-<tr>
- <td><b>Profile Data</b></td>
- <td>Such as EXIF: data, containing focal lengths, exposures, dates, and in
- some cases GPS locations.
- </td></tr>
-<tr>
- <td><b>Attributes</b></td>
- <td>These are directly involved with image data, and more commonly
- modified as part of normal image processing. These include
- width, height, depth, image type (colorspace), timing delays, and
- background color. Most specific percent escapes is to access this
- information.
- </td></tr>
-<tr>
- <td><b>Properties</b></td>
- <td>These are stored as a table of free form strings, and are (if possible)
- saved with the image (especially in MIFF and PNG image file formats).
- These include: Labels, Captions, Comments.
- </td></tr>
-<tr>
- <td><b>Artifacts</b></td>
- <td>These are various operational (expert) settings that are saved for
- use by various operators, or by the user for future use. It is just
- a table of free-form strings. They are not saved with the image when
- written. See Artifacts and Options below for details.
- </td></tr>
-<tr>
- <td><b>Options</b></td>
- <td>Also operational (expert) settings that are saved for
- use by various operators, but are set globally for use by a whole
- image list (also not saved). See Artifacts and Options below.
- </td></tr>
-</table></div>
-
-<h2>Percent Escape Handling</h2>
-
-<p>If you request a percent escape such as <code>%[key]</code> the setting
-is looked for in the following order until the first match has been
-found...</p>
-
-<ol>
-<li>Handle special prefixes such as 'artifact:' 'option:' 'exif:', or
- 'fx:'. This includes and calculations and or globs of those prefixes such
- as 'exif:*' or 'artifact:*' (see below).</li>
-
-<li>If <code>key</code> contains a glob pattern (but no known prefix)
- search free-form properties table.</li>
-
-<li>If <code>key</code> is a special image 'attribute' name (see list
- above) return the associated or calculated image attribute.</li>
-
-<li>Search for setting as a free-form 'property'</li>
-<li>Search for setting as a free-form 'artifact'</li>
-<li>Search for setting as a free-form 'option'</li>
-
-<li>Replace escape with empty string, and perhaps produce a warning.</li>
-</ol>
-
-<p>Remember, all long name forms of percent escapes are handled in a is case
-insensitive manner. </p>
-
-<p>You can now access the Artifact and Option
-free-form string tables directly, allowing you to override the above sequence,
-and avoid accessing an attribute or property of the same name.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>%[artifact:<var>setting</var>]
-%[option:<var>setting</var>] </code></pre>
-
-<p>Escape handling requires access to an image container. If none are available, a blank image is created to ensure the expression can be processed and a value returned. For example, <pre><samp>$ magick -print "%[fx:.8765/3.14]" null: null:</samp></pre>.</p>
-
-<h2>Single Letter Attribute Percent Escapes</h2>
-
-<p>Here are common single letter escapes (short form) is used to report the most
-common attributes and properties of an image, such as: the image filename
-filename, type, width, height. </p>
-
-<div>
-<table class="table table-sm table-hover table-striped">
- <tr>
- <td>\</td>
- <td>backslash, the next character is literal and not subject to interpretation</td>
- </tr>
- <tr>
- <td>\n</td>
- <td>newline</td>
- </tr>
- <tr>
- <td>\r</td>
- <td>carriage return</td>
- </tr>
- <tr>
- <td><</td>
- <td>less-than character.</td>
- </tr>
- <tr>
- <td>></td>
- <td>greater-than character.</td>
- </tr>
- <tr>
- <td>&</td>
- <td>ampersand character.</td>
- </tr>
- <tr>
- <td>%%</td>
- <td>a percent sign</td>
- </tr>
- <tr>
- <td>%b</td>
- <td>file size of image read in (use <a href="#precision">-precision</a> 16 to force results in B)</td>
- </tr>
- <tr>
- <td>%c</td>
- <td>comment meta-data property</td>
- </tr>
- <tr>
- <td>%d</td>
- <td>directory component of path</td>
- </tr>
- <tr>
- <td>%e</td>
- <td>filename extension or suffix</td>
- </tr>
- <tr>
- <td>%f</td>
- <td>filename (including suffix)</td>
- </tr>
- <tr>
- <td>%g</td>
- <td>layer canvas page geometry (equivalent to "%Wx%H%X%Y")</td>
- </tr>
- <tr>
- <td>%h</td>
- <td>current image height in pixels</td>
- </tr>
- <tr>
- <td>%i</td>
- <td>image filename (note: becomes output filename for "info:")</td>
- </tr>
- <tr>
- <td>%k</td>
- <td>CALCULATED: number of unique colors</td>
- </tr>
- <tr>
- <td>%l</td>
- <td>label meta-data property</td>
- </tr>
- <tr>
- <td>%m</td>
- <td>image file format (file magic)</td>
- </tr>
- <tr>
- <td>%n</td>
- <td>number of images in current image sequence, report once per frame</td>
- </tr>
- <tr>
- <td>%o</td>
- <td>output filename (used for delegates)</td>
- </tr>
- <tr>
- <td>%p</td>
- <td>index of image in current image list</td>
- </tr>
- <tr>
- <td>%q</td>
- <td>quantum depth (compile-time constant)</td>
- </tr>
- <tr>
- <td>%r</td>
- <td>image class and colorspace</td>
- </tr>
- <tr>
- <td>%s</td>
- <td>scene number (from input unless re-assigned)</td>
- </tr>
- <tr>
- <td>%t</td>
- <td>filename without directory or extension (suffix)</td>
- </tr>
- <tr>
- <td>%u</td>
- <td>unique temporary filename (used for delegates)</td>
- </tr>
- <tr>
- <td>%w</td>
- <td>current width in pixels</td>
- </tr>
- <tr>
- <td>%x</td>
- <td>x resolution (density)</td>
- </tr>
- <tr>
- <td>%y</td>
- <td>y resolution (density)</td>
- </tr>
- <tr>
- <td>%z</td>
- <td>image depth (as read in unless modified, image save depth)</td>
- </tr>
- <tr>
- <td>%A</td>
- <td>image transparency channel. Values include Undefined (no transparency channel), Blend, Copy, or Update. </td>
- </tr>
- <tr>
- <td>%B</td>
- <td>file size of image read in bytes</td>
- </tr>
- <tr>
- <td>%C</td>
- <td>image compression type</td>
- </tr>
- <tr>
- <td>%D</td>
- <td>image GIF dispose method</td>
- </tr>
- <tr>
- <td>%G</td>
- <td>original image size (%wx%h; before any resizes)</td>
- </tr>
- <tr>
- <td>%H</td>
- <td>page (canvas) height</td>
- </tr>
- <tr>
- <td>%M</td>
- <td>Magick filename (original file exactly as given, including read mods)</td>
- </tr>
- <tr>
- <td>%N</td>
- <td>number of images in current image sequence, report once per image sequence</td>
- </tr>
- <tr>
- <td>%O</td>
- <td>page (canvas) offset ( = %X%Y )</td>
- </tr>
- <tr>
- <td>%P</td>
- <td>page (canvas) size ( = %Wx%H )</td>
- </tr>
- <tr>
- <td>%Q</td>
- <td>image compression quality ( 0 = default )</td>
- </tr>
- <tr>
- <td>%S</td>
- <td>?? scenes ??</td>
- </tr>
- <tr>
- <td>%T</td>
- <td>image time delay (in centi-seconds)</td>
- </tr>
- <tr>
- <td>%U</td>
- <td>image resolution units</td>
- </tr>
- <tr>
- <td>%W</td>
- <td>page (canvas) width</td>
- </tr>
- <tr>
- <td>%X</td>
- <td>page (canvas) x offset (including sign)</td>
- </tr>
- <tr>
- <td>%Y</td>
- <td>page (canvas) y offset (including sign)</td>
- </tr>
- <tr>
- <td>%Z</td>
- <td>unique filename (used for delegates)</td>
- </tr>
- <tr>
- <td>%@</td>
- <td>CALCULATED: trim bounding box (without actually trimming)</td>
- </tr>
- <tr>
- <td>%#</td>
- <td>CALCULATED: 'signature' hash of image values</td>
- </tr>
-</table></div>
-
-<p>Here is a sample command and its output for an image with filename
-<code>bird.miff</code> and whose width is 512 and height is 480.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-> identify -format "%m:%f %wx%h" bird.miff
-MIFF:bird.miff 512x480 </code></pre>
-
-<p>Note that all single letter percent escapes can also be used using long
-form (from IM version 6.7.6-9, see next). For example <code>%[f]</code> is
-equivalent to the <code>%f</code> short form. </p>
-
-<p><b>WARNING</b>: short form percent escapes are NOT performed when the percent
-is after a number. For example, <code>10%x10</code> does not expand the
-<code>%x</code> as a percent escape. If you specifically want to expand the
-'x', use the long form which overrides this special case. EG:
-<code>10%[x]10</code>. </p>
-
-<p>Also be warned that calculated attributes can take some time to generate,
-especially for large images.</p>
-
-<h2>Long Form Attribute Percent Escapes</h2>
-
-<p>In addition to the above specific and calculated attributes are recognized
-when enclosed in braces (long form):</p>
-
-<div>
-<table class="table table-sm table-hover table-striped">
- <tr>
- <td>%[basename]</td>
- <td>base filename, no suffixes (as %t)</td>
- </tr>
- <tr>
- <td>%[bit-depth]</td>
- <td>Actual bit-depth of the pixel data</td>
- </tr>
- <tr>
- <td>%[bounding-box]</td>
- <td>upper left and lower right corners of the image bounding box</td>
- </tr>
- <tr>
- <td>%[caption]</td>
- <td>caption meta-data property</td>
- </tr>
- <tr>
- <td>%[caption:lines]</td>
- <td>returns the number lines generated when wrapping the caption</td>
- </tr>
- <tr>
- <td>%[caption:pointsize]</td>
- <td>returns the pointsize computed during caption: processing</td>
- </tr>
- <tr>
- <td>%[channels]</td>
- <td>colorspace mnemonic followed by total number of channels and meta channels, e.g., <code>cmyka 8.3</code> indicates a CMYK image with alpha channel for a total of 8 channels and 3 meta channels.</td>
- </tr>
- <tr>
- <td>%[colors]</td>
- <td>Number of unique colors in the image (as of IM 7.0.3.8)</td>
- </tr>
- <tr>
- <td>%[colorspace]</td>
- <td>colorspace of Image Data (excluding transparency)</td>
- </tr>
- <tr>
- <td>%[compose]</td>
- <td> </td>
- </tr>
- <tr>
- <td>%[compression]</td>
- <td>image compression type</td>
- </tr>
- <tr>
- <td><a href="../convex-hull/index.html">%[convex-hull]</a></td>
- <td>points that form a convex hull around the foreground object. Use <code><a href="../command-line-options/index.html#define">-define</a> convex-hull:background-color=<em>color</em></code> to identify the image background color. Use <code><a href="../command-line-options/index.html#fuzz">-fuzz</a> to allow for a non-uniform background color. </td>
- </tr>
- <tr>
- <td><a href="../convex-hull/index.html">%[convex-hull:extreme-points]</a></td>
- <td>return the top, right, bottom, and left extreme points of the convex hull.</td>
- </tr>
- <tr>
- <td>%[copyright]</td>
- <td>ImageMagick Copyright String</td>
- </tr>
- <tr>
- <td>%[depth]</td>
- <td>depth of image for write (as input unless changed)</td>
- </tr>
- <tr>
- <td>%[deskew:angle]</td>
- <td>The deskew angle in degrees of rotation</td>
- </tr>
- <tr>
- <td>%[directory]</td>
- <td>directory part of filename (as %d)</td>
- </tr>
- <tr>
- <td>%[distortion]</td>
- <td>how well an image resembles a reference image (<a href="../command-line-options/index.html#compare" >-compare</a>)</td>
- </tr>
- <tr>
- <td>%[dominant-color]</td>
- <td>return the dominate image color in hex. Precede usage with <a href="../command-line-options/index.html#kmeans" >-kmeans</a>.</td>
- </tr>
- <tr>
- <td>%[entropy]</td>
- <td>CALCULATED: entropy of the image</td>
- </tr>
- <tr>
- <td>%[extension]</td>
- <td>extension part of filename (as %e)</td>
- </tr>
- <tr>
- <td>%[gamma]</td>
- <td>value of image gamma</td>
- </tr>
- <tr>
- <td>%[group]</td>
- <td>??? window group ???</td>
- </tr>
- <tr>
- <td>%[height]</td>
- <td>original height of image (when it was read in)</td>
- </tr>
- <tr>
- <td>%[histogram:contrast-stretch]</td>
- <td>computed min and max contrast stretch percentage</td>
- </tr>
- <tr>
- <td>%[histogram:linear-stretch]</td>
- <td>computed min and max linear stretch percentage</td>
- </tr>
- <tr>
- <td>%[input]</td>
- <td>the input image filename.</td>
- </tr>
- <tr>
- <td>%[interlace]</td>
- <td>Image interlace mode (as of IM 7.0.3.8)</td>
- </tr>
- <tr>
- <td>%[kurtosis]</td>
- <td>CALCULATED: kurtosis statistic of image</td>
- </tr>
- <tr>
- <td>%[label]</td>
- <td>label meta-data property</td>
- </tr>
- <tr>
- <td>%[label:pointsize]</td>
- <td>returns the pointsize computed during label: processing</td>
- </tr>
- <tr>
- <td>%[magick]</td>
- <td>coder used to read image (not the file suffix)</td>
- </tr>
- <tr>
- <td>%[max]</td>
- <td>CALCULATED: maximum value statistic of image</td>
- </tr>
- <tr>
- <td>%[mean]</td>
- <td>CALCULATED: average value statistic of image</td>
- </tr>
- <tr>
- <td>%[median]</td>
- <td>CALCULATED: median value statistic of image</td>
- </tr>
- <tr>
- <td>%[min]</td>
- <td>CALCULATED: minimum value statistic of image</td>
- </tr>
- <tr>
- <td><a href="../convex-hull/index.html">%[minimum-bounding-box]</a></td>
- <td>Use <code><a href="../command-line-options/index.html#define">-define</a> convex-hull:background-color=<em>color</em></code> to identify the image background color. Use <code><a href="../command-line-options/index.html#fuzz">-fuzz</a> to allow for a non-uniform background color. In addition to the bounding box points, these properties are set: <code>minimum-bounding-box:area</code>, <code>minimum-bounding-box:width</code>, <code>minimum-bounding-box:height</code>, <code>minimum-bounding-box:angle</code>, and <code>minimum-bounding-box:unrotate</code>.</td>
- </tr>
- <tr>
- <td>%[opaque]</td>
- <td>CALCULATED: is image fully-opaque?</td>
- </tr>
- <tr>
- <td>%[orientation]</td>
- <td>image orientation</td>
- </tr>
- <tr>
- <td>%[page]</td>
- <td>Virtual canvas (page) geometry</td>
- </tr>
- <tr>
- <td>%[papersize:<em>name</em>]</td>
- <td>paper size for <em>name</em> in pixels at 72DPI (e.g. papersize:A4)</td>
- </tr>
- <tr>
- <td>%[printsize.x]</td>
- <td>X printsize</td>
- </tr>
- <tr>
- <td>%[printsize.y]</td>
- <td>Y printsize</td>
- </tr>
- <tr>
- <td>%[profile:icc]</td>
- <td>ICC profile info</td>
- </tr>
- <tr>
- <td>%[profile:icm]</td>
- <td>ICM profile info</td>
- </tr>
- <tr>
- <td>%[profiles]</td>
- <td>list of any embedded profiles</td>
- </tr>
- <tr>
- <td>%[quality]</td>
- <td>Image quality value (as of IM 7.0.3.8)</td>
- </tr>
- <tr>
- <td>%[rendering-intent]</td>
- <td>Image rendering intent (as of IM 7.0.3.8)</td>
- </tr>
- <tr>
- <td>%[resolution.x]</td>
- <td>X density (resolution) without units</td>
- </tr>
- <tr>
- <td>%[resolution.y]</td>
- <td>Y density (resolution) without units</td>
- </tr>
- <tr>
- <td>%[scene]</td>
- <td>original scene number of image in input file</td>
- </tr>
- <tr>
- <td>%[size]</td>
- <td>original size of image (when it was read in)</td>
- </tr>
- <tr>
- <td>%[skewness]</td>
- <td>CALCULATED: skewness statistic of image</td>
- </tr>
- <tr>
- <td>%[standard-deviation]</td>
- <td>CALCULATED: standard deviation statistic of image</td>
- </tr>
- <tr>
- <td>%[type]</td>
- <td>CALCULATED: image type</td>
- </tr>
- <tr>
- <td>%[unique]</td>
- <td>unique temporary filename ???</td>
- </tr>
- <tr>
- <td>%[units]</td>
- <td>image resolution units</td>
- </tr>
- <tr>
- <td>%[version]</td>
- <td>Version Information of this running ImageMagick</td>
- </tr>
- <tr>
- <td>%[width]</td>
- <td>original width of image (when it was read in)</td>
- </tr>
- <tr>
- <td>%[zero]</td>
- <td>zero (unique filename for delegate use)</td>
- </tr>
-</table></div>
-
-<h2>Properties</h2>
-
-<p>All other long forms of percent escapes (not single letter long form) are
-handled in a case insensitive manner. Such escapes will attempt to look
-up that name specific data sources. </p>
-
-<p>The primary search space (if not a specific attribute listed above) is
-a free-form property string. Such strings are associated and saved with
-images, and are typically set using either the <a href="../command-line-options/index.html#set" >-set</a>
-CLI option (or API equivalent), or from special convenience options
-(such as <a href="../command-line-options/index.html#label"
->-label</a>, <a href="../command-line-options/index.html#comment"
->-comment</a>, <a href="../command-line-options/index.html#caption"
->-caption</a>). </p>
-
-<p>These convenience options are globally saved (as 'global options' so they can
-be set before images are read), and later are transferred to the property of
-individual images, only when they are read in. At that time any internal
-percent escape present is then handled. </p>
-
-<p>To change a property of an image already in memory, you need to use <a
-href="../command-line-options/index.html#set" >-set</a>.
-</p>
-
-<p>Note that properties, like attributes (and profiles), are saved with
-images when write, if the image file format allows. </p>
-
-
-<h2>Artifacts and Options</h2>
-
-<p>The previous percent escapes are associated with the primary Attributes and
-Properties. Which is the original and primary focus of such percent escapes.
-</p>
-
-<p>However there are many operational settings that are used by various
-ImageMagick operators that can be useful to set and later access. These
-consist of per-image Artifacts, and Global options (associated with a list of
-images, typically the current image list).</p>
-
-<p>Note that the major difference between an artifact and a property is that
-artifacts, being an internal operational setting, is not saved with images (if
-such is possible). </p>
-
-<p>For example when you use <code>-define 'distort:viewport=100x100'</code> you
-are in fact generating a global option, which the <a href="../command-line-options/index.html#distort"
->-distort</a> operator will use to modify its behavior (distorted output
-image 'view'). </p>
-
-<p>An Option is essentially an Artifact that has been stored globally as part
-of a list of images (specifically a 'Wand' of images). As such they are
-identical, in that a Option, is simply a global Artifact for all the
-associated images. </p>
-
-<p>As such you can use <code>-set 'option:distort:viewport' '100x100'</code> to
-achieve the same result of setting a Artifact for the distort operation to use.
-</p>
-
-<p><b>Internal Handling of a Global Option...</b></p>
-
-<p>The Core library ('MagickCore') does not generally directly understand
-Global Options. As such, continuing the previous example, the
-<code>DistortImages()</code> function only looks up an artifact to discover if
-a 'viewport' has been provided to it. </p>
-
-<p>How Global Options are used when a library function requests an Artifact is
-one of the key differences between IMv6 and IMv7.</p>
-
-<p>Sets a link back to the global options
-data, so that if a specific per-image Artifact is not found , then it will
-look for a equivalent global Option for that image list. directly. This
-saves coping these free-form options into artifacts repeatedly, and means you
-can now separately define a global option for a list, and a individual
-overriding artifact for a specific image in that list. </p>
-
-<p>Note that many API's that do not use Wands (PerlMagick for example using
-arrays of images rather than a Wand). In these API's you will not have Global
-Options, only per-image Artifacts. </p>
-
-<p>In summery a Global Option, if available, is equivalent to a per-image
-Artifact. </p>
-
-
-<h2>Glob-Pattern Listing of Properties, Artifacts and Options</h2>
-
-<p>The <var>setting</var> can contain a glob pattern. As such you can
-now list all free-form string properties, artifacts, and options, (but not
-specific image attributes) using...</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Format and Print Image Properties</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to access and print image metadata, attributes, properties, artifacts, and options using percent escapes in ImageMagick.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick ... \
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="properties-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#metadata-types" class="text-decoration-none text-primary"><i class="bi bi-info-circle me-1"></i> Metadata Types</a>
+ <span class="text-muted">•</span>
+ <a href="#percent-escapes" class="text-decoration-none text-primary"><i class="bi bi-code-slash me-1"></i> Percent Escapes</a>
+ <span class="text-muted">•</span>
+ <a href="#single-letter" class="text-decoration-none text-primary"><i class="bi bi-fonts me-1"></i> Short Form</a>
+ <span class="text-muted">•</span>
+ <a href="#long-form" class="text-decoration-none text-primary"><i class="bi bi-braces me-1"></i> Long Form</a>
+ <span class="text-muted">•</span>
+ <a href="#profiles" class="text-decoration-none text-primary"><i class="bi bi-file-earmark-text me-1"></i> Profiles & EXIF/IPTC</a>
+ </div>
+ </div>
+ <p class="lead text-body-secondary mb-4">
+ There are copious amounts of extra data associated with images (metadata), beyond the actual image pixels. This metadata can be useful, either for display, or for various calculations, or in modifying the behavior of later image processing operations. You can utilize percent escapes in a number of options, for example in <a href="../command-line-options/index.html#format_identify_">-format</a> or in montage <a href="../command-line-options/index.html#label">-label</a>, to print various properties and other settings associated with an image.
+ </p>
+ <!-- Metadata Types Table Card -->
+ <div class="card im-card shadow-sm mb-5 overflow-hidden" id="metadata-types">
+ <div class="card-header bg-dark text-white py-3 px-4">
+ <h5 class="mb-0 fw-bold"><i class="bi bi-collection me-2"></i>Image Metadata Categories</h5>
+ </div>
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width:30%">
+ <col style="width:70%">
+ </colgroup>
+ <tbody>
+ <tr>
+ <td class="ps-3 fw-semibold text-primary">Profile Data</td>
+ <td>Such as EXIF data, containing focal lengths, exposures, dates, and in some cases GPS locations.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-semibold text-primary">Attributes</td>
+ <td>These are directly involved with image data, and more commonly modified as part of normal image processing. These include width, height, depth, image type (colorspace), timing delays, and background color. Most specific percent escapes are used to access this information.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-semibold text-primary">Properties</td>
+ <td>These are stored as a table of free form strings, and are (if possible) saved with the image (especially in MIFF and PNG image file formats). These include Labels, Captions, and Comments.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-semibold text-primary">Artifacts</td>
+ <td>These are various operational (expert) settings that are saved for use by various operators, or by the user for future use. It is just a table of free-form strings. They are not saved with the image when written. See Artifacts and Options below for details.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 fw-semibold text-primary">Options</td>
+ <td>Also operational (expert) settings that are saved for use by various operators, but are set globally for use by a whole image list (also not saved). See Artifacts and Options below.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- Percent Escape Handling Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="percent-escapes">
+ <a class="anchor text-decoration-none text-body" href="#percent-escapes">Percent Escape Handling</a>
+ </h2>
+ <p>If you request a percent escape such as <code>%[key]</code> the setting is looked for in the following order until the first match has been found:</p>
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary">
+ <ol class="mb-0 ps-3">
+ <li class="mb-2">Handle special prefixes such as <code>artifact:</code>, <code>option:</code>, <code>exif:</code>, or <code>fx:</code>. This includes any calculations and/or globs of those prefixes such as <code>exif:*</code> or <code>artifact:*</code> (see below).</li>
+ <li class="mb-2">If <code>key</code> contains a glob pattern (but no known prefix), search the free-form properties table.</li>
+ <li class="mb-2">If <code>key</code> is a special image 'attribute' name (see list above), return the associated or calculated image attribute.</li>
+ <li class="mb-2">Search for setting as a free-form 'property'.</li>
+ <li class="mb-2">Search for setting as a free-form 'artifact'.</li>
+ <li class="mb-2">Search for setting as a free-form 'option'.</li>
+ <li>Replace escape with an empty string, and perhaps produce a warning.</li>
+ </ol>
+ </div>
+ <p>Remember, all long name forms of percent escapes are handled in a case-insensitive manner.</p>
+ <p>You can now access the Artifact and Option free-form string tables directly, allowing you to override the above sequence, and avoid accessing an attribute or property of the same name.</p>
+ <pre class="p-3 mb-4 rounded bg-body-tertiary border font-mono small"><code>%[artifact:<var>setting</var>]
+%[option:<var>setting</var>]</code></pre>
+ <p>Escape handling requires access to an image container. If none are available, a blank image is created to ensure the expression can be processed and a value returned. For example:</p>
+ <pre class="p-3 mb-4 rounded bg-body-tertiary border font-mono small"><code>$ magick -print "%[fx:.8765/3.14]" null: null:</code></pre>
+ <!-- Single Letter Attribute Percent Escapes -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="single-letter">
+ <a class="anchor text-decoration-none text-body" href="#single-letter">Single Letter Attribute Percent Escapes</a>
+ </h2>
+ <p class="text-body-secondary mb-3">Here are common single letter escapes (short form) used to report the most common attributes and properties of an image, such as filename, type, width, and height.</p>
+ <div class="card im-card shadow-sm mb-4 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2" style="width: 20%;">Escape</th>
+ <th class="py-2" style="width: 80%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono fw-bold">\</td><td>backslash, the next character is literal and not subject to interpretation</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">\n</td><td>newline</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">\r</td><td>carriage return</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold"><</td><td>less-than character</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">></td><td>greater-than character</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">&</td><td>ampersand character</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%%</td><td>a percent sign</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%b</td><td>file size of image read in (use <a href="#precision">-precision</a> 16 to force results in B)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%c</td><td>comment meta-data property</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%d</td><td>directory component of path</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%e</td><td>filename extension or suffix</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%f</td><td>filename (including suffix)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%g</td><td>layer canvas page geometry (equivalent to "%Wx%H%X%Y")</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%h</td><td>current image height in pixels</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%i</td><td>image filename (note: becomes output filename for "info:")</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%k</td><td>CALCULATED: number of unique colors</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%l</td><td>label meta-data property</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%m</td><td>image file format (file magic)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%n</td><td>number of images in current image sequence, report once per frame</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%o</td><td>output filename (used for delegates)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%p</td><td>index of image in current image list</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%q</td><td>quantum depth (compile-time constant)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%r</td><td>image class and colorspace</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%s</td><td>scene number (from input unless re-assigned)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%t</td><td>filename without directory or extension (suffix)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%u</td><td>unique temporary filename (used for delegates)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%w</td><td>current width in pixels</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%x</td><td>x resolution (density)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%y</td><td>y resolution (density)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%z</td><td>image depth (as read in unless modified, image save depth)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%A</td><td>image transparency channel. Values include Undefined (no transparency channel), Blend, Copy, or Update.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%B</td><td>file size of image read in bytes</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%C</td><td>image compression type</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%D</td><td>image GIF dispose method</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%G</td><td>original image size (%wx%h; before any resizes)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%H</td><td>page (canvas) height</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%M</td><td>Magick filename (original file exactly as given, including read mods)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%N</td><td>number of images in current image sequence, report once per image sequence</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%O</td><td>page (canvas) offset ( = %X%Y )</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%P</td><td>page (canvas) size ( = %Wx%H )</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%Q</td><td>image compression quality ( 0 = default )</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%S</td><td>?? scenes ??</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%T</td><td>image time delay (in centi-seconds)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%U</td><td>image resolution units</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%W</td><td>page (canvas) width</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%X</td><td>page (canvas) x offset (including sign)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%Y</td><td>page (canvas) y offset (including sign)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%Z</td><td>unique filename (used for delegates)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%@</td><td>CALCULATED: trim bounding box (without actually trimming)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%#</td><td>CALCULATED: 'signature' hash of image values</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p>Here is a sample command and its output for an image with filename <code>bird.miff</code> and whose width is 512 and height is 480.</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>-> identify -format "%m:%f %wx%h" bird.miff
+MIFF:bird.miff 512x480</code></pre>
+ <p>Note that all single letter percent escapes can also be used using long form (from IM version 6.7.6-9). For example, <code>%[f]</code> is equivalent to the <code>%f</code> short form.</p>
+ <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center gap-2 mb-4" role="alert">
+ <i class="bi bi-exclamation-triangle-fill fs-5"></i>
+ <div>
+ <strong>WARNING:</strong> Short form percent escapes are NOT performed when the percent is after a number. For example, <code>10%x10</code> does not expand the <code>%x</code> as a percent escape. If you specifically want to expand the 'x', use the long form which overrides this special case (e.g. <code>10%[x]10</code>).
+ </div>
+ </div>
+ <p class="mb-4">Also be warned that calculated attributes can take some time to generate, especially for large images.</p>
+ <!-- Long Form Attribute Percent Escapes -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="long-form">
+ <a class="anchor text-decoration-none text-body" href="#long-form">Long Form Attribute Percent Escapes</a>
+ </h2>
+ <p class="text-body-secondary mb-3">In addition to the specific and calculated attributes above, the following are recognized when enclosed in braces (long form):</p>
+ <div class="card im-card shadow-sm mb-5 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2" style="width: 30%;">Long Form Escape</th>
+ <th class="py-2" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono fw-bold">%[basename]</td><td>base filename, no suffixes (as %t)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[bit-depth]</td><td>Actual bit-depth of the pixel data</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[bounding-box]</td><td>upper left and lower right corners of the image bounding box</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[caption]</td><td>caption meta-data property</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[caption:lines]</td><td>returns the number lines generated when wrapping the caption</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[caption:pointsize]</td><td>returns the pointsize computed during caption: processing</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[channels]</td><td>colorspace mnemonic followed by total number of channels and meta channels, e.g., <code>cmyka 8.3</code> indicates a CMYK image with alpha channel for a total of 8 channels and 3 meta channels.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[colors]</td><td>Number of unique colors in the image (as of IM 7.0.3.8)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[colorspace]</td><td>colorspace of Image Data (excluding transparency)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[compose]</td><td> </td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[compression]</td><td>image compression type</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold"><a href="../convex-hull/index.html" class="text-decoration-none">%[convex-hull]</a></td><td>points that form a convex hull around the foreground object. Use <code><a href="../command-line-options/index.html#define">-define</a> convex-hull:background-color=<em>color</em></code> to identify the image background color. Use <code><a href="../command-line-options/index.html#fuzz">-fuzz</a></code> to allow for a non-uniform background color.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold"><a href="../convex-hull/index.html" class="text-decoration-none">%[convex-hull:extreme-points]</a></td><td>return the top, right, bottom, and left extreme points of the convex hull.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[copyright]</td><td>ImageMagick Copyright String</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[depth]</td><td>depth of image for write (as input unless changed)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[deskew:angle]</td><td>The deskew angle in degrees of rotation</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[directory]</td><td>directory part of filename (as %d)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[distortion]</td><td>how well an image resembles a reference image (<a href="../command-line-options/index.html#compare">-compare</a>)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[dominant-color]</td><td>return the dominate image color in hex. Precede usage with <a href="../command-line-options/index.html#kmeans">-kmeans</a>.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[entropy]</td><td>CALCULATED: entropy of the image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[extension]</td><td>extension part of filename (as %e)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[gamma]</td><td>value of image gamma</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[group]</td><td>??? window group ???</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[height]</td><td>original height of image (when it was read in)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[histogram:contrast-stretch]</td><td>computed min and max contrast stretch percentage</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[histogram:linear-stretch]</td><td>computed min and max linear stretch percentage</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[input]</td><td>the input image filename.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[interlace]</td><td>Image interlace mode (as of IM 7.0.3.8)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[kurtosis]</td><td>CALCULATED: kurtosis statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[label]</td><td>label meta-data property</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[label:pointsize]</td><td>returns the pointsize computed during label: processing</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[magick]</td><td>coder used to read image (not the file suffix)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[max]</td><td>CALCULATED: maximum value statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[mean]</td><td>CALCULATED: average value statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[median]</td><td>CALCULATED: median value statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[min]</td><td>CALCULATED: minimum value statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold"><a href="../convex-hull/index.html" class="text-decoration-none">%[minimum-bounding-box]</a></td><td>Use <code><a href="../command-line-options/index.html#define">-define</a> convex-hull:background-color=<em>color</em></code> to identify the image background color. Use <code><a href="../command-line-options/index.html#fuzz">-fuzz</a></code> to allow for a non-uniform background color. In addition to bounding box points, these properties are set: <code>minimum-bounding-box:area</code>, <code>minimum-bounding-box:width</code>, <code>minimum-bounding-box:height</code>, <code>minimum-bounding-box:angle</code>, and <code>minimum-bounding-box:unrotate</code>.</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[opaque]</td><td>CALCULATED: is image fully-opaque?</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[orientation]</td><td>image orientation</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[page]</td><td>Virtual canvas (page) geometry</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[papersize:<em>name</em>]</td><td>paper size for <em>name</em> in pixels at 72DPI (e.g. papersize:A4)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[printsize.x]</td><td>X printsize</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[printsize.y]</td><td>Y printsize</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[profile:icc]</td><td>ICC profile info</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[profile:icm]</td><td>ICM profile info</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[profiles]</td><td>list of any embedded profiles</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[quality]</td><td>Image quality value (as of IM 7.0.3.8)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[rendering-intent]</td><td>Image rendering intent (as of IM 7.0.3.8)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[resolution.x]</td><td>X density (resolution) without units</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[resolution.y]</td><td>Y density (resolution) without units</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[scene]</td><td>original scene number of image in input file</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[size]</td><td>original size of image (when it was read in)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[skewness]</td><td>CALCULATED: skewness statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[standard-deviation]</td><td>CALCULATED: standard deviation statistic of image</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[type]</td><td>CALCULATED: image type</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[unique]</td><td>unique temporary filename ???</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[units]</td><td>image resolution units</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[version]</td><td>Version Information of this running ImageMagick</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[width]</td><td>original width of image (when it was read in)</td></tr>
+ <tr><td class="ps-3 font-mono fw-bold">%[zero]</td><td>zero (unique filename for delegate use)</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- Properties Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="properties">Properties</h2>
+ <p>All other long forms of percent escapes (not single letter long form) are handled in a case-insensitive manner. Such escapes will attempt to look up that name in specific data sources.</p>
+ <p>The primary search space (if not a specific attribute listed above) is a free-form property string. Such strings are associated and saved with images, and are typically set using either the <a href="../command-line-options/index.html#set">-set</a> CLI option (or API equivalent), or from special convenience options (such as <a href="../command-line-options/index.html#label">-label</a>, <a href="../command-line-options/index.html#comment">-comment</a>, <a href="../command-line-options/index.html#caption">-caption</a>).</p>
+ <p>These convenience options are globally saved (as 'global options' so they can be set before images are read), and later are transferred to the property of individual images only when they are read in. At that time any internal percent escape present is then handled.</p>
+ <p>To change a property of an image already in memory, you need to use <a href="../command-line-options/index.html#set">-set</a>.</p>
+ <p class="mb-4">Note that properties, like attributes (and profiles), are saved with images when written, if the image file format allows.</p>
+ <!-- Artifacts and Options Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="artifacts-options">Artifacts and Options</h2>
+ <p>The previous percent escapes are associated with the primary Attributes and Properties, which is the original and primary focus of such percent escapes.</p>
+ <p>However, there are many operational settings that are used by various ImageMagick operators that can be useful to set and later access. These consist of per-image Artifacts, and Global options (associated with a list of images, typically the current image list).</p>
+ <p>Note that the major difference between an artifact and a property is that artifacts, being an internal operational setting, are not saved with images (if such is possible).</p>
+ <p>For example, when you use <code>-define 'distort:viewport=100x100'</code> you are in fact generating a global option, which the <a href="../command-line-options/index.html#distort">-distort</a> operator will use to modify its behavior (distorted output image 'view').</p>
+ <p>An Option is essentially an Artifact that has been stored globally as part of a list of images (specifically a 'Wand' of images). As such they are identical, in that an Option is simply a global Artifact for all the associated images.</p>
+ <p>As such, you can use <code>-set 'option:distort:viewport' '100x100'</code> to achieve the same result of setting an Artifact for the distort operation to use.</p>
+ <h5 class="fw-bold mt-4 mb-2">Internal Handling of a Global Option...</h5>
+ <p>The Core library ('MagickCore') does not generally directly understand Global Options. As such, continuing the previous example, the <code>DistortImages()</code> function only looks up an artifact to discover if a 'viewport' has been provided to it.</p>
+ <p>How Global Options are used when a library function requests an Artifact is one of the key differences between IMv6 and IMv7.</p>
+ <p>This sets a link back to the global options data, so that if a specific per-image Artifact is not found, then it will look for an equivalent global Option for that image list directly. This saves copying these free-form options into artifacts repeatedly, and means you can now separately define a global option for a list, and an individual overriding artifact for a specific image in that list.</p>
+ <p>Note that many APIs that do not use Wands (PerlMagick for example using arrays of images rather than a Wand) will not have Global Options, only per-image Artifacts.</p>
+ <p class="mb-4">In summary, a Global Option, if available, is equivalent to a per-image Artifact.</p>
+ <!-- Glob-Pattern Listing Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="glob-pattern">Glob-Pattern Listing of Properties, Artifacts and Options</h2>
+ <p>The <var>setting</var> can contain a glob pattern. As such, you can now list all free-form string properties, artifacts, and options (but not specific image attributes) using:</p>
+ <pre class="p-3 mb-4 rounded bg-body-tertiary border font-mono small"><code>magick ... \
-print "__Properties__\n%[*]" \
-print "__Artifacts__\n%[artifact:*]" \
-print "__Options__\n%[option:*]" \
- ... </code></pre>
-
-<p> The format of glob patterns are very specific and as such is generally
-only used to list specific settings, such as when debugging, rather than being
-used for image processing use. </p>
-
-
-<h2>Calculated Percent Escape Prefixes</h2>
-
-<p>There are some special prefixes (before the first ':') which performs
-calculations based on the user provided string that follows that prefix. For
-example you can do a numerical calculation use <code>%[fx:...]</code> to
-evaluate the given <a href="../fx/index.html">FX</a> expressions:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>%[fx:<var>expression</var>] </code></pre>
-
-<p>Use <code>pixel:</code> or <code>hex:</code> to evaluate a pixel color as defined by the <a
-href="../fx/index.html">FX</a>
-expression:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>%[pixel:<var>expression</var>] </code></pre>
-
-<p>Use <a href="../command-line-options/index.html#define">-define</a> to specify the color compliance (e.g. <code>-define pixel:compliance=css</code>)</p>.
-
-<h2>Specific Profile Percent Escape Prefixes</h2>
-
-<p>You can also use the following special formatting syntax to print EXIF
-mage meta-data that was included in the image read in:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>%[EXIF:<var>tag</var>] </code></pre>
-
-<p>Choose <var>tag</var> from the following:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>
-* (print all EXIF tags, in keyword=data format)
+ ...</code></pre>
+ <p class="mb-4">The format of glob patterns is very specific and as such is generally only used to list specific settings, such as when debugging, rather than being used for everyday image processing.</p>
+ <!-- Calculated Percent Escape Prefixes Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="calculated-escapes">Calculated Percent Escape Prefixes</h2>
+ <p>There are some special prefixes (before the first ':') which perform calculations based on the user-provided string that follows that prefix. For example, you can do a numerical calculation using <code>%[fx:...]</code> to evaluate the given <a href="../fx/index.html">FX</a> expressions:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>%[fx:<var>expression</var>]</code></pre>
+ <p>Use <code>pixel:</code> or <code>hex:</code> to evaluate a pixel color as defined by the <a href="../fx/index.html">FX</a> expression:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>%[pixel:<var>expression</var>]</code></pre>
+ <p class="mb-4">Use <a href="../command-line-options/index.html#define">-define</a> to specify the color compliance (e.g., <code>-define pixel:compliance=css</code>).</p>
+ <!-- Specific Profile Percent Escape Prefixes Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="profiles">Specific Profile Percent Escape Prefixes</h2>
+ <p>You can also use the following special formatting syntax to print EXIF image metadata that was included in the image read in:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>%[EXIF:<var>tag</var>]</code></pre>
+ <p>Choose <var>tag</var> from the following:</p>
+ <pre class="overflow-auto p-3 mb-4 rounded bg-body-tertiary border font-mono small" style="max-height:50svh;"><code>* (print all EXIF tags, in keyword=data format)
! (print all EXIF tags, in tag_number data format)
#hhhh (print data for EXIF tag #hhhh)
ImageWidth
@@ -987,20 +665,12 @@ SubjectLocation
ExposureIndex
SensingMethod
FileSource
-SceneType </code></pre>
-<br/>
-<p>Surround the format specification with quotation marks to prevent your
-shell from misinterpreting any spaces and square brackets.</p>
-
-<p>The following special formatting syntax can be used to print IPTC
-information contained in the file:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>%[IPTC:<var>dataset</var>:<var>record</var>] </code></pre>
-
-<p>Select <var>dataset</var> and <var>record</var> from the following:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary text-body-secondary bg-body-tertiary;" style="max-height:75svh;"><code>
- Envelope Record
+SceneType</code></pre>
+ <p>Surround the format specification with quotation marks to prevent your shell from misinterpreting any spaces and square brackets.</p>
+ <p>The following special formatting syntax can be used to print IPTC information contained in the file:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>%[IPTC:<var>dataset</var>:<var>record</var>]</code></pre>
+ <p>Select <var>dataset</var> and <var>record</var> from the following:</p>
+ <pre class="overflow-auto p-3 mb-4 rounded bg-body-tertiary border font-mono small" style="max-height:50svh;"><code>Envelope Record
1:00 Model Version
1:05 Destination
1:20 File Format
@@ -1015,7 +685,6 @@ information contained in the file:</p>
1:100 UNO (Unique Name of Object)
1:120 ARM Identifier
1:122 ARM Version
-
Application Record
2:00 Record Version
2:03 Object Type Reference
@@ -1073,81 +742,112 @@ Application Record
2:200 ObjectData Preview File Format
2:201 ObjectData Preview File Format Version
2:202 ObjectData Preview Data
-
Pre-ObjectData Descriptor Record
7:10 Size Mode
7:20 Max Subfile Size
7:90 ObjectData Size Announced
7:95 Maximum ObjectData Size
-
ObjectData Record
8:10 Subfile
-
Post ObjectData Descriptor Record
9:10 Confirmed ObjectData Size</code></pre>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/examples/index.html b/www/examples/index.html
index 0c8f27579..2bc9fcb8e 100644
--- a/www/examples/index.html
+++ b/www/examples/index.html
@@ -7,286 +7,425 @@
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
- <title>ImageMagick | </title>
- <meta name="description" content="">
+ <title>ImageMagick | Examples of ImageMagick Usage</title>
+ <meta name="description" content="Discover practical ImageMagick command‑line examples for converting, editing, composing, and transforming images. Learn real‑world usage patterns with scripts and demonstrations covering formats, effects, and automation.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
- <meta property="og:title" content="ImageMagick | ">
- <meta property="og:description" content="">
+
+ <!-- Open Graph -->
+ <meta property="og:title" content="ImageMagick | Examples of ImageMagick Usage">
+ <meta property="og:description" content="Discover practical ImageMagick command‑line examples for converting, editing, composing, and transforming images. Learn real‑world usage patterns with scripts and demonstrations covering formats, effects, and automation.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | ">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | ",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/examples/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover practical ImageMagick command‑line examples for converting, editing, composing, and transforming images. Learn real‑world usage patterns with scripts and demonstrations covering formats, effects, and automation.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/examples/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/examples/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5"></h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Examples of ImageMagick Usage</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover practical ImageMagick command‑line examples for converting, editing, composing, and transforming images. Learn real‑world usage patterns with scripts and demonstrations covering formats, effects, and automation.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">These examples of ImageMagick usage illustrate what you can do with an image from the command line, a program interface, or script. You can generate this image yourself with this <a href="../perl-magick/index.html">PerlMagick</a> script, <a href="../source/examples.perl">examples.pl</a>.</p>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Lead Section -->
+ <div class="row mb-4">
+ <div class="col-lg-10 mx-auto text-center">
+ <p class="lead text-body-secondary fs-5">
+ These examples of ImageMagick usage illustrate what you can do with an image from the command line, a program interface, or script. You can generate this image yourself with this <a href="../perl-magick/index.html" class="text-decoration-none fw-semibold">PerlMagick</a> script, <a href="https://imagemagick.org/source/examples.pl" class="text-decoration-none fw-semibold">examples.pl</a>.
+ </p>
+ </div>
+ </div>
-<ul><img class="img-fluid img-thumbnail" src="../image/examples.jpg" alt="[ImageMagick Examples]" width="734" height="2972" name="imagemagick-examples" /></ul>
+ <!-- Examples Showcase Card -->
+ <div class="row justify-content-center">
+ <div class="col-lg-10">
+ <div class="card im-card p-3 shadow-sm text-center bg-body-tertiary">
+ <div class="card-body">
+ <a href="https://imagemagick.org/image/examples.jpg" target="_blank" rel="noopener">
+ <img class="img-fluid img-thumbnail rounded shadow-sm" src="https://imagemagick.org/image/examples.jpg" alt="ImageMagick Examples Showcase" width="734" height="2972" name="imagemagick-examples" />
+ </a>
+ <p class="small text-body-secondary mt-3 mb-0">
+ Click on the image to view the full-resolution showcase of ImageMagick capabilities.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/export/index.html b/www/export/index.html
index a5ac9588a..5a8bab8ba 100644
--- a/www/export/index.html
+++ b/www/export/index.html
@@ -11,282 +11,428 @@
<meta name="description" content="ImageMagick software distribution is classified as ECCN 5D002.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Export Classification">
<meta property="og:description" content="ImageMagick software distribution is classified as ECCN 5D002.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Export Classification">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Export Classification",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/export/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick software distribution is classified as ECCN 5D002.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/export/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/export/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Export Classification</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Export Classification</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick software distribution is classified as ECCN 5D002.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">ImageMagick Studio LLC is a limited liability corporation based in the United States of America. All of our products are developed via online collaboration in public forums and distributed from a central server within the U.S. Therefore, U.S. export laws and regulations apply to our distributions and remain in force as products and technology are re-exported to different parties and places around the world. Information on export control classifications and associated restrictions may be required for exporting, re-exporting, record keeping, bundling/embedding of ImageMagick products, encryption reporting, and shipping documentation. More information on U.S. Export Regulations can be found at the <a href="http://www.bis.doc.gov/">U. S. Bureau of Industry and Security</a>.</p>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ ImageMagick Studio LLC is a limited liability corporation based in the United States of America. All products are developed via online collaboration in public forums and distributed from a central server within the U.S. Consequently, U.S. export laws and regulations apply to our distributions and remain in force as technology is re-exported worldwide. Export control information may be required for record keeping, bundling/embedding, encryption reporting, and shipping. Additional guidance can be found at the <a href="http://www.bis.doc.gov/">U.S. Bureau of Industry and Security</a>.
+ </p>
+ </div>
+ </div>
-<p>The <a href="https://github.com/ImageMagick/ImageMagick/">ImageMagick</a> software distribution is classified as <a href="http://www.access.gpo.gov/bis/ear/txt/ccl5-pt2.txt">ECCN 5D002</a>. However, ImageMagick Studio LLC makes no warranty or representation that this classification is accurate, current, or complete. ImageMagick is exported under the <a href="http://www.access.gpo.gov/bis/ear/txt/740.txt">TSU exception in EAR 740.13(e)</a> which applies to software containing or designed for use with encryption software that is publicly available as open source. TSU further provides that <var>Posting encryption source code and corresponding object code on the Internet (e.g., FTP or World Wide Web site) where it may be downloaded by anyone neither establishes "knowledge" of a prohibited export or reexport for purposes of this paragraph, nor triggers any "red flags" necessitating the affirmative duty to inquire[...]</var>. It is your obligation as the exporter to comply with the current applicable requirements of United States export rules and regulations.</p>
+ <!-- ECCN & Compliance Details -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Classification and Compliance</h2>
+ <p>
+ The <a href="https://github.com/ImageMagick/ImageMagick/">ImageMagick</a> software distribution is classified as <a href="http://www.access.gpo.gov/bis/ear/txt/ccl5-pt2.txt">ECCN 5D002</a>. However, ImageMagick Studio LLC makes no warranty or representation that this classification is accurate, current, or complete.
+ </p>
+ <p>
+ ImageMagick is exported under the <a href="http://www.access.gpo.gov/bis/ear/txt/740.txt">TSU exception in EAR 740.13(e)</a>, which applies to publicly available open-source software containing or designed for use with encryption. The TSU exception further notes:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <blockquote class="blockquote font-monospace text-body-secondary small mb-0">
+ "Posting encryption source code and corresponding object code on the Internet (e.g., FTP or World Wide Web site) where it may be downloaded by anyone neither establishes 'knowledge' of a prohibited export or reexport for purposes of this paragraph, nor triggers any 'red flags' necessitating the affirmative duty to inquire[...]"
+ </blockquote>
+ </div>
+ </div>
+
+ <p class="text-muted small mt-3">
+ It is your legal obligation as the exporter to comply with current applicable requirements under United States export rules and regulations.
+ </p>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/formats/index.html b/www/formats/index.html
index cb81fa4b5..d514e0891 100644
--- a/www/formats/index.html
+++ b/www/formats/index.html
@@ -8,2415 +8,828 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Image Formats</title>
- <meta name="description" content="Explore supported image formats in ImageMagick, including JPEG, PNG, TIFF, GIF, and more. Learn about read/write capabilities, compression options, and advanced features for cross‑platform image processing.">
+ <meta name="description" content="Explore all supported image formats, pseudo formats, built-in images, patterns, and embedded profiles in ImageMagick.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Image Formats">
- <meta property="og:description" content="Explore supported image formats in ImageMagick, including JPEG, PNG, TIFF, GIF, and more. Learn about read/write capabilities, compression options, and advanced features for cross‑platform image processing.">
+ <meta property="og:description" content="Explore all supported image formats, pseudo formats, built-in images, patterns, and embedded profiles in ImageMagick.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Image Formats">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Image Formats",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/formats/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore all supported image formats, pseudo formats, built-in images, patterns, and embedded profiles in ImageMagick.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/formats/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/formats/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Image Formats</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#colorspace">A Word about Colorspaces</a> • <a href="#supported">Supported Formats</a> • <a href="#pseudo">Pseudo Formats</a> • <a href="#builtin-images">Built-in Images</a> • <a href="#builtin-patterns">Built-in Patterns</a> • <a href="#embedded">Embedded Profiles</a></p>
-
-<p class="lead">ImageMagick uses an ASCII string known as <var>magick</var> (e.g. <code>GIF</code>) to identify file formats, algorithms acting as formats, built-in patterns, and embedded profile types. Support for some of the formats are delegated to libraries or external programs. The Installation Guide describes where to find these distributions and any special configuration options required.</p>
-
-<p>To get a complete listing of which image formats are supported on your system, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick identify -list format </samp></pre></pre>
-
-<p>On some platforms, ImageMagick automagically processes these extensions: .gz for Zip compression, .Z for Linux compression, .bz2 for block compression, and .pgp for PGP encryption. For example, a PNM image called image.pnm.gz is automagically uncompressed.</p>
-
-<h2><a class="anchor" id="colorspace"></a>A Word about Colorspaces</h2>
- <p>A majority of the image formats assume an sRGB
-colorspace (e.g. JPEG, PNG, etc.). A few support only linear RGB (e.g. EXR,
-DPX, CIN, HDR) or only linear GRAY (e.g. PGM). A few formats support CMYK.
-Then there is the occasional format that also supports LAB (that is CieLAB)
-(e.g. TIFF, PSD, JPG, JP2). To determine the colorspace of your image, use
-this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick identify -verbose image.jpg
-Image: image.jpg
-Format: JPEG (Joint Photographic Experts Group JFIF format)
-...
-Colorspace: sRGB </samp></pre>
-
-OR use the appropriate percent escape
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick image.jpg -print "%[colorspace]\n" null:
-sRGB </samp></pre>
-
-
-<p>When processing an image, be aware of the colorspace. Many image
-processing algorithms assume a linear RGB colorspace. Although you may get
-satisfactory results processing in the sRGB colorspace, you may get improved
-results in linear RGB (essentially sRGB with the gamma function removed). For
-example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick image.jpg -colorspace RGB -resize 50% -colorspace sRGB resize.jpg </samp></pre></pre>
-
-<p>As of IM 6.7.8-2 one can properly work in LAB colorspace whether or not
-Imagemagick is <a href="../high-dynamic-range/index.html">HDRI</a>-enabled. Essentially the A and
-B channels are stored with a 50% gray bias, to allow it to handle the
-negatives required by the format.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick lab.tif -resize 50% resize.jpg </samp></pre></pre> </ul>
-
-<p>Again, it may not make sense for some image processing operators to work
-directly in LAB space, but ImageMagick permits it and generally returns
-reasonable results.</p>
-
-<h2><a class="anchor" id="supported"></a>Supported Image Formats</h2>
-
-<p>ImageMagick supports reading over 100 major file formats (not
-including sub-formats). The following table provides a summary of
-the supported image formats.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tbody>
- <colgroup>
- <col style="width:12%">
- <col style="width:8%">
- <col style="width:25%">
- <col style="width:55%">
- </colgroup>
- <tr>
- <th>Tag</th>
- <th>Mode</th>
- <th>Description</th>
- <th>Notes</th>
- </tr>
-
- <tr>
- <td>AAI</td>
- <td>RW</td>
- <td>AAI Dune image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://www.adobe.com/creativecloud/file-types/image/vector/ai-file.html">AI</a></td>
- <td>RW</td>
- <td>Adobe Illustrator CS2</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/APNG">APNG</a></td>
- <td>RW</td>
- <td>Animated Portable Network Graphics</td>
- <td>Note, you must use an explicit image format specifier to read an APNG (<code>apng:myImage.apng</code>) image sequence, otherwise it assumes a PNG image and only reads the first frame. You must have <code>ffmpeg</code> in your execution path to process APNG images. </td>
- </tr>
-
- <tr>
- <td>ART</td>
- <td>RW</td>
- <td>PFS: 1st Publisher</td>
- <td>Format originally used on the Macintosh (MacPaint?) and later used for PFS: 1st Publisher clip art.</td>
- </tr>
-
- <tr>
- <td>ARW</td>
- <td>R</td>
- <td>Sony Digital Camera Alpha Raw Image Format</td>
- <td>Set <code>-define dng:use-camera-wb=true</code> to use the RAW-embedded color profile for Sony cameras. You can also set these options: <code>use-auto-wb</code>, <code>no-auto-bright</code>, and <code>output-color</code>.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.jmcgowan.com/avi.html">AVI</a></td>
- <td>R</td>
- <td>Microsoft Audio/Visual Interleaved</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/AV1#AV1_Image_File_Format_(AVIF)">AVIF</a></td>
- <td>RW</td>
- <td>Format derived from the keyframes of AV1 video</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>AVS</td>
- <td>RW</td>
- <td>AVS X image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>BAYER</td>
- <td>RW</td>
- <td>Raw mosaiced samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision. For signed pixel data, use <code>-define quantum:format=signed</code>.</td>
- </tr>
-
- <tr>
- <td><a href="https://bellard.org/bpg/">BPG</a></td>
- <td>RW</td>
- <td>Better Portable Graphics</td>
- <td>Use <a href="../command-line-options/index.html#quality">-quality</a> to specify the image compression quality. To meet the requirements of BPG, the quality argument divided by 2 (e.g. -quality 92 assigns 46 as the BPG compression.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/bmp/egff.htm">BMP, BMP2, BMP3</a></td>
- <td>RW</td>
- <td>Microsoft Windows bitmap</td>
- <td>By default the BMP format is version 4. Use BMP3 and BMP2 to write versions 3 and 2 respectively. Use <code>-define bmp:ignore-filesize</code> to ignore the filesize check.</td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/Braille_ASCII">BRF</a></td>
- <td>W</td>
- <td>Braille Ready Format</td>
- <td>Uses juxtaposition of 6-dot braille patterns (thus 6x2 dot matrices) to reproduce images, using the BRF ASCII Braille encoding.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/cals/egff.htm">CALS</a></td>
- <td>R</td>
- <td>Continuous Acquisition and Life-cycle Support Type 1 image</td>
- <td>Specified in MIL-R-28002 and MIL-PRF-28002. Standard blueprint archive format as used by the US military to replace microfiche.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.cineon.com/ff_draft.php">CIN</a></td>
- <td>RW</td>
- <td>Kodak Cineon Image Format</td>
- <td>Use <a href="../command-line-options/index.html#set">-set</a> to specify the image gamma or black and white points (e.g. <code>-set gamma 1.7</code>, <code>-set reference-black 95</code>, <code>-set reference-white 685</code>). Properties include cin:file.create_date, cin:file.create_time, cin:file.filename, cin:file.version, cin:film.count, cin:film.format, cin:film.frame_id, cin:film.frame_position, cin:film.frame_rate, cin:film.id, cin:film.offset, cin:film.prefix, cin:film.slate_info, cin:film.type, cin:image.label, cin:origination.create_date, cin:origination.create_time, cin:origination.device, cin:origination.filename, cin:origination.model, cin:origination.serial, cin:origination.x_offset, cin:origination.x_pitch, cin:origination.y_offset, cin:origination.y_pitch, cin:user.data.</td>
- </tr>
-
- <tr>
- <td>CIP</td>
- <td>W</td>
- <td>Cisco IP phone image format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>CMYK</td>
- <td>RW</td>
- <td>Raw cyan, magenta, yellow, and black samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td>CMYKA</td>
- <td>RW</td>
- <td>Raw cyan, magenta, yellow, black, and alpha samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td>CR2</td>
- <td>R</td>
- <td>Canon Digital Camera Raw Image Format</td>
- <td>Requires an explicit image format otherwise the image is interpreted as a TIFF image (e.g. cr2:image.cr2).</td>
- </tr>
-
- <tr>
- <td>CRW</td>
- <td>R</td>
- <td>Canon Digital Camera Raw Image Format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>CUBE</td>
- <td>R</td>
- <td>A lookup table containing math instructions to replace a color (based on RGB value) by another one. It's like a color grading preset. This process is done pixel by pixel with a very high accuracy.</td>
- <td>Select levels like this: cube:Vibrant.cube[8] for level 8</td>
- </tr>
-
- <tr>
- <td>CUR</td>
- <td>R</td>
- <td>Microsoft Cursor Icon</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>CUT</td>
- <td>R</td>
- <td>DR Halo</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="../content-provenance-authenticity/index.html">C2PA</a></td>
- <td>R</td>
- <td>C2PA Provenance Metadata</td>
- </tr>
-
- <tr>
- <td>DCM</td>
- <td>R</td>
- <td>Digital Imaging and Communications in Medicine (DICOM) image</td>
- <td>Used by the medical community for images like X-rays. ImageMagick sets the initial display range based on the Window Center (0028,1050) and Window Width (0028,1051) tags. Use <a href="../command-line-options/index.html#define">-define dcm:display-range=reset</a> to set the display range to the minimum and maximum pixel values. Use <a href="../command-line-options/index.html#define">-define dcm:rescale=true</a> to enable interpretation of the rescale slope and intercept settings in the file. Use <a href="../command-line-options/index.html#define">-define dcm:window=centerXwidth</a> to override the center and width settings in the file with your own values.</td>
- </tr>
-
- <tr>
- <td>DCR</td>
- <td>R</td>
- <td>Digital Camera Raw Image File</td>
- <td>Use DCRAW to leverage the raw photo decoder delegate program, e.g., dcraw:IMG_2600.dng</td>
- </tr>
-
- <tr>
- <td>DCX</td>
- <td>RW</td>
- <td>ZSoft IBM PC multi-page Paintbrush image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/DirectDraw_Surface">DDS</a></td>
- <td>RW</td>
- <td>Microsoft Direct Draw Surface</td>
- <td>Use <a href="../command-line-options/index.html#define">-define</a> to specify the compression (e.g. <code>-define dds:compression={dxt1, dxt5, none}</code>). Other defines include <code>dds:cluster-fit={true,false}</code>, <code>dds:weight-by-alpha={true,false}</code>, <code>dds:fast-mipmaps={true,false}</code>, and use <code>dds:mipmaps</code> to set the number of mipmaps (use <code>fromlist</code> to use the image list).</td>
-
- </tr>
-
- <tr>
- <td>DEBUG</td>
- <td>W</td>
- <td>Raw pixel debug file, likely only useful to the developers</td>
- <td></td>
- </tr>
-
- <tr>
- <td>DIB</td>
- <td>RW</td>
- <td>Microsoft Windows Device Independent Bitmap</td>
- <td>DIB is a <a href="#BMP">BMP</a> file without the <a href="#BMP">BMP</a> header. Used to support embedded images in compound formats like WMF.</td>
- </tr>
-
- <tr>
- <td><a href="https://djvu.org/">DJVU</a></td>
- <td>R</td>
- <td></td>
- <td></td>
- </tr>
-
- <tr>
- <td><a href="https://github.com/ImageMagick/MagickCache">DMR</a></td>
- <td>RW</td>
- <td>Digital media repository</td>
- <td>Requires the <a href="https://gitlab.com/ImageMagick/MagickCache">MagickCache</a> delegate library. Supported options include <code>dmr:path</code> (location of repository), <code>dmr:passkey</code> (key to open digital media repository), <code>dmr:passphrase</code> (optionally scramble or unscramble media resource), and <code>dmr:ttl</code> (time-to-live); Set the <code>dmr:meta</code> (metadata) property to store the resource as meta data.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.adobe.com/products/dng/main.html">DNG</a></td>
- <td>R</td>
- <td>Digital Negative</td>
- <td>Requires an explicit image format otherwise the image is interpreted as a TIFF image (e.g. dng:image.dng).</td>
- </tr>
-
- <tr>
- <td><a href="https://www.graphviz.org/">DOT</a></td>
- <td>R</td>
- <td>Graph Visualization</td>
- <td>Use <a href="../command-line-options/index.html#define">-define</a> to specify the layout engine (e.g. <code>-define dot:layout-engine=twopi</code>).</td>
- </tr>
-
- <tr>
- <td><a href="../motion-picture/index.html">DPX</a></td>
- <td>RW</td>
- <td>SMPTE Digital Moving Picture Exchange 2.0 (SMPTE 268M-2003)</td>
- <td>Use <a href="../command-line-options/index.html#set">-set</a> to specify the image gamma or black and white points (e.g. <code>-set gamma 1.7</code>, <code>-set reference-black 95</code>, <code>-set reference-white 685</code>).</td>
- </tr>
-
- <tr>
- <td>EMF</td>
- <td>R</td>
- <td>Microsoft Enhanced Metafile (32-bit)</td>
- <td>Only available under Microsoft Windows. Use <a href="../command-line-options/index.html#size">-size</a> command line option to specify the maximum width and height.</td>
- </tr>
-
- <tr>
- <td>EPDF</td>
- <td>RW</td>
- <td>Encapsulated Portable Document Format</td>
- <td></td>
- </tr>
-
- <tr>
- <td>EPI</td>
- <td>RW</td>
- <td>Adobe Encapsulated PostScript Interchange format</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>EPS</td>
- <td>RW</td>
- <td>Adobe Encapsulated PostScript</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>EPS2</td>
- <td>W</td>
- <td>Adobe Level II Encapsulated PostScript</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>EPS3</td>
- <td>W</td>
- <td>Adobe Level III Encapsulated PostScript</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>EPSF</td>
- <td>RW</td>
- <td>Adobe Encapsulated PostScript</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>EPSI</td>
- <td>RW</td>
- <td>Adobe Encapsulated PostScript Interchange format</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>EPT</td>
- <td>RW</td>
- <td>Adobe Encapsulated PostScript Interchange format with <a href="#TIFF">TIFF</a> preview</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.openexr.org/">EXR</a></td>
- <td>RW</td>
- <td>High dynamic-range (HDR) file format developed by Industrial Light & Magic</td>
- <td>See <a href="../high-dynamic-range/index.html">High Dynamic-Range Images</a> for details on this image format. To specify the output color type, use <code>-define exr:color-type={RGB,RGBA,YC,YCA,Y,YA,R,G,B,A}</code>. Use <a href="../command-line-options/index.html#sampling-factor">-sampling-factor</a> to specify the sampling rate for YC(A) (e.g. <code>2x2 or 4:2:0</code>). Requires the <a href="http://www.openexr.org/">OpenEXR</a> delegate library.</td>
- </tr>
-
- <tr>
- <td><a href="https://tools.suckless.org/farbfeld/">FARBFELD</a></td>
- <td>RW</td>
- <td>Farbfeld lossless image format</td>
- <td>sRGB 16-bit RGBA lossless image format</td>
- </tr>
-
- <tr>
- <td>FAX</td>
- <td>RW</td>
- <td>Group 3 TIFF</td>
- <td>This format is a fixed width of 1728 as required by the standard. See <a href="#TIFF">TIFF</a> format. Note that FAX machines use non-square pixels which are 1.5 times wider than they are tall but computer displays use square pixels so FAX images may appear to be narrow unless they are explicitly resized using a resize specification of <code>100x150%</code>.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.cv.nrao.edu/fits/">FITS</a></td>
- <td>RW</td>
- <td>Flexible Image Transport System</td>
- <td>To specify a single-precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 64 for a double-precision floating-point format.</td>
- </tr>
-
- <tr>
- <td>FL32</td>
- <td>RW</td>
- <td>FilmLight floating point image format</td>
- <td></td>
- </tr>
-
- <tr>
- <td><a href="https://flif.info/">FLIF</a></td>
- <td>RW</td>
- <td>Free Lossless Image Format</td>
- <td></td>
- </tr>
-
- <tr>
- <td>FPX</td>
- <td>RW</td>
- <td>FlashPix Format</td>
- <td>FlashPix has the option to store mega- and giga-pixel images at various resolutions in a single file which permits conservative bandwidth and fast reveal times when displayed within a Web browser. Requires the <a href="https://github.com/ImageMagick/libfpx">FlashPix SDK</a>. Specify the FlashPix viewing parameters with the <a href="../command-line-options/index.html#define">-define fpx:view</a>.</td>
- </tr>
-
- <tr>
- <td><a href="http://im.snibgo.com/fmttxt.htm">FTXT</a></td>
- <td>RW</td>
- <td>Read and write multispectral channels as formatted text</td>
- <td></td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/gif/egff.htm">GIF</a></td>
- <td>RW</td>
- <td>CompuServe Graphics Interchange Format</td>
- <td>8-bit RGB PseudoColor with up to 256 palette entries. Specify the format <code>GIF87</code> to write the older version 87a of the format. Use <a href="../command-line-options/index.html#transparent-color">-transparent-color</a> to specify the GIF transparent color (e.g. <code>-transparent-color wheat</code>).</td>
- </tr>
-
- <tr>
- <td>GPLT</td>
- <td>R</td>
- <td>Gnuplot plot files</td>
- <td>Requires <a href="http://www.gnuplot.info/">gnuplot4.0.tar.Z</a> or later.</td>
- </tr>
-
- <tr>
- <td>GRAY</td>
- <td>RW</td>
- <td>Raw gray samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision. For signed pixel data, use <code>-define quantum:format=signed</code>. ImageMagick supports scanline padding. If your image is not padded, you can instead read the image as a 1-D vector and reshape it: <samp>$ magick -size 38700x1 -depth 1 gray:image.bin -reshape 180x215 image.png</samp>.</td>
- </tr>
-
- <tr>
- <td>GRAYA</td>
- <td>RW</td>
- <td>Raw gray and alpha samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td>GROUP4</td>
- <td>RW</td>
- <td>Raw CCITT Group 4 samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> to specify the image width and height.</td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/RGBE_image_format">HDR</a></td>
- <td>RW</td>
- <td>Radiance RGBE image format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/RGBE_image_format">HDR</a></td>
- <td>RW</td>
- <td>Radiance RGBE image format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/High_Efficiency_Image_File_Format">HEIC</a></td>
- <td>RW</td>
- <td>Apple High efficiency Image Format</td>
- <td>Set the quality to 100 to produce lossless HEIC images. Requires the <a href="https://github.com/strukturag/libheif">libheif</a> delegate library. Recognized defines include <code>heic:cicp</code>, <code>heic:clli</code>, <code>heic:preserve-cicp={true,false}</code>, <code>heic:preserve-clli={true,false}</code>, <code>heic:preserve-orientation={true,false}</code>, <code>depth-image={true,false}</code>, <code>heic:speed</code>, and <code>heic:chroma</code>.</td>
- </tr>
-
- <tr>
- <td>HPGL</td>
- <td>R</td>
- <td>HP-GL plotter language</td>
- <td>Requires <a href="http://ftp.gnu.org/gnu/hp2xx">hp2xx-3.4.4.tar.gz</a></td>
- </tr>
-
- <tr>
- <td>HRZ</td>
- <td>RW</td>
- <td>Slow Scan TeleVision</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>HTML</td>
- <td>RW</td>
- <td>Hypertext Markup Language with a client-side image map</td>
- <td>Also known as <code>HTM</code>. Requires <a href="http://user.it.uu.se/~jan/html2ps.html">html2ps</a> to read. Note, the <code>\\xff</code> character is not permitted in any filename when exporting client-side image maps.</td>
- </tr>
-
- <tr>
- <td>ICO</td>
- <td>R</td>
- <td>Microsoft icon</td>
- <td>Also known as <code>ICON</code>.</td>
- </tr>
-
- <tr>
- <td>INFO</td>
- <td>W</td>
- <td>Format and characteristics of the image</td>
- <td></td>
- </tr>
-
- <tr>
- <td><a href="https://www.iso.org/obp/ui/#iso:std:iso:tr:11548:-1">ISOBRL</a></td>
- <td>W</td>
- <td>ISO/TR 11548-1 BRaiLle</td>
- <td>Uses juxtaposition of 8-dot braille patterns (thus 8x2 dot matrices) to reproduce images, using the ISO/TR 11548-1 Braille encoding.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.iso.org/obp/ui/#iso:std:iso:tr:11548:-1">ISOBRL6</a></td>
- <td>W</td>
- <td>ISO/TR 11548-1 BRaiLle 6 dots</td>
- <td>Uses juxtaposition of 6-dot braille patterns (thus 6x2 dot matrices) to reproduce images, using the ISO/TR 11548-1 Braille encoding.</td>
- </tr>
-
- <tr>
- <td>JBIG</td>
- <td>RW</td>
- <td>Joint Bi-level Image experts Group file interchange format</td>
- <td>Also known as <code>BIE</code> and <code>JBG</code>. Requires <a href="https://www.cl.cam.ac.uk/~mgk25/jbigkit/">jbigkit-1.6.tar.gz</a>.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.libmng.com/">JNG</a></td>
- <td>RW</td>
- <td>Multiple-image Network Graphics</td>
- <td>JPEG in a PNG-style wrapper with transparency. Requires libjpeg and libpng-1.0.11 or later, <a href="http://www.libpng.org/pub/png/libpng.html">libpng-1.2.5</a> or later recommended.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.openjpeg.org/">JP2</a></td>
- <td>RW</td>
- <td>JPEG-2000 JP2 File Format Syntax</td>
- <td>Specify the encoding options with the <a href="../command-line-options/index.html#define">-define</a> option. See <a href="../jp2/index.html">JP2 Encoding Options</a> for more details.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.openjpeg.org/">JPT</a></td>
- <td>RW</td>
- <td>JPEG-2000 Code Stream Syntax</td>
- <td>Specify the encoding options with the <a href="../command-line-options/index.html#define">-define</a> option See <a href="../jp2/index.html">JP2 Encoding Options</a> for more details.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.openjpeg.org/">J2C</a></td>
- <td>RW</td>
- <td>JPEG-2000 Code Stream Syntax</td>
- <td>Specify the encoding options with the <a href="../command-line-options/index.html#define">-define</a> option See <a href="../jp2/index.html">JP2 Encoding Options</a> for more details.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.openjpeg.org/">J2K</a></td>
- <td>RW</td>
- <td>JPEG-2000 Code Stream Syntax</td>
- <td>Specify the encoding options with the <a href="../command-line-options/index.html#define">-define</a> option See <a href="../jp2/index.html">JP2 Encoding Options</a> for more details.</td>
- </tr>
-
- <tr>
- <td><a href="https://jpeg.org/">JPEG</a></td>
- <td>RW</td>
- <td>Joint Photographic Experts Group JFIF format</td>
- <td>Note, JPEG is a lossy compression. In addition, you cannot create black and white images with JPEG nor can you save transparency.<br /><br /> Requires <a href="http://www.ijg.org/files/">jpegsrc.v8c.tar.gz</a>. You can set quality scaling for luminance and chrominance separately (e.g. <a href="../command-line-options/index.html#quality">-quality</a> 90,70). You can optionally define the DCT method, for example to specify the float method, use <a href="../command-line-options/index.html#define">-define jpeg:dct-method=float</a>. By default we compute optimal Huffman coding tables. Specify <a href="../command-line-options/index.html#define">-define jpeg:optimize-coding=false</a> to use the default Huffman tables. Specify <a href="../command-line-options/index.html#define">-define jpeg:arithmetic-coding=true</a> to enable Huffman optimization. Two other options include <a href="../command-line-options/index.html#define">-define jpeg:block-smoothing</a> and <a href="../command-line-options/index.html#define">-define jpeg:fancy-upsampling</a>. y default, ImageMagick generates JPEG images at 8‑bit depth. When <a href="../command-line-options/index.html#define">-define jpeg:high-bit-depth</a> is enabled, it will produce 12‑bit or 16‑bit images if the source image depth exceeds 8 bits. Set the sampling factor with <a href="../command-line-options/index.html#define">-define jpeg:sampling-factor</a>. You can size the image with <code>jpeg:size</code>, for example <a href="../command-line-options/index.html#define">-define jpeg:size=128x128</a>. To restrict the maximum file size, use <code>jpeg:extent</code>, for example <a href="../command-line-options/index.html#define">-define jpeg:extent=400KB</a>. To define one or more custom quantization tables, use <a href="../command-line-options/index.html#define">-define jpeg:q-table=<i>filename</i></a>. These values are multiplied by <a href="../command-line-options/index.html#quality">-quality</a> argument divided by 100.0. To avoid reading a particular associated image profile, use <a href="../command-line-options/index.html#define">-define profile:skip=<i>name</i></a> (e.g. profile:skip=ICC).</td>
- </tr>
-
- <tr>
- <td><a href="http://www.json.org/">JSON</a></td>
- <td>W</td>
- <td>JavaScript Object Notation, a lightweight data-interchange format</td>
- <td>Include additional attributes about the image with these defines: <a href="../command-line-options/index.html#define">-define json:locate</a>, <a href="../command-line-options/index.html#define">-define json:limit</a>, <a href="../command-line-options/index.html#define">-define json:moments</a>, or <a href="../command-line-options/index.html#define">-define json:features</a>. Specify the JSON model schema version with <a href="../command-line-options/index.html#define">-define json:version</a>. The current version is 1.0. Any version less than 1.0, returns the original JSON output which included misspelled labels.</td>
- </tr>
-
- <tr>
- <td><a href="https://jpeg.org/jpegxl/">JXL</a></td>
- <td>RW</td>
- <td>JPEG XL image coding system</td>
- <td>Requires the <a href="https://gitlab.com/wg1/jpeg-xl">JPEG XL</a> delegate library. Use <code>-define jxl:effort=<i>integer</i></code> to set the effort and <code>-define jxl:decoding-speed=<i>integer</i></code> to set the decoding speed. Use <code>-define jxl:distance=<i>integer</i></code> to set the JPEG XL encoder’s frame distance and <code>-define jxl:quality=<i>integer</i></code> to set the frame distance. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/JPEG_XR">JXR</a></td>
- <td>RW</td>
- <td>JPEG extended range</td>
- <td>Requires the <a href="https://jxrlib.codeplex.com/">jxrlib</a> delegate library. Put the JxrDecApp and JxrEncApp applications in your execution path.</p>
- </tr>
-
- <tr>
- <td>KERNEL</td>
- <td>W</td>
- <td>Morphology kernel format</td>
- <td>format suitable for a morphology kernel</td>
- </tr>
-
- <tr>
- <td>MAN</td>
- <td>R</td>
- <td>Linux reference manual pages</td>
- <td>Requires that GNU groff and Ghostscript are installed.</td>
- </tr>
-
- <tr>
- <td>MAT</td>
- <td>R</td>
- <td>MATLAB image format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="../miff/index.html">MIFF</a></td>
- <td>RW</td>
- <td>Magick multispectral image file format</td>
- <td>This format persists all image attributes known to ImageMagick. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td>MONO</td>
- <td>RW</td>
- <td>Bi-level bitmap in least-significant-byte first order</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/mng/">MNG</a></td>
- <td>RW</td>
- <td>Multiple-image Network Graphics</td>
- <td>A PNG-like Image Format Supporting Multiple Images, Animation and Transparent JPEG. Requires libpng-1.0.11 or later, <a href="http://www.libpng.org/pub/png/libpng.html">libpng-1.2.5</a> or later recommended. An interframe delay of 0 generates one frame with each additional layer composited on top. For motion, be sure to specify a non-zero delay.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.ffmpeg.org/">M2V</a></td>
- <td>RW</td>
- <td>Motion Picture Experts Group file interchange format (version 2)</td>
- <td>Requires <a href="https://www.ffmpeg.org/download.html">ffmpeg</a>.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.ffmpeg.org/">MPEG</a></td>
- <td>RW</td>
- <td>Motion Picture Experts Group file interchange format (version 1)</td>
- <td>Requires <a href="https://www.ffmpeg.org/download.html">ffmpeg</a>.</td>
- </tr>
-
- <tr>
- <td>MPC</td>
- <td>RW</td>
- <td>Magick Pixel Cache image file format</td>
- <td>The most efficient data processing pattern is a write-once, read-many-times pattern. The image is generated or copied from source, then various analyses are performed on the image pixels over time. MPC supports this pattern. MPC is the native <var>in-memory</var> ImageMagick uncompressed file format. This file format is identical to that used by ImageMagick to represent images in memory and is read by mapping the file directly into memory. The MPC format is not portable and is not suitable as an archive format. It is suitable as an intermediate format for high-performance image processing. The MPC format requires two files to support one image. Image attributes are written to a file with the extension <code>.mpc</code>, whereas, image pixels are written to a file with the extension <code>.cache</code>.</td>
- </tr>
-
- <tr>
- <td>MPO</td>
- <td>R</td>
- <td>Multi-picture Object</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>MPR</td>
- <td>RW</td>
- <td>Magick Persistent Registry</td>
- <td>This format permits you to write to and read images from memory. The filename is the registry key. The image persists until you explicitly delete it or the program exits. For example, let's use the MPR to create a checkerboard:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick \( -size 15x15 canvas:black canvas:white -append \) \
- \( +clone -flip \) +append -write mpr:checkers +delete \
- -size 240x240 tile:mpr:checkers -delete registry:checkers board.png </code></pre>
- </td>
- </tr>
-
- <tr>
- <td>MRW</td>
- <td>R</td>
- <td>Sony (Minolta) Raw Image File</td>
- <td>Set <code>-define dng:use-camera-wb=true</code> to use the RAW-embedded color profile for Sony cameras.</td>
- </tr>
-
- <tr>
- <td>MSL</td>
- <td>RW</td>
- <td>Magick Scripting Language</td>
- <td>MSL is the XML-based scripting language supported by the <a href="../conjure/index.html">conjure</a> utility. MSL requires the <a href="http://xmlsoft.org/">libxml2</a> delegate library.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/mtv/egff.htm">MTV</a></td>
- <td>RW</td>
- <td>MTV Raytracing image format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="../magick-vector-graphics/index.html">MVG</a></td>
- <td>RW</td>
- <td>Magick Vector Graphics.</td>
- <td>The native ImageMagick vector metafile format. A text file containing vector drawing commands accepted by <a href="../magick/index.html">magick</a>'s <a href="../command-line-options/index.html#draw">-draw</a> option.</td>
- </tr>
-
- <tr>
- <td>NEF</td>
- <td>R</td>
- <td>Nikon Digital SLR Camera Raw Image File</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>ORF</td>
- <td>R</td>
- <td>Olympus Digital Camera Raw Image File</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://www.freedesktop.org/wiki/Specifications/OpenRaster/">ORA</a></td>
- <td>R</td>
- <td>open exchange format for layered raster based graphics</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>OTB</td>
- <td>RW</td>
- <td>On-the-air Bitmap</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>P7</td>
- <td>RW</td>
- <td>Xv's Visual Schnauzer thumbnail format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PALM</td>
- <td>RW</td>
- <td>Palm pixmap</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/pam.html">PAM</a></td>
- <td>W</td>
- <td>Common 2-dimensional bitmap format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>CLIPBOARD</td>
- <td>RW</td>
- <td>Windows Clipboard</td>
- <td>Only available under Microsoft Windows.</td>
- </tr>
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/pbm.html">PBM</a></td>
- <td>RW</td>
- <td>Portable bitmap format (black and white)</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PCD</td>
- <td>RW</td>
- <td>Photo CD</td>
- <td>The maximum resolution written is 768x512 pixels since larger images require huffman compression (which is not supported). Use <a href="../command-line-options/index.html#bordercolor">-bordercolor</a> to specify the border color (e.g. <code>-bordercolor black</code>).</td>
- </tr>
-
- <tr>
- <td>PCDS</td>
- <td>RW</td>
- <td>Photo CD</td>
- <td>Decode with the sRGB color tables.</td>
- </tr>
-
- <tr>
- <td>PCL</td>
- <td>W</td>
- <td>HP Page Control Language</td>
- <td>Use <a href="../command-line-options/index.html#define">-define</a> to specify fit to page option (e.g. <code>-define pcl:fit-to-page=true</code>).</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/pcx/egff.htm">PCX</a></td>
- <td>RW</td>
- <td>ZSoft IBM PC Paintbrush file</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PDB</td>
- <td>RW</td>
- <td>Palm Database ImageViewer Format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PDF</td>
- <td>RW</td>
- <td>Portable Document Format</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read. By default, ImageMagick sets the page size to the MediaBox. Some PDF files, however, have a CropBox or TrimBox that is smaller than the MediaBox and may include white space, registration or cutting marks outside the CropBox or TrimBox. To force ImageMagick to use the CropBox or TrimBox rather than the MediaBox, use <a href="../command-line-options/index.html#define">-define</a> (e.g. <code>-define pdf:use-cropbox=true</code> or <code>-define pdf:use-trimbox=true</code>). Use <a href="../command-line-options/index.html#density">-density</a> to improve the appearance of your PDF rendering (e.g. -density 300x300). To specify direct conversion from Postscript to PDF, use <code>-define delegate:bimodel=true</code>. Use <code>-define pdf:fit-page=true</code> to scale to the page size. To immediately stop processing upon an error, set <code>-define pdf:stop-on-error</code> to <code>true</code>. To set the page direction preferences to right-to-left, try <code>-define pdf:page-direction=right-to-left</code>. By default, the PDF is printed using "screen" for annotations and images. Use <code>-define pdf:printed=true</code> to instead utilize the printer options. Use <a href="../command-line-options/index.html#alpha">-alpha remove </a> to remove transparency. When writing to a PDF, thumbnails are included by default. Generate thumbnails with <code>-define pdf:thumbnail=true</code>. To enable interpolation when rendering, use <code>-define pdf:interpolate=true</code>.</td>
- </tr>
-
- <tr>
- <td>PEF</td>
- <td>R</td>
- <td>Pentax Electronic File</td>
- <td>Requires an explicit image format otherwise the image is interpreted as a TIFF image (e.g. pef:image.pef).</td>
- </tr>
-
- <tr>
- <td>PES</td>
- <td>R</td>
- <td>Embrid Embroidery Format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PFA</td>
- <td>R</td>
- <td>Postscript Type 1 font (ASCII)</td>
- <td>Opening as file returns a preview image.</td>
- </tr>
-
- <tr>
- <td>PFB</td>
- <td>R</td>
- <td>Postscript Type 1 font (binary)</td>
- <td>Opening as file returns a preview image.</td>
- </tr>
-
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/pfm.html">PFM</a></td>
- <td>RW</td>
- <td>Portable float map format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/pgm.html">PGM</a></td>
- <td>RW</td>
- <td>Portable graymap format (gray scale)</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/pfm.html">PHM</a></td>
- <td>RW</td>
- <td>Portable float map format 16-bit half</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PICON</td>
- <td>RW</td>
- <td>Personal Icon</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PICT</td>
- <td>RW</td>
- <td>Apple Macintosh QuickDraw/PICT file</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PIX</td>
- <td>R</td>
- <td>Alias/Wavefront RLE image format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>Requires libpng-1.0.11 or later, <a href="http://www.libpng.org/pub/png/libpng.html">libpng-1.2.5</a> or later recommended. The PNG specification does not support pixels-per-inch units, only pixels-per-centimeter. To avoid reading a particular associated image profile, use <a href="../command-line-options/index.html#define">-define profile:skip=<i>name</i></a> (e.g. profile:skip=ICC). Set the maximum chunk size with <a href="../command-line-options/index.html#define">-define png:chunk-malloc-max=<i>value</i></a>.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG8</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>8-bit indexed with optional binary transparency</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG00</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>PNG inheriting subformat from original if possible</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG24</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>opaque or binary transparent 24-bit RGB</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG32</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>opaque or transparent 32-bit RGBA</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG48</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>opaque or binary transparent 48-bit RGB</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libpng.org/pub/png/">PNG64</a></td>
- <td>RW</td>
- <td>Portable Network Graphics</td>
- <td>opaque or transparent 64-bit RGB</td>
- </tr>
-
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/pnm.html">PNM</a></td>
- <td>RW</td>
- <td>Portable anymap</td>
- <td>PNM is a family of formats supporting portable bitmaps (PBM) , graymaps (PGM), and pixmaps (PPM). There is no file format associated with pnm itself. If PNM is used as the output format specifier, then ImageMagick automagically selects the most appropriate format to represent the image. The default is to write the binary version of the formats. Use <a href="../command-line-options/index.html#compress">-compress none</a> to write the ASCII version of the formats.</td>
- </tr>
-
- <tr>
- <td>POCKETMOD</td>
- <td>RW</td>
- <td>Pocketmod personal organizer format</td>
- <td>Example usage: <pre><samp>$ magick -density 300 pages?.pdf pocketmod:organize.pdf</samp></pre> </td>
- </tr>
-
- <tr>
- <td><a href="http://netpbm.sourceforge.net/doc/ppm.html">PPM</a></td>
- <td>RW</td>
- <td>Portable pixmap format (color)</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PS</td>
- <td>RW</td>
- <td>Adobe PostScript file</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read. To force ImageMagick to respect the crop box, use <a href="../command-line-options/index.html#define">-define</a> (e.g. <code>-define eps:use-cropbox=true</code>). Use <a href="../command-line-options/index.html#density">-density</a> to improve the appearance of your Postscript rendering (e.g. -density 300x300). Use <a href="../command-line-options/index.html#alpha">-alpha remove </a> to remove transparency. To specify direct conversion from PDF to Postscript, use <code>-define delegate:bimodel=true</code>.</td>
- </tr>
-
- <tr>
- <td>PS2</td>
- <td>RW</td>
- <td>Adobe Level II PostScript file</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td>PS3</td>
- <td>RW</td>
- <td>Adobe Level III PostScript file</td>
- <td>Requires <a href="https://www.ghostscript.com/download.html">Ghostscript</a> to read.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/">PSB</a></td>
- <td>RW</td>
- <td>Adobe Large Document Format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://www.adobe.com/devnet-apps/photoshop/fileformatashtml/">PSD</a></td>
- <td>RW</td>
- <td>Adobe Photoshop multispectral bitmap file</td>
- <td>Use <a href="../command-line-options/index.html#define">-define psd:alpha-unblend=off</a> to disable alpha blending in the merged image. Use <a href="../command-line-options/index.html#define">-define psd:additional-info=all|selective</a> to transfer additional information from the input PSD file to output PSD file. The 'selective' option will preserve all additional information that is not related to the geometry of the image. The 'all' option should only be used when the geometry of the image has not been changed. This option is helpful when transferring non-simple layers, such as adjustment layers from the input PSD file to the output PSD file. This define is available as of Imagemagick version 6.9.5-8. Use <a href="../command-line-options/index.html#define">-define psd:preserve-opacity-mask=true</a> to preserve the opacity mask of a layer and add it back to the layer when the image is saved.</td>
- </tr>
-
- <tr>
- <td>PTIF</td>
- <td>RW</td>
- <td>Pyramid encoded <a href="#TIFF">TIFF</a></td>
- <td>Multi-resolution <a href="#TIFF">TIFF</a> containing successively smaller versions of the image down to the size of an icon. Use <code>-define ptif:pyramid</code> to specify the min-base and levels of the pyramid, e.g. 64x4.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.photoworks.com/">PWP</a></td>
- <td>R</td>
- <td>Seattle File Works multi-image file</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://qoiformat.org/">QOI</a></td>
- <td>RW</td>
- <td>Quite OK Image Format</td>
- <td>Fast, lossless image compression.</td>
- </tr>
-
- <tr>
- <td>RAD</td>
- <td>R</td>
- <td>Radiance image file</td>
- <td>Requires that <i>ra_ppm</i> from the Radiance software package be installed.</td>
- </tr>
-
- <tr>
- <td>RAF</td>
- <td>R</td>
- <td>Fuji CCD-RAW Graphic File</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>RAW</td>
- <td>R</td>
- <td>Raw</td>
- <td></td>
- </tr>
-
- <tr>
- <td>RGB</td>
- <td>RW</td>
- <td>Raw red, green, and blue samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td>RGB565</td>
- <td>R</td>
- <td>Raw red, green, blue pixels in the 5-6-5 format</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> to specify the image width and height.</td>
- </tr>
-
- <tr>
- <td>RGBA</td>
- <td>RW</td>
- <td>Raw red, green, blue, and alpha samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth. To specify a single precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 32 for single precision floats, 64 for double precision, and 16 for half-precision.</td>
- </tr>
-
- <tr>
- <td>RGF</td>
- <td>RW</td>
- <td>LEGO Mindstorms EV3 Robot Graphics File</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>RLA</td>
- <td>R</td>
- <td>Alias/Wavefront image file</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>RLE</td>
- <td>R</td>
- <td>Utah Run length encoded image file</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/Scitex_CT">SCT</a></td>
- <td>R</td>
- <td>Scitex Continuous Tone Picture</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://www.photoworks.com/">SFW</a></td>
- <td>R</td>
- <td>Seattle File Works image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://shirakumo.org/docs/sf3/">SF3</a></td>
- <td>R</td>
- <td>The SF3 image format is part of the Simple File Format Family.</td>
- <td>SF3 is designed to be lightweight and easy to parse, with a human-readable text-based structure that focuses on simplicity over compression. It’s especially useful for fast prototyping or environments where minimal overhead is key.</td>
- </tr>
-
- <tr>
- <td>SGI</td>
- <td>RW</td>
- <td>Irix RGB image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>SHTML</td>
- <td>W</td>
- <td>Hypertext Markup Language client-side image map</td>
- <td>Used to write HTML clickable image maps based on a the output of <a href="../montage/index.html">montage</a> or a format which supports tiled images such as <a href="#MIFF">MIFF</a>.</td>
- </tr>
-
- <tr>
- <td>SID, MrSID</td>
- <td>R</td>
- <td>Multiresolution seamless image</td>
- <td>Decoding is delegated to external software: the <a href="https://www.lizardtech.com/developer">mrsidgeodecode</a> command line utility available from the LizardTech/Extensis MrSID Decode SDK, or <a href="https://gdal.org/en/stable/programs/gdal_translate.html">gdal_translate</a> built with the MrSID SDK.</td>
- </tr>
-
- <tr>
- <td>SPARSE-COLOR</td>
- <td>W</td>
- <td>Raw text file</td>
- <td>Format compatible with the <a href="../command-line-options/index.html#sparse-color">-sparse-color</a> option. Lists only non-fully-transparent pixels.</td>
- </tr>
-
- <tr>
- <td>STRIMG</td>
- <td>RW</td>
- <td>String to images and back</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>SUN</td>
- <td>RW</td>
- <td>SUN Rasterfile</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://www.w3.org/Graphics/SVG">SVG</a></td>
- <td>RW</td>
- <td>Scalable Vector Graphics</td>
- <td>By default, ImageMagick renders SVGs with <a href="https://inkscape.org/">Inkscape</a> if it is in your execution path; otherwise <a href="https://gitlab.gnome.org/GNOME/librsvg">RSVG</a>. If neither is available, ImageMagick reverts to its internal SVG renderer (called MSVG). The default resolution is 96 dpi. Use the <a href="../command-line-options/index.html#size">-size</a> command line option to specify the maximum width and height. (<code>-size</code> is currently ignored by the Inkscape renderer due to a limitation on the Inkscape side). The SVG standard expects to draw over a transparent background. Set <a href="../command-line-options/index.html#background">-background none</a> to comply with the standard. If you want to substitute entities and you trust the SVG source, enable this option: <code>-define svg:substitute-entities=true</code>. If you want to render a very large SVG and you trust the source, enable this option: <code>-define svg:parse-huge=true</code>. Enable embedding if your SVG embeds another SVG and you trust the source: <code>-define svg:embedding=true</code>. If RSVG is installed and you want to render an SVG using RSVG, add <code>rsvg:</code> just before the file name. If you want to render an SVG using MSVG, add <code>msvg:</code> just before the file name.</td>
- </tr>
-
- <tr>
- <td>TEXT</td>
- <td>R</td>
- <td>text file</td>
- <td>Requires an explicit format specifier to read, e.g. text:README.txt.</td>
- </tr>
-
- <tr>
- <td>TGA</td>
- <td>RW</td>
- <td>Truevision Targa image</td>
- <td>Also known as formats <code>ICB</code>, <code>VDA</code>, and <code>VST</code>. Use <code>-define tga:preserve-orientation=true</code> to preserve the image orientation.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.libtiff.org/">TIFF</a></td>
- <td>RW</td>
- <td>Tagged image file multispectral format</td>
- <td>Also known as <code>TIF</code>. Requires <a href="http://www.libtiff.org/">tiff-v3.6.1.tar.gz</a> or later. Use <a href="../command-line-options/index.html#define">-define</a> to specify the rows per strip (e.g. <code>-define tiff:rows-per-strip=8</code>). To define the tile geometry, use for example, <code>-define tiff:tile-geometry=128x128</code>. To specify a <var>signed</var> format, use <code>-define quantum:format=signed</code>. To specify a single-precision floating-point format, use <code>-define quantum:format=floating-point</code>. Set the depth to 64 for a double-precision floating-point format. Use <code>-define quantum:polarity=min-is-black</code> or <code>-define quantum:polarity=min-is-white</code> toggle the photometric interpretation for a bilevel image. Specify the extra samples as associated or unassociated alpha with, for example, <code>-define tiff:alpha=unassociated</code>. Set the fill order with <code>-define tiff:fill-order=msb|lsb</code>. Set the TIFF endianness with <code>-define tiff:endian=msb|lsb</code>. Use <code>-define tiff:exif-properties=false</code> to skip reading the EXIF properties. Use <code>-define tiff:gps-properties=false</code> to skip reading the GPS properties. You can set a number of TIFF software attributes including document name, host computer, artist, timestamp, make, model, software, and copyright. For example, <a href="../command-line-options/index.html#set">-set tiff:software "My Company"</a>. If you want to ignore certain TIFF tags, use this option: <code>-define tiff:ignore-tags=comma-separated-list-of-tag-IDs</code>. Since version 6.9.1-4 there is support for reading photoshop layers in TIFF files, this can be disabled with <code>-define tiff:ignore-layers=true</code>. To preserve compression of the source image, use: <code>-define tiff:preserve-compression=true</code>.</td>
- </tr>
-
- <tr>
- <td>TIM</td>
- <td>R</td>
- <td>PSX TIM file</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://freetype.org/">TTF</a></td>
- <td>R</td>
- <td>TrueType font file</td>
- <td>Requires <a href="https://freetype.org/">freetype 2</a>. Opening as file returns a preview image. Use <a href="../command-line-options/index.html#set">-set</a> if you do not want to hint glyph outlines after their scaling to device pixels (e.g. <code>-set type:hinting off</code>).</td>
- </tr>
-
- <tr>
- <td>TXT</td>
- <td>RW</td>
- <td>Multispectral raw text file</td>
- <td>Use <a href="../command-line-options/index.html#define">-define</a> to specify the color compliance (e.g. <code>-define txt:compliance=css</code>).</td>
- </tr>
-
- <tr>
- <td><a href="http://www.unicode.org/charts/PDF/U2800.pdf">UBRL</a></td>
- <td>W</td>
- <td>Unicode BRaiLle</td>
- <td>Uses juxtaposition of 8-dot braille patterns (thus 8x2 dot matrices) to reproduce images, using the Unicode Braille encoding.</td>
- </tr>
-
- <tr>
- <td><a href="http://www.unicode.org/charts/PDF/U2800.pdf">UBRL6</a></td>
- <td>W</td>
- <td>Unicode BRaiLle 6 dots</td>
- <td>Uses juxtaposition of 6-dot braille patterns (thus 6x2 dot matrices) to reproduce images, using the Unicode Braille encoding.</td>
- </tr>
-
- <tr>
- <td><a href="https://developer.android.com/media/platform/hdr-image-format">UHDR</a></td>
- <td>RW</td>
- <td>Ultra HDR</td>
- <td>Requires the <a href="https://github.com/google/libultrahdr">libultrahdr</a> delegate library. Recognized <a href="../defines/index.html">defines</a> include <code>uhdr:hdr-color-gamut</code>, <code>uhdr:hdr-color-transfer</code>, <code>uhdr:sdr-color-gamut</code>, <code>uhdr:gainmap-quality</code>, <code>uhdr:gainmap-gamma</code>, <code>uhdr:gainmap-min-content-boost</code>, <code>uhdr:gainmap-max-content-boost</code>, and <code>uhdr:target-display-peak-brightness</code>.</td>
- </tr>
-
- <tr>
- <td>UIL</td>
- <td>W</td>
- <td>X-Motif UIL table</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>UYVY</td>
- <td>RW</td>
- <td>Interleaved YUV raw image</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> command line options to specify width and height. Use <a href="../command-line-options/index.html#sampling-factor">-sampling-factor</a> to set the desired subsampling (e.g. -sampling-factor 4:2:2).</td>
- </tr>
-
- <tr>
- <td>VICAR</td>
- <td>RW</td>
- <td>VICAR rasterfile format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>VIDEO</td>
- <td>RW</td>
- <td>Various video formats</td>
- <td>Video formats such as APNG, AVI, MP4, WEBM, etc. Refer to <a href="../defines/index.html">defines</a> for a description of these defines: <code>video:intermediate-format</code>, <code>video:pixel-format</code>, and <code>video:vsync</code> defines, that can affect the operation on these video formats.</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/viff/egff.htm">VIFF</a></td>
- <td>RW</td>
- <td>Khoros Visualization Image File Format</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="http://www.openmobilealliance.org/Technical/wapindex.aspx">WBMP</a></td>
- <td>RW</td>
- <td>Wireless bitmap</td>
- <td>Support for uncompressed monochrome only.</td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/JPEG_XR">WDP</a></td>
- <td>RW</td>
- <td>JPEG extended range</td>
- <td>Requires the <a href="https://jxrlib.codeplex.com/">jxrlib</a> delegate library. Put the JxrDecApp and JxrEncApp applications in your execution path. </td>
- </tr>
-
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/WebP">WEBP</a></td>
- <td>RW</td>
- <td>Weppy image format</td>
- <td>Requires the <a href="https://developers.google.com/speed/webp/download">WEBP</a> delegate library. The muxing delegate library is required to read animated Webp image containers. Specify the encoding options with the <a href="../command-line-options/index.html#define">-define</a> option See <a href="../webp/index.html">WebP Encoding Options</a> for more details.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/wmf/egff.htm">WMF</a></td>
- <td>R</td>
- <td>Windows Metafile</td>
- <td>Requires <a href="http://sourceforge.net/projects/wvware/">libwmf</a>. By default, renders WMF files using the dimensions specified by the metafile header. Use the -density option to adjust the output resolution, and thereby adjust the output size. The default output resolution is 72DPI so <code>-density 144</code> results in an image twice as large as the default. Use <code>-background color</code> to specify the WMF background color (default white) or <code>-texture filename</code> to specify a background texture image.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/wpg/egff.htm">WPG</a></td>
- <td>R</td>
- <td>Word Perfect Graphics File</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>X</td>
- <td>RW</td>
- <td>display or import an image to or from an X11 server</td>
- <td>Use <a href="../command-line-options/index.html#define">-define</a> to obtain the image from the root window (e.g. <code>-define x:screen=true</code>). Set <code>x:silent=true</code> to turn off the beep when importing an image.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/xbm/egff.htm">XBM</a></td>
- <td>RW</td>
- <td>X Windows system bitmap, black and white only</td>
- <td>Used by the X Windows System to store monochrome icons.</td>
- </tr>
-
- <tr>
- <td>XCF</td>
- <td>R</td>
- <td>GIMP image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/xpm/egff.htm">XPM</a></td>
- <td>RW</td>
- <td>X Windows system pixmap</td>
- <td>Also known as <code>PM</code>. Used by the X Windows System to store color icons.</td>
- </tr>
-
- <tr>
- <td><a href="https://www.fileformat.info/format/xwd/egff.htm">XWD</a></td>
- <td>RW</td>
- <td>X Windows system window dump</td>
- <td>Used by the X Windows System to save/display screen dumps.</td>
- </tr>
-
- <tr>
- <td>X3F</td>
- <td>R</td>
- <td>Sigma Camera RAW Picture File</td>
- <td> </td>
- </tr>
-
- <tr>
- <td><a href="https://yaml.org/">YAML</a></td>
- <td>W</td>
- <td>human-readable data-serialization language</td>
- <td>Include additional attributes about the image with these defines: <a href="../command-line-options/index.html#define">-define yaml:locate</a>, <a href="../command-line-options/index.html#define">-define yaml:limit</a>, <a href="../command-line-options/index.html#define">-define yaml:moments</a>, or <a href="../command-line-options/index.html#define">-define yaml:features</a>. Specify the JSON model schema version with <a href="../command-line-options/index.html#define">-define yaml:version</a>. The current version is 1.0.</td>
- </tr>
-
- <tr>
- <td>YCbCr</td>
- <td>RW</td>
- <td>Raw Y, Cb, and Cr samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth.</td>
- </tr>
-
- <tr>
- <td>YCbCrA</td>
- <td>RW</td>
- <td>Raw Y, Cb, Cr, and alpha samples</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> to specify the image width, height, and depth.</td>
- </tr>
-
- <tr>
- <td>YUV</td>
- <td>RW</td>
- <td>CCIR 601 4:1:1</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> and <a href="../command-line-options/index.html#depth">-depth</a> command line options to specify width, height, and depth. Use <a href="../command-line-options/index.html#sampling-factor">-sampling-factor</a> to set the desired subsampling (e.g. -sampling-factor 4:2:2).</td>
- </tr>
- </tbody>
-</table>
-</div>
-<br/>
-<h2><a class="anchor" id="pseudo"></a>Pseudo-image Formats</h2>
-
-<p>ImageMagick supports a number of image format specifications which refer to images prepared via an algorithm, or input/output targets. The following table lists these pseudo-image formats:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:15%">
- <col style="width:8%">
- <col style="width:25%">
- <col style="width:52%">
- </colgroup>
- <tr>
- <th>Tag</th>
- <th>Mode</th>
- <th>Description</th>
- <th>Notes</th>
- </tr>
-
- <tr>
- <td>ASHLAR</td>
- <td>W</td>
- <td>Image sequence laid out in continuous irregular courses</td>
- <td>By default, a reasonable canvas size and border width is determined relative to the image collection you provide. You can explicitly set the canvas size and border width by appending to the filename, e.g. <code>ashlar:canvas.png[1024x768+4+4]</code>. By default, alignment is along the left edge. Use <code>-define ashlar:best-fit=true</code> to align on both the left and right edges. You can label the image tiles with, for example, <code>-label %f</code>. By default, all image tiles are rendered on a single canvas. Use <code>-define ashlar:tiles=50</code>, for example, to render at most 50 tiles per canvas.</td>
- </tr>
-
- <tr>
- <td>CANVAS</td>
- <td>R</td>
- <td>Canvas image of specified color</td>
- <td>Useful to create solid color <var>canvas</var> images. Use
- <a href="../command-line-options/index.html#size" >-size</a> and <a
- href="../command-line-options/index.html#depth" >-depth</a> to specify the
- image width, height, and depth. Example canvas color specifications
- include <code>canvas:red</code> and <code>canvas:#FF0000</code>.<br/>
-
- If no color is specified a '<code>white</code>' canvas image is
- generated. If no <a href="../command-line-options/index.html#size" >-size</a> is specified
- a single pixel image of the specified color is generated.</td>
-
- </tr>
-
- <tr>
- <td>CAPTION</td>
- <td>R</td>
- <td>Image caption</td>
- <td>Use <code>-define caption:split=true</code> to split text if required to fit caption on the canvas</td>
- </tr>
-
- <tr>
- <td>CLIP</td>
- <td>RW</td>
- <td>Clip path of image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>CLIPBOARD</td>
- <td>RW</td>
- <td>Clipboard</td>
- <td></td>
- </tr>
-
- <tr>
- <td>FRACTAL</td>
- <td>R</td>
- <td>Plasma fractal image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>GRADIENT</td>
- <td>R</td>
- <td>Gradual passing from one shade to another</td>
- <td>Returns a rendered linear or radial top-to-bottom <a href="../gradient/index.html">gradient image</a> using the specified image size.</td>
-
- </tr>
-
- <tr>
- <td>HALD</td>
- <td>R</td>
- <td>Identity Hald CLUT Image</td>
- <td>Select levels like this: hald:[8] for level 8.</td>
- </tr>
-
- <tr>
- <td>HISTOGRAM</td>
- <td>W</td>
- <td>Histogram of the image</td>
- <td>The histogram includes the unique colors of the image as an image comment. If you have no need for the unique color list, use <code>-define histogram:unique-colors=false</code> to forego this expensive operation.</td>
- </tr>
-
- <tr>
- <td>INLINE</td>
- <td>RW</td>
- <td>Base64-encoded inline image</td>
- <td>The inline image look similar to <code>inline:data:;base64,/9j/4AAQSk...knrn//2Q==</code>. If the inline image exceeds 5000 characters, reference it from a file (e.g. <code>inline:inline.txt</code>). You can also write a base64-encoded image. Embed the mime type in the filename, for example, <pre><samp>$ magick myimage inline:jpeg:myimage.txt</samp></pre>.</td>
- </tr>
-
- <tr>
- <td>LABEL</td>
- <td>R</td>
- <td>Text image format</td>
- <td>Specify the desired text as the filename (e.g. <code>label:"This a label"</code>).</td>
- </tr>
-
- <tr>
- <td>MAP</td>
- <td>RW</td>
- <td>Colormap intensities and indices</td>
- <td>Set <a href="../command-line-options/index.html#depth">-depth</a> to set the sample size of the intensities; indices are 16-bit if colors > 256.</td>
- </tr>
-
- <tr>
- <td>MASK</td>
- <td>RW</td>
- <td>Grayscale image mask. A sequence is emitted if the source image has more than one mask.</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>MATTE</td>
- <td>W</td>
- <td>MATTE format</td>
- <td>Write only.</td>
- </tr>
-
- <tr>
- <td>NULL</td>
- <td>RW</td>
- <td>NULL image</td>
- <td>Useful for creating blank tiles with <a href="../montage/index.html">montage</a> (use <code>NULL:</code>). Also useful as an output format when evaluating image read performance.</td>
- </tr>
-
- <tr>
- <td>OPEN</td>
- <td>W</td>
- <td>Display image to your computer screen</td>
- <td>Only supported under MacOS X.</td>
- </tr>
-
- <tr>
- <td>PANGO</td>
- <td>R</td>
- <td>Image caption</td>
- <td>You can configure the caption layout with these defines: <code>-define pango:auto-dir=</code><var>true/false</var>, <code>-define pango:ellipsize=</code><var>start/middle/end</var>, <code>-define pango:gravity-hint=</code><var>natural/strong/line</var>, <code>-define pango:hinting=</code><var>none/auto/full</var>, <code>-define pango:indent=</code><var>points</var>, <code>-define pango:justify=</code><var>true/false</var>, <code>-define pango:language=</code><var>en_US/etc</var>, <code>-define pango:markup=</code><var>true/false</var>, <code>-define pango:single-paragraph=</code><var>true/false</var>, <code>-define pango:wrap=</code><var>word/char/word-char</var> and <code>-define pango:align=</code><var>left/center/right</var>.</td>
- </tr>
-
- <tr>
- <td>PLASMA</td>
- <td>R</td>
- <td>Plasma fractal image</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>PREVIEW</td>
- <td>W</td>
- <td>Show a preview an image enhancement, effect, or f/x</td>
- <td>Creates a preview montage of images prepared over a parametric range in order to assist with parameter selection. Specify the desired
- preview type via the -preview option).</td>
- </tr>
-
- <tr>
- <td>PRINT</td>
- <td>W</td>
- <td>Send image to your computer printer</td>
- <td>Linux users may set the PRINTER (for 'lpr') or LPDEST (for 'lp') environment variables to select the desired printer.</td>
- </tr>
-
- <tr>
- <td>SCAN</td>
- <td>R</td>
- <td>Import image from a scanner device</td>
- <td>Requires <a href="http://www.sane-project.org/">SANE</a> Specify the device name and path as the filename (e.g. <code>scan:'hpaio:/usb/Officejet_6200_series?serial=CN4ATCE3G20453'</code>).</td>
- </tr>
-
- <tr>
- <td>RADIAL_GRADIENT</td>
- <td>R</td>
- <td>Gradual radial passing from one shade to another</td>
- <td>Returns a rendered radial top-to-bottom <a href="../gradient/index.html">gradient image</a> using the specified image size.</td>
- </tr>
-
- <tr>
- <td>SCANX</td>
- <td>R</td>
- <td>Import image from the default scanner device</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>SCREENSHOT</td>
- <td>R</td>
- <td>an image that shows the contents of a computer display. Under Windows, if you have multiple monitors, it returns a screenshot for each monitor.</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>STEGANO</td>
- <td>R</td>
- <td>Steganographic image</td>
- <td>Use <a href="../command-line-options/index.html#size">-size</a> command line option to specify width, height, and offset of the steganographic image</td>
- </tr>
-
- <tr>
- <td>TILE</td>
- <td>R</td>
- <td>Tiled image</td>
- <td>Create a tiled version of an image at by tiling a image. Use <a href="../command-line-options/index.html#size">-size</a> to specify the tiled image size. Tiles are composited on an image background and therefore is responsive to the <a href="../command-line-options/index.html#compose">-compose</a> option. The image is specified similar to
- <code>TILE:image.miff</code>.</td>
- </tr>
-
- <tr>
- <td>UNIQUE</td>
- <td>W</td>
- <td>Write only unique pixels to the image file.</td>
- <td> </td>
- </tr>
-
- <tr>
- <td>VID</td>
- <td>RW</td>
- <td>Visual Image Directory</td>
- <td>Used to create a thumbnailed directory (tiled thumbnails) of a set of images which may be used to select images to view via the <a href="../display/index.html">display</a> program, or saved to a <a href="#MIFF">MIFF</a> or <a href="#SHTML">SHTML</a> file.</td>
- </tr>
-
- <tr>
- <td>WIN</td>
- <td>RW</td>
- <td>Select image from or display image to your computer screen</td>
- <td>Only supported under Microsoft Windows.</td>
- </tr>
-
- <tr>
- <td>X</td>
- <td>RW</td>
- <td>Select image from or display image to your X server screen</td>
- <td>Also see the <a href="../import/index.html">import</a> and <a href="../display/index.html">display</a>
- programs.</td>
- </tr>
-
- <tr>
- <td>XC</td>
- <td>R</td>
- <td>Canvas image of specified color</td>
- <td>An backward compatible alias for the '<code>canvas:</code>'
- pseudo-file format, used to create a solid color <var>canvas</var> image.
- </td>
- </tr>
-</table>
-</div>
-
-<br/>
-<h2><a class="anchor" id="builtin-images"></a>Built-in Images</h2>
-
-<p>ImageMagick includes a number of built-in (embedded) images which may be referenced as if they were an image file. The <code>magick:</code> format tag may be used via the syntax <code>magick:</code><var>name</var> to request an embedded image (e.g. <code>magick:logo</code>). For backwards compatibility, the image specifications <code>GRANITE:</code>, <code>LOGO:</code>, <code>NETSCAPE:</code>, and <code>ROSE:</code> may also be used to request images with those names.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:12%">
- <col style="width:8%">
- <col style="width:40%">
- <col style="width:40%">
- </colgroup>
- <tr>
- <th>Tag</th>
- <th>Mode</th>
- <th>Description</th>
- <th>Notes</th>
- </tr>
-
- <tr>
- <td>GRANITE</td>
- <td>R</td>
- <td>128x128 granite texture pattern</td>
- <td><img src="../image/granite.png" width="64" height="64" alt="GRANITE"/></td>
- </tr>
-
- <tr>
- <td><a href="../image/logo.png">LOGO</a></td>
- <td>R</td>
- <td>ImageMagick Logo, 640x480</td>
- <td><img src="../image/logo.jpg" width="123" height="118" alt="Logo"/></td>
- </tr>
-
- <tr>
- <td> NETSCAPE</td>
- <td>R</td>
- <td>image using colors in Netscape 216 (6x6x6 ) color cube, 216x144</td>
- <td>Most commonly used with the <a href="../magick/index.html">magick</a> and <a href="../mogrify/index.html">magick mogrify</a> programs with the <a href="../command-line-options/index.html#map">-map</a> option to create <var>web safe</var> images.</td>
- </tr>
-
- <tr>
- <td>ROSE</td>
- <td>R</td>
- <td>Picture of a rose, 70x46</td>
- <td><img src="../image/rose.png" width="70" height="46" alt="ROSE"/></td>
- </tr>
-
- <tr>
- <td><a href="../image/wizard.png">WIZARD</a></td>
- <td>R</td>
- <td>ImageMagick Wizard, 480x640</td>
- <td><img src="../image/wizard.jpg" width="125" height="167" alt="Logo"/></td>
- </tr>
-
-</table></div>
-
-<br/>
-<h2><a class="anchor" id="builtin-patterns"></a>Built-in Patterns</h2>
-
-<p>ImageMagick includes a number of built-in (embedded) patterns which may be referenced as if they were an image file. The <code>pattern:</code> format tag may be used via the syntax <code>pattern:</code><var>name</var> to request an embedded pattern (e.g. <code>pattern:checkerboard</code>). The pattern size is controlled with the <a href="../command-line-options/index.html#size">-size</a> command line option.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:20%">
- <col style="width:8%">
- <col style="width:52%">
- <col style="width:20%">
- </colgroup>
- <tr>
- <th>Tag</th>
- <th>Mode</th>
- <th>Description</th>
- <th>Notes</th>
- </tr>
-
- <tr>
- <td>BRICKS</td>
- <td>R</td>
- <td>brick pattern, 16x16</td>
- <td><img src="../image/patterns/bricks.png" width="100" height="26" alt="BRICKS" /></td>
- </tr>
-
- <tr>
- <td>CHECKERBOARD</td>
- <td>R</td>
- <td>checkerboard pattern, 30x30</td>
- <td><img src="../image/patterns/checkerboard.png" width="100" height="26" alt="CHECKERBOARD" /></td>
- </tr>
-
- <tr>
- <td>CIRCLES</td>
- <td>R</td>
- <td>circles pattern, 16x16</td>
- <td><img src="../image/patterns/circles.png" width="100" height="26" alt="CIRCLES"/></td>
- </tr>
-
- <tr>
- <td>CROSSHATCH</td>
- <td>R</td>
- <td>crosshatch pattern, 8x4</td>
- <td><img src="../image/patterns/crosshatch.png" width="100" height="26" alt="CROSSHATCH" /></td>
- </tr>
-
- <tr>
- <td>CROSSHATCH30</td>
- <td>R</td>
- <td>crosshatch pattern with lines at 30 degrees, 8x4</td>
- <td><img src="../image/patterns/crosshatch30.png" width="100" height="26" alt="CROSSHATCH30" /></td>
- </tr>
-
- <tr>
- <td>CROSSHATCH45</td>
- <td>R</td>
- <td>crosshatch pattern with lines at 45 degrees, 8x4</td>
- <td><img src="../image/patterns/crosshatch45.png" width="100" height="26" alt="CROSSHATCH45" /></td>
- </tr>
-
- <tr>
- <td>FISHSCALES</td>
- <td>R</td>
- <td>fish scales pattern, 16x8</td>
- <td><img src="../image/patterns/fishscales.png" width="100" height="26" alt="FISHSCALES" /></td>
- </tr>
-
- <tr>
- <td>GRAY0</td>
- <td>R</td>
- <td>0% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray0.png" width="100" height="32" alt="GRAY0" /></td>
- </tr>
-
- <tr>
- <td>GRAY5</td>
- <td>R</td>
- <td>5% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray5.png" width="100" height="32" alt="GRAY5" /></td>
- </tr>
-
- <tr>
- <td>GRAY10</td>
- <td>R</td>
- <td>10% intensity gray, 32x32</td>
- <td> <img src="../image/patterns/gray10.png" width="100" height="32" alt="GRAY10" /></td>
- </tr>
-
- <tr>
- <td>GRAY15</td>
- <td>R</td>
- <td>15% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray15.png" width="100" height="32" alt="GRAY15" /></td>
- </tr>
-
- <tr>
- <td>GRAY20</td>
- <td>R</td>
- <td>20% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray20.png" width="100" height="32" alt="GRAY20" /></td>
- </tr>
-
- <tr>
- <td>GRAY25</td>
- <td>R</td>
- <td>25% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray25.png" width="100" height="32" alt="GRAY25" /></td>
- </tr>
-
- <tr>
- <td>GRAY30</td>
- <td>R</td>
- <td>30% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray30.png" width="100" height="32" alt="GRAY30" /></td>
- </tr>
-
- <tr>
- <td>GRAY35</td>
- <td>R</td>
- <td>35% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray35.png" width="100" height="32" alt="GRAY35" /></td>
- </tr>
-
- <tr>
- <td>GRAY40</td>
- <td>R</td>
- <td>40% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray40.png" width="100" height="32" alt="GRAY40" /></td>
- </tr>
-
- <tr>
- <td>GRAY45</td>
- <td>R</td>
- <td>45% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray45.png" width="100" height="32" alt="GRAY45" /></td>
- </tr>
-
- <tr>
- <td>GRAY50</td>
- <td>R</td>
- <td>50% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray50.png" width="100" height="32" alt="GRAY50" /></td>
- </tr>
-
- <tr>
- <td>GRAY55</td>
- <td>R</td>
- <td>55% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray55.png" width="100" height="32" alt="GRAY55" /></td>
- </tr>
-
- <tr>
- <td>GRAY60</td>
- <td>R</td>
- <td>60% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray60.png" width="100" height="32" alt="GRAY60" /></td>
- </tr>
-
- <tr>
- <td>GRAY65</td>
- <td>R</td>
- <td>65% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray65.png" width="100" height="32" alt="GRAY65" /></td>
- </tr>
-
- <tr>
- <td>GRAY70</td>
- <td>R</td>
- <td>70% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray70.png" width="100" height="32" alt="GRAY70" /></td>
- </tr>
-
- <tr>
- <td>GRAY75</td>
- <td>R</td>
- <td>75% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray75.png" width="100" height="32" alt="GRAY75" /></td>
- </tr>
-
- <tr>
- <td>GRAY80</td>
- <td>R</td>
- <td>80% intensity gray, 32x32</td>
- <td> <img src="../image/patterns/gray80.png" width="100" height="32" alt="GRAY80" /></td>
- </tr>
-
- <tr>
- <td>GRAY85</td>
- <td>R</td>
- <td>85% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray85.png" width="100" height="32" alt="GRAY85" /></td>
- </tr>
-
- <tr>
- <td>GRAY90</td>
- <td>R</td>
- <td>90% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray90.png" width="100" height="32" alt="GRAY90" /></td>
- </tr>
-
- <tr>
- <td>GRAY95</td>
- <td>R</td>
- <td>95% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray95.png" width="100" height="32" alt="GRAY95" /></td>
- </tr>
-
- <tr>
- <td>GRAY100</td>
- <td>R</td>
- <td>100% intensity gray, 32x32</td>
- <td><img src="../image/patterns/gray100.png" width="100" height="32" alt="GRAY100" /></td>
- </tr>
-
- <tr>
- <td>HEXAGONS</td>
- <td>R</td>
- <td>hexagon pattern, 30x18</td>
- <td><img src="../image/patterns/hexagons.png" width="100" height="26" alt="HEXAGONS" /></td>
- </tr>
-
- <tr>
- <td>HORIZONTAL</td>
- <td>R</td>
- <td>horizontal line pattern, 8x4</td>
- <td><img src="../image/patterns/horizontal.png" width="100" height="26" alt="HORIZONTAL" /></td>
- </tr>
-
- <tr>
- <td>HORIZONTAL2</td>
- <td>R</td>
- <td>horizontal line pattern, 8x8</td>
- <td><img src="../image/patterns/horizontal2.png" width="100" height="26" alt="HORIZONTAL2" /></td>
- </tr>
-
- <tr>
- <td>HORIZONTAL3</td>
- <td>R</td>
- <td>horizontal line pattern, 9x9</td>
- <td><img src="../image/patterns/horizontal3.png" width="100" height="26" alt="HORIZONTAL3" /></td>
- </tr>
-
- <tr>
- <td>HORIZONTALSAW</td>
- <td>R</td>
- <td>horizontal saw-tooth pattern, 16x8</td>
- <td><img src="../image/patterns/horizontalsaw.png" width="100" height="26" alt="HORIZONTALSAW" /></td>
- </tr>
-
- <tr>
- <td>HS_BDIAGONAL</td>
- <td>R</td>
- <td>backward diagonal line pattern (45 degrees slope), 8x8</td>
- <td><img src="../image/patterns/hs_bdiagonal.png" width="100" height="26" alt="HS_BDIAGONAL" /></td>
- </tr>
-
- <tr>
- <td>HS_CROSS</td>
- <td>R</td>
- <td>cross line pattern, 8x8</td>
- <td><img src="../image/patterns/hs_cross.png" width="100" height="26" alt="HS_CROSS" /></td>
- </tr>
-
- <tr>
- <td>HS_DIAGCROSS</td>
- <td>R</td>
- <td>diagonal line cross pattern (45 degrees slope), 8x8</td>
- <td><img src="../image/patterns/hs_diagcross.png" width="100" height="26" alt="HS_DIAGCROSS" /></td>
- </tr>
-
- <tr>
- <td>HS_FDIAGONAL</td>
- <td>R</td>
- <td>forward diagonal line pattern (45 degrees slope), 8x8</td>
- <td><img src="../image/patterns/hs_fdiagonal.png" width="100" height="26" alt="HS_FDIAGONAL" /></td>
- </tr>
-
- <tr>
- <td>HS_HORIZONTAL</td>
- <td>R</td>
- <td>horizontal line pattern, 8x8</td>
- <td><img src="../image/patterns/hs_horizontal.png" width="100" height="26" alt="HS_HORIZONTAL" /></td>
- </tr>
-
- <tr>
- <td>HS_VERTICAL</td>
- <td>R</td>
- <td>vertical line pattern, 8x8</td>
- <td><img src="../image/patterns/hs_vertical.png" width="100" height="26" alt="HS_VERTICAL" /></td>
- </tr>
-
- <tr>
- <td>LEFT30</td>
- <td>R</td>
- <td>forward diagonal pattern (30 degrees slope), 8x4</td>
- <td><img src="../image/patterns/left30.png" width="100" height="26" alt="LEFT0" /></td>
- </tr>
-
- <tr>
- <td>LEFT45</td>
- <td>R</td>
- <td>forward diagonal line pattern (45 degrees slope), 8x8</td>
- <td><img src="../image/patterns/left45.png" width="100" height="26" alt="LEFT45" /></td>
- </tr>
-
- <tr>
- <td>LEFTSHINGLE</td>
- <td>R</td>
- <td>left shingle pattern, 24x24</td>
- <td><img src="../image/patterns/leftshingle.png" width="100" height="26" alt="LEFTSHINGLE" /></td>
- </tr>
-
- <tr>
- <td>OCTAGONS</td>
- <td>R</td>
- <td>octagons pattern, 16x16</td>
- <td><img src="../image/patterns/octagons.png" width="100" height="26" alt="OCTAGONS" /></td>
- </tr>
-
- <tr>
- <td>RIGHT30</td>
- <td>R</td>
- <td>backward diagonal line pattern (30 degrees) 8x4</td>
- <td><img src="../image/patterns/right30.png" width="100" height="26" alt="RIGHT30" /></td>
- </tr>
-
- <tr>
- <td>RIGHT45</td>
- <td>R</td>
- <td>backward diagonal line pattern (30 degrees), 8x8</td>
- <td><img src="../image/patterns/right45.png" width="100" height="26" alt="RIGHT45" /></td>
- </tr>
-
- <tr>
- <td>RIGHTSHINGLE</td>
- <td>R</td>
- <td>right shingle pattern, 24x24</td>
- <td><img src="../image/patterns/rightshingle.png" width="100" height="26" alt="RIGHTSHINGLE" /></td>
- </tr>
-
- <tr>
- <td>SMALLFISHSCALES</td>
- <td>R</td>
- <td>small fish scales pattern, 8x8</td>
- <td><img src="../image/patterns/smallfishscales.png" width="100" height="26" alt="SMALLFISHSCALES" /></td>
- </tr>
-
- <tr>
- <td>VERTICAL</td>
- <td>R</td>
- <td>vertical line pattern, 8x8</td>
- <td><img src="../image/patterns/vertical.png" width="100" height="26" alt="VERTICAL" /></td>
- </tr>
-
- <tr>
- <td>VERTICAL2</td>
- <td>R</td>
- <td>vertical line pattern, 8x8</td>
- <td><img src="../image/patterns/vertical2.png" width="100" height="26" alt="VERTICAL2" /></td>
- </tr>
-
- <tr>
- <td>VERTICAL3</td>
- <td>R</td>
- <td>vertical line pattern, 9x9</td>
- <td><img src="../image/patterns/vertical3.png" width="100" height="26" alt="VERTICAL3" /></td>
- </tr>
-
- <tr>
- <td>VERTICALBRICKS</td>
- <td>R</td>
- <td>vertical brick pattern, 16x16</td>
- <td><img src="../image/patterns/verticalbricks.png" width="100" height="26" alt="VERTICALBRICKS" /></td>
- </tr>
-
- <tr>
- <td>VERTICALLEFTSHINGLE</td>
- <td>R</td>
- <td>vertical left shingle pattern, 24x24</td>
- <td><img src="../image/patterns/verticalleftshingle.png" width="100" height="26" alt="VERTICALLEFTSHINGLE" /></td>
- </tr>
-
- <tr>
- <td>VERTICALRIGHTSHINGLE</td>
- <td>R</td>
- <td>vertical right shingle pattern, 24x24</td>
- <td><img src="../image/patterns/verticalrightshingle.png" width="100" height="26" alt="VERTICALRIGHTSHINGLE" /></td>
- </tr>
-
- <tr>
- <td>VERTICALSAW</td>
- <td>R</td>
- <td>vertical saw-tooth pattern, 8x16</td>
- <td><img src="../image/patterns/verticalsaw.png" width="100" height="26" alt="VERTICALSAW" /></td>
- </tr>
-</table></div>
-
-<br/>
-<h2><a class="anchor" id="embedded"></a>Embedded Image Profiles</h2>
-
-<p>ImageMagick provides a number of format identifiers which are used to add, remove, and save embedded profiles for images which can support embedded profiles. Image types which may contain embedded profiles are TIFF, JPEG, and PDF.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Image Formats</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore all supported image formats, pseudo formats, built-in images, patterns, and embedded profiles in ImageMagick.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tbody>
- <colgroup>
- <col style="width:12%">
- <col style="width:8%">
- <col style="width:40%">
- <col style="width:40%">
- </colgroup>
- <tr>
- <th>Tag</th>
- <th>Mode</th>
- <th>Description</th>
- <th>Notes</th>
- </tr>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Jump Navigation -->
+<section class="mb-4">
+ <div class="p-3 rounded-3 bg-body-tertiary border text-center">
+ <div class="d-flex flex-wrap justify-content-center gap-2 small">
+ <a href="#colorspace" class="btn btn-sm btn-outline-secondary">Colorspaces</a>
+ <a href="#supported" class="btn btn-sm btn-outline-secondary">Supported Formats</a>
+ <a href="#pseudo" class="btn btn-sm btn-outline-secondary">Pseudo Formats</a>
+ <a href="#builtin-images" class="btn btn-sm btn-outline-secondary">Built-in Images</a>
+ <a href="#builtin-patterns" class="btn btn-sm btn-outline-secondary">Built-in Patterns</a>
+ <a href="#embedded" class="btn btn-sm btn-outline-secondary">Embedded Profiles</a>
+ </div>
+ </div>
+</section>
+
+<!-- Introduction Section -->
+<section class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border">
+ <p class="lead mb-3">
+ ImageMagick uses an ASCII string known as <em>magick</em> (e.g., <code>GIF</code>) to identify file formats, algorithms, built-in patterns, and embedded profiles.
+ </p>
+ <p class="text-body-secondary mb-3">
+ To get a complete listing of which image formats are supported on your system, run:
+ </p>
+ <div class="card im-card bg-dark text-light p-3 font-mono small mb-3">
+ $ magick identify -list format
+ </div>
+ <p class="small text-body-secondary mb-0">
+ On compatible platforms, extensions like <code>.gz</code>, <code>.Z</code>, <code>.bz2</code>, and <code>.pgp</code> are uncompressed or decrypted automagically.
+ </p>
+ </div>
+</section>
- <tr>
- <td>8BIM</td>
- <td>RW</td>
- <td>Photoshop resource format (binary)</td>
- <td> </td>
- </tr>
+<!-- Colorspace Section -->
+<section id="colorspace" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-palette fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">A Word about Colorspaces</h2>
+ </div>
+ <p class="text-body-secondary mb-4">
+ Most image formats assume an sRGB colorspace, while others support linear RGB, linear GRAY, CMYK, or LAB. To determine your image colorspace, use:
+ </p>
+ <div class="row g-3 mb-4">
+ <div class="col-md-6">
+ <div class="card im-card p-3 bg-dark text-light font-mono small h-100">
+ $ magick identify -verbose image.jpg<br>...<br>Colorspace: sRGB
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card p-3 bg-dark text-light font-mono small h-100">
+ $ magick image.jpg -print "%[colorspace]\n" null:<br>sRGB
+ </div>
+ </div>
+ </div>
+</section>
- <tr>
- <td>8BIMTEXT</td>
- <td>RW</td>
- <td>Photoshop resource format (ASCII)</td>
- <td>An ASCII representation of the 8BIM format.</td>
- </tr>
+<!-- Supported Formats Section -->
+<section id="supported" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-file-earmark-richtext fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Supported Image Formats</h2>
+ </div>
+ <p class="text-body-secondary mb-3">Complete directory of all major file formats supported by ImageMagick.</p>
+
+ <div class="card im-card p-3">
+ <div class="table-responsive" style="max-height: 70svh;">
+ <table class="table table-hover table-striped mb-0 align-middle small">
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 font-mono" style="width:12%">Tag</th>
+ <th style="width:8%">Mode</th>
+ <th style="width:30%">Description</th>
+ <th class="pe-3" style="width:50%">Notes</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono">AAI</td><td>RW</td><td>AAI Dune image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">AI</td><td>RW</td><td>Adobe Illustrator CS2</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">APNG</td><td>RW</td><td>Animated Portable Network Graphics</td><td class="pe-3 text-body-secondary">Requires explicit specifier (<code>apng:myImage.apng</code>) and <code>ffmpeg</code>.</td></tr>
+ <tr><td class="ps-3 font-mono">ART</td><td>RW</td><td>PFS: 1st Publisher</td><td class="pe-3 text-body-secondary">Originally used on Macintosh/PFS: 1st Publisher clip art.</td></tr>
+ <tr><td class="ps-3 font-mono">ARW</td><td>R</td><td>Sony Digital Camera Alpha Raw Image Format</td><td class="pe-3 text-body-secondary">Set <code>-define dng:use-camera-wb=true</code> to use embedded profile.</td></tr>
+ <tr><td class="ps-3 font-mono">AVI</td><td>R</td><td>Microsoft Audio/Visual Interleaved</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">AVIF</td><td>RW</td><td>Format derived from keyframes of AV1 video</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">AVS</td><td>RW</td><td>AVS X image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">BAYER</td><td>RW</td><td>Raw mosaiced samples</td><td class="pe-3 text-body-secondary">Use size and depth parameters; support for floats via quantum:format.</td></tr>
+ <tr><td class="ps-3 font-mono">BPG</td><td>RW</td><td>Better Portable Graphics</td><td class="pe-3 text-body-secondary">Use quality option.</td></tr>
+ <tr><td class="ps-3 font-mono">BMP, BMP2, BMP3</td><td>RW</td><td>Microsoft Windows bitmap</td><td class="pe-3 text-body-secondary">Default version 4. Use BMP3/BMP2 for versions 3 and 2.</td></tr>
+ <tr><td class="ps-3 font-mono">BRF</td><td>W</td><td>Braille Ready Format</td><td class="pe-3 text-body-secondary">6-dot braille matrix encoding.</td></tr>
+ <tr><td class="ps-3 font-mono">CALS</td><td>R</td><td>Continuous Acquisition and Life-cycle Support Type 1</td><td class="pe-3 text-body-secondary">US military blueprint archive format.</td></tr>
+ <tr><td class="ps-3 font-mono">CIN</td><td>RW</td><td>Kodak Cineon Image Format</td><td class="pe-3 text-body-secondary">Use -set for gamma, black/white points, and cineon properties.</td></tr>
+ <tr><td class="ps-3 font-mono">CIP</td><td>W</td><td>Cisco IP phone image format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">CMYK</td><td>RW</td><td>Raw cyan, magenta, yellow, and black samples</td><td class="pe-3 text-body-secondary">Use size/depth; supports float formats.</td></tr>
+ <tr><td class="ps-3 font-mono">CMYKA</td><td>RW</td><td>Raw cyan, magenta, yellow, black, and alpha samples</td><td class="pe-3 text-body-secondary">Supports float formats via quantum:format.</td></tr>
+ <tr><td class="ps-3 font-mono">CR2</td><td>R</td><td>Canon Digital Camera Raw Image Format</td><td class="pe-3 text-body-secondary">Requires explicit specifier (<code>cr2:image.cr2</code>).</td></tr>
+ <tr><td class="ps-3 font-mono">CRW</td><td>R</td><td>Canon Digital Camera Raw Image Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">CUBE</td><td>R</td><td>Color grading preset lookup table</td><td class="pe-3 text-body-secondary">Pixel-by-pixel replacement mapping.</td></tr>
+ <tr><td class="ps-3 font-mono">CUR</td><td>R</td><td>Microsoft Cursor Icon</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">CUT</td><td>R</td><td>DR Halo</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">C2PA</td><td>R</td><td>C2PA Provenance Metadata</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">DCM</td><td>R</td><td>Digital Imaging and Communications in Medicine (DICOM)</td><td class="pe-3 text-body-secondary">Medical X-ray support; handles window center/width tags.</td></tr>
+ <tr><td class="ps-3 font-mono">DCR</td><td>R</td><td>Digital Camera Raw Image File</td><td class="pe-3 text-body-secondary">Use DCRAW delegate program.</td></tr>
+ <tr><td class="ps-3 font-mono">DCX</td><td>RW</td><td>ZSoft IBM PC multi-page Paintbrush image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">DDS</td><td>RW</td><td>Microsoft Direct Draw Surface</td><td class="pe-3 text-body-secondary">Compression defines like dxt1, dxt5, and mipmaps.</td></tr>
+ <tr><td class="ps-3 font-mono">DEBUG</td><td>W</td><td>Raw pixel debug file</td><td class="pe-3 text-body-secondary">For developers.</td></tr>
+ <tr><td class="ps-3 font-mono">DIB</td><td>RW</td><td>Microsoft Windows Device Independent Bitmap</td><td class="pe-3 text-body-secondary">BMP file without BMP header.</td></tr>
+ <tr><td class="ps-3 font-mono">DJVU</td><td>R</td><td>DjVu Document Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">DMR</td><td>RW</td><td>Digital media repository</td><td class="pe-3 text-body-secondary">Requires MagickCache delegate library.</td></tr>
+ <tr><td class="ps-3 font-mono">DNG</td><td>R</td><td>Digital Negative</td><td class="pe-3 text-body-secondary">Requires explicit specifier (<code>dng:image.dng</code>).</td></tr>
+ <tr><td class="ps-3 font-mono">DOT</td><td>R</td><td>Graph Visualization</td><td class="pe-3 text-body-secondary">Layout engine options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">DPX</td><td>RW</td><td>SMPTE Digital Moving Picture Exchange 2.0</td><td class="pe-3 text-body-secondary">Gamma and black/white point controls.</td></tr>
+ <tr><td class="ps-3 font-mono">EMF</td><td>R</td><td>Microsoft Enhanced Metafile (32-bit)</td><td class="pe-3 text-body-secondary">Windows only; size option supported.</td></tr>
+ <tr><td class="ps-3 font-mono">EPDF</td><td>RW</td><td>Encapsulated Portable Document Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">EPI</td><td>RW</td><td>Adobe Encapsulated PostScript Interchange</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EPS</td><td>RW</td><td>Adobe Encapsulated PostScript</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EPS2</td><td>W</td><td>Adobe Level II Encapsulated PostScript</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EPS3</td><td>W</td><td>Adobe Level III Encapsulated PostScript</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EPSF</td><td>RW</td><td>Adobe Encapsulated PostScript</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EPSI</td><td>RW</td><td>Adobe Encapsulated PostScript Interchange format</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EPT</td><td>RW</td><td>Encapsulated PostScript with TIFF preview</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">EXR</td><td>RW</td><td>Industrial Light & Magic High Dynamic-Range</td><td class="pe-3 text-body-secondary">Requires OpenEXR library.</td></tr>
+ <tr><td class="ps-3 font-mono">FARBFELD</td><td>RW</td><td>Farbfeld lossless image format</td><td class="pe-3 text-body-secondary">sRGB 16-bit RGBA lossless format.</td></tr>
+ <tr><td class="ps-3 font-mono">FAX</td><td>RW</td><td>Group 3 TIFF</td><td class="pe-3 text-body-secondary">Fixed width 1728; non-square pixels.</td></tr>
+ <tr><td class="ps-3 font-mono">FITS</td><td>RW</td><td>Flexible Image Transport System</td><td class="pe-3 text-body-secondary">Supports single and double-precision floats.</td></tr>
+ <tr><td class="ps-3 font-mono">FL32</td><td>RW</td><td>FilmLight floating point image format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">FLIF</td><td>RW</td><td>Free Lossless Image Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">FPX</td><td>RW</td><td>FlashPix Format</td><td class="pe-3 text-body-secondary">Multi-resolution pyramid storage; requires FlashPix SDK.</td></tr>
+ <tr><td class="ps-3 font-mono">FTXT</td><td>RW</td><td>Multispectral channels as formatted text</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">GIF</td><td>RW</td><td>CompuServe Graphics Interchange Format</td><td class="pe-3 text-body-secondary">8-bit RGB PseudoColor up to 256 palette entries.</td></tr>
+ <tr><td class="ps-3 font-mono">GPLT</td><td>R</td><td>Gnuplot plot files</td><td class="pe-3 text-body-secondary">Requires gnuplot.</td></tr>
+ <tr><td class="ps-3 font-mono">GRAY</td><td>RW</td><td>Raw gray samples</td><td class="pe-3 text-body-secondary">Supports scanline padding and float/signed options.</td></tr>
+ <tr><td class="ps-3 font-mono">GRAYA</td><td>RW</td><td>Raw gray and alpha samples</td><td class="pe-3 text-body-secondary">Supports float configurations.</td></tr>
+ <tr><td class="ps-3 font-mono">GROUP4</td><td>RW</td><td>Raw CCITT Group 4 samples</td><td class="pe-3 text-body-secondary">Use size option.</td></tr>
+ <tr><td class="ps-3 font-mono">HDR</td><td>RW</td><td>Radiance RGBE image format</td><td class="pe-3 text-body-secondary">High dynamic range support.</td></tr>
+ <tr><td class="ps-3 font-mono">HEIC</td><td>RW</td><td>Apple High Efficiency Image Format</td><td class="pe-3 text-body-secondary">Requires libheif delegate library.</td></tr>
+ <tr><td class="ps-3 font-mono">HPGL</td><td>R</td><td>HP-GL plotter language</td><td class="pe-3 text-body-secondary">Requires hp2xx.</td></tr>
+ <tr><td class="ps-3 font-mono">HRZ</td><td>RW</td><td>Slow Scan TeleVision</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">HTML</td><td>RW</td><td>HTML with client-side image map</td><td class="pe-3 text-body-secondary">Requires html2ps to read.</td></tr>
+ <tr><td class="ps-3 font-mono">ICO</td><td>R</td><td>Microsoft icon (ICON)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">INFO</td><td>W</td><td>Format and characteristics of the image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">ISOBRL</td><td>W</td><td>ISO/TR 11548-1 Braille (8-dot)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">ISOBRL6</td><td>W</td><td>ISO/TR 11548-1 Braille (6-dot)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">JBIG</td><td>RW</td><td>Joint Bi-level Image experts Group (BIE, JBG)</td><td class="pe-3 text-body-secondary">Requires jbigkit.</td></tr>
+ <tr><td class="ps-3 font-mono">JNG</td><td>RW</td><td>Multiple-image Network Graphics</td><td class="pe-3 text-body-secondary">JPEG in PNG-style wrapper with transparency.</td></tr>
+ <tr><td class="ps-3 font-mono">JP2</td><td>RW</td><td>JPEG-2000 JP2 File Format Syntax</td><td class="pe-3 text-body-secondary">Encoding options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">JPT</td><td>RW</td><td>JPEG-2000 Code Stream Syntax</td><td class="pe-3 text-body-secondary">Encoding options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">J2C</td><td>RW</td><td>JPEG-2000 Code Stream Syntax</td><td class="pe-3 text-body-secondary">Encoding options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">J2K</td><td>RW</td><td>JPEG-2000 Code Stream Syntax</td><td class="pe-3 text-body-secondary">Encoding options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">JPEG</td><td>RW</td><td>Joint Photographic Experts Group JFIF format</td><td class="pe-3 text-body-secondary">Lossy compression; quality scaling, Huffman, and DCT options.</td></tr>
+ <tr><td class="ps-3 font-mono">JSON</td><td>W</td><td>JavaScript Object Notation data-interchange</td><td class="pe-3 text-body-secondary">Supports attributes, moments, and features defines.</td></tr>
+ <tr><td class="ps-3 font-mono">JXL</td><td>RW</td><td>JPEG XL image coding system</td><td class="pe-3 text-body-secondary">Requires JPEG XL delegate library.</td></tr>
+ <tr><td class="ps-3 font-mono">JXR</td><td>RW</td><td>JPEG extended range</td><td class="pe-3 text-body-secondary">Requires jxrlib.</td></tr>
+ <tr><td class="ps-3 font-mono">KERNEL</td><td>W</td><td>Morphology kernel format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MAN</td><td>R</td><td>Linux reference manual pages</td><td class="pe-3 text-body-secondary">Requires groff and Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">MAT</td><td>R</td><td>MATLAB image format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MIFF</td><td>RW</td><td>Magick multispectral image file format</td><td class="pe-3 text-body-secondary">Persists all image attributes and channel data.</td></tr>
+ <tr><td class="ps-3 font-mono">MONO</td><td>RW</td><td>Bi-level bitmap (LSB order)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MNG</td><td>RW</td><td>Multiple-image Network Graphics</td><td class="pe-3 text-body-secondary">PNG-like multi-image animation container.</td></tr>
+ <tr><td class="ps-3 font-mono">M2V</td><td>RW</td><td>MPEG-2 video format</td><td class="pe-3 text-body-secondary">Requires ffmpeg.</td></tr>
+ <tr><td class="ps-3 font-mono">MPEG</td><td>RW</td><td>MPEG-1 video format</td><td class="pe-3 text-body-secondary">Requires ffmpeg.</td></tr>
+ <tr><td class="ps-3 font-mono">MPC</td><td>RW</td><td>Magick Pixel Cache image file format</td><td class="pe-3 text-body-secondary">Native in-memory uncompressed cache format.</td></tr>
+ <tr><td class="ps-3 font-mono">MPO</td><td>R</td><td>Multi-picture Object</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MPR</td><td>RW</td><td>Magick Persistent Registry</td><td class="pe-3 text-body-secondary">Read/write images directly in memory via registry keys.</td></tr>
+ <tr><td class="ps-3 font-mono">MRW</td><td>R</td><td>Sony (Minolta) Raw Image File</td><td class="pe-3 text-body-secondary">Embedded profile options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">MSL</td><td>RW</td><td>Magick Scripting Language</td><td class="pe-3 text-body-secondary">XML scripting for conjure utility; requires libxml2.</td></tr>
+ <tr><td class="ps-3 font-mono">MTV</td><td>RW</td><td>MTV Raytracing image format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MVG</td><td>RW</td><td>Magick Vector Graphics</td><td class="pe-3 text-body-secondary">Native vector drawing metafile format.</td></tr>
+ <tr><td class="ps-3 font-mono">NEF</td><td>R</td><td>Nikon Digital SLR Camera Raw Image File</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">ORF</td><td>R</td><td>Olympus Digital Camera Raw Image File</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">ORA</td><td>R</td><td>OpenRaster layered graphics exchange format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">OTB</td><td>RW</td><td>On-the-air Bitmap</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">P7</td><td>RW</td><td>Xv's Visual Schnauzer thumbnail format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PALM</td><td>RW</td><td>Palm pixmap</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PAM</td><td>W</td><td>Common 2-dimensional bitmap format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">CLIPBOARD</td><td>RW</td><td>Windows Clipboard</td><td class="pe-3 text-body-secondary">Windows only.</td></tr>
+ <tr><td class="ps-3 font-mono">PBM</td><td>RW</td><td>Portable bitmap format (black and white)</td><td class="pe-3 text-body-secondary">Netpbm family.</td></tr>
+ <tr><td class="ps-3 font-mono">PCD</td><td>RW</td><td>Photo CD</td><td class="pe-3 text-body-secondary">Max resolution written 768x512.</td></tr>
+ <tr><td class="ps-3 font-mono">PCDS</td><td>RW</td><td>Photo CD</td><td class="pe-3 text-body-secondary">Decoded with sRGB color tables.</td></tr>
+ <tr><td class="ps-3 font-mono">PCL</td><td>W</td><td>HP Page Control Language</td><td class="pe-3 text-body-secondary">Fit-to-page option via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">PCX</td><td>RW</td><td>ZSoft IBM PC Paintbrush file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PDB</td><td>RW</td><td>Palm Database ImageViewer Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PDF</td><td>RW</td><td>Portable Document Format</td><td class="pe-3 text-body-secondary">Requires Ghostscript; cropbox, trimbox, and density options.</td></tr>
+ <tr><td class="ps-3 font-mono">PEF</td><td>R</td><td>Pentax Electronic File</td><td class="pe-3 text-body-secondary">Requires explicit specifier (<code>pef:image.pef</code>).</td></tr>
+ <tr><td class="ps-3 font-mono">PES</td><td>R</td><td>Embrid Embroidery Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PFA</td><td>R</td><td>Postscript Type 1 font (ASCII)</td><td class="pe-3 text-body-secondary">Returns preview image.</td></tr>
+ <tr><td class="ps-3 font-mono">PFB</td><td>R</td><td>Postscript Type 1 font (binary)</td><td class="pe-3 text-body-secondary">Returns preview image.</td></tr>
+ <tr><td class="ps-3 font-mono">PFM</td><td>RW</td><td>Portable float map format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PGM</td><td>RW</td><td>Portable graymap format (gray scale)</td><td class="pe-3 text-body-secondary">Netpbm family.</td></tr>
+ <tr><td class="ps-3 font-mono">PHM</td><td>RW</td><td>Portable float map format 16-bit half</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PICON</td><td>RW</td><td>Personal Icon</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PICT</td><td>RW</td><td>Apple Macintosh QuickDraw/PICT file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PIX</td><td>R</td><td>Alias/Wavefront RLE image format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PNG, PNG8, PNG24, PNG32, PNG48, PNG64, PNG00</td><td>RW</td><td>Portable Network Graphics variants</td><td class="pe-3 text-body-secondary">Requires libpng; supports indexed, RGB, and RGBA bit depths.</td></tr>
+ <tr><td class="ps-3 font-mono">PNM</td><td>RW</td><td>Portable anymap family</td><td class="pe-3 text-body-secondary">Automagically selects PBM, PGM, or PPM representation.</td></tr>
+ <tr><td class="ps-3 font-mono">POCKETMOD</td><td>RW</td><td>Pocketmod personal organizer format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PPM</td><td>RW</td><td>Portable pixmap format (color)</td><td class="pe-3 text-body-secondary">Netpbm family.</td></tr>
+ <tr><td class="ps-3 font-mono">PS, PS2, PS3</td><td>RW</td><td>Adobe PostScript (Levels I, II, III)</td><td class="pe-3 text-body-secondary">Requires Ghostscript.</td></tr>
+ <tr><td class="ps-3 font-mono">PSB</td><td>RW</td><td>Adobe Large Document Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PSD</td><td>RW</td><td>Adobe Photoshop multispectral bitmap file</td><td class="pe-3 text-body-secondary">Supports alpha blending, adjustment layers, and opacity masks.</td></tr>
+ <tr><td class="ps-3 font-mono">PTIF</td><td>RW</td><td>Pyramid encoded TIFF</td><td class="pe-3 text-body-secondary">Multi-resolution pyramid structure.</td></tr>
+ <tr><td class="ps-3 font-mono">PWP</td><td>R</td><td>Seattle File Works multi-image file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">QOI</td><td>RW</td><td>Quite OK Image Format</td><td class="pe-3 text-body-secondary">Fast, lossless compression.</td></tr>
+ <tr><td class="ps-3 font-mono">RAD</td><td>R</td><td>Radiance image file</td><td class="pe-3 text-body-secondary">Requires ra_ppm.</td></tr>
+ <tr><td class="ps-3 font-mono">RAF</td><td>R</td><td>Fuji CCD-RAW Graphic File</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">RAW</td><td>R</td><td>Raw samples</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">RGB, RGBA</td><td>RW</td><td>Raw RGB and RGBA sample streams</td><td class="pe-3 text-body-secondary">Size and depth parameters required.</td></tr>
+ <tr><td class="ps-3 font-mono">RGB565</td><td>R</td><td>Raw red, green, blue pixels in 5-6-5 format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">RGF</td><td>RW</td><td>LEGO Mindstorms EV3 Robot Graphics File</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">RLA</td><td>R</td><td>Alias/Wavefront image file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">RLE</td><td>R</td><td>Utah Run length encoded image file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SCT</td><td>R</td><td>Scitex Continuous Tone Picture</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SFW</td><td>R</td><td>Seattle File Works image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SF3</td><td>R</td><td>Simple File Format Family</td><td class="pe-3 text-body-secondary">Lightweight text-based structure.</td></tr>
+ <tr><td class="ps-3 font-mono">SGI</td><td>RW</td><td>Irix RGB image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SHTML</td><td>W</td><td>HTML client-side image map</td><td class="pe-3 text-body-secondary">Based on montage or tiled output.</td></tr>
+ <tr><td class="ps-3 font-mono">SID, MrSID</td><td>R</td><td>Multiresolution seamless image</td><td class="pe-3 text-body-secondary">Decoding delegated to mrsidgeodecode or gdal_translate.</td></tr>
+ <tr><td class="ps-3 font-mono">SPARSE-COLOR</td><td>W</td><td>Raw text file for sparse color options</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">STRIMG</td><td>RW</td><td>String to images and back</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SUN</td><td>RW</td><td>SUN Rasterfile</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SVG</td><td>RW</td><td>Scalable Vector Graphics</td><td class="pe-3 text-body-secondary">Renders via Inkscape, RSVG, or internal MSVG renderer.</td></tr>
+ <tr><td class="ps-3 font-mono">TEXT</td><td>R</td><td>Text file</td><td class="pe-3 text-body-secondary">Requires explicit specifier (<code>text:README.txt</code>).</td></tr>
+ <tr><td class="ps-3 font-mono">TGA</td><td>RW</td><td>Truevision Targa image (ICB, VDA, VST)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">TIFF</td><td>RW</td><td>Tagged image file multispectral format (TIF)</td><td class="pe-3 text-body-secondary">Extensive strip, tile, endian, and compression tag controls.</td></tr>
+ <tr><td class="ps-3 font-mono">TIM</td><td>R</td><td>PSX TIM file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">TTF</td><td>R</td><td>TrueType font file</td><td class="pe-3 text-body-secondary">Requires Freetype 2; returns preview image.</td></tr>
+ <tr><td class="ps-3 font-mono">TXT</td><td>RW</td><td>Multispectral raw text file</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">UBRL, UBRL6</td><td>W</td><td>Unicode Braille (8-dot and 6-dot)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">UHDR</td><td>RW</td><td>Ultra HDR</td><td class="pe-3 text-body-secondary">Requires libultrahdr delegate library.</td></tr>
+ <tr><td class="ps-3 font-mono">UIL</td><td>W</td><td>X-Motif UIL table</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">UYVY</td><td>RW</td><td>Interleaved YUV raw image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">VICAR</td><td>RW</td><td>VICAR rasterfile format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">VIDEO</td><td>RW</td><td>Various video formats (APNG, AVI, MP4, WEBM)</td><td class="pe-3 text-body-secondary">Refer to video defines.</td></tr>
+ <tr><td class="ps-3 font-mono">VIFF</td><td>RW</td><td>Khoros Visualization Image File Format</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">WBMP</td><td>RW</td><td>Wireless bitmap</td><td class="pe-3 text-body-secondary">Uncompressed monochrome only.</td></tr>
+ <tr><td class="ps-3 font-mono">WDP</td><td>RW</td><td>JPEG extended range</td><td class="pe-3 text-body-secondary">Requires jxrlib.</td></tr>
+ <tr><td class="ps-3 font-mono">WEBP</td><td>RW</td><td>WebP image format</td><td class="pe-3 text-body-secondary">Requires WEBP delegate library.</td></tr>
+ <tr><td class="ps-3 font-mono">WMF</td><td>R</td><td>Windows Metafile</td><td class="pe-3 text-body-secondary">Requires libwmf.</td></tr>
+ <tr><td class="ps-3 font-mono">WPG</td><td>R</td><td>Word Perfect Graphics File</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">X</td><td>RW</td><td>Display or import from X11 server</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">XBM</td><td>RW</td><td>X Windows system bitmap</td><td class="pe-3 text-body-secondary">Black and white only.</td></tr>
+ <tr><td class="ps-3 font-mono">XCF</td><td>R</td><td>GIMP image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">XPM</td><td>RW</td><td>X Windows system pixmap (PM)</td><td class="pe-3 text-body-secondary">Color icons.</td></tr>
+ <tr><td class="ps-3 font-mono">XWD</td><td>RW</td><td>X Windows system window dump</td><td class="pe-3 text-body-secondary">Screen dumps.</td></tr>
+ <tr><td class="ps-3 font-mono">X3F</td><td>R</td><td>Sigma Camera RAW Picture File</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">YAML</td><td>W</td><td>Human-readable data-serialization language</td><td class="pe-3 text-body-secondary">Supports locate, limit, and moment defines.</td></tr>
+ <tr><td class="ps-3 font-mono">YCbCr, YCbCrA</td><td>RW</td><td>Raw Y, Cb, Cr, and alpha samples</td><td class="pe-3 text-body-secondary">Size and depth parameters required.</td></tr>
+ <tr><td class="ps-3 font-mono">YUV</td><td>RW</td><td>CCIR 601 4:1:1</td><td class="pe-3 text-body-secondary">Sampling-factor option supported.</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
- <tr>
- <td>APP1</td>
- <td>RW</td>
- <td>Raw application information</td>
- <td> </td>
- </tr>
+<!-- Pseudo Formats Section -->
+<section id="pseudo" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-cpu fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Pseudo-image Formats</h2>
+ </div>
+ <p class="text-body-secondary mb-3">Algorithmic image formats and specialized target pipelines.</p>
+
+ <div class="card im-card p-3">
+ <div class="table-responsive" style="max-height: 60svh;">
+ <table class="table table-hover table-striped mb-0 align-middle small">
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 font-mono" style="width:15%">Tag</th>
+ <th style="width:8%">Mode</th>
+ <th style="width:30%">Description</th>
+ <th class="pe-3" style="width:47%">Notes</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono">ASHLAR</td><td>W</td><td>Image sequence laid out in continuous irregular courses</td><td class="pe-3 text-body-secondary">Custom canvas sizing and tile alignment.</td></tr>
+ <tr><td class="ps-3 font-mono">CANVAS</td><td>R</td><td>Canvas image of specified color</td><td class="pe-3 text-body-secondary">Solid color generation via size and color parameters.</td></tr>
+ <tr><td class="ps-3 font-mono">CAPTION</td><td>R</td><td>Image caption</td><td class="pe-3 text-body-secondary">Supports text splitting via caption:split.</td></tr>
+ <tr><td class="ps-3 font-mono">CLIP</td><td>RW</td><td>Clip path of image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">CLIPBOARD</td><td>RW</td><td>Clipboard</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">FRACTAL</td><td>R</td><td>Plasma fractal image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">GRADIENT</td><td>R</td><td>Linear or radial gradient image</td><td class="pe-3 text-body-secondary">Gradual shade transitions.</td></tr>
+ <tr><td class="ps-3 font-mono">HALD</td><td>R</td><td>Identity Hald CLUT Image</td><td class="pe-3 text-body-secondary">Color grading lookup tables.</td></tr>
+ <tr><td class="ps-3 font-mono">HISTOGRAM</td><td>W</td><td>Histogram of the image</td><td class="pe-3 text-body-secondary">Outputs unique colors as comments.</td></tr>
+ <tr><td class="ps-3 font-mono">INLINE</td><td>RW</td><td>Base64-encoded inline image</td><td class="pe-3 text-body-secondary">Data URI strings for web integration.</td></tr>
+ <tr><td class="ps-3 font-mono">LABEL</td><td>R</td><td>Text image format</td><td class="pe-3 text-body-secondary">Text specified directly as filename.</td></tr>
+ <tr><td class="ps-3 font-mono">MAP</td><td>RW</td><td>Colormap intensities and indices</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MASK</td><td>RW</td><td>Grayscale image mask sequence</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">MATTE</td><td>W</td><td>MATTE format</td><td class="pe-3 text-body-secondary">Write-only.</td></tr>
+ <tr><td class="ps-3 font-mono">NULL</td><td>RW</td><td>NULL image</td><td class="pe-3 text-body-secondary">Blank montage tiles and performance evaluation.</td></tr>
+ <tr><td class="ps-3 font-mono">OPEN</td><td>W</td><td>Display image to computer screen</td><td class="pe-3 text-body-secondary">MacOS X only.</td></tr>
+ <tr><td class="ps-3 font-mono">PANGO</td><td>R</td><td>Advanced text caption layout</td><td class="pe-3 text-body-secondary">Markup, justification, and hinting options via defines.</td></tr>
+ <tr><td class="ps-3 font-mono">PLASMA</td><td>R</td><td>Plasma fractal image</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">PREVIEW</td><td>W</td><td>Preview image enhancement or effect range</td><td class="pe-3 text-body-secondary">Parameter selection assistant.</td></tr>
+ <tr><td class="ps-3 font-mono">PRINT</td><td>W</td><td>Send image to computer printer</td><td class="pe-3 text-body-secondary">Uses PRINTER or LPDEST variables.</td></tr>
+ <tr><td class="ps-3 font-mono">SCAN</td><td>R</td><td>Import image from scanner device</td><td class="pe-3 text-body-secondary">Requires SANE.</td></tr>
+ <tr><td class="ps-3 font-mono">RADIAL_GRADIENT</td><td>R</td><td>Gradual radial color passing</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SCANX</td><td>R</td><td>Import image from default scanner</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">SCREENSHOT</td><td>R</td><td>Computer display content capture</td><td class="pe-3 text-body-secondary">Multi-monitor support under Windows.</td></tr>
+ <tr><td class="ps-3 font-mono">STEGANO</td><td>R</td><td>Steganographic image</td><td class="pe-3 text-body-secondary">Width, height, and offset controls.</td></tr>
+ <tr><td class="ps-3 font-mono">TILE</td><td>R</td><td>Tiled image pattern</td><td class="pe-3 text-body-secondary">Responsive to compose options.</td></tr>
+ <tr><td class="ps-3 font-mono">UNIQUE</td><td>W</td><td>Write only unique pixels</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">VID</td><td>RW</td><td>Visual Image Directory</td><td class="pe-3 text-body-secondary">Thumbnailed directory generation.</td></tr>
+ <tr><td class="ps-3 font-mono">WIN</td><td>RW</td><td>Select or display image to Windows screen</td><td class="pe-3 text-body-secondary">Windows only.</td></tr>
+ <tr><td class="ps-3 font-mono">X</td><td>RW</td><td>Select or display image to X server screen</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">XC</td><td>R</td><td>Canvas image of specified color</td><td class="pe-3 text-body-secondary">Backward compatible alias for canvas:.</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
- <tr>
- <td>APP1JPEG</td>
- <td>RW</td>
- <td>Raw JPEG binary data</td>
- <td>Profile in JPEG wrapper.</td>
- </tr>
+<!-- Built-in Images Section -->
+<section id="builtin-images" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-image fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Built-in Images</h2>
+ </div>
+ <p class="text-body-secondary mb-3">Embedded sample images referenceable via <code>magick:name</code>.</p>
+
+ <div class="card im-card p-3">
+ <div class="table-responsive">
+ <table class="table table-hover table-striped mb-0 align-middle small">
+ <thead class="table-dark">
+ <tr>
+ <th class="ps-3 font-mono" style="width:15%">Tag</th>
+ <th style="width:8%">Mode</th>
+ <th style="width:40%">Description</th>
+ <th class="pe-3" style="width:37%">Notes</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono">GRANITE</td><td>R</td><td>128x128 granite texture pattern</td><td class="pe-3 text-body-secondary">Granite texture asset.</td></tr>
+ <tr><td class="ps-3 font-mono">LOGO</td><td>R</td><td>ImageMagick Logo, 640x480</td><td class="pe-3 text-body-secondary">Standard logo asset.</td></tr>
+ <tr><td class="ps-3 font-mono">NETSCAPE</td><td>R</td><td>Netscape 216 color cube image, 216x144</td><td class="pe-3 text-body-secondary">Used with map option for web-safe colors.</td></tr>
+ <tr><td class="ps-3 font-mono">ROSE</td><td>R</td><td>Picture of a rose, 70x46</td><td class="pe-3 text-body-secondary">Classic sample image.</td></tr>
+ <tr><td class="ps-3 font-mono">WIZARD</td><td>R</td><td>ImageMagick Wizard, 480x640</td><td class="pe-3 text-body-secondary">Wizard mascot asset.</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
- <tr>
- <td>ICC</td>
- <td>RW</td>
- <td>International Color Consortium color profile</td>
- <td>Also known as <code>ICM</code>. To read, use <a href="../command-line-options/index.html#profile">-profile</a> with
- <a href="../magick/index.html">magick</a>.</td>
- </tr>
+<!-- Built-in Patterns Section -->
+<section id="builtin-patterns" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-grid-3x3 fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Built-in Patterns</h2>
+ </div>
+ <p class="text-body-secondary mb-3">Embedded patterns referenceable via <code>pattern:name</code>, controlled by the <code>-size</code> option.</p>
+
+ <div class="card im-card p-3">
+ <div class="table-responsive" style="max-height: 60svh;">
+ <table class="table table-hover table-striped mb-0 align-middle small">
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 font-mono" style="width:25%">Tag</th>
+ <th style="width:8%">Mode</th>
+ <th class="pe-3" style="width:67%">Description & Dimensions</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono">BRICKS</td><td>R</td><td>Brick pattern, 16x16</td></tr>
+ <tr><td class="ps-3 font-mono">CHECKERBOARD</td><td>R</td><td>Checkerboard pattern, 30x30</td></tr>
+ <tr><td class="ps-3 font-mono">CIRCLES</td><td>R</td><td>Circles pattern, 16x16</td></tr>
+ <tr><td class="ps-3 font-mono">CROSSHATCH</td><td>R</td><td>Crosshatch pattern, 8x4</td></tr>
+ <tr><td class="ps-3 font-mono">CROSSHATCH30</td><td>R</td><td>Crosshatch pattern at 30 degrees, 8x4</td></tr>
+ <tr><td class="ps-3 font-mono">CROSSHATCH45</td><td>R</td><td>Crosshatch pattern at 45 degrees, 8x4</td></tr>
+ <tr><td class="ps-3 font-mono">FISHSCALES</td><td>R</td><td>Fish scales pattern, 16x8</td></tr>
+ <tr><td class="ps-3 font-mono">GRAY0 through GRAY100</td><td>R</td><td>Intensity gray patterns (0% to 100%), 32x32</td></tr>
+ <tr><td class="ps-3 font-mono">HEXAGONS</td><td>R</td><td>Hexagon pattern, 30x18</td></tr>
+ <tr><td class="ps-3 font-mono">HORIZONTAL</td><td>R</td><td>Horizontal line pattern, 8x4</td></tr>
+ <tr><td class="ps-3 font-mono">HORIZONTAL2</td><td>R</td><td>Horizontal line pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">HORIZONTAL3</td><td>R</td><td>Horizontal line pattern, 9x9</td></tr>
+ <tr><td class="ps-3 font-mono">HORIZONTALSAW</td><td>R</td><td>Horizontal saw-tooth pattern, 16x8</td></tr>
+ <tr><td class="ps-3 font-mono">HS_BDIAGONAL</td><td>R</td><td>Backward diagonal line pattern (45° slope), 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">HS_CROSS</td><td>R</td><td>Cross line pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">HS_DIAGCROSS</td><td>R</td><td>Diagonal line cross pattern (45° slope), 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">HS_FDIAGONAL</td><td>R</td><td>Forward diagonal line pattern (45° slope), 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">HS_HORIZONTAL</td><td>R</td><td>Horizontal line pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">HS_VERTICAL</td><td>R</td><td>Vertical line pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">LEFT30</td><td>R</td><td>Forward diagonal pattern (30° slope), 8x4</td></tr>
+ <tr><td class="ps-3 font-mono">LEFT45</td><td>R</td><td>Forward diagonal line pattern (45° slope), 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">LEFTSHINGLE</td><td>R</td><td>Left shingle pattern, 24x24</td></tr>
+ <tr><td class="ps-3 font-mono">OCTAGONS</td><td>R</td><td>Octagons pattern, 16x16</td></tr>
+ <tr><td class="ps-3 font-mono">RIGHT30</td><td>R</td><td>Backward diagonal line pattern (30°), 8x4</td></tr>
+ <tr><td class="ps-3 font-mono">RIGHT45</td><td>R</td><td>Backward diagonal line pattern (30°), 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">RIGHTSHINGLE</td><td>R</td><td>Right shingle pattern, 24x24</td></tr>
+ <tr><td class="ps-3 font-mono">SMALLFISHSCALES</td><td>R</td><td>Small fish scales pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICAL</td><td>R</td><td>Vertical line pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICAL2</td><td>R</td><td>Vertical line pattern, 8x8</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICAL3</td><td>R</td><td>Vertical line pattern, 9x9</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICALBRICKS</td><td>R</td><td>Vertical brick pattern, 16x16</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICALLEFTSHINGLE</td><td>R</td><td>Vertical left shingle pattern, 24x24</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICALRIGHTSHINGLE</td><td>R</td><td>Vertical right shingle pattern, 24x24</td></tr>
+ <tr><td class="ps-3 font-mono">VERTICALSAW</td><td>R</td><td>Vertical saw-tooth pattern, 8x16</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
- <tr>
- <td>IPTC</td>
- <td>RW</td>
- <td>IPTC Newsphoto (binary)</td>
- <td>To read, use <a href="../command-line-options/index.html#profile">-profile</a> with <a href="../magick/index.html">magick</a></td>
- </tr>
+<!-- Embedded Profiles Section -->
+<section id="embedded" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-shield-check fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Embedded Image Profiles</h2>
+ </div>
+ <p class="text-body-secondary mb-3">Identifiers used to add, remove, and save embedded metadata profiles (TIFF, JPEG, PDF).</p>
+
+ <div class="card im-card p-3">
+ <div class="table-responsive">
+ <table class="table table-hover table-striped mb-0 align-middle small">
+ <thead class="table-dark">
+ <tr>
+ <th class="ps-3 font-mono" style="width:15%">Tag</th>
+ <th style="width:8%">Mode</th>
+ <th style="width:40%">Description</th>
+ <th class="pe-3" style="width:37%">Notes</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr><td class="ps-3 font-mono">8BIM</td><td>RW</td><td>Photoshop resource format (binary)</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">8BIMTEXT</td><td>RW</td><td>Photoshop resource format (ASCII)</td><td class="pe-3 text-body-secondary">ASCII representation of 8BIM.</td></tr>
+ <tr><td class="ps-3 font-mono">APP1</td><td>RW</td><td>Raw application information</td><td class="pe-3 text-body-secondary"></td></tr>
+ <tr><td class="ps-3 font-mono">APP1JPEG</td><td>RW</td><td>Raw JPEG binary data</td><td class="pe-3 text-body-secondary">Profile in JPEG wrapper.</td></tr>
+ <tr><td class="ps-3 font-mono">ICC</td><td>RW</td><td>International Color Consortium color profile (ICM)</td><td class="pe-3 text-body-secondary">Read via -profile option.</td></tr>
+ <tr><td class="ps-3 font-mono">IPTC</td><td>RW</td><td>IPTC Newsphoto (binary)</td><td class="pe-3 text-body-secondary">Read via -profile option.</td></tr>
+ <tr><td class="ps-3 font-mono">IPTCTEXT</td><td>RW</td><td>IPTC Newsphoto (ASCII)</td><td class="pe-3 text-body-secondary">ASCII representation of IPTC.</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
- <tr>
- <td>IPTCTEXT</td>
- <td>RW</td>
- <td>IPTC Newsphoto (ASCII)</td>
- <td>An ASCII representation of the IPTC format.</td>
- </tr>
- </tbody>
-</table></div>
+ </div>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/fx/index.html b/www/fx/index.html
index dfcf9d6b0..6f11fbde7 100644
--- a/www/fx/index.html
+++ b/www/fx/index.html
@@ -11,671 +11,816 @@
<meta name="description" content="Explore ImageMagick’s FX special effects operator, a powerful pixel-level expression language for image manipulation. Learn how to apply mathematical formulas to transform, distort, composite, and analyze images with flexible scripting examples and advanced functions.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | The FX Special Effects Image Operator">
<meta property="og:description" content="Explore ImageMagick’s FX special effects operator, a powerful pixel-level expression language for image manipulation. Learn how to apply mathematical formulas to transform, distort, composite, and analyze images with flexible scripting examples and advanced functions.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | The FX Special Effects Image Operator">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | The FX Special Effects Image Operator",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/fx/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore ImageMagick’s FX special effects operator, a powerful pixel-level expression language for image manipulation. Learn how to apply mathematical formulas to transform, distort, composite, and analyze images with flexible scripting examples and advanced functions.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/fx/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/fx/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">The FX Special Effects Image Operator</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#fx">The FX Special Effects Image Operator</a> • <a href="#anatomy">The Anatomy of an FX Expression</a></p>
-
-<a class="anchor" id="fx"></a>
-
-<p class="lead">The <a href="http://im.snibgo.com/fxnew.htm" rel="noopener noreferrer" target="_blank">FX special effects image operator</a> applies a mathematical expression to each pixel channel of an image. The FX expression language provides a powerful and flexible way to manipulate images, allowing you to perform a wide range of operations and transformations on your images. Use FX to:</p>
-
-<ul>
- <li>create canvases, gradients, mathematical colormaps</li>
- <li>move color values between images and channels</li>
- <li>translate, flip, mirror, rotate, scale, shear and generally distort images</li>
- <li>merge or composite multiple images together</li>
- <li>convolve or merge neighboring pixels together</li>
- <li>generate image metrics or 'fingerprints'</li>
-</ul>
-
-<p>The operator loops through all the pixels of an image and all the channels of each pixel and returns a new image with the results. The expression can reference any image in the image sequence, but only a copy of the first image is returned with suitable updates per your expression.</p>
-
-<p>The expression can be simple:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 64x64 canvas:black -channel blue -fx "1/2" fx_navy.png
-</samp></pre>
-
-<p>Here, we convert a black to a navy blue image:</p>
-
-<ul>
- <a href="../image/black.png"><img src="../image/black.png" width="64" height="64" alt="black" /></a>
- <img style="margin-top:22px; margin-bottom:22px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/navy.png"><img src="../image/navy.png" width="64" height="64" alt="navy" /></a>
-</ul>
-
-<p>Or the expression can be complex:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose: \
- -fx "(1.0/(1.0+exp(10.0*(0.5-u)))-0.006693)*1.0092503" \
- rose-sigmoidal.png
-</samp></pre>
-
-<p>This expression results in a high contrast version of the source image:</p>
-
-<ul>
- <a href="../image/rose.jpg"><img src="../image/rose.jpg" width="70" height="46" alt="rose" /></a>
- <img style="margin-top:13px; margin-bottom:13px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/rose-sigmoidal.png"><img src="../image/rose-sigmoidal.png" width="70" height="46" alt="rose-sigmoidal" /></a>
-</ul>
-
-<p>The expression can include variable assignments. Assignments, in most cases, reduce the complexity of an expression and permit some operations that might not be possible any other way. For example, lets create a radial gradient:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 70x70 canvas: \
- -fx "Xi=i-w/2; Yj=j-h/2; 1.2*(0.5-hypot(Xi,Yj)/70.0)+0.5" \
- radial-gradient.png
-</samp></pre>
-
-<p>The command above returns this image:</p>
-
-<ul>
- <a href="../image/radial-gradient.png"><img src="../image/radial-gradient.png" width="70" height="70" alt="radial-gradient" /></a>
-</ul>
-
-<p>This FX expression adds random noise to an image:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick photo.jpg -fx 'iso=32; rone=rand(); rtwo=rand(); \
- myn=sqrt(-2*ln(rone))*cos(2*Pi*rtwo); myntwo=sqrt(-2*ln(rtwo))* \
- cos(2*Pi*rone); pnoise=sqrt(p)*myn*sqrt(iso)* \
- channel(4.28,3.86,6.68)/255; max(0,p+pnoise)' noisy.png
-</samp></pre>
-
-<p>This FX script utilizes a loop to create a <a href="https://en.wikipedia.org/wiki/Julia_set">Julia set</a>:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 400x400 xc:gray -fx " \
- Xi=2.4*i/w-1.2; \
- Yj=2.4*j/h-1.2; \
- for (pixel=0.0, (hypot(Xi,Yj) < 2.0) && (pixel < 1.0), \
- delta=Xi^2-Yj^2; \
- Yj=2.0*Xi*Yj+0.2; \
- Xi=delta+0.4; \
- pixel+=0.00390625 \
- ); \
- pixel == 1.0 ? 0.0 : pixel" \
- \( -size 1x1 xc:white xc:red xc:orange xc:yellow xc:green1 xc:cyan xc:blue \
- xc:blueviolet xc:white -reverse +append -filter Cubic -resize 1024x1! \) \
- -clut -rotate -90 julia-set.png</samp></pre>
-
-<ul>
- <a href="../image/julia-set.png"><img src="../image/julia-set.png" width="160" height="160" alt="Julia Fractals" /></a>
-</ul>
-
-<p>This FX script prints the first 10 prime numbers:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick xc:gray -fx " \
- for (prime=2, prime < 30, composite=0; \
- for (nn=2, nn < (prime/2+1), if ((prime % nn) == 0, composite++, ); nn++); \
- if (composite <= 0, debug(prime), ); prime++)" null:</samp></pre>
-
-<p>See <a href="https://usage.imagemagick.org/transform/index.html#fx">Using FX, The Special Effects Image Operator</a> for more examples.</p>
-
-<p>The <code>-fx</code> option replaces any image sequence with a clone of the first image updated with the results of the expression. If you prefer to apply the expression to each image in the sequence, use <code>+fx</code> instead.</p>
-
-<p>The FX expression is interpreted in a single-thread, however, it is executed in multiple threads unless the expression includes the <code>debug()</code> function.</p>
-
-<p>The next section discusses the FX expression language.</p>
-
-<h2><a class="anchor" id="anatomy"></a>The Anatomy of an FX Expression</h2>
-
-<h4>The FX Expression Language</h4>
-
-<p>The formal FX expression language is defined here:</p>
-
-<dl class="row">
- <dt class="col-md-4"> numbers:</dt>
- <dd class="col-md-8"> integer, floating point, scientific notation (+/- required, e.g. 3.81469e-06), International System number postfixes (e.g. KB, Mib, GB, etc.)</dd>
- <dt class="col-md-4"> constants: </dt>
- <dd class="col-md-8"> E (Euler's number), Epsilon, Opaque, Phi (golden ratio), Pi, QuantumRange, QuantumScale, Transparent</dd>
- <dt class="col-md-4"> FX operators (in order of precedence): </dt>
- <dd class="col-md-8"> ^ (power), unary -, *, /, % (modulo), +, -,
- <<, >>, <, <=, >, >=, +=, -=, *=, /=, %=, <<=
-, >>=,
- &=, |=, ++, --, ==, !=, & (bitwise AND), | (bitwise OR),
- && (logical AND), || (logical OR),
- ~ (logical NOT), ?: (ternary conditional)</dd>
- <dt class="col-md-4"> array: </dt>
- <dd class="col-md-8">an image offers array storage (e.g. p[-1,-1].r) bounded by its width and height. An image sequence represents multiple arrays (e.g. u.p[0,0].r, v.p[0,0].r). Storage is limited to Quantum values, e.g. [0..65535] for Q16 builds and floating point for HDRI-enabled builds.</dd>
- <dt class="col-md-4"> math functions: </dt>
- <dd class="col-md-8"> abs(), acos(), acosh(), airy(), alt(), asin(), asinh(), atan(), atanh(), atan2(), ceil(), clamp(), cos(), cosh(), debug(), drc(), epoch(), erf(), exp(), floor(), gauss(), gcd(), hypot(), int(), isnan(), j0(), j1(), jinc(), ln(), log(), logtwo(), magicktime(), max(), min(), mod(), not(), pow(), rand(), round(), sign(), sin(), sinc(), sinh(), sqrt(), squish(), tan(), tanh(), trunc()</dd>
- <dt class="col-md-4"> channel functions: </dt>
- <dd class="col-md-8"> define up to 5 pixel channels</dd>
- <dt class="col-md-4"> color names:</dt>
- <dd class="col-md-8"> red, cyan, black, etc.</dd>
- <dt class="col-md-4"> color functions:</dt>
- <dd class="col-md-8"> srgb(), srgba(), rgb(), rgba(), cmyk(), cmyka(), hsl(), hsla(), etc.</dd>
- <dt class="col-md-4"> color hex values:</dt>
- <dd class="col-md-8"> #ccc, #cbfed0, #b9e1cc00, etc.</dd>
- <dt class="col-md-4"> symbols:</dt><dd class="col-md-8"><dl>
- <dd><code>u</code>: first image in list</dd>
- <dd><code>v</code>: second image in list</dd>
- <dd><code>s</code>: current image in list (for %[fx:] otherwise = u)</dd>
- <dd><code>t</code>: index of current image (s) in list</dd>
- <dd><code>n</code>: number of images in list</dd>
-
- <dd><code>i</code>: column offset</dd>
- <dd><code>j</code>: row offset</dd>
- <dd><code>p</code>: pixel to use (absolute or relative to current pixel)</dd>
-
- <dd><code>w</code>: width of this image</dd>
- <dd><code>h</code>: height of this image</dd>
- <dd><code>z</code>: channel depth</dd>
-
- <dd><code>r</code>: red value (from RGBA), of a specific or current pixel</dd>
- <dd><code>g</code>: green</dd>
- <dd><code>b</code>: blue</dd>
- <dd><code>a</code>: alpha</dd>
- <dd><code>o</code>: opacity</dd>
-
- <dd><code>c</code>: cyan value of CMYK color of pixel</dd>
- <dd><code>y</code>: yellow</dd>
- <dd><code>m</code>: magenta</dd>
- <dd><code>k</code>: black</dd>
-
- <dd><code>all</code>: all channels</dd>
- <dd><code>this</code>: this channel</dd>
-
- <dd><code>intensity</code>: pixel intensity</dd>
-
- <dd><code>hue</code>: pixel hue</dd>
- <dd><code>saturation</code>: pixel saturation</dd>
- <dd><code>lightness</code>: pixel lightness</dd>
- <dd><code>luma</code>: pixel luma</dd>
-
- <dd><code>page.width</code>: page width</dd>
- <dd><code>page.height</code>: page height</dd>
- <dd><code>page.x</code>: page x offset</dd>
- <dd><code>page.y</code>: page y offset</dd>
-
- <dd><code>printsize.x</code>: x printsize</dd>
- <dd><code>printsize.y</code>: y printsize</dd>
-
- <dd><code>resolution.x</code>: x resolution</dd>
- <dd><code>resolution.y</code>: y resolution</dd>
-
- <dd><code>depth</code>: image depth</dd>
- <dd><code>extent</code>: image extent</dd>
- <dd><code>minima</code>: image minima</dd>
- <dd><code>maxima</code>: image maxima</dd>
- <dd><code>mean</code>: image mean</dd>
- <dd><code>median</code>: image median</dd>
- <dd><code>standard_deviation</code>: image standard deviation</dd>
- <dd><code>kurtosis</code>: image kurtosis</dd>
- <dd><code>skewness</code>: image skewness (add a channel specifier to compute a statistic for that channel, e.g. depth.r)</dd></dl></dd>
- <dt class="col-md-4"> iterators:</dt>
- <dd class="col-md-8"> do(), for(), while()</dd>
- <dt class="col-md-4"> image attributes:</dt>
- <dd class="col-md-8"> s.depth, s.kurtosis, s.maxima, s.mean, s.minima, s.resolution.x, s.resolution.y, s.skewness, s.standard_deviation</dd>
- <dt class="col-md-4"> user settings:</dt>
- <dd class="col-md-8">define Fx symbols as user settings, e.g. <pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick ... -set option:wd1 "%[fx:w/2]" -resize "%[fx:wd1-5]" ...</samp></pre></pre><dd>
-</dl>
-
-<h4>The FX Expression</h4>
-
-<p>An FX expression may include any combination of the following:</p>
-<dl class="row">
-<dt class="col-md-4"> <var>x</var> <code>^</code> <var>y</var></dt><dd class="col-md-8"> exponentiation (<var>x<sup>y</sup></var>)</dd>
-<dt class="col-md-4"> <code>(</code> ... <code>)</code></dt><dd class="col-md-8"> grouping</dd>
-<dt class="col-md-4"> <var>x</var> <code>*</code> <var>y</var></dt><dd class="col-md-8"> multiplication</dd>
-<dt class="col-md-4"> <var>x</var> <code>/</code> <var>y</var></dt><dd class="col-md-8"> division</dd>
-<dt class="col-md-4"> <var>x</var> <code>%</code> <var>y</var></dt><dd class="col-md-8"> modulo</dd>
-<dt class="col-md-4"> <var>x</var> <code>+</code> <var>y</var></dt><dd class="col-md-8"> addition</dd>
-<dt class="col-md-4"> <var>x</var> <code>-</code> <var>y</var></dt><dd class="col-md-8"> subtraction</dd>
-<dt class="col-md-4"> <var>x</var> <code><<</code> <var>y</var></dt><dd class="col-md-8"> left shift</dd>
-<dt class="col-md-4"> <var>x</var> <code>>></code> <var>y</var></dt><dd class="col-md-8"> right shift</dd>
-<dt class="col-md-4"> <var>x</var> <code><</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> < <var>y</var>, otherwise 0.0</dd>
-<dt class="col-md-4"> <var>x</var> <code><=</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> <= <var>y</var>, otherwise 0.0</dd>
-<dt class="col-md-4"> <var>x</var> <code>></code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> > <var>y</var>, otherwise 0.0</dd>
-<dt class="col-md-4"> <var>x</var> <code>>=</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x</var> >= <var>y</var>, otherwise 0.0</dd>
-<dt class="col-md-4"> <var>x</var> <code>==</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x </var>==<var> y</var> within epsilon (1e-12), otherwise 0.0. Two values as equal when their difference is within about 1e‑12.</dd>
-<dt class="col-md-4"> <var>x</var> <code>!=</code> <var>y</var></dt><dd class="col-md-8"> boolean relation, return value 1.0 if <var>x </var>!=<var> y</var> within epsilon (1e-12), otherwise 0.0</dd>
-<dt class="col-md-4"> <var>x</var> <code>&</code> <var>y</var></dt><dd class="col-md-8"> binary AND</dd>
-<dt class="col-md-4"> <var>x</var> <code>|</code> <var>y</var></dt><dd class="col-md-8"> binary OR</dd>
-<dt class="col-md-4"> <var>x</var> <code>&&</code> <var>y</var></dt><dd class="col-md-8"> logical AND connective, return value 1.0 if <var>x</var> > 0 and <var>y</var> > 0, otherwise 0.0</dd>
-<dt class="col-md-4"> <var>x</var> <code>||</code> <var>y</var></dt><dd class="col-md-8"> logical OR connective (inclusive), return value 1.0 if <var>x</var> > 0 or <var>y</var> > 0 (or both), otherwise 0.0</dd>
-<dt class="col-md-4"> <code>~</code><var>x</var></dt><dd class="col-md-8"> logical NOT operator, return value 1.0 if <var>not</var> <var>x</var> > 0, otherwise 0.0</dd>
-<dt class="col-md-4"> <code>+</code><var>x</var></dt><dd class="col-md-8"> unary plus, return 1.0*value</dd>
-<dt class="col-md-4"> <code>-</code><var>x</var></dt><dd class="col-md-8"> unary minus, return -1.0*value</dd>
-<dt class="col-md-4"> <var>condition</var> <code>?</code> <var>true-statements</var> <code>:</code> <var>false-statements</var> </dt><dd class="col-md-8">ternary conditional expression, return value <var>true-statements</var> if <var>condition</var> != 0, otherwise <var>false-statements</var></dd>
-<dt class="col-md-4"> <var>x</var> <code>=</code> <var>y</var></dt><dd class="col-md-8">assignment; single character variables are reserved, instead use 2 or more characters, letter combinations only (e.g. Xi not X1)</dd>
-<dt class="col-md-4"> <var>x</var> <code>;</code> <var>y</var></dt><dd class="col-md-8">statement separator </dd>
-<dt class="col-md-4"> <code>phi</code></dt><dd class="col-md-8"> constant (1.618034...)</dd>
-<dt class="col-md-4"> <code>pi</code></dt><dd class="col-md-8"> constant (3.14159265359...)</dd>
-<dt class="col-md-4"> <code>e</code></dt><dd class="col-md-8"> constant (2.71828...)</dd>
-<dt class="col-md-4"> <code>QuantumRange</code></dt><dd class="col-md-8"> constant maximum pixel value (255 for Q8, 65535 for Q16)</dd>
-<dt class="col-md-4"> <code>QuantumScale</code></dt><dd class="col-md-8"> constant 1.0/<code>QuantumRange</code></dd>
-<dt class="col-md-4"> <code>intensity</code></dt><dd class="col-md-8"> pixel intensity whose value respects the <a href="../command-line-options/index.html#intensity">-intensity</a> option.</dd>
-<dt class="col-md-4"> <code>hue</code></dt><dd class="col-md-8"> pixel hue</dd>
-<dt class="col-md-4"> <code>saturation</code></dt><dd class="col-md-8"> pixel saturation</dd>
-<dt class="col-md-4"> <code>lightness</code></dt><dd class="col-md-8"> pixel lightness; equivalent to 0.5*max(red,green,blue) + 0.5*min(red,green,blue)</dd>
-<dt class="col-md-4"> <code>luminance</code></dt><dd class="col-md-8"> pixel luminance; equivalent to <code>0.212656*red + 0.715158*green + 0.072186*blue</code></dd>
-<dt class="col-md-4"> <code>red, green, blue</code>, etc.</dt><dd class="col-md-8"> color names</dd>
-<dt class="col-md-4"> <code>#ccc, #cbfed0, #b9e1cc00</code>, etc.</dt><dd class="col-md-8"> color hex values</dd>
-<dt class="col-md-4"> <code>rgb(), rgba(), cmyk(), cmyka(), hsl(), hsla()</code></dt><dd class="col-md-8"> color functions</dd>
-<dt class="col-md-4"> <code>s, t, u, v, n, i, j, w, h, z, r, g, b, a, o, c, y, m, k</code></dt><dd class="col-md-8"> symbols</dd>
-<dt class="col-md-4"> <code>abs(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> absolute value function</dd>
-<dt class="col-md-4"> <code>acos(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> arc cosine function</dd>
-<dt class="col-md-4"> <code>acosh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> inverse hyperbolic cosine function</dd>
-<dt class="col-md-4"> <code>airy(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> Airy function (max=1, min=0); airy(<var>x</var>)=[jinc(<var>x</var>)]<sup>2</sup>=[2*j1(<var>pi*x</var>)/(<var>pi*x</var>)]<sup>2</sup></dd>
-<dt class="col-md-4"> <code>alt(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> sign alternation function (return 1.0 if int(<var>x</var>) is even, -1.0 if int(<var>x</var>) is odd)</dd>
-<dt class="col-md-4"> <code>asin(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> arc sine function</dd>
-<dt class="col-md-4"> <code>asinh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> inverse hyperbolic sine function</dd>
-<dt class="col-md-4"> <code>atan(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> arc tangent function</dd>
-<dt class="col-md-4"> <code>atanh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> inverse hyperbolic tangent function</dd>
-<dt class="col-md-4"> <code>atan2(</code><var>y</var>,<var>x</var><code>)</code></dt><dd class="col-md-8"> arc tangent function of two variables</dd>
-<dt class="col-md-4"> <code>ceil(</code><var>x</var><code>)</code></dt><dd class="col-md-8">smallest integral value not less than argument</dd>
-<dt class="col-md-4"> <code>channel(</code>...<code>)</code></dt><dd class="col-md-8">supports from zero to five arguments, e.g., channel(0.1) sets the first channel to 0.1 and zero's the other channels.</dd>
-<dt class="col-md-4"> <code>clamp(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> clamp value</dd>
-<dt class="col-md-4"> <code>cos(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> cosine function</dd>
-<dt class="col-md-4"> <code>cosh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> hyperbolic cosine function</dd>
-<dt class="col-md-4"> <code>debug(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> print <var>x</var> (useful for debugging your expression)</dd>
-<dt class="col-md-4"> <code>do(</code><var>statements</var>, <var>condition</var><code>)</code></dt><dd class="col-md-8"> iterate while the condition is not equal to 0</dd>
-<dt class="col-md-4"> <code>drc(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> dynamic range compression (knee curve); drc(<var>x</var>,<var>y</var>)=(<var>x</var>)/(<var>y</var>*(<var>x</var>-1)+1); -1<<var>y</var><1 </dd>
-<dt class="col-md-4"> <code>epoch(</code><var>date-time</var><code>)</code></dt><dd class="col-md-8"> convert date-time property to the number of seconds since the epoch, 00:00:00 UTC</dd>
-<dt class="col-md-4"> <code>erf(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> error function</dd>
-<dt class="col-md-4"> <code>exp(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> natural exponential function (<var>e<sup>x</sup></var>)</dd>
-<dt class="col-md-4"> <code>floor(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> largest integral value not greater than argument</dd>
-<dt class="col-md-4"> <code>for(</code><var>initialize</var>, <var>condition</var>, <var>statements</var><code>)</code></dt><dd class="col-md-8"> iterate while the condition is not equal to 0</dd>
-<dt class="col-md-4"> <code>gauss(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> gaussian function; gauss(<var>x</var>)=exp(<var>-x*x/2</var>)/sqrt(2*pi)</dd>
-<dt class="col-md-4"> <code>gcd(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> greatest common denominator</dd>
-<dt class="col-md-4"> <code>hypot(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> the square root of x<sup>2</sup>+y<sup>2</sup></dd>
-<dt class="col-md-4"> <code>if(</code><var>condition</var>, <var>nonzero-statements</var>, <var>zero-statements</var><code>)</code></dt><dd class="col-md-8"> interpret expression depending on condition</dd>
-<dt class="col-md-4"> <code>int(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> greatest integer function (return greatest integer less than or equal to <var>x</var>)</dd>
-<dt class="col-md-4"> <code>isnan(</code><var>x</var><code>)</code></dt><dd class="col-md-8">return 1.0 if <var>x</var> is NAN, 0.0 otherwise</dd>
-<dt class="col-md-4"> <code>j0(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> Bessel functions of <var>x</var> of the first kind of order 0</dd>
-<dt class="col-md-4"> <code>j1(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> Bessel functions of <var>x</var> of the first kind of order 1</dd>
-<dt class="col-md-4"> <code>jinc(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> jinc function (max=1, min=-0.1323); jinc(<var>x</var>)=2*j1(pi*<var>x</var>)/(pi*<var>x</var>)</dd>
-<dt class="col-md-4"> <code>ln(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> natural logarithm function</dd>
-<dt class="col-md-4"> <code>log(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> logarithm base 10</dd>
-<dt class="col-md-4"> <code>logtwo(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> logarithm base 2</dd>
-<dt class="col-md-4"> <code>ln(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> natural logarithm</dd>
-<dt class="col-md-4"> <samp>$ magicktime()</samp></dt><dd class="col-md-8"> the current time in seconds since the epoch, 00:00:00 UTC</dd>
-<dt class="col-md-4"> <code>max(</code><var>x</var>, <var>y</var><code>)</code></dt><dd class="col-md-8"> maximum of <var>x</var> and <var>y</var></dd>
-<dt class="col-md-4"> <code>min(</code><var>x</var>, <var>y</var><code>)</code></dt><dd class="col-md-8"> minimum of <var>x</var> and <var>y</var></dd>
-<dt class="col-md-4"> <code>mod(</code><var>x</var>, <var>y</var><code>)</code></dt><dd class="col-md-8"> floating-point remainder function</dd>
-<dt class="col-md-4"> <code>not(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> return 1.0 if <var>x</var> is zero, 0.0 otherwise</dd>
-<dt class="col-md-4"> <code>pow(</code><var>x</var>,<var>y</var><code>)</code></dt><dd class="col-md-8"> power function (<var>x<sup>y</sup></var>)</dd>
-<dt class="col-md-4"> <code>rand()</code></dt><dd class="col-md-8"> value uniformly distributed over the interval [0.0, 1.0) with a 2 to the 128th-1 period</dd>
-<dt class="col-md-4"> <code>round()</code></dt><dd class="col-md-8"> round to integral value, regardless of rounding direction</dd>
-<dt class="col-md-4"> <code>sign(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> return -1.0 if <var>x</var> is less than 0.0 otherwise 1.0</dd>
-<dt class="col-md-4"> <code>sin(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> sine function</dd>
-<dt class="col-md-4"> <code>sinc(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> sinc function (max=1, min=-0.21); sinc(<var>x</var>)=sin(<var>pi*x</var>)/(<var>pi*x</var>)</dd>
-<dt class="col-md-4"> <code>squish(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> squish function; squish(<var>x</var>)=1.0/(1.0+exp(<var>-x</var>))</dd>
-<dt class="col-md-4"> <code>sinh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> hyperbolic sine function</dd>
-<dt class="col-md-4"> <code>sqrt(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> square root function</dd>
-<dt class="col-md-4"> <code>tan(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> tangent function</dd>
-<dt class="col-md-4"> <code>tanh(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> hyperbolic tangent function</dd>
-<dt class="col-md-4"> <code>trunc(</code><var>x</var><code>)</code></dt><dd class="col-md-8"> round to integer, towards zero</dd>
-<dt class="col-md-4"> <code>while(</code><var>condition</var>, <var>statements</var><code>)</code></dt><dd class="col-md-8"> iterate while the condition is not equal to 0</dd>
-<dt class="col-md-4"> <code>image.depth, image.kurtosis, image.maxima, image.mean, image.median, image.minima, image.resolution.x, image.resolution.y, image.skewness, image.standard_deviation</code></dt><dd class="col-md-8"> image attributes</dd>
-</dl>
-<p>The expression semantics include these rules:</p>
-
-<ul>
-<li>symbols are case insensitive</li>
-<li>only one ternary conditional (e.g. x ? y : z) per statement</li>
-<li>statements are assignments or the final expression to return</li>
-<li>an assignment starts a statement, it is not an operator</li>
-<li>single character variables are reserved. Assignments to reserved built-ins throw an exception; e.g. <code>r=3.0; r</code> returns <em>Attempted assignment to non-UserSymbol 'r' at '3.0'</em>.</li>
-<li>unary operators have a lower priority than binary operators, that is, the unary minus (negation) has lower precedence than exponentiation, so -3^2 is interpreted as -(3^2) = -9. Use parentheses to clarify your intent (e.g. (-3)^2 = 9).</li>
-<li>care must be exercised when using the slash ('/') symbol. The string of characters <var>1/2x</var> is interpreted as (1/2)x. The contrary interpretation should be written explicitly as 1/(2x). Again, the use of parentheses helps clarify the meaning and should be used whenever there is any chance of misinterpretation.</li>
-<li>As <code>--</code> is the variable decrement operator, use parenthesis to subtract a negative number, e.g, <code>-4-(-5)</code>.</li>
-</ul>
-<br/>
-
-
-<h4>Source Images</h4>
-
-<p>The symbols <code>u</code> and <code>v</code> refer to the first and second images, respectively, in the current image sequence. Refer to a particular image in a sequence by appending its index to any image reference (usually <code>u</code>), with a zero index for the beginning of the sequence. A negative index counts from the end. For example, <code>u[0]</code> is the first image in the sequence, <code>u[2]</code> is the third, <code>u[-1]</code> is the last image, and <code>u[t]</code> is the current image. The current image can also be referenced by <code>s</code>. If the sequence number exceeds the length of the sequence, the count is wrapped. Thus in a 3-image sequence, <code>u[-1]</code>, <code>u[2]</code>, and <code>u[5]</code> all refer to the same (third) image.</p>
-
-<p>As an example, we form an image by averaging the first image and third images (the second (index 1) image is ignored and just junked):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick image1.jpg image2.jpg image3.jpg -fx "(u+u[2])/2" image.jpg
-</samp></pre>
-
-<p>By default, the image to which <code>p</code>, <code>r</code>, <code>g</code>, <code>b</code>, <code>a</code>, etc., are applied is the current image <code>s</code> in the image list. This is equivalent to <code>u</code> except when used in an escape sequence <code>%[fx:...]</code>. </p>
-
-<p>It is important to note the special role played by the first image. This is the only image in the image sequence that is modified, other images are used only for their data. As an illustrative example, consider the following, and note that the setting <a href="../command-line-options/index.html#channel">-channel red</a> instructs <a href="../command-line-options/index.html#fx">-fx</a> to modify only the green channel; nothing in the red or blue channels will change. It is instructive to ponder why the result is not symmetric.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick logo: -flop logo: -resize "20%" -channel green -fx "(u+v)/2" image.jpg
-</samp></pre>
-
-<ul>
- <a href="../image/logo-sm-flop.png"><img src="../image/logo-sm-flop.png" width="128" height="96" alt="logo-sm-flop.png" /></a>
- <a href="../image/logo-sm.png"><img src="../image/logo-sm.png" width="128" height="96" alt="logo-sm.png" /></a>
-<img style="margin-top:38px; margin-bottom:38px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/logo-sm-fx.png"><img src="../image/logo-sm-fx.png" width="128" height="96" alt="logo-sm-fx.png" /></a>
-</ul>
-
-<br/>
-<h4>Accessing Pixels</h4>
-
-<p>All color values are normalized to the range of 0.0 to 1.0. The alpha channel ranges from 0.0 (fully transparent) to 1.0 (fully opaque).</p>
-
-<p>The pixels are processed one at a time, but a different pixel of an image can be specified using a pixel index represented by <code>p</code>. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>p[-1].g green value of pixel to the immediate left of the current pixel
-p[-1,-1].r red value of the pixel diagonally left and up from current pixel
-</code></pre>
-
-<p>To specify an absolute position, use braces, rather than brackets.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>p{0,0}.r red value of the pixel in the upper left corner of the image
-p{12,34}.b blue pixel value at column number 12, row 34 of the image
-</code></pre>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">The FX Special Effects Image Operator</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore ImageMagick’s FX special effects operator, a powerful pixel-level expression language for image manipulation. Learn how to apply mathematical formulas to transform, distort, composite, and analyze images with flexible scripting examples and advanced functions.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>Integer values of the position retrieve the color of the pixel referenced, while non-integer position values return a blended color according to the current <a href="../command-line-options/index.html#interpolate">-interpolate</a> setting.</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Page Quick Navigation / ToC Header -->
+ <div class="card im-card bg-body-tertiary border-0 mb-4">
+ <div class="card-body p-3 d-flex flex-wrap align-items-center justify-content-between gap-3">
+ <div class="d-flex align-items-center gap-2 text-body-secondary small">
+ <i class="bi bi-compass"></i>
+ <span>Jump to section:</span>
+ </div>
+ <div class="d-flex flex-wrap gap-2">
+ <a href="#fx-overview" class="btn btn-sm btn-outline-secondary rounded-pill">Overview</a>
+ <a href="#fx-examples" class="btn btn-sm btn-outline-secondary rounded-pill">Examples & Scripts</a>
+ <a href="#anatomy" class="btn btn-sm btn-outline-secondary rounded-pill">Language Specification</a>
+ <a href="#source-images" class="btn btn-sm btn-outline-secondary rounded-pill">Source Images & Pixels</a>
+ </div>
+ </div>
+ </div>
-<p>A position outside the boundary of the image retrieves a value dictated by the <a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel</a> option setting.</p>
+ <!-- Section 1: Overview -->
+ <section id="fx-overview" class="mb-5">
+ <div class="mb-4">
+ <p class="lead text-body">
+ The <a href="http://im.snibgo.com/fxnew.htm" rel="noopener noreferrer" target="_blank" class="fw-medium text-decoration-none">FX special effects image operator</a> applies mathematical expressions to each pixel channel of an image. The FX expression language provides a flexible mechanism for fine-grained pixel-level transformations, analysis, and custom procedural generation.
+ </p>
+ </div>
-<p>Specify <code>u.r</code> to specify the red channel of the current image. If you don't specify a channel qualifier, you get the current channel. Use <code>mean.this</code> to set the output channel to the mean of just the input channel. Use <code>mean.all</code> to set the overall mean of the input channels.</p>
+ <div class="row g-3 mb-4">
+ <div class="col-md-6 col-lg-4">
+ <div class="p-3 border rounded-3 bg-body h-100 shadow-sm">
+ <div class="d-flex align-items-center gap-2 mb-2 text-primary fw-semibold">
+ <i class="bi bi-palette fs-5"></i> Procedural Generation
+ </div>
+ <p class="small text-body-secondary mb-0">Create procedural canvases, mathematical gradients, colormaps, and fractal sets from equations.</p>
+ </div>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <div class="p-3 border rounded-3 bg-body h-100 shadow-sm">
+ <div class="d-flex align-items-center gap-2 mb-2 text-primary fw-semibold">
+ <i class="bi bi-arrows-move fs-5"></i> Geometric Distortion
+ </div>
+ <p class="small text-body-secondary mb-0">Translate, flip, mirror, rotate, scale, shear, and warp images using custom coordinate functions.</p>
+ </div>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <div class="p-3 border rounded-3 bg-body h-100 shadow-sm">
+ <div class="d-flex align-items-center gap-2 mb-2 text-primary fw-semibold">
+ <i class="bi bi-layers fs-5"></i> Compositing & Channel Routing
+ </div>
+ <p class="small text-body-secondary mb-0">Move color channels between images, convolve pixel neighborhoods, and merge multiple inputs seamlessly.</p>
+ </div>
+ </div>
+ </div>
-<h4>Apply an Expression to Select Image Channels</h4>
+ <div class="alert alert-info d-flex align-items-start gap-3 border-0 shadow-sm" role="alert">
+ <i class="bi bi-info-circle-fill fs-5 mt-1 flex-shrink-0"></i>
+ <div>
+ <strong>Sequence Processing Note:</strong>
+ The operator loops through all pixels and channels, returning a modified copy of the first image in the sequence (<code class="font-mono">u</code>). Other images in the sequence serve as reference data unless <code class="font-mono">+fx</code> is used to process every image individually.
+ </div>
+ </div>
+ </section>
-<p>Use the <a href="../command-line-options/index.html#channel">-channel</a> setting to specify the output channel of the result. If no output channel is given, the result is set over all channels except the opacity channel. For example, to replace the red channel of <code>alpha.png</code> with the average of the green channels from the images <code>alpha.png</code> and <code>beta.png</code>, use:</p>
+ <!-- Section 2: Examples & Demonstration -->
+ <section id="fx-examples" class="mb-5">
+ <h3 class="fw-bold pb-2 border-bottom mb-4">Examples & Scripting Workflows</h3>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick alpha.png beta.png -channel red -fx "(u.g+v.g)/2" gamma.png
-</samp></pre>
+ <!-- Example 1 -->
+ <div class="card im-card mb-4 overflow-hidden">
+ <div class="card-header bg-body-tertiary fw-semibold">
+ 1. Simple Channel Modification (Canvas Color Swap)
+ </div>
+ <div class="card-body">
+ <p class="small text-body-secondary">Convert a black canvas to navy blue by assigning a fixed fractional value to the blue channel:</p>
+ <div class="bg-dark text-light rounded p-3 mb-3 font-mono border border-secondary border-opacity-25">
+ <span class="text-secondary">$</span> magick -size 64x64 canvas:black -channel blue -fx "1/2" fx_navy.png
+ </div>
+ <div class="d-flex align-items-center justify-content-center gap-4 p-3 bg-body-tertiary rounded">
+ <div class="text-center">
+ <img src="https://imagemagick.org/image/black.png" class="img-thumbnail mb-1" width="64" height="64" alt="Black canvas input" />
+ <div class="badge bg-secondary d-block">Input</div>
+ </div>
+ <i class="bi bi-arrow-right fs-4 text-secondary"></i>
+ <div class="text-center">
+ <img src="https://imagemagick.org/image/navy.png" class="img-thumbnail mb-1" width="64" height="64" alt="Navy canvas output" />
+ <div class="badge bg-primary d-block">Output</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 2 -->
+ <div class="card im-card mb-4 overflow-hidden">
+ <div class="card-header bg-body-tertiary fw-semibold">
+ 2. Non-linear Sigmoidal Contrast Transfer Function
+ </div>
+ <div class="card-body">
+ <p class="small text-body-secondary">Apply an exponential contrast curve formula to adjust image luminance response:</p>
+ <div class="bg-dark text-light rounded p-3 mb-3 font-mono border border-secondary border-opacity-25">
+ <span class="text-secondary">$</span> magick rose: -fx "(1.0/(1.0+exp(10.0*(0.5-u)))-0.006693)*1.0092503" rose-sigmoidal.png
+ </div>
+ <div class="d-flex align-items-center justify-content-center gap-4 p-3 bg-body-tertiary rounded">
+ <div class="text-center">
+ <img src="https://imagemagick.org/image/rose.jpg" class="img-thumbnail mb-1" width="70" height="46" alt="Rose original" />
+ <div class="badge bg-secondary d-block">Original</div>
+ </div>
+ <i class="bi bi-arrow-right fs-4 text-secondary"></i>
+ <div class="text-center">
+ <img src="https://imagemagick.org/image/rose-sigmoidal.png" class="img-thumbnail mb-1" width="70" height="46" alt="Rose high contrast" />
+ <div class="badge bg-primary d-block">High Contrast</div>
+ </div>
+ </div>
+ </div>
+ </div>
-<h4>Results</h4>
+ <!-- Example 3 -->
+ <div class="card im-card mb-4 overflow-hidden">
+ <div class="card-header bg-body-tertiary fw-semibold">
+ 3. Custom Variables & Radial Gradients
+ </div>
+ <div class="card-body">
+ <p class="small text-body-secondary">Assign intermediate variable calculations (<code class="font-mono">Xi</code>, <code class="font-mono">Yj</code>) to construct mathematical gradients:</p>
+ <div class="bg-dark text-light rounded p-3 mb-3 font-mono border border-secondary border-opacity-25">
+ <span class="text-secondary">$</span> magick -size 70x70 canvas: -fx "Xi=i-w/2; Yj=j-h/2; 1.2*(0.5-hypot(Xi,Yj)/70.0)+0.5" radial-gradient.png
+ </div>
+ <div class="d-flex align-items-center justify-content-center p-3 bg-body-tertiary rounded">
+ <div class="text-center">
+ <img src="https://imagemagick.org/image/radial-gradient.png" class="img-thumbnail mb-1" width="70" height="70" alt="Radial gradient" />
+ <div class="badge bg-success d-block">Generated Pattern</div>
+ </div>
+ </div>
+ </div>
+ </div>
-<p>The <a href="../command-line-options/index.html#fx">-fx</a> operator evaluates the given expression for each channel (set by <a href="../command-line-options/index.html#channel">-channel</a>) of each pixel in the first image (<code>u</code>) in the sequence. The computed values are temporarily stored in a copy (clone) of that first image until all the pixels have been processed, after which this single new image replaces the list of images in the current image sequence. As such, in the previous example the updated version of <code>alpha.png</code> replaces both of the original images, <code>alpha.png</code> and <code>beta.png</code>, before being saved as <code>gamma.png</code>.</p>
+ <!-- Advanced Scripts Accordion -->
+ <div class="accordion mb-4" id="advancedScripts">
+ <div class="accordion-item border rounded-3 overflow-hidden">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseNoise">
+ Advanced: Gaussian Noise Generation
+ </button>
+ </h2>
+ <div id="collapseNoise" class="accordion-collapse collapse" data-bs-parent="#advancedScripts">
+ <div class="accordion-body bg-body-tertiary">
+ <p class="small text-body-secondary">Inject custom statistical Gaussian noise into an image pipeline:</p>
+ <div class="bg-dark text-light rounded p-3 font-mono border border-secondary border-opacity-25">
+ <span class="text-secondary">$</span> magick photo.jpg -fx 'iso=32; rone=rand(); rtwo=rand(); \<br>
+ myn=sqrt(-2*ln(rone))*cos(2*Pi*rtwo); myntwo=sqrt(-2*ln(rtwo))* \<br>
+ cos(2*Pi*rone); pnoise=sqrt(p)*myn*sqrt(iso)* \<br>
+ channel(4.28,3.86,6.68)/255; max(0,p+pnoise)' noisy.png
+ </div>
+ </div>
+ </div>
+ </div>
-<p>The current image <code>s</code> is set to the first image in the sequence (<code>u</code>), and <code>t</code> to its index, 0. The symbols <code>i</code> and <code>j</code> reference the current pixel being processed.</p>
+ <div class="accordion-item border rounded-3 overflow-hidden mt-2">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapseJulia">
+ Advanced: Julia Set Fractal Rendering
+ </button>
+ </h2>
+ <div id="collapseJulia" class="accordion-collapse collapse" data-bs-parent="#advancedScripts">
+ <div class="accordion-body bg-body-tertiary">
+ <p class="small text-body-secondary">Leverage iterative <code class="font-mono">for()</code> loops to map complex polynomial fractal calculations into color lookup tables (CLUT):</p>
+ <div class="bg-dark text-light rounded p-3 mb-3 font-mono border border-secondary border-opacity-25">
+ <span class="text-secondary">$</span> magick -size 400x400 xc:gray -fx " \<br>
+ Xi=2.4*i/w-1.2; \<br>
+ Yj=2.4*j/h-1.2; \<br>
+ for (pixel=0.0, (hypot(Xi,Yj) < 2.0) && (pixel < 1.0), \<br>
+ delta=Xi^2-Yj^2; \<br>
+ Yj=2.0*Xi*Yj+0.2; \<br>
+ Xi=delta+0.4; \<br>
+ pixel+=0.00390625 \<br>
+ ); \<br>
+ pixel == 1.0 ? 0.0 : pixel" \<br>
+ \( -size 1x1 xc:white xc:red xc:orange xc:yellow xc:green1 xc:cyan xc:blue \<br>
+ xc:blueviolet xc:white -reverse +append -filter Cubic -resize 1024x1! \) \<br>
+ -clut -rotate -90 julia-set.png
+ </div>
+ <div class="text-center">
+ <img src="https://imagemagick.org/image/julia-set.png" class="img-thumbnail" width="160" height="160" alt="Julia Fractals" />
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="accordion-item border rounded-3 overflow-hidden mt-2">
+ <h2 class="accordion-header">
+ <button class="accordion-button collapsed fw-semibold" type="button" data-bs-toggle="collapse" data-bs-target="#collapsePrimes">
+ Advanced: Prime Number Generator & Console Debugging
+ </button>
+ </h2>
+ <div id="collapsePrimes" class="accordion-collapse collapse" data-bs-parent="#advancedScripts">
+ <div class="accordion-body bg-body-tertiary">
+ <p class="small text-body-secondary">Use the <code class="font-mono">debug()</code> statement inside FX loops to calculate math output directly to standard output:</p>
+ <div class="bg-dark text-light rounded p-3 font-mono border border-secondary border-opacity-25">
+ <span class="text-secondary">$</span> magick xc:gray -fx " \<br>
+ for (prime=2, prime < 30, composite=0; \<br>
+ for (nn=2, nn < (prime/2+1), if ((prime % nn) == 0, composite++, ); nn++); \<br>
+ if (composite <= 0, debug(prime), ); prime++)" null:
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
-<p>For use with <a href="../command-line-options/index.html#format_identify_">-format</a>, the value-escape <code>%[fx:]</code> is evaluated just once for each image in the current image sequence. As each image in the sequence is being evaluated, <code>s</code> and <code>t</code> successively refer to the current image and its index, while <code>i</code> and <code>j</code> are set to zero, and the current channel set to red (<a href="../command-line-options/index.html#channel">-channel</a> is ignored). An example:</p>
+ <p class="small text-body-secondary text-end">
+ For more script examples, visit the official <a href="https://usage.imagemagick.org/transform/index.html#fx" target="_blank" rel="noopener">ImageMagick Usage Guide</a>.
+ </p>
+ </section>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick canvas:'rgb(25%,50%,75%)' rose: -colorspace gray \
- -format 'Red channel of NW corner of image #%[fx:t] is %[fx:s]\n' info:
-Red channel of NW corner of image #0 is 0.464883
-Red channel of NW corner of image #1 is 0.184582
-</samp></pre>
+ <!-- Section 3: Expression Anatomy & Reference -->
+ <section id="anatomy" class="mb-5">
+ <h3 class="fw-bold pb-2 border-bottom mb-4">The Anatomy of an FX Expression</h3>
-<p>Here we use the image indexes to <var>rotate</var> each image differently, and use <code>-set</code> with the image index to set a different <var>pause delay</var> on the first image in the animation:</p>
+ <div class="card im-card mb-4">
+ <div class="card-header bg-body-tertiary">
+ <ul class="nav nav-tabs card-header-tabs" id="fxRefTabs" role="tablist">
+ <li class="nav-item" role="presentation">
+ <button class="nav-link active fw-semibold" id="symbols-tab" data-bs-toggle="tab" data-bs-target="#symbols" type="button" role="tab">Symbols & Variables</button>
+ </li>
+ <li class="nav-item" role="presentation">
+ <button class="nav-link fw-semibold" id="math-tab" data-bs-toggle="tab" data-bs-target="#math" type="button" role="tab">Functions & Math</button>
+ </li>
+ <li class="nav-item" role="presentation">
+ <button class="nav-link fw-semibold" id="operators-tab" data-bs-toggle="tab" data-bs-target="#operators" type="button" role="tab">Operators & Types</button>
+ </li>
+ </ul>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose: -duplicate 29 -virtual-pixel Gray -distort SRT '%[fx:360.0*t/n]' \
- -set delay '%[fx:t == 0 ? 240 : 10]' -loop 0 rose.gif
-</samp></pre>
+ <div class="card-body tab-content" id="fxRefTabsContent">
+ <!-- Symbols Tab -->
+ <div class="tab-pane fade show active" id="symbols" role="tabpanel">
+ <div class="table-responsive">
+ <table class="table table-hover align-middle">
+ <thead class="table-light">
+ <tr>
+ <th style="width: 20%;">Symbol</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr><td>u, v</td><td>First (<code class="text-primary">u</code>) and second (<code class="text-primary">v</code>) images in the active sequence list.</td></tr>
+ <tr><td>s, t, n</td><td>Current image reference (<code class="text-primary">s</code>), image sequence index (<code class="text-primary">t</code>), total image count (<code class="text-primary">n</code>).</td></tr>
+ <tr><td>i, j, p</td><td>Current column offset (<code class="text-primary">i</code>), row offset (<code class="text-primary">j</code>), target pixel channel accessor (<code class="text-primary">p</code>).</td></tr>
+ <tr><td>w, h, z</td><td>Current image width (<code class="text-primary">w</code>), height (<code class="text-primary">h</code>), channel depth (<code class="text-primary">z</code>).</td></tr>
+ <tr><td>r, g, b, a, o</td><td>Red, green, blue, alpha, and opacity values of the target pixel.</td></tr>
+ <tr><td>c, m, y, k</td><td>Cyan, magenta, yellow, and black values for CMYK target pixels.</td></tr>
+ <tr><td>intensity, luma</td><td>Calculated pixel color intensity or luma weighted scalar.</td></tr>
+ <tr><td>hue, saturation, lightness</td><td>Pixel color channels extracted from HSL space representation.</td></tr>
+ <tr><td>page.x, page.y, page.width</td><td>Canvas page offsets and dimensions.</td></tr>
+ <tr><td>mean, standard_deviation, kurtosis</td><td>Image or individual channel statistics (e.g. <code class="text-primary">mean.r</code>, <code class="text-primary">s.kurtosis</code>).</td></tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
-<p>This example tests the difference between two images, measured by RMSE. If the difference is greater than 0.1 it returns 1; otherwise it returns 0:</p>
+ <!-- Math Functions Tab -->
+ <div class="tab-pane fade" id="math" role="tabpanel">
+ <p class="small text-body-secondary mb-3">Supported native built-in mathematical functions:</p>
+ <div class="d-flex flex-wrap gap-1 font-mono small mb-3">
+ <span class="badge text-bg-light border">abs()</span>
+ <span class="badge text-bg-light border">acos()</span>
+ <span class="badge text-bg-light border">acosh()</span>
+ <span class="badge text-bg-light border">airy()</span>
+ <span class="badge text-bg-light border">alt()</span>
+ <span class="badge text-bg-light border">asin()</span>
+ <span class="badge text-bg-light border">asinh()</span>
+ <span class="badge text-bg-light border">atan()</span>
+ <span class="badge text-bg-light border">atan2()</span>
+ <span class="badge text-bg-light border">ceil()</span>
+ <span class="badge text-bg-light border">clamp()</span>
+ <span class="badge text-bg-light border">cos()</span>
+ <span class="badge text-bg-light border">cosh()</span>
+ <span class="badge text-bg-light border">debug()</span>
+ <span class="badge text-bg-light border">drc()</span>
+ <span class="badge text-bg-light border">epoch()</span>
+ <span class="badge text-bg-light border">erf()</span>
+ <span class="badge text-bg-light border">exp()</span>
+ <span class="badge text-bg-light border">floor()</span>
+ <span class="badge text-bg-light border">gauss()</span>
+ <span class="badge text-bg-light border">gcd()</span>
+ <span class="badge text-bg-light border">hypot()</span>
+ <span class="badge text-bg-light border">int()</span>
+ <span class="badge text-bg-light border">isnan()</span>
+ <span class="badge text-bg-light border">j0()</span>
+ <span class="badge text-bg-light border">j1()</span>
+ <span class="badge text-bg-light border">jinc()</span>
+ <span class="badge text-bg-light border">ln()</span>
+ <span class="badge text-bg-light border">log()</span>
+ <span class="badge text-bg-light border">logtwo()</span>
+ <span class="badge text-bg-light border">magicktime()</span>
+ <span class="badge text-bg-light border">max()</span>
+ <span class="badge text-bg-light border">min()</span>
+ <span class="badge text-bg-light border">mod()</span>
+ <span class="badge text-bg-light border">not()</span>
+ <span class="badge text-bg-light border">pow()</span>
+ <span class="badge text-bg-light border">rand()</span>
+ <span class="badge text-bg-light border">round()</span>
+ <span class="badge text-bg-light border">sign()</span>
+ <span class="badge text-bg-light border">sin()</span>
+ <span class="badge text-bg-light border">sinc()</span>
+ <span class="badge text-bg-light border">sinh()</span>
+ <span class="badge text-bg-light border">sqrt()</span>
+ <span class="badge text-bg-light border">squish()</span>
+ <span class="badge text-bg-light border">tan()</span>
+ <span class="badge text-bg-light border">tanh()</span>
+ <span class="badge text-bg-light border">trunc()</span>
+ </div>
+ <div class="row g-3 small">
+ <div class="col-md-6">
+ <div class="p-2 border rounded bg-body-tertiary">
+ <strong>Color Constructors:</strong> <code class="font-mono">rgb()</code>, <code class="font-mono">rgba()</code>, <code class="font-mono">hsl()</code>, <code class="font-mono">hsla()</code>, <code class="font-mono">cmyk()</code>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="p-2 border rounded bg-body-tertiary">
+ <strong>Iterators:</strong> <code class="font-mono">for(init, condition, step)</code>, <code class="font-mono">while(cond, stmt)</code>, <code class="font-mono">do(cond, stmt)</code>
+ </div>
+ </div>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick water.png reference.png -metric RMSE -compare -format "%[fx:%[distortion]>0.1]" info:</samp></pre></pre>
+ <!-- Operators Tab -->
+ <div class="tab-pane fade" id="operators" role="tabpanel">
+ <ul class="list-group list-group-flush small font-mono">
+ <li class="list-group-item"><strong>Precedence 1 (Power):</strong> ^</li>
+ <li class="list-group-item"><strong>Precedence 2 (Unary/Multiplicative):</strong> -, *, /, %</li>
+ <li class="list-group-item"><strong>Precedence 3 (Additive/Shift):</strong> +, -, <<, >></li>
+ <li class="list-group-item"><strong>Precedence 4 (Relational):</strong> <, <=, >, >=, ==, !=</li>
+ <li class="list-group-item"><strong>Precedence 5 (Bitwise/Logical):</strong> &, |, ~, &&, ||, !</li>
+ <li class="list-group-item"><strong>Precedence 6 (Conditional):</strong> ?: (Ternary operator)</li>
+ <li class="list-group-item"><strong>Precedence 7 (Assignment):</strong> =, +=, -=, *=, /=, %=</li>
+ </ul>
+ </div>
+ </div>
+ </div>
-<p>The color-escape <code>%[pixel:]</code> or <code>%[hex:]</code> is evaluated once per image and per color channel in that image (<a href="../command-line-options/index.html#channel">-channel</a> is ignored), The values generated are then converted into a color string (a named color or hex color value). The symbols <code>i</code> and <code>j</code> are set to zero, and <code>s</code> and <code>t</code> refer to each successively current image and index.</p>
+ <!-- Syntax & Execution Rules -->
+ <div class="card im-card p-4">
+ <h5 class="fw-bold mb-3"><i class="bi bi-shield-exclamation text-warning me-2"></i>Syntax & Semantics Rules</h5>
+ <ul class="small text-body-secondary mb-0 d-flex flex-column gap-2">
+ <li>Symbols and built-in identifiers are <strong>case insensitive</strong>.</li>
+ <li>Only <strong>one ternary conditional</strong> (<code class="font-mono">x ? y : z</code>) is permitted per individual expression statement.</li>
+ <li>Single-character variable names are strictly reserved for built-ins. Use multi-character names for custom variables (e.g. <code class="font-mono">Xi</code>, <code class="font-mono">iso</code>).</li>
+ <li>Unary operators take a lower priority than binary operators. For instance, <code class="font-mono">-3^2</code> evaluates as <code class="font-mono">-(3^2) = -9</code>. Always use parentheses (<code class="font-mono">(-3)^2 = 9</code>) to explicitly indicate order.</li>
+ <li>Implicit multiplication is not performed over fractions; <code class="font-mono">1/2x</code> is interpreted as <code class="font-mono">(1/2)x</code>. Write <code class="font-mono">1/(2x)</code> explicitly when required.</li>
+ </ul>
+ </div>
+ </section>
+
+ <!-- Section 4: Source Image Access & Relative Addressing -->
+ <section id="source-images" class="mb-5">
+ <h3 class="fw-bold pb-2 border-bottom mb-4">Source Images & Pixel Addressing</h3>
+
+ <div class="row g-4 mb-4">
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold mb-3"><i class="bi bi-images text-primary me-2"></i>Image Sequence Indexes</h5>
+ <p class="small text-body-secondary">
+ Use index qualifiers on image references to query other images in the current sequence stack. Zero is the first image; negative indexes count backward from the end.
+ </p>
+ <ul class="list-group list-group-flush font-mono small mb-3">
+ <li class="list-group-item bg-transparent">u[0] <span class="text-body-secondary float-end">First image</span></li>
+ <li class="list-group-item bg-transparent">u[2] <span class="text-body-secondary float-end">Third image</span></li>
+ <li class="list-group-item bg-transparent">u[-1] <span class="text-body-secondary float-end">Last image in list</span></li>
+ <li class="list-group-item bg-transparent">u[t] <span class="text-body-secondary float-end">Current image (s)</span></li>
+ </ul>
+ <div class="bg-dark text-light rounded p-2 font-mono extra-small">
+ $ magick img1.jpg img2.jpg img3.jpg -fx "(u+u[2])/2" out.jpg
+ </div>
+ </div>
+ </div>
-<p>The <code>epoch()</code> method takes an date-time property, for example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick rose.png -precision 16 -format '%[fx:epoch(%%[date:modify])]' info:</samp></pre></pre>
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold mb-3"><i class="bi bi-grid-3x3 text-primary me-2"></i>Pixel & Neighborhood Access</h5>
+ <p class="small text-body-secondary">
+ All color values are normalized in the range <strong>0.0 to 1.0</strong>. Use relative indexing (brackets) or absolute coordinates (braces) with <code class="font-mono">p</code>:
+ </p>
+ <div class="bg-body-tertiary p-3 rounded font-mono small border mb-3">
+ <div class="mb-2"><strong>Relative Offset:</strong></div>
+ <div class="text-primary">p[-1,-1].r</div>
+ <div class="text-body-secondary extra-small mb-2">Red channel of the pixel diagonally top-left from current location</div>
+
+ <div class="mb-2"><strong>Absolute Offset:</strong></div>
+ <div class="text-primary">p{12,34}.b</div>
+ <div class="text-body-secondary extra-small">Blue channel value at column 12, row 34</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Escapes & Formats -->
+ <div class="card im-card p-4">
+ <h5 class="fw-bold mb-3"><i class="bi bi-terminal-split text-success me-2"></i>Format Escapes & String Evaluations</h5>
+ <p class="small text-body-secondary">
+ Instead of modifying pixels directly on an image canvas, FX formulas can be embedded into string escapes for metadata queries or dynamic settings:
+ </p>
+
+ <div class="row g-3">
+ <div class="col-md-6">
+ <div class="p-3 border rounded bg-body-tertiary h-100">
+ <h6><code class="font-mono">%[fx:]</code> Value Escape</h6>
+ <p class="extra-small text-body-secondary">Evaluated once per image in sequence. Returns numerical computation result directly into format attributes.</p>
+ <div class="bg-dark text-light rounded p-2 font-mono extra-small">
+ $ magick rose: -format '%[fx:w*h]' info:
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="p-3 border rounded bg-body-tertiary h-100">
+ <h6><code class="font-mono">%[pixel:]</code> Color Escape</h6>
+ <p class="extra-small text-body-secondary">Evaluates formula across color channels and automatically outputs a standardized CSS color or hex string.</p>
+ <div class="bg-dark text-light rounded p-2 font-mono extra-small">
+ $ magick rose: -format '%[pixel:p{0,0}]' info:
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/gradient/index.html b/www/gradient/index.html
index 66a79a5fc..185c91e71 100644
--- a/www/gradient/index.html
+++ b/www/gradient/index.html
@@ -11,437 +11,600 @@
<meta name="description" content="Create smooth color transitions with ImageMagick gradients. Learn how to generate linear, radial, and custom gradients for backgrounds, overlays, and image effects with precise control.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Image Gradients">
<meta property="og:description" content="Create smooth color transitions with ImageMagick gradients. Learn how to generate linear, radial, and custom gradients for backgrounds, overlays, and image effects with precise control.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Image Gradients">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Image Gradients",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/gradient/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Create smooth color transitions with ImageMagick gradients. Learn how to generate linear, radial, and custom gradients for backgrounds, overlays, and image effects with precise control.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/gradient/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/gradient/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Image Gradients</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">An image gradient creates a gradual blend between two colors formed into a shape that is linear, circular, or elliptical.</p>
-
-<p>For a linear gradient, the operator is either:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Image Gradients</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Create smooth color transitions with ImageMagick gradients. Learn how to generate linear, radial, and custom gradients for backgrounds, overlays, and image effects with precise control.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>gradient:
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="gradients-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#linear" class="text-decoration-none text-primary"><i class="bi bi-grip-horizontal me-1"></i> Linear Gradients</a>
+ <span class="text-muted">•</span>
+ <a href="#radial" class="text-decoration-none text-primary"><i class="bi bi-circle me-1"></i> Radial Gradients</a>
+ <span class="text-muted">•</span>
+ <a href="#defines" class="text-decoration-none text-primary"><i class="bi bi-sliders me-1"></i> Defines & Options</a>
+ <span class="text-muted">•</span>
+ <a href="#examples" class="text-decoration-none text-primary"><i class="bi bi-images me-1"></i> Advanced Examples</a>
+ </div>
+ </div>
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-3">
+ An image gradient creates a gradual blend between two colors formed into a shape that is linear, circular, or elliptical.
+ </p>
+ <p class="mb-0 text-body-secondary">
+ Gradient colors may be any valid color defined per <a href="../color/index.html" rel="noopener noreferrer" target="_blank" class="text-decoration-none">https://imagemagick.org/color/</a>. The named colors of black/white/grayXX and gray(XX[%]) are non-linear gray. For Linux systems, enclose rgb(a) and hex colors in quotes. Use double quotes if using variables for the values.
+ </p>
+ </div>
+ <!-- Linear Gradients Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="linear">
+ <a class="anchor text-decoration-none text-body" href="#linear">Linear Gradients</a>
+ </h2>
+ <p>For a linear gradient, the operator is either:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>gradient:
gradient:<em>fromColor</em>
gradient:<em>fromColor</em>-<em>toColor</em></code></pre>
-
-<p>The default <em>fromcolor</em> is white and the <em>toColor</em> is black unless overridden, e.g., <code>gradient:gray</code> returns a gradient from gray to black.</p>
-
-<p> For a radial gradient, the operator is either:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>radial-gradient:
-radial-gradient:<em>fromColor</em>-<em>toColor</em> </code></pre>
-
-<p>The default for a linear gradient has <em>fromColor</em> at the top of the image and <em>toColor</em> at the bottom of the image. Similarly, the default for a radial gradient has <em>fromColor</em> at the center of the image and <em>toColor</em> at the boundary of the image.</p>
-
-<p>Gradient colors may be any valid color defined per <a href="../color/index.html" rel="noopener noreferrer" target="_blank">https://imagemagick.org/color/</a>. The named colors of black/white/grayXX and gray(XX[%]) are non-linear gray. For Linux systems, enclose rgb(a) and hex colors in quotes. Use double quotes, if using variables for the values.</p>
-
-<p>Here is an example linear (as opposed to radial) gradient:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x256 gradient: linear_gradient.png
-magick -size 256x256 gradient:white-black linear_gradient.png
-</code></pre>
-
-<p><img src="../image/gradients/linear_gradient.png" alt="linear gradient" width="256" height="256"></p>
-
-<p>If you want a radial gradient, try:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x256 radial-gradient: radial_gradient.png
-magick -size 256x256 radial-gradient:white-black radial_gradient.png </code></pre>
-<p><img src="../image/gradients/radial_gradient.png" alt="radial gradient" width="256" height="256"></p>
-
-<p>If you want non-linear grayscale gradients, then add -colorspace RGB -colorspace gray
-before saving the output. For example:<p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x256 gradient: linear_gradient.png
-magick -size 256x256 gradient:white-black -colorspace RGB -colorspace gray linear_linear_gradient.png </code></pre>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x256 radial-gradient: radial_gradient.png
-magick -size 256x256 radial-gradient:white-black -colorspace RGB -colorspace gray linear_radial_gradient.png </code></pre>
-
-<p>Gradients are affected by these defines:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tr>
- <td><code>-define gradient:vector=<var>x1</var>,<var>y1</var>, <var>x2</var>,<var>y2</var></code></td>
- <td>Specifies the direction of the linear gradient going from vector1
- (x1,y1) to vector2 (x2,y2). <em>fromColor</em> is located at vector
- position x1,y1 and <em>toColor</em> is located at vector position
- x2,y2.</td>
- </tr>
-
- <tr>
- <td><code>-define gradient:center=<var>x</var>,<var>y</var></code></td>
- <td>Specifies the coordinates of the center point for the radial gradient.
- The default is the center of the image.</td>
- </tr>
-
- <tr>
- <td><code>-define gradient:radii=<var>x</var>,<var>y</var></code></td>
- <td>Specifies the x and y radii of the gradient. If the x radius and the y
- radius are equal, the shape of the radial gradient will be a circle. If
- they differ, then the shape will be an ellipse. The default values are the
- maximum of the half width and half height of the image.</td>
- </tr>
-
- <tr>
- <td><code>-define gradient:angle=<var>angle in degrees</var></code></td>
- <td>For a linear gradient, this specifies the direction of the gradient
- going from <em>fromColor</em> to <em>toColor</em> in a clockwise positive
- manner relative to north (up). For a radial gradient, this specifies the
- rotation of the gradient in a clockwise positive manner from its normal X-Y
- orientation.</td>
- </tr>
-
- <tr>
- <td><code>-define gradient:bounding-box=<var>width</var>x<var>height</var>+<var>x</var>+<var>y</var></code></td>
- <td>Limits the gradient to a larger or smaller region than the image
- dimensions. If the region defined by the bounding box is smaller than the
- image, <em>fromColor</em> is the color of the background.</td>
- </tr>
-</table>
-</div>
-
-
-<p>We also support two convenience defines for setting the linear gradient direction and the radial gradient shape.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tr>
- <td><code>-define gradient:direction=<em>{NorthWest, North, Northeast, West, East, SouthWest, South, SouthEast}</em></code></td>
- <td>Specifies the direction of the linear gradient towards the
- top/bottom/left/right or diagonal corners.</td>
- </tr>
-
- <tr>
- <td><code>-define gradient:extent=<em>{Circle, Diagonal, Ellipse, Maximum, Minimum}</em></code></td>
- <td>Specifies the shape of an image centered radial gradient. Circle and
- Maximum draw a circular radial gradient even for rectangular shaped images
- of radius equal to the larger of the half-width and half-height of the
- image. The Circle and Maximum options are both equivalent to the default
- radial gradient. The Minimum option draws a circular radial gradient
- even for rectangular shaped images of radius equal to the smaller of the
- half-width and half-height of the image. The Diagonal option draws a
- circular radial gradient even for rectangular shaped images of radius equal
- to the half-diagonal of the image. The Ellipse options draws an elliptical
- radial gradient for rectangular shaped images of radii equal to half the
- width and half the height of the image.</td>
- </tr>
-</table>
+ <p>The default <em>fromColor</em> is white and the <em>toColor</em> is black unless overridden, e.g., <code>gradient:gray</code> returns a gradient from gray to black. The default linear gradient has <em>fromColor</em> at the top of the image and <em>toColor</em> at the bottom of the image.</p>
+ <p>Here is an example linear gradient:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x256 gradient: linear_gradient.png
+magick -size 256x256 gradient:white-black linear_gradient.png</code></pre>
+ <div class="text-center my-4">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/linear_gradient.png" alt="linear gradient" width="256" height="256" />
+ <div class="small text-muted font-mono mt-1">linear_gradient.png</div>
+ </div>
+ <!-- Radial Gradients Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="radial">
+ <a class="anchor text-decoration-none text-body" href="#radial">Radial Gradients</a>
+ </h2>
+ <p>For a radial gradient, the operator is either:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>radial-gradient:
+radial-gradient:<em>fromColor</em>-<em>toColor</em></code></pre>
+ <p>Similarly, the default for a radial gradient has <em>fromColor</em> at the center of the image and <em>toColor</em> at the boundary of the image.</p>
+ <p>If you want a radial gradient, try:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x256 radial-gradient: radial_gradient.png
+magick -size 256x256 radial-gradient:white-black radial_gradient.png</code></pre>
+ <div class="text-center my-4">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/radial_gradient.png" alt="radial gradient" width="256" height="256" />
+ <div class="small text-muted font-mono mt-1">radial_gradient.png</div>
+ </div>
+ <!-- Non-linear Grayscale -->
+ <h3 class="fw-bold mb-3 mt-4">Non-Linear Grayscale Gradients</h3>
+ <p>If you want non-linear grayscale gradients, then add <code>-colorspace RGB -colorspace gray</code> before saving the output. For example:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x256 gradient: linear_gradient.png
+magick -size 256x256 gradient:white-black -colorspace RGB -colorspace gray linear_linear_gradient.png
+magick -size 256x256 radial-gradient: radial_gradient.png
+magick -size 256x256 radial-gradient:white-black -colorspace RGB -colorspace gray linear_radial_gradient.png</code></pre>
+ <!-- Gradient Defines & Options Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="defines">
+ <a class="anchor text-decoration-none text-body" href="#defines">Gradient Defines & Options</a>
+ </h2>
+ <p class="text-body-secondary mb-3">Gradients are affected by these primary defines:</p>
+ <div class="card im-card shadow-sm mb-4 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width: 45%;">
+ <col style="width: 55%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Define Parameter</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:vector=<var>x1</var>,<var>y1</var>, <var>x2</var>,<var>y2</var></code></td>
+ <td>Specifies the direction of the linear gradient going from vector1 (x1,y1) to vector2 (x2,y2). <em>fromColor</em> is located at vector position x1,y1 and <em>toColor</em> is located at vector position x2,y2.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:center=<var>x</var>,<var>y</var></code></td>
+ <td>Specifies the coordinates of the center point for the radial gradient. The default is the center of the image.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:radii=<var>x</var>,<var>y</var></code></td>
+ <td>Specifies the x and y radii of the gradient. If equal, the shape is a circle; if they differ, an ellipse. Default values are the maximum of the half width and half height.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:angle=<var>angle in degrees</var></code></td>
+ <td>For linear gradients, specifies direction from <em>fromColor</em> to <em>toColor</em> clockwise relative to north. For radial gradients, specifies rotation clockwise from normal X-Y orientation.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:bounding-box=<var>width</var>x<var>height</var>+<var>x</var>+<var>y</var></code></td>
+ <td>Limits the gradient to a larger or smaller region than image dimensions. If smaller, <em>fromColor</em> is the background color.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">ImageMagick also supports two convenience defines for setting linear gradient direction and radial gradient shape:</p>
+ <div class="card im-card shadow-sm mb-5 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width: 45%;">
+ <col style="width: 55%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Convenience Define</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:direction=<em>{NorthWest, North, Northeast, West, East, SouthWest, South, SouthEast}</em></code></td>
+ <td>Specifies the direction of the linear gradient towards top/bottom/left/right or diagonal corners.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono small"><code>-define gradient:extent=<em>{Circle, Diagonal, Ellipse, Maximum, Minimum}</em></code></td>
+ <td>Specifies the shape of an image-centered radial gradient (Circle/Maximum = circular with radius equal to larger half-dimension; Minimum = smaller half-dimension; Diagonal = half-diagonal; Ellipse = radii equal to half-width and half-height).</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <!-- Advanced Examples Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="examples">
+ <a class="anchor text-decoration-none text-body" href="#examples">Examples</a>
+ </h2>
+ <p>The default linear gradient may also be generated in any of the following ways (or by reversing direction and swapping colors):</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x128 -define gradient:direction=north gradient:black-white linear_gradient_default.png
+magick -size 256x128 -define gradient:angle=0 gradient:black-white linear_gradient_default.png</code></pre>
+ <div class="text-center my-4">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/linear_gradient_default.png" alt="linear gradient default" width="256" height="128" />
+ <div class="small text-muted font-mono mt-1">linear_gradient_default.png</div>
+ </div>
+ <p>The equivalent of:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick -size 128x256 gradient: -rotate 90 linear_gradient_east.png</code></pre>
+ <p>can be generated by either of the following:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x128 -define gradient:direction=east gradient:black-white linear_gradient_east.png
+magick -size 256x128 -define gradient:angle=90 gradient:black-white linear_gradient_east.png</code></pre>
+ <div class="text-center my-4">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/linear_gradient_east.png" alt="radial gradient east" width="256" height="128" />
+ <div class="small text-muted font-mono mt-1">linear_gradient_east.png</div>
+ </div>
+ <p>Examples of radial gradients going from black in the center to white at the boundary for maximum, minimum, diagonal, ellipse, and 45-degree rotated ellipse follow below:</p>
+ <!-- Radial Maximum -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h6 class="fw-bold text-primary mb-2">Maximum / Circle / Default</h6>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x128 radial-gradient:black-white radial_gradient_maximum.png
+magick -size 256x128 -define gradient:radii=128,128 radial-gradient:black-white radial_gradient_maximum.png</code></pre>
+ <div class="text-center">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/radial_gradient_maximum.png" alt="radial gradient maximum" width="256" height="128" />
+ </div>
+ </div>
+ </div>
+ <!-- Radial Minimum -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h6 class="fw-bold text-primary mb-2">Minimum Extent</h6>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x128 -define gradient:extent=minimum radial-gradient:black-white radial_gradient_minimum.png
+magick -size 256x128 -define gradient:radii=64,64 radial-gradient:black-white radial_gradient_minimum.png</code></pre>
+ <div class="text-center">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/radial_gradient_minimum.png" alt="radial gradient minimum" width="256" height="128" />
+ </div>
+ </div>
+ </div>
+ <!-- Radial Diagonal -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h6 class="fw-bold text-primary mb-2">Diagonal Extent</h6>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick -size 256x128 -define gradient:extent=diagonal radial-gradient:black-white radial_gradient_diagonal.png</code></pre>
+ <div class="text-center">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/radial_gradient_diagonal.png" alt="radial gradient diagonal" width="256" height="128" />
+ </div>
+ </div>
+ </div>
+ <!-- Radial Ellipse -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h6 class="fw-bold text-primary mb-2">Ellipse Extent</h6>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>magick -size 256x128 -define gradient:extent=ellipse radial-gradient:black-white radial_gradient_ellipse.png
+magick -size 256x128 -define gradient:radii=128,64 radial-gradient:black-white radial_gradient_ellipse.png</code></pre>
+ <div class="text-center">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/radial_gradient_ellipse.png" alt="radial gradient ellipse" width="256" height="128" />
+ </div>
+ </div>
+ </div>
+ <!-- Radial Ellipse Angle 45 -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h6 class="fw-bold text-primary mb-2">Rotated Ellipse (45°)</h6>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick -size 256x256 -define gradient:radii=128,64 -define gradient:angle=45 radial-gradient:black-white radial_gradient_ellipse_angle45.png</code></pre>
+ <div class="text-center">
+ <img class="img-fluid img-thumbnail rounded shadow-sm border" src="https://imagemagick.org/image/gradients/radial_gradient_ellipse_angle45.png" alt="radial gradient ellipse angle 45" width="256" height="256" />
+ </div>
+ </div>
+ </div>
</div>
-<p>Examples</p>
-
-<p>The default linear gradient may also be generated in any of the following ways (or by reversing the direction and swapping <em>fromColor</em> and <em>toColor</em>):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x128 -define gradient:direction=north gradient:black-white linear_gradient_default.png
-magick -size 256x128 -define gradient:angle=0 gradient:black-white linear_gradient_default.png </code></pre>
-<p><img src="../image/gradients/linear_gradient_default.png" alt="linear gradient" width="256" height="128"></p>
-
-<p>The equivalent of </p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 128x256 gradient: -rotate 90 linear_gradient_east.png </samp></pre></pre>
-
-<p>can be generated by either of the following (or by reversing the direction and swapping <em>fromColor</em> and <em>toColor</em>):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x128 -define gradient:direction=east gradient:black-white linear_gradient_east.png
-magick -size 256x128 -define gradient:angle=90 gradient:black-white linear_gradient_east.png </code></pre>
-
-<p><img src="../image/gradients/linear_gradient_east.png" alt="radial gradient east" width="256" height="128"></p>
-
-
-<p>Examples of radial gradients going from black in the center to white at the boundary for the cases of "maximum/circle/default", "minimum", "diagonal", "ellipse" and 45 degree rotated ellipse, respectively, follow below.</p>
-
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x128 radial-gradient:black-white radial_gradient_maximum.png
-magick -size 256x128 -define gradient:radii=128,128 radial-gradient:black-white radial_gradient_maximum.png </code></pre>
-<p><img src="../image/gradients/radial_gradient_maximum.png" alt="radial gradient maximum" width="256" height="128"></p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x128 -define gradient:extent=minimum radial-gradient:black-white radial_gradient_minimum.png
-magick -size 256x128 -define gradient:radii=64,64 radial-gradient:black-white radial_gradient_minimum.png </code></pre>
-<p><img src="../image/gradients/radial_gradient_minimum.png" width="256" height="128"></p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 256x128 -define gradient:extent=diagonal radial-gradient:black-white radial_gradient_diagonal.png </samp></pre></pre>
-
-<p><img src="../image/gradients/radial_gradient_diagonal.png" width="256" height="128"></p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick -size 256x128 -define gradient:extent=ellipse radial-gradient:black-white radial_gradient_ellipse.png
-magick -size 256x128 -define gradient:radii=128,64 radial-gradient:black-white radial_gradient_ellipse.png </code></pre>
-<p><img src="../image/gradients/radial_gradient_ellipse.png" alt="radial gradient ellipse" width="256" height="128"></p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick -size 256x256 -define gradient:radii=128,64 -define gradient:angle=45 radial-gradient:black-white radial_gradient_ellipse_angle45.png </samp></pre></pre>
-
-<p><img src="../image/gradients/radial_gradient_ellipse_angle45.png" alt="radial gradient ellipse angle 45" width="256" height="256"></p>
-
-</div>
+ </div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/high-dynamic-range/index.html b/www/high-dynamic-range/index.html
index bea615da0..c0db677bc 100644
--- a/www/high-dynamic-range/index.html
+++ b/www/high-dynamic-range/index.html
@@ -11,314 +11,526 @@
<meta name="description" content="Learn how ImageMagick supports High Dynamic-Range Imaging (HDRI) with floating-point color spaces, wide gamut rendering, tone-mapping, and formats like OpenEXR. Discover how HDRI enables vivid colors, deep contrast, and accurate brightness across SDR and HDR displays.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | High Dynamic-Range Images">
<meta property="og:description" content="Learn how ImageMagick supports High Dynamic-Range Imaging (HDRI) with floating-point color spaces, wide gamut rendering, tone-mapping, and formats like OpenEXR. Discover how HDRI enables vivid colors, deep contrast, and accurate brightness across SDR and HDR displays.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | High Dynamic-Range Images">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | High Dynamic-Range Images",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/high-dynamic-range/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick supports High Dynamic-Range Imaging (HDRI) with floating-point color spaces, wide gamut rendering, tone-mapping, and formats like OpenEXR. Discover how HDRI enables vivid colors, deep contrast, and accurate brightness across SDR and HDR displays.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/high-dynamic-range/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/high-dynamic-range/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">High Dynamic-Range Images</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">High dynamic-range imaging (HDRI) permits a far greater dynamic range of exposures (i.e. a large difference between light and dark areas) than standard digital imaging techniques. HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows. The HDR imaging approach includes:</p>
-
-<ul>
- <li>render/capture floating-point color space</li>
- <li>encompass the entire perceivable gamut (extend values outside [0,1] range)</li>
- <li>post-process in extended color space</li>
- <li>apply tone-mapping for specific display</li>
-</ul>
-
-<p>ImageMagick supports the Jzazbc colorspace, for applications that require wide color gamut and high dynamic range.</p>
-
-<h2><a class="anchor" id="enable"></a>Enabling HDRI in ImageMagick</h2>
-
-<p>By default, image pixels in ImageMagick version 7 are stored in a floating-point representation that range from 0 to the quantum depth, which is typically 16-bits (Q16). With HDRI enabled, the pixels can include negative values as well as values that exceed the quantum depth. A majority of digital image formats do not support HDRI, and for those images any pixels outside the quantum range are clamped before they are stored.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">High Dynamic-Range Images</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick supports High Dynamic-Range Imaging (HDRI) with floating-point color spaces, wide gamut rendering, tone-mapping, and formats like OpenEXR. Discover how HDRI enables vivid colors, deep contrast, and accurate brightness across SDR and HDR displays.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>The most promising HDR image format is EXR. You must have the <a href="http://www.openexr.org/">OpenEXR</a> delegate library installed to read or write this format. Other HDR formats include TIFF 48-bit integer and 96-bit float formats, HDR, PFM, and ImageMagick's own MIFF format.</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Page Quick Nav Pills -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap justify-content-center gap-2 p-2 bg-body-tertiary rounded-3 border">
+ <a href="#enable" class="btn btn-sm btn-outline-secondary border-0">Enabling HDRI</a>
+ </div>
+ </div>
+ </div>
-<p>To disable the HDRI version of ImageMagick, use this Linux/Linux command:</p>
+ <!-- Lead Description Section -->
+ <div class="row mb-5">
+ <div class="col-lg-10 mx-auto text-center">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 mb-3 fs-7">
+ <i class="bi bi-sun-fill"></i>
+ <span class="small fw-semibold">Advanced Imaging</span>
+ </div>
+ <h1 class="display-5 fw-bold mb-3">High Dynamic-Range Images</h1>
+ <p class="lead text-body-secondary">
+ High dynamic-range imaging (HDRI) permits a far greater dynamic range of exposures (i.e. a large difference between light and dark areas) than standard digital imaging techniques. HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows. The HDR imaging approach includes:
+ </p>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ ./configure --disable-hdri
-</samp></pre>
+ <!-- HDR Approach Cards -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-3">
+ <div class="card im-card h-100 p-4 text-center">
+ <i class="bi bi-cpu fs-3 text-primary mb-2"></i>
+ <h6 class="fw-bold mb-2">Floating-Point</h6>
+ <p class="small text-body-secondary mb-0">Render/capture floating-point color space.</p>
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="card im-card h-100 p-4 text-center">
+ <i class="bi bi-aspect-ratio fs-3 text-primary mb-2"></i>
+ <h6 class="fw-bold mb-2">Wide Gamut</h6>
+ <p class="small text-body-secondary mb-0">Encompass entire perceivable gamut (extend outside [0,1]).</p>
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="card im-card h-100 p-4 text-center">
+ <i class="bi bi-sliders fs-3 text-primary mb-2"></i>
+ <h6 class="fw-bold mb-2">Post-Process</h6>
+ <p class="small text-body-secondary mb-0">Post-process in extended color space.</p>
+ </div>
+ </div>
+ <div class="col-md-3">
+ <div class="card im-card h-100 p-4 text-center">
+ <i class="bi bi-display fs-3 text-primary mb-2"></i>
+ <h6 class="fw-bold mb-2">Tone-Mapping</h6>
+ <p class="small text-body-secondary mb-0">Apply tone-mapping for specific display.</p>
+ </div>
+ </div>
+ </div>
-<p>Under Windows, follow the instructions (straightforward for a non-programmer) in a one hour process to build and configure your own executables: <a href="../install-source/index.html">Install from Windows Source</a>.</p>
+ <!-- Jzazbc Colorspace Card -->
+ <div class="card im-card p-4 mb-5 bg-body-tertiary text-center">
+ <p class="text-body-secondary mb-0">
+ ImageMagick supports the <strong>Jzazbc</strong> colorspace, for applications that require wide color gamut and high dynamic range.
+ </p>
+ </div>
-<p>To verify HDRI is properly configured, look for "HDRI" as a feature:</p>
+ <!-- Enabling HDRI Section -->
+ <section class="mb-4" id="enable">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-gear-wide-connected fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Enabling HDRI in ImageMagick</h2>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -version
-Features: HDRI
-</samp></pre>
+ <div class="card im-card p-4 mb-4">
+ <p class="text-body-secondary mb-3">
+ By default, image pixels in ImageMagick version 7 are stored in a floating-point representation that range from 0 to the quantum depth, which is typically 16-bits (Q16). With HDRI enabled, the pixels can include negative values as well as values that exceed the quantum depth. A majority of digital image formats do not support HDRI, and for those images any pixels outside the quantum range are clamped before they are stored.
+ </p>
+ <p class="text-body-secondary mb-3">
+ The most promising HDR image format is EXR. You must have the <a href="http://www.openexr.org/" class="text-decoration-none fw-semibold" target="_blank" rel="noopener">OpenEXR</a> delegate library installed to read or write this format. Other HDR formats include TIFF 48-bit integer and 96-bit float formats, HDR, PFM, and ImageMagick's own MIFF format.
+ </p>
+ <p class="text-body-secondary mb-3">To disable the HDRI version of ImageMagick, use this Linux command:</p>
+
+ <!-- Code Terminal 1 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">configure-hdri.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> ./configure --disable-hdri
+ </div>
+ </div>
-<p>With HDRI enabled, you can now create images with a much wider dynamic range, allowing for more vivid colors and better contrast. It ensures that HDR content can be displayed accurately on compatible devices while maintaining backward compatibility with SDR displays. In this example, you can store the difference between a standard dynamic range (SDR) image and its high dynamic range (<a href="https://gregbenzphotography.com/hdr/">HDR</a>) counterpart. Essentially, a <a href="https://helpx.adobe.com/camera-raw/using/gain-map.html">gain map</a> captures the additional brightness and color information that HDR provides over SDR:</p>
+ <p class="text-body-secondary mb-3">
+ Under Windows, follow the instructions (straightforward for a non-programmer) in a one hour process to build and configure your own executables: <a href="../install-source/index.html" class="text-decoration-none fw-semibold">Install from Windows Source</a>.
+ </p>
+ <p class="text-body-secondary mb-3">To verify HDRI is properly configured, look for "HDRI" as a feature:</p>
+
+ <!-- Code Terminal 2 -->
+ <div class="terminal-card mb-3">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">verify-hdri.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick identify -version<br>
+ Features: HDRI
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -define uhdr:hdr-color-gamut=bt709 -define uhdr:hdr-color-transfer=hlg \
- \( img_sdr.tif -depth 8 \) \( img_hdr.tif -depth 16 \) uhdr:ultrahdr.jpg
-</samp></pre>
+ <p class="text-body-secondary mb-3">
+ With HDRI enabled, you can now create images with a much wider dynamic range, allowing for more vivid colors and better contrast. It ensures that HDR content can be displayed accurately on compatible devices while maintaining backward compatibility with SDR displays. In this example, you can store the difference between a standard dynamic range (SDR) image and its high dynamic range (<a href="https://gregbenzphotography.com/hdr/" class="text-decoration-none" target="_blank" rel="noopener">HDR</a>) counterpart. Essentially, a <a href="https://helpx.adobe.com/camera-raw/using/gain-map.html" class="text-decoration-none" target="_blank" rel="noopener">gain map</a> captures the additional brightness and color information that HDR provides over SDR:
+ </p>
+
+ <!-- Code Terminal 3 -->
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">gain-map.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick -define uhdr:hdr-color-gamut=bt709 -define uhdr:hdr-color-transfer=hlg \<br>
+ \( img_sdr.tif -depth 8 \) \( img_hdr.tif -depth 16 \) uhdr:ultrahdr.jpg
+ </div>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/history/index.html b/www/history/index.html
index 147aa1308..6d72bdeaa 100644
--- a/www/history/index.html
+++ b/www/history/index.html
@@ -11,299 +11,477 @@
<meta name="description" content="ImageMagick, born in 1990, has evolved into a powerful open-source software suite for creating, editing, composing, or converting raster images.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | History">
<meta property="og:description" content="ImageMagick, born in 1990, has evolved into a powerful open-source software suite for creating, editing, composing, or converting raster images.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | History">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | History",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/history/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick, born in 1990, has evolved into a powerful open-source software suite for creating, editing, composing, or converting raster images.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/history/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/history/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">History</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<blockquote>
- I swear by my life and my love of it that I will never live for the sake of another man, nor ask another man to live for mine. -- John Galt in "Atlas Shrugged", by Ayn Rand</blockquote>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">History</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick, born in 1990, has evolved into a powerful open-source software suite for creating, editing, composing, or converting raster images.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p class="lead">ImageMagick started with a request from my DuPont supervisor, Dr. David Pensak, to display computer-generated images on a monitor only capable of showing 256 unique colors simultaneously.</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
-<p>In 1987, monitors that could display 24-bit true color images were rare and quite expensive. There were a plethora of chemists and biologists at DuPont, but very few were computer scientists to confer with. Instead, I turned to Usenet for help, and posted a request for an algorithm to reduce 24-bit images to 256 colors. Paul Raveling of the USC Information Sciences Institute responded, with not only a solution, but one that was already in source code and available from USC's FTP site. Over the course of the next few years, I had frequent opportunities to get help with other vexing computer science problems I encountered in the course of doing my job at DuPont. Eventually I felt compelled to give thanks for the help I received from the knowledgeable folks on Usenet. I decided to freely release the image processing tools I developed to the world so that others could benefit from my efforts.</p>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Quote Card -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="card border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-4">
+ <blockquote class="blockquote mb-0 fst-italic text-body-secondary small">
+ “I swear by my life and my love of it that I will never live for the sake of another man, nor ask another man to live for mine.”
+ <footer class="blockquote-footer mt-2 text-muted">John Galt in <em>Atlas Shrugged</em>, by Ayn Rand</footer>
+ </blockquote>
+ </div>
+ </div>
+ </div>
+ </div>
-<p>In 1990 there were few freely available image processing tools so I expected an enthusiastic reception. Before a release was possible, Dr. Pensak had to convince upper management at DuPont to give away what they might perceive as valuable intellectual property. I suspect they agreed simply because ImageMagick was not chemically or biologically based, so they did not understand its value to the company. Either way, ImageMagick would not be available today without DuPont transferring the copyright to ImageMagick Studio LLC. ImageMagick was posted to Usenet's comp.archives group on August 1st, 1990.</p>
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ ImageMagick started with a request from my DuPont supervisor, Dr. David Pensak, to display computer-generated images on a monitor only capable of showing 256 unique colors simultaneously.
+ </p>
+ </div>
+ </div>
-<p>After ImageMagick's release, I got the occasional request for an enhancement, a report of a bug, or a contribution to the source base. In the mid 90's, I released the culmination of these efforts as ImageMagick 4.2.9. At the time, I thought ImageMagick was complete. It was utilized by thousands of users world-wide, and it was even showing up as part of a new operating system distributed freely called "Linux".</p>
+ <!-- History Content Sections -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Origins & The Usenet Days</h2>
+ <p>
+ In 1987, monitors that could display 24-bit true color images were rare and quite expensive. There were a plethora of chemists and biologists at DuPont, but very few computer scientists to confer with. Instead, I turned to Usenet for help, posting a request for an algorithm to reduce 24-bit images to 256 colors. Paul Raveling of the USC Information Sciences Institute responded with not only a solution, but one already available in source code from USC's FTP site.
+ </p>
+ <p>
+ Over the next few years, frequent help with other computer science problems at DuPont compelled me to give back to the knowledgeable folks on Usenet. I decided to freely release my developed image processing tools to the world.
+ </p>
+ </section>
-<p>The next generation of ImageMagick, version 5, started when Bob Friesenhahn contacted me and suggested I improve the application programming interface so users could leverage the image-processing algorithms from other languages or scripts. Bob also wrote a C++ wrapper for ImageMagick called Magick++, and began contributing enhancements such as the module loader facility, automatic file identification, and test suites. In the mean-time, the project picked up a few other notable contributors: Glenn Randers-Pehrson, William Radcliffe, and Leonard Rosenthol. By now, ImageMagick was utilized by tens of thousands of users, who reacted gruffly when a new release broke an existing API call or script. The other members of the group wanted to freeze the API and command line, but I felt ImageMagick was not quite what I had envisioned it could be. Bob and the others created a fork of ImageMagick while I continued to develop ImageMagick.</p>
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">The 1990 Release & DuPont Copyright</h2>
+ <p>
+ In 1990, few freely available image processing tools existed, so I expected an enthusiastic reception. Before release, Dr. Pensak had to convince upper management at DuPont to give away what they might perceive as valuable intellectual property. I suspect they agreed simply because ImageMagick was not chemically or biologically based, so its value to the company was unclear.
+ </p>
+ <p>
+ Either way, ImageMagick would not exist today without DuPont transferring the copyright to ImageMagick Studio LLC. ImageMagick was officially posted to Usenet's <code>comp.archives</code> group on August 1st, 1990.
+ </p>
+ </section>
-<p>I did not work alone for long. Anthony Thyssen contacted me about deficiencies in the ImageMagick command line programs. He pointed out that the command line was confusing when dealing with more than one image. He suggested an orderly, well-defined method for dealing with the command line, and this became ImageMagick version 6. His efforts are detailed on his web pages, <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>. I highly recommend that you peruse his site. He has illustrated the power of ImageMagick in ways that even I did not know were possible.</p>
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Evolution Through Versions 4 and 5</h2>
+ <p>
+ Following the release, occasional enhancement requests, bug reports, and contributions trickled in. In the mid-90s, I released the culmination of these efforts as ImageMagick 4.2.9. At the time, I thought ImageMagick was complete; it was utilized by thousands worldwide and even appeared as part of a new freely distributed operating system called “Linux”.
+ </p>
+ <p>
+ The next generation, version 5, started when Bob Friesenhahn suggested improving the API so users could leverage algorithms from other languages or scripts. Bob wrote the C++ wrapper <code>Magick++</code> and contributed the module loader facility, automatic file identification, and test suites. Other notable contributors joined—Glenn Randers-Pehrson, William Radcliffe, and Leonard Rosenthol. As tens of thousands of users relied on it, a desire to freeze the API led to a fork by Bob and others, while I continued active development.
+ </p>
+ </section>
-<p>Another notable contributor, Fred Weinhaus, makes available a plethora of command-line <a href="http://www.fmwconcepts.com/imagemagick/">scripts</a> that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations. Glenn Randers-Pehrson is our PNG guru and makes other valuable contributions. Dirk Lemstra made, and continues to make, numerous improvements to make ImageMagick more robust under Windows and distributes a .NET wrapper, <a href="https://github.com/dlemstra/Magick.NET">Magick.NET</a>.</p>
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Key Contributors and Version 6</h2>
+ <p>
+ Anthony Thyssen soon contacted me regarding command-line program design and confusion when handling multiple images. He suggested an orderly, well-defined method, which became ImageMagick version 6. His efforts are detailed on his page, <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>, which I highly recommend.
+ </p>
+ <p>
+ Other notable contributors include Fred Weinhaus (command-line <a href="http://www.fmwconcepts.com/imagemagick/">scripts</a> for geometric transforms, blurs, and filters), Glenn Randers-Pehrson (PNG guru), and Dirk Lemstra (Windows robustness improvements and the <a href="https://github.com/dlemstra/Magick.NET">Magick.NET</a> .NET wrapper).
+ </p>
+ </section>
-<p>The design of ImageMagick is an evolutionary process, with the design and implementation efforts serving to influence and guide further progress in the other. With ImageMagick <a href="../index-2.html">version 7</a>, we improved the design based on lessons learned from the version 6 implementation. ImageMagick was originally designed to display RGB images to an X Windows server. Over time we extended support to RGBA images and then to the CMYK and CMYKA image format. With ImageMagick version 7, we extend support to arbitrary colorspaces with an arbitrary number of pixel channels. In addition, ImageMagick 7 stores pixel channels as floats permitting out of band values (e.g. negative) and reduces rounding error.</p>
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Modern Architecture: Version 7</h2>
+ <p>
+ The design of ImageMagick is an evolutionary process. With <a href="../index.html">version 7</a>, we improved design patterns based on lessons learned from version 6. Originally designed to display RGB images to an X Windows server, support later expanded to RGBA, CMYK, and arbitrary colorspaces with an arbitrary number of pixel channels. Additionally, ImageMagick 7 stores pixel channels as floats, permitting out-of-band values (such as negative numbers) and reducing rounding errors.
+ </p>
-<p>Cristy<br />Principal ImageMagick Architect</p>
+ <!-- Author Signature Card -->
+ <div class="card border-0 bg-body-tertiary shadow-sm mt-4">
+ <div class="card-body">
+ <p class="mb-0 fw-medium">
+ Cristy<br>
+ <span class="text-muted small">Principal ImageMagick Architect</span>
+ </p>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/identify/index.html b/www/identify/index.html
index 67a998ba7..e9ddea5b9 100644
--- a/www/identify/index.html
+++ b/www/identify/index.html
@@ -11,235 +11,358 @@
<meta name="description" content="Use ImageMagick’s Identify tool to examine image format, dimensions, colorspace, metadata, and integrity. Learn verbose options, advanced features, and example commands for detailed analysis.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Identify">
<meta property="og:description" content="Use ImageMagick’s Identify tool to examine image format, dimensions, colorspace, metadata, and integrity. Learn verbose options, advanced features, and example commands for detailed analysis.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Identify">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Identify",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/identify/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use ImageMagick’s Identify tool to examine image format, dimensions, colorspace, metadata, and integrity. Learn verbose options, advanced features, and example commands for detailed analysis.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/identify/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/identify/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Identify</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">The <code>magick identify</code> program describes the format and characteristics of one or more image files. It also reports if an image is incomplete or corrupt. The information returned includes the image number, the file name, the width and height of the image, whether the image is colormapped or not, the number of colors in the image, the number of bytes in the image, the format of the image (JPEG, PNM, etc.), and finally the number of seconds it took to read and process the image. Many more attributes are available with the verbose option. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>magick identify</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>magick identify</code> command here to illustrate its usefulness and ease of use. To get started, lets identify an image in the JPEG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick identify rose.jpg
-rose.jpg JPEG 70x46 70x46+0+0 8-bit sRGB 2.36KB 0.000u 0:00.000 </samp></pre>
-
-<p>By default, <samp>$ magick identify</samp> provides the following output:</p>
-
-<ul><code>Filename[frame #] image-format widthxheight page-widthxpage-height+x-offset+y-offset colorspace user-time elapsed-time</code></ul>
-
-<p>Next, we look at the same image in greater detail:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Identify</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use ImageMagick’s Identify tool to examine image format, dimensions, colorspace, metadata, and integrity. Learn verbose options, advanced features, and example commands for detailed analysis.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><samp>$ magick identify -verbose rose.jpg
-Image: rose.jpg
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Quick Jump Navigation Bar -->
+<div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex flex-wrap align-items-center justify-content-between gap-2">
+ <span class="fw-semibold text-secondary small text-uppercase tracking-wider"><i class="bi bi-compass me-1"></i> Quick Navigation</span>
+ <div class="d-flex gap-2">
+ <a href="#usage" class="btn btn-sm btn-outline-primary d-flex align-items-center gap-1"><i class="bi bi-terminal"></i> Example Usage</a>
+ <a href="#options" class="btn btn-sm btn-outline-secondary d-flex align-items-center gap-1"><i class="bi bi-list-columns"></i> Option Summary</a>
+ </div>
+ </div>
+</div>
+<!-- Introduction Card -->
+<div class="card im-card p-4 mb-5 border-0 shadow-sm">
+ <p class="lead mb-3">
+ The <code>magick identify</code> program describes the format and characteristics of one or more image files. It also reports if an image is incomplete or corrupt.
+ </p>
+ <p class="text-body-secondary mb-3">
+ The information returned includes the image number, the file name, the width and height of the image, whether the image is colormapped or not, the number of colors in the image, the number of bytes in the image, the format of the image (JPEG, PNM, etc.), and finally the number of seconds it took to read and process the image. Many more attributes are available with the verbose option.
+ </p>
+ <div class="alert alert-secondary bg-body-tertiary border-0 d-flex align-items-start gap-3 mb-0" role="alert">
+ <i class="bi bi-info-circle-fill text-primary fs-5 mt-1"></i>
+ <div class="small">
+ See <a href="../command-line-processing/index.html" class="fw-semibold text-decoration-underline">Command Line Processing</a> for advice on how to structure your <code>magick identify</code> command or see below for example usages of the command.
+ </div>
+ </div>
+</div>
+<!-- Example Usage Section -->
+<section class="mb-5">
+ <h2 class="fw-bold mb-4 d-flex align-items-center gap-2" id="usage">
+ <a class="anchor text-decoration-none text-body" href="#usage">#</a> Example Usage
+ </h2>
+ <p class="text-body-secondary mb-3">
+ We list a few examples of the <code>magick identify</code> command here to illustrate its usefulness and ease of use. To get started, let's identify an image in the JPEG format:
+ </p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">bash</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <samp>$ magick identify rose.jpg<br>rose.jpg JPEG 70x46 70x46+0+0 8-bit sRGB 2.36KB 0.000u 0:00.000</samp>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-2">By default, <code>$ magick identify</code> provides the following output format:</p>
+
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 font-mono small">
+ <code>Filename[frame #] image-format widthxheight page-widthxpage-height+x-offset+y-offset colorspace user-time elapsed-time</code>
+ </div>
+ <p class="text-body-secondary mb-3">Next, we look at the same image in greater detail using the verbose option:</p>
+ <div class="terminal-card mb-3">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">magick identify -verbose rose.jpg</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-auto" style="max-height:75svh;">
+ <pre class="mb-0 text-light font-mono small"><samp>Image: rose.jpg
Format: JPEG (Joint Photographic Experts Group JFIF format)
Mime type: image/jpeg
Class: DirectClass
@@ -319,338 +442,343 @@ Image: rose.jpg
Number pixels: 3.22K
User time: 0.000u
Elapsed time: 0:01.000
- Version: ImageMagick 7.0.4-8 Q16 x86_64 http://imagemagick.org </samp></pre>
-
-<p>Note, the image signature is generated from the pixel components, not the image metadata.</p>
-
-<p>To get the print size in inches of an image at 72 DPI, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick identify -format "%[fx:w/72] by %[fx:h/72] inches" document.png
-8.5 x 11 inches </samp></pre>
-
-<p>The depth and dimensions of a raw image must be specified on the command line:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick identify -depth 8 -size 640x480 image.raw
-image.raw RGB 640x480 sRGB 9kb 0.000u 0:01 </samp></pre>
-
-<p>Here we display the image texture features, moments, perceptual hash, and the number of unique colors in the image:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick identify -verbose -features 1 -moments -unique image.png</samp></pre>
-
-<p>To display the convex hull and minimum bounding box attributes of the image, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -define identify:convex-hull=true image.png</samp></pre>
-
-<p>Here is a special define that outputs the location of the minimum or maximum pixel of the image:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -precision 5 -define identify:locate=maximum -define identify:limit=3 image.png</samp></pre>
-
-<p>You can find additional examples of using <samp>$ magick identify</samp> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>magick identify</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
+ Version: ImageMagick 7.0.4-8 Q16 x86_64 http://imagemagick.org</samp></pre>
+ </div>
+ </div>
+ <p class="text-muted small mb-4"><i class="bi bi-info-circle me-1"></i> Note, the image signature is generated from the pixel components, not the image metadata.</p>
+ <p class="text-body-secondary mb-2">To get the print size in inches of an image at 72 DPI, use:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <samp>$ magick identify -format "%[fx:w/72] by %[fx:h/72] inches" document.png<br>8.5 x 11 inches</samp>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-2">The depth and dimensions of a raw image must be specified on the command line:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <samp>$ magick identify -depth 8 -size 640x480 image.raw<br>image.raw RGB 640x480 sRGB 9kb 0.000u 0:01</samp>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-2">Here we display the image texture features, moments, perceptual hash, and the number of unique colors in the image:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <samp>$ magick identify -verbose -features 1 -moments -unique image.png</samp>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-2">To display the convex hull and minimum bounding box attributes of the image, use:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <samp>$ magick identify -define identify:convex-hull=true image.png</samp>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-2">Here is a special define that outputs the location of the minimum or maximum pixel of the image:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <samp>$ magick identify -precision 5 -define identify:locate=maximum -define identify:limit=3 image.png</samp>
+ </div>
+ </div>
+ <p class="text-body-secondary">
+ You can find additional examples of using <samp>$ magick identify</samp> in <a href="https://usage.imagemagick.org/" target="_blank" rel="noopener noreferrer" class="fw-semibold">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
+</section>
+<!-- Option Summary Section -->
+<section class="mt-5 pt-3">
+ <h2 class="fw-bold mb-3 d-flex align-items-center gap-2" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">#</a> Option Summary
+ </h2>
+ <p class="text-body-secondary mb-4">
+ The <code>magick identify</code> command recognizes these options. Click on an option to get more details about how that option works.
+ </p>
+ <div class="card im-card border-0 shadow-sm overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width:30%">
+ <col style="width:70%">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Option</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#alpha" class="text-decoration-none fw-semibold">-alpha</a></td>
+ <td>on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#antialias" class="text-decoration-none fw-semibold">-antialias</a></td>
+ <td>remove pixel-aliasing</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#authenticate" class="text-decoration-none fw-semibold">-authenticate <var>value</var></a></td>
+ <td>decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#auto-orient" class="text-decoration-none fw-semibold">-auto-orient</a></td>
+ <td>automagically orient image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-semibold">-channel <var>type</var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#clip" class="text-decoration-none fw-semibold">-clip</a></td>
+ <td>clip along the first path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#clip-mask" class="text-decoration-none fw-semibold">-clip-mask <var>filename</var></a></td>
+ <td>associate clip mask with the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#clip-path" class="text-decoration-none fw-semibold">-clip-path <var>id</var></a></td>
+ <td>clip along a named path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-semibold">-colorspace <var>type</var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#crop" class="text-decoration-none fw-semibold">-crop <var>geometry</var></a></td>
+ <td>crop the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-semibold">-debug <var>events</var></a></td>
+ <td>display copious debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#define" class="text-decoration-none fw-semibold">-define <var>format:option</var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#density" class="text-decoration-none fw-semibold">-density <var>geometry</var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-semibold">-depth <var>value</var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#endian" class="text-decoration-none fw-semibold">-endian <var>type</var></a></td>
+ <td>endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#extract" class="text-decoration-none fw-semibold">-extract <var>geometry</var></a></td>
+ <td>extract area from image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#features" class="text-decoration-none fw-semibold">-features <var>distance</var></a></td>
+ <td>analyze image features (e.g. contrast, correlations, etc.)</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#format_identify_" class="text-decoration-none fw-semibold">-format <var>string</var></a></td>
+ <td>output formatted image characteristics</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#gamma" class="text-decoration-none fw-semibold">-gamma <var>value</var></a></td>
+ <td>level of gamma correction</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#grayscale" class="text-decoration-none fw-semibold">-grayscale <var>method</var></a></td>
+ <td>convert image to grayscale</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#help" class="text-decoration-none fw-semibold">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-semibold">-interlace <var>type</var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#interpolate" class="text-decoration-none fw-semibold">-interpolate <var>method</var></a></td>
+ <td>pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-semibold">-limit <var>type value</var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#list" class="text-decoration-none fw-semibold">-list <var>type</var></a></td>
+ <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#log" class="text-decoration-none fw-semibold">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#mask" class="text-decoration-none fw-semibold">-mask <var>filename</var></a></td>
+ <td>associate a mask with the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#moments" class="text-decoration-none fw-semibold">-moments</a></td>
+ <td>display image moments and perceptual hash</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-semibold">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#negate" class="text-decoration-none fw-semibold">-negate</a></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#ping" class="text-decoration-none fw-semibold">-ping</a></td>
+ <td>by default, efficiently determine certain image characteristics by only reading requisite image metadata. To accurately identify all image metadata and pixel characteristics, use <code>+ping</code></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#precision" class="text-decoration-none fw-semibold">-precision <var>value</var></a></td>
+ <td>set the maximum number of significant digits to be printed</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-semibold">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-semibold">-regard-warnings</a></td>
+ <td>pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-semibold">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-semibold">-sampling-factor <var>geometry</var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#set" class="text-decoration-none fw-semibold">-set <var>attribute value</var></a></td>
+ <td>set an image attribute</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#size" class="text-decoration-none fw-semibold">-size <var>geometry</var></a></td>
+ <td>width and height of image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#strip" class="text-decoration-none fw-semibold">-strip</a></td>
+ <td>strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#unique" class="text-decoration-none fw-semibold">-unique</a></td>
+ <td>display the number of unique colors in the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#units" class="text-decoration-none fw-semibold">-units <var>type</var></a></td>
+ <td>the units of image resolution</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-semibold">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#version" class="text-decoration-none fw-semibold">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-semibold">-virtual-pixel <var>method</var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-mask">-clip-mask</a> <var>filename</var></td>
- <td>associate clip mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>crop the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#features">-features <var>distance</var></a></td>
- <td>analyze image features (e.g. contract, correlations, etc.).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#format_identify_">-format <var>string</var></a></td>
- <td>output formatted image characteristics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#grayscale">-grayscale <var>method</var></a></td>
- <td>convert image to grayscale</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#list">-list <var>type</var></a></td>
- <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mask">-mask <var>filename</var></a></td>
- <td>associate a mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#moments">-moments</a></td>
- <td>display image moments and perceptual hash.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ping">-ping</a></td>
- <td>by default, efficiently determine certain image characteristics by only reading the requisite image metadata. To accurately identify all the image metadata and pixel characteristics, use <code>+ping</code>. </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#precision">-precision <var>value</var></a></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unique">-unique</a></td>
- <td>display image the number of unique colors in the image.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ </div>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/import/index.html b/www/import/index.html
index 8d9613262..0c5824830 100644
--- a/www/import/index.html
+++ b/www/import/index.html
@@ -8,635 +8,701 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Import</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how to use ImageMagick’s import program to capture an X server screen, windows, or screen regions and save them directly to files or the clipboard.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Import">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how to use ImageMagick’s import program to capture an X server screen, windows, or screen regions and save them directly to files or the clipboard.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Import">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Import",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/import/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to use ImageMagick’s import program to capture an X server screen, windows, or screen regions and save them directly to files or the clipboard.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/import/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/import/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Import</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>import</code> program to capture some or all of an X server screen and save the image to a file. <code>import</code> captures the window selected by clicking or program argument. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>import</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>import</code> command here to illustrate its usefulness and ease of use. To get started, lets import an image of an X11 window in the JPEG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick import rose.jpg </samp></pre>
-
-<p>To select the area you want to capture, move the cursor to the desired window and click (or click and drag) the left mouse button. To cancel the capture, click the right mouse button.</p>
-
-<p>To capture the entire X server screen in the Postscript image format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick import -window root screen.ps </samp></pre>
-
-<p>This command enables you to select a specific area on your screen and copy the selection to your clipboard. You can use this feature to conveniently post images on applications that support image uploading:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick import clipboard:</samp></pre>
-
-<p>You can find additional examples of using <code>import</code> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>import</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#annotate">-annotate <var>geometry text</var></a></td>
- <td>annotate the image with text</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border</a></td>
- <td>include window border in the output image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>preferred size and location of the cropped image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>import copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>import the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-descend</a></td>
- <td>obtain image by descending window hierarchy</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encoding">-encoding <var>type</var></a></td>
- <td>text encoding type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame</a></td>
- <td>include window manager frame</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>name</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pause">-pause <var>seconds</var></a></td>
- <td>seconds delay between snapshots</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#screen">-screen</a></td>
- <td>select image from root window</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-silent</a></td>
- <td>operate silently, i.e. don't ring any bells</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#update">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-window <var>id</var></a></td>
- <td>select window with this id or name</td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Import</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to use ImageMagick’s import program to capture an X server screen, windows, or screen regions and save them directly to files or the clipboard.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="import-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#usage" class="text-decoration-none text-primary"><i class="bi bi-terminal me-1"></i> Example Usage</a>
+ <span class="text-muted">•</span>
+ <a href="#options" class="text-decoration-none text-primary"><i class="bi bi-list-columns me-1"></i> Option Summary</a>
+ </div>
+ </div>
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-0">
+ Use the <code>import</code> program to capture some or all of an X server screen and save the image to a file. <code>import</code> captures the window selected by clicking or program argument. See <a href="../command-line-processing/index.html" class="text-decoration-none">Command Line Processing</a> for advice on how to structure your <code>import</code> command or see below for example usages of the command.
+ </p>
+ </div>
+ <!-- Example Usage Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="usage">
+ <a class="anchor text-decoration-none text-body" href="#usage">Example Usage</a>
+ </h2>
+ <p>We list a few examples of the <code>import</code> command here to illustrate its usefulness and ease of use. To get started, let's import an image of an X11 window in the JPEG format:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick import rose.jpg</code></pre>
+ <p class="text-body-secondary fst-italic small mb-3">
+ To select the area you want to capture, move the cursor to the desired window and click (or click and drag) the left mouse button. To cancel the capture, click the right mouse button.
+ </p>
+ <p>To capture the entire X server screen in the PostScript image format:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick import -window root screen.ps</code></pre>
+ <p>This command enables you to select a specific area on your screen and copy the selection to your clipboard. You can use this feature to conveniently post images on applications that support image uploading:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick import clipboard:</code></pre>
+ <p class="mb-5">
+ You can find additional examples of using <code>import</code> in <a href="https://usage.imagemagick.org/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
+ <!-- Option Summary Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">Option Summary</a>
+ </h2>
+ <p class="text-body-secondary mb-3">The <code>import</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
+ <div class="card im-card shadow-sm mb-5 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width:30%">
+ <col style="width:70%">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Option</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#adjoin" class="text-decoration-none fw-semibold">-adjoin</a></td>
+ <td>join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#annotate" class="text-decoration-none fw-semibold">-annotate <var>geometry text</var></a></td>
+ <td>annotate the image with text</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#border" class="text-decoration-none fw-semibold">-border</a></td>
+ <td>include window border in the output image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-semibold">-channel <var>type</var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#colors" class="text-decoration-none fw-semibold">-colors <var>value</var></a></td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-semibold">-colorspace <var>type</var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#comment" class="text-decoration-none fw-semibold">-comment <var>string</var></a></td>
+ <td>annotate image with comment</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#compress" class="text-decoration-none fw-semibold">-compress <var>type</var></a></td>
+ <td>image compression type</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#contrast" class="text-decoration-none fw-semibold">-contrast</a></td>
+ <td>enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#crop" class="text-decoration-none fw-semibold">-crop <var>geometry</var></a></td>
+ <td>preferred size and location of the cropped image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-semibold">-debug <var>events</var></a></td>
+ <td>import copious debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#define" class="text-decoration-none fw-semibold">-define <var>format:option</var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#delay" class="text-decoration-none fw-semibold">-delay <var>centiseconds</var></a></td>
+ <td>import the next image after pausing</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#density" class="text-decoration-none fw-semibold">-density <var>geometry</var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-semibold">-depth <var>value</var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#despeckle" class="text-decoration-none fw-semibold">-descend</a></td>
+ <td>obtain image by descending window hierarchy</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#display" class="text-decoration-none fw-semibold">-display <var>server</var></a></td>
+ <td>get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#dispose" class="text-decoration-none fw-semibold">-dispose <var>method</var></a></td>
+ <td>layer disposal method</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#dither" class="text-decoration-none fw-semibold">-dither <var>method</var></a></td>
+ <td>apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#encipher" class="text-decoration-none fw-semibold">-encipher <var>filename</var></a></td>
+ <td>convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#encoding" class="text-decoration-none fw-semibold">-encoding <var>type</var></a></td>
+ <td>text encoding type</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#endian" class="text-decoration-none fw-semibold">-endian <var>type</var></a></td>
+ <td>endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#filter" class="text-decoration-none fw-semibold">-filter <var>type</var></a></td>
+ <td>use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#frame" class="text-decoration-none fw-semibold">-frame</a></td>
+ <td>include window manager frame</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#geometry" class="text-decoration-none fw-semibold">-geometry <var>geometry</var></a></td>
+ <td>preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#gravity" class="text-decoration-none fw-semibold">-gravity <var>type</var></a></td>
+ <td>horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#help" class="text-decoration-none fw-semibold">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#identify" class="text-decoration-none fw-semibold">-identify</a></td>
+ <td>identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-semibold">-interlace <var>type</var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#interpolate" class="text-decoration-none fw-semibold">-interpolate <var>method</var></a></td>
+ <td>pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#label" class="text-decoration-none fw-semibold">-label <var>name</var></a></td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-semibold">-limit <var>type value</var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#log" class="text-decoration-none fw-semibold">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-semibold">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#monochrome" class="text-decoration-none fw-semibold">-monochrome</a></td>
+ <td>transform image to black and white</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#negate" class="text-decoration-none fw-semibold">-negate</a></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#page" class="text-decoration-none fw-semibold">-page <var>geometry</var></a></td>
+ <td>size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#pause" class="text-decoration-none fw-semibold">-pause <var>seconds</var></a></td>
+ <td>seconds delay between snapshots</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quality" class="text-decoration-none fw-semibold">-quality <var>value</var></a></td>
+ <td>JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quantize" class="text-decoration-none fw-semibold">-quantize <var>colorspace</var></a></td>
+ <td>reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-semibold">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-semibold">-regard-warnings</a></td>
+ <td>pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#repage" class="text-decoration-none fw-semibold">-repage <var>geometry</var></a></td>
+ <td>size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#resize" class="text-decoration-none fw-semibold">-resize <var>geometry</var></a></td>
+ <td>resize the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-semibold">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#rotate" class="text-decoration-none fw-semibold">-rotate <var>degrees</var></a></td>
+ <td>apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-semibold">-sampling-factor <var>geometry</var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#scene" class="text-decoration-none fw-semibold">-scene <var>value</var></a></td>
+ <td>image scene number</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#screen" class="text-decoration-none fw-semibold">-screen</a></td>
+ <td>select image from root window</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-semibold">-seed <var>value</var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#set" class="text-decoration-none fw-semibold">-set <var>attribute value</var></a></td>
+ <td>set an image attribute</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#sharpen" class="text-decoration-none fw-semibold">-silent</a></td>
+ <td>operate silently, i.e. don't ring any bells</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#strip" class="text-decoration-none fw-semibold">-strip</a></td>
+ <td>strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#synchronize" class="text-decoration-none fw-semibold">-synchronize</a></td>
+ <td>synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#taint" class="text-decoration-none fw-semibold">-taint</a></td>
+ <td>mark the image as modified</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#transparent-color" class="text-decoration-none fw-semibold">-transparent-color <var>color</var></a></td>
+ <td>transparent color</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#trim" class="text-decoration-none fw-semibold">-trim</a></td>
+ <td>trim image edges</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#update" class="text-decoration-none fw-semibold">-type <var>type</var></a></td>
+ <td>image type</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-semibold">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#version" class="text-decoration-none fw-semibold">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-semibold">-virtual-pixel <var>method</var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td class="ps-3"><a href="../command-line-options/index.html#write" class="text-decoration-none fw-semibold">-window <var>id</var></a></td>
+ <td>select window with this id or name</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/index.html b/www/index.html
index 342e4864f..83ef083cd 100644
--- a/www/index.html
+++ b/www/index.html
@@ -8,464 +8,603 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Mastering Digital Image Alchemy</title>
- <meta name="description" content="ImageMagick is a powerful open-source software suite for creating, editing, converting, and manipulating images in over 200 formats. Ideal for developers, designers, and researchers.">
- <link rel="canonical" href="index-2.html">
+ <meta name="description" content="ImageMagick is a powerful open-source software suite for creating, editing, converting, and manipulating images in over 200 formats.">
+ <link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Mastering Digital Image Alchemy">
- <meta property="og:description" content="ImageMagick is a powerful open-source software suite for creating, editing, converting, and manipulating images in over 200 formats. Ideal for developers, designers, and researchers.">
+ <meta property="og:description" content="ImageMagick is a powerful open-source software suite for creating, editing, converting, and manipulating images in over 200 formats.">
<meta property="og:image" content="image/logo.png">
- <meta property="og:logo" content="image/logo.png">
- <meta property="og:url" content="index-2.html">
+ <meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Mastering Digital Image Alchemy">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Mastering Digital Image Alchemy",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick is a powerful open-source software suite for creating, editing, converting, and manipulating images in over 200 formats.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="index.html">
+ <img src="image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="download/index.html">Download</a>
+ <a class="nav-link " href="download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="develop/index.html">Develop</a>
+ <a class="nav-link " href="develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Mastering Digital Image Alchemy</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Mastering Digital Image Alchemy</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick is a powerful open-source software suite for creating, editing, converting, and manipulating images in over 200 formats.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <p class="lead">ImageMagick<sup><a href="https://tsdr.uspto.gov/#caseNumber=78333969&caseType=SERIAL_NO&searchType=statusSearch" rel="noopener noreferrer" target="_blank">®</a></sup> is a free, <a href="license/index.html">open-source</a> software suite, used for editing and manipulating digital images. It can be used to create, edit, compose, or convert bitmap images, and supports a wide range of file <a href="formats/index.html">formats</a>, including JPEG, PNG, GIF, TIFF, and Ultra HDR.</p>
-
-<p>ImageMagick is widely used in industries such as web development, graphic design, and video editing, as well as in scientific research, medical imaging, and astronomy. Its versatile and customizable nature, along with its robust image processing capabilities, make it a popular choice for a wide range of image-related tasks.</p>
-
-<p>ImageMagick includes a command-line interface for executing complex image processing tasks, as well as APIs for integrating its features into software applications. It is written in C and can be used on a variety of operating systems, including Linux, Windows, and macOS.</p>
-
-<p>The main website for ImageMagick can be found at <a href="index-2.html">https://imagemagick.org</a>. The most recent version available is <a href="download/index.html">ImageMagick 7.1.2-31</a>. The source code for this software can be accessed through a <a href="https://github.com/ImageMagick/ImageMagick" rel="noopener noreferrer" target="_blank">repository</a>. In addition, we maintain a legacy version of ImageMagick, <a href="https://legacy.imagemagick.org/" rel="noopener noreferrer" target="_blank">version 6</a>. Read our <a href="porting/index.html">porting</a> guide for comprehensive details on transitioning from version 6 to version 7.</p>
-
-<p>Creating a security policy that fits your specific local environment before making use of ImageMagick is highly advised. You can find guidance on setting up this <a href="security-policy/index.html">policy</a>. Also, it's important to verify your policy using the <a href="https://imagemagick-secevaluator.doyensec.com/">validation tool</a>.</p>
-
-<h3><a class="anchor" id="features"></a>Features and Capabilities</h3>
-
-<p>One of the key features of ImageMagick is its support for scripting and automation. This allows users to create complex image manipulation pipelines that can be run automatically, without the need for manual intervention. This can be especially useful for tasks that require the processing of large numbers of images, or for tasks that need to be performed on a regular basis.</p>
-
-<p>In addition to its core image manipulation capabilities, ImageMagick also includes a number of other features, such as support for animation, color management, and image rendering. These features make it a versatile tool for a wide range of image-related tasks, including graphic design, scientific visualization, and digital art.</p>
-
-<p>Overall, ImageMagick is a powerful and versatile software suite for displaying, converting, and editing image files. Its support for scripting and automation, along with its other features, make it a valuable tool for a wide range of image-related tasks.</p>
-
-<p>Here are just a few <a href="examples/index.html">examples</a> of what ImageMagick can do for you:</p>
-<div class="overflow-auto" style="max-height:75svh;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td><a href="https://usage.imagemagick.org/anim_basics/">Animation</a></td>
- <td>create a GIF animation sequence from a group of images.</td>
- </tr>
- <tr>
- <td><a href="command-line-options/index.html#bilateral-blur">Bilateral blur</a></td>
- <td>non-linear, edge-preserving, and noise-reducing smoothing filter.</td>
- </tr>
- <tr>
- <td><a href="color-management/index.html">Color management</a></td>
- <td>accurate color management with color profiles or in lieu of-- built-in gamma compression or expansion as demanded by the colorspace.</td>
- </tr>
- <tr>
- <td><a href="color-thresholding/index.html">Color thresholding</a></td>
- <td>force all pixels in the color range to white otherwise black.</td>
- </tr>
- <tr>
- <td><a href="command-line-processing/index.html">Command-line processing</a></td>
- <td>utilize ImageMagick from the command-line.</td>
- </tr>
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/Complex_text_layout">Complex text layout</a></td>
- <td>bidirectional text support and shaping.</td>
- </tr>
- <tr>
- <td><a href="composite/index.html">Composite</a></td>
- <td>overlap one image over another.</td>
- </tr>
- <tr>
- <td><a href="connected-components/index.html">Connected component labeling</a></td>
- <td>uniquely label connected regions in an image.</td>
- </tr>
- <tr>
- <td><a href="convex-hull/index.html">Convex hull</a></td>
- <td>smallest area convex polygon containing the image foreground objects. In addition, the minimum bounding box and unrotate angle are also generated.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/crop/">Decorate</a></td>
- <td>add a border or frame to an image.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/transform/#vision">Delineate image features</a></td>
- <td><a href="https://usage.imagemagick.org/transform/#canny">Canny edge detection</a>, <a href="command-line-options/index.html#hough-line">Hough lines</a>.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/fourier/">Discrete Fourier transform</a></td>
- <td>implements the forward and inverse <a href="https://en.wikipedia.org/wiki/Discrete_Fourier_transform">DFT</a>.</td>
- </tr>
- <tr>
- <td><a href="distribute-pixel-cache/index.html">Distributed pixel cache</a></td>
- <td>offload intermediate pixel storage to one or more remote servers.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/draw/">Draw</a></td>
- <td>add shapes or text to an image.</td>
- </tr>
- <tr>
- <td><a href="cipher/index.html">Encipher or decipher an image</a></td>
- <td>convert ordinary images into unintelligible gibberish and back again.</td>
- </tr>
- <tr>
- <td><a href="convert/index.html">Format conversion</a></td>
- <td>convert an image from one <a href="formats/index.html">format </a> to another (e.g. PNG to JPEG).</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/distorts/">Generalized pixel distortion</a></td>
- <td>correct for, or induce image distortions including perspective.</td>
- </tr>
- <tr>
- <td><a href="architecture/index.html#distributed">Heterogeneous distributed processing</a></td>
- <td>certain algorithms are <a href="opencl/index.html">OpenCL</a>-enabled to take advantage of speed-ups offered by executing in concert across heterogeneous platforms consisting of CPUs, GPUs, and other processors.</td>
- </tr>
- <tr>
- <td><a href="high-dynamic-range/index.html">High dynamic-range images</a></td>
- <td>accurately represent the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows.</td>
- </tr>
- <tr>
- <td><a href="clahe/index.html">Histogram equalization</a></td>
- <td>use adaptive histogram equalization to improve contrast in images.</td>
- </tr>
- <tr>
- <td><a href="magick-cache/index.html">Image cache</a></td>
- <td>secure methods and tools to cache images, image sequences, video, audio or metadata in a local folder..</td>
- </tr>
- <tr>
- <td><a href="fx/index.html">Image calculator</a></td>
- <td>apply a mathematical expression to an image, image sequence, or image channels.</td>
- </tr>
- <tr>
- <td><a href="gradient/index.html">Image gradients</a></td>
- <td>create a gradual blend of two colors whose shape is horizontal, vertical, circular, or elliptical.</td>
- </tr>
- <tr>
- <td><a href="identify/index.html">Image identification</a></td>
- <td>describe the format and attributes of an image.</td>
- </tr>
- <tr>
- <td><a href="download/index.html#iOS">ImageMagick on the iPhone</a></td>
- <td>convert, edit, or compose images on your <a href="https://www.apple.com/os/ios/">iOS</a> device such as the iPhone or iPad.</td>
- </tr>
- <tr>
- <td><a href="architecture/index.html#tera-pixel">Large image support</a></td>
- <td>read, process, or write mega-, giga-, or tera-pixel image sizes.</td>
- </tr>
- <tr>
- <td><a href="montage/index.html">Montage</a></td>
- <td>juxtapose image thumbnails on an image canvas.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/morphology/">Morphology of shapes</a></td>
- <td>extract features, describe shapes, and recognize patterns in images.</td>
- </tr>
- <tr>
- <td><a href="motion-picture/index.html">Motion picture support</a></td>
- <td>read and write the common image formats used in digital film work.</td>
- </tr>
- <tr>
- <td><a href="multispectral-imagery/index.html">Multispectral imagery</a></td>
- <td>support multispectral imagery up to 32 bands, 22 of them meta channels.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/transform/#vision">Noise and color reduction</a></td>
- <td>Kuwahara Filter, mean-shift.</td>
- </tr>
- <tr>
- <td><a href="http://www.fmwconcepts.com/misc_tests/perceptual_hash_test_results_510/index.html">Perceptual hash</a></td>
- <td>map visually identical images to the same or similar hash-- useful in image retrieval, authentication, indexing, or copy detection as well as digital watermarking.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/blur/">Special effects</a></td>
- <td>blur, sharpen, threshold, or tint an image.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/text/">Text & comments</a></td>
- <td>insert descriptive or artistic text in an image.</td>
- </tr>
- <tr>
- <td><a href="architecture/index.html#threads">Threads of execution support</a></td>
- <td>ImageMagick is thread safe and most internal algorithms execute in <a href="openmp/index.html">parallel</a> to take advantage of speed-ups offered by multicore processor chips.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/resize/">Transform</a></td>
- <td>resize, rotate, deskew, crop, flip or trim an image.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/masking/">Transparency</a></td>
- <td>render portions of an image invisible.</td>
- </tr>
- <tr>
- <td><a href="architecture/index.html#virtual-pixels">Virtual pixel support</a></td>
- <td>convenient access to pixels outside the image boundaries.</td>
- </tr>
-</table>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <section class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border">
+ <p class="fs-5 leading-relaxed">
+ <strong>ImageMagick<sup><a href="https://tsdr.uspto.gov/#caseNumber=78333969&caseType=SERIAL_NO&searchType=statusSearch" rel="noopener noreferrer" target="_blank" class="text-decoration-none">®</a></sup></strong>
+ is a free, <a href="license/index.html" class="fw-medium text-decoration-none">open-source software suite</a> for editing, processing, and converting digital images. It supports over 200 format variants, including modern standards like <strong>JPEG, PNG, GIF, TIFF, WebP, AVIF, and Ultra HDR</strong>.
+ </p>
+ <div class="row g-3 mt-2">
+ <div class="col-md-4">
+ <div class="d-flex align-items-center gap-2">
+ <i class="bi bi-cpu fs-4 text-primary"></i>
+ <div>
+ <strong class="d-block">High Performance</strong>
+ <span class="small text-body-secondary">Multi-threaded, OpenCL & parallel processing.</span>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="d-flex align-items-center gap-2">
+ <i class="bi bi-terminal fs-4 text-primary"></i>
+ <div>
+ <strong class="d-block">CLI & Automation</strong>
+ <span class="small text-body-secondary">Scripting-first design for mass batch jobs.</span>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="d-flex align-items-center gap-2">
+ <i class="bi bi-code-slash fs-4 text-primary"></i>
+ <div>
+ <strong class="d-block">Extensive APIs</strong>
+ <span class="small text-body-secondary">Bindings for C, C++, Python, .NET, Node.js.</span>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+</section>
+
+<!-- Version & Security Cards -->
+<div class="row g-4 mb-5">
+ <div class="col-md-6">
+ <div class="card h-100 im-card p-3">
+ <div class="card-body d-flex flex-column">
+ <h5 class="card-title fw-bold"><i class="bi bi-box-seam me-2 text-primary"></i> Releases & Ecosystem</h5>
+ <p class="card-text text-body-secondary small flex-grow-1">
+ Access the latest stable version or explore legacy releases. Check out our migration guidelines when porting commands.
+ </p>
+ <div class="d-flex flex-wrap gap-2 pt-2">
+ <a href="download/index.html" class="btn btn-sm btn-outline-primary">ImageMagick 7.1.2-34</a>
+ <a href="https://legacy.imagemagick.org/" target="_blank" class="btn btn-sm btn-outline-secondary">Version 6 (Legacy)</a>
+ <a href="porting/index.html" class="btn btn-sm btn-link text-decoration-none">Porting Guide →</a>
+ </div>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 im-card p-3">
+ <div class="card-body d-flex flex-column">
+ <h5 class="card-title fw-bold"><i class="bi bi-shield-check me-2 text-success"></i> Security First</h5>
+ <p class="card-text text-body-secondary small flex-grow-1">
+ Tailor security policies to suit your server environment. Always validate your policy parameters before deploying to production.
+ </p>
+ <div class="d-flex flex-wrap gap-2 pt-2">
+ <a href="security-policy/index.html" class="btn btn-sm btn-outline-success">Security Guidelines</a>
+ <a href="https://imagemagick-secevaluator.doyensec.com/" target="_blank" class="btn btn-sm btn-outline-secondary">Validation Tool</a>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
-<p> </p>
-<p><a href="https://usage.imagemagick.org/" rel="noopener noreferrer" target="_blank">Examples of ImageMagick Usage</a> demonstrates how to use the software from the <a href="command-line-processing/index.html">command line</a> to achieve various effects. There are also several scripts available on the <a href="http://www.fmwconcepts.com/imagemagick/" rel="noopener noreferrer" target="_blank">Fred's ImageMagick Scripts</a> and <a href="https://im.snibgo.com/" rel="noopener noreferrer" target="_blank">Snibgo's ImageMagick Scripts</a> websites, which can be used to apply geometric transforms, blur and sharpen images, remove noise, and perform other operations. Additionally, there is a tool called <a href="https://github.com/dlemstra/Magick.NET" rel="noopener noreferrer" target="_blank">Magick.NET</a> that allows users to access the functionality of ImageMagick without having to install the software on their own systems. Finally, the website also includes a <a href="http://im.snibgo.com/" rel="noopener noreferrer" target="_blank">Cookbook</a> with tips and examples for using ImageMagick on Windows systems.</p>
-<h3><a class="anchor" id="community"></a>Community</h3>
-<p>Join the ImageMagick community by participating in the <a href="https://github.com/ImageMagick/ImageMagick/discussions" rel="noopener noreferrer" target="_blank">discussion</a> service. Here, you can find answers to questions asked by other ImageMagick users or ask your own questions. If you have a technical question, a suggestion for an improvement, or a fix for a bug, you can also open an <a href="https://github.com/ImageMagick/ImageMagick/issues" rel="noopener noreferrer" target="_blank">issue</a> to get help from the community.</p>
+<!-- Features & Capabilities Section -->
+<section class="mb-5">
+ <div class="d-flex flex-column flex-md-row justify-content-between align-items-start align-items-md-center mb-4 gap-3">
+ <div>
+ <h3 class="fw-bold mb-1" id="features">Features & Capabilities</h3>
+ <p class="text-body-secondary mb-0">Discover what ImageMagick can do for your workflows.</p>
+ </div>
+
+ <!-- Filter Search Box -->
+ <div class="w-100 w-md-auto" style="min-width: 260px;">
+ <input type="text" id="featureSearch" class="form-control" placeholder="Filter capabilities (e.g., blur, animation)...">
+ </div>
+ </div>
+
+ <!-- Interactive Grid Container -->
+ <div class="row row-cols-1 row-cols-md-2 g-3" id="featureGrid">
+ <div class="col feature-item" data-title="Animation">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="https://usage.imagemagick.org/anim_basics/" class="fw-bold text-decoration-none fs-6">Animation</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Format</span>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
- </div>
+ <p class="small text-body-secondary mb-0">Create GIF or WebP animated sequences from image frames.</p>
+ </div>
+ </div>
+
+ <div class="col feature-item" data-title="Bilateral blur">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="command-line-options/index.html#bilateral-blur" class="fw-bold text-decoration-none fs-6">Bilateral Blur</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Filter</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Edge-preserving, noise-reducing non-linear smoothing filter.</p>
+ </div>
+ </div>
+
+ <div class="col feature-item" data-title="Color management">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="color-management/index.html" class="fw-bold text-decoration-none fs-6">Color Management</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Color</span>
</div>
+ <p class="small text-body-secondary mb-0">Accurate profile processing with built-in gamma compression and expansion.</p>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="security-policy/index.html">Security</a> •
- <a href="news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="image/wand.png"></a>
-
- <a href="links/index.html">Related</a> •
- <a href="sitemap/index.html">Sitemap</a>
- <br>
- <a href="support/index.html">Sponsor</a> •
- <a href="cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+
+ <div class="col feature-item" data-title="Command-line processing">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="command-line-processing/index.html" class="fw-bold text-decoration-none fs-6">Command-Line Processing</a>
+ <span class="badge bg-primary-subtle text-primary-emphasis">Core</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Automate and script complex multi-step operations efficiently from terminal interfaces.</p>
+ </div>
+ </div>
+
+ <div class="col feature-item" data-title="Convex hull & Minimum Bounding Box">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="convex-hull/index.html" class="fw-bold text-decoration-none fs-6">Convex Hull</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Vision</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Calculate smallest area bounding polygons, unrotate angles, and geometry metadata.</p>
+ </div>
+ </div>
+
+ <div class="col feature-item" data-title="Format conversion">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="convert/index.html" class="fw-bold text-decoration-none fs-6">Format Conversion</a>
+ <span class="badge bg-primary-subtle text-primary-emphasis">Core</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Convert rapidly between 200+ standard formats (PNG, JPEG, WebP, AVIF, HEIC, TIFF).</p>
+ </div>
+ </div>
+
+ <div class="col feature-item" data-title="High dynamic-range images HDR">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="high-dynamic-range/index.html" class="fw-bold text-decoration-none fs-6">High Dynamic-Range (HDR)</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Rendering</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Represent wide ranges of intensity levels across extreme light and shadow contrast.</p>
+ </div>
+ </div>
+
+ <div class="col feature-item" data-title="Large image support tera-pixel">
+ <div class="card h-100 im-card p-3">
+ <div class="d-flex justify-content-between align-items-start mb-2">
+ <a href="architecture/index.html#tera-pixel" class="fw-bold text-decoration-none fs-6">Tera-Pixel Support</a>
+ <span class="badge bg-secondary-subtle text-secondary-emphasis">Performance</span>
+ </div>
+ <p class="small text-body-secondary mb-0">Seamlessly read, process, and write giga-pixel or tera-pixel sized datasets.</p>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
+
</div>
+</section>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+<!-- Community Section -->
+<section class="card im-card p-4 p-md-5 mb-5 bg-body-tertiary">
+ <div class="row align-items-center g-4">
+ <div class="col-md-8">
+ <h3 class="fw-bold mb-2" id="community">Join the Community</h3>
+ <p class="text-body-secondary mb-0">
+ Have technical questions or feature ideas? Engage with users and maintainers on GitHub Discussions or submit an issue report.
+ </p>
+ </div>
+ <div class="col-md-4 text-md-end">
+ <a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank" class="btn btn-primary px-4 fw-semibold">
+ <i class="bi bi-chat-dots me-1"></i> Discussions
+ </a>
+ </div>
+ </div>
+</section>
+
+<!-- Filter Script -->
+<script>
+ document.addEventListener('DOMContentLoaded', () => {
+ const searchInput = document.getElementById('featureSearch');
+ const items = document.querySelectorAll('.feature-item');
+
+ if (searchInput) {
+ searchInput.addEventListener('input', (e) => {
+ const query = e.target.value.toLowerCase().trim();
+ items.forEach(item => {
+ const text = (item.getAttribute('data-title') + ' ' + item.textContent).toLowerCase();
+ item.style.display = text.includes(query) ? '' : 'none';
+ });
+ });
+ }
+ });
+</script>
+
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="download/index.html">Download</a></li>
+ <li><a href="command-line-tools/index.html">Tools</a></li>
+ <li><a href="develop/index.html">APIs & Libraries</a></li>
+ <li><a href="sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="support/index.html">Sponsor Us</a></li>
+ <li><a href="cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/install-source/index.html b/www/install-source/index.html
index 2164bd97b..e987add98 100644
--- a/www/install-source/index.html
+++ b/www/install-source/index.html
@@ -11,386 +11,559 @@
<meta name="description" content="Learn how to install ImageMagick from source on Linux, macOS, FreeBSD, Solaris, or Windows. Step-by-step instructions for compiling, configuring, and verifying your build, with guidance on optional libraries, advanced installation, and troubleshooting.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Install from Source">
<meta property="og:description" content="Learn how to install ImageMagick from source on Linux, macOS, FreeBSD, Solaris, or Windows. Step-by-step instructions for compiling, configuring, and verifying your build, with guidance on optional libraries, advanced installation, and troubleshooting.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Install from Source">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Install from Source",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/install-source/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to install ImageMagick from source on Linux, macOS, FreeBSD, Solaris, or Windows. Step-by-step instructions for compiling, configuring, and verifying your build, with guidance on optional libraries, advanced installation, and troubleshooting.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/install-source/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/install-source/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Install from Source</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#linux">Install from Linux Source</a> • <a href="#windows">Install from Windows Source</a></p>
-
-<p class="lead">Chances are, ImageMagick is already installed on your computer if you are using some flavor of Linux, and its likely not installed if you are using some form of Windows. In either case, you can type the following to find out:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><code>magick identify -version
-</code></pre>
-
-<p>If the <a href="../identify/index.html">identify</a> program executes and identifies itself as ImageMagick, you may not need to install ImageMagick from source unless you want to add support for additional image formats or upgrade to a newer version. You also have the option of installing a pre-compiled <a href="../download/index.html">binary release</a>. However, if you still want to install from source, choose a platform, <a href="#linux">Linux</a> or <a href="#windows">Windows</a>. Before installing from source, you may want to review recent <a href="https://imagemagick.org/changelog" rel="noopener noreferrer" target="_blank">changes</a> to the ImageMagick distribution.</p>
-
-<p>The authoritative source code repository is <a href="https://github.com/ImageMagick">https://github.com/ImageMagick</a>. </p>
-
-<h2><a class="anchor" id="linux"></a>Install from Linux Source</h2>
-
-<p>ImageMagick builds on a variety of Linux and Linux-like operating systems including Linux, Solaris, FreeBSD, macOS, and others. A compiler is required and fortunately almost all modern Linux systems have one.</p>
-
-<p>Clone the latest release from the source repository:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>git clone --depth 1 --branch [latest_release_tag] https://github.com/ImageMagick/ImageMagick.git ImageMagick-7.1.2-31</code></pre>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Install from Source</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to install ImageMagick from source on Linux, macOS, FreeBSD, Solaris, or Windows. Step-by-step instructions for compiling, configuring, and verifying your build, with guidance on optional libraries, advanced installation, and troubleshooting.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>Or download
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Quick Navigation & Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap gap-2 pt-2 pb-3 border-bottom mb-3">
+ <a href="#linux" class="btn btn-outline-secondary btn-sm">Install from Linux Source</a>
+ <a href="#windows" class="btn btn-outline-secondary btn-sm">Install from Windows Source</a>
+ </div>
+ <p class="lead text-body-secondary">
+ Chances are, ImageMagick is already installed on your computer if you use Linux, whereas it likely isn't if you are on Windows. In either case, you can check quickly by running:
+ </p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>magick identify -version</code></pre>
+ </div>
+ </div>
+ <p class="text-muted small">
+ If the <a href="../identify/index.html">identify</a> program executes successfully, you may not need to install from source unless you want to add support for specific image formats or upgrade. Alternatively, you can install a pre-compiled <a href="../download/index.html">binary release</a>. Before proceeding with a source build, you may want to review recent <a href="https://imagemagick.org/changelog" rel="noopener noreferrer" target="_blank">changes</a> to the distribution. The authoritative repository is available at <a href="https://github.com/ImageMagick">https://github.com/ImageMagick</a>.
+ </p>
+ </div>
+ </div>
+ <!-- Linux Source Installation Section -->
+ <section id="linux" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Install from Linux Source</h2>
+ <p>
+ ImageMagick builds seamlessly on Linux and Unix-like operating systems including Solaris, FreeBSD, and macOS. A compiler is required, and almost all modern systems include one.
+ </p>
+
+ <h3 class="h6 fw-bold mt-4 mb-2">1. Obtain the Source Code</h3>
+ <p>Clone the latest release from the official repository:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>git clone --depth 1 --branch [latest_release_tag] https://github.com/ImageMagick/ImageMagick.git ImageMagick-7.1.2-34</code></pre>
+ </div>
+ </div>
+ <p class="small text-muted">
+ Alternatively, download
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31.7z">ImageMagick-7.1.2-31.7z</a>
- from <a href="https://github.com/ImageMagick/ImageMagick/releases">GitHub</a> and verify the distribution against its
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31.intoto.jsonl">provenance</a>
-.</p>
-<p>Next configure and compile ImageMagick. Note the <a href="https://en.wikipedia.org/wiki/Pkg-config">pkg-config</a> script is required so that ImageMagick can find certain optional delegate libraries on your system. To configure, type:</p>
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34.7z">ImageMagick-7.1.2-34.7z</a>
+ from <a href="https://github.com/ImageMagick/ImageMagick/releases">GitHub</a> and verify its distribution against its
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34.intoto.jsonl">provenance</a>
+.
+ </p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>cd ImageMagick-7.1.2-31
+ <h3 class="h6 fw-bold mt-4 mb-2">2. Configure and Compile</h3>
+ <p>
+ The <a href="https://en.wikipedia.org/wiki/Pkg-config">pkg-config</a> script is required to locate optional delegate libraries. Configure and compile by running:
+ </p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>cd ImageMagick-7.1.2-34
./configure
make</code></pre>
+ </div>
+ </div>
+ <p class="small text-muted">If the build fails, try running <code>gmake</code> instead. For advanced users, a modules build is recommended:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>./configure --with-modules</code></pre>
+ </div>
+ </div>
-<p>If build fails, try <code>gmake</code> instead.</p>
-
-<p>For advanced users, we recommend a modules build:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>./configure --with-modules</code></pre>
-<p>If ImageMagick configured and compiled without complaint, you are ready to install it on your system. Administrator privileges are required to install. To install, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>sudo make install
-</code></pre>
-
-<p>You may need to configure the dynamic linker run-time bindings:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>sudo ldconfig /usr/local/lib
-</code></pre>
-
-<p>Finally, verify the ImageMagick install worked properly, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>/usr/local/bin/magick logo: logo.gif
-</code></pre>
-
-<p>For a more comprehensive test, run the ImageMagick validation suite. Ghostscript and Freetype are prerequisites, otherwise expect the EPS, PS, PDF and text annotations tests to fail.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>make check
-</code></pre>
-
-<p>Ghostscript and Freetype are prerequisites, otherwise certain unit tests that render text and the EPS, PS, and PDF formats will likely fail. These unit tests require the open security policy to pass.</p>
-
-<p>Congratulations, you have a working ImageMagick distribution and you are ready to use ImageMagick to <a href="https://usage.imagemagick.org/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="../develop/index.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
-
-<p>The above instructions will satisfy a great number of ImageMagick users, but we suspect a few will have additional questions or problems to consider. For example, what does one do if ImageMagick fails to configure or compile? Or what if you don't have administrator privileges and what if you don't want to install ImageMagick in the default <code>/../usr/local</code> folder? You will find the answer to these questions, and more, in <a href="https://imagemagick.org/advanced-linux-installation/">Advanced Linux Source Installation</a>.</p>
-
-<h2><a class="anchor" id="windows"></a>Install from Windows Source</h2>
-<p>We recommend you first uninstall an existing ImageMagick, else you might be surprised that your <samp>$ magick</samp> commands go to the old version.<p>
-<p>Building ImageMagick source for Windows can be done with a modern version of Microsoft Visual Studio IDE. Users have reported success with the Borland C++ compiler as well. If you don't have a compiler you can still install a self-installing <a href="../download/index.html">binary release</a>.</p>
-
-<p>Clone the Github repo:<p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>git clone https://github.com/ImageMagick/ImageMagick-Windows.git ImageMagick-Windows-7</code></pre>
-
-
-<p>and run <code>CloneRepositories.cmd</code>. Or download ImageMagick-7.1.2-31.7z from <a href="https://github.com/ImageMagick/ImageMagick/releases">GitHub</a> and verify the distribution against its
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31.intoto.jsonl">provenance</a>
-.</p>
+ <h3 class="h6 fw-bold mt-4 mb-2">3. Install and Verify</h3>
+ <p>Administrator privileges are required for installation. Run the following commands:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>sudo make install
+sudo ldconfig /usr/local/lib</code></pre>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>unzip ImageMagick-windows.zip</code></pre>
-<p> Unzip in a folder that does not need Admin permissions, otherwise Visual Studio will not be able to build the solution.<p>
-<p>Next, launch your Visual Studio IDE and choose <code>Open->Project</code>. Select the configure workspace from the <code>ImageMagick-7.1.2/VisualMagick/configure</code> folder and open configure.sln. Choose <code>Build->Build Solution</code>
-to compile the program and on completion run the program.</p>
+ <p>Verify that your installation functions properly:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>/usr/local/bin/magick logo: logo.gif</code></pre>
+ </div>
+ </div>
-<ul><img class="img-fluid img-thumbnail" src="https://imagemagick.org/image/configure.jpg" alt="[configure]" /></ul>
+ <p>For comprehensive verification, run the validation suite:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>make check</code></pre>
+ </div>
+ </div>
+ <div class="card border-0 bg-body-tertiary shadow-sm mb-3">
+ <div class="card-body">
+ <p class="small text-muted mb-0">
+ <strong>Note:</strong> Ghostscript and FreeType are prerequisites; otherwise, tests involving text annotations and formats like EPS, PS, and PDF will fail. These unit tests require the open security policy to pass.
+ </p>
+ </div>
+ </div>
-<p>Press <code>Next</code> and click on the multi-threaded static build. Now press, on <code>Next</code> twice and finally <code>Finish</code>. The configuration utility just created a workspace required to build ImageMagick from source. Choose <code>Open->Project</code> and select the VisualStaticMT workspace from the <code>ImageMagick-7.1.2/VisualMagick/</code> folder. Finally, choose <code>Build->Build Solution</code> to compile and build the ImageMagick distribution.</p>
+ <p class="mt-3">
+ Congratulations! You have a working distribution ready to <a href="https://usage.imagemagick.org/">convert, compose, or edit</a> images or use one of the <a href="../develop/index.html">APIs</a>. For advanced questions, non-default installation paths, or troubleshooting, see <a href="https://imagemagick.org/advanced-linux-installation/">Advanced Linux Source Installation</a>.
+ </p>
+ </section>
+
+ <!-- Windows Source Installation Section -->
+ <section id="windows" class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Install from Windows Source</h2>
+ <div class="card border-0 bg-warning-subtle text-warning-emphasis shadow-sm mb-3">
+ <div class="card-body py-2 small">
+ <strong>Recommendation:</strong> Uninstall any existing versions of ImageMagick first to avoid command conflicts with old binaries.
+ </div>
+ </div>
+ <p>
+ Building under Windows requires a modern version of Microsoft Visual Studio IDE (though Borland C++ has also been reported to work). If you do not have a compiler, you can install a pre-built <a href="../download/index.html">binary release</a> instead.
+ </p>
+
+ <h3 class="h6 fw-bold mt-4 mb-2">1. Clone or Download the Source</h3>
+ <p>Clone the GitHub repository:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>git clone https://github.com/ImageMagick/ImageMagick-Windows.git ImageMagick-Windows-7</code></pre>
+ </div>
+ </div>
+ <p>Then run <code>CloneRepositories.cmd</code>, or download <code>ImageMagick-7.1.2-34.7z</code> from <a href="https://github.com/ImageMagick/ImageMagick/releases">GitHub</a> and verify its provenance:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>unzip ImageMagick-windows.zip</code></pre>
+ </div>
+ </div>
+ <p class="small text-muted">Be sure to unzip into a folder that does not require Administrator privileges so Visual Studio can build the solution successfully.</p>
-<p>The configure.exe utility can also be run on the command line instead of through the GUI wizard. You can see an example in <a href="https://github.com/ImageMagick/ImageMagick/blob/18e15da2dc6ceae05e95077f85e9d67dac31c5d8/.github/workflows/release.yml#L212">our GitHub actions build</a>.</p>
+ <h3 class="h6 fw-bold mt-4 mb-2">2. Compile via Visual Studio</h3>
+ <p>
+ Launch Visual Studio, choose <strong>File > Open > Project/Solution</strong>, open <code>configure.sln</code> located in the <code>ImageMagick-7.1.2/VisualMagick/configure</code> folder, and build the solution.
+ </p>
-<p>To verify ImageMagick is working properly, launch a MS-DOS Command Prompt window and type</p>
+ <div class="text-center my-3">
+ <img class="img-fluid img-thumbnail rounded shadow-sm" src="https://imagemagick.org/image/configure.jpg" alt="[configure]" style="max-height: 350px;" />
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>cd ImageMagick-7.1.2-31
+ <p>
+ Run the resulting configuration utility, select the multi-threaded static build option by clicking <strong>Next</strong>, and click <strong>Finish</strong>. Then, open the newly created <code>VisualStaticMT</code> workspace in <code>ImageMagick-7.1.2/VisualMagick/</code> and build the complete solution.
+ </p>
+ <p class="small text-muted">You can also execute <code>configure.exe</code> from the command line; examples are available in <a href="https://github.com/ImageMagick/ImageMagick/blob/18e15da2dc6ceae05e95077f85e9d67dac31c5d8/.github/workflows/release.yml#L212">our GitHub actions build</a>.</p>
+ <h3 class="h6 fw-bold mt-4 mb-2">3. Verify the Installation</h3>
+ <p>Open an MS-DOS Command Prompt and run:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>cd ImageMagick-7.1.2-34
magick logo: image.jpg</code></pre>
+ </div>
+ </div>
+ <p class="small text-muted">Consider adding the full path to <code>VisualMagick\bin</code> to your system PATH environment variable to call <code>magick</code> from any directory. For a thorough test, run the validation suite:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>validate</code></pre>
+ </div>
+ </div>
-<p>You may want to add the full path to VisualMagick\bin for your environment PATH variable, so you can call <code>magick</code> from any directory.<p>
-<p>For a more comprehensive test, run the ImageMagick validation suite:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>validate
-</code></pre>
-
-<p>Congratulations, you have a working ImageMagick distribution under Windows and you are ready to use ImageMagick to <a href="https://usage.imagemagick.org/">convert, compose, or edit</a> your images or perhaps you'll want to use one of the <a href="../develop/index.html">Application Program Interfaces</a> for C, C++, Perl, and others.</p>
-
-<p>The above instructions will satisfy a great number of ImageMagick users, but we suspect a few will have additional questions or problems to consider. For example, what does one do if ImageMagick fails to configure or compile? Or what if you want to install ImageMagick in a place other than the <code>ImageMagick-7.1.2/VisualMagick/bin</code> folder? You will find the answer to these questions, and more, in <a href="https://imagemagick.org/advanced-windows-installation/">Advanced Windows Source Installation</a>.</p>
-
+ <p class="mt-3">
+ Congratulations! You have a working Windows source build ready for use. For custom installation paths or troubleshooting compilation errors, consult <a href="https://imagemagick.org/advanced-windows-installation/">Advanced Windows Source Installation</a>.
+ </p>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/jp2/index.html b/www/jp2/index.html
index e14282e32..0be9885c0 100644
--- a/www/jp2/index.html
+++ b/www/jp2/index.html
@@ -162,7 +162,7 @@
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
+ <a class="navbar-brand fw-bold" href="../index.html" title="ImageMagick">ImageMagick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -210,7 +210,7 @@
<div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
+ <a href="../index.html" class="text-decoration-none">
<h1 class="fs-2 mb-1 display-5">JP2 Encoding Options</h1>
</a>
<h2 class="fs-5 text-muted h4">ImageMagick</h2>
@@ -320,7 +320,7 @@
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
+ <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index.html">About ImageMagick</a>
</main><!-- /.container -->
<footer class="text-center pt-5 my-5 text-body-secondary border-top">
<div class="container-fluid">
diff --git a/www/license/index.html b/www/license/index.html
index 9d55f4116..b23b2fc7f 100644
--- a/www/license/index.html
+++ b/www/license/index.html
@@ -8,330 +8,461 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | License</title>
- <meta name="description" content="Discover the ImageMagick License: free, open-source terms for use, reproduction, and distribution. Learn how to apply the license, attribution requirements, and compatibility with GPLv3 for personal, commercial, and enterprise projects.">
+ <meta name="description" content="Discover the ImageMagick License: free, open-source terms for use, reproduction, and distribution. Learn how to apply the license and attribution requirements.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | License">
- <meta property="og:description" content="Discover the ImageMagick License: free, open-source terms for use, reproduction, and distribution. Learn how to apply the license, attribution requirements, and compatibility with GPLv3 for personal, commercial, and enterprise projects.">
+ <meta property="og:description" content="Discover the ImageMagick License: free, open-source terms for use, reproduction, and distribution. Learn how to apply the license and attribution requirements.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | License">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | License",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/license/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover the ImageMagick License: free, open-source terms for use, reproduction, and distribution. Learn how to apply the license and attribution requirements.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/license/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/license/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">License</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#terms">Terms and Conditions for Use, Reproduction, and Distribution</a> • <a href="#apply">How to Apply the License to your Work</a></p>
-
-<p class="lead">Before we get to the text of the license, lets just review what the license says in simple terms:</p>
-
-<p>It allows you to:</p>
-
-<ul>
- <li>freely download and use ImageMagick software, in whole or in part, for personal, company internal, or commercial purposes;</li>
- <li>use ImageMagick software in packages or distributions that you create;</li>
- <li>link against a library under a different license;</li>
- <li>link code under a different license against a library under this license;</li>
- <li>merge code into a work under a different license;</li>
- <li>extend patent grants to any code using code under this license;</li>
- <li>and extend patent protection.</li>
-</ul>
-
-<p>It forbids you to:</p>
-
-<ul>
- <li> redistribute any piece of ImageMagick-originated software without proper attribution;</li>
- <li> use any marks owned by ImageMagick Studio LLC in any way that might state or imply that ImageMagick Studio LLC endorses your distribution;</li>
- <li> use any marks owned by ImageMagick Studio LLC in any way that might state or imply that you created the ImageMagick software in question.</li>
-</ul>
-
-<p>It requires you to:</p>
-
-<ul>
- <li>include a copy of the license in any redistribution you may make that includes ImageMagick software;</li>
- <li>provide clear attribution to ImageMagick Studio LLC for any distributions that include ImageMagick software.</li>
-</ul>
-
-<p>It does not require you to:</p>
-
-<ul>
- <li>include the source of the ImageMagick software itself, or of any modifications you may have made to it, in any redistribution you may assemble that includes it;</li>
- <li>submit changes that you make to the software back to the ImageMagick Studio LLC (though such feedback is encouraged).</li>
-</ul>
-
-<p>A few other clarifications include:</p>
-
-<ul>
- <li>ImageMagick is freely available without charge;</li>
- <li>you may include ImageMagick on any digital media as long as you comply with the terms of the license;</li>
- <li>you can give modified code away for free or sell it under the terms of the ImageMagick license or distribute the result under a different license, but you need to acknowledge the use of the ImageMagick software;</li>
- <li>the license is compatible with the GPL V3.</li>
- <li>when exporting the ImageMagick software, review its <a href="../export/index.html">export classification</a>.</li>
-</ul>
-
-<a class="anchor" id="terms"></a>
-<h2>Terms and Conditions for Use, Reproduction, and Distribution</h2>
-
-<p>The legally binding and authoritative terms and conditions for use, reproduction, and distribution of ImageMagick follow:</p>
-
-<p>Copyright © 1999 ImageMagick Studio LLC, a non-profit organization dedicated to making software imaging solutions freely available.</p>
-
-<p><b>1. Definitions</b>.</p>
-
-<p><var>License</var> shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.</p>
-
-<p><var>Licensor</var> shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.</p>
-
-<p><var>Legal Entity</var> shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity. For the purposes of this definition, <var>control</var> means (i) the power, direct or indirect, to cause the direction or management of such entity, whether by contract or otherwise, or (ii) ownership of fifty percent (50%) or more of the outstanding shares, or (iii) beneficial ownership of such entity.</p>
-
-<p><var>You</var> (or <var>Your</var>) shall mean an individual or Legal Entity exercising permissions granted by this License.</p>
-
-<p><var>Source</var> form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.</p>
-
-<p><var>Object</var> form shall mean any form resulting from mechanical transformation or translation of a Source form, including but not limited to compiled object code, generated documentation, and conversions to other media types.</p>
-
-<p><var>Work</var> shall mean the work of authorship, whether in Source or Object form, made available under the License, as indicated by a copyright notice that is included in or attached to the work (an example is provided in the Appendix below).</p>
-
-<p><var>Derivative Works</var> shall mean any work, whether in Source or Object form, that is based on (or derived from) the Work and for which the editorial revisions, annotations, elaborations, or other modifications represent, as a whole, an original work of authorship. For the purposes of this License, Derivative Works shall not include works that remain separable from, or merely link (or bind by name) to the interfaces of, the Work and Derivative Works thereof.</p>
-
-<p><var>Contribution</var> shall mean any work of authorship, including the original version of the Work and any modifications or additions to that Work or Derivative Works thereof, that is intentionally submitted to Licensor for inclusion in the Work by the copyright owner or by an individual or Legal Entity authorized to submit on behalf of the copyright owner. For the purposes of this definition, "submitted" means any form of electronic, verbal, or written communication sent to the Licensor or its representatives, including but not limited to communication on electronic mailing lists, source code control systems, and issue tracking systems that are managed by, or on behalf of, the Licensor for the purpose of discussing and improving the Work, but excluding communication that is conspicuously marked or otherwise designated in writing by the copyright owner as <var>Not a Contribution</var>.</p>
-
-<p><var>Contributor</var> shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received by Licensor and subsequently incorporated within the Work.</p>
-
-<p><b>2. Grant of Copyright License</b>. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.</p>
-
-<p><b>3. Grant of Patent License</b>. Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable (except as stated in this section) patent license to make, have made, use, offer to sell, sell, import, and otherwise transfer the Work, where such license applies only to those patent claims licensable by such Contributor that are necessarily infringed by their Contribution(s) alone or by combination of their Contribution(s) with the Work to which such Contribution(s) was submitted. If You institute patent litigation against any entity (including a cross-claim or counterclaim in a lawsuit) alleging that the Work or a Contribution incorporated within the Work constitutes direct or contributory patent infringement, then any patent licenses granted to You under this License for that Work shall terminate as of the date such litigation is filed.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">License</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover the ImageMagick License: free, open-source terms for use, reproduction, and distribution. Learn how to apply the license and attribution requirements.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p><b>4. Redistribution</b>. You may reproduce and distribute copies of the Work or Derivative Works thereof in any medium, with or without modifications, and in Source or Object form, provided that You meet the following conditions:</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Jump Navigation -->
+<section class="mb-4">
+ <div class="p-3 rounded-3 bg-body-tertiary border text-center">
+ <div class="d-flex flex-wrap justify-content-center gap-2 small">
+ <a href="#summary" class="btn btn-sm btn-outline-secondary">License Summary</a>
+ <a href="#terms" class="btn btn-sm btn-outline-secondary">Terms & Conditions</a>
+ <a href="#apply" class="btn btn-sm btn-outline-secondary">How to Apply</a>
+ </div>
+ </div>
+</section>
+
+<!-- Summary Section -->
+<section id="summary" class="mb-5">
+ <div class="p-4 p-md-5 rounded-3 bg-body-tertiary border mb-4">
+ <h3 class="fw-bold mb-3">License Summary in Simple Terms</h3>
+ <p class="lead mb-0 text-body-secondary">
+ Before diving into the legal text, here is a breakdown of what the ImageMagick license allows, forbids, and requires.
+ </p>
+ </div>
-<ol style="list-style-type: lower-alpha;">
- <li>You must give any other recipients of the Work or Derivative Works a copy of this License; and</li>
+ <div class="row row-cols-1 row-cols-md-2 g-4">
+ <!-- What it allows -->
+ <div class="col">
+ <div class="card im-card p-4 h-100 border-success">
+ <h5 class="fw-bold text-success mb-3"><i class="bi bi-check-circle-fill me-2"></i> What it Allows</h5>
+ <ul class="list-unstyled mb-0 d-flex flex-column gap-2 small text-body-secondary">
+ <li><i class="bi bi-check text-success me-1"></i> Freely download and use software for personal, internal, or commercial purposes.</li>
+ <li><i class="bi bi-check text-success me-1"></i> Use software in packages or distributions you create.</li>
+ <li><i class="bi bi-check text-success me-1"></i> Link against libraries under different licenses (and vice-versa).</li>
+ <li><i class="bi bi-check text-success me-1"></i> Merge code into works under different licenses and extend patent grants.</li>
+ </ul>
+ </div>
+ </div>
- <li>You must cause any modified files to carry prominent notices stating that You changed the files; and</li>
+ <!-- What it forbids -->
+ <div class="col">
+ <div class="card im-card p-4 h-100 border-danger">
+ <h5 class="fw-bold text-danger mb-3"><i class="bi bi-x-circle-fill me-2"></i> What it Forbids</h5>
+ <ul class="list-unstyled mb-0 d-flex flex-column gap-2 small text-body-secondary">
+ <li><i class="bi bi-x text-danger me-1"></i> Redistribute any piece of ImageMagick-originated software without proper attribution.</li>
+ <li><i class="bi bi-x text-danger me-1"></i> Use ImageMagick Studio LLC marks to imply endorsement of your distribution.</li>
+ <li><i class="bi bi-x text-danger me-1"></i> Imply that you created the original ImageMagick software.</li>
+ </ul>
+ </div>
+ </div>
- <li>You must retain, in the Source form of any Derivative Works that You distribute, all copyright, patent, trademark, and attribution notices from the Source form of the Work, excluding those notices that do not pertain to any part of the Derivative Works; and</li>
+ <!-- What it requires -->
+ <div class="col">
+ <div class="card im-card p-4 h-100 border-primary">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-info-circle-fill me-2"></i> What it Requires</h5>
+ <ul class="list-unstyled mb-0 d-flex flex-column gap-2 small text-body-secondary">
+ <li><i class="bi bi-arrow-right text-primary me-1"></i> Include a copy of the license in any redistribution containing ImageMagick.</li>
+ <li><i class="bi bi-arrow-right text-primary me-1"></i> Provide clear attribution to ImageMagick Studio LLC.</li>
+ </ul>
+ </div>
+ </div>
- <li>If the Work includes a "NOTICE" text file as part of its distribution, then any Derivative Works that You distribute must include a readable copy of the attribution notices contained within such NOTICE file, excluding those notices that do not pertain to any part of the Derivative Works, in at least one of the following places: within a NOTICE text file distributed as part of the Derivative Works; within the Source form or documentation, if provided along with the Derivative Works; or, within a display generated by the Derivative Works, if and wherever such third-party notices normally appear. The contents of the NOTICE file are for informational purposes only and do not modify the License. You may add Your own attribution notices within Derivative Works that You distribute, alongside or as an addendum to the NOTICE text from the Work, provided that such additional attribution notices cannot be construed as modifying the License.</li>
-</ol>
+ <!-- Clarifications -->
+ <div class="col">
+ <div class="card im-card p-4 h-100">
+ <h5 class="fw-bold text-secondary mb-3"><i class="bi bi-lightbulb-fill me-2"></i> Key Clarifications</h5>
+ <ul class="list-unstyled mb-0 d-flex flex-column gap-2 small text-body-secondary">
+ <li><i class="bi bi-dot me-1"></i> Software is freely available without charge.</li>
+ <li><i class="bi bi-dot me-1"></i> Compatible with the GPL v3.</li>
+ <li><i class="bi bi-dot me-1"></i> Source code of modifications is not required to be redistributed.</li>
+ <li><i class="bi bi-dot me-1"></i> Check export classification when exporting software.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+</section>
-<p>You may add Your own copyright statement to Your modifications and may provide additional or different license terms and conditions for use, reproduction, or distribution of Your modifications, or for any such Derivative Works as a whole, provided Your use, reproduction, and distribution of the Work otherwise complies with the conditions stated in this License.</p>
+<!-- Terms and Conditions Section -->
+<section id="terms" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-file-earmark-text-fill fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">Terms and Conditions for Use, Reproduction, and Distribution</h2>
+ </div>
+ <p class="text-body-secondary mb-4">Copyright © 1999 ImageMagick Studio LLC, a non-profit organization dedicated to making software imaging solutions freely available.</p>
+
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">1. Definitions</h5>
+ <div class="small text-body-secondary d-flex flex-column gap-3">
+ <p><strong>License</strong> shall mean the terms and conditions for use, reproduction, and distribution as defined by Sections 1 through 9 of this document.</p>
+ <p><strong>Licensor</strong> shall mean the copyright owner or entity authorized by the copyright owner that is granting the License.</p>
+ <p><strong>Legal Entity</strong> shall mean the union of the acting entity and all other entities that control, are controlled by, or are under common control with that entity.</p>
+ <p><strong>You</strong> (or Your) shall mean an individual or Legal Entity exercising permissions granted by this License.</p>
+ <p><strong>Source</strong> form shall mean the preferred form for making modifications, including but not limited to software source code, documentation source, and configuration files.</p>
+ <p><strong>Object</strong> form shall mean any form resulting from mechanical transformation or translation of a Source form.</p>
+ <p><strong>Work</strong> shall mean the work of authorship, whether in Source or Object form, made available under the License.</p>
+ <p><strong>Derivative Works</strong> shall mean any work based on (or derived from) the Work.</p>
+ <p><strong>Contribution</strong> shall mean any work of authorship intentionally submitted to Licensor for inclusion in the Work.</p>
+ <p><strong>Contributor</strong> shall mean Licensor and any individual or Legal Entity on behalf of whom a Contribution has been received.</p>
+ </div>
+ </div>
-<p><b>5. Submission of Contributions</b>. Unless You explicitly state otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions. Notwithstanding the above, nothing herein shall supersede or modify the terms of any separate license agreement you may have executed with Licensor regarding such Contributions.</p>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">2. Grant of Copyright License</h5>
+ <p class="small text-body-secondary mb-0">
+ Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable copyright license to reproduce, prepare Derivative Works of, publicly display, publicly perform, sublicense, and distribute the Work and such Derivative Works in Source or Object form.
+ </p>
+ </div>
-<p><b>6. Trademarks</b>. This License does not grant permission to use the trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work and reproducing the content of the NOTICE file.</p>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">3. Grant of Patent License</h5>
+ <p class="small text-body-secondary mb-0">
+ Subject to the terms and conditions of this License, each Contributor hereby grants to You a perpetual, worldwide, non-exclusive, no-charge, royalty-free, irrevocable patent license to make, use, sell, and import the Work. If You institute patent litigation alleging that the Work constitutes patent infringement, licenses granted to You under this License shall terminate as of the date such litigation is filed.
+ </p>
+ </div>
-<p><b>7. Disclaimer of Warranty</b>. Unless required by applicable law or agreed to in writing, Licensor provides the Work (and each Contributor provides its Contributions) on an <var>AS IS</var> BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied, including, without limitation, any warranties or conditions of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A PARTICULAR PURPOSE. You are solely responsible for determining the appropriateness of using or redistributing the Work and assume any risks associated with Your exercise of permissions under this License.</p>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">4. Redistribution</h5>
+ <p class="small text-body-secondary mb-2">You may reproduce and distribute copies of the Work or Derivative Works thereof, provided that You meet the following conditions:</p>
+ <ol class="small text-body-secondary mb-3 ps-3">
+ <li>Give any other recipients a copy of this License.</li>
+ <li>Cause modified files to carry prominent notices stating that You changed the files.</li>
+ <li>Retain copyright, patent, trademark, and attribution notices in Source form.</li>
+ <li>Include a readable copy of attribution notices within a NOTICE text file or documentation if included.</li>
+ </ol>
+ <p class="small text-body-secondary mb-0">You may add Your own copyright statement and additional or different license terms for your modifications.</p>
+ </div>
-<p><b>8. Limitation of Liability</b>. In no event and under no legal theory, whether in tort (including negligence), contract, or otherwise, unless required by applicable law (such as deliberate and grossly negligent acts) or agreed to in writing, shall any Contributor be liable to You for damages, including any direct, indirect, special, incidental, or consequential damages of any character arising as a result of this License or out of the use or inability to use the Work (including but not limited to damages for loss of goodwill, work stoppage, computer failure or malfunction, or any and all other commercial damages or losses), even if such Contributor has been advised of the possibility of such damages.</p>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">5. Submission of Contributions</h5>
+ <p class="small text-body-secondary mb-0">
+ Unless explicitly stated otherwise, any Contribution intentionally submitted for inclusion in the Work by You to the Licensor shall be under the terms and conditions of this License, without any additional terms or conditions.
+ </p>
+ </div>
-<p><b>9. Accepting Warranty or Additional Liability</b>. While redistributing the Work or Derivative Works thereof, You may choose to offer, and charge a fee for, acceptance of support, warranty, indemnity, or other liability obligations and/or rights consistent with this License. However, in accepting such obligations, You may act only on Your own behalf and on Your sole responsibility, not on behalf of any other Contributor, and only if You agree to indemnify, defend, and hold each Contributor harmless for any liability incurred by, or claims asserted against, such Contributor by reason of your accepting any such warranty or additional liability.</p>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">6. Trademarks</h5>
+ <p class="small text-body-secondary mb-0">
+ This License does not grant permission to use trade names, trademarks, service marks, or product names of the Licensor, except as required for reasonable and customary use in describing the origin of the Work.
+ </p>
+ </div>
-<a class="anchor" id="apply"></a>
-<h2>How to Apply the License to your Work</h2>
+ <div class="card im-card p-4 mb-4">
+ <h5 class="fw-bold mb-3">7. Disclaimer of Warranty & 8. Limitation of Liability</h5>
+ <p class="small text-body-secondary mb-2">
+ Unless required by applicable law or agreed to in writing, Licensor provides the Work on an <strong>AS IS BASIS</strong>, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND.
+ </p>
+ <p class="small text-body-secondary mb-0">
+ In no event shall any Contributor be liable to You for damages, including direct, indirect, special, incidental, or consequential damages arising out of the use or inability to use the Work.
+ </p>
+ </div>
+</section>
-<p>To apply the ImageMagick License to your work, attach the following boilerplate notice, with the fields enclosed by brackets "[]" replaced with your own identifying information (don't include the brackets). The text should be enclosed in the appropriate comment syntax for the file format. We also recommend that a file or class name and description of purpose be included on the same "printed page" as the copyright notice for easier identification within third-party archives.</p>
+<!-- How to Apply Section -->
+<section id="apply" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <i class="bi bi-code-square fs-3 text-primary"></i>
+ <h2 class="fw-bold mb-0">How to Apply the License to your Work</h2>
+ </div>
+ <p class="text-body-secondary mb-3">
+ To apply the ImageMagick License to your work, attach the following boilerplate notice, replacing the bracketed fields with your own identifying information:
+ </p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code> Copyright [yyyy] [name of copyright owner]
+ <div class="card im-card bg-dark text-light p-3">
+ <pre class="overflow-auto small font-mono mb-0" style="max-height: 350px;"><code> Copyright [yyyy] [name of copyright owner]
Licensed under the ImageMagick License (the "License"); you may not use
this file except in compliance with the License. You may obtain a copy
@@ -343,71 +474,105 @@
distributed under the License is distributed on an "AS IS" BASIS, WITHOUT
WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. See the
License for the specific language governing permissions and limitations
- under the License. </code></pre>
-
-</div>
+ under the License.</code></pre>
+ </div>
+</section>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/links/index.html b/www/links/index.html
index 15f0416d1..3c07075df 100644
--- a/www/links/index.html
+++ b/www/links/index.html
@@ -162,7 +162,7 @@
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
+ <a class="navbar-brand fw-bold" href="../index.html" title="ImageMagick">ImageMagick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -210,7 +210,7 @@
<div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
+ <a href="../index.html" class="text-decoration-none">
<h1 class="fs-2 mb-1 display-5">Related Web Sites</h1>
</a>
<h2 class="fs-5 text-muted h4">ImageMagick</h2>
@@ -276,7 +276,7 @@
<h2><a class="anchor" id="mirrors"></a>ImageMagick Web Site Mirrors</h2>
<ul>
<dt class="col-md-4">United States</dt>
- <dd class="col-md-8"><a href="../index-2.html">https://imagemagick.org</a></dd>
+ <dd class="col-md-8"><a href="../index.html">https://imagemagick.org</a></dd>
</ul>
<h2><a class="anchor" id="bank"></a>Image Bank</h2>
@@ -317,7 +317,7 @@
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
+ <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index.html">About ImageMagick</a>
</main><!-- /.container -->
<footer class="text-center pt-5 my-5 text-body-secondary border-top">
<div class="container-fluid">
diff --git a/www/magick++/index.html b/www/magick++/index.html
index b436c3503..746edb1c2 100644
--- a/www/magick++/index.html
+++ b/www/magick++/index.html
@@ -11,220 +11,304 @@
<meta name="description" content="Explore ImageMagick’s Magick++ API, a modern C++ interface for image processing. Learn how to read, write, manipulate, and analyze images with object‑oriented simplicity and cross‑platform support.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Magick++, C++ API">
<meta property="og:description" content="Explore ImageMagick’s Magick++ API, a modern C++ interface for image processing. Learn how to read, write, manipulate, and analyze images with object‑oriented simplicity and cross‑platform support.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Magick++, C++ API">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Magick++, C++ API",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick++/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore ImageMagick’s Magick++ API, a modern C++ interface for image processing. Learn how to read, write, manipulate, and analyze images with object‑oriented simplicity and cross‑platform support.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick++/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick++/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Magick++, C++ API</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Magick++, C++ API</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore ImageMagick’s Magick++ API, a modern C++ interface for image processing. Learn how to read, write, manipulate, and analyze images with object‑oriented simplicity and cross‑platform support.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
<div>
<p class="text-center"><a href="#documentation">Documentation</a> • <a href="#get">Obtaining Magick++</a> • <a href="#install">Installation</a> • <a href="#bugs">Reporting Bugs</a></p>
<a class="anchor" id="intro"></a>
-Magick++ is the object-oriented C++ API to the <a href="../index-2.html">ImageMagick</a> image-processing library.</p>
+Magick++ is the object-oriented C++ API to the <a href="../index.html">ImageMagick</a> image-processing library.</p>
<p>Magick++ supports an object model which is inspired by <a href="../perl-magick/index.html">PerlMagick</a>.
Images support implicit reference counting so that copy constructors
and assignment incur almost no cost. The cost of actually copying an
@@ -251,7 +335,7 @@ provided for all Magick++ classes, class methods, and template
functions which comprise the API. See a <a href="tutorial/Magick%2b%2b_tutorial.pdf"> Gentle Introduction to Magick++</a> for an introductory tutorial to Magick++. We include the <a href="tutorial/Magick%2b%2b_tutorial.odt" >source</a> if you want to correct, enhance, or expand the tutorial.</p>
<h2>Obtaining Magick++</h2>
<a class="anchor" id="get"></a>
-<p>Magick++ is included as part of <a href="../index-2.html">ImageMagick</a>
+<p>Magick++ is included as part of <a href="../index.html">ImageMagick</a>
source releases and may be retrieved via <a href="../download/index.html">HTTP</a>
or <a href="https://github.com/ImageMagick/ImageMagick/tree/main/Magick++">GitHub</a>.
</p>
@@ -328,66 +412,100 @@ int main(int argc,char **argv)
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/magick-cache/index.html b/www/magick-cache/index.html
index 887eda258..193c2428c 100644
--- a/www/magick-cache/index.html
+++ b/www/magick-cache/index.html
@@ -11,339 +11,525 @@
<meta name="description" content="Understand ImageMagick’s cache architecture for efficient pixel storage and retrieval. Learn how memory, disk, and distributed caches optimize performance, reduce I/O overhead, and accelerate image processing workflows.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | MagickCache: an Efficient Image Cache">
<meta property="og:description" content="Understand ImageMagick’s cache architecture for efficient pixel storage and retrieval. Learn how memory, disk, and distributed caches optimize performance, reduce I/O overhead, and accelerate image processing workflows.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | MagickCache: an Efficient Image Cache">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | MagickCache: an Efficient Image Cache",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick-cache/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Understand ImageMagick’s cache architecture for efficient pixel storage and retrieval. Learn how memory, disk, and distributed caches optimize performance, reduce I/O overhead, and accelerate image processing workflows.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick-cache/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick-cache/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">MagickCache: an Efficient Image Cache</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">MagickCache: an Efficient Image Cache</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Understand ImageMagick’s cache architecture for efficient pixel storage and retrieval. Learn how memory, disk, and distributed caches optimize performance, reduce I/O overhead, and accelerate image processing workflows.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">The MagickCache provides secure methods and tools to cache images, image sequences, video, audio or metadata in a local folder. Any content is memory-mapped for efficient retrieval. Additional efficiencies are possible by retrieving a portion of an image. Content can persist or you can assign a time-to-live (TTL) to automatically expire content when the TTL is exceeded. MagickCache supports virtually unlimited content upwards of billions of images making it suitable as a web image service.</p>
-<p>The MagickCache works in concert with <a href="../index-2.html">ImageMagick</a>. Download the <a href="https://github.com/ImageMagick/MagickCache">MagickCache</a> and install. You will now want to create the cache and populate it with images, video, and associated metadata.</p>
-<h4>Create a MagickCache</h4>
-<p>You will require a place to store and retrieve your content. Let's create a cache on our local filesystem:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt create /opt/magick-cache</samp></pre>
-<p>Where `passkey.txt` contains your cache passkey. Don't lose your passkey. Without it, you will be unable to identify, expire, or delete content in your cache.</p>
-<p>You only need to create a MagickCache once. You can, however, create more than one MagickCache with different paths.</p>
-<p>Once the MagickCache is created, you will want to populate the cache with content that includes images, video, audio, or metadata.
-<h4>Put content in the MagickCache</h4>
-<p>Let's add a movie cast image to our newly created cache:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache put /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.jpg</samp></pre>
-<p>Note, the image identifier is an IRI composed of <em>project</em>/<em>type</em>/<em>resource-path</em>. In this example, the project is <code>movies</code>, type is <code>image</code>, and the resource path is <code>mission-impossible/cast/rebecca-ferguson</code>. The path uniquely identifies a cache resource. Two different images cannot be stored with the same resource path. Instead use something like <code>mission-impossible/cast/20210508-rebecca-ferguson-1</code> and <code>mission-impossible/cast/20210508-rebecca-ferguson-2</code>.</p>
-<p>Now, let's set a resource passkey and the time to live to 2 days. Anytime after the second day, the image is automatically deleted with the <code>expire</code> function. To get, expire, or delete the image, you will need to use the same resource passkey:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt -ttl "2 days" put /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.jpg</samp></pre>
-<p>Where <code>passkey.txt</code> contains your resource passkey. Don't lose your passkey. Without it, you will be unable to get, identify, expire or delete resources you own.</p>
-<p>The resource passkey ensures only you and the cache owner can access your image. To prevent the cache owner from viewing its content, scramble it with:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt -passphrase passphrase.txt -ttl "2 days" put /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.jpg</samp></pre>
-<p>Note, blobs and metadata are stored in the cache in plaintext. To prevent snooping, scramble the content before you store it in the cache.</p>
-<h4>Get content from the MagickCache</h4>
-<p>Eventually you will want retrieve your content, let's get our original cast image from the cache:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</samp></pre>
-<p>Notice the original image was put in the cache in the JPEG format. Here we conveniently convert it to the PNG format as we extract the image.</p>
-<p>The <code>-extract</code> option is useful when retrieving an image. To extract a portion of the image, specify tile width, height, and offset:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt -extract 100x100+0+0 get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</samp></pre>
-<p>To resize instead, do not specify the offset:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt -extract 100x100 get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</samp></pre>
-
-<p>If your image is scrambled, provide the passphrase to descramble it:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt -passphrase passphrase.txt get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</samp></pre>
-
-<h4>Delete content from the MagickCache</h4>
-<p>We can explicitly delete content:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt delete /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson</samp></pre>
-<p>or we can delete all cast images that have expired (exceeded their respective time to live), try this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt expire /opt/magick-cache movies/image/mission-impossible/cast</samp></pre>
-<h4>Identify the MagickCache content</h4>
-<p>Perhaps you want to identify all the content you own:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt identify /opt/magick-cache movies/image/mission-impossible/cast
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="magick-cache-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#create" class="text-decoration-none text-primary"><i class="bi bi-plus-circle me-1"></i> Create Cache</a>
+ <span class="text-muted">•</span>
+ <a href="#put" class="text-decoration-none text-primary"><i class="bi bi-cloud-upload me-1"></i> Put Content</a>
+ <span class="text-muted">•</span>
+ <a href="#get" class="text-decoration-none text-primary"><i class="bi bi-cloud-download me-1"></i> Get Content</a>
+ <span class="text-muted">•</span>
+ <a href="#delete" class="text-decoration-none text-primary"><i class="bi bi-trash me-1"></i> Delete</a>
+ <span class="text-muted">•</span>
+ <a href="#identify" class="text-decoration-none text-primary"><i class="bi bi-search me-1"></i> Identify</a>
+ <span class="text-muted">•</span>
+ <a href="#security" class="text-decoration-none text-primary"><i class="bi bi-shield-lock me-1"></i> Security</a>
+ </div>
+ </div>
+ <p class="lead text-body-secondary mb-4">
+ The MagickCache provides secure methods and tools to cache images, image sequences, video, audio, or metadata in a local folder. Any content is memory-mapped for efficient retrieval. Additional efficiencies are possible by retrieving a portion of an image. Content can persist or you can assign a time-to-live (TTL) to automatically expire content when the TTL is exceeded. MagickCache supports virtually unlimited content upwards of billions of images, making it suitable as a web image service.
+ </p>
+ <p class="mb-4">
+ The MagickCache works in concert with <a href="../index.html" class="text-decoration-none">ImageMagick</a>. Download the <a href="https://github.com/ImageMagick/MagickCache" rel="noopener noreferrer" target="_blank" class="text-decoration-none">MagickCache <i class="bi bi-box-arrow-up-right small"></i></a> and install it. You will now want to create the cache and populate it with images, video, and associated metadata.
+ </p>
+ <!-- Create a MagickCache -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="create">
+ <a class="anchor text-decoration-none text-body" href="#create">Create a MagickCache</a>
+ </h2>
+
+ <p>You will require a place to store and retrieve your content. Let's create a cache on our local filesystem:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt create /opt/magick-cache</code></pre>
+
+ <div class="alert alert-warning border-0 shadow-sm d-flex align-items-center gap-2 mb-4" role="alert">
+ <i class="bi bi-exclamation-triangle-fill fs-5"></i>
+ <div>
+ <strong>Note:</strong> Where <code>passkey.txt</code> contains your cache passkey. Don't lose your passkey. Without it, you will be unable to identify, expire, or delete content in your cache.
+ </div>
+ </div>
+ <p class="mb-4">You only need to create a MagickCache once. You can, however, create more than one MagickCache with different paths.</p>
+ <p class="mb-4">Once the MagickCache is created, you will want to populate the cache with content that includes images, video, audio, or metadata.</p>
+ <!-- Put content in the MagickCache -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="put">
+ <a class="anchor text-decoration-none text-body" href="#put">Put content in the MagickCache</a>
+ </h2>
+ <p>Let's add a movie cast image to our newly created cache:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache put /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.jpg</code></pre>
+ <p>Note, the image identifier is an IRI composed of <em>project</em>/<em>type</em>/<em>resource-path</em>. In this example, the project is <code>movies</code>, type is <code>image</code>, and the resource path is <code>mission-impossible/cast/rebecca-ferguson</code>. The path uniquely identifies a cache resource. Two different images cannot be stored with the same resource path. Instead use something like <code>mission-impossible/cast/20210508-rebecca-ferguson-1</code> and <code>mission-impossible/cast/20210508-rebecca-ferguson-2</code>.</p>
+ <p class="mt-4">Now, let's set a resource passkey and the time to live to 2 days. Anytime after the second day, the image is automatically deleted with the <code>expire</code> function. To get, expire, or delete the image, you will need to use the same resource passkey:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt -ttl "2 days" put /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.jpg</code></pre>
+ <p>Where <code>passkey.txt</code> contains your resource passkey. Don't lose your passkey. Without it, you will be unable to get, identify, expire or delete resources you own.</p>
+ <p class="mt-4">The resource passkey ensures only you and the cache owner can access your image. To prevent the cache owner from viewing its content, scramble it with:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt -passphrase passphrase.txt -ttl "2 days" put /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.jpg</code></pre>
+ <p class="mb-4">Note, blobs and metadata are stored in the cache in plaintext. To prevent snooping, scramble the content before you store it in the cache.</p>
+ <!-- Get content from the MagickCache -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="get">
+ <a class="anchor text-decoration-none text-body" href="#get">Get content from the MagickCache</a>
+ </h2>
+ <p>Eventually you will want retrieve your content, let's get our original cast image from the cache:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</code></pre>
+ <p>Notice the original image was put in the cache in the JPEG format. Here we conveniently convert it to the PNG format as we extract the image.</p>
+ <p class="mt-3">The <code>-extract</code> option is useful when retrieving an image. To extract a portion of the image, specify tile width, height, and offset:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt -extract 100x100+0+0 get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</code></pre>
+ <p class="mt-3">To resize instead, do not specify the offset:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt -extract 100x100 get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</code></pre>
+ <p class="mt-3">If your image is scrambled, provide the passphrase to descramble it:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt -passphrase passphrase.txt get /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson rebecca-ferguson.png</code></pre>
+ <!-- Delete content from the MagickCache -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="delete">
+ <a class="anchor text-decoration-none text-body" href="#delete">Delete content from the MagickCache</a>
+ </h2>
+ <p>We can explicitly delete content:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt delete /opt/magick-cache movies/image/mission-impossible/cast/rebecca-ferguson</code></pre>
+ <p>or we can delete all cast images that have expired (exceeded their respective time to live), try this command:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt expire /opt/magick-cache movies/image/mission-impossible/cast</code></pre>
+ <!-- Identify the MagickCache content -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="identify">
+ <a class="anchor text-decoration-none text-body" href="#identify">Identify the MagickCache content</a>
+ </h2>
+ <p>Perhaps you want to identify all the content you own:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt identify /opt/magick-cache movies/image/mission-impossible/cast
movies/image/mission-impossible/cast/rebecca-ferguson[1368x912] 406B 1:0:0:0 2021-05-30T17:41:42Z
-identified 1 resources</samp></pre>
-<p>Each entry includes the IRI, image dimensions for images, the content extent in bytes, time to live, whether the resource is expired (denoted with a `*`), and the creation date.</p>
-<p>Others can store content in the cache along side your content. However, their content is unavailable to you. You cannot get, identify, expire or delete content that you do not own as determined by your secret passkey.</p>
-<p>The MagickCache owner can get, identify, expire, or delete all the content, including content you own, with this command, for example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt identify /opt/magick-cache /</samp></pre>
-<p>Note, expired resources are annotated with an asterisks.</p>
-<h4>MagickCache is not just for Images</h4>
-<p>In addition to a type of <code>image</code>, you can store the image content in its original form, video, or audio as content type of <code>blob</code> or metadata with a content type of <code>meta</code>:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt put /opt/magick-cache movies/blob/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.mp4</samp></pre>
-<p> or</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt put /opt/magick-cache movies/meta/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.txt</samp></pre>
-<p>Images must be in a format that ImageMagick understands. Metadata must be text. Blobs can be any content including images, video, audio, or binary files.</p>
-<h4>Delete a MagickCache</h4>
-<p>The MagickCache owner can completely delete all the content within a cache:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick-cache -passkey passkey.txt delete /opt/magick-cache /</samp></pre>
-<p>Be careful, after this command, your cached content is irrevocably lost.</p>
-<h4>Security</h4>
-<p>MagickCache security is not cryptographically strong. Instead it generates a unique hash for each resource ensuring the resource ID cannot be discovered. A resource is accessible to both the user of the cache and the cache owner provided they can present their respective passkeys. They are also accessible to anyone with sufficient privileges to access the MagickCache disk path.</p>
+identified 1 resources</code></pre>
+ <p>Each entry includes the IRI, image dimensions for images, the content extent in bytes, time to live, whether the resource is expired (denoted with a <code>*</code>), and the creation date.</p>
+ <p class="mt-3">Others can store content in the cache alongside your content. However, their content is unavailable to you. You cannot get, identify, expire or delete content that you do not own as determined by your secret passkey.</p>
+ <p class="mt-3">The MagickCache owner can get, identify, expire, or delete all the content, including content you own, with this command, for example:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt identify /opt/magick-cache /</code></pre>
+ <p class="mb-4">Note, expired resources are annotated with an asterisk.</p>
+ <!-- MagickCache is not just for Images -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="other-content">
+ <a class="anchor text-decoration-none text-body" href="#other-content">MagickCache is not just for Images</a>
+ </h2>
+ <p>In addition to a type of <code>image</code>, you can store the image content in its original form, video, or audio as a content type of <code>blob</code> or metadata with a content type of <code>meta</code>:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt put /opt/magick-cache movies/blob/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.mp4</code></pre>
+ <p class="text-center fw-bold my-2">or</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt put /opt/magick-cache movies/meta/mission-impossible/cast/rebecca-ferguson 20210508-rebecca-ferguson.txt</code></pre>
+ <p class="mb-4">Images must be in a format that ImageMagick understands. Metadata must be text. Blobs can be any content including images, video, audio, or binary files.</p>
+ <!-- Delete a MagickCache -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="delete-cache">
+ <a class="anchor text-decoration-none text-body" href="#delete-cache">Delete a MagickCache</a>
+ </h2>
+ <p>The MagickCache owner can completely delete all the content within a cache:</p>
+
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ magick-cache -passkey passkey.txt delete /opt/magick-cache /</code></pre>
+ <div class="alert alert-danger border-0 shadow-sm d-flex align-items-center gap-2 mb-4" role="alert">
+ <i class="bi bi-exclamation-octagon-fill fs-5"></i>
+ <div>
+ <strong>Warning:</strong> Be careful, after this command, your cached content is irrevocably lost.
+ </div>
+ </div>
+ <!-- Security -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="security">
+ <a class="anchor text-decoration-none text-body" href="#security">Security</a>
+ </h2>
+ <p class="mb-0">
+ MagickCache security is not cryptographically strong. Instead, it generates a unique hash for each resource ensuring the resource ID cannot be discovered. A resource is accessible to both the user of the cache and the cache owner provided they can present their respective passkeys. They are also accessible to anyone with sufficient privileges to access the MagickCache disk path.
+ </p>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/magick-core/index.html b/www/magick-core/index.html
index 0091eef3e..46a657d58 100644
--- a/www/magick-core/index.html
+++ b/www/magick-core/index.html
@@ -11,289 +11,420 @@
<meta name="description" content="Explore ImageMagick’s MagickCore API, a powerful C library for image processing. Learn functions for reading, writing, transforming, and analyzing images with cross‑platform support and advanced features.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | MagickCore, Low-level C API">
<meta property="og:description" content="Explore ImageMagick’s MagickCore API, a powerful C library for image processing. Learn functions for reading, writing, transforming, and analyzing images with cross‑platform support and advanced features.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | MagickCore, Low-level C API">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | MagickCore, Low-level C API",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick-core/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore ImageMagick’s MagickCore API, a powerful C library for image processing. Learn functions for reading, writing, transforming, and analyzing images with cross‑platform support and advanced features.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick-core/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick-core/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">MagickCore, Low-level C API</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">MagickCore, Low-level C API</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore ImageMagick’s MagickCore API, a powerful C library for image processing. Learn functions for reading, writing, transforming, and analyzing images with cross‑platform support and advanced features.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ The <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickCore">MagickCore API</a> is a low-level interface between the C programming language and ImageMagick's core processing libraries. Designed for wizard-level programmers, MagickCore gives you direct access to structure members—unlike the <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickWand">MagickWand</a> C API, which uses opaque types and accessors.
+ </p>
+ </div>
+ </div>
+
+ <!-- API Index Reference -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">MagickCore Public Methods Reference</h2>
+ <p class="text-muted small">Explore headers and function definitions directly on GitHub:</p>
+
+ <div class="card border-0 bg-body-tertiary shadow-sm mb-4">
+ <div class="card-body p-3">
+ <div class="row g-2 small">
+ <div class="col-md-6 col-lg-4">
+ <ul class="list-unstyled mb-0">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/magick.h" class="text-decoration-none">• Environment Init & Destroy</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/constitute.h" class="text-decoration-none">• Constitute an Image</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/composite.h" class="text-decoration-none">• Composite an Image</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/image.h" class="text-decoration-none">• Core Image Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/channel.h" class="text-decoration-none">• Image Channel Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/color.h" class="text-decoration-none">• Count Image Colors</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/colormap.h" class="text-decoration-none">• Colormap Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/colorspace.h" class="text-decoration-none">• Colorspace Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/distort.h" class="text-decoration-none">• Image Distortions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/layer.h" class="text-decoration-none">• Dealing with Layers</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/profile.h" class="text-decoration-none">• Image Profiles</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/quantize.h" class="text-decoration-none">• Quantize & Color Reduction</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/histogram.h" class="text-decoration-none">• Image Histograms</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/segment.h" class="text-decoration-none">• Fuzzy c-Means Segmentation</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/resize.h" class="text-decoration-none">• Resize Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/transform.h" class="text-decoration-none">• Transform Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/shear.h" class="text-decoration-none">• Shear or Rotate</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/enhance.h" class="text-decoration-none">• Enhance Methods</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <ul class="list-unstyled mb-0">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/effect.h" class="text-decoration-none">• Add Effects</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/morphology.h" class="text-decoration-none">• Morphology Operations</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/fx.h" class="text-decoration-none">• Special Effects (FX)</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/decorate.h" class="text-decoration-none">• Decorate Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/attribute.h" class="text-decoration-none">• Get/Set Attributes</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/property.h" class="text-decoration-none">• Get/Set Properties</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/statistic.h" class="text-decoration-none">• Image Statistics</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/feature.h" class="text-decoration-none">• Image Features</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/annotate.h" class="text-decoration-none">• Annotate Image</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/paint.h" class="text-decoration-none">• Paint Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/draw.h" class="text-decoration-none">• Vector Drawing</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/montage.h" class="text-decoration-none">• Thumbnails & Montage</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/fourier.h" class="text-decoration-none">• Discrete Fourier Transform</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/compare.h" class="text-decoration-none">• Compare Images</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/vision.h" class="text-decoration-none">• Computer Vision</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/display.h" class="text-decoration-none">• Interactive Display/Edit</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/animate.h" class="text-decoration-none">• Interactive Animation</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cipher.h" class="text-decoration-none">• Cipher Pixels</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <ul class="list-unstyled mb-0">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/list.h" class="text-decoration-none">• Image Lists</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/image-view.h" class="text-decoration-none">• Image Views</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cache.h" class="text-decoration-none">• Pixel Cache</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cache-view.h" class="text-decoration-none">• Cache Views</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/stream.h" class="text-decoration-none">• Pixel FIFO Stream</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/blob.h" class="text-decoration-none">• Binary Large OBjects (BLOB)</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/module.h" class="text-decoration-none">• Loadable Modules</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/signature.h" class="text-decoration-none">• Message Digest Signature</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/registry.h" class="text-decoration-none">• Image Registry</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/exception.h" class="text-decoration-none">• Exception Handling</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/memory_.h" class="text-decoration-none">• Memory Allocation</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/resource_.h" class="text-decoration-none">• Resource Limits</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/monitor.h" class="text-decoration-none">• Progress Monitoring</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/version.h.in" class="text-decoration-none">• Version & Copyright</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/mime.h" class="text-decoration-none">• MIME Type Methods</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/deprecate.h" class="text-decoration-none">• Deprecated Methods</a></li>
+ <li><a href="https://imagemagick.org/exception/" class="text-decoration-none">• Error & Warning Codes</a></li>
+ </ul>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </section>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">The <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickCore">MagickCore API</a> is a low-level interface between the C programming language and the ImageMagick image processing libraries and is recommended for wizard-level programmers only. Unlike the <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickWand">MagickWand</a> C API which uses only a few opaque types and accessors, with MagickCore you almost exclusively access the structure members directly. A description of the MagickCore public methods are found on GitHub:</p>
-
-<ul>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/magick.h">Initialize or Destroy the ImageMagick Environment</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/constitute.h">Constitute an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/composite.h">Composite an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/image.h">Image Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/channel.h">Image Channel Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/color.h">Count the Colors in an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/colormap.h">Colormap Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/colorspace.h">Colorspace Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/distort.h">Image Distortions</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/layer.h">Dealing with Image Layers</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/profile.h">Dealing with Image Profiles</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/quantize.h">Reduce the Number of Unique Colors in an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/histogram.h">Image Histograms</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/segment.h">Segment an Image with Thresholding Fuzzy c-Means</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/resize.h">Resize an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/transform.h">Transform an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/shear.h">Shear or Rotate an Image by an Arbitrary Angle</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/enhance.h">Enhance an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/effect.h">Add an Effect</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/morphology.h">Morphological Erosions, Dilations, Openings, and Closings</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/fx.h">Add a Special Effect</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/decorate.h">Decorate an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/attribute.h">Get/Set an Image Attribute</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/property.h">Get/Set Image Properties</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/statistic.h">Get Image Statistics</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/feature.h">Get Image Features</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/annotate.h">Annotate an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/paint.h">Paint on an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/draw.h">Draw on an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/montage.h">Create an Image Thumbnail</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/fourier.h">Compute the discrete Fourier transform (DFT)</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/compare.h">Compare an Image to a Reconstructed Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/vision.h">Computer Vision</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/display.h">Interactively Display and Edit an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/animate.h">Interactively Animate an Image Sequence</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cipher.h">Convert to and from Cipher Pixels</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/list.h">Working with Image Lists</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/image-view.h">Image View Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cache.h">Get or Set Image Pixels</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/cache-view.h">Working with Cache Views</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/stream.h">The Pixel FIFO</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/blob.h">Read or Write Binary Large OBjects</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/module.h">Loadable Modules</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/signature.h">Compute a Message Digest for an Image</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/registry.h">The Image Registry</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/exception.h">Dealing with Exceptions</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/memory_.h">Memory Allocation</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/resource_.h">Monitor or Limit Resource Consumption</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/monitor.h">Monitor the Progress of an Image Operation</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/version.h.in">Get the Version and Copyrights</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/mime.h">Mime Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/deprecate.h">Deprecated Methods</a></li>
- <li><a href="https://imagemagick.org/exception/">Error and Warning Codes</a></li>
-</ul>
-
-<p>After you write your MagickCore program, compile it like this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ cc `MagickCore-config --cflags --cppflags` -O2 -o core core.c `MagickCore-config --ldflags --libs`</samp></pre>
-
-<p>Set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig </samp></pre>
-
-<p>Here is a example program that utilizes the MagickCore API to get you started, <a href="https://imagemagick.org/source/core.c">core.c</a>. It reads a GIF image, creates a thumbnail, and writes it to disk in the PNG image format.</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <stdio.h>
-#include <stdlib.h>
-#include <string.h>
-#include <time.h>
-#include <MagickCore/MagickCore.h>
+ <!-- Compilation & Environment Setup -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Compiling MagickCore Programs</h2>
+ <p>Compile your MagickCore C program using <code>MagickCore-config</code> flags:</p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ cc `MagickCore-config --cflags --cppflags` -O2 -o core core.c `MagickCore-config --ldflags --libs`</samp></pre>
+ </div>
+ </div>
+
+ <p class="small text-muted">If ImageMagick is installed outside your system's default path, export <code>PKG_CONFIG_PATH</code>:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig</samp></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- Code Examples Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Code Examples</h2>
+
+ <h3 class="h5 mt-4 mb-3">Example 1: Basic Image Resizing (<a href="https://imagemagick.org/source/core.c">core.c</a>)</h3>
+ <p>This example reads a GIF image, resizes it into a thumbnail, and writes it back as a PNG file:</p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-4">
+ <div class="card-body p-0">
+ <pre class="overflow-auto p-3 mb-0 font-monospace text-body-secondary small" style="max-height: 60vh;"><code>#include <stdio.h>
+#include <stdlib.h>
+#include <string.h>
+#include <time.h>
+#include <MagickCore/MagickCore.h>
int main(int argc,char **argv)
{
@@ -352,12 +483,20 @@ int main(int argc,char **argv)
MagickCoreTerminus();
return(0);
}</code></pre>
-<p><a class="anchor" id="image-view"></a>Now lets perform the same contrast enhancement while taking advantage of our dual or quad-core processing system by running the algorithm in parallel utilizing wand views. The <a href="https://imagemagick.org/source/core/sigmoidal-contrast.c">sigmoidal-contrast.c</a> module reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk just like the previous contrast enhancement program, but now it does its work in parallel (assumes ImageMagick is built with OpenMP support).</p>
+ </div>
+ </div>
+
+ <h3 class="h5 mt-4 mb-3" id="image-view">Example 2: Parallel Processing with Wand Views (<a href="https://imagemagick.org/source/core/sigmoidal-contrast.c">sigmoidal-contrast.c</a>)</h3>
+ <p>
+ This program applies sigmoidal non-linearity contrast control across multicore systems in parallel using OpenMP-backed Wand Views:
+ </p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <stdio.h>
-#include <stdlib.h>
-#include <math.h>
-#include <MagickCore/MagickCore.h>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-4">
+ <div class="card-body p-0">
+ <pre class="overflow-auto p-3 mb-0 font-monospace text-body-secondary small" style="max-height: 60vh;"><code>#include <stdio.h>
+#include <stdlib.h>
+#include <math.h>
+#include <MagickCore/MagickCore.h>
static MagickBooleanType SigmoidalContrast(ImageView *contrast_view,
const ssize_t y,const int id,void *context)
@@ -382,10 +521,10 @@ static MagickBooleanType SigmoidalContrast(ImageView *contrast_view,
pixels=GetImageViewAuthenticPixels(contrast_view);
for (x=0; x < (ssize_t) (extent.width-extent.x); x++)
{
- SetPixelRed(pixels,RoundToQuantum(SigmoidalContrast(GetPixelRed(pixels)));
- SetPixelGreen(pixels,RoundToQuantum(SigmoidalContrast(GetPixelGreen(pixels)));
- SetPixelBlue(pixels,RoundToQuantum(SigmoidalContrast(GetPixelBlue(pixels)));
- SetPixelOpacity(pixels,RoundToQuantum(SigmoidalContrast(GetPixelOpacity(pixels)));
+ SetPixelRed(pixels,RoundToQuantum(SigmoidalContrast(GetPixelRed(pixels))));
+ SetPixelGreen(pixels,RoundToQuantum(SigmoidalContrast(GetPixelGreen(pixels))));
+ SetPixelBlue(pixels,RoundToQuantum(SigmoidalContrast(GetPixelBlue(pixels))));
+ SetPixelOpacity(pixels,RoundToQuantum(SigmoidalContrast(GetPixelOpacity(pixels))));
pixels++;
}
indexes=GetImageViewAuthenticIndexes(contrast_view);
@@ -399,7 +538,6 @@ int main(int argc,char **argv)
{
#define ThrowImageException(image) \
{ \
- \
CatchException(exception); \
if (contrast_image != (Image *) NULL) \
contrast_image=DestroyImage(contrast_image); \
@@ -409,10 +547,8 @@ int main(int argc,char **argv)
{ \
char \
*description; \
- \
ExceptionType \
severity; \
- \
description=GetImageViewException(view,&severity); \
(void) fprintf(stderr,"%s %s %lu %s\n",GetMagickModule(),description); \
description=DestroyString(description); \
@@ -444,7 +580,7 @@ int main(int argc,char **argv)
*/
MagickCoreGenesis(*argv,MagickTrue);
image_info=AcquireImageInfo();
- (void) CopyMagickString(image_info->filename,argv[1],MaxTextExtent);
+ (void) CopyMagickString(image_info->filename,argv[1],MaxTextExtent);
exception=AcquireExceptionInfo();
contrast_image=ReadImage(image_info,exception);
if (contrast_image == (Image *) NULL)
@@ -471,74 +607,123 @@ int main(int argc,char **argv)
MagickCoreTerminus();
return(0);
}</code></pre>
-<p><code>MagickCoreTerminus()</code> is a function in the ImageMagick library that is used to clean up and release resources when shutting down an application that uses ImageMagick. This function should be called in the primary thread of the application's process during the shutdown process. It's crucial that this function is invoked only after any threads that are using ImageMagick functions have terminated.</p>
-
-<p>ImageMagick might internally use threads via OpenMP (a method for parallel programming). As a result, it's important to ensure that any function calls into ImageMagick have completed before calling <code>MagickCoreTerminus()</code>. This prevents issues with OpenMP worker threads accessing resources that are destroyed by this termination function.</p>
-
-<p>If OpenMP is being used (starting from version 5.0), the OpenMP implementation itself handles starting and stopping worker threads and allocating and freeing resources using its own methods. This means that after calling <code>MagickCoreTerminus()</code>, some OpenMP resources and worker threads might still remain allocated. To address this, the function <code>omp_pause_resource_all(omp_pause_hard)</code> can be invoked. This function, introduced in OpenMP version 5.0, ensures that any resources allocated by OpenMP (such as threads and thread-specific memory) are freed. It's recommended to call this function after <code>MagickCoreTerminus()</code> has completed its execution.</p>
+ </div>
+ </div>
+ </section>
+
+ <!-- Cleanup & OpenMP Resource Termination -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Resource Cleanup and OpenMP Considerations</h2>
+ <p>
+ The <code>MagickCoreTerminus()</code> function cleans up and releases internal resources upon application shutdown. Call this in the main application thread only after all secondary worker threads using ImageMagick functions have completed.
+ </p>
+
+ <div class="card border-0 bg-body-tertiary shadow-sm mb-3">
+ <div class="card-body">
+ <h4 class="h6 fw-bold mb-2">OpenMP Resource Deallocation (v5.0+)</h4>
+ <p class="small text-muted mb-0">
+ When OpenMP threading is used, the runtime handles worker thread lifecycles and thread-local memory allocation. Consequently, some OpenMP worker threads and memory allocations may persist after <code>MagickCoreTerminus()</code> completes. To release these remaining resources, call <code>omp_pause_resource_all(omp_pause_hard)</code> immediately following <code>MagickCoreTerminus()</code>.
+ </p>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/magick-script/index.html b/www/magick-script/index.html
index 5680f0082..1cc1ec7d7 100644
--- a/www/magick-script/index.html
+++ b/www/magick-script/index.html
@@ -8,1494 +8,1413 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Magick-script</title>
- <meta name="description" content="">
+ <meta name="description" content="Use the magick-script scripting language to convert, resize, blur, crop, and manipulate images using ImageMagick command scripts.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Magick-script">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Use the magick-script scripting language to convert, resize, blur, crop, and manipulate images using ImageMagick command scripts.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Magick-script">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Magick-script",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick-script/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use the magick-script scripting language to convert, resize, blur, crop, and manipulate images using ImageMagick command scripts.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link active" href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick-script/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick-script/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Magick-script</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Use the <samp>$ magick-script</code> scripting language to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>magick</samp> command or see below for example usages of the command.</p>
-
-<p>Here is an example script:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>#!/bin/env magick-script
--size 100x100 xc:red ( rose: -rotate -90 ) +append -write show:
-</code></pre>
-
-<p>Or use the <samp>$ magick</samp> utility with the scripting option like this:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"></code>#!/bin/magick -script
--size 100x100 xc:red ( rose: -rotate -90 ) +append -write show:
-</code></pre>
-
-<p>You can find additional examples of using <samp>$ magick-script</samp> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <samp>$ magick</samp> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
- <td>adaptively blur pixels; decrease effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-resize">-adaptive-resize <var>geometry</var></a></td>
- <td>adaptively resize image with data dependent triangulation.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-sharpen">-adaptive-sharpen <var>geometry</var></a></td>
- <td>adaptively sharpen pixels; increase effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#affine">-affine <var>matrix</var></a></td>
- <td>affine transform matrix</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#annotate">-annotate <var>geometry text</var></a></td>
- <td>annotate the image with text</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#append">-append</a></td>
- <td>append an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decipher image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-gamma">-auto-gamma</a></td>
- <td>automagically adjust gamma level of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-level">-auto-level</a></td>
- <td>automagically adjust color levels of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bench">-bench <var>iterations</var></a></td>
- <td>measure performance</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bias">-bias <var>value</var></a></td>
- <td>add bias when convolving an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#black-threshold">-black-threshold <var>value</var></a></td>
- <td>force all pixels below the threshold into black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-primary">-blue-primary <var>point</var></a></td>
- <td>chromaticity blue primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-shift">-blue-shift <var>factor</var></a></td>
- <td>simulate a scene at nighttime in the moonlight</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blur">-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#brightness-contrast">-brightness-contrast <var>geometry</var></a></td>
- <td>improve brightness / contrast of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#canny">-canny <var>geometry</var></a></td>
- <td>use a multi-stage algorithm to detect a wide range of edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#caption">-caption <var>string</var></a></td>
- <td>assign a caption to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cdl">-cdl <var>filename</var></a></td>
- <td>color correct with a color decision list</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#charcoal">-charcoal <var>radius</var></a></td>
- <td>simulate a charcoal drawing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#chop">-chop <var>geometry</var></a></td>
- <td>remove pixels from the image interior</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clamp">-clamp</a></td>
- <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-mask">-clip-mask</a> <var>filename</var></td>
- <td>associate clip mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clone">-clone <var>index</var></a></td>
- <td>clone an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clut">-clut</a></td>
- <td>apply a color lookup table to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#connected-components">-connected-components <var>connectivity</var></a></td>
- <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast-stretch">-contrast-stretch <var>geometry</var></a></td>
- <td>improve the contrast in an image by `stretching' the range of intensity value</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorize">-colorize <var>value</var></a></td>
- <td>colorize the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#color-matrix">-color-matrix <var>matrix</var></a></td>
- <td>apply color correction to the image.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#combine">-combine</a></td>
- <td>combine a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compare">-compare</a></td>
- <td>compare image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#complex">-complex<var>operator</var></a></td>
- <td>perform complex mathematics on an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#composite">-composite</a></td>
- <td>composite image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#convolve">-convolve <var>coefficients</var></a></td>
- <td>apply a convolution kernel to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#copy">-copy <var>geometry</var> <var>offset</var></a></td>
- <td>copy pixels from one area of an image to another</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>crop the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cycle">-cycle <var>amount</var></a></td>
- <td>cycle the image colormap</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#deconstruct">-deconstruct</a></td>
- <td>break down an image sequence into constituent parts</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>display the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delete">-delete <var>index</var></a></td>
- <td>delete the image from the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-despeckle</a></td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#direction">-direction <var>type</var></a></td>
- <td>render text right-to-left or left-to-right</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distribute-cache">-distribute-cache <var>port</var></a></td>
- <td>launch a distributed pixel cache server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distort">-distort <var>type coefficients</var></a></td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#draw">-draw <var>string</var></a></td>
- <td>annotate the image with a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#duplicate">-duplicate <var>count,indexes</var></a></td>
- <td>duplicate an image one or more times</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#edge">-edge <var>radius</var></a></td>
- <td>apply a filter to detect edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#emboss">-emboss <var>radius</var></a></td>
- <td>emboss an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encoding">-encoding <var>type</var></a></td>
- <td>text encoding type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#enhance">-enhance</a></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#equalize">-equalize</a></td>
- <td>perform histogram equalization to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate">-evaluate <var>operator value</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate-sequence">-evaluate-sequence <var>operator</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression for an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extent">-extent <var>geometry</var></a></td>
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#family">-family <var>name</var></a></td>
- <td>render text with this font family</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#features">-features <var>distance</var></a></td>
- <td>analyze image features (e.g. contract, correlations, etc.).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fft">-fft</a></td>
- <td>implements the discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fill">-fill <var>color</var></a></td>
- <td>color to use when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#floodfill">-floodfill <var>geometry color</var></a></td>
- <td>floodfill the image with color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#font">-font <var>name</var></a></td>
- <td>render text with this font</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#format_identify_">-format <var>string</var></a></td>
- <td>output formatted image characteristics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#function">-function <var>name</var></a></td>
- <td>apply a function to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fuzz">-fuzz <var>distance</var></a></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fx">-fx <var>expression</var></a></td>
- <td>apply mathematical expression to an image channel(s)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gaussian-blur">-gaussian-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#grayscale">-grayscale <var>method</var></a></td>
- <td>convert image to grayscale</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#green-primary">-green-primary <var>point</var></a></td>
- <td>chromaticity green primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#hough-lines">-hough-lines <var>geometry</var></a></td>
- <td>identify lines in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ift">-ift</a></td>
- <td>implements the inverse discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#implode">-implode <var>amount</var></a></td>
- <td>implode image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#insert">-insert <var>index</var></a></td>
- <td>insert last image into the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intensity">-intensity <var>method</var></a></td>
- <td>method to generate an intensity value from a pixel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intent">-intent <var>type</var></a></td>
- <td>type of rendering intent when managing the image color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interline-spacing">-interline-spacing <var>value</var></a></td>
- <td>the space between two text lines</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interword-spacing">-interword-spacing <var>value</var></a></td>
- <td>the space between two words</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kerning">-kerning <var>value</var></a></td>
- <td>the space between two characters</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kuwahara">-kuwahara <var>geometry</var></a></td>
- <td>edge preserving noise reduction filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>string</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#lat">-lat <var>geometry</var></a></td>
- <td>local adaptive thresholding</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#layers">-layers <var>method</var></a></td>
- <td>optimize or compare image layers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#level">-level <var>value</var></a></td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#linear-stretch">-linear-stretch <var>geometry</var></a></td>
- <td>linear with saturation histogram stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#liquid-rescale">-liquid-rescale <var>geometry</var></a></td>
- <td>rescale image with seam-carving</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#list">-list <var>type</var></a></td>
- <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#loop">-loop <var>iterations</var></a></td>
- <td>add Netscape loop extension to your GIF animation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mask">-mask <var>filename</var></a></td>
- <td>associate a mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#median">-median <var>radius</var></a></td>
- <td>apply a median filter to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mean-shift">-mean-shift <var>geometry</var></a></td>
- <td>delineate arbitrarily shaped clusters in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#metric">-metric <var>type</var></a></td>
- <td>measure differences between images with this metric</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mode">-mode <var>radius</var></a></td>
- <td>make each pixel the 'predominant color' of the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#modulate">-modulate <var>value</var></a></td>
- <td>vary the brightness, saturation, and hue</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#moments">-moments</a></td>
- <td>display image moments.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morph">-morph <var>value</var></a></td>
- <td>morph an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morphology">-morphology <var>method</var></a> <var>kernel</var></td>
- <td>apply a morphology method to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#motion-blur">-motion-blur <var>geometry</var></a></td>
- <td>simulate motion blur</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#noise">-noise <var>radius</var></a></td>
- <td>add or reduce noise in an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#normalize">-normalize</a></td>
- <td>transform image to span the full range of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#opaque">-opaque <var>color</var></a></td>
- <td>change this color to the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ordered-dither">-ordered-dither <var>NxN</var></a></td>
- <td>ordered dither the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#orient">-orient <var>type</var></a></td>
- <td>image orientation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#paint">-paint <var>radius</var></a></td>
- <td>simulate an oil painting</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#perceptible">-perceptible</a></td>
- <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ping">-ping</a></td>
- <td>efficiently determine image attributes</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pointsize">-pointsize <var>value</var></a></td>
- <td>font point size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#polaroid">-polaroid <var>angle</var></a></td>
- <td>simulate a Polaroid picture</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#poly">-poly <var>terms</var></a></td>
- <td>build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#posterize">-posterize <var>levels</var></a></td>
- <td>reduce the image to a limited number of color levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#precision">-precision <var>value</var></a></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#preview">-preview <var>type</var></a></td>
- <td>image preview type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#print">-print <var>string</var></a></td>
- <td>interpret string and print to console</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#process">-process <var>image-filter</var></a></td>
- <td>process the image with a custom image filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotational-blur">-rotational-blur <var>angle</var></a></td>
- <td>radial blur the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#raise">-raise <var>value</var></a></td>
- <td>lighten/darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#random-threshold">-random-threshold <var>low,high</var></a></td>
- <td>random threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#red-primary">-red-primary <var>point</var></a></td>
- <td>chromaticity red primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#region">-region <var>geometry</var></a></td>
- <td>apply options to a portion of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#remap">-remap <var>filename</var></a></td>
- <td>transform image colors to match this set of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#render">-render</a></td>
- <td>render vector graphics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resample">-resample <var>geometry</var></a></td>
- <td>change the resolution of an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#roll">-roll <var>geometry</var></a></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sample">-sample <var>geometry</var></a></td>
- <td>scale image with pixel sampling</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scale">-scale <var>geometry</var></a></td>
- <td>scale the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#segment">-segment <var>values</var></a></td>
- <td>segment an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-selective-blur <var>geometry</var></a></td>
- <td>selectively blur pixels within a contrast threshold</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#separate">-separate</a></td>
- <td>separate an image channel into a grayscale image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sepia-tone">-sepia-tone <var>threshold</var></a></td>
- <td>simulate a sepia-toned photo</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shade">-shade <var>degrees</var></a></td>
- <td>shade the image using a distant light source</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shadow">-shadow <var>geometry</var></a></td>
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shave">-shave <var>geometry</var></a></td>
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shear">-shear <var>geometry</var></a></td>
- <td>slide one edge of the image along the X or Y axis</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sigmoidal">-sigmoidal-contrast <var>geometry</var></a></td>
- <td>increase the contrast without saturating highlights or shadows</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#smush">-smush <var>offset</var></a></td>
- <td>smush an image sequence together</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sketch">-sketch <var>geometry</var></a></td>
- <td>simulate a pencil sketch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#solarize">-solarize <var>threshold</var></a></td>
- <td>negate all pixels above the threshold level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#splice">-splice <var>geometry</var></a></td>
- <td>splice the background color into the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#spread">-spread <var>radius</var></a></td>
- <td>displace image pixels by a random amount</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#statistic">-statistic <var>type</var> <var>geometry</var></a></td>
- <td>replace each pixel with corresponding statistic from the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stroke">-stroke <var>color</var></a></td>
- <td>graphic primitive stroke color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strokewidth">-strokewidth <var>value</var></a></td>
- <td>graphic primitive stroke width</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stretch">-stretch <var>type</var></a></td>
- <td>render text with this font stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#style">-style <var>type</var></a></td>
- <td>render text with this font style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swap">-swap <var>indexes</var></a></td>
- <td>swap two images in the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swirl">-swirl <var>degrees</var></a></td>
- <td>swirl image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#texture">-texture <var>filename</var></a></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-threshold <var>value</var></a></td>
- <td>threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile">-tile <var>filename</var></a></td>
- <td>tile image when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile-offset">-tile-offset <var>geometry</var></a></td>
- <td>set the image tile offset</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tint">-tint <var>value</var></a></td>
- <td>tint the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transform">-transform</a></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent">-transparent <var>color</var></a></td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transpose">-transpose</a></td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transverse">-transverse</a></td>
- <td>flop image in the horizontal direction and rotate 270 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#treedepth">-treedepth <var>value</var></a></td>
- <td>color tree depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#type">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#undercolor">-undercolor <var>color</var></a></td>
- <td>annotation bounding box color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unique-colors">-unique-colors</a></td>
- <td>discard all but one of any pixel color.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unsharp">-unsharp <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#view">-view</a></td>
- <td>FlashPix viewing transforms</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#vignette">-vignette <var>geometry</var></a></td>
- <td>soften the edges of the image in vignette style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#wave">-wave <var>geometry</var></a></td>
- <td>alter an image along a sine wave</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#wavelet">-wavelet-denoise <var>threshold</var></a></td>
- <td>removes noise from the image using a wavelet transform</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#weight">-weight <var>type</var></a></td>
- <td>render text with this font weight</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-point">-white-point <var>point</var></a></td>
- <td>chromaticity white point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-threshold">-white-threshold <var>value</var></a></td>
- <td>force all pixels above the threshold into white</td>
- </tr>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Magick-script</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use the magick-script scripting language to convert, resize, blur, crop, and manipulate images using ImageMagick command scripts.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#write">-write <var>filename</var></a></td>
- <td>write images to this file</td>
- </tr>
-</table>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="card im-card p-4 p-md-5 mb-4 shadow-sm">
+ <p class="lead mb-4">
+ Use the <code class="text-primary fw-semibold">$ magick-script</code> scripting language to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. See <a href="../command-line-processing/index.html" class="text-decoration-none fw-semibold">Command Line Processing</a> for advice on how to structure your <code>magick</code> command or see below for example usages of the command.
+ </p>
+ <h3 class="h5 fw-bold mb-3 text-body">Example Scripts</h3>
+ <p class="text-body-secondary small mb-2">Here is an example script:</p>
+
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">script.ms</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <code>#!/bin/env magick-script<br>
+-size 100x100 xc:red ( rose: -rotate -90 ) +append -write show:</code>
+ </div>
+ </div>
+ <p class="text-body-secondary small mb-2">Or use the <code class="text-body font-mono">$ magick</code> utility with the scripting option like this:</p>
+
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">command.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <code>#!/bin/magick -script<br>
+-size 100x100 xc:red ( rose: -rotate -90 ) +append -write show:</code>
+ </div>
+ </div>
+ <p class="mb-0">
+ You can find additional examples of using <code class="text-body font-mono">$ magick-script</code> in <a href="https://usage.imagemagick.org/" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-semibold">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
</div>
+<div class="card im-card p-4 p-md-5 shadow-sm">
+ <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
+ <div>
+ <h2 class="h3 fw-bold mb-1" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">Option Summary</a>
+ </h2>
+ <p class="text-body-secondary mb-0 small">The <code class="font-mono">$ magick</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
+ </div>
+ </div>
+ <div class="table-responsive rounded border border-secondary-subtle" style="max-height: 75svh; overflow-y: auto;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <colgroup>
+ <col style="width: 35%;">
+ <col style="width: 65%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th scope="col">Option</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-blur" class="text-decoration-none fw-medium">-adaptive-blur <var>geometry</var></a></td>
+ <td>adaptively blur pixels; decrease effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-resize" class="text-decoration-none fw-medium">-adaptive-resize <var>geometry</var></a></td>
+ <td>adaptively resize image with data dependent triangulation.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-sharpen" class="text-decoration-none fw-medium">-adaptive-sharpen <var>geometry</var></a></td>
+ <td>adaptively sharpen pixels; increase effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adjoin" class="text-decoration-none fw-medium">-adjoin</a></td>
+ <td>join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#affine" class="text-decoration-none fw-medium">-affine <var>matrix</var></a></td>
+ <td>affine transform matrix</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="text-decoration-none fw-medium">-alpha</a></td>
+ <td>on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#annotate" class="text-decoration-none fw-medium">-annotate <var>geometry text</var></a></td>
+ <td>annotate the image with text</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#antialias" class="text-decoration-none fw-medium">-antialias</a></td>
+ <td>remove pixel-aliasing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#append" class="text-decoration-none fw-medium">-append</a></td>
+ <td>append an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="text-decoration-none fw-medium">-authenticate <var>value</var></a></td>
+ <td>decipher image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-gamma" class="text-decoration-none fw-medium">-auto-gamma</a></td>
+ <td>automagically adjust gamma level of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-level" class="text-decoration-none fw-medium">-auto-level</a></td>
+ <td>automagically adjust color levels of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-orient" class="text-decoration-none fw-medium">-auto-orient</a></td>
+ <td>automagically orient image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#background" class="text-decoration-none fw-medium">-background <var>color</var></a></td>
+ <td>background color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bench" class="text-decoration-none fw-medium">-bench <var>iterations</var></a></td>
+ <td>measure performance</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bias" class="text-decoration-none fw-medium">-bias <var>value</var></a></td>
+ <td>add bias when convolving an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#black-threshold" class="text-decoration-none fw-medium">-black-threshold <var>value</var></a></td>
+ <td>force all pixels below the threshold into black</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-primary" class="text-decoration-none fw-medium">-blue-primary <var>point</var></a></td>
+ <td>chromaticity blue primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-shift" class="text-decoration-none fw-medium">-blue-shift <var>factor</var></a></td>
+ <td>simulate a scene at nighttime in the moonlight</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blur" class="text-decoration-none fw-medium">-blur <var>geometry</var></a></td>
+ <td>reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="text-decoration-none fw-medium">-border <var>geometry</var></a></td>
+ <td>surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="text-decoration-none fw-medium">-bordercolor <var>color</var></a></td>
+ <td>border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#brightness-contrast" class="text-decoration-none fw-medium">-brightness-contrast <var>geometry</var></a></td>
+ <td>improve brightness / contrast of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#canny" class="text-decoration-none fw-medium">-canny <var>geometry</var></a></td>
+ <td>use a multi-stage algorithm to detect a wide range of edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#caption" class="text-decoration-none fw-medium">-caption <var>string</var></a></td>
+ <td>assign a caption to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#cdl" class="text-decoration-none fw-medium">-cdl <var>filename</var></a></td>
+ <td>color correct with a color decision list</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-medium">-channel <var>type</var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#charcoal" class="text-decoration-none fw-medium">-charcoal <var>radius</var></a></td>
+ <td>simulate a charcoal drawing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#chop" class="text-decoration-none fw-medium">-chop <var>geometry</var></a></td>
+ <td>remove pixels from the image interior</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clamp" class="text-decoration-none fw-medium">-clamp</a></td>
+ <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip" class="text-decoration-none fw-medium">-clip</a></td>
+ <td>clip along the first path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-mask" class="text-decoration-none fw-medium">-clip-mask <var>filename</var></a></td>
+ <td>associate clip mask with the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-path" class="text-decoration-none fw-medium">-clip-path <var>id</var></a></td>
+ <td>clip along a named path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clone" class="text-decoration-none fw-medium">-clone <var>index</var></a></td>
+ <td>clone an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clut" class="text-decoration-none fw-medium">-clut</a></td>
+ <td>apply a color lookup table to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#connected-components" class="text-decoration-none fw-medium">-connected-components <var>connectivity</var></a></td>
+ <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast-stretch" class="text-decoration-none fw-medium">-contrast-stretch <var>geometry</var></a></td>
+ <td>improve the contrast in an image by `stretching' the range of intensity value</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#coalesce" class="text-decoration-none fw-medium">-coalesce</a></td>
+ <td>merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorize" class="text-decoration-none fw-medium">-colorize <var>value</var></a></td>
+ <td>colorize the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#color-matrix" class="text-decoration-none fw-medium">-color-matrix <var>matrix</var></a></td>
+ <td>apply color correction to the image.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="text-decoration-none fw-medium">-colors <var>value</var></a></td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-medium">-colorspace <var>type</var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#combine" class="text-decoration-none fw-medium">-combine</a></td>
+ <td>combine a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="text-decoration-none fw-medium">-comment <var>string</var></a></td>
+ <td>annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compare" class="text-decoration-none fw-medium">-compare</a></td>
+ <td>compare image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#complex" class="text-decoration-none fw-medium">-complex <var>operator</var></a></td>
+ <td>perform complex mathematics on an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compose" class="text-decoration-none fw-medium">-compose <var>operator</var></a></td>
+ <td>set image composite operator</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#composite" class="text-decoration-none fw-medium">-composite</a></td>
+ <td>composite image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="text-decoration-none fw-medium">-compress <var>type</var></a></td>
+ <td>image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast" class="text-decoration-none fw-medium">-contrast</a></td>
+ <td>enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#convolve" class="text-decoration-none fw-medium">-convolve <var>coefficients</var></a></td>
+ <td>apply a convolution kernel to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#copy" class="text-decoration-none fw-medium">-copy <var>geometry</var> <var>offset</var></a></td>
+ <td>copy pixels from one area of an image to another</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#crop" class="text-decoration-none fw-medium">-crop <var>geometry</var></a></td>
+ <td>crop the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#cycle" class="text-decoration-none fw-medium">-cycle <var>amount</var></a></td>
+ <td>cycle the image colormap</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#decipher" class="text-decoration-none fw-medium">-decipher <var>filename</var></a></td>
+ <td>convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-medium">-debug <var>events</var></a></td>
+ <td>display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="text-decoration-none fw-medium">-define <var>format:option</var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#deconstruct" class="text-decoration-none fw-medium">-deconstruct</a></td>
+ <td>break down an image sequence into constituent parts</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delay" class="text-decoration-none fw-medium">-delay <var>centiseconds</var></a></td>
+ <td>display the next image after pausing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delete" class="text-decoration-none fw-medium">-delete <var>index</var></a></td>
+ <td>delete the image from the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="text-decoration-none fw-medium">-density <var>geometry</var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-medium">-depth <var>value</var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#despeckle" class="text-decoration-none fw-medium">-despeckle</a></td>
+ <td>reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#direction" class="text-decoration-none fw-medium">-direction <var>type</var></a></td>
+ <td>render text right-to-left or left-to-right</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#display" class="text-decoration-none fw-medium">-display <var>server</var></a></td>
+ <td>get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dispose" class="text-decoration-none fw-medium">-dispose <var>method</var></a></td>
+ <td>layer disposal method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distribute-cache" class="text-decoration-none fw-medium">-distribute-cache <var>port</var></a></td>
+ <td>launch a distributed pixel cache server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distort" class="text-decoration-none fw-medium">-distort <var>type coefficients</var></a></td>
+ <td>distort image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="text-decoration-none fw-medium">-dither <var>method</var></a></td>
+ <td>apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#draw" class="text-decoration-none fw-medium">-draw <var>string</var></a></td>
+ <td>annotate the image with a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#duplicate" class="text-decoration-none fw-medium">-duplicate <var>count,indexes</var></a></td>
+ <td>duplicate an image one or more times</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#edge" class="text-decoration-none fw-medium">-edge <var>radius</var></a></td>
+ <td>apply a filter to detect edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#emboss" class="text-decoration-none fw-medium">-emboss <var>radius</var></a></td>
+ <td>emboss an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encipher" class="text-decoration-none fw-medium">-encipher <var>filename</var></a></td>
+ <td>convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encoding" class="text-decoration-none fw-medium">-encoding <var>type</var></a></td>
+ <td>text encoding type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="text-decoration-none fw-medium">-endian <var>type</var></a></td>
+ <td>endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#enhance" class="text-decoration-none fw-medium">-enhance</a></td>
+ <td>apply a digital filter to enhance a noisy image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#equalize" class="text-decoration-none fw-medium">-equalize</a></td>
+ <td>perform histogram equalization to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#evaluate" class="text-decoration-none fw-medium">-evaluate <var>operator value</var></a></td>
+ <td>evaluate an arithmetic, relational, or logical expression</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#evaluate-sequence" class="text-decoration-none fw-medium">-evaluate-sequence <var>operator</var></a></td>
+ <td>evaluate an arithmetic, relational, or logical expression for an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extent" class="text-decoration-none fw-medium">-extent <var>geometry</var></a></td>
+ <td>set the image size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="text-decoration-none fw-medium">-extract <var>geometry</var></a></td>
+ <td>extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#family" class="text-decoration-none fw-medium">-family <var>name</var></a></td>
+ <td>render text with this font family</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#features" class="text-decoration-none fw-medium">-features <var>distance</var></a></td>
+ <td>analyze image features (e.g. contract, correlations, etc.).</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fft" class="text-decoration-none fw-medium">-fft</a></td>
+ <td>implements the discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fill" class="text-decoration-none fw-medium">-fill <var>color</var></a></td>
+ <td>color to use when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="text-decoration-none fw-medium">-filter <var>type</var></a></td>
+ <td>use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flatten" class="text-decoration-none fw-medium">-flatten</a></td>
+ <td>flatten a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flip" class="text-decoration-none fw-medium">-flip</a></td>
+ <td>flip image in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#floodfill" class="text-decoration-none fw-medium">-floodfill <var>geometry color</var></a></td>
+ <td>floodfill the image with color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flop" class="text-decoration-none fw-medium">-flop</a></td>
+ <td>flop image in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#font" class="text-decoration-none fw-medium">-font <var>name</var></a></td>
+ <td>render text with this font</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#format_identify_" class="text-decoration-none fw-medium">-format <var>string</var></a></td>
+ <td>output formatted image characteristics</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#frame" class="text-decoration-none fw-medium">-frame <var>geometry</var></a></td>
+ <td>surround image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#function" class="text-decoration-none fw-medium">-function <var>name</var></a></td>
+ <td>apply a function to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fuzz" class="text-decoration-none fw-medium">-fuzz <var>distance</var></a></td>
+ <td>colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fx" class="text-decoration-none fw-medium">-fx <var>expression</var></a></td>
+ <td>apply mathematical expression to an image channel(s)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gamma" class="text-decoration-none fw-medium">-gamma <var>value</var></a></td>
+ <td>level of gamma correction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gaussian-blur" class="text-decoration-none fw-medium">-gaussian-blur <var>geometry</var></a></td>
+ <td>reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="text-decoration-none fw-medium">-geometry <var>geometry</var></a></td>
+ <td>preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="text-decoration-none fw-medium">-gravity <var>type</var></a></td>
+ <td>horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#grayscale" class="text-decoration-none fw-medium">-grayscale <var>method</var></a></td>
+ <td>convert image to grayscale</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#green-primary" class="text-decoration-none fw-medium">-green-primary <var>point</var></a></td>
+ <td>chromaticity green primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="text-decoration-none fw-medium">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#hough-lines" class="text-decoration-none fw-medium">-hough-lines <var>geometry</var></a></td>
+ <td>identify lines in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="text-decoration-none fw-medium">-identify</a></td>
+ <td>identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ift" class="text-decoration-none fw-medium">-ift</a></td>
+ <td>implements the inverse discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#implode" class="text-decoration-none fw-medium">-implode <var>amount</var></a></td>
+ <td>implode image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#insert" class="text-decoration-none fw-medium">-insert <var>index</var></a></td>
+ <td>insert last image into the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#intensity" class="text-decoration-none fw-medium">-intensity <var>method</var></a></td>
+ <td>method to generate an intensity value from a pixel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#intent" class="text-decoration-none fw-medium">-intent <var>type</var></a></td>
+ <td>type of rendering intent when managing the image color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-medium">-interlace <var>type</var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interline-spacing" class="text-decoration-none fw-medium">-interline-spacing <var>value</var></a></td>
+ <td>the space between two text lines</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="text-decoration-none fw-medium">-interpolate <var>method</var></a></td>
+ <td>pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interword-spacing" class="text-decoration-none fw-medium">-interword-spacing <var>value</var></a></td>
+ <td>the space between two words</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kerning" class="text-decoration-none fw-medium">-kerning <var>value</var></a></td>
+ <td>the space between two characters</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kuwahara" class="text-decoration-none fw-medium">-kuwahara <var>geometry</var></a></td>
+ <td>edge preserving noise reduction filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="text-decoration-none fw-medium">-label <var>string</var></a></td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#lat" class="text-decoration-none fw-medium">-lat <var>geometry</var></a></td>
+ <td>local adaptive thresholding</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#layers" class="text-decoration-none fw-medium">-layers <var>method</var></a></td>
+ <td>optimize or compare image layers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#level" class="text-decoration-none fw-medium">-level <var>value</var></a></td>
+ <td>adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-medium">-limit <var>type value</var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#linear-stretch" class="text-decoration-none fw-medium">-linear-stretch <var>geometry</var></a></td>
+ <td>linear with saturation histogram stretch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#liquid-rescale" class="text-decoration-none fw-medium">-liquid-rescale <var>geometry</var></a></td>
+ <td>rescale image with seam-carving</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#list" class="text-decoration-none fw-medium">-list <var>type</var></a></td>
+ <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="text-decoration-none fw-medium">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#loop" class="text-decoration-none fw-medium">-loop <var>iterations</var></a></td>
+ <td>add Netscape loop extension to your GIF animation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mask" class="text-decoration-none fw-medium">-mask <var>filename</var></a></td>
+ <td>associate a mask with the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mattecolor" class="text-decoration-none fw-medium">-mattecolor <var>color</var></a></td>
+ <td>frame color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#median" class="text-decoration-none fw-medium">-median <var>radius</var></a></td>
+ <td>apply a median filter to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mean-shift" class="text-decoration-none fw-medium">-mean-shift <var>geometry</var></a></td>
+ <td>delineate arbitrarily shaped clusters in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#metric" class="text-decoration-none fw-medium">-metric <var>type</var></a></td>
+ <td>measure differences between images with this metric</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mode" class="text-decoration-none fw-medium">-mode <var>radius</var></a></td>
+ <td>make each pixel the 'predominant color' of the neighborhood</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#modulate" class="text-decoration-none fw-medium">-modulate <var>value</var></a></td>
+ <td>vary the brightness, saturation, and hue</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#moments" class="text-decoration-none fw-medium">-moments</a></td>
+ <td>display image moments.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-medium">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="text-decoration-none fw-medium">-monochrome</a></td>
+ <td>transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#morph" class="text-decoration-none fw-medium">-morph <var>value</var></a></td>
+ <td>morph an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#morphology" class="text-decoration-none fw-medium">-morphology <var>method</var> <var>kernel</var></a></td>
+ <td>apply a morphology method to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#motion-blur" class="text-decoration-none fw-medium">-motion-blur <var>geometry</var></a></td>
+ <td>simulate motion blur</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#negate" class="text-decoration-none fw-medium">-negate</a></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#noise" class="text-decoration-none fw-medium">-noise <var>radius</var></a></td>
+ <td>add or reduce noise in an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#normalize" class="text-decoration-none fw-medium">-normalize</a></td>
+ <td>transform image to span the full range of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#opaque" class="text-decoration-none fw-medium">-opaque <var>color</var></a></td>
+ <td>change this color to the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ordered-dither" class="text-decoration-none fw-medium">-ordered-dither <var>NxN</var></a></td>
+ <td>ordered dither the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#orient" class="text-decoration-none fw-medium">-orient <var>type</var></a></td>
+ <td>image orientation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="text-decoration-none fw-medium">-page <var>geometry</var></a></td>
+ <td>size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#paint" class="text-decoration-none fw-medium">-paint <var>radius</var></a></td>
+ <td>simulate an oil painting</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#perceptible" class="text-decoration-none fw-medium">-perceptible</a></td>
+ <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ping" class="text-decoration-none fw-medium">-ping</a></td>
+ <td>efficiently determine image attributes</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#pointsize" class="text-decoration-none fw-medium">-pointsize <var>value</var></a></td>
+ <td>font point size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#polaroid" class="text-decoration-none fw-medium">-polaroid <var>angle</var></a></td>
+ <td>simulate a Polaroid picture</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#poly" class="text-decoration-none fw-medium">-poly <var>terms</var></a></td>
+ <td>build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#posterize" class="text-decoration-none fw-medium">-posterize <var>levels</var></a></td>
+ <td>reduce the image to a limited number of color levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#precision" class="text-decoration-none fw-medium">-precision <var>value</var></a></td>
+ <td>set the maximum number of significant digits to be printed</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#preview" class="text-decoration-none fw-medium">-preview <var>type</var></a></td>
+ <td>image preview type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#print" class="text-decoration-none fw-medium">-print <var>string</var></a></td>
+ <td>interpret string and print to console</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#process" class="text-decoration-none fw-medium">-process <var>image-filter</var></a></td>
+ <td>process the image with a custom image filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="text-decoration-none fw-medium">-profile <var>filename</var></a></td>
+ <td>add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quality" class="text-decoration-none fw-medium">-quality <var>value</var></a></td>
+ <td>JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="text-decoration-none fw-medium">-quantize <var>colorspace</var></a></td>
+ <td>reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-medium">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotational-blur" class="text-decoration-none fw-medium">-rotational-blur <var>angle</var></a></td>
+ <td>radial blur the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#raise" class="text-decoration-none fw-medium">-raise <var>value</var></a></td>
+ <td>lighten/darken image edges to create a 3-D effect</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#random-threshold" class="text-decoration-none fw-medium">-random-threshold <var>low,high</var></a></td>
+ <td>random threshold the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#red-primary" class="text-decoration-none fw-medium">-red-primary <var>point</var></a></td>
+ <td>chromaticity red primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-medium">-regard-warnings</a></td>
+ <td>pay attention to warning messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#region" class="text-decoration-none fw-medium">-region <var>geometry</var></a></td>
+ <td>apply options to a portion of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#remap" class="text-decoration-none fw-medium">-remap <var>filename</var></a></td>
+ <td>transform image colors to match this set of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#render" class="text-decoration-none fw-medium">-render</a></td>
+ <td>render vector graphics</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#repage" class="text-decoration-none fw-medium">-repage <var>geometry</var></a></td>
+ <td>size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resample" class="text-decoration-none fw-medium">-resample <var>geometry</var></a></td>
+ <td>change the resolution of an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resize" class="text-decoration-none fw-medium">-resize <var>geometry</var></a></td>
+ <td>resize the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-medium">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#roll" class="text-decoration-none fw-medium">-roll <var>geometry</var></a></td>
+ <td>roll an image vertically or horizontally</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="text-decoration-none fw-medium">-rotate <var>degrees</var></a></td>
+ <td>apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sample" class="text-decoration-none fw-medium">-sample <var>geometry</var></a></td>
+ <td>scale image with pixel sampling</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-medium">-sampling-factor <var>geometry</var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scale" class="text-decoration-none fw-medium">-scale <var>geometry</var></a></td>
+ <td>scale the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scene" class="text-decoration-none fw-medium">-scene <var>value</var></a></td>
+ <td>image scene number</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-medium">-seed <var>value</var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#segment" class="text-decoration-none fw-medium">-segment <var>values</var></a></td>
+ <td>segment an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#threshold" class="text-decoration-none fw-medium">-selective-blur <var>geometry</var></a></td>
+ <td>selectively blur pixels within a contrast threshold</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#separate" class="text-decoration-none fw-medium">-separate</a></td>
+ <td>separate an image channel into a grayscale image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sepia-tone" class="text-decoration-none fw-medium">-sepia-tone <var>threshold</var></a></td>
+ <td>simulate a sepia-toned photo</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="text-decoration-none fw-medium">-set <var>attribute value</var></a></td>
+ <td>set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shade" class="text-decoration-none fw-medium">-shade <var>degrees</var></a></td>
+ <td>shade the image using a distant light source</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shadow" class="text-decoration-none fw-medium">-shadow <var>geometry</var></a></td>
+ <td>simulate an image shadow</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sharpen" class="text-decoration-none fw-medium">-sharpen <var>geometry</var></a></td>
+ <td>sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shave" class="text-decoration-none fw-medium">-shave <var>geometry</var></a></td>
+ <td>shave pixels from the image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shear" class="text-decoration-none fw-medium">-shear <var>geometry</var></a></td>
+ <td>slide one edge of the image along the X or Y axis</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shuffle" class="text-decoration-none fw-medium">-shuffle <var>strategy</var></a></td>
+ <td>reorder the sequence of images in an image list based on ascending, descending, or random criteria</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sigmoidal" class="text-decoration-none fw-medium">-sigmoidal-contrast <var>geometry</var></a></td>
+ <td>increase the contrast without saturating highlights or shadows</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#smush" class="text-decoration-none fw-medium">-smush <var>offset</var></a></td>
+ <td>smush an image sequence together</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="text-decoration-none fw-medium">-size <var>geometry</var></a></td>
+ <td>width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sketch" class="text-decoration-none fw-medium">-sketch <var>geometry</var></a></td>
+ <td>simulate a pencil sketch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#solarize" class="text-decoration-none fw-medium">-solarize <var>threshold</var></a></td>
+ <td>negate all pixels above the threshold level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#splice" class="text-decoration-none fw-medium">-splice <var>geometry</var></a></td>
+ <td>splice the background color into the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#spread" class="text-decoration-none fw-medium">-spread <var>radius</var></a></td>
+ <td>displace image pixels by a random amount</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#statistic" class="text-decoration-none fw-medium">-statistic <var>type</var> <var>geometry</var></a></td>
+ <td>replace each pixel with corresponding statistic from the neighborhood</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="text-decoration-none fw-medium">-strip</a></td>
+ <td>strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stroke" class="text-decoration-none fw-medium">-stroke <var>color</var></a></td>
+ <td>graphic primitive stroke color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strokewidth" class="text-decoration-none fw-medium">-strokewidth <var>value</var></a></td>
+ <td>graphic primitive stroke width</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stretch" class="text-decoration-none fw-medium">-stretch <var>type</var></a></td>
+ <td>render text with this font stretch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#style" class="text-decoration-none fw-medium">-style <var>type</var></a></td>
+ <td>render text with this font style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swap" class="text-decoration-none fw-medium">-swap <var>indexes</var></a></td>
+ <td>swap two images in the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swirl" class="text-decoration-none fw-medium">-swirl <var>degrees</var></a></td>
+ <td>swirl image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#synchronize" class="text-decoration-none fw-medium">-synchronize</a></td>
+ <td>synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#taint" class="text-decoration-none fw-medium">-taint</a></td>
+ <td>mark the image as modified</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#texture" class="text-decoration-none fw-medium">-texture <var>filename</var></a></td>
+ <td>name of texture to tile onto the image background</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#threshold" class="text-decoration-none fw-medium">-threshold <var>value</var></a></td>
+ <td>threshold the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#thumbnail" class="text-decoration-none fw-medium">-thumbnail <var>geometry</var></a></td>
+ <td>create a thumbnail of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile" class="text-decoration-none fw-medium">-tile <var>filename</var></a></td>
+ <td>tile image when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile-offset" class="text-decoration-none fw-medium">-tile-offset <var>geometry</var></a></td>
+ <td>set the image tile offset</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tint" class="text-decoration-none fw-medium">-tint <var>value</var></a></td>
+ <td>tint the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transform" class="text-decoration-none fw-medium">-transform</a></td>
+ <td>affine transform image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent" class="text-decoration-none fw-medium">-transparent <var>color</var></a></td>
+ <td>make this color transparent within the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="text-decoration-none fw-medium">-transparent-color <var>color</var></a></td>
+ <td>transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transpose" class="text-decoration-none fw-medium">-transpose</a></td>
+ <td>flip image in the vertical direction and rotate 90 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transverse" class="text-decoration-none fw-medium">-transverse</a></td>
+ <td>flop image in the horizontal direction and rotate 270 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#treedepth" class="text-decoration-none fw-medium">-treedepth <var>value</var></a></td>
+ <td>color tree depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#trim" class="text-decoration-none fw-medium">-trim</a></td>
+ <td>trim image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#type" class="text-decoration-none fw-medium">-type <var>type</var></a></td>
+ <td>image type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#undercolor" class="text-decoration-none fw-medium">-undercolor <var>color</var></a></td>
+ <td>annotation bounding box color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unique-colors" class="text-decoration-none fw-medium">-unique-colors</a></td>
+ <td>discard all but one of any pixel color.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#units" class="text-decoration-none fw-medium">-units <var>type</var></a></td>
+ <td>the units of image resolution</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unsharp" class="text-decoration-none fw-medium">-unsharp <var>geometry</var></a></td>
+ <td>sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-medium">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="text-decoration-none fw-medium">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#view" class="text-decoration-none fw-medium">-view</a></td>
+ <td>FlashPix viewing transforms</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#vignette" class="text-decoration-none fw-medium">-vignette <var>geometry</var></a></td>
+ <td>soften the edges of the image in vignette style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-medium">-virtual-pixel <var>method</var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#wave" class="text-decoration-none fw-medium">-wave <var>geometry</var></a></td>
+ <td>alter an image along a sine wave</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#wavelet" class="text-decoration-none fw-medium">-wavelet-denoise <var>threshold</var></a></td>
+ <td>removes noise from the image using a wavelet transform</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#weight" class="text-decoration-none fw-medium">-weight <var>type</var></a></td>
+ <td>render text with this font weight</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-point" class="text-decoration-none fw-medium">-white-point <var>point</var></a></td>
+ <td>chromaticity white point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-threshold" class="text-decoration-none fw-medium">-white-threshold <var>value</var></a></td>
+ <td>force all pixels above the threshold into white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="text-decoration-none fw-medium">-write <var>filename</var></a></td>
+ <td>write images to this file</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/magick-vector-graphics/index.html b/www/magick-vector-graphics/index.html
index 2d7fe0a11..dd8036271 100644
--- a/www/magick-vector-graphics/index.html
+++ b/www/magick-vector-graphics/index.html
@@ -11,235 +11,329 @@
<meta name="description" content="Explore Magick Vector Graphics (MVG) in ImageMagick — a modular language for creating 2D vector and mixed raster graphics. Learn syntax, drawing primitives, and how to render shapes, paths, and text from MVG, SVG, or program interfaces.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Magick Vector Graphics">
<meta property="og:description" content="Explore Magick Vector Graphics (MVG) in ImageMagick — a modular language for creating 2D vector and mixed raster graphics. Learn syntax, drawing primitives, and how to render shapes, paths, and text from MVG, SVG, or program interfaces.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Magick Vector Graphics">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Magick Vector Graphics",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick-vector-graphics/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore Magick Vector Graphics (MVG) in ImageMagick — a modular language for creating 2D vector and mixed raster graphics. Learn syntax, drawing primitives, and how to render shapes, paths, and text from MVG, SVG, or program interfaces.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick-vector-graphics/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick-vector-graphics/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Magick Vector Graphics</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#overview">MVG Overview</a> • <a href="#primitives">Drawing Primitives</a></p>
-
-<p class="lead">This specification defines the features and syntax for Magick Vector Graphics (MVG), a modularized language for describing two-dimensional vector and mixed vector/raster graphics in ImageMagick. You can use the language to draw from the
-command line, from an MVG file, from an <a href="http://www.w3.org/TR/SVG/">SVG -- Scalable Vector Graphics</a> file or from one of the ImageMagick <a href="https://imagemagick.org/magick-vector-graphics/develop.php">program interfaces</a>. Use this command, for example, to render an arc:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Magick Vector Graphics</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore Magick Vector Graphics (MVG) in ImageMagick — a modular language for creating 2D vector and mixed raster graphics. Learn syntax, drawing primitives, and how to render shapes, paths, and text from MVG, SVG, or program interfaces.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 100x60 canvas:skyblue -fill white -stroke black \
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="mvg-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#overview" class="text-decoration-none text-primary"><i class="bi bi-info-circle me-1"></i> MVG Overview</a>
+ <span class="text-muted">•</span>
+ <a href="#primitives" class="text-decoration-none text-primary"><i class="bi bi-grid-3x3 me-1"></i> Drawing Primitives</a>
+ </div>
+ </div>
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-3">
+ This specification defines the features and syntax for Magick Vector Graphics (MVG), a modularized language for describing two-dimensional vector and mixed vector/raster graphics in ImageMagick. You can use the language to draw from the command line, from an MVG file, from an <a href="http://www.w3.org/TR/SVG/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">SVG — Scalable Vector Graphics</a> file, or from one of the ImageMagick <a href="https://imagemagick.org/magick-vector-graphics/develop.php" class="text-decoration-none">program interfaces</a>. Use this command, for example, to render an arc:
+ </p>
+ <pre class="p-3 mb-3 rounded bg-body border font-mono small"><code>$ magick -size 100x60 canvas:skyblue -fill white -stroke black \
-draw "path 'M 30,40 A 30,20 20 0,0 70,20 A 30,20 20 1,0 30,40 Z '" \
- arc.png
-</samp></pre>
-
-<p>and here is the result:</p>
-
-<ul>
- <a href="https://imagemagick.org/image/arc.png"><img src="https://imagemagick.org/image/arc.png" width="100" height="60" alt="arc"></a>
-</ul>
-
-<p>When the drawing gets sufficiently complex, we recommend you assemble the graphic primitives into a MVG file. For our example, we use <a href="https://imagemagick.org/source/piechart.mvg">piechart.mvg</a>:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>push graphic-context
+ arc.png</code></pre>
+ <p class="mb-2">and here is the result:</p>
+ <div class="text-center my-3">
+ <a href="https://imagemagick.org/image/arc.png" class="d-inline-block">
+ <img src="https://imagemagick.org/image/arc.png" width="100" height="60" alt="arc" class="img-thumbnail shadow-sm border" />
+ </a>
+ </div>
+ </div>
+ <!-- Pie Chart Section -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="mb-3">
+ When the drawing gets sufficiently complex, we recommend you assemble the graphic primitives into an MVG file. For our example, we use <a href="https://imagemagick.org/source/piechart.mvg" class="text-decoration-none">piechart.mvg <i class="bi bi-box-arrow-up-right small"></i></a>:
+ </p>
+ <pre class="overflow-auto p-3 mb-3 rounded bg-body border font-mono small" style="max-height:75svh;"><code>push graphic-context
viewbox 0 0 624 369
affine 0.283636 0 0 0.283846 -0 -0
push graphic-context
@@ -388,31 +482,24 @@ command line, from an MVG file, from an <a href="http://www.w3.org/TR/SVG/">SVG
circle 700,600 700,960
pop graphic-context
pop graphic-context
-pop graphic-context
-</code></pre>
-
-<p>to render a pie chart with this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mvg:piechart.mvg piechart.png
-</samp></pre>
-
-<p>which produces this rendering:</p>
-
-<ul>
- <a href="https://imagemagick.org/image/piechart.png"><img src="https://imagemagick.org/image/piechart.png" width="624" height="369" alt="piechart"></a>
-</ul>
-
-<p>However, in general, MVG is sufficiently difficult to work with that you probably want to use a program to generate your graphics in the SVG format. ImageMagick automagically converts SVG to MVG and renders your image, for example, we render <a href="https://imagemagick.org/source/piechart.svg">piechart.svg</a> with this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mvg:piechart.svg piechart.jpg
-</samp></pre>
-
-
-<p>to produce the same pie chart we created with the MVG language.</p>
-
-<p>Drawing is available from many of the ImageMagick <a href="https://imagemagick.org/magick-vector-graphics/develop.php">program interfaces</a> as well. ImageMagick converts the drawing API calls to MVG and renders it. Here is example code written in the <a href="https://imagemagick.org/magick-wand">MagickWand</a> language: </p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>(void) PushDrawingWand(draw_wand);
+pop graphic-context</code></pre>
+ <p>to render a pie chart with this command:</p>
+ <pre class="p-3 mb-3 rounded bg-body border font-mono small"><code>$ magick mvg:piechart.mvg piechart.png</code></pre>
+ <p class="mb-2">which produces this rendering:</p>
+ <div class="text-center my-3">
+ <a href="https://imagemagick.org/image/piechart.png" class="d-inline-block">
+ <img src="https://imagemagick.org/image/piechart.png" width="624" height="369" alt="piechart" class="img-thumbnail shadow-sm border" />
+ </a>
+ </div>
+ <p class="mt-4">
+ However, in general, MVG is sufficiently difficult to work with that you probably want to use a program to generate your graphics in the SVG format. ImageMagick automagically converts SVG to MVG and renders your image; for example, we render <a href="https://imagemagick.org/source/piechart.svg" class="text-decoration-none">piechart.svg</a> with this command:
+ </p>
+ <pre class="p-3 mb-3 rounded bg-body border font-mono small"><code>$ magick mvg:piechart.svg piechart.jpg</code></pre>
+ <p>to produce the same pie chart we created with the MVG language.</p>
+ <p class="mt-4">
+ Drawing is available from many of the ImageMagick <a href="https://imagemagick.org/magick-vector-graphics/develop.php" class="text-decoration-none">program interfaces</a> as well. ImageMagick converts the drawing API calls to MVG and renders it. Here is example code written in the <a href="https://imagemagick.org/magick-wand" class="text-decoration-none">MagickWand</a> language:
+ </p>
+ <pre class="overflow-auto p-3 mb-3 rounded bg-body border font-mono small" style="max-height:75svh;"><code>(void) PushDrawingWand(draw_wand);
{
const PointInfo points[6] =
{
@@ -423,7 +510,6 @@ pop graphic-context
{ 77.26,578.6 },
{ 180,504 }
};
-
DrawSetStrokeAntialias(draw_wand,True);
DrawSetStrokeWidth(draw_wand,9);
DrawSetStrokeLineCap(draw_wand,RoundCap);
@@ -436,33 +522,26 @@ pop graphic-context
DrawSetFillColor(draw_wand,color);
DrawPolygon(draw_wand,6,points);
}
-(void) PopDrawingWand(draw_wand);
-</code></pre>
-
-<h2><a class="anchor" id="overview"></a>MVG Overview</h2>
-
-<p>MVG ignores all white-space between commands. This allows multiple MVG commands per line. It is common convention to terminate each MVG command with a newline to make MVG easier to edit and read. This syntax description uses indentation in MVG sequences to aid with understanding. Indentation is supported but is not required.</p>
-
-<p>Metafile wrapper syntax (to support stand-alone MVG files):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>push graphic-context
+(void) PopDrawingWand(draw_wand);</code></pre>
+ </div>
+ <!-- MVG Overview Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="overview">
+ <a class="anchor text-decoration-none text-body" href="#overview">MVG Overview</a>
+ </h2>
+ <p>MVG ignores all white-space between commands. This allows multiple MVG commands per line. It is common convention to terminate each MVG command with a newline to make MVG easier to edit and read. This syntax description uses indentation in MVG sequences to aid with understanding. Indentation is supported but is not required.</p>
+ <p class="fw-semibold mt-4">Metafile wrapper syntax (to support stand-alone MVG files):</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>push graphic-context
viewbox 0 0 width height
[ any other MVG commands ]
-pop graphic-context
-</code></pre>
-
-<p>Pattern syntax (saving and restoring context):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>push pattern id x,y width,height
+pop graphic-context</code></pre>
+ <p class="fw-semibold mt-4">Pattern syntax (saving and restoring context):</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>push pattern id x,y width,height
push graphic-context
[ drawing commands ]
pop graphic-context
-pop pattern
-</code></pre>
-
-<p>an example is (%s is a identifier string):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>push defs
+pop pattern</code></pre>
+ <p>An example (%s is an identifier string):</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>push defs
push pattern %s 10,10 20,20
push graphic-context
fill red
@@ -473,147 +552,140 @@ pop pattern
rectangle 10,10 20,20
pop graphic-context
pop pattern
-pop defs
-</code></pre>
-
-<p>For image tiling use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>push pattern id x,y width,height
+pop defs</code></pre>
+ <p class="fw-semibold mt-4">For image tiling use:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>push pattern id x,y width,height
image Copy ...
-pop pattern
-</code></pre>
-
-<p>Note you can use the pattern for either the fill or stroke like:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>stroke url(#%s)
-</code></pre>
-
-<p>or</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>fill url(#%s)
-</code></pre>
-
-<p>The clip path defines a clipping area, where only the contained area to be drawn upon. Areas outside of the clipping area are masked.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>push defs
+pop pattern</code></pre>
+ <p>Note you can use the pattern for either the fill or stroke like:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>stroke url(#%s)</code></pre>
+ <p>or</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>fill url(#%s)</code></pre>
+ <p class="mt-4">The clip path defines a clipping area, where only the contained area is drawn upon. Areas outside of the clipping area are masked.</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>push defs
push clip-path "myClipPath"
push graphic-context
rectangle 10,10 20,20
pop graphic-context
pop clip-path
pop defs
-clip-path url(#myClipPath)
-</code></pre>
-
-<h2><a class="anchor" id="primitives"></a>Drawing Primitives</h2>
-
-<p>Here is a complete description of the MVG drawing primitives:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
-<thead>
- <tr>
- <th>Primitive</th>
- <th>Description</th>
- </tr>
-</thead>
-<tbody>
- <tr>
- <td><a class="anchor" id="affine"></a>affine <var>s<sub>x</sub></var>,<var>r<sub>x</sub></var>,<var>r<sub>y</sub></var>,<var>s<sub>y</sub></var>,<var>t<sub>x</sub></var>,<var>t<sub>y</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="arc"></a>arc <var>x<sub>0</sub></var>,<var>y<sub>0</sub></var> <var>x<sub>1</sub></var>,<var>y<sub>1</sub></var> <var>a<sub>0</sub></var>,<var>a<sub>1</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="bezier"></a>bezier <var>x<sub>0</sub></var>,<var>y<sub>0</sub></var> ... <var>x<sub>n</sub></var>,<var>y<sub>n</sub></var></td>
- <td><code>Bezier</code> (spline) requires three or more x,y coordinates to define its shape. The first and last points are the knots (preserved coordinates) and any intermediate coordinates are the control points. If two control points are specified, the line between each end knot and its sequentially respective control point determines the tangent direction of the curve at that end. If one control point is specified, the lines from the end knots to the one control point determines the tangent directions of the curve at each end. If more than two control points are specified, then the additional control points act in combination to determine the intermediate shape of the curve. In order to draw complex curves, it is highly recommended either to use the <code>Path</code> primitive or to draw multiple four-point bezier segments with the start and end knots of each successive segment repeated. </td>
- </tr>
- <tr>
- <td><a class="anchor" id="border-color"></a>border-color <var>color</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="circle"></a>circle <var>origin<sub>x</sub></var>,<var>origin<sub>y</sub></var> <var>perimeter<sub>x</sub></var>,<var>perimeter<sub>y</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="clip-path"></a>clip-path url(<var>name</var>)</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="clip-rule"></a>clip-rule <var>rule</var></td>
- <td>Choose from these rule types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>evenodd
-nonzero</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="clip-units"></a>clip-units <var>units</var></td>
- <td>Choose from these unit types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>userSpace
+clip-path url(#myClipPath)</code></pre>
+ <!-- Drawing Primitives Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="primitives">
+ <a class="anchor text-decoration-none text-body" href="#primitives">Drawing Primitives</a>
+ </h2>
+ <p class="text-body-secondary mb-3">Here is a complete description of the MVG drawing primitives:</p>
+ <div class="card im-card shadow-sm mb-4 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width: 35%;">
+ <col style="width: 65%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Primitive</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="affine"></a>affine <var>s<sub>x</sub></var>,<var>r<sub>x</sub></var>,<var>r<sub>y</sub></var>,<var>s<sub>y</sub></var>,<var>t<sub>x</sub></var>,<var>t<sub>y</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="arc"></a>arc <var>x<sub>0</sub></var>,<var>y<sub>0</sub></var> <var>x<sub>1</sub></var>,<var>y<sub>1</sub></var> <var>a<sub>0</sub></var>,<var>a<sub>1</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="bezier"></a>bezier <var>x<sub>0</sub></var>,<var>y<sub>0</sub></var> ... <var>x<sub>n</sub></var>,<var>y<sub>n</sub></var></td>
+ <td><code>Bezier</code> (spline) requires three or more x,y coordinates to define its shape. The first and last points are the knots (preserved coordinates) and any intermediate coordinates are the control points. If two control points are specified, the line between each end knot and its sequentially respective control point determines the tangent direction of the curve at that end. If one control point is specified, the lines from the end knots to the one control point determines the tangent directions of the curve at each end. If more than two control points are specified, then the additional control points act in combination to determine the intermediate shape of the curve. In order to draw complex curves, it is highly recommended either to use the <code>Path</code> primitive or to draw multiple four-point bezier segments with the start and end knots of each successive segment repeated.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="border-color"></a>border-color <var>color</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="circle"></a>circle <var>origin<sub>x</sub></var>,<var>origin<sub>y</sub></var> <var>perimeter<sub>x</sub></var>,<var>perimeter<sub>y</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="clip-path"></a>clip-path url(<var>name</var>)</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="clip-rule"></a>clip-rule <var>rule</var></td>
+ <td>Choose from these rule types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>evenodd
+nonzero</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="clip-units"></a>clip-units <var>units</var></td>
+ <td>Choose from these unit types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>userSpace
userSpaceOnUse
-objectBoundingBox</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="color"></a>color <var>x</var>,<var>y</var> <var>method</var></td>
- <td>Choose from these method types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>point
+objectBoundingBox</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="color"></a>color <var>x</var>,<var>y</var> <var>method</var></td>
+ <td>Choose from these method types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>point
replace
floodfill
filltoborder
-reset</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="compliance"></a>compliance <var>type</var></td>
- <td>Choose from these compliance types: MVG or SVG</td>
- </tr>
- <tr>
- <td><a class="anchor" id="decorate"></a>decorate <var>type</var></td>
- <td>Choose from these types of decorations:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>none
+reset</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="compliance"></a>compliance <var>type</var></td>
+ <td>Choose from these compliance types: MVG or SVG</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="decorate"></a>decorate <var>type</var></td>
+ <td>Choose from these types of decorations:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>none
line-through
overline
-underline</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="ellipse"></a>ellipse <var>center<sub>x</sub></var>,<var>center<sub>y</sub></var> <var>radius<sub>x</sub></var>,<var>radius<sub>y</sub></var> <var>arc<sub>start</sub></var>,<var>arc<sub>stop</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="fill"></a>fill <var>color</var></td>
- <td>Choose from any of these <a href="../color/index.html">colors</a>.</td>
- </tr>
- <tr>
- <td><a class="anchor" id="fill-opacity"></a>fill-opacity <var>opacity</var></td>
- <td>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).</td>
- </tr>
- <tr>
- <td><a class="anchor" id="fill-rule"></a>fill-rule <var>rule</var></td>
- <td>Choose from these rule types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>evenodd
-nonzero</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="font"></a>font <var>name</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="font-family"></a>font-family <var>family</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="font-size"></a>font-size <var>point-size</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="font-stretch"></a>font-stretch <var>type</var></td>
- <td>Choose from these stretch types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>all
+underline</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="ellipse"></a>ellipse <var>center<sub>x</sub></var>,<var>center<sub>y</sub></var> <var>radius<sub>x</sub></var>,<var>radius<sub>y</sub></var> <var>arc<sub>start</sub></var>,<var>arc<sub>stop</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="fill"></a>fill <var>color</var></td>
+ <td>Choose from any of these <a href="../color/index.html" class="text-decoration-none">colors</a>.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="fill-opacity"></a>fill-opacity <var>opacity</var></td>
+ <td>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="fill-rule"></a>fill-rule <var>rule</var></td>
+ <td>Choose from these rule types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>evenodd
+nonzero</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="font"></a>font <var>name</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="font-family"></a>font-family <var>family</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="font-size"></a>font-size <var>point-size</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="font-stretch"></a>font-stretch <var>type</var></td>
+ <td>Choose from these stretch types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>all
normal
ultra-condensed
extra-condensed
@@ -622,20 +694,22 @@ semi-condensed
semi-expanded
expanded
extra-expanded
-ultra-expanded</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="font-style"></a>font-style <var>style</var></td>
- <td>Choose from these styles:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>all
+ultra-expanded</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="font-style"></a>font-style <var>style</var></td>
+ <td>Choose from these styles:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>all
normal
italic
-oblique</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="font-weight"></a>font-weight <var>weight</var></td>
- <td>Choose from these weights:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>all
+oblique</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="font-weight"></a>font-weight <var>weight</var></td>
+ <td>Choose from these weights:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>all
normal
bold
100
@@ -646,19 +720,21 @@ bold
600
700
800
-900</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="gradient-units"></a>gradient-units <var>units</var></td>
- <td>Choose from these units:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>userSpace
+900</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="gradient-units"></a>gradient-units <var>units</var></td>
+ <td>Choose from these units:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>userSpace
userSpaceOnUse
-objectBoundingBox</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="gravity"></a>gravity <var>type</var></td>
- <td>Choose from these gravity types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>NorthWest
+objectBoundingBox</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="gravity"></a>gravity <var>type</var></td>
+ <td>Choose from these gravity types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>NorthWest
North
NorthEast
West
@@ -666,440 +742,441 @@ Center
East
SouthWest
South
-SouthEast</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="compose"></a>image <var>compose x,y width,height 'filename'</var></td>
- <td>Choose from these compose operations:
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left" style="width: 8%">Method</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td>clear</td>
- <td>Both the color and the alpha of the destination are cleared. Neither the source nor the destination are used as input.</td>
- </tr>
-
- <tr>
- <td>src</td>
- <td>The source is copied to the destination. The destination is not used as input.</td>
- </tr>
-
- <tr>
- <td>dst</td>
- <td>The destination is left untouched.</td>
- </tr>
-
- <tr>
- <td><b>src-over</b></td>
- <td>The source is composited over the destination.</td>
- </tr>
-
- <tr>
- <td>dst-over</td>
- <td>The destination is composited over the source and the result replaces the destination.</td>
- </tr>
-
- <tr>
- <td>src-in</td>
- <td>The part of the source lying inside of the destination replaces the destination.</td>
- </tr>
-
- <tr>
- <td>dst-in</td>
- <td>The part of the destination lying inside of the source replaces the destination.</td>
- </tr>
-
- <tr>
- <td>src-out</td>
- <td>The part of the source lying outside of the destination replaces the destination.</td>
- </tr>
-
- <tr>
- <td>dst-out</td>
- <td>The part of the destination lying outside of the source replaces the destination.</td>
- </tr>
-
- <tr>
- <td>src-atop</td>
- <td>The part of the source lying inside of the destination is composited onto the destination.</td>
- </tr>
-
- <tr>
- <td>dst-atop</td>
- <td>The part of the destination lying inside of the source is composited over the source and replaces the destination.</td>
- </tr>
-
- <tr>
- <td>multiply</td>
- <td>The source is multiplied by the destination and replaces the destination. The resultant color is always at least as dark as either of the two constituent colors. Multiplying any color with black produces black. Multiplying any color with white leaves the original color unchanged.</td>
- </tr>
-
- <tr>
- <td>screen</td>
- <td>The source and destination are complemented and then multiplied and then replace the destination. The resultant color is always at least as light as either of the two constituent colors. Screening any color with white produces white. Screening any color with black leaves the original color unchanged.</td>
- </tr>
-
- <tr>
- <td>overlay</td>
- <td>Multiplies or screens the colors, dependent on the destination color. Source colors overlay the destination whilst preserving its highlights and shadows. The destination color is not replaced, but is mixed with the source color to reflect the lightness or darkness of the destination.</td>
- </tr>
-
- <tr>
- <td>darken</td>
- <td>Selects the darker of the destination and source colors. The destination is replaced with the source when the source is darker, otherwise it is left unchanged.</td>
- </tr>
-
- <tr>
- <td>lighten</td>
- <td>Selects the lighter of the destination and source colors. The destination is replaced with the source when the source is lighter, otherwise it is left unchanged.</td>
- </tr>
-
- <tr>
- <td>linear-light</td>
- <td>Increase contrast slightly with an impact on the foreground's tonal values.</td>
- </tr>
-
- <tr>
- <td>color-dodge</td>
- <td>Brightens the destination color to reflect the source color. Painting with black produces no change.</td>
- </tr>
-
- <tr>
- <td>color-burn</td>
- <td>Darkens the destination color to reflect the source color. Painting with white produces no change.</td>
- </tr>
-
- <tr>
- <td>hard-light</td>
- <td>Multiplies or screens the colors, dependent on the source color value. If the source color is lighter than 0.5, the destination is lightened as if it were screened. If the source color is darker than 0.5, the destination is darkened, as if it were multiplied. The degree of lightening or darkening is proportional to the difference between the source color and 0.5. If it is equal to 0.5 the destination is unchanged. Painting with pure black or white produces black or white.</td>
- </tr>
-
- <tr>
- <td>soft-light</td>
- <td>Darkens or lightens the colors, dependent on the source color value. If the source color is lighter than 0.5, the destination is lightened. If the source color is darker than 0.5, the destination is darkened, as if it were burned in. The degree of darkening or lightening is proportional to the difference between the source color and 0.5. If it is equal to 0.5, the destination is unchanged. Painting with pure black or white produces a distinctly darker or lighter area, but does not result in pure black or white.</td>
- </tr>
-
- <tr>
- <td>plus</td>
- <td>The source is added to the destination and replaces the destination. This operator is useful for animating a dissolve between two images.</td>
- </tr>
-
- <tr>
- <td>add</td>
- <td>As per 'plus' but transparency data is treated as matte
- values. As such any transparent areas in either image remain
- transparent. </td>
- </tr>
-
- <tr>
- <td>minus</td>
- <td>Subtract the colors in the source image from the
- destination image. When transparency is involved, Opaque areas will be
- subtracted from any destination opaque areas. </td>
- </tr>
-
- <tr>
- <td>subtract</td>
- <td>Subtract the colors in the source image from the
- destination image. When transparency is involved transparent areas are
- subtracted, so only the opaque areas in the source remain opaque in
- the destination image. </td>
- </tr>
-
- <tr>
- <td>difference</td>
- <td>Subtracts the darker of the two constituent colors from the lighter. Painting with white inverts the destination color. Painting with black produces no change.</td>
- </tr>
-
- <tr>
- <td>exclusion</td>
- <td>Produces an effect similar to that of 'difference', but appears as lower contrast. Painting with white inverts the destination color. Painting with black produces no change.</td>
- </tr>
-
- <tr>
- <td>xor</td>
- <td>The part of the source that lies outside of the destination is combined with the part of the destination that lies outside of the source.</td>
- </tr>
-
- <tr>
- <td>copy-*</td>
- <td>Copy the specified channel in the source image to the
- same channel in the destination image. If the channel specified in
- the source image does not exist, (which can only happen for methods,
- '<code>copy-opacity</code>' or '<code>copy-black</code>') then it is
- assumed that the source image is a special grayscale channel image
- of the values to be copied. </td>
- </tr>
-
- <tr>
- <td>change-mask</td>
- <td>Replace any destination pixel that is the similar to the source images pixel (as defined by the current <a href="#fuzz">-fuzz</a> factor), with transparency. </td>
- </tr>
- </tbody>
-</table></div></td>
- </tr>
- <tr>
- <td><a class="anchor" id="interline-spacing"></a>interline-spacing <var>pixels</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="interword-spacing"></a>interword-spacing <var>pixels</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="kerning"></a>kerning <var>pixels</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="line"></a>line <var>x,y x<sub>1</sub>,y<sub>1</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="matte"></a>matte <var>x,y method</var></td>
- <td>Choose from these methods:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>point
+SouthEast</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="compose"></a>image <var>compose x,y width,height 'filename'</var></td>
+ <td>
+ Choose from these compose operations:
+ <div class="card im-card mt-2 shadow-none border overflow-hidden">
+ <div style="max-height:50svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover mb-0">
+ <thead class="table-secondary sticky-top">
+ <tr>
+ <th class="ps-2 py-1">Method</th>
+ <th class="py-1">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-2 font-mono">clear</td>
+ <td>Both the color and the alpha of the destination are cleared. Neither the source nor the destination are used as input.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">src</td>
+ <td>The source is copied to the destination. The destination is not used as input.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">dst</td>
+ <td>The destination is left untouched.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono fw-bold">src-over</td>
+ <td>The source is composited over the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">dst-over</td>
+ <td>The destination is composited over the source and the result replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">src-in</td>
+ <td>The part of the source lying inside of the destination replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">dst-in</td>
+ <td>The part of the destination lying inside of the source replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">src-out</td>
+ <td>The part of the source lying outside of the destination replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">dst-out</td>
+ <td>The part of the destination lying outside of the destination replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">src-atop</td>
+ <td>The part of the source lying inside of the destination is composited onto the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">dst-atop</td>
+ <td>The part of the destination lying inside of the source is composited over the source and replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">multiply</td>
+ <td>The source is multiplied by the destination and replaces the destination. The resultant color is always at least as dark as either of the two constituent colors.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">screen</td>
+ <td>The source and destination are complemented and then multiplied and then replace the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">overlay</td>
+ <td>Multiplies or screens the colors, dependent on the destination color. Source colors overlay the destination whilst preserving its highlights and shadows.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">darken</td>
+ <td>Selects the darker of the destination and source colors.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">lighten</td>
+ <td>Selects the lighter of the destination and source colors.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">linear-light</td>
+ <td>Increase contrast slightly with an impact on the foreground's tonal values.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">color-dodge</td>
+ <td>Brightens the destination color to reflect the source color.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">color-burn</td>
+ <td>Darkens the destination color to reflect the source color.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">hard-light</td>
+ <td>Multiplies or screens the colors, dependent on the source color value.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">soft-light</td>
+ <td>Darkens or lightens the colors, dependent on the source color value.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">plus</td>
+ <td>The source is added to the destination and replaces the destination.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">add</td>
+ <td>As per 'plus' but transparency data is treated as matte values.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">minus</td>
+ <td>Subtract the colors in the source image from the destination image.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">subtract</td>
+ <td>Subtract the colors in the source image from the destination image with transparency handling.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">difference</td>
+ <td>Subtracts the darker of the two constituent colors from the lighter.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">exclusion</td>
+ <td>Produces an effect similar to that of 'difference', but appears as lower contrast.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">xor</td>
+ <td>The part of the source that lies outside of the destination is combined with the part of the destination that lies outside of the source.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">copy-*</td>
+ <td>Copy the specified channel in the source image to the same channel in the destination image.</td>
+ </tr>
+ <tr>
+ <td class="ps-2 font-mono">change-mask</td>
+ <td>Replace any destination pixel that is similar to the source image's pixel with transparency.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="interline-spacing"></a>interline-spacing <var>pixels</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="interword-spacing"></a>interword-spacing <var>pixels</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="kerning"></a>kerning <var>pixels</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="line"></a>line <var>x,y x<sub>1</sub>,y<sub>1</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="matte"></a>matte <var>x,y method</var></td>
+ <td>Choose from these methods:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>point
replace
floodfill
filltoborder
-reset</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="offset"></a>offset <var>offset</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="opacity"></a>opacity <var>opacity</var></td>
- <td>Use percent (e.g. 50%).</td>
- </tr>
- <tr>
- <td><a class="anchor" id="path"></a>path <var>path</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="point"></a>point <var>x,y</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="polygon"></a>polygon <var>x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="polyline"></a>polyline <var>x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="pop-clip-path"></a>pop clip-path</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="pop-defs"></a>pop defs</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="pop-gradient"></a>pop gradient</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="pop-graphic-context"></a>pop graphic-context</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="pop-pattern"></a>pop pattern</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="push"></a>push clip-path "<var>name</var>"</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="push-defs"></a>push defs</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="push-gradient-linear"></a>push gradient <var>id linear x,y x<sub>1</sub>,y<sub>1</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="push-gradient-radial"></a>push gradient <var>id radial x<sub>c</sub>,c<sub>y</sub> x<sub>f</sub>,y<sub>f</sub> radius</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="push-graphic-context"></a>push graphic-context { "<var>id</var>" }</td>
- <td>the <em>id</em> is optional</td>
- </tr>
- <tr>
- <td><a class="anchor" id="push-pattern"></a>push pattern <var>id x,y width,height</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="rectangle"></a>rectangle <var>x,y x<sub>1</sub>,y<sub>1</sub></var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="rotate"></a>rotate <var>angle</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="roundrectangle"></a>roundrectangle <var>x,y x<sub>1</sub>,y<sub>1</sub> width,height</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="scale"></a>scale <var>x,y</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="skewX"></a>skewX <var>angle</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="skewY"></a>skewX <var>angle</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stop-color"></a>stop-color <var>color offset</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke"></a>stroke <var>color</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-antialias"></a>stroke-antialias <var>0 • 1</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-dasharray"></a>stroke-dasharray <var>none • numeric-list</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-dashoffset"></a>stroke-dashoffset <var>offset</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-linecap"></a>stroke-linecap <var>type</var></td>
- <td>Choose from these cap types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>butt
+reset</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="offset"></a>offset <var>offset</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="opacity"></a>opacity <var>opacity</var></td>
+ <td>Use percent (e.g. 50%).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="path"></a>path <var>path</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="point"></a>point <var>x,y</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="polygon"></a>polygon <var>x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="polyline"></a>polyline <var>x,y x<sub>1</sub>,y<sub>1</sub>, ..., x<sub>n</sub>,y<sub>n</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="pop-clip-path"></a>pop clip-path</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="pop-defs"></a>pop defs</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="pop-gradient"></a>pop gradient</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="pop-graphic-context"></a>pop graphic-context</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="pop-pattern"></a>pop pattern</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="push"></a>push clip-path "<var>name</var>"</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="push-defs"></a>push defs</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="push-gradient-linear"></a>push gradient <var>id linear x,y x<sub>1</sub>,y<sub>1</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="push-gradient-radial"></a>push gradient <var>id radial x<sub>c</sub>,c<sub>y</sub> x<sub>f</sub>,y<sub>f</sub> radius</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="push-graphic-context"></a>push graphic-context { "<var>id</var>" }</td>
+ <td>the <em>id</em> is optional</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="push-pattern"></a>push pattern <var>id x,y width,height</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="rectangle"></a>rectangle <var>x,y x<sub>1</sub>,y<sub>1</sub></var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="rotate"></a>rotate <var>angle</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="roundrectangle"></a>roundrectangle <var>x,y x<sub>1</sub>,y<sub>1</sub> width,height</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="scale"></a>scale <var>x,y</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="skewX"></a>skewX <var>angle</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="skewY"></a>skewY <var>angle</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stop-color"></a>stop-color <var>color offset</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke"></a>stroke <var>color</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-antialias"></a>stroke-antialias <var>0 • 1</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-dasharray"></a>stroke-dasharray <var>none • numeric-list</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-dashoffset"></a>stroke-dashoffset <var>offset</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-linecap"></a>stroke-linecap <var>type</var></td>
+ <td>Choose from these cap types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>butt
round
-square</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-linejoin"></a>stroke-linejoin <var>type</var></td>
- <td>Choose from these join types:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>bevel
+square</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-linejoin"></a>stroke-linejoin <var>type</var></td>
+ <td>Choose from these join types:
+ <pre class="p-2 mt-2 mb-0 bg-body border font-mono small"><code>bevel
miter
-round</code></pre></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-miterlimit"></a>stroke-miterlimit <var>limit</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-opacity"></a>stroke-opacity <var>opacity</var></td>
- <td>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).</td>
- </tr>
- <tr>
- <td><a class="anchor" id="stroke-width"></a>stroke-width <var>width</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="text"></a>text <var>"text"</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="text-antialias"></a>text-antialias <var>0 • 1</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="text-undercolor"></a>text-undercolor <var>color</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="translate"></a>translate <var>x,y</var></td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="use"></a>use "<var>url(#id)</var>"</td>
- <td></td>
- </tr>
- <tr>
- <td><a class="anchor" id="viewbox"></a>viewbox <var>x,y x<sub>1</sub>,y<sub>1</sub></var></td>
- <td></td>
- </tr>
-</tbody>
-</table></div>
-<p>Note, the primitives are case sensitive, e.g., use <code>viewbox</code>, not <code>viewBox</code>.</p>
+round</code></pre>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-miterlimit"></a>stroke-miterlimit <var>limit</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-opacity"></a>stroke-opacity <var>opacity</var></td>
+ <td>The opacity ranges from 0.0 (fully transparent) to 1.0 (fully opaque) or as a percentage (e.g. 50%).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="stroke-width"></a>stroke-width <var>width</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="text"></a>text <var>"text"</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="text-antialias"></a>text-antialias <var>0 • 1</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="text-undercolor"></a>text-undercolor <var>color</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="translate"></a>translate <var>x,y</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="use"></a>use "<var>url(#id)</var>"</td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono"><a class="anchor" id="viewbox"></a>viewbox <var>x,y x<sub>1</sub>,y<sub>1</sub></var></td>
+ <td></td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p class="text-muted small mt-2 fst-italic">Note, the primitives are case sensitive, e.g., use <code>viewbox</code>, not <code>viewBox</code>.</p>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/magick-wand/index.html b/www/magick-wand/index.html
index c955dd58e..6b0e6546b 100644
--- a/www/magick-wand/index.html
+++ b/www/magick-wand/index.html
@@ -8,248 +8,362 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | MagickWand, C API</title>
- <meta name="description" content="Discover ImageMagick’s MagickWand API, a simplified C interface for image processing. Learn functions for creating, editing, and converting images with cross‑platform support and powerful features.">
+ <meta name="description" content="Discover ImageMagick’s MagickWand API, a simplified C interface for image processing. Learn functions for creating, editing, and converting images with cross-platform support and powerful features.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | MagickWand, C API">
- <meta property="og:description" content="Discover ImageMagick’s MagickWand API, a simplified C interface for image processing. Learn functions for creating, editing, and converting images with cross‑platform support and powerful features.">
+ <meta property="og:description" content="Discover ImageMagick’s MagickWand API, a simplified C interface for image processing. Learn functions for creating, editing, and converting images with cross-platform support and powerful features.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | MagickWand, C API">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | MagickWand, C API",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick-wand/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover ImageMagick’s MagickWand API, a simplified C interface for image processing. Learn functions for creating, editing, and converting images with cross-platform support and powerful features.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick-wand/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick-wand/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">MagickWand, C API</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">The <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickWand">MagickWand API</a> is the recommended interface between the C programming language and the ImageMagick image processing libraries. Unlike the <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickCore">MagickCore</a> C API, MagickWand uses only a few opaque types. Accessors are available to set or get important wand properties. A description of the MagickWand public methods are found on GitHub:</p>
-
-<ul>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/MagickWand.h">Magick Wand Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/magick-property.h">Set or Get Magick Wand Properties</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/magick-image.h">Magick Wand Image Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/pixel-iterator.h">Pixel Iterator Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/pixel-wand.h">Pixel Wand Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/drawing-wand.h">Image Vector Drawing</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/mogrify.h">Command-line Interface</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/wand-view.h">Wand View Methods</a></li>
- <li><a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/deprecate.h">Deprecated Methods</a></li>
- <li><a href="https://imagemagick.org/exception/">Error and Warning Codes</a></li>
-</ul>
-
-<p>After you write your MagickWand program, compile it like this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ cc `MagickWand-config --cflags --cppflags` -O2 -o wand wand.c `MagickWand-config --ldflags --libs`</samp></pre>
-
-<p>Set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig</samp></pre>
-
-<p>Here is a example program that utilizes the MagickWand API to get you started, <a href="https://imagemagick.org/source/wand.c">wand.c</a>. It reads an image, creates a thumbnail, and writes the result to disk.</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <stdio.h>
-#include <stdlib.h>
-#include <MagickWand/MagickWand.h>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">MagickWand, C API</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover ImageMagick’s MagickWand API, a simplified C interface for image processing. Learn functions for creating, editing, and converting images with cross-platform support and powerful features.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="magickwand-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#overview" class="text-decoration-none text-primary"><i class="bi bi-info-circle me-1"></i> Overview & Methods</a>
+ <span class="text-muted">•</span>
+ <a href="#compiling" class="text-decoration-none text-primary"><i class="bi bi-terminal me-1"></i> Compilation</a>
+ <span class="text-muted">•</span>
+ <a href="#examples" class="text-decoration-none text-primary"><i class="bi bi-code-square me-1"></i> Example Programs</a>
+ </div>
+ </div>
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0" id="overview">
+ <p class="lead text-body mb-3">
+ The <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickWand" class="text-decoration-none" rel="noopener noreferrer" target="_blank">MagickWand API <i class="bi bi-box-arrow-up-right small"></i></a> is the recommended interface between the C programming language and the ImageMagick image processing libraries. Unlike the <a href="https://github.com/ImageMagick/ImageMagick/tree/main/MagickCore" class="text-decoration-none" rel="noopener noreferrer" target="_blank">MagickCore <i class="bi bi-box-arrow-up-right small"></i></a> C API, MagickWand uses only a few opaque types. Accessors are available to set or get important wand properties. A description of the MagickWand public methods can be found on GitHub:
+ </p>
+ <!-- Methods List Grid -->
+ <div class="row g-2 font-mono small">
+ <div class="col-md-6">
+ <ul class="list-unstyled mb-0">
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/MagickWand.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Magick Wand Methods</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/magick-property.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Set or Get Magick Wand Properties</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/magick-image.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Magick Wand Image Methods</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/pixel-iterator.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Pixel Iterator Methods</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/pixel-wand.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Pixel Wand Methods</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6">
+ <ul class="list-unstyled mb-0">
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/drawing-wand.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Image Vector Drawing</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/mogrify.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Command-line Interface</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/wand-view.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Wand View Methods</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/deprecate.h" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Deprecated Methods</a></li>
+ <li class="mb-1"><i class="bi bi-chevron-right text-primary me-1"></i> <a href="https://imagemagick.org/exception/" class="text-decoration-none">Error and Warning Codes</a></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- Compilation Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="compiling">
+ <a class="anchor text-decoration-none text-body" href="#compiling">Compilation & Configuration</a>
+ </h2>
+ <p>After you write your MagickWand program, compile it like this:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ cc `MagickWand-config --cflags --cppflags` -O2 -o wand wand.c `MagickWand-config --ldflags --libs`</code></pre>
+ <p>Set the <code>PKG_CONFIG_PATH</code> environment variable if ImageMagick is not in your default system path:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>$ export PKG_CONFIG_PATH=/usr/local/lib/pkgconfig</code></pre>
+ <!-- Example Programs Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="examples">
+ <a class="anchor text-decoration-none text-body" href="#examples">Example Programs</a>
+ </h2>
+ <!-- Example 1: Thumbnail Generator -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-2">1. Basic Thumbnail Generator (<a href="https://imagemagick.org/source/wand.c" class="text-decoration-none">wand.c</a>)</h5>
+ <p class="text-body-secondary small mb-3">It reads an image, creates a thumbnail, and writes the result to disk.</p>
+ <div class="card bg-body-tertiary border overflow-hidden mb-0">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-3">
+ <pre class="mb-0 font-mono small"><code>#include <stdio.h>
+#include <stdlib.h>
+#include <MagickWand/MagickWand.h>
int main(int argc,char **argv)
{
#define ThrowWandException(wand) \
@@ -265,7 +379,6 @@ int main(int argc,char **argv)
description=(char *) MagickRelinquishMemory(description); \
exit(-1); \
}
-
MagickBooleanType
status;
@@ -300,16 +413,22 @@ int main(int argc,char **argv)
magick_wand=DestroyMagickWand(magick_wand);
MagickWandTerminus();
return(0);
-}
-</code></pre>
-
-<p>Here is another program that shows one way to get and set image pixels with the MagickWand API, <a href="https://imagemagick.org/source/contrast.c">contrast.c</a>. It reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk.</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <stdio.h>
-#include <stdlib.h>
-#include <math.h>
-#include <MagickWand/MagickWand.h>
-
+}</code></pre>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 2: Contrast Enhancement -->
+ <div class="card im-card mb-4 shadow-sm">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-2">2. Pixel-Level Contrast Enhancement (<a href="https://imagemagick.org/source/contrast.c" class="text-decoration-none">contrast.c</a>)</h5>
+ <p class="text-body-secondary small mb-3">It reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk.</p>
+ <div class="card bg-body-tertiary border overflow-hidden mb-0">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-3">
+ <pre class="mb-0 font-mono small"><code>#include <stdio.h>
+#include <stdlib.h>
+#include <math.h>
+#include <MagickWand/MagickWand.h>
int main(int argc,char **argv)
{
#define SigmoidalContrast(x) \
@@ -327,8 +446,8 @@ int main(int argc,char **argv)
description=(char *) MagickRelinquishMemory(description); \
exit(-1); \
}
-
long
+ x,
y;
MagickBooleanType
@@ -349,9 +468,6 @@ int main(int argc,char **argv)
**contrast_pixels,
**pixels;
- register long
- x;
-
unsigned long
width;
@@ -409,16 +525,24 @@ int main(int argc,char **argv)
contrast_wand=DestroyMagickWand(contrast_wand);
MagickWandTerminus();
return(0);
-}
-</code></pre>
-<p><a class="anchor" id="wand-view"></a>Now lets perform the same contrast enhancement while taking advantage of our dual or quad-core processing system by running the algorithm in parallel utilizing wand views. The <a href="https://imagemagick.org/source/wand/sigmoidal-contrast.c">sigmoidal-contrast.c</a> module reads an image, applies sigmoidal non-linearity contrast control, and writes the result to disk just like the previous contrast enhancement program, but now it does its work in parallel (assumes ImageMagick is built with OpenMP support).</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#include <stdio.h>
-#include <stdio.h>
-#include <stdlib.h>
-#include <math.h>
-#include <MagickWand/MagickWand.h>
-
+}</code></pre>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Example 3: Parallel Processing with Wand Views -->
+ <div class="card im-card mb-4 shadow-sm" id="wand-view">
+ <div class="card-body">
+ <h5 class="fw-bold text-primary mb-2">3. Parallel Contrast Enhancement using Wand Views (<a href="https://imagemagick.org/source/wand/sigmoidal-contrast.c" class="text-decoration-none">sigmoidal-contrast.c</a>)</h5>
+ <p class="text-body-secondary small mb-3">
+ Perform the same contrast enhancement while taking advantage of dual or quad-core processing systems by running the algorithm in parallel utilizing wand views (assumes ImageMagick is built with OpenMP support).
+ </p>
+ <div class="card bg-body-tertiary border overflow-hidden mb-0">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-3">
+ <pre class="mb-0 font-mono small"><code>#include <stdio.h>
+#include <stdlib.h>
+#include <math.h>
+#include <MagickWand/MagickWand.h>
static MagickBooleanType SigmoidalContrast(WandView *contrast_view,
const ssize_t y,const int thread_id,void *context)
{
@@ -434,23 +558,22 @@ static MagickBooleanType SigmoidalContrast(WandView *contrast_view,
RectangleInfo
extent;
- register ssize_t
+ ssize_t
x;
extent=GetWandViewExtent(contrast_view);
pixels=GetWandViewPixels(contrast_view);
for (x=0; x < (ssize_t) extent.width; x++)
{
- PixelGetMagickColor(pixels[x],&pixel);
+ PixelGetMagickColor(pixels[x],&pixel);
pixel.red=SigmoidalContrast(pixel.red);
pixel.green=SigmoidalContrast(pixel.green);
pixel.blue=SigmoidalContrast(pixel.blue);
pixel.index=SigmoidalContrast(pixel.index);
- PixelSetPixelColor(pixels[x],&pixel);
+ PixelSetPixelColor(pixels[x],&pixel);
}
return(MagickTrue);
}
-
int main(int argc,char **argv)
{
#define ThrowWandException(wand) \
@@ -466,7 +589,6 @@ int main(int argc,char **argv)
description=(char *) MagickRelinquishMemory(description); \
exit(-1); \
}
-
MagickBooleanType
status;
@@ -511,76 +633,121 @@ int main(int argc,char **argv)
contrast_wand=DestroyMagickWand(contrast_wand);
MagickWandTerminus();
return(0);
-}
-</code></pre>
-<p><code>MagickWandTerminus()</code> is a function in the ImageMagick library that is used to clean up and release resources when shutting down an application that uses ImageMagick. This function should be called in the primary thread of the application's process during the shutdown process. It's crucial that this function is invoked only after any threads that are using ImageMagick functions have terminated.</p>
-
-<p>ImageMagick might internally use threads via OpenMP (a method for parallel programming). As a result, it's important to ensure that any function calls into ImageMagick have completed before calling <code>MagickWandTerminus()</code>. This prevents issues with OpenMP worker threads accessing resources that are destroyed by this termination function.</p>
-
-<p>If OpenMP is being used (starting from version 5.0), the OpenMP implementation itself handles starting and stopping worker threads and allocating and freeing resources using its own methods. This means that after calling <code>MagickWandTerminus()</code>, some OpenMP resources and worker threads might still remain allocated. To address this, the function <code>omp_pause_resource_all(omp_pause_hard)</code> can be invoked. This function, introduced in OpenMP version 5.0, ensures that any resources allocated by OpenMP (such as threads and thread-specific memory) are freed. It's recommended to call this function after <code>MagickWandTerminus()</code> has completed its execution.</p>
+}</code></pre>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Shutdown and Resource Management Notes -->
+ <h3 class="fw-bold mb-3 mt-4">Resource Management & Termination Notes</h3>
+ <div class="card im-card p-4 mb-3 bg-body-tertiary border">
+ <p class="mb-3">
+ <code>MagickWandTerminus()</code> is a function in the ImageMagick library used to clean up and release resources when shutting down an application that uses ImageMagick. This function should be called in the primary thread of the application's process during the shutdown process. It's crucial that this function is invoked only after any threads that are using ImageMagick functions have terminated.
+ </p>
+ <p class="mb-3">
+ ImageMagick might internally use threads via OpenMP (a method for parallel programming). As a result, it's important to ensure that any function calls into ImageMagick have completed before calling <code>MagickWandTerminus()</code>. This prevents issues with OpenMP worker threads accessing resources that are destroyed by this termination function.
+ </p>
+ <p class="mb-0">
+ If OpenMP is being used (starting from version 5.0), the OpenMP implementation itself handles starting and stopping worker threads and allocating and freeing resources using its own methods. This means that after calling <code>MagickWandTerminus()</code>, some OpenMP resources and worker threads might still remain allocated. To address this, the function <code>omp_pause_resource_all(omp_pause_hard)</code> can be invoked. This function, introduced in OpenMP version 5.0, ensures that any resources allocated by OpenMP (such as threads and thread-specific memory) are freed. It's recommended to call this function after <code>MagickWandTerminus()</code> has completed its execution.
+ </p>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/magick/index.html b/www/magick/index.html
index 52027ff5b..cd6b02636 100644
--- a/www/magick/index.html
+++ b/www/magick/index.html
@@ -11,1555 +11,1553 @@
<meta name="description" content="Powerful image manipulation with ImageMagick’s magick command-line tool. Convert, resize, crop, blur, sharpen, annotate, and transform images across formats with ease. Explore examples, options, and advanced features for professional-quality results.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Magick">
<meta property="og:description" content="Powerful image manipulation with ImageMagick’s magick command-line tool. Convert, resize, crop, blur, sharpen, annotate, and transform images across formats with ease. Explore examples, options, and advanced features for professional-quality results.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Magick">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Magick",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/magick/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Powerful image manipulation with ImageMagick’s magick command-line tool. Convert, resize, crop, blur, sharpen, annotate, and transform images across formats with ease. Explore examples, options, and advanced features for professional-quality results.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/magick/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/magick/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Magick</h1>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Magick</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Powerful image manipulation with ImageMagick’s magick command-line tool. Convert, resize, crop, blur, sharpen, annotate, and transform images across formats with ease. Explore examples, options, and advanced features for professional-quality results.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Intro Lead Section -->
+ <div class="row mb-5">
+ <div class="col-lg-10 mx-auto text-center">
+ <p class="lead text-body-secondary fs-5">
+ Use the <code>magick</code> program to convert between image formats, resize, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and perform advanced image processing tasks.
+ </p>
+ <div class="d-flex justify-content-center gap-2 mt-3">
+ <a href="../command-line-processing/index.html" class="btn btn-sm btn-outline-primary d-inline-flex align-items-center gap-1">
+ <i class="bi bi-journal-code"></i> CLI Processing Guide
+ </a>
+ <a href="#options" class="btn btn-sm btn-outline-secondary d-inline-flex align-items-center gap-1">
+ <i class="bi bi-list-nested"></i> Jump to Option Summary
</a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
</div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Use the <code>magick</code> program to convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>magick</code> command or see below for example usages of the command.</p>
-
-<p>We list a few examples of the <samp>$ magick</samp> command here to illustrate its usefulness and ease of use. To get started, lets convert an image in the JPEG format to PNG:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg rose.png </samp></pre>
-
-<p>Next, we reduce the image size before it is written to the PNG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick rose.jpg -resize 50% rose.png </samp></pre>
-
-<ul>
- <a href="../image/rose.jpg">
- <img src="../image/rose.jpg" width="70" height="46" alt="rose" />
- </a>
- <img style="margin-top:13px; margin-bottom:13px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/rose.png">
- <img style="margin-top:11px; margin-bottom:12px;" src="../image/rose.png" width="35" height="23" alt="rose" />
- </a>
-</ul>
-
-<p>You can combine multiple image-processing operations to produce complex results:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick -size 320x85 canvas:none -font Bookman-DemiItalic -pointsize 72 \
- -draw "text 25,60 \'Magick\'" -channel RGBA -blur 0x6 -fill darkred -stroke magenta \
- -draw "text 20,55 \'Magick\'" fuzzy-magick.png </samp></pre>
-
-<ul>
- <a href="../image/fuzzy-magick.png"><img src="../image/fuzzy-magick.png" width="320" height="85" alt="fuzzy-magick" /></a>
-</ul>
-
-<p>or here we resize an image with improved quality:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick input.png -colorspace RGB +sigmoidal-contrast 11.6933 \
- -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 \
- -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png'); </samp></pre>
-
-<p>Utilize other command-line <a href="../command-line-tools/index.html">tools</a> from the <code>magick</code> tool. To invoke this functionality, simply create a symbolic link to the <code>magick</code> tool or specify the tool you want to use as the first argument. These two methods are equivalent:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ ln -s magick identify
-$ identify rose.jpg rose.png
-$ magick identify rose.jpg rose.png </samp></pre>
-
-<p>You can find additional examples of using <code>magick</code> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>magick</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
- <td>adaptively blur pixels; decrease effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-resize">-adaptive-resize <var>geometry</var></a></td>
- <td>adaptively resize image with data dependent triangulation.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-sharpen">-adaptive-sharpen <var>geometry</var></a></td>
- <td>adaptively sharpen pixels; increase effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#affine">-affine <var>matrix</var></a></td>
- <td>affine transform matrix</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#annotate">-annotate <var>geometry text</var></a></td>
- <td>annotate the image with text</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#append">-append</a></td>
- <td>append an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decipher image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-gamma">-auto-gamma</a></td>
- <td>automagically adjust gamma level of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-level">-auto-level</a></td>
- <td>automagically adjust color levels of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bench">-bench <var>iterations</var></a></td>
- <td>measure performance</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bias">-bias <var>value</var></a></td>
- <td>add bias when convolving an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bilateral-blur">-bilateral-blur <var>geometry</var></a></td>
- <td>non-linear, edge-preserving, and noise-reducing smoothing filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#black-threshold">-black-threshold <var>value</var></a></td>
- <td>force all pixels below the threshold into black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-primary">-blue-primary <var>point</var></a></td>
- <td>chromaticity blue primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-shift">-blue-shift <var>factor</var></a></td>
- <td>simulate a scene at nighttime in the moonlight</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blur">-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#brightness-contrast">-brightness-contrast <var>geometry</var></a></td>
- <td>improve brightness / contrast of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#canny">-canny <var>geometry</var></a></td>
- <td>use a multi-stage algorithm to detect a wide range of edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#caption">-caption <var>string</var></a></td>
- <td>assign a caption to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cdl">-cdl <var>filename</var></a></td>
- <td>color correct with a color decision list</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#charcoal">-charcoal <var>radius</var></a></td>
- <td>simulate a charcoal drawing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#chop">-chop <var>geometry</var></a></td>
- <td>remove pixels from the image interior</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clahe">-clahe <var>geometry</var></a></td>
- <td>contrast limited adaptive histogram equalization</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clamp">-clamp</a></td>
- <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-mask">-clip-mask</a> <var>filename</var></td>
- <td>associate clip mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clone">-clone <var>index</var></a></td>
- <td>clone an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clut">-clut</a></td>
- <td>apply a color lookup table to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#connected-components">-connected-components <var>connectivity</var></a></td>
- <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast-stretch">-contrast-stretch <var>geometry</var></a></td>
- <td>improve the contrast in an image by `stretching' the range of intensity value</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorize">-colorize <var>value</var></a></td>
- <td>colorize the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#color-matrix">-color-matrix <var>matrix</var></a></td>
- <td>apply color correction to the image.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#combine">-combine</a></td>
- <td>combine a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compare">-compare</a></td>
- <td>compare image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#complex">-complex<var>operator</var></a></td>
- <td>perform complex mathematics on an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#composite">-composite</a></td>
- <td>composite image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#convolve">-convolve <var>coefficients</var></a></td>
- <td>apply a convolution kernel to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#copy">-copy <var>geometry</var> <var>offset</var></a></td>
- <td>copy pixels from one area of an image to another</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>crop the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cycle">-cycle <var>amount</var></a></td>
- <td>cycle the image colormap</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#deconstruct">-deconstruct</a></td>
- <td>break down an image sequence into constituent parts</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>display the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delete">-delete <var>index</var></a></td>
- <td>delete the image from the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-despeckle</a></td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#direction">-direction <var>type</var></a></td>
- <td>render text right-to-left or left-to-right</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distribute-cache">-distribute-cache <var>port</var></a></td>
- <td>launch a distributed pixel cache server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distort">-distort <var>type coefficients</var></a></td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#draw">-draw <var>string</var></a></td>
- <td>annotate the image with a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#duplicate">-duplicate <var>count,indexes</var></a></td>
- <td>duplicate an image one or more times</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#edge">-edge <var>radius</var></a></td>
- <td>apply a filter to detect edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#emboss">-emboss <var>radius</var></a></td>
- <td>emboss an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encoding">-encoding <var>type</var></a></td>
- <td>text encoding type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#enhance">-enhance</a></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#equalize">-equalize</a></td>
- <td>perform histogram equalization to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate">-evaluate <var>operator value</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate-sequence">-evaluate-sequence <var>operator</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression for an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extent">-extent <var>geometry</var></a></td>
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#family">-family <var>name</var></a></td>
- <td>render text with this font family</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#features">-features <var>distance</var></a></td>
- <td>analyze image features (e.g. contract, correlations, etc.).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fft">-fft</a></td>
- <td>implements the discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fill">-fill <var>color</var></a></td>
- <td>color to use when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#floodfill">-floodfill <var>geometry color</var></a></td>
- <td>floodfill the image with color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#font">-font <var>name</var></a></td>
- <td>render text with this font</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#format_identify_">-format <var>string</var></a></td>
- <td>output formatted image characteristics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#function">-function <var>name</var></a></td>
- <td>apply a function to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fuzz">-fuzz <var>distance</var></a></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fx">-fx <var>expression</var></a></td>
- <td>apply mathematical expression to an image channel(s)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gaussian-blur">-gaussian-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#grayscale">-grayscale <var>method</var></a></td>
- <td>convert image to grayscale</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#green-primary">-green-primary <var>point</var></a></td>
- <td>chromaticity green primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#hough-lines">-hough-lines <var>geometry</var></a></td>
- <td>identify lines in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ift">-ift</a></td>
- <td>implements the inverse discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#illuminant">-illuminant <var>type</var></a></td>
- <td>reference illuminant</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#implode">-implode <var>amount</var></a></td>
- <td>implode image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#insert">-insert <var>index</var></a></td>
- <td>insert last image into the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#integral">-integral</a></td>
- <td>Calculate the sum of values (pixel values) in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intensity">-intensity <var>method</var></a></td>
- <td>method to generate an intensity value from a pixel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intent">-intent <var>type</var></a></td>
- <td>type of rendering intent when managing the image color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interline-spacing">-interline-spacing <var>value</var></a></td>
- <td>the space between two text lines</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interword-spacing">-interword-spacing <var>value</var></a></td>
- <td>the space between two words</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kerning">-kerning <var>value</var></a></td>
- <td>the space between two characters</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kuwahara">-kuwahara <var>geometry</var></a></td>
- <td>edge preserving noise reduction filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>string</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#lat">-lat <var>geometry</var></a></td>
- <td>local adaptive thresholding</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#layers">-layers <var>method</var></a></td>
- <td>optimize or compare image layers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#level">-level <var>value</var></a></td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#linear-stretch">-linear-stretch <var>geometry</var></a></td>
- <td>linear with saturation histogram stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#liquid-rescale">-liquid-rescale <var>geometry</var></a></td>
- <td>rescale image with seam-carving</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#list">-list <var>type</var></a></td>
- <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#loop">-loop <var>iterations</var></a></td>
- <td>add Netscape loop extension to your GIF animation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mask">-mask <var>filename</var></a></td>
- <td>associate a mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#median">-median <var>radius</var></a></td>
- <td>apply a median filter to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mean-shift">-mean-shift <var>geometry</var></a></td>
- <td>delineate arbitrarily shaped clusters in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#metric">-metric <var>type</var></a></td>
- <td>measure differences between images with this metric</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mode">-mode <var>radius</var></a></td>
- <td>make each pixel the 'predominant color' of the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#modulate">-modulate <var>value</var></a></td>
- <td>vary the brightness, saturation, and hue</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#moments">-moments</a></td>
- <td>display image moments.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morph">-morph <var>value</var></a></td>
- <td>morph an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morphology">-morphology <var>method</var></a> <var>kernel</var></td>
- <td>apply a morphology method to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#motion-blur">-motion-blur <var>geometry</var></a></td>
- <td>simulate motion blur</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#noise">-noise <var>radius</var></a></td>
- <td>add or reduce noise in an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#normalize">-normalize</a></td>
- <td>transform image to span the full range of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#opaque">-opaque <var>color</var></a></td>
- <td>change this color to the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ordered-dither">-ordered-dither <var>NxN</var></a></td>
- <td>ordered dither the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#orient">-orient <var>type</var></a></td>
- <td>image orientation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#paint">-paint <var>radius</var></a></td>
- <td>simulate an oil painting</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#perceptible">-perceptible</a></td>
- <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ping">-ping</a></td>
- <td>efficiently determine image attributes</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pointsize">-pointsize <var>value</var></a></td>
- <td>font point size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#polaroid">-polaroid <var>angle</var></a></td>
- <td>simulate a Polaroid picture</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#poly">-poly <var>terms</var></a></td>
- <td>build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#posterize">-posterize <var>levels</var></a></td>
- <td>reduce the image to a limited number of color levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#precision">-precision <var>value</var></a></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#preview">-preview <var>type</var></a></td>
- <td>image preview type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#print">-print <var>string</var></a></td>
- <td>interpret string and print to console</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#process">-process <var>image-filter</var></a></td>
- <td>process the image with a custom image filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotational-blur">-rotational-blur <var>angle</var></a></td>
- <td>radial blur the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#raise">-raise <var>value</var></a></td>
- <td>lighten/darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#random-threshold">-random-threshold <var>low,high</var></a></td>
- <td>random threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#red-primary">-red-primary <var>point</var></a></td>
- <td>chromaticity red primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#region">-region <var>geometry</var></a></td>
- <td>apply options to a portion of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#remap">-remap <var>filename</var></a></td>
- <td>transform image colors to match this set of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#render">-render</a></td>
- <td>render vector graphics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resample">-resample <var>geometry</var></a></td>
- <td>change the resolution of an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#reshape">-reshape <var>geometry</var></a></td>
- <td>reshape the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#roll">-roll <var>geometry</var></a></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sample">-sample <var>geometry</var></a></td>
- <td>scale image with pixel sampling</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scale">-scale <var>geometry</var></a></td>
- <td>scale the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#segment">-segment <var>values</var></a></td>
- <td>segment an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-selective-blur <var>geometry</var></a></td>
- <td>selectively blur pixels within a contrast threshold</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#separate">-separate</a></td>
- <td>separate an image channel into a grayscale image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sepia-tone">-sepia-tone <var>threshold</var></a></td>
- <td>simulate a sepia-toned photo</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shade">-shade <var>degrees</var></a></td>
- <td>shade the image using a distant light source</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shadow">-shadow <var>geometry</var></a></td>
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shave">-shave <var>geometry</var></a></td>
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shear">-shear <var>geometry</var></a></td>
- <td>slide one edge of the image along the X or Y axis</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sigmoidal">-sigmoidal-contrast <var>geometry</var></a></td>
- <td>increase the contrast without saturating highlights or shadows</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#smush">-smush <var>offset</var></a></td>
- <td>smush an image sequence together</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sketch">-sketch <var>geometry</var></a></td>
- <td>simulate a pencil sketch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#solarize">-solarize <var>threshold</var></a></td>
- <td>negate all pixels above the threshold level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sort-pixels">-sort-pixels</a></td>
- <td>sorts pixels within each scanline in ascending order of intensity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#splice">-splice <var>geometry</var></a></td>
- <td>splice the background color into the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#spread">-spread <var>radius</var></a></td>
- <td>displace image pixels by a random amount</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#statistic">-statistic <var>type</var> <var>geometry</var></a></td>
- <td>replace each pixel with corresponding statistic from the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stroke">-stroke <var>color</var></a></td>
- <td>graphic primitive stroke color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strokewidth">-strokewidth <var>value</var></a></td>
- <td>graphic primitive stroke width</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stretch">-stretch <var>type</var></a></td>
- <td>render text with this font stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#style">-style <var>type</var></a></td>
- <td>render text with this font style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swap">-swap <var>indexes</var></a></td>
- <td>swap two images in the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swirl">-swirl <var>degrees</var></a></td>
- <td>swirl image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#texture">-texture <var>filename</var></a></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-threshold <var>value</var></a></td>
- <td>threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile">-tile <var>filename</var></a></td>
- <td>tile image when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile-offset">-tile-offset <var>geometry</var></a></td>
- <td>set the image tile offset</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tint">-tint <var>value</var></a></td>
- <td>tint the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transform">-transform</a></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent">-transparent <var>color</var></a></td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transpose">-transpose</a></td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transverse">-transverse</a></td>
- <td>flop image in the horizontal direction and rotate 270 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#treedepth">-treedepth <var>value</var></a></td>
- <td>color tree depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#type">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#undercolor">-undercolor <var>color</var></a></td>
- <td>annotation bounding box color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unique-colors">-unique-colors</a></td>
- <td>discard all but one of any pixel color.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unsharp">-unsharp <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#view">-view</a></td>
- <td>FlashPix viewing transforms</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#vignette">-vignette <var>geometry</var></a></td>
- <td>soften the edges of the image in vignette style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#wave">-wave <var>geometry</var></a></td>
- <td>alter an image along a sine wave</td>
- </tr>
+ <!-- Command Examples Cards -->
+ <div class="row g-4 mb-5">
+ <!-- Example 1: Format Conversion -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body d-flex flex-column">
+ <h5 class="fw-bold mb-2">Basic Format Conversion</h5>
+ <p class="small text-body-secondary mb-3">Convert an image from JPEG to PNG effortlessly.</p>
+ <div class="terminal-card mt-auto">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">convert.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick rose.jpg rose.png
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#wavelet">-wavelet-denoise <var>threshold</var></a></td>
- <td>removes noise from the image using a wavelet transform</td>
- </tr>
+ <!-- Example 2: Resize -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body d-flex flex-column">
+ <h5 class="fw-bold mb-2">Resizing Images</h5>
+ <p class="small text-body-secondary mb-2">Reduce the image dimensions before saving to PNG format.</p>
+ <div class="d-flex align-items-center justify-content-center gap-3 my-3 p-2 bg-body-tertiary rounded border">
+ <a href="https://imagemagick.org/image/rose.jpg" target="_blank"><img src="https://imagemagick.org/image/rose.jpg" width="70" height="46" alt="Rose Original" class="rounded shadow-sm"></a>
+ <i class="bi bi-arrow-right text-secondary fs-5"></i>
+ <a href="https://imagemagick.org/image/rose.png" target="_blank"><img src="https://imagemagick.org/image/rose.png" width="35" height="23" alt="Rose Resized" class="rounded shadow-sm"></a>
+ </div>
+ <div class="terminal-card mt-auto">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">resize.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick rose.jpg -resize 50% rose.png
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#weight">-weight <var>type</var></a></td>
- <td>render text with this font weight</td>
- </tr>
+ <!-- Example 3: Text & Filters -->
+ <div class="col-12">
+ <div class="card im-card p-3">
+ <div class="card-body">
+ <h5 class="fw-bold mb-2">Complex Operations & Text Rendering</h5>
+ <p class="small text-body-secondary mb-3">Combine drawing, channels, blurring, and colors into a single pipeline.</p>
+ <div class="text-center my-3 p-3 bg-body-tertiary rounded border">
+ <a href="https://imagemagick.org/image/fuzzy-magick.png" target="_blank">
+ <img src="https://imagemagick.org/image/fuzzy-magick.png" width="320" height="85" alt="Fuzzy Magick Text Effect" class="img-fluid rounded shadow-sm">
+ </a>
+ </div>
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">text-effects.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <span class="text-success">$</span> magick -size 320x85 canvas:none -font Bookman-DemiItalic -pointsize 72 \<br>
+ -draw "text 25,60 'Magick'" -channel RGBA -blur 0x6 -fill darkred -stroke magenta \<br>
+ -draw "text 20,55 'Magick'" fuzzy-magick.png
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#white-point">-white-point <var>point</var></a></td>
- <td>chromaticity white point</td>
- </tr>
+ <!-- Example 4: Quality Resizing -->
+ <div class="col-12">
+ <div class="card im-card p-3">
+ <div class="card-body">
+ <h5 class="fw-bold mb-2">High-Quality Sigmoidal Resampling</h5>
+ <p class="small text-body-secondary mb-3">Resize images with minimized artifacts using sigmoidal contrast and custom filters.</p>
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">high-quality-resize.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-x-auto">
+ <span class="text-success">$</span> magick input.png -colorspace RGB +sigmoidal-contrast 11.6933 \<br>
+ -define filter:filter=Sinc -define filter:window=Jinc -define filter:lobes=3 \<br>
+ -resize 400% -sigmoidal-contrast 11.6933 -colorspace sRGB output.png
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#white-threshold">-white-threshold <var>value</var></a></td>
- <td>force all pixels above the threshold into white</td>
- </tr>
+ <!-- Tool Sub-Invocation Note -->
+ <div class="card im-card bg-body-tertiary p-4 mb-5">
+ <div class="row align-items-center g-3">
+ <div class="col-lg-7">
+ <h5 class="fw-bold mb-2"><i class="bi bi-tools text-primary me-2"></i>Invoking Other Command-Line Tools</h5>
+ <p class="small text-body-secondary mb-0">
+ You can utilize other command-line tools through <code>magick</code>. Specify the sub-tool as the first argument or create a symbolic link to the binary—both approaches are equivalent.
+ </p>
+ </div>
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">symlink.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-secondary"># Equivalent invocations:</span><br>
+ <span class="text-success">$</span> ln -s magick identify<br>
+ <span class="text-success">$</span> identify rose.jpg rose.png<br>
+ <span class="text-success">$</span> magick identify rose.jpg rose.png
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#word-break">-word-break <var>type</var></a></td>
- <td>sets whether line breaks appear wherever the text would otherwise overflow its content box. Choose from <code>normal</code>, the default, or <code>break-word</code>.</td>
- </tr>
+ <!-- Option Summary Section -->
+ <section id="options" class="mb-5">
+ <div class="d-flex align-items-center justify-content-between mb-4 border-bottom pb-2">
+ <div class="d-flex align-items-center gap-2">
+ <i class="bi bi-sliders fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Option Summary</h2>
+ </div>
+ <span class="badge bg-secondary font-mono">CLI Options</span>
+ </div>
- <tr>
- <td><a href="../command-line-options/index.html#write">-write <var>filename</var></a></td>
- <td>write images to this file</td>
- </tr>
-</table>
-</div>
+ <p class="text-body-secondary mb-4">
+ The <code>magick</code> command recognizes these options. Click on any option to view detailed documentation.
+ </p>
+
+ <!-- Table Container -->
+ <div class="card im-card overflow-hidden">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col" style="width: 35%;">Option & Parameters</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-blur" class="fw-semibold text-primary text-decoration-none">-adaptive-blur <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">adaptively blur pixels; decrease effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-resize" class="fw-semibold text-primary text-decoration-none">-adaptive-resize <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">adaptively resize image with data dependent triangulation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-sharpen" class="fw-semibold text-primary text-decoration-none">-adaptive-sharpen <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">adaptively sharpen pixels; increase effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adjoin" class="fw-semibold text-primary text-decoration-none">-adjoin</a></td>
+ <td class="text-body">join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#affine" class="fw-semibold text-primary text-decoration-none">-affine <var class="text-body-secondary">matrix</var></a></td>
+ <td class="text-body">affine transform matrix</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="fw-semibold text-primary text-decoration-none">-alpha</a></td>
+ <td class="text-body">on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#annotate" class="fw-semibold text-primary text-decoration-none">-annotate <var class="text-body-secondary">geometry text</var></a></td>
+ <td class="text-body">annotate the image with text</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#antialias" class="fw-semibold text-primary text-decoration-none">-antialias</a></td>
+ <td class="text-body">remove pixel-aliasing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#append" class="fw-semibold text-primary text-decoration-none">-append</a></td>
+ <td class="text-body">append an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="fw-semibold text-primary text-decoration-none">-authenticate <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">decipher image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-gamma" class="fw-semibold text-primary text-decoration-none">-auto-gamma</a></td>
+ <td class="text-body">automagically adjust gamma level of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-level" class="fw-semibold text-primary text-decoration-none">-auto-level</a></td>
+ <td class="text-body">automagically adjust color levels of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-orient" class="fw-semibold text-primary text-decoration-none">-auto-orient</a></td>
+ <td class="text-body">automagically orient image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#background" class="fw-semibold text-primary text-decoration-none">-background <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">background color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bench" class="fw-semibold text-primary text-decoration-none">-bench <var class="text-body-secondary">iterations</var></a></td>
+ <td class="text-body">measure performance</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bias" class="fw-semibold text-primary text-decoration-none">-bias <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">add bias when convolving an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bilateral-blur" class="fw-semibold text-primary text-decoration-none">-bilateral-blur <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">non-linear, edge-preserving, and noise-reducing smoothing filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#black-threshold" class="fw-semibold text-primary text-decoration-none">-black-threshold <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">force all pixels below the threshold into black</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-primary" class="fw-semibold text-primary text-decoration-none">-blue-primary <var class="text-body-secondary">point</var></a></td>
+ <td class="text-body">chromaticity blue primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-shift" class="fw-semibold text-primary text-decoration-none">-blue-shift <var class="text-body-secondary">factor</var></a></td>
+ <td class="text-body">simulate a scene at nighttime in the moonlight</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blur" class="fw-semibold text-primary text-decoration-none">-blur <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="fw-semibold text-primary text-decoration-none">-border <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="fw-semibold text-primary text-decoration-none">-bordercolor <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#brightness-contrast" class="fw-semibold text-primary text-decoration-none">-brightness-contrast <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">improve brightness / contrast of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#canny" class="fw-semibold text-primary text-decoration-none">-canny <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">use a multi-stage algorithm to detect a wide range of edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#caption" class="fw-semibold text-primary text-decoration-none">-caption <var class="text-body-secondary">string</var></a></td>
+ <td class="text-body">assign a caption to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#cdl" class="fw-semibold text-primary text-decoration-none">-cdl <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">color correct with a color decision list</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="fw-semibold text-primary text-decoration-none">-channel <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#charcoal" class="fw-semibold text-primary text-decoration-none">-charcoal <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">simulate a charcoal drawing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#chop" class="fw-semibold text-primary text-decoration-none">-chop <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">remove pixels from the image interior</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clahe" class="fw-semibold text-primary text-decoration-none">-clahe <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">contrast limited adaptive histogram equalization</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clamp" class="fw-semibold text-primary text-decoration-none">-clamp</a></td>
+ <td class="text-body">set each pixel whose value is below zero to zero and any pixel above quantum range to quantum range</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip" class="fw-semibold text-primary text-decoration-none">-clip</a></td>
+ <td class="text-body">clip along the first path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-mask" class="fw-semibold text-primary text-decoration-none">-clip-mask <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">associate clip mask with the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-path" class="fw-semibold text-primary text-decoration-none">-clip-path <var class="text-body-secondary">id</var></a></td>
+ <td class="text-body">clip along a named path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clone" class="fw-semibold text-primary text-decoration-none">-clone <var class="text-body-secondary">index</var></a></td>
+ <td class="text-body">clone an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clut" class="fw-semibold text-primary text-decoration-none">-clut</a></td>
+ <td class="text-body">apply a color lookup table to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#connected-components" class="fw-semibold text-primary text-decoration-none">-connected-components <var class="text-body-secondary">connectivity</var></a></td>
+ <td class="text-body">connected-components uniquely labeled (4 or 8 way connectivity)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast-stretch" class="fw-semibold text-primary text-decoration-none">-contrast-stretch <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">improve contrast by stretching the range of intensity values</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#coalesce" class="fw-semibold text-primary text-decoration-none">-coalesce</a></td>
+ <td class="text-body">merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorize" class="fw-semibold text-primary text-decoration-none">-colorize <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">colorize the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#color-matrix" class="fw-semibold text-primary text-decoration-none">-color-matrix <var class="text-body-secondary">matrix</var></a></td>
+ <td class="text-body">apply color correction to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="fw-semibold text-primary text-decoration-none">-colors <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="fw-semibold text-primary text-decoration-none">-colorspace <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#combine" class="fw-semibold text-primary text-decoration-none">-combine</a></td>
+ <td class="text-body">combine a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="fw-semibold text-primary text-decoration-none">-comment <var class="text-body-secondary">string</var></a></td>
+ <td class="text-body">annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compare" class="fw-semibold text-primary text-decoration-none">-compare</a></td>
+ <td class="text-body">compare image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#complex" class="fw-semibold text-primary text-decoration-none">-complex <var class="text-body-secondary">operator</var></a></td>
+ <td class="text-body">perform complex mathematics on an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compose" class="fw-semibold text-primary text-decoration-none">-compose <var class="text-body-secondary">operator</var></a></td>
+ <td class="text-body">set image composite operator</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#composite" class="fw-semibold text-primary text-decoration-none">-composite</a></td>
+ <td class="text-body">composite image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="fw-semibold text-primary text-decoration-none">-compress <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast" class="fw-semibold text-primary text-decoration-none">-contrast</a></td>
+ <td class="text-body">enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#convolve" class="fw-semibold text-primary text-decoration-none">-convolve <var class="text-body-secondary">coefficients</var></a></td>
+ <td class="text-body">apply a convolution kernel to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#copy" class="fw-semibold text-primary text-decoration-none">-copy <var class="text-body-secondary">geometry offset</var></a></td>
+ <td class="text-body">copy pixels from one area of an image to another</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#crop" class="fw-semibold text-primary text-decoration-none">-crop <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">crop the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#cycle" class="fw-semibold text-primary text-decoration-none">-cycle <var class="text-body-secondary">amount</var></a></td>
+ <td class="text-body">cycle the image colormap</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#decipher" class="fw-semibold text-primary text-decoration-none">-decipher <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="fw-semibold text-primary text-decoration-none">-debug <var class="text-body-secondary">events</var></a></td>
+ <td class="text-body">display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="fw-semibold text-primary text-decoration-none">-define <var class="text-body-secondary">format:option</var></a></td>
+ <td class="text-body">define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#deconstruct" class="fw-semibold text-primary text-decoration-none">-deconstruct</a></td>
+ <td class="text-body">break down an image sequence into constituent parts</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delay" class="fw-semibold text-primary text-decoration-none">-delay <var class="text-body-secondary">centiseconds</var></a></td>
+ <td class="text-body">display the next image after pausing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delete" class="fw-semibold text-primary text-decoration-none">-delete <var class="text-body-secondary">index</var></a></td>
+ <td class="text-body">delete the image from the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="fw-semibold text-primary text-decoration-none">-density <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="fw-semibold text-primary text-decoration-none">-depth <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#despeckle" class="fw-semibold text-primary text-decoration-none">-despeckle</a></td>
+ <td class="text-body">reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#direction" class="fw-semibold text-primary text-decoration-none">-direction <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">render text right-to-left or left-to-right</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#display" class="fw-semibold text-primary text-decoration-none">-display <var class="text-body-secondary">server</var></a></td>
+ <td class="text-body">get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dispose" class="fw-semibold text-primary text-decoration-none">-dispose <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">layer disposal method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distribute-cache" class="fw-semibold text-primary text-decoration-none">-distribute-cache <var class="text-body-secondary">port</var></a></td>
+ <td class="text-body">launch a distributed pixel cache server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distort" class="fw-semibold text-primary text-decoration-none">-distort <var class="text-body-secondary">type coefficients</var></a></td>
+ <td class="text-body">distort image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="fw-semibold text-primary text-decoration-none">-dither <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#draw" class="fw-semibold text-primary text-decoration-none">-draw <var class="text-body-secondary">string</var></a></td>
+ <td class="text-body">annotate the image with a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#duplicate" class="fw-semibold text-primary text-decoration-none">-duplicate <var class="text-body-secondary">count,indexes</var></a></td>
+ <td class="text-body">duplicate an image one or more times</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#edge" class="fw-semibold text-primary text-decoration-none">-edge <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">apply a filter to detect edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#emboss" class="fw-semibold text-primary text-decoration-none">-emboss <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">emboss an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encipher" class="fw-semibold text-primary text-decoration-none">-encipher <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encoding" class="fw-semibold text-primary text-decoration-none">-encoding <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">text encoding type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="fw-semibold text-primary text-decoration-none">-endian <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#enhance" class="fw-semibold text-primary text-decoration-none">-enhance</a></td>
+ <td class="text-body">apply a digital filter to enhance a noisy image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#equalize" class="fw-semibold text-primary text-decoration-none">-equalize</a></td>
+ <td class="text-body">perform histogram equalization to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#evaluate" class="fw-semibold text-primary text-decoration-none">-evaluate <var class="text-body-secondary">operator value</var></a></td>
+ <td class="text-body">evaluate an arithmetic, relational, or logical expression</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#evaluate-sequence" class="fw-semibold text-primary text-decoration-none">-evaluate-sequence <var class="text-body-secondary">operator</var></a></td>
+ <td class="text-body">evaluate expression for an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extent" class="fw-semibold text-primary text-decoration-none">-extent <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">set the image size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="fw-semibold text-primary text-decoration-none">-extract <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#family" class="fw-semibold text-primary text-decoration-none">-family <var class="text-body-secondary">name</var></a></td>
+ <td class="text-body">render text with this font family</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#features" class="fw-semibold text-primary text-decoration-none">-features <var class="text-body-secondary">distance</var></a></td>
+ <td class="text-body">analyze image features (e.g. contrast, correlations)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fft" class="fw-semibold text-primary text-decoration-none">-fft</a></td>
+ <td class="text-body">implements the discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fill" class="fw-semibold text-primary text-decoration-none">-fill <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">color to use when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="fw-semibold text-primary text-decoration-none">-filter <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flatten" class="fw-semibold text-primary text-decoration-none">-flatten</a></td>
+ <td class="text-body">flatten a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flip" class="fw-semibold text-primary text-decoration-none">-flip</a></td>
+ <td class="text-body">flip image in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#floodfill" class="fw-semibold text-primary text-decoration-none">-floodfill <var class="text-body-secondary">geometry color</var></a></td>
+ <td class="text-body">floodfill the image with color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flop" class="fw-semibold text-primary text-decoration-none">-flop</a></td>
+ <td class="text-body">flop image in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#font" class="fw-semibold text-primary text-decoration-none">-font <var class="text-body-secondary">name</var></a></td>
+ <td class="text-body">render text with this font</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#format_identify_" class="fw-semibold text-primary text-decoration-none">-format <var class="text-body-secondary">string</var></a></td>
+ <td class="text-body">output formatted image characteristics</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#frame" class="fw-semibold text-primary text-decoration-none">-frame <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">surround image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#function" class="fw-semibold text-primary text-decoration-none">-function <var class="text-body-secondary">name</var></a></td>
+ <td class="text-body">apply a function to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fuzz" class="fw-semibold text-primary text-decoration-none">-fuzz <var class="text-body-secondary">distance</var></a></td>
+ <td class="text-body">colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fx" class="fw-semibold text-primary text-decoration-none">-fx <var class="text-body-secondary">expression</var></a></td>
+ <td class="text-body">apply mathematical expression to an image channel(s)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gamma" class="fw-semibold text-primary text-decoration-none">-gamma <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">level of gamma correction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gaussian-blur" class="fw-semibold text-primary text-decoration-none">-gaussian-blur <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="fw-semibold text-primary text-decoration-none">-geometry <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="fw-semibold text-primary text-decoration-none">-gravity <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#grayscale" class="fw-semibold text-primary text-decoration-none">-grayscale <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">convert image to grayscale</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#green-primary" class="fw-semibold text-primary text-decoration-none">-green-primary <var class="text-body-secondary">point</var></a></td>
+ <td class="text-body">chromaticity green primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="fw-semibold text-primary text-decoration-none">-help</a></td>
+ <td class="text-body">print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#hough-lines" class="fw-semibold text-primary text-decoration-none">-hough-lines <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">identify lines in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="fw-semibold text-primary text-decoration-none">-identify</a></td>
+ <td class="text-body">identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ift" class="fw-semibold text-primary text-decoration-none">-ift</a></td>
+ <td class="text-body">implements the inverse discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#illuminant" class="fw-semibold text-primary text-decoration-none">-illuminant <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">reference illuminant</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#implode" class="fw-semibold text-primary text-decoration-none">-implode <var class="text-body-secondary">amount</var></a></td>
+ <td class="text-body">implode image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#insert" class="fw-semibold text-primary text-decoration-none">-insert <var class="text-body-secondary">index</var></a></td>
+ <td class="text-body">insert last image into the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#integral" class="fw-semibold text-primary text-decoration-none">-integral</a></td>
+ <td class="text-body">calculate the sum of values (pixel values) in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#intensity" class="fw-semibold text-primary text-decoration-none">-intensity <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">method to generate an intensity value from a pixel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#intent" class="fw-semibold text-primary text-decoration-none">-intent <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">type of rendering intent when managing image color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="fw-semibold text-primary text-decoration-none">-interlace <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interline-spacing" class="fw-semibold text-primary text-decoration-none">-interline-spacing <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">space between two text lines</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="fw-semibold text-primary text-decoration-none">-interpolate <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interword-spacing" class="fw-semibold text-primary text-decoration-none">-interword-spacing <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">space between two words</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kerning" class="fw-semibold text-primary text-decoration-none">-kerning <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">space between two characters</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kuwahara" class="fw-semibold text-primary text-decoration-none">-kuwahara <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">edge preserving noise reduction filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="fw-semibold text-primary text-decoration-none">-label <var class="text-body-secondary">string</var></a></td>
+ <td class="text-body">assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#lat" class="fw-semibold text-primary text-decoration-none">-lat <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">local adaptive thresholding</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#layers" class="fw-semibold text-primary text-decoration-none">-layers <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">optimize or compare image layers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#level" class="fw-semibold text-primary text-decoration-none">-level <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="fw-semibold text-primary text-decoration-none">-limit <var class="text-body-secondary">type value</var></a></td>
+ <td class="text-body">pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#linear-stretch" class="fw-semibold text-primary text-decoration-none">-linear-stretch <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">linear with saturation histogram stretch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#liquid-rescale" class="fw-semibold text-primary text-decoration-none">-liquid-rescale <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">rescale image with seam-carving</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#list" class="fw-semibold text-primary text-decoration-none">-list <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="fw-semibold text-primary text-decoration-none">-log <var class="text-body-secondary">format</var></a></td>
+ <td class="text-body">format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#loop" class="fw-semibold text-primary text-decoration-none">-loop <var class="text-body-secondary">iterations</var></a></td>
+ <td class="text-body">add Netscape loop extension to your GIF animation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mask" class="fw-semibold text-primary text-decoration-none">-mask <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">associate a mask with the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mattecolor" class="fw-semibold text-primary text-decoration-none">-mattecolor <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">frame color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#median" class="fw-semibold text-primary text-decoration-none">-median <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">apply a median filter to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mean-shift" class="fw-semibold text-primary text-decoration-none">-mean-shift <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">delineate arbitrarily shaped clusters in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#metric" class="fw-semibold text-primary text-decoration-none">-metric <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">measure differences between images with this metric</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mode" class="fw-semibold text-primary text-decoration-none">-mode <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">make each pixel the 'predominant color' of the neighborhood</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#modulate" class="fw-semibold text-primary text-decoration-none">-modulate <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">vary brightness, saturation, and hue</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#moments" class="fw-semibold text-primary text-decoration-none">-moments</a></td>
+ <td class="text-body">display image moments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="fw-semibold text-primary text-decoration-none">-monitor</a></td>
+ <td class="text-body">monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="fw-semibold text-primary text-decoration-none">-monochrome</a></td>
+ <td class="text-body">transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#morph" class="fw-semibold text-primary text-decoration-none">-morph <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">morph an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#morphology" class="fw-semibold text-primary text-decoration-none">-morphology <var class="text-body-secondary">method kernel</var></a></td>
+ <td class="text-body">apply a morphology method to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#motion-blur" class="fw-semibold text-primary text-decoration-none">-motion-blur <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">simulate motion blur</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#negate" class="fw-semibold text-primary text-decoration-none">-negate</a></td>
+ <td class="text-body">replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#noise" class="fw-semibold text-primary text-decoration-none">-noise <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">add or reduce noise in an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#normalize" class="fw-semibold text-primary text-decoration-none">-normalize</a></td>
+ <td class="text-body">transform image to span the full range of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#opaque" class="fw-semibold text-primary text-decoration-none">-opaque <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">change this color to the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ordered-dither" class="fw-semibold text-primary text-decoration-none">-ordered-dither <var class="text-body-secondary">NxN</var></a></td>
+ <td class="text-body">ordered dither the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#orient" class="fw-semibold text-primary text-decoration-none">-orient <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">image orientation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="fw-semibold text-primary text-decoration-none">-page <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#paint" class="fw-semibold text-primary text-decoration-none">-paint <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">simulate an oil painting</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#perceptible" class="fw-semibold text-primary text-decoration-none">-perceptible</a></td>
+ <td class="text-body">clamp small pixel values near zero to epsilon</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ping" class="fw-semibold text-primary text-decoration-none">-ping</a></td>
+ <td class="text-body">efficiently determine image attributes</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#pointsize" class="fw-semibold text-primary text-decoration-none">-pointsize <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">font point size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#polaroid" class="fw-semibold text-primary text-decoration-none">-polaroid <var class="text-body-secondary">angle</var></a></td>
+ <td class="text-body">simulate a Polaroid picture</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#poly" class="fw-semibold text-primary text-decoration-none">-poly <var class="text-body-secondary">terms</var></a></td>
+ <td class="text-body">build a polynomial from image sequence and terms</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#posterize" class="fw-semibold text-primary text-decoration-none">-posterize <var class="text-body-secondary">levels</var></a></td>
+ <td class="text-body">reduce image to a limited number of color levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#precision" class="fw-semibold text-primary text-decoration-none">-precision <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">set maximum number of significant digits printed</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#preview" class="fw-semibold text-primary text-decoration-none">-preview <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">image preview type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#print" class="fw-semibold text-primary text-decoration-none">-print <var class="text-body-secondary">string</var></a></td>
+ <td class="text-body">interpret string and print to console</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#process" class="fw-semibold text-primary text-decoration-none">-process <var class="text-body-secondary">image-filter</var></a></td>
+ <td class="text-body">process the image with a custom image filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="fw-semibold text-primary text-decoration-none">-profile <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quality" class="fw-semibold text-primary text-decoration-none">-quality <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="fw-semibold text-primary text-decoration-none">-quantize <var class="text-body-secondary">colorspace</var></a></td>
+ <td class="text-body">reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="fw-semibold text-primary text-decoration-none">-quiet</a></td>
+ <td class="text-body">suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotational-blur" class="fw-semibold text-primary text-decoration-none">-rotational-blur <var class="text-body-secondary">angle</var></a></td>
+ <td class="text-body">radial blur the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#raise" class="fw-semibold text-primary text-decoration-none">-raise <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">lighten/darken image edges to create a 3-D effect</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#random-threshold" class="fw-semibold text-primary text-decoration-none">-random-threshold <var class="text-body-secondary">low,high</var></a></td>
+ <td class="text-body">random threshold the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#red-primary" class="fw-semibold text-primary text-decoration-none">-red-primary <var class="text-body-secondary">point</var></a></td>
+ <td class="text-body">chromaticity red primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="fw-semibold text-primary text-decoration-none">-regard-warnings</a></td>
+ <td class="text-body">pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#region" class="fw-semibold text-primary text-decoration-none">-region <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">apply options to a portion of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#remap" class="fw-semibold text-primary text-decoration-none">-remap <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">transform image colors to match this set of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#render" class="fw-semibold text-primary text-decoration-none">-render</a></td>
+ <td class="text-body">render vector graphics</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#repage" class="fw-semibold text-primary text-decoration-none">-repage <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resample" class="fw-semibold text-primary text-decoration-none">-resample <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">change resolution of an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#reshape" class="fw-semibold text-primary text-decoration-none">-reshape <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">reshape the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resize" class="fw-semibold text-primary text-decoration-none">-resize <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">resize the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="fw-semibold text-primary text-decoration-none">-respect-parentheses</a></td>
+ <td class="text-body">settings remain in effect until parenthesis boundary</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#roll" class="fw-semibold text-primary text-decoration-none">-roll <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">roll an image vertically or horizontally</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="fw-semibold text-primary text-decoration-none">-rotate <var class="text-body-secondary">degrees</var></a></td>
+ <td class="text-body">apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sample" class="fw-semibold text-primary text-decoration-none">-sample <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">scale image with pixel sampling</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="fw-semibold text-primary text-decoration-none">-sampling-factor <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scale" class="fw-semibold text-primary text-decoration-none">-scale <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">scale the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scene" class="fw-semibold text-primary text-decoration-none">-scene <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">image scene number</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="fw-semibold text-primary text-decoration-none">-seed <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#segment" class="fw-semibold text-primary text-decoration-none">-segment <var class="text-body-secondary">values</var></a></td>
+ <td class="text-body">segment an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#threshold" class="fw-semibold text-primary text-decoration-none">-selective-blur <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">selectively blur pixels within a contrast threshold</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#separate" class="fw-semibold text-primary text-decoration-none">-separate</a></td>
+ <td class="text-body">separate an image channel into a grayscale image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sepia-tone" class="fw-semibold text-primary text-decoration-none">-sepia-tone <var class="text-body-secondary">threshold</var></a></td>
+ <td class="text-body">simulate a sepia-toned photo</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="fw-semibold text-primary text-decoration-none">-set <var class="text-body-secondary">attribute value</var></a></td>
+ <td class="text-body">set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shade" class="fw-semibold text-primary text-decoration-none">-shade <var class="text-body-secondary">degrees</var></a></td>
+ <td class="text-body">shade the image using a distant light source</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shadow" class="fw-semibold text-primary text-decoration-none">-shadow <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">simulate an image shadow</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sharpen" class="fw-semibold text-primary text-decoration-none">-sharpen <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shave" class="fw-semibold text-primary text-decoration-none">-shave <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">shave pixels from the image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shear" class="fw-semibold text-primary text-decoration-none">-shear <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">slide one edge of the image along the X or Y axis</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shuffle" class="fw-semibold text-primary text-decoration-none">-shuffle <var class="text-body-secondary">mode</var></a></td>
+ <td class="text-body">reorder sequence based on ascending, descending, or random mode</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sigmoidal" class="fw-semibold text-primary text-decoration-none">-sigmoidal-contrast <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">increase contrast without saturating highlights or shadows</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#smush" class="fw-semibold text-primary text-decoration-none">-smush <var class="text-body-secondary">offset</var></a></td>
+ <td class="text-body">smush an image sequence together</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="fw-semibold text-primary text-decoration-none">-size <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sketch" class="fw-semibold text-primary text-decoration-none">-sketch <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">simulate a pencil sketch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#solarize" class="fw-semibold text-primary text-decoration-none">-solarize <var class="text-body-secondary">threshold</var></a></td>
+ <td class="text-body">negate all pixels above the threshold level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sort-pixels" class="fw-semibold text-primary text-decoration-none">-sort-pixels</a></td>
+ <td class="text-body">sort pixels within each scanline in ascending intensity order</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#splice" class="fw-semibold text-primary text-decoration-none">-splice <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">splice the background color into the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#spread" class="fw-semibold text-primary text-decoration-none">-spread <var class="text-body-secondary">radius</var></a></td>
+ <td class="text-body">displace image pixels by a random amount</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#statistic" class="fw-semibold text-primary text-decoration-none">-statistic <var class="text-body-secondary">type geometry</var></a></td>
+ <td class="text-body">replace pixel with statistic from neighborhood</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="fw-semibold text-primary text-decoration-none">-strip</a></td>
+ <td class="text-body">strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stroke" class="fw-semibold text-primary text-decoration-none">-stroke <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">graphic primitive stroke color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strokewidth" class="fw-semibold text-primary text-decoration-none">-strokewidth <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">graphic primitive stroke width</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stretch" class="fw-semibold text-primary text-decoration-none">-stretch <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">render text with this font stretch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#style" class="fw-semibold text-primary text-decoration-none">-style <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">render text with this font style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swap" class="fw-semibold text-primary text-decoration-none">-swap <var class="text-body-secondary">indexes</var></a></td>
+ <td class="text-body">swap two images in the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swirl" class="fw-semibold text-primary text-decoration-none">-swirl <var class="text-body-secondary">degrees</var></a></td>
+ <td class="text-body">swirl image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#synchronize" class="fw-semibold text-primary text-decoration-none">-synchronize</a></td>
+ <td class="text-body">synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#taint" class="fw-semibold text-primary text-decoration-none">-taint</a></td>
+ <td class="text-body">mark the image as modified</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#texture" class="fw-semibold text-primary text-decoration-none">-texture <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">name of texture to tile onto the image background</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#threshold" class="fw-semibold text-primary text-decoration-none">-threshold <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">threshold the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#thumbnail" class="fw-semibold text-primary text-decoration-none">-thumbnail <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">create a thumbnail of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile" class="fw-semibold text-primary text-decoration-none">-tile <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">tile image when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile-offset" class="fw-semibold text-primary text-decoration-none">-tile-offset <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">set the image tile offset</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tint" class="fw-semibold text-primary text-decoration-none">-tint <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">tint the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transform" class="fw-semibold text-primary text-decoration-none">-transform</a></td>
+ <td class="text-body">affine transform image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent" class="fw-semibold text-primary text-decoration-none">-transparent <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">make this color transparent within the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="fw-semibold text-primary text-decoration-none">-transparent-color <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transpose" class="fw-semibold text-primary text-decoration-none">-transpose</a></td>
+ <td class="text-body">flip image in vertical direction and rotate 90 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transverse" class="fw-semibold text-primary text-decoration-none">-transverse</a></td>
+ <td class="text-body">flop image in horizontal direction and rotate 270 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#treedepth" class="fw-semibold text-primary text-decoration-none">-treedepth <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">color tree depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#trim" class="fw-semibold text-primary text-decoration-none">-trim</a></td>
+ <td class="text-body">trim image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#type" class="fw-semibold text-primary text-decoration-none">-type <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">image type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#undercolor" class="fw-semibold text-primary text-decoration-none">-undercolor <var class="text-body-secondary">color</var></a></td>
+ <td class="text-body">annotation bounding box color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unique-colors" class="fw-semibold text-primary text-decoration-none">-unique-colors</a></td>
+ <td class="text-body">discard all but one of any pixel color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#units" class="fw-semibold text-primary text-decoration-none">-units <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">the units of image resolution</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unsharp" class="fw-semibold text-primary text-decoration-none">-unsharp <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="fw-semibold text-primary text-decoration-none">-verbose</a></td>
+ <td class="text-body">print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="fw-semibold text-primary text-decoration-none">-version</a></td>
+ <td class="text-body">print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#view" class="fw-semibold text-primary text-decoration-none">-view</a></td>
+ <td class="text-body">FlashPix viewing transforms</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#vignette" class="fw-semibold text-primary text-decoration-none">-vignette <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">soften the edges of the image in vignette style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="fw-semibold text-primary text-decoration-none">-virtual-pixel <var class="text-body-secondary">method</var></a></td>
+ <td class="text-body">access method for pixels outside boundaries of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#wave" class="fw-semibold text-primary text-decoration-none">-wave <var class="text-body-secondary">geometry</var></a></td>
+ <td class="text-body">alter an image along a sine wave</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#wavelet" class="fw-semibold text-primary text-decoration-none">-wavelet-denoise <var class="text-body-secondary">threshold</var></a></td>
+ <td class="text-body">removes noise from image using a wavelet transform</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#weight" class="fw-semibold text-primary text-decoration-none">-weight <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">render text with this font weight</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-point" class="fw-semibold text-primary text-decoration-none">-white-point <var class="text-body-secondary">point</var></a></td>
+ <td class="text-body">chromaticity white point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-threshold" class="fw-semibold text-primary text-decoration-none">-white-threshold <var class="text-body-secondary">value</var></a></td>
+ <td class="text-body">force all pixels above the threshold into white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#word-break" class="fw-semibold text-primary text-decoration-none">-word-break <var class="text-body-secondary">type</var></a></td>
+ <td class="text-body">sets line break behavior (normal or break-word)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="fw-semibold text-primary text-decoration-none">-write <var class="text-body-secondary">filename</var></a></td>
+ <td class="text-body">write images to this file</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/miff/index.html b/www/miff/index.html
index b38bf7c3a..a26346245 100644
--- a/www/miff/index.html
+++ b/www/miff/index.html
@@ -11,446 +11,587 @@
<meta name="description" content="Discover the Magick Image File Format (MIFF) used by ImageMagick to store image data, attributes, and comments. Learn its structure, portability, and how MIFF supports efficient image manipulation across platforms.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Magick Image File Format">
<meta property="og:description" content="Discover the Magick Image File Format (MIFF) used by ImageMagick to store image data, attributes, and comments. Learn its structure, portability, and how MIFF supports efficient image manipulation across platforms.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Magick Image File Format">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Magick Image File Format",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/miff/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover the Magick Image File Format (MIFF) used by ImageMagick to store image data, attributes, and comments. Learn its structure, portability, and how MIFF supports efficient image manipulation across platforms.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/miff/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/miff/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Magick Image File Format</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Magick Image File Format</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover the Magick Image File Format (MIFF) used by ImageMagick to store image data, attributes, and comments. Learn its structure, portability, and how MIFF supports efficient image manipulation across platforms.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#miff-header">MIFF Header</a> • <a href="#binary">MIFF Binary Data</a></p>
-
-<p class="lead">The Magick Image File Format (MIFF) is ImageMagick's own platform-independent format for storing bitmap images. It has an advantage over other image formats in that it stores all metadata known to ImageMagick (e.g. image color profiles, comments, author, copyright, etc.), whereas, other formats may only support a small portion of available metadata or none at all. A MIFF image file consists of two sections. The first section is a header composed of keys describing the image in text form. The next section is the binary image data. We discuss these sections in detail below.</p>
-
-<h2><a class="anchor" id="miff-header"></a>MIFF Header</h2>
-
-
-<p>The MIFF header is composed entirely of ISO-8859-1 characters. The fields in the header are key and value combination in the <var>key = value</var> format, with each key and value separated by an equal sign (<code>=</code>). Each <var>key = value</var> combination is delimited by at least one control or whitespace character. Comments may appear in the header section and are always delimited by braces. The MIFF header always ends with a colon (<code>:</code>) character, followed by a <var>ctrl-Z</var> character. It is also common to proceed the colon with a <var>formfeed</var> and a <var>newline</var> character. The <var>formfeed</var> prevents the listing of binary data when using the <code>more</code> Linux program, whereas, the <var>ctrl-Z</var> has the same effect with the <code>type</code> command on the Windows command line.</p>
-
-<p>The following is a partial list of <var> key = value</var> combinations that are typically be found in a MIFF file:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tr>
- <td>background-color = <var>color</var></td>
- <td> </td>
- </tr>
- <tr>
- <td>border-color = <var>color</var></td>
- <td> </td>
- </tr>
- <tr>
- <td>matte-color = <var>color</var></td>
- <td>these optional keys reflect the image background, border, and matte colors respectively. A <a href="../color/index.html">color</a> can be a name (e.g. white) or a hex value (e.g. #ccc).</td>
- </tr>
- <tr>
- <td>class = { DirectClass, PseudoClass }</td>
- <td>the type of binary pixel data stored in the MIFF file. If this key is not present, DirectClass pixel data is assumed.</td>
- </tr>
- <tr>
- <td>colors = <var> value</var></td>
- <td>the number of colors in a DirectClass image. For a PseudoClass image, this key specifies the number of entries in the colormap. If this key is not present in the header, and the image is PseudoClass, a linear 256 color grayscale colormap is assumed. The maximum number of colormap entries is 65536.</td>
- </tr>
- <tr>
- <td>colorspace = { RGB, CMYK, ... }</td>
- <td>the colorspace of the pixel data. The default is RGB.</td>
- </tr>
- <tr>
- <td>columns = value</td>
- <td>the width of the image in pixels. This a required key and has no default value.</td>
- </tr>
- <tr>
- <td>compression = {BZip, None, Zip, ... }</td>
- <td>the type of algorithm used to compress the image data. If this key is not present, the pixel data is assumed to be uncompressed.</td>
- </tr>
- <tr>
- <td>delay = <var>microseconds</var></td>
- <td>the interframe delay in an image sequence in microseconds.</td>
- </tr>
- <tr>
- <td>depth = { 8, 16, 32 }</td>
- <td>the depth of a single color value representing values from 0 to 255 (depth 8), 0 - 65535 (depth 16), or 0 - 4294967295 (depth 32). If this key is absent, a depth of 8 is assumed.</td>
- </tr>
- <tr>
- <td>dispose = <var>value</var></td>
- <td>layer disposal method. Here are the valid values:
- <ul>
- <dd class="col-md-8">0. No disposal specified.</dd>
- <dd class="col-md-8">1. Do not dispose between frames.</dd>
- <dd class="col-md-8">2. Overwrite frame with background color from header.</dd>
- <dd class="col-md-8">3. Overwrite with previous frame.</dd>
- </ul>
- </td>
- </tr>
- <tr>
- <td>gamma = <var>value</var></td>
- <td>the gamma of the image. If it is not specified, a gamma of 1.0 (linear brightness response) is assumed.</td>
- </tr>
- <tr>
- <td>id=ImageMagick</td>
- <td>identifies the file as a MIFF-format image file. This key is required, must be the first key-value pair, can only appear once, and has no default. Although this key can appear anywhere in the header, it should start as the first key of the header in column 1. This will allow programs like <code>file</code>(1) to easily identify the file as MIFF.</td>
- </tr>
- <tr>
- <td>iterations = <var>value</var></td>
- <td>the number of times an image sequence loops before stopping.</td>
- </tr>
- <tr>
- <td>label = { <var>string </var>]</td>
- <td>defines a short title or caption for the image. If any whitespace appears in the label, it must be enclosed within braces.</td>
- </tr>
- <tr>
- <td>matte = { True, False }</td>
- <td>specifies whether the image has matte data. Matte data is generally useful for image compositing.</td>
- </tr>
- <tr>
- <td>montage = <var><width>x<height>[+-]<x offset>[+-]<y offset></var></td>
- <td>size and location of the individual tiles of a composite image.
- Use this key when the image is a composite of a number of different tiles. A tile consists of an image and optionally a border and a label. <var>Width</var> is the size in pixels of each individual tile in the horizontal direction and <var>height</var> is the size in the vertical direction. Each tile must have an equal number of pixels in width and equal in height. However, the width can differ from the height. <var>X offset</var> is the offset in number of pixels from the vertical edge of the composite image where the first tile of a row begins and <var>y offset</var> is the offset from the horizontal edge where the first tile of a column begins. If this key is specified, a directory of tile names must follow the image header. The format of the directory is explained below.</td>
- </tr>
- <tr>
- <td>page = <var>value</var></td>
- <td>preferred size and location of an image canvas.</td>
- </tr>
- <tr>
- <td>profile-icc = <var>value</var></td>
- <td>the number of bytes in the International Color Consortium color profile. The profile is defined by the ICC profile specification located at <a href="https://www.color.org/icc_specs2/">https://www.color.org/icc_specs2/</a>.</td>
- </tr>
- <td>red-primary = <var>x,y</var></td>
- <td> </td>
- <tr>
- <td>green-primary = <var>x,y</var></td>
- <td> </td>
- </tr>
- <td>blue-primary = <var>x,y</var></td>
- <td> </td>
- <tr>
- <td>white-point = <var>x,y</var></td>
- <td>this optional key reflects the chromaticity primaries and white point.</td>
- </tr>
- <tr>
- <td>rendering-intent = { saturation, perceptual, absolute, relative }</td>
- <td>Rendering intent is the CSS-1 property that has been defined by the International Color Consortium (<a href="https://www.color.org/">https://www.color.org/</a>).</td>
- </tr>
- <tr>
- <td>resolution = <var><x-resolution>x<y-resolution></var></td>
- <td>vertical and horizontal resolution of the image. See units for the specific resolution units (e.g. pixels per inch).</td>
- </tr>
- <tr>
- <td>rows = <var>value</var></td>
- <td>the height of the image in pixels. This a required key and has no default value.</td>
- </tr>
- <tr>
- <td>scene = <var>value</var></td>
- <td>the sequence number for this MIFF image file. This optional key is useful when a MIFF image file is one in a sequence of files used in an animation.</td>
- </tr>
- <tr>
- <td>signature = <var>value</var></td>
- <td>this optional key contains a string that uniquely identifies the image pixel contents. NIST's SHA-256 message digest algorithm is recommended.</td>
- </tr>
- <tr>
- <td>units = { pixels-per-inch, pixels-per-centimeter }</td>
- <td>image resolution units.</td>
- </tr>
-</table></div>
-
-<p>Other key value pairs are permitted. If a value contains whitespace it must be enclosed with braces as illustrated here:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>id=ImageMagick
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="miff-container">
+ <!-- Quick Jump Navigation -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0 shadow-sm">
+ <div class="d-flex justify-content-center flex-wrap gap-3 fw-semibold small text-uppercase tracking-wider">
+ <a href="#miff-header" class="text-decoration-none text-primary"><i class="bi bi-file-text me-1"></i> MIFF Header</a>
+ <span class="text-muted">•</span>
+ <a href="#binary" class="text-decoration-none text-primary"><i class="bi bi-file-binary me-1"></i> MIFF Binary Data</a>
+ </div>
+ </div>
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-4 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-0">
+ The Magick Image File Format (MIFF) is ImageMagick's own platform-independent format for storing bitmap images. It has an advantage over other image formats in that it stores all metadata known to ImageMagick (e.g., image color profiles, comments, author, copyright, etc.), whereas other formats may only support a small portion of available metadata or none at all. A MIFF image file consists of two sections. The first section is a header composed of keys describing the image in text form. The next section is the binary image data. We discuss these sections in detail below.
+ </p>
+ </div>
+ <!-- MIFF Header Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="miff-header">
+ <a class="anchor text-decoration-none text-body" href="#miff-header">MIFF Header</a>
+ </h2>
+ <p class="mb-3">
+ The MIFF header is composed entirely of ISO-8859-1 characters. The fields in the header are key and value combinations in the <var>key = value</var> format, with each key and value separated by an equal sign (<code>=</code>). Each <var>key = value</var> combination is delimited by at least one control or whitespace character. Comments may appear in the header section and are always delimited by braces. The MIFF header always ends with a colon (<code>:</code>) character, followed by a <var>ctrl-Z</var> character. It is also common to precede the colon with a <var>formfeed</var> and a <var>newline</var> character. The <var>formfeed</var> prevents the listing of binary data when using the <code>more</code> Linux program, whereas the <var>ctrl-Z</var> has the same effect with the <code>type</code> command on the Windows command line.
+ </p>
+ <p>The following is a partial list of <var>key = value</var> combinations that are typically found in a MIFF file:</p>
+ <div class="card im-card shadow-sm mb-4 overflow-hidden">
+ <div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;" class="p-0">
+ <table class="table table-sm table-hover table-striped mb-0 align-middle">
+ <colgroup>
+ <col style="width: 35%;">
+ <col style="width: 65%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th class="ps-3 py-2">Key Pattern / Value</th>
+ <th class="py-2">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="ps-3 font-mono">background-color = <var>color</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">border-color = <var>color</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">matte-color = <var>color</var></td>
+ <td>These optional keys reflect the image background, border, and matte colors respectively. A <a href="../color/index.html" class="text-decoration-none">color</a> can be a name (e.g., white) or a hex value (e.g., #ccc).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">class = { DirectClass, PseudoClass }</td>
+ <td>The type of binary pixel data stored in the MIFF file. If this key is not present, DirectClass pixel data is assumed.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">colors = <var>value</var></td>
+ <td>The number of colors in a DirectClass image. For a PseudoClass image, this key specifies the number of entries in the colormap. If this key is not present in the header, and the image is PseudoClass, a linear 256 color grayscale colormap is assumed. The maximum number of colormap entries is 65536.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">colorspace = { RGB, CMYK, ... }</td>
+ <td>The colorspace of the pixel data. The default is RGB.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">columns = <var>value</var></td>
+ <td>The width of the image in pixels. This is a required key and has no default value.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">compression = { BZip, None, Zip, ... }</td>
+ <td>The type of algorithm used to compress the image data. If this key is not present, the pixel data is assumed to be uncompressed.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">delay = <var>microseconds</var></td>
+ <td>The interframe delay in an image sequence in microseconds.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">depth = { 8, 16, 32 }</td>
+ <td>The depth of a single color value representing values from 0 to 255 (depth 8), 0 - 65535 (depth 16), or 0 - 4294967295 (depth 32). If this key is absent, a depth of 8 is assumed.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">dispose = <var>value</var></td>
+ <td>
+ Layer disposal method. Valid values:
+ <ul class="mb-0 ps-3 mt-1 small">
+ <li>0. No disposal specified.</li>
+ <li>1. Do not dispose between frames.</li>
+ <li>2. Overwrite frame with background color from header.</li>
+ <li>3. Overwrite with previous frame.</li>
+ </ul>
+ </td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">gamma = <var>value</var></td>
+ <td>The gamma of the image. If it is not specified, a gamma of 1.0 (linear brightness response) is assumed.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">id = ImageMagick</td>
+ <td>Identifies the file as a MIFF-format image file. This key is required, must be the first key-value pair, can only appear once, and has no default. Although this key can appear anywhere in the header, it should start as the first key of the header in column 1 to allow programs like <code>file</code>(1) to easily identify the file as MIFF.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">iterations = <var>value</var></td>
+ <td>The number of times an image sequence loops before stopping.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">label = { <var>string</var> }</td>
+ <td>Defines a short title or caption for the image. If any whitespace appears in the label, it must be enclosed within braces.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">matte = { True, False }</td>
+ <td>Specifies whether the image has matte data. Matte data is generally useful for image compositing.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">montage = <var><width>x<height>[+-]<x>[+-]<y></var></td>
+ <td>Size and location of the individual tiles of a composite image. Use this key when the image is a composite of a number of different tiles. A tile consists of an image and optionally a border and a label.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">page = <var>value</var></td>
+ <td>Preferred size and location of an image canvas.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">profile-icc = <var>value</var></td>
+ <td>The number of bytes in the International Color Consortium color profile. Defined by the ICC profile specification located at <a href="https://www.color.org/icc_specs2/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">https://www.color.org/icc_specs2/</a>.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">red-primary = <var>x,y</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">green-primary = <var>x,y</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">blue-primary = <var>x,y</var></td>
+ <td></td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">white-point = <var>x,y</var></td>
+ <td>This optional key reflects the chromaticity primaries and white point.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">rendering-intent = { saturation, perceptual, absolute, relative }</td>
+ <td>Rendering intent is the CSS-1 property defined by the International Color Consortium (<a href="https://www.color.org/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">https://www.color.org/</a>).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">resolution = <var><x-res>x<y-res></var></td>
+ <td>Vertical and horizontal resolution of the image. See units for specific resolution units (e.g., pixels per inch).</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">rows = <var>value</var></td>
+ <td>The height of the image in pixels. This is a required key and has no default value.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">scene = <var>value</var></td>
+ <td>The sequence number for this MIFF image file. This optional key is useful when a MIFF image file is one in a sequence of files used in an animation.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">signature = <var>value</var></td>
+ <td>This optional key contains a string that uniquely identifies the image pixel contents. NIST's SHA-256 message digest algorithm is recommended.</td>
+ </tr>
+ <tr>
+ <td class="ps-3 font-mono">units = { pixels-per-inch, pixels-per-centimeter }</td>
+ <td>Image resolution units.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p>Other key-value pairs are permitted. If a value contains whitespace, it must be enclosed with braces as illustrated here:</p>
+ <pre class="p-3 mb-3 rounded bg-body-tertiary border font-mono small"><code>id=ImageMagick
class=PseudoClass colors=256 matte=False
columns=1280 rows=1024 depth=8
compression=RLE
colorspace=RGB
-copyright={© 1999-2017 ImageMagick Studio LLC}
-⋮
-</code></pre>
-
-<p>Note that <var>key = value</var> combinations may be separated by <var>newlines</var> or spaces and may occur in any order within the header. Comments (within braces) may appear anywhere before the colon.</p>
-
-<p>If you specify the montage key in the header, follow the header with a directory of image tiles. This directory consists of a name for each tile of the composite image separated by a <var>newline</var> character. The list is terminated with a NULL character.</p>
-
-<p>If you specify the color-profile key in the header, follow the header (or montage directory if the montage key is in the header) with the binary color profile.</p>
-
-<p>The header is separated from the image data by a <code>:</code> character immediately followed by a <var>newline</var>.</p>
-
-<h2><a class="anchor" id="binary"></a>MIFF Binary Data</h2>
-
-<p>Next comes the binary image data itself. How the image data is formatted depends upon the class of the image as specified (or not specified) by the value of the class key in the header.</p>
-
-<p>DirectClass images are continuous-tone, images stored as RGB (red, green, blue), RGBA (red, green, blue, alpha), CMYK (cyan, yellow, magenta, black), or CMYKA (cyan, yellow, magenta, black, alpha) intensity values as defined by the colorspace key. Each intensity value is one byte in length for images of depth 8 (0..255), two bytes for a depth of 16 (0..65535), and images of depth 32 (0..4294967295) require four bytes in most significant byte first order.</p>
-
-<p>PseudoClass images are colormapped RGB images. The colormap is stored as a series of red, green, and blue pixel values, each value being a byte in size. If the image depth is 16, each colormap entry consumes two bytes with the most significant byte being first. The number of colormap entries is defined by the colors key. The colormap data occurs immediately following the header (or image directory if the montage key is in the header). PseudoClass image data is an array of index values into the color map. If there are 256
-or fewer colors in the image, each byte of image data contains an index value. If the image contains more than 256 colors or the image depth is 16, the index value is stored as two contiguous bytes with the most significant byte being first. If matte is true, each colormap index is followed by a 1 or 2-byte alpha value.</p>
-
-<p>The image pixel data in a MIFF file may be uncompressed, runlength encoded, Zip compressed, or BZip compressed. The compression key in the header defines how the image data is compressed. Uncompressed pixels are stored one scanline at a time in row order. Runlength-encoded compression counts runs of identical adjacent pixels and stores the pixels followed by a length byte (the number of identical pixels minus 1). Zip and BZip compression compresses each row of an image and precedes the compressed row with the length of compressed pixel bytes as a word in most significant byte first order.</p>
-
-<p>MIFF files may contain more than one image. Simply concatenate each individual image (composed of a header and image data) into one file.</p>
-
+copyright={© 1999 ImageMagick Studio LLC}
+⋮</code></pre>
+ <p class="mb-3">Note that <var>key = value</var> combinations may be separated by <var>newlines</var> or spaces and may occur in any order within the header. Comments (within braces) may appear anywhere before the colon.</p>
+ <p class="mb-3">If you specify the montage key in the header, follow the header with a directory of image tiles. This directory consists of a name for each tile of the composite image separated by a <var>newline</var> character. The list is terminated with a NULL character.</p>
+ <p class="mb-3">If you specify the color-profile key in the header, follow the header (or montage directory if the montage key is in the header) with the binary color profile.</p>
+ <p class="mb-4">The header is separated from the image data by a <code>:</code> character immediately followed by a <var>newline</var>.</p>
+ <!-- MIFF Binary Data Section -->
+ <h2 class="fw-bold border-bottom pb-2 mb-4 mt-5" id="binary">
+ <a class="anchor text-decoration-none text-body" href="#binary">MIFF Binary Data</a>
+ </h2>
+ <p class="mb-3">Next comes the binary image data itself. How the image data is formatted depends upon the class of the image as specified (or not specified) by the value of the class key in the header.</p>
+ <p class="mb-3">
+ DirectClass images are continuous-tone images stored as RGB (red, green, blue), RGBA (red, green, blue, alpha), CMYK (cyan, yellow, magenta, black), or CMYKA (cyan, yellow, magenta, black, alpha) intensity values as defined by the colorspace key. Each intensity value is one byte in length for images of depth 8 (0..255), two bytes for a depth of 16 (0..65535), and images of depth 32 (0..4294967295) require four bytes in most significant byte first order.
+ </p>
+ <p class="mb-3">
+ PseudoClass images are colormapped RGB images. The colormap is stored as a series of red, green, and blue pixel values, each value being a byte in size. If the image depth is 16, each colormap entry consumes two bytes with the most significant byte being first. The number of colormap entries is defined by the colors key. The colormap data occurs immediately following the header (or image directory if the montage key is in the header). PseudoClass image data is an array of index values into the color map. If there are 256 or fewer colors in the image, each byte of image data contains an index value. If the image contains more than 256 colors or the image depth is 16, the index value is stored as two contiguous bytes with the most significant byte being first. If matte is true, each colormap index is followed by a 1- or 2-byte alpha value.
+ </p>
+ <p class="mb-4">
+ The image pixel data in a MIFF file may be uncompressed, runlength encoded, Zip compressed, or BZip compressed. The compression key in the header defines how the image data is compressed. Uncompressed pixels are stored one scanline at a time in row order. Runlength-encoded compression counts runs of identical adjacent pixels and stores the pixels followed by a length byte (the number of identical pixels minus 1). Zip and BZip compression compresses each row of an image and precedes the compressed row with the length of compressed pixel bytes as a word in most significant byte first order. MIFF files may contain more than one image. Simply concatenate each individual image (composed of a header and image data) into one file.
+ </p>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/mirror/index.html b/www/mirror/index.html
index d6565d661..395526d83 100644
--- a/www/mirror/index.html
+++ b/www/mirror/index.html
@@ -11,309 +11,601 @@
<meta name="description" content="ImageMagick source and binary distributions are available from a variety of mirrors around the world.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Mirror">
<meta property="og:description" content="ImageMagick source and binary distributions are available from a variety of mirrors around the world.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Mirror">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Mirror",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/mirror/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick source and binary distributions are available from a variety of mirrors around the world.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/mirror/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/mirror/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Mirror</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Mirror</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick source and binary distributions are available from a variety of mirrors around the world.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">ImageMagick source and binary distributions are available from a variety of FTP and Web mirrors around the world listed below. ImageMagick stable and development source releases are also available from <a href="https://github.com/ImageMagick">Git</a>. Before you download, you may want to review recent <a href="../changelog/index.html">changes</a> to the ImageMagick distribution. The authoritative source code repository is <a href="https://github.com/ImageMagick/ImageMagick" rel="noopener noreferrer" target="_blank">https://github.com/ImageMagick</a>.</p>
-<p>The latest release of ImageMagick is version 7.1.2-31.</p>
-<dl>
- <dt>Australia</dt>
- <dd><a href="https://mirror.endianness.com/imagemagick" rel="noopener noreferrer" target="_blank">https://mirror.endianness.com/imagemagick</a></dd>
- <dd><a href="https://mirror.aarnet.edu.au/pub/imagemagick/" rel="noopener noreferrer" target="_blank">https://mirror.aarnet.edu.au/pub/imagemagick/</a></dd>
- <dt>Germany</dt>
- <dd><a href="https://mirror.dogado.de/imagemagick/" rel="noopener noreferrer" target="_blank">https://mirror.dogado.de/imagemagick/</a></dd>
- <dd><a href="https://mirror.checkdomain.de/imagemagick/" rel="noopener noreferrer" target="_blank">http://mirror.checkdomain.de/imagemagick/</a></dd>
- <dd><a href="ftp://mirror.checkdomain.de/imagemagick/">ftp://mirror.checkdomain.de/imagemagick/</a></dd>
- <dt>Poland</dt>
- <dd><a href="https://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/" rel="noopener noreferrer" target="_blank">https://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/</a></dd>
- <dd><a href="rsync://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/">rsync://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/</a></dd>
- <dt>Sweden</dt>
- <dd><a href="https://mirror.accum.se/mirror/imagemagick.org/ftp/" rel="noopener noreferrer" target="_blank">https://mirror.accum.se/mirror/imagemagick.org/ftp/</a></dd>
- <dd><a href="rsync://mirror.accum.se/mirror/imagemagick.org/ftp/">rsync://mirror.accum.se/mirror/imagemagick.org/ftp/</a></dd>
- <dt>Switzerland</dt>
- <dd><a href="https://mirror.metanet.ch/imagemagick/" rel="noopener noreferrer" target="_blank">https://mirror.metanet.ch/imagemagick/</a></dd>
- <dt>United States</dt>
- <dd><a href="https://download.imagemagick.org/archive/" rel="noopener noreferrer" target="_blank">https://download.imagemagick.org/archive/</a></dd>
- <dd><a href="https://github.com/ImageMagick" rel="noopener noreferrer" target="_blank">https://github.com/ImageMagick</a> (Git)</dd>
- <dt>Select Binaries </dt>
- <dd><a href="http://www.macports.org/ports.php?by=name&substr=imagemagick" rel="noopener noreferrer" target="_blank">http://www.macports.org/ports.php?by=name&substr=imagemagick</a> (Mac OS X)</dd>
- <dd><a href="http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/" rel="noopener noreferrer" target="_blank">http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/</a> (HP-UX 10.20 and 11.00)</dd>
- <dt>Rsync Mirrors </dt>
- <dd><a href="rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/">rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/</a></dd>
- <dd><a href="rsync://mirror.imagemagick.org/magick_html">rsync://mirror.imagemagick.org/magick_html/</a> (Web site mirror)</dd>
- <dd><a href="rsync://mirror.imagemagick.org/magick_ftp">rsync://mirror.imagemagick.org/magick_ftp/</a> (FTP mirror)</dd>
-</dl>
-<p>If you want to add a new mirror, please <a href="https://github.com/ImageMagick/ImageMagick/discussions">contact us</a>.</p>
-</div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="mirrors-container">
+ <!-- Introductory Lead Card -->
+ <div class="card im-card p-4 mb-5 shadow-sm bg-body-tertiary border-0">
+ <p class="lead text-body mb-3">
+ ImageMagick source and binary distributions are available from a variety of FTP and Web mirrors around the world listed below. ImageMagick stable and development source releases are also available from <a href="https://github.com/ImageMagick" class="text-decoration-none fw-semibold">Git</a>. Before you download, you may want to review recent <a href="../changelog/index.html" class="text-decoration-none fw-semibold">changes</a> to the ImageMagick distribution. The authoritative source code repository is <a href="https://github.com/ImageMagick/ImageMagick" rel="noopener noreferrer" target="_blank" class="text-decoration-none fw-semibold">https://github.com/ImageMagick <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-15 text-primary border border-primary border-opacity-25 fs-7 fw-semibold">
+ <i class="bi bi-tag-fill"></i> Latest Release: v7.1.2-34
+ </div>
+ </div>
+ <h2 class="fw-bold border-bottom pb-2 mb-4">Global Distribution Mirrors</h2>
+ <p class="text-body-secondary mb-4">Select a regional mirror close to your location for optimal download speeds.</p>
+ <!-- Mirrors Grid Layout -->
+ <div class="row g-4 mb-5">
+ <!-- Australia -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-primary px-3 py-2 fs-6"><i class="bi bi-geo-alt-fill me-1"></i> Australia</span>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="https://mirror.endianness.com/imagemagick" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://mirror.endianness.com/imagemagick</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://mirror.aarnet.edu.au/pub/imagemagick/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://mirror.aarnet.edu.au/pub/imagemagick/</span>
+ </a>
+ </li>
+ </ul>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+ </div>
+ </div>
+ <!-- Germany -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-primary px-3 py-2 fs-6"><i class="bi bi-geo-alt-fill me-1"></i> Germany</span>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="https://mirror.dogado.de/imagemagick/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://mirror.dogado.de/imagemagick/</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://mirror.checkdomain.de/imagemagick/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">http://mirror.checkdomain.de/imagemagick/</span>
+ </a>
+ </li>
+ <li>
+ <a href="ftp://mirror.checkdomain.de/imagemagick/" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-folder2-open text-warning"></i> <span class="text-break">ftp://mirror.checkdomain.de/imagemagick/</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- Poland -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-primary px-3 py-2 fs-6"><i class="bi bi-geo-alt-fill me-1"></i> Poland</span>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="https://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/</span>
+ </a>
+ </li>
+ <li>
+ <a href="rsync://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-arrow-repeat text-success"></i> <span class="text-break">rsync://ftp.icm.edu.pl/pub/unix/graphics/ImageMagick/</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- Sweden -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-primary px-3 py-2 fs-6"><i class="bi bi-geo-alt-fill me-1"></i> Sweden</span>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="https://mirror.accum.se/mirror/imagemagick.org/ftp/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://mirror.accum.se/mirror/imagemagick.org/ftp/</span>
+ </a>
+ </li>
+ <li>
+ <a href="rsync://mirror.accum.se/mirror/imagemagick.org/ftp/" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-arrow-repeat text-success"></i> <span class="text-break">rsync://mirror.accum.se/mirror/imagemagick.org/ftp/</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- Switzerland -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-primary px-3 py-2 fs-6"><i class="bi bi-geo-alt-fill me-1"></i> Switzerland</span>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="https://mirror.metanet.ch/imagemagick/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://mirror.metanet.ch/imagemagick/</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- United States -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-primary px-3 py-2 fs-6"><i class="bi bi-geo-alt-fill me-1"></i> United States</span>
</div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="https://download.imagemagick.org/archive/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-globe text-primary"></i> <span class="text-break">https://download.imagemagick.org/archive/</span>
+ </a>
+ </li>
+ <li>
+ <a href="https://github.com/ImageMagick" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-github text-dark"></i> <span class="text-break">https://github.com/ImageMagick (Git)</span>
+ </a>
+ </li>
+ </ul>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+ </div>
+ <!-- Additional Categories Row -->
+ <div class="row g-4 mb-5">
+ <!-- Select Binaries -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-secondary px-3 py-2 fs-6"><i class="bi bi-box-seam me-1"></i> Select Binaries</span>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="http://www.macports.org/ports.php?by=name&substr=imagemagick" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-apple text-secondary"></i> <span class="text-break">MacPorts (Mac OS X)</span>
+ </a>
+ </li>
+ <li>
+ <a href="http://hpux.connect.org.uk/hppd/hpux/X11/Viewers/" rel="noopener noreferrer" target="_blank" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-hdd-rack text-secondary"></i> <span class="text-break">HP-UX 10.20 and 11.00</span>
+ </a>
+ </li>
+ </ul>
+ </div>
+ </div>
+ </div>
+ <!-- Rsync Mirrors -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 shadow-sm">
+ <div class="card-body">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <span class="badge bg-success px-3 py-2 fs-6"><i class="bi bi-arrow-repeat me-1"></i> Rsync Mirrors</span>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 font-mono small">
+ <li>
+ <a href="rsync://rsync.is.co.za/IS-Mirror/mirror.imagemagick.org/" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-arrow-repeat text-success"></i> <span class="text-break">rsync://rsync.is.co.za/...</span>
+ </a>
+ </li>
+ <li>
+ <a href="rsync://mirror.imagemagick.org/magick_html" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-code-slash text-success"></i> <span class="text-break">rsync://.../magick_html (Web site)</span>
+ </a>
+ </li>
+ <li>
+ <a href="rsync://mirror.imagemagick.org/magick_ftp" class="text-decoration-none d-flex align-items-center gap-2 p-2 rounded bg-body-tertiary border">
+ <i class="bi bi-file-earmark-zip text-success"></i> <span class="text-break">rsync://.../magick_ftp (FTP archive)</span>
+ </a>
+ </li>
+ </ul>
+ </div>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
</div>
+ <!-- Footer Callout -->
+ <div class="card im-card p-4 text-center bg-body-tertiary border-0 shadow-sm">
+ <p class="mb-0">
+ Want to contribute a new mirror? <a href="https://github.com/ImageMagick/ImageMagick/discussions" class="text-decoration-none fw-bold text-primary">Contact us on GitHub Discussions <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
+ </div>
+</div>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/mogrify/index.html b/www/mogrify/index.html
index 7e84eda68..65f39fa9c 100644
--- a/www/mogrify/index.html
+++ b/www/mogrify/index.html
@@ -8,1562 +8,1470 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Mogrify</title>
- <meta name="description" content="">
+ <meta name="description" content="Use the magick mogrify program to resize, blur, crop, and batch-process images with ImageMagick.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Mogrify">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Use the magick mogrify program to resize, blur, crop, and batch-process images with ImageMagick.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Mogrify">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Mogrify",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/mogrify/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use the magick mogrify program to resize, blur, crop, and batch-process images with ImageMagick.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link active" href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/mogrify/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/mogrify/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Mogrify</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>magick mogrify</code> program to resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. This tool is similar to <a href="../convert/index.html">magick</a> except that the original image file is <em>overwritten</em> (unless you change the file suffix with the <a href="../command-line-options/index.html#format">-format</a> option) with any changes you request. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>magick mogrify</code> command or see below for sample usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>mogrify</code> command here to illustrate its usefulness and ease of use. To get started, let's reduce the size of our
-rose:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mogrify -resize 50% rose.jpg</samp></pre>
-
-<ul>
- <a href="../image/rose.jpg">
- <img src="../image/rose.jpg" width="70" height="46" alt="rose" />
- </a>
- <img style="margin-top:13px; margin-bottom:13px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/rose.png">
- <img style="margin-top:12px; margin-bottom: 11px;" src="../image/rose.png" width="35" height="23" alt="rose" />
- </a>
-</ul>
-
-<p>You can resize all your JPEG images in a folder to a maximum dimension of 256x256 with this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mogrify -resize 256x256 *.jpg</samp></pre>
-
-<p>Finally, we convert all our PNG images in a folder to the JPEG format:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick mogrify -format jpg *.png</samp></pre>
-
-<p>Here image files 1.png, 2.png, etc., are left untouched and files 1.jpg, 2.jpg, etc., are created. They are copies of their respective PNG images except are stored in the JPEG image format.</p>
-
-
-<p>You can find additional examples of using <code>mogrify</code> in <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>mogrify</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-blur">-adaptive-blur <var>geometry</var></a></td>
- <td>adaptively blur pixels; decrease effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-resize">-adaptive-resize <var>geometry</var></a></td>
- <td>adaptively resize image with data dependent triangulation.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-sharpen">-adaptive-sharpen <var>geometry</var></a></td>
- <td>adaptively sharpen pixels; increase effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#affine">-affine <var>matrix</var></a></td>
- <td>affine transform matrix</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#annotate">-annotate <var>geometry text</var></a></td>
- <td>annotate the image with text</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#antialias">-antialias</a></td>
- <td>remove pixel-aliasing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#append">-append</a></td>
- <td>append an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decipher image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-gamma">-auto-gamma</a></td>
- <td>automagically adjust gamma level of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-level">-auto-level</a></td>
- <td>automagically adjust color levels of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-threshold">-auto-threshold <var>method</var></a></td>
- <td>automatically perform image thresholding</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bench">-bench <var>iterations</var></a></td>
- <td>measure performance</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bias">-bias <var>value</var></a></td>
- <td>add bias when convolving an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bilateral-blur">-bilateral-blur <var>geometry</var></a></td>
- <td>non-linear, edge-preserving, and noise-reducing smoothing filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#black-threshold">-black-threshold <var>value</var></a></td>
- <td>force all pixels below the threshold into black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-primary">-blue-primary <var>point</var></a></td>
- <td>chromaticity blue primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-shift">-blue-shift <var>factor</var></a></td>
- <td>simulate a scene at nighttime in the moonlight</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blur">-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#brightness-contrast">-brightness-contrast <var>geometry</var></a></td>
- <td>improve brightness / contrast of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#canny">-canny <var>geometry</var></a></td>
- <td>use a multi-stage algorithm to detect a wide range of edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#caption">-caption <var>string</var></a></td>
- <td>assign a caption to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cdl">-cdl <var>filename</var></a></td>
- <td>color correct with a color decision list</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#charcoal">-charcoal <var>radius</var></a></td>
- <td>simulate a charcoal drawing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#chop">-chop <var>geometry</var></a></td>
- <td>remove pixels from the image interior</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip">-clip</a></td>
- <td>clip along the first path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clahe">-clahe <var>geometry</var></a></td>
- <td>contrast limited adaptive histogram equalization</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clamp">-clamp</a></td>
- <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-mask">-clip-mask</a> <var>filename</var></td>
- <td>associate clip mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clip-path">-clip-path <var>id</var></a></td>
- <td>clip along a named path from the 8BIM profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clut">-clut</a></td>
- <td>apply a color lookup table to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#color-threshold">-color-threshold <var>start-color</var>-<var>stop-color</var></a></td>
- <td>force all pixels in the color range to white otherwise black</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#complex">-complex<var>operator</var></a></td>
- <td>perform complex mathematics on an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#connected-components">-connected-components <var>connectivity</var></a></td>
- <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast-stretch">-contrast-stretch <var>geometry</var></a></td>
- <td>improve the contrast in an image by `stretching' the range of intensity value</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorize">-colorize <var>value</var></a></td>
- <td>colorize the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#color-matrix">-color-matrix <var>matrix</var></a></td>
- <td>apply color correction to the image.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#combine">-combine</a></td>
- <td>combine a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#composite">-composite</a></td>
- <td>composite image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#contrast">-contrast</a></td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#convolve">-convolve <var>coefficients</var></a></td>
- <td>apply a convolution kernel to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#copy">-copy <var>geometry</var> <var>offset</var></a></td>
- <td>copy pixels from one area of an image to another</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>crop the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#cycle">-cycle <var>amount</var></a></td>
- <td>cycle the image colormap</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#decipher">-decipher <var>filename</var></a></td>
- <td>convert cipher pixels to plain</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#deconstruct">-deconstruct</a></td>
- <td>break down an image sequence into constituent parts</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>display the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delete">-delete <var>index</var></a></td>
- <td>delete the image from the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#despeckle">-despeckle</a></td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#direction">-direction <var>type</var></a></td>
- <td>render text right-to-left or left-to-right</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distort">-distort <var>type coefficients</var></a></td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distribute-cache">-distribute-cache <var>port</var></a></td>
- <td>launch a pixel cache server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#draw">-draw <var>string</var></a></td>
- <td>annotate the image with a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#duplicate">-duplicate <var>count,indexes</var></a></td>
- <td>duplicate an image one or more times</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#edge">-edge <var>radius</var></a></td>
- <td>apply a filter to detect edges in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#emboss">-emboss <var>radius</var></a></td>
- <td>emboss an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encipher">-encipher <var>filename</var></a></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#encoding">-encoding <var>type</var></a></td>
- <td>text encoding type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#enhance">-enhance</a></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#equalize">-equalize</a></td>
- <td>perform histogram equalization to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate">-evaluate <var>operator value</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#evaluate-sequence">-evaluate-sequence <var>operator</var></a></td>
- <td>evaluate an arithmetic, relational, or logical expression for an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extent">-extent <var>geometry</var></a></td>
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#family">-family <var>name</var></a></td>
- <td>render text with this font family</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#features">-features <var>distance</var></a></td>
- <td>analyze image features (e.g. contract, correlations, etc.).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fft">-fft</a></td>
- <td>implements the discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fill">-fill <var>color</var></a></td>
- <td>color to use when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#floodfill">-floodfill <var>geometry color</var></a></td>
- <td>floodfill the image with color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#font">-font <var>name</var></a></td>
- <td>render text with this font</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#format">-format <var>type</var></a></td>
- <td>output formatted image characteristics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#function">-function <var>name</var></a></td>
- <td>apply a function to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fuzz">-fuzz <var>distance</var></a></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fx">-fx <var>expression</var></a></td>
- <td>apply mathematical expression to an image channel(s)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gaussian-blur">-gaussian-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#grayscale">-grayscale <var>method</var></a></td>
- <td>convert image to grayscale</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#green-primary">-green-primary <var>point</var></a></td>
- <td>chromaticity green primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#hough-lines">-hough-lines <var>geometry</var></a></td>
- <td>identify lines in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ift">-ifft</a></td>
- <td>implements the inverse discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#illuminant">-illuminant <var>type</var></a></td>
- <td>reference illuminant</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#implode">-implode <var>amount</var></a></td>
- <td>implode image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#insert">-insert <var>index</var></a></td>
- <td>insert last image into the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intensity">-intensity <var>method</var></a></td>
- <td>method to generate an intensity value from a pixel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#integral">-integral</a></td>
- <td>Calculate the sum of values (pixel values) in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#intent">-intent <var>type</var></a></td>
- <td>type of rendering intent when managing the image color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interline-spacing">-interline-spacing <var>value</var></a></td>
- <td>the space between two text lines</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interword-spacing">-interword-spacing <var>value</var></a></td>
- <td>the space between two words</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kerning">-kerning <var>value</var></a></td>
- <td>the space between two characters</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-kmeans <var>geometry</var></a></td>
- <td>K means color reduction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kuwahara">-kuwahara <var>geometry</var></a></td>
- <td>edge preserving noise reduction filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>string</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#lat">-lat <var>geometry</var></a></td>
- <td>local adaptive thresholding</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#layers">-layers <var>method</var></a></td>
- <td>optimize or compare image layers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#level">-level <var>value</var></a></td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#linear-stretch">-linear-stretch <var>geometry</var></a></td>
- <td>linear with saturation histogram stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#liquid-rescale">-liquid-rescale <var>geometry</var></a></td>
- <td>rescale image with seam-carving</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#loop">-loop <var>iterations</var></a></td>
- <td>add Netscape loop extension to your GIF animation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#median">-median <var>radius</var></a></td>
- <td>apply a median filter to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mean-shift">-mean-shift <var>geometry</var></a></td>
- <td>delineate arbitrarily shaped clusters in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#metric">-metric <var>type</var></a></td>
- <td>measure differences between images with this metric</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mode">-mode <var>radius</var></a></td>
- <td>make each pixel the 'predominant color' of the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#modulate">-modulate <var>value</var></a></td>
- <td>vary the brightness, saturation, and hue</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morph">-morph <var>value</var></a></td>
- <td>morph an image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#morphology">-morphology <var>method</var></a> <var>kernel</var></td>
- <td>apply a morphology method to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#motion-blur">-motion-blur <var>geometry</var></a></td>
- <td>simulate motion blur</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#negate">-negate</a></td>
- <td>replace each pixel with its complementary color </td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#noise">-noise <var>radius</var></a></td>
- <td>add or reduce noise in an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#normalize">-normalize</a></td>
- <td>transform image to span the full range of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#opaque">-opaque <var>color</var></a></td>
- <td>change this color to the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ordered-dither">-ordered-dither <var>NxN</var></a></td>
- <td>ordered dither the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#orient">-orient <var>type</var></a></td>
- <td>image orientation</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#path">-path <var>path</var></a></td>
- <td>write images to this path on disk</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#paint">-paint <var>radius</var></a></td>
- <td>simulate an oil painting</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#perceptible">-perceptible</a></td>
- <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#ping">-ping</a></td>
- <td>efficiently determine image attributes</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pointsize">-pointsize <var>value</var></a></td>
- <td>font point size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#polaroid">-polaroid <var>angle</var></a></td>
- <td>simulate a Polaroid picture</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#poly">-poly <var>terms</var></a></td>
- <td>build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#posterize">-posterize <var>levels</var></a></td>
- <td>reduce the image to a limited number of color levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#precision">-precision <var>value</var></a></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#preview">-preview <var>type</var></a></td>
- <td>image preview type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#print">-print <var>string</var></a></td>
- <td>interpret string and print to console</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#process">-process <var>image-filter</var></a></td>
- <td>process the image with a custom image filter</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotational-blur">-rotational-blur <var>angle</var></a></td>
- <td>radial blur the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#raise">-raise <var>value</var></a></td>
- <td>lighten/darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#random-threshold">-random-threshold <var>low, high</var></a></td>
- <td>random threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#range-threshold">-range-threshold <var>low-black, low-white, high-white, high-black</var></a></td>
- <td>perform either hard or soft thresholding within some range of values in an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#read-mask">-read-mask <var>filename</var></a></td>
- <td>associate a read mask with the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#red-primary">-red-primary <var>point</var></a></td>
- <td>chromaticity red primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#region">-region <var>geometry</var></a></td>
- <td>apply options to a portion of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#remap">-remap <var>filename</var></a></td>
- <td>transform image colors to match this set of colors</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#render">-render</a></td>
- <td>render vector graphics</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resample">-resample <var>geometry</var></a></td>
- <td>change the resolution of an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#reshape">-reshape <var>geometry</var></a></td>
- <td>reshape the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#roll">-roll <var>geometry</var></a></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sample">-sample <var>geometry</var></a></td>
- <td>scale image with pixel sampling</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scale">-scale <var>geometry</var></a></td>
- <td>scale the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scene">-scene <var>value</var></a></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#segment">-segment <var>values</var></a></td>
- <td>segment an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-selective-blur <var>geometry</var></a></td>
- <td>selectively blur pixels within a contrast threshold</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#separate">-separate</a></td>
- <td>separate an image channel into a grayscale image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sepia-tone">-sepia-tone <var>threshold</var></a></td>
- <td>simulate a sepia-toned photo</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shade">-shade <var>degrees</var></a></td>
- <td>shade the image using a distant light source</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shadow">-shadow <var>geometry</var></a></td>
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sharpen">-sharpen <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shave">-shave <var>geometry</var></a></td>
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shear">-shear <var>geometry</var></a></td>
- <td>slide one edge of the image along the X or Y axis</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sigmoidal">-sigmoidal-contrast <var>geometry</var></a></td>
- <td>increase the contrast without saturating highlights or shadows</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sketch">-sketch <var>geometry</var></a></td>
- <td>simulate a pencil sketch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#smush">-smush <var>offset</var></a></td>
- <td>smush an image sequence together</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#solarize">-solarize <var>threshold</var></a></td>
- <td>negate all pixels above the threshold level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sort-pixels">-sort-pixels</a></td>
- <td>sorts pixels within each scanline in ascending order of intensity</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#splice">-splice <var>geometry</var></a></td>
- <td>splice the background color into the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#spread">-spread <var>radius</var></a></td>
- <td>displace image pixels by a random amount</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#statistic">-statistic <var>type</var> <var>geometry</var></a></td>
- <td>replace each pixel with corresponding statistic from the neighborhood</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stroke">-stroke <var>color</var></a></td>
- <td>graphic primitive stroke color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strokewidth">-strokewidth <var>value</var></a></td>
- <td>graphic primitive stroke width</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stretch">-stretch <var>type</var></a></td>
- <td>render text with this font stretch</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#style">-style <var>type</var></a></td>
- <td>render text with this font style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swap">-swap <var>indexes</var></a></td>
- <td>swap two images in the image sequence</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#swirl">-swirl <var>degrees</var></a></td>
- <td>swirl image pixels about the center</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#texture">-texture <var>filename</var></a></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#threshold">-threshold <var>value</var></a></td>
- <td>threshold the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#thumbnail">-thumbnail <var>geometry</var></a></td>
- <td>create a thumbnail of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile">-tile <var>filename</var></a></td>
- <td>tile image when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile-offset">-tile-offset <var>geometry</var></a></td>
- <td>set the image tile offset</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tint">-tint <var>value</var></a></td>
- <td>tint the image with the fill color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transform">-transform</a></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent">-transparent <var>color</var></a></td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transpose">-transpose</a></td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transverse">-transverse</a></td>
- <td>flop image in the horizontal direction and rotate 270 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#treedepth">-treedepth <var>value</var></a></td>
- <td>color tree depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#type">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#undercolor">-undercolor <var>color</var></a></td>
- <td>annotation bounding box color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unique-colors">-unique-colors</a></td>
- <td>discard all but one of any pixel color.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unsharp">-unsharp <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#view">-view</a></td>
- <td>FlashPix viewing transforms</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#vignette">-vignette <var>geometry</var></a></td>
- <td>soften the edges of the image in vignette style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#wave">-wave <var>geometry</var></a></td>
- <td>alter an image along a sine wave</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#wavelet">-wavelet-denoise <var>threshold</var></a></td>
- <td>removes noise from the image using a wavelet transform</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#weight">-weight <var>type</var></a></td>
- <td>render text with this font weight</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-point">-white-point <var>point</var></a></td>
- <td>chromaticity white point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-threshold">-white-threshold <var>value</var></a></td>
- <td>force all pixels above the threshold into white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#word-break">-word-break <var>type</var></a></td>
- <td>sets whether line breaks appear wherever the text would otherwise overflow its content box. Choose from <code>normal</code>, the default, or <code>break-word</code>.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write">-write <var>filename</var></a></td>
- <td>write images to this file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#write-mask">-write-mask <var>filename</var></a></td>
- <td>associate a write mask with the image</td>
- </tr>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Mogrify</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use the magick mogrify program to resize, blur, crop, and batch-process images with ImageMagick.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- </tbody>
-</table>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="card im-card p-4 p-md-5 mb-4 shadow-sm">
+ <p class="text-center mb-4">
+ <a href="#usage" class="text-decoration-none fw-semibold">Example Usage</a>
+ <span class="text-muted mx-2">•</span>
+ <a href="#options" class="text-decoration-none fw-semibold">Option Summary</a>
+ </p>
+ <p class="lead mb-4">
+ Use the <code class="text-primary fw-semibold">magick mogrify</code> program to resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and much more. This tool is similar to <a href="../magick/index.html" class="text-decoration-none">magick</a> except that the original image file is <em>overwritten</em> (unless you change the file suffix with the <a href="../command-line-options/index.html#format" class="text-decoration-none">-format</a> option) with any changes you request. See <a href="../command-line-processing/index.html" class="text-decoration-none fw-semibold">Command Line Processing</a> for advice on how to structure your <code>magick mogrify</code> command or see below for sample usages of the command.
+ </p>
</div>
-
+<div class="card im-card p-4 p-md-5 mb-4 shadow-sm" id="usage">
+ <h2 class="h3 fw-bold mb-3 text-body">
+ <a class="anchor text-decoration-none text-body" href="#usage">Example Usage</a>
+ </h2>
+ <p class="text-body-secondary mb-3">We list a few examples of the <code>mogrify</code> command here to illustrate its usefulness and ease of use. To get started, let's reduce the size of our rose:</p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">mogrify-rose.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <code>$ magick mogrify -resize 50% rose.jpg</code>
+ </div>
+ </div>
+ <div class="d-flex align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded border border-secondary-subtle">
+ <a href="https://imagemagick.org/image/rose.jpg" class="d-inline-block">
+ <img src="https://imagemagick.org/image/rose.jpg" width="70" height="46" alt="rose" class="rounded shadow-sm" />
+ </a>
+ <img src="https://imagemagick.org/image/right.gif" width="20" height="20" alt="==>" />
+ <a href="https://imagemagick.org/image/rose.png" class="d-inline-block">
+ <img src="https://imagemagick.org/image/rose.png" width="35" height="23" alt="rose" class="rounded shadow-sm" />
+ </a>
+ </div>
+ <p class="text-body-secondary mb-2">You can resize all your JPEG images in a folder to a maximum dimension of 256x256 with this command:</p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">batch-resize.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <code>$ magick mogrify -resize 256x256 *.jpg</code>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-2">Finally, we convert all our PNG images in a folder to the JPEG format:</p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">batch-convert.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <code>$ magick mogrify -format jpg *.png</code>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-4 small">
+ Here image files <code>1.png</code>, <code>2.png</code>, etc., are left untouched and files <code>1.jpg</code>, <code>2.jpg</code>, etc., are created. They are copies of their respective PNG images except are stored in the JPEG image format.
+ </p>
+ <p class="mb-0">
+ You can find additional examples of using <code>mogrify</code> in <a href="https://usage.imagemagick.org/" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-semibold">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
+</div>
+<div class="card im-card p-4 p-md-5 shadow-sm">
+ <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
+ <div>
+ <h2 class="h3 fw-bold mb-1" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">Option Summary</a>
+ </h2>
+ <p class="text-body-secondary mb-0 small">The <code>mogrify</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
+ </div>
+ </div>
+ <div class="table-responsive rounded border border-secondary-subtle" style="max-height: 75svh; overflow-y: auto;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <colgroup>
+ <col style="width: 35%;">
+ <col style="width: 65%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th scope="col">Option</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-blur" class="text-decoration-none fw-medium">-adaptive-blur <var>geometry</var></a></td>
+ <td>adaptively blur pixels; decrease effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-resize" class="text-decoration-none fw-medium">-adaptive-resize <var>geometry</var></a></td>
+ <td>adaptively resize image with data dependent triangulation.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-sharpen" class="text-decoration-none fw-medium">-adaptive-sharpen <var>geometry</var></a></td>
+ <td>adaptively sharpen pixels; increase effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adjoin" class="text-decoration-none fw-medium">-adjoin</a></td>
+ <td>join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#affine" class="text-decoration-none fw-medium">-affine <var>matrix</var></a></td>
+ <td>affine transform matrix</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="text-decoration-none fw-medium">-alpha</a></td>
+ <td>on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#annotate" class="text-decoration-none fw-medium">-annotate <var>geometry text</var></a></td>
+ <td>annotate the image with text</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#antialias" class="text-decoration-none fw-medium">-antialias</a></td>
+ <td>remove pixel-aliasing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#append" class="text-decoration-none fw-medium">-append</a></td>
+ <td>append an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="text-decoration-none fw-medium">-authenticate <var>value</var></a></td>
+ <td>decipher image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-gamma" class="text-decoration-none fw-medium">-auto-gamma</a></td>
+ <td>automagically adjust gamma level of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-level" class="text-decoration-none fw-medium">-auto-level</a></td>
+ <td>automagically adjust color levels of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-orient" class="text-decoration-none fw-medium">-auto-orient</a></td>
+ <td>automagically orient image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-threshold" class="text-decoration-none fw-medium">-auto-threshold <var>method</var></a></td>
+ <td>automatically perform image thresholding</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#background" class="text-decoration-none fw-medium">-background <var>color</var></a></td>
+ <td>background color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bench" class="text-decoration-none fw-medium">-bench <var>iterations</var></a></td>
+ <td>measure performance</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bias" class="text-decoration-none fw-medium">-bias <var>value</var></a></td>
+ <td>add bias when convolving an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bilateral-blur" class="text-decoration-none fw-medium">-bilateral-blur <var>geometry</var></a></td>
+ <td>non-linear, edge-preserving, and noise-reducing smoothing filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#black-threshold" class="text-decoration-none fw-medium">-black-threshold <var>value</var></a></td>
+ <td>force all pixels below the threshold into black</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-primary" class="text-decoration-none fw-medium">-blue-primary <var>point</var></a></td>
+ <td>chromaticity blue primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-shift" class="text-decoration-none fw-medium">-blue-shift <var>factor</var></a></td>
+ <td>simulate a scene at nighttime in the moonlight</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blur" class="text-decoration-none fw-medium">-blur <var>geometry</var></a></td>
+ <td>reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="text-decoration-none fw-medium">-border <var>geometry</var></a></td>
+ <td>surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="text-decoration-none fw-medium">-bordercolor <var>color</var></a></td>
+ <td>border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#brightness-contrast" class="text-decoration-none fw-medium">-brightness-contrast <var>geometry</var></a></td>
+ <td>improve brightness / contrast of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#canny" class="text-decoration-none fw-medium">-canny <var>geometry</var></a></td>
+ <td>use a multi-stage algorithm to detect a wide range of edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#caption" class="text-decoration-none fw-medium">-caption <var>string</var></a></td>
+ <td>assign a caption to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#cdl" class="text-decoration-none fw-medium">-cdl <var>filename</var></a></td>
+ <td>color correct with a color decision list</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-medium">-channel <var>type</var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#charcoal" class="text-decoration-none fw-medium">-charcoal <var>radius</var></a></td>
+ <td>simulate a charcoal drawing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#chop" class="text-decoration-none fw-medium">-chop <var>geometry</var></a></td>
+ <td>remove pixels from the image interior</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip" class="text-decoration-none fw-medium">-clip</a></td>
+ <td>clip along the first path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clahe" class="text-decoration-none fw-medium">-clahe <var>geometry</var></a></td>
+ <td>contrast limited adaptive histogram equalization</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clamp" class="text-decoration-none fw-medium">-clamp</a></td>
+ <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-mask" class="text-decoration-none fw-medium">-clip-mask <var>filename</var></a></td>
+ <td>associate clip mask with the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clip-path" class="text-decoration-none fw-medium">-clip-path <var>id</var></a></td>
+ <td>clip along a named path from the 8BIM profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clut" class="text-decoration-none fw-medium">-clut</a></td>
+ <td>apply a color lookup table to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#color-threshold" class="text-decoration-none fw-medium">-color-threshold <var>start-color</var>-<var>stop-color</var></a></td>
+ <td>force all pixels in the color range to white otherwise black</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#complex" class="text-decoration-none fw-medium">-complex <var>operator</var></a></td>
+ <td>perform complex mathematics on an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#connected-components" class="text-decoration-none fw-medium">-connected-components <var>connectivity</var></a></td>
+ <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast-stretch" class="text-decoration-none fw-medium">-contrast-stretch <var>geometry</var></a></td>
+ <td>improve the contrast in an image by `stretching' the range of intensity value</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#coalesce" class="text-decoration-none fw-medium">-coalesce</a></td>
+ <td>merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorize" class="text-decoration-none fw-medium">-colorize <var>value</var></a></td>
+ <td>colorize the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#color-matrix" class="text-decoration-none fw-medium">-color-matrix <var>matrix</var></a></td>
+ <td>apply color correction to the image.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="text-decoration-none fw-medium">-colors <var>value</var></a></td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-medium">-colorspace <var>type</var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#combine" class="text-decoration-none fw-medium">-combine</a></td>
+ <td>combine a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="text-decoration-none fw-medium">-comment <var>string</var></a></td>
+ <td>annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compose" class="text-decoration-none fw-medium">-compose <var>operator</var></a></td>
+ <td>set image composite operator</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#composite" class="text-decoration-none fw-medium">-composite</a></td>
+ <td>composite image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="text-decoration-none fw-medium">-compress <var>type</var></a></td>
+ <td>image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#contrast" class="text-decoration-none fw-medium">-contrast</a></td>
+ <td>enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#convolve" class="text-decoration-none fw-medium">-convolve <var>coefficients</var></a></td>
+ <td>apply a convolution kernel to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#copy" class="text-decoration-none fw-medium">-copy <var>geometry</var> <var>offset</var></a></td>
+ <td>copy pixels from one area of an image to another</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#crop" class="text-decoration-none fw-medium">-crop <var>geometry</var></a></td>
+ <td>crop the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#cycle" class="text-decoration-none fw-medium">-cycle <var>amount</var></a></td>
+ <td>cycle the image colormap</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#decipher" class="text-decoration-none fw-medium">-decipher <var>filename</var></a></td>
+ <td>convert cipher pixels to plain</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-medium">-debug <var>events</var></a></td>
+ <td>display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="text-decoration-none fw-medium">-define <var>format:option</var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#deconstruct" class="text-decoration-none fw-medium">-deconstruct</a></td>
+ <td>break down an image sequence into constituent parts</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delay" class="text-decoration-none fw-medium">-delay <var>centiseconds</var></a></td>
+ <td>display the next image after pausing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delete" class="text-decoration-none fw-medium">-delete <var>index</var></a></td>
+ <td>delete the image from the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="text-decoration-none fw-medium">-density <var>geometry</var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-medium">-depth <var>value</var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#despeckle" class="text-decoration-none fw-medium">-despeckle</a></td>
+ <td>reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#direction" class="text-decoration-none fw-medium">-direction <var>type</var></a></td>
+ <td>render text right-to-left or left-to-right</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#display" class="text-decoration-none fw-medium">-display <var>server</var></a></td>
+ <td>get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dispose" class="text-decoration-none fw-medium">-dispose <var>method</var></a></td>
+ <td>layer disposal method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distort" class="text-decoration-none fw-medium">-distort <var>type coefficients</var></a></td>
+ <td>distort image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distribute-cache" class="text-decoration-none fw-medium">-distribute-cache <var>port</var></a></td>
+ <td>launch a pixel cache server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="text-decoration-none fw-medium">-dither <var>method</var></a></td>
+ <td>apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#draw" class="text-decoration-none fw-medium">-draw <var>string</var></a></td>
+ <td>annotate the image with a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#duplicate" class="text-decoration-none fw-medium">-duplicate <var>count,indexes</var></a></td>
+ <td>duplicate an image one or more times</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#edge" class="text-decoration-none fw-medium">-edge <var>radius</var></a></td>
+ <td>apply a filter to detect edges in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#emboss" class="text-decoration-none fw-medium">-emboss <var>radius</var></a></td>
+ <td>emboss an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encipher" class="text-decoration-none fw-medium">-encipher <var>filename</var></a></td>
+ <td>convert plain pixels to cipher pixels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#encoding" class="text-decoration-none fw-medium">-encoding <var>type</var></a></td>
+ <td>text encoding type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="text-decoration-none fw-medium">-endian <var>type</var></a></td>
+ <td>endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#enhance" class="text-decoration-none fw-medium">-enhance</a></td>
+ <td>apply a digital filter to enhance a noisy image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#equalize" class="text-decoration-none fw-medium">-equalize</a></td>
+ <td>perform histogram equalization to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#evaluate" class="text-decoration-none fw-medium">-evaluate <var>operator value</var></a></td>
+ <td>evaluate an arithmetic, relational, or logical expression</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#evaluate-sequence" class="text-decoration-none fw-medium">-evaluate-sequence <var>operator</var></a></td>
+ <td>evaluate an arithmetic, relational, or logical expression for an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extent" class="text-decoration-none fw-medium">-extent <var>geometry</var></a></td>
+ <td>set the image size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="text-decoration-none fw-medium">-extract <var>geometry</var></a></td>
+ <td>extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#family" class="text-decoration-none fw-medium">-family <var>name</var></a></td>
+ <td>render text with this font family</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#features" class="text-decoration-none fw-medium">-features <var>distance</var></a></td>
+ <td>analyze image features (e.g. contract, correlations, etc.).</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fft" class="text-decoration-none fw-medium">-fft</a></td>
+ <td>implements the discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fill" class="text-decoration-none fw-medium">-fill <var>color</var></a></td>
+ <td>color to use when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="text-decoration-none fw-medium">-filter <var>type</var></a></td>
+ <td>use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flatten" class="text-decoration-none fw-medium">-flatten</a></td>
+ <td>flatten a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flip" class="text-decoration-none fw-medium">-flip</a></td>
+ <td>flip image in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#floodfill" class="text-decoration-none fw-medium">-floodfill <var>geometry color</var></a></td>
+ <td>floodfill the image with color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flop" class="text-decoration-none fw-medium">-flop</a></td>
+ <td>flop image in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#font" class="text-decoration-none fw-medium">-font <var>name</var></a></td>
+ <td>render text with this font</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#format" class="text-decoration-none fw-medium">-format <var>type</var></a></td>
+ <td>output formatted image characteristics</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#frame" class="text-decoration-none fw-medium">-frame <var>geometry</var></a></td>
+ <td>surround image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#function" class="text-decoration-none fw-medium">-function <var>name</var></a></td>
+ <td>apply a function to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fuzz" class="text-decoration-none fw-medium">-fuzz <var>distance</var></a></td>
+ <td>colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fx" class="text-decoration-none fw-medium">-fx <var>expression</var></a></td>
+ <td>apply mathematical expression to an image channel(s)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gamma" class="text-decoration-none fw-medium">-gamma <var>value</var></a></td>
+ <td>level of gamma correction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gaussian-blur" class="text-decoration-none fw-medium">-gaussian-blur <var>geometry</var></a></td>
+ <td>reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="text-decoration-none fw-medium">-geometry <var>geometry</var></a></td>
+ <td>preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="text-decoration-none fw-medium">-gravity <var>type</var></a></td>
+ <td>horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#grayscale" class="text-decoration-none fw-medium">-grayscale <var>method</var></a></td>
+ <td>convert image to grayscale</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#green-primary" class="text-decoration-none fw-medium">-green-primary <var>point</var></a></td>
+ <td>chromaticity green primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="text-decoration-none fw-medium">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#hough-lines" class="text-decoration-none fw-medium">-hough-lines <var>geometry</var></a></td>
+ <td>identify lines in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="text-decoration-none fw-medium">-identify</a></td>
+ <td>identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ift" class="text-decoration-none fw-medium">-ifft</a></td>
+ <td>implements the inverse discrete Fourier transform (DFT)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#illuminant" class="text-decoration-none fw-medium">-illuminant <var>type</var></a></td>
+ <td>reference illuminant</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#implode" class="text-decoration-none fw-medium">-implode <var>amount</var></a></td>
+ <td>implode image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#insert" class="text-decoration-none fw-medium">-insert <var>index</var></a></td>
+ <td>insert last image into the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#intensity" class="text-decoration-none fw-medium">-intensity <var>method</var></a></td>
+ <td>method to generate an intensity value from a pixel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#integral" class="text-decoration-none fw-medium">-integral</a></td>
+ <td>Calculate the sum of values (pixel values) in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#intent" class="text-decoration-none fw-medium">-intent <var>type</var></a></td>
+ <td>type of rendering intent when managing the image color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-medium">-interlace <var>type</var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interline-spacing" class="text-decoration-none fw-medium">-interline-spacing <var>value</var></a></td>
+ <td>the space between two text lines</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="text-decoration-none fw-medium">-interpolate <var>method</var></a></td>
+ <td>pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interword-spacing" class="text-decoration-none fw-medium">-interword-spacing <var>value</var></a></td>
+ <td>the space between two words</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kerning" class="text-decoration-none fw-medium">-kerning <var>value</var></a></td>
+ <td>the space between two characters</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="text-decoration-none fw-medium">-kmeans <var>geometry</var></a></td>
+ <td>K means color reduction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kuwahara" class="text-decoration-none fw-medium">-kuwahara <var>geometry</var></a></td>
+ <td>edge preserving noise reduction filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="text-decoration-none fw-medium">-label <var>string</var></a></td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#lat" class="text-decoration-none fw-medium">-lat <var>geometry</var></a></td>
+ <td>local adaptive thresholding</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#layers" class="text-decoration-none fw-medium">-layers <var>method</var></a></td>
+ <td>optimize or compare image layers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#level" class="text-decoration-none fw-medium">-level <var>value</var></a></td>
+ <td>adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-medium">-limit <var>type value</var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#linear-stretch" class="text-decoration-none fw-medium">-linear-stretch <var>geometry</var></a></td>
+ <td>linear with saturation histogram stretch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#liquid-rescale" class="text-decoration-none fw-medium">-liquid-rescale <var>geometry</var></a></td>
+ <td>rescale image with seam-carving</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="text-decoration-none fw-medium">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#loop" class="text-decoration-none fw-medium">-loop <var>iterations</var></a></td>
+ <td>add Netscape loop extension to your GIF animation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mattecolor" class="text-decoration-none fw-medium">-mattecolor <var>color</var></a></td>
+ <td>frame color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#median" class="text-decoration-none fw-medium">-median <var>radius</var></a></td>
+ <td>apply a median filter to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mean-shift" class="text-decoration-none fw-medium">-mean-shift <var>geometry</var></a></td>
+ <td>delineate arbitrarily shaped clusters in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#metric" class="text-decoration-none fw-medium">-metric <var>type</var></a></td>
+ <td>measure differences between images with this metric</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mode" class="text-decoration-none fw-medium">-mode <var>radius</var></a></td>
+ <td>make each pixel the 'predominant color' of the neighborhood</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#modulate" class="text-decoration-none fw-medium">-modulate <var>value</var></a></td>
+ <td>vary the brightness, saturation, and hue</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-medium">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="text-decoration-none fw-medium">-monochrome</a></td>
+ <td>transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#morph" class="text-decoration-none fw-medium">-morph <var>value</var></a></td>
+ <td>morph an image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#morphology" class="text-decoration-none fw-medium">-morphology <var>method</var> <var>kernel</var></a></td>
+ <td>apply a morphology method to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#motion-blur" class="text-decoration-none fw-medium">-motion-blur <var>geometry</var></a></td>
+ <td>simulate motion blur</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#negate" class="text-decoration-none fw-medium">-negate</a></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#noise" class="text-decoration-none fw-medium">-noise <var>radius</var></a></td>
+ <td>add or reduce noise in an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#normalize" class="text-decoration-none fw-medium">-normalize</a></td>
+ <td>transform image to span the full range of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#opaque" class="text-decoration-none fw-medium">-opaque <var>color</var></a></td>
+ <td>change this color to the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ordered-dither" class="text-decoration-none fw-medium">-ordered-dither <var>NxN</var></a></td>
+ <td>ordered dither the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#orient" class="text-decoration-none fw-medium">-orient <var>type</var></a></td>
+ <td>image orientation</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="text-decoration-none fw-medium">-page <var>geometry</var></a></td>
+ <td>size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#path" class="text-decoration-none fw-medium">-path <var>path</var></a></td>
+ <td>write images to this path on disk</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#paint" class="text-decoration-none fw-medium">-paint <var>radius</var></a></td>
+ <td>simulate an oil painting</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#perceptible" class="text-decoration-none fw-medium">-perceptible</a></td>
+ <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#ping" class="text-decoration-none fw-medium">-ping</a></td>
+ <td>efficiently determine image attributes</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#pointsize" class="text-decoration-none fw-medium">-pointsize <var>value</var></a></td>
+ <td>font point size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#polaroid" class="text-decoration-none fw-medium">-polaroid <var>angle</var></a></td>
+ <td>simulate a Polaroid picture</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#poly" class="text-decoration-none fw-medium">-poly <var>terms</var></a></td>
+ <td>build a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs).</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#posterize" class="text-decoration-none fw-medium">-posterize <var>levels</var></a></td>
+ <td>reduce the image to a limited number of color levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#precision" class="text-decoration-none fw-medium">-precision <var>value</var></a></td>
+ <td>set the maximum number of significant digits to be printed</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#preview" class="text-decoration-none fw-medium">-preview <var>type</var></a></td>
+ <td>image preview type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#print" class="text-decoration-none fw-medium">-print <var>string</var></a></td>
+ <td>interpret string and print to console</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#process" class="text-decoration-none fw-medium">-process <var>image-filter</var></a></td>
+ <td>process the image with a custom image filter</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="text-decoration-none fw-medium">-profile <var>filename</var></a></td>
+ <td>add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quality" class="text-decoration-none fw-medium">-quality <var>value</var></a></td>
+ <td>JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="text-decoration-none fw-medium">-quantize <var>colorspace</var></a></td>
+ <td>reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-medium">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotational-blur" class="text-decoration-none fw-medium">-rotational-blur <var>angle</var></a></td>
+ <td>radial blur the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#raise" class="text-decoration-none fw-medium">-raise <var>value</var></a></td>
+ <td>lighten/darken image edges to create a 3-D effect</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#random-threshold" class="text-decoration-none fw-medium">-random-threshold <var>low, high</var></a></td>
+ <td>random threshold the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#range-threshold" class="text-decoration-none fw-medium">-range-threshold <var>low-black, low-white, high-white, high-black</var></a></td>
+ <td>perform either hard or soft thresholding within some range of values in an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#read-mask" class="text-decoration-none fw-medium">-read-mask <var>filename</var></a></td>
+ <td>associate a read mask with the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#red-primary" class="text-decoration-none fw-medium">-red-primary <var>point</var></a></td>
+ <td>chromaticity red primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-medium">-regard-warnings</a></td>
+ <td>pay attention to warning messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#region" class="text-decoration-none fw-medium">-region <var>geometry</var></a></td>
+ <td>apply options to a portion of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#remap" class="text-decoration-none fw-medium">-remap <var>filename</var></a></td>
+ <td>transform image colors to match this set of colors</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#render" class="text-decoration-none fw-medium">-render</a></td>
+ <td>render vector graphics</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#repage" class="text-decoration-none fw-medium">-repage <var>geometry</var></a></td>
+ <td>size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resample" class="text-decoration-none fw-medium">-resample <var>geometry</var></a></td>
+ <td>change the resolution of an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#reshape" class="text-decoration-none fw-medium">-reshape <var>geometry</var></a></td>
+ <td>reshape the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resize" class="text-decoration-none fw-medium">-resize <var>geometry</var></a></td>
+ <td>resize the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-medium">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#roll" class="text-decoration-none fw-medium">-roll <var>geometry</var></a></td>
+ <td>roll an image vertically or horizontally</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="text-decoration-none fw-medium">-rotate <var>degrees</var></a></td>
+ <td>apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sample" class="text-decoration-none fw-medium">-sample <var>geometry</var></a></td>
+ <td>scale image with pixel sampling</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-medium">-sampling-factor <var>geometry</var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scale" class="text-decoration-none fw-medium">-scale <var>geometry</var></a></td>
+ <td>scale the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scene" class="text-decoration-none fw-medium">-scene <var>value</var></a></td>
+ <td>image scene number</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-medium">-seed <var>value</var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#segment" class="text-decoration-none fw-medium">-segment <var>values</var></a></td>
+ <td>segment an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#threshold" class="text-decoration-none fw-medium">-selective-blur <var>geometry</var></a></td>
+ <td>selectively blur pixels within a contrast threshold</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#separate" class="text-decoration-none fw-medium">-separate</a></td>
+ <td>separate an image channel into a grayscale image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sepia-tone" class="text-decoration-none fw-medium">-sepia-tone <var>threshold</var></a></td>
+ <td>simulate a sepia-toned photo</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="text-decoration-none fw-medium">-set <var>attribute value</var></a></td>
+ <td>set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shade" class="text-decoration-none fw-medium">-shade <var>degrees</var></a></td>
+ <td>shade the image using a distant light source</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shadow" class="text-decoration-none fw-medium">-shadow <var>geometry</var></a></td>
+ <td>simulate an image shadow</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sharpen" class="text-decoration-none fw-medium">-sharpen <var>geometry</var></a></td>
+ <td>sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shave" class="text-decoration-none fw-medium">-shave <var>geometry</var></a></td>
+ <td>shave pixels from the image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shear" class="text-decoration-none fw-medium">-shear <var>geometry</var></a></td>
+ <td>slide one edge of the image along the X or Y axis</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sigmoidal" class="text-decoration-none fw-medium">-sigmoidal-contrast <var>geometry</var></a></td>
+ <td>increase the contrast without saturating highlights or shadows</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="text-decoration-none fw-medium">-size <var>geometry</var></a></td>
+ <td>width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sketch" class="text-decoration-none fw-medium">-sketch <var>geometry</var></a></td>
+ <td>simulate a pencil sketch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#smush" class="text-decoration-none fw-medium">-smush <var>offset</var></a></td>
+ <td>smush an image sequence together</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#solarize" class="text-decoration-none fw-medium">-solarize <var>threshold</var></a></td>
+ <td>negate all pixels above the threshold level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sort-pixels" class="text-decoration-none fw-medium">-sort-pixels</a></td>
+ <td>sorts pixels within each scanline in ascending order of intensity</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#splice" class="text-decoration-none fw-medium">-splice <var>geometry</var></a></td>
+ <td>splice the background color into the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#spread" class="text-decoration-none fw-medium">-spread <var>radius</var></a></td>
+ <td>displace image pixels by a random amount</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#statistic" class="text-decoration-none fw-medium">-statistic <var>type</var> <var>geometry</var></a></td>
+ <td>replace each pixel with corresponding statistic from the neighborhood</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="text-decoration-none fw-medium">-strip</a></td>
+ <td>strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stroke" class="text-decoration-none fw-medium">-stroke <var>color</var></a></td>
+ <td>graphic primitive stroke color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strokewidth" class="text-decoration-none fw-medium">-strokewidth <var>value</var></a></td>
+ <td>graphic primitive stroke width</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stretch" class="text-decoration-none fw-medium">-stretch <var>type</var></a></td>
+ <td>render text with this font stretch</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#style" class="text-decoration-none fw-medium">-style <var>type</var></a></td>
+ <td>render text with this font style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swap" class="text-decoration-none fw-medium">-swap <var>indexes</var></a></td>
+ <td>swap two images in the image sequence</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#swirl" class="text-decoration-none fw-medium">-swirl <var>degrees</var></a></td>
+ <td>swirl image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#synchronize" class="text-decoration-none fw-medium">-synchronize</a></td>
+ <td>synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#texture" class="text-decoration-none fw-medium">-texture <var>filename</var></a></td>
+ <td>name of texture to tile onto the image background</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#threshold" class="text-decoration-none fw-medium">-threshold <var>value</var></a></td>
+ <td>threshold the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#thumbnail" class="text-decoration-none fw-medium">-thumbnail <var>geometry</var></a></td>
+ <td>create a thumbnail of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile" class="text-decoration-none fw-medium">-tile <var>filename</var></a></td>
+ <td>tile image when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile-offset" class="text-decoration-none fw-medium">-tile-offset <var>geometry</var></a></td>
+ <td>set the image tile offset</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tint" class="text-decoration-none fw-medium">-tint <var>value</var></a></td>
+ <td>tint the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transform" class="text-decoration-none fw-medium">-transform</a></td>
+ <td>affine transform image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent" class="text-decoration-none fw-medium">-transparent <var>color</var></a></td>
+ <td>make this color transparent within the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="text-decoration-none fw-medium">-transparent-color <var>color</var></a></td>
+ <td>transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transpose" class="text-decoration-none fw-medium">-transpose</a></td>
+ <td>flip image in the vertical direction and rotate 90 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transverse" class="text-decoration-none fw-medium">-transverse</a></td>
+ <td>flop image in the horizontal direction and rotate 270 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#treedepth" class="text-decoration-none fw-medium">-treedepth <var>value</var></a></td>
+ <td>color tree depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#trim" class="text-decoration-none fw-medium">-trim</a></td>
+ <td>trim image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#type" class="text-decoration-none fw-medium">-type <var>type</var></a></td>
+ <td>image type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#undercolor" class="text-decoration-none fw-medium">-undercolor <var>color</var></a></td>
+ <td>annotation bounding box color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unique-colors" class="text-decoration-none fw-medium">-unique-colors</a></td>
+ <td>discard all but one of any pixel color.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#units" class="text-decoration-none fw-medium">-units <var>type</var></a></td>
+ <td>the units of image resolution</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unsharp" class="text-decoration-none fw-medium">-unsharp <var>geometry</var></a></td>
+ <td>sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-medium">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="text-decoration-none fw-medium">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#view" class="text-decoration-none fw-medium">-view</a></td>
+ <td>FlashPix viewing transforms</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#vignette" class="text-decoration-none fw-medium">-vignette <var>geometry</var></a></td>
+ <td>soften the edges of the image in vignette style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-medium">-virtual-pixel <var>method</var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#wave" class="text-decoration-none fw-medium">-wave <var>geometry</var></a></td>
+ <td>alter an image along a sine wave</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#wavelet" class="text-decoration-none fw-medium">-wavelet-denoise <var>threshold</var></a></td>
+ <td>removes noise from the image using a wavelet transform</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#weight" class="text-decoration-none fw-medium">-weight <var>type</var></a></td>
+ <td>render text with this font weight</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-point" class="text-decoration-none fw-medium">-white-point <var>point</var></a></td>
+ <td>chromaticity white point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-threshold" class="text-decoration-none fw-medium">-white-threshold <var>value</var></a></td>
+ <td>force all pixels above the threshold into white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#word-break" class="text-decoration-none fw-medium">-word-break <var>type</var></a></td>
+ <td>sets whether line breaks appear wherever the text would otherwise overflow its content box. Choose from <code>normal</code>, the default, or <code>break-word</code>.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write" class="text-decoration-none fw-medium">-write <var>filename</var></a></td>
+ <td>write images to this file</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#write-mask" class="text-decoration-none fw-medium">-write-mask <var>filename</var></a></td>
+ <td>associate a write mask with the image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/montage/index.html b/www/montage/index.html
index 385e75d07..ae97d2f72 100644
--- a/www/montage/index.html
+++ b/www/montage/index.html
@@ -8,873 +8,928 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Command-line Tools: Montage</title>
- <meta name="description" content="">
+ <meta name="description" content="Use the montage program to create composite images by tiling, bordering, framing, and combining separate images.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Montage">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Use the montage program to create composite images by tiling, bordering, framing, and combining separate images.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Montage">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Montage",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/montage/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use the montage program to create composite images by tiling, bordering, framing, and combining separate images.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link active" href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/montage/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/montage/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Montage</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Montage</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use the montage program to create composite images by tiling, bordering, framing, and combining separate images.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead">Use the <code>montage</code> program to create a composite image by combining several separate images. The images are tiled on the composite image optionally adorned with a border, frame, image name, and more. See <a href="../command-line-processing/index.html">Command Line Processing</a> for advice on how to structure your <code>montage</code> command or see below for example usages of the command.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>montage</code> command here to illustrate its usefulness and ease of use. To get started, let's montage two images into a single composite:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick montage -background '#336699' -geometry 70x70+4+4 rose.jpg red-ball.png montage.jpg </samp></pre></pre>
-
-<ul>
- <a href="../image/rose.jpg">
- <img style="margin-top:14px; margin-bottom:14px;" src="../image/rose.jpg" width="70" height="46" alt="rose" />
- </a>
- <a href="../image/red-ball.png">
- <img style="margin-top:2px; margin-bottom:2px;" src="../image/red-ball.png" width="70" height="70" alt="red ball" />
- </a>
- <img style="margin-top:27px; margin-bottom:27px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/montage.jpg">
- <img src="../image/montage.jpg" width="148" height="74" alt="montage" />
- </a>
-</ul>
-
-<p>Ok, let's add some decorations:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick montage -label %f -frame 5 -background '#336699' -geometry 70x70+4+4 rose.jpg red-ball.png frame.jpg </samp></pre></pre>
-
-<ul>
- <a href="../image/rose.jpg">
- <img style="margin-top:31px; margin-bottom:31px;" src="../image/rose.jpg" width="70" height="46" alt="rose.jpg" />
- </a>
- <a href="../image/red-ball.png">
- <img style="margin-top:19px; margin-bottom:19px;" src="../image/red-ball.png" width="70" height="70" alt="red ball" />
- </a>
- <img style="margin-top:44px; margin-bottom:44px;" src="../image/right.gif" width="20" height="20" alt="==>" />
- <a href="../image/frame.jpg">
- <img src="../image/frame.jpg" width="176" height="108" alt="frame" />
- </a>
-</ul>
-
-<p>You can find additional examples of using <code>montage</code> at <a href="https://usage.imagemagick.org/montage/">Examples of ImageMagick Usage</a> and <a href="https://usage.imagemagick.org/">Examples of ImageMagick Usage</a>.</p>
-
-<h4>Ashlar Pseudo-image Format</h4>
-<p>Use the Ashlar pseudo-image format to lay out an image sequence in continuous irregular courses. By default, a reasonable canvas size and border width is determined relative to the image collection you provide. You can explicitly set the canvas size and border width by appending to the filename, e.g. <code>ashlar:canvas.png[1024x768+4+4]</code>. By default, alignment is along the left edge. Use <code>-define ashlar:best-fit=true</code> to align on both the left and right edges. You can label the image tiles with, for example, <code>-label %f</code>. Here is an example command:
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick '*.png' -resize 320x320 -label %f ashlar:ashlar.png</samp></pre></pre>
-
-<p>This is designed to quickly view a collection of images. To have more control over the layout of your image tiles, use the <code>montage</code> command instead.</p>
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>montage</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tbody>
- <tr>
- <th align="left">Option</th>
- <th align="left">Description</th>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adaptive-sharpen">-adaptive-sharpen <var>geometry</var></a></td>
- <td>adaptively sharpen pixels; increase effect near edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#adjoin">-adjoin</a></td>
- <td>join images into a single multi-image file</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#affine">-affine <var>matrix</var></a></td>
- <td>affine transform matrix</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#alpha">-alpha</a></td>
- <td>on, activate, off, deactivate, set, opaque, copy",
-transparent, extract, background, or shape the alpha channel</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#annotate">-annotate <var>geometry text</var></a></td>
- <td>annotate the image with text</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#auto-orient">-auto-orient</a></td>
- <td>automagically orient image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#background">-background <var>color</var></a></td>
- <td>background color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blue-primary">-blue-primary <var>point</var></a></td>
- <td>chromaticity blue primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#blur">-blur <var>geometry</var></a></td>
- <td>reduce image noise and reduce detail levels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#border">-border <var>geometry</var></a></td>
- <td>surround image with a border of color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#bordercolor">-bordercolor <var>color</var></a></td>
- <td>border color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#caption">-caption <var>string</var></a></td>
- <td>assign a caption to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#clone">-clone <var>index</var></a></td>
- <td>clone an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#coalesce">-coalesce</a></td>
- <td>merge a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colors">-colors <var>value</var></a></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#comment">-comment <var>string</var></a></td>
- <td>annotate image with comment</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compose">-compose <var>operator</var></a></td>
- <td>set image composite operator</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#composite">-composite</a></td>
- <td>composite image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#compress">-compress <var>type</var></a></td>
- <td>image compression type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#crop">-crop <var>geometry</var></a></td>
- <td>preferred size and location of the cropped image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#delay">-delay <var>centiseconds</var></a></td>
- <td>display the next image after pausing</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#display">-display <var>server</var></a></td>
- <td>get image or font from this X server</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dispose">-dispose <var>method</var></a></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#distort">-distort <var>type coefficients</var></a></td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#dither">-dither <var>method</var></a></td>
- <td>apply error diffusion to image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#draw">-draw <var>string</var></a></td>
- <td>annotate the image with a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#duplicate">-duplicate <var>count,indexes</var></a></td>
- <td>duplicate an image one or more times</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#endian">-endian <var>type</var></a></td>
- <td>endianness (MSB or LSB) of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extent">-extent <var>geometry</var></a></td>
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#family">-family <var>name</var></a></td>
- <td>render text with this font family</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#fill">-fill <var>color</var></a></td>
- <td>color to use when filling a graphic primitive</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#filter">-filter <var>type</var></a></td>
- <td>use this filter when resizing an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flatten">-flatten</a></td>
- <td>flatten a sequence of images</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flip">-flip</a></td>
- <td>flip image in the vertical direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#flop">-flop</a></td>
- <td>flop image in the horizontal direction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#font">-font <var>name</var></a></td>
- <td>render text with this font</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#frame">-frame <var>geometry</var></a></td>
- <td>surround image with an ornamental border</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gamma">-gamma <var>value</var></a></td>
- <td>level of gamma correction</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#geometry">-geometry <var>geometry</var></a></td>
- <td>preferred size or location of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#gravity">-gravity <var>type</var></a></td>
- <td>horizontal and vertical text placement</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#green-primary">-green-primary <var>point</var></a></td>
- <td>chromaticity green primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#identify">-identify</a></td>
- <td>identify the format and characteristics of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#kerning">-kerning <var>value</var></a></td>
- <td>the space between two characters</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#label">-label <var>string</var></a></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mattecolor">-mattecolor <var>color</var></a></td>
- <td>frame color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#mode">-mode <var>type</var></a></td>
- <td>framing style</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monochrome">-monochrome</a></td>
- <td>transform image to black and white</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#origin">-origin <var>geometry</var></a></td>
- <td>image origin</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#page">-page <var>geometry</var></a></td>
- <td>size and location of an image canvas (setting)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#pointsize">-pointsize <var>value</var></a></td>
- <td>font point size</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#polaroid">-polaroid <var>angle</var></a></td>
- <td>simulate a Polaroid picture</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#precision">-precision <var>value</var></a></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#profile">-profile <var>filename</var></a></td>
- <td>add, delete, or apply an image profile</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quality">-quality <var>value</var></a></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#red-primary">-red-primary <var>point</var></a></td>
- <td>chromaticity red primary point</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#repage">-repage <var>geometry</var></a></td>
- <td>size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#resize">-resize <var>geometry</var></a></td>
- <td>resize the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#rotate">-rotate <var>degrees</var></a></td>
- <td>apply Paeth rotation to the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scale">-scale <var>geometry</var></a></td>
- <td>scale the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#scenes">-scenes <var>range</var></a></td>
- <td>image scene range</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#shadow">-shadow <var>geometry</var></a></td>
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#strip">-strip</a></td>
- <td>strip image of all profiles and comments</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stroke">-stroke <var>color</var></a></td>
- <td>graphic primitive stroke color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#texture">-texture <var>filename</var></a></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile">-tile <var>geometry</var></a></td>
- <td>number of tiles per row and column (e.g. -tile 8x)</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#tile-offset">-tile-offset <var>geometry</var></a></td>
- <td>set the image tile offset</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#title">-title</a></td>
- <td>decorate the montage image with a title</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transform">-transform</a></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent">-transparent <var>color</var></a></td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transpose">-transpose</a></td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#treedepth">-treedepth <var>value</var></a></td>
- <td>color tree depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#trim">-trim</a></td>
- <td>trim image edges</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#type">-type <var>type</var></a></td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#units">-units <var>type</var></a></td>
- <td>the units of image resolution</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#unsharp">-unsharp <var>geometry</var></a></td>
- <td>sharpen the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#view">-view</a></td>
- <td>FlashPix viewing transforms</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#white-point">-white-point <var>point</var></a></td>
- <td>chromaticity white point</td>
- </tr>
-
- </tbody>
-</table>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="card im-card p-4 p-md-5 mb-4 shadow-sm">
+ <p class="text-center mb-4">
+ <a href="#usage" class="text-decoration-none fw-semibold">Example Usage</a>
+ <span class="text-muted mx-2">•</span>
+ <a href="#options" class="text-decoration-none fw-semibold">Option Summary</a>
+ </p>
+ <p class="lead mb-4">
+ Use the <code class="text-primary fw-semibold">montage</code> program to create a composite image by combining several separate images. The images are tiled on the composite image optionally adorned with a border, frame, image name, and more. See <a href="../command-line-processing/index.html" class="text-decoration-none fw-semibold">Command Line Processing</a> for advice on how to structure your <code>montage</code> command or see below for example usages of the command.
+ </p>
</div>
-
+<div class="card im-card p-4 p-md-5 mb-4 shadow-sm" id="usage">
+ <h2 class="h3 fw-bold mb-3 text-body">
+ <a class="anchor text-decoration-none text-body" href="#usage">Example Usage</a>
+ </h2>
+ <p class="text-body-secondary mb-3">We list a few examples of the <code>montage</code> command here to illustrate its usefulness and ease of use. To get started, let's montage two images into a single composite:</p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">montage-basic.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <code>$ magick montage -background '#336699' -geometry 70x70+4+4 rose.jpg red-ball.png montage.jpg</code>
+ </div>
+ </div>
+ <div class="d-flex align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded border border-secondary-subtle flex-wrap">
+ <a href="https://imagemagick.org/image/rose.jpg" class="d-inline-block">
+ <img src="https://imagemagick.org/image/rose.jpg" width="70" height="46" alt="rose" class="rounded shadow-sm" style="margin-top:14px; margin-bottom:14px;" />
+ </a>
+ <a href="https://imagemagick.org/image/red-ball.png" class="d-inline-block">
+ <img src="https://imagemagick.org/image/red-ball.png" width="70" height="70" alt="red ball" class="rounded shadow-sm" style="margin-top:2px; margin-bottom:2px;" />
+ </a>
+ <img src="https://imagemagick.org/image/right.gif" width="20" height="20" alt="==>" style="margin-top:27px; margin-bottom:27px;" />
+ <a href="https://imagemagick.org/image/montage.jpg" class="d-inline-block">
+ <img src="https://imagemagick.org/image/montage.jpg" width="148" height="74" alt="montage" class="rounded shadow-sm" />
+ </a>
+ </div>
+ <p class="text-body-secondary mb-3">Ok, let's add some decorations:</p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">montage-frame.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <code>$ magick montage -label %f -frame 5 -background '#336699' -geometry 70x70+4+4 rose.jpg red-ball.png frame.jpg</code>
+ </div>
+ </div>
+ <div class="d-flex align-items-center gap-3 mb-4 p-3 bg-body-tertiary rounded border border-secondary-subtle flex-wrap">
+ <a href="https://imagemagick.org/image/rose.jpg" class="d-inline-block">
+ <img src="https://imagemagick.org/image/rose.jpg" width="70" height="46" alt="rose.jpg" class="rounded shadow-sm" style="margin-top:31px; margin-bottom:31px;" />
+ </a>
+ <a href="https://imagemagick.org/image/red-ball.png" class="d-inline-block">
+ <img src="https://imagemagick.org/image/red-ball.png" width="70" height="70" alt="red ball" class="rounded shadow-sm" style="margin-top:19px; margin-bottom:19px;" />
+ </a>
+ <img src="https://imagemagick.org/image/right.gif" width="20" height="20" alt="==>" style="margin-top:44px; margin-bottom:44px;" />
+ <a href="https://imagemagick.org/image/frame.jpg" class="d-inline-block">
+ <img src="https://imagemagick.org/image/frame.jpg" width="176" height="108" alt="frame" class="rounded shadow-sm" />
+ </a>
+ </div>
+ <p class="text-body-secondary mb-4">
+ You can find additional examples of using <code>montage</code> at <a href="https://usage.imagemagick.org/montage/" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-semibold">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a> and <a href="https://usage.imagemagick.org/" target="_blank" rel="noopener noreferrer" class="text-decoration-none fw-semibold">Examples of ImageMagick Usage <i class="bi bi-box-arrow-up-right small"></i></a>.
+ </p>
+ <h4 class="h5 fw-bold text-body mb-3">Ashlar Pseudo-image Format</h4>
+ <p class="text-body-secondary mb-3">
+ Use the Ashlar pseudo-image format to lay out an image sequence in continuous irregular courses. By default, a reasonable canvas size and border width is determined relative to the image collection you provide. You can explicitly set the canvas size and border width by appending to the filename, e.g. <code class="text-body font-mono">ashlar:canvas.png[1024x768+4+4]</code>. By default, alignment is along the left edge. Use <code class="text-body font-mono">-define ashlar:best-fit=true</code> to align on both the left and right edges. You can label the image tiles with, for example, <code class="text-body font-mono">-label %f</code>. Here is an example command:
+ </p>
+ <div class="terminal-card mb-3">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">ashlar.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <code>$ magick '*.png' -resize 320x320 -label %f ashlar:ashlar.png</code>
+ </div>
+ </div>
+ <p class="text-body-secondary small mb-0">
+ This is designed to quickly view a collection of images. To have more control over the layout of your image tiles, use the <code>montage</code> command instead.
+ </p>
+</div>
+<div class="card im-card p-4 p-md-5 shadow-sm">
+ <div class="d-flex align-items-center justify-content-between mb-4 flex-wrap gap-3">
+ <div>
+ <h2 class="h3 fw-bold mb-1" id="options">
+ <a class="anchor text-decoration-none text-body" href="#options">Option Summary</a>
+ </h2>
+ <p class="text-body-secondary mb-0 small">The <code>montage</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
+ </div>
+ </div>
+ <div class="table-responsive rounded border border-secondary-subtle" style="max-height: 75svh; overflow-y: auto;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <colgroup>
+ <col style="width: 35%;">
+ <col style="width: 65%;">
+ </colgroup>
+ <thead class="table-dark sticky-top">
+ <tr>
+ <th scope="col">Option</th>
+ <th scope="col">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><a href="../command-line-options/index.html#adaptive-sharpen" class="text-decoration-none fw-medium">-adaptive-sharpen <var>geometry</var></a></td>
+ <td>adaptively sharpen pixels; increase effect near edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#adjoin" class="text-decoration-none fw-medium">-adjoin</a></td>
+ <td>join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#affine" class="text-decoration-none fw-medium">-affine <var>matrix</var></a></td>
+ <td>affine transform matrix</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#alpha" class="text-decoration-none fw-medium">-alpha</a></td>
+ <td>on, activate, off, deactivate, set, opaque, copy, transparent, extract, background, or shape the alpha channel</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#annotate" class="text-decoration-none fw-medium">-annotate <var>geometry text</var></a></td>
+ <td>annotate the image with text</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="text-decoration-none fw-medium">-authenticate <var>value</var></a></td>
+ <td>decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#auto-orient" class="text-decoration-none fw-medium">-auto-orient</a></td>
+ <td>automagically orient image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#background" class="text-decoration-none fw-medium">-background <var>color</var></a></td>
+ <td>background color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blue-primary" class="text-decoration-none fw-medium">-blue-primary <var>point</var></a></td>
+ <td>chromaticity blue primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#blur" class="text-decoration-none fw-medium">-blur <var>geometry</var></a></td>
+ <td>reduce image noise and reduce detail levels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#border" class="text-decoration-none fw-medium">-border <var>geometry</var></a></td>
+ <td>surround image with a border of color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bordercolor" class="text-decoration-none fw-medium">-bordercolor <var>color</var></a></td>
+ <td>border color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#caption" class="text-decoration-none fw-medium">-caption <var>string</var></a></td>
+ <td>assign a caption to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-medium">-channel <var>type</var></a></td>
+ <td>apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#clone" class="text-decoration-none fw-medium">-clone <var>index</var></a></td>
+ <td>clone an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#coalesce" class="text-decoration-none fw-medium">-coalesce</a></td>
+ <td>merge a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colors" class="text-decoration-none fw-medium">-colors <var>value</var></a></td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-medium">-colorspace <var>type</var></a></td>
+ <td>set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#comment" class="text-decoration-none fw-medium">-comment <var>string</var></a></td>
+ <td>annotate image with comment</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compose" class="text-decoration-none fw-medium">-compose <var>operator</var></a></td>
+ <td>set image composite operator</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#composite" class="text-decoration-none fw-medium">-composite</a></td>
+ <td>composite image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#compress" class="text-decoration-none fw-medium">-compress <var>type</var></a></td>
+ <td>image compression type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#crop" class="text-decoration-none fw-medium">-crop <var>geometry</var></a></td>
+ <td>preferred size and location of the cropped image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-medium">-debug <var>events</var></a></td>
+ <td>display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="text-decoration-none fw-medium">-define <var>format:option</var></a></td>
+ <td>define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#delay" class="text-decoration-none fw-medium">-delay <var>centiseconds</var></a></td>
+ <td>display the next image after pausing</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="text-decoration-none fw-medium">-density <var>geometry</var></a></td>
+ <td>horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-medium">-depth <var>value</var></a></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#display" class="text-decoration-none fw-medium">-display <var>server</var></a></td>
+ <td>get image or font from this X server</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dispose" class="text-decoration-none fw-medium">-dispose <var>method</var></a></td>
+ <td>layer disposal method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#distort" class="text-decoration-none fw-medium">-distort <var>type coefficients</var></a></td>
+ <td>distort image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#dither" class="text-decoration-none fw-medium">-dither <var>method</var></a></td>
+ <td>apply error diffusion to image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#draw" class="text-decoration-none fw-medium">-draw <var>string</var></a></td>
+ <td>annotate the image with a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#duplicate" class="text-decoration-none fw-medium">-duplicate <var>count,indexes</var></a></td>
+ <td>duplicate an image one or more times</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#endian" class="text-decoration-none fw-medium">-endian <var>type</var></a></td>
+ <td>endianness (MSB or LSB) of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extent" class="text-decoration-none fw-medium">-extent <var>geometry</var></a></td>
+ <td>set the image size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="text-decoration-none fw-medium">-extract <var>geometry</var></a></td>
+ <td>extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#family" class="text-decoration-none fw-medium">-family <var>name</var></a></td>
+ <td>render text with this font family</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#fill" class="text-decoration-none fw-medium">-fill <var>color</var></a></td>
+ <td>color to use when filling a graphic primitive</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#filter" class="text-decoration-none fw-medium">-filter <var>type</var></a></td>
+ <td>use this filter when resizing an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flatten" class="text-decoration-none fw-medium">-flatten</a></td>
+ <td>flatten a sequence of images</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flip" class="text-decoration-none fw-medium">-flip</a></td>
+ <td>flip image in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#flop" class="text-decoration-none fw-medium">-flop</a></td>
+ <td>flop image in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#font" class="text-decoration-none fw-medium">-font <var>name</var></a></td>
+ <td>render text with this font</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#frame" class="text-decoration-none fw-medium">-frame <var>geometry</var></a></td>
+ <td>surround image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gamma" class="text-decoration-none fw-medium">-gamma <var>value</var></a></td>
+ <td>level of gamma correction</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#geometry" class="text-decoration-none fw-medium">-geometry <var>geometry</var></a></td>
+ <td>preferred size or location of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#gravity" class="text-decoration-none fw-medium">-gravity <var>type</var></a></td>
+ <td>horizontal and vertical text placement</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#green-primary" class="text-decoration-none fw-medium">-green-primary <var>point</var></a></td>
+ <td>chromaticity green primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="text-decoration-none fw-medium">-help</a></td>
+ <td>print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#identify" class="text-decoration-none fw-medium">-identify</a></td>
+ <td>identify the format and characteristics of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-medium">-interlace <var>type</var></a></td>
+ <td>type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="text-decoration-none fw-medium">-interpolate <var>method</var></a></td>
+ <td>pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#kerning" class="text-decoration-none fw-medium">-kerning <var>value</var></a></td>
+ <td>the space between two characters</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#label" class="text-decoration-none fw-medium">-label <var>string</var></a></td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-medium">-limit <var>type value</var></a></td>
+ <td>pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="text-decoration-none fw-medium">-log <var>format</var></a></td>
+ <td>format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mattecolor" class="text-decoration-none fw-medium">-mattecolor <var>color</var></a></td>
+ <td>frame color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#mode" class="text-decoration-none fw-medium">-mode <var>type</var></a></td>
+ <td>framing style</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-medium">-monitor</a></td>
+ <td>monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monochrome" class="text-decoration-none fw-medium">-monochrome</a></td>
+ <td>transform image to black and white</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#origin" class="text-decoration-none fw-medium">-origin <var>geometry</var></a></td>
+ <td>image origin</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#page" class="text-decoration-none fw-medium">-page <var>geometry</var></a></td>
+ <td>size and location of an image canvas (setting)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#pointsize" class="text-decoration-none fw-medium">-pointsize <var>value</var></a></td>
+ <td>font point size</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#polaroid" class="text-decoration-none fw-medium">-polaroid <var>angle</var></a></td>
+ <td>simulate a Polaroid picture</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#precision" class="text-decoration-none fw-medium">-precision <var>value</var></a></td>
+ <td>set the maximum number of significant digits to be printed</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#profile" class="text-decoration-none fw-medium">-profile <var>filename</var></a></td>
+ <td>add, delete, or apply an image profile</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quality" class="text-decoration-none fw-medium">-quality <var>value</var></a></td>
+ <td>JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="text-decoration-none fw-medium">-quantize <var>colorspace</var></a></td>
+ <td>reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-medium">-quiet</a></td>
+ <td>suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#red-primary" class="text-decoration-none fw-medium">-red-primary <var>point</var></a></td>
+ <td>chromaticity red primary point</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-medium">-regard-warnings</a></td>
+ <td>pay attention to warning messages.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#repage" class="text-decoration-none fw-medium">-repage <var>geometry</var></a></td>
+ <td>size and location of an image canvas</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#resize" class="text-decoration-none fw-medium">-resize <var>geometry</var></a></td>
+ <td>resize the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-medium">-respect-parentheses</a></td>
+ <td>settings remain in effect until parenthesis boundary.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#rotate" class="text-decoration-none fw-medium">-rotate <var>degrees</var></a></td>
+ <td>apply Paeth rotation to the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-medium">-sampling-factor <var>geometry</var></a></td>
+ <td>horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scale" class="text-decoration-none fw-medium">-scale <var>geometry</var></a></td>
+ <td>scale the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#scenes" class="text-decoration-none fw-medium">-scenes <var>range</var></a></td>
+ <td>image scene range</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-medium">-seed <var>value</var></a></td>
+ <td>seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shadow" class="text-decoration-none fw-medium">-shadow <var>geometry</var></a></td>
+ <td>simulate an image shadow</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#shuffle" class="text-decoration-none fw-medium">-shuffle <var>mode</var></a></td>
+ <td>reorder the sequence of images in an image list based on <code>ascending</code>, <code>descending</code>, or <code>random</code> mode</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="text-decoration-none fw-medium">-size <var>geometry</var></a></td>
+ <td>width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#strip" class="text-decoration-none fw-medium">-strip</a></td>
+ <td>strip image of all profiles and comments</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stroke" class="text-decoration-none fw-medium">-stroke <var>color</var></a></td>
+ <td>graphic primitive stroke color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#synchronize" class="text-decoration-none fw-medium">-synchronize</a></td>
+ <td>synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#taint" class="text-decoration-none fw-medium">-taint</a></td>
+ <td>mark the image as modified</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#texture" class="text-decoration-none fw-medium">-texture <var>filename</var></a></td>
+ <td>name of texture to tile onto the image background</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile" class="text-decoration-none fw-medium">-tile <var>geometry</var></a></td>
+ <td>number of tiles per row and column (e.g. -tile 8x)</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#tile-offset" class="text-decoration-none fw-medium">-tile-offset <var>geometry</var></a></td>
+ <td>set the image tile offset</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#title" class="text-decoration-none fw-medium">-title</a></td>
+ <td>decorate the montage image with a title</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transform" class="text-decoration-none fw-medium">-transform</a></td>
+ <td>affine transform image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent" class="text-decoration-none fw-medium">-transparent <var>color</var></a></td>
+ <td>make this color transparent within the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transpose" class="text-decoration-none fw-medium">-transpose</a></td>
+ <td>flip image in the vertical direction and rotate 90 degrees</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="text-decoration-none fw-medium">-transparent-color <var>color</var></a></td>
+ <td>transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#treedepth" class="text-decoration-none fw-medium">-treedepth <var>value</var></a></td>
+ <td>color tree depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#trim" class="text-decoration-none fw-medium">-trim</a></td>
+ <td>trim image edges</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#type" class="text-decoration-none fw-medium">-type <var>type</var></a></td>
+ <td>image type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#units" class="text-decoration-none fw-medium">-units <var>type</var></a></td>
+ <td>the units of image resolution</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#unsharp" class="text-decoration-none fw-medium">-unsharp <var>geometry</var></a></td>
+ <td>sharpen the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-medium">-verbose</a></td>
+ <td>print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="text-decoration-none fw-medium">-version</a></td>
+ <td>print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#view" class="text-decoration-none fw-medium">-view</a></td>
+ <td>FlashPix viewing transforms</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-medium">-virtual-pixel <var>method</var></a></td>
+ <td>access method for pixels outside the boundaries of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#white-point" class="text-decoration-none fw-medium">-white-point <var>point</var></a></td>
+ <td>chromaticity white point</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/motion-picture/index.html b/www/motion-picture/index.html
index 4d5bdb3c4..afc55340a 100644
--- a/www/motion-picture/index.html
+++ b/www/motion-picture/index.html
@@ -11,253 +11,383 @@
<meta name="description" content="Learn how ImageMagick supports motion picture workflows with DPX, Cineon, and other film formats. Explore tools for reading, writing, and processing high‑resolution frames used in professional cinema production.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Motion Picture Digital Images">
<meta property="og:description" content="Learn how ImageMagick supports motion picture workflows with DPX, Cineon, and other film formats. Explore tools for reading, writing, and processing high‑resolution frames used in professional cinema production.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Motion Picture Digital Images">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Motion Picture Digital Images",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/motion-picture/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick supports motion picture workflows with DPX, Cineon, and other film formats. Explore tools for reading, writing, and processing high‑resolution frames used in professional cinema production.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/motion-picture/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/motion-picture/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Motion Picture Digital Images</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#log">Log Format</a> • <a href="#properties">DPX Properties</a> • <a href="#settings">DPX Settings</a></p>
-
-<p class="lead">DPX (SMPTE 268M-2003) - This format is used in Motion Picture and Effects industry that makes particular use of the extensive header information and the format's flexibility in being able to handle high dynamic range and logarithmic color values at a variety of bit depths using RGB or YCbCr pixel descriptions. It is based on, but largely supersedes, Kodak's Cineon format that has a more film specific header.</p>
-
-<p>One example of it's use includes scanning film for use in post production. Each frame is stored as an individual DPX file ranging from 2k (2048 pixels wide) to 8k (8192 pixels wide - for IMAX frames) at anything between 8 to 64 bits per color component. A sequence of these might then be processed using compositing software, altering the color or adding visual effects. Once complete they might then be recorded digitally to tape or projected back on to film.</p>
-
-<p>The color values for each pixel are often stored logarithmically (particularly if the sequence is destined to be transferred back on to film) which more naturally reflects the density of how color information is stored in the emulsion on the original film. When viewed without alteration, logarithmic files appear to have very low contrast and requires a 'look up table' to translate the logarithmic image to something that resembles what you might see if the image was transferred back to film and projected in a cinema. Apart from making the image linear (like most typical computer images) and adjusting the gamma level this table sets where the black and white point lies.</p>
-
-<p>For a 10 bit logarithmic image where each color component value ranges from 0 to 1023 the black and white points are normally set at 95 for black and 685 for white. What this means is that the logarithmic file stores color values that are lighter than what the linear version will display as pure white and darker than what it will display as pure black. This extra information therefore remains available for an effects artists who might wish to alter the brightness of the image after it has been stored as a DPX file.</p>
-
-<p>As an example, had this information been lost, reducing the brightness of an image uniformly would result in highlights becoming darker, whereas with this extra information the highlights instead reduce in size and start showing details that were previously too bright to be seen. The latter is far closer to what happens in the real world.</p>
-
-<p>The header can contain Film and/or Television specific data related to a production. For example the television header can contain a SMPTE time code so that shots exported as a DPX sequence from a production's edit can be easily replaced once any effects have been added. The film header holds information about the reel of film the frames originated from and various camera settings that were used while filming. All these details usually stay with the images as they are passed between post-production companies.</p>
-
-<h2><a class="anchor" id="log"></a>Log Format</h2>
-
-<p>The color values for each pixel are often stored logarithmically (particularly if the sequence is destined to be transferred back on to film) which more naturally reflects the density of how color information is stored in the emulsion on the original film. When viewed without alteration logarithmic files appear to have very low contrast (leftmost image), and so require a 'look up table' to translate the logarithmic image to something that resembles what you might see if the image was transferred back to film and projected in a cinema (rightmost image). Apart from making the image linear (like most typical computer images) and adjusting the gamma level this table sets where the black and white point lies.</p>
-
-<ul>
- <a href="../image/bluebells_log.jpg"><img src="../image/bluebells_log.jpg" width="384" height="288" class="image-slices" alt="bluebells-log" /></a>
- <a href="../image/bluebells_lin.jpg"><img src="../image/bluebells_lin.jpg" width="384" height="288" class="image-slices" alt="bluebells-linear" /></a>
-</ul>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Motion Picture Digital Images</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick supports motion picture workflows with DPX, Cineon, and other film formats. Explore tools for reading, writing, and processing high‑resolution frames used in professional cinema production.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>For a 10 bit logarithmic image where each color component value ranges from 0 to 1023 the black and white points are normally set at 95 for black and 685 for white. What this means is that the logarithmic file stores color values that are lighter than what the linear version will display as pure white and darker than what it will display as pure black. This extra information therefore remains available for an effects artists who might wish to alter the brightness of the image after it has been stored as a DPX file.</p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Quick Navigation & Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap gap-2 pt-2 pb-3 border-bottom mb-3">
+ <a href="#log" class="btn btn-outline-secondary btn-sm">Log Format</a>
+ <a href="#properties" class="btn btn-outline-secondary btn-sm">DPX Properties</a>
+ <a href="#settings" class="btn btn-outline-secondary btn-sm">DPX Settings</a>
+ </div>
+ <p class="lead text-body-secondary">
+ DPX (SMPTE 268M-2003) is widely used in the motion picture and visual effects industry, leveraging extensive header information and the flexibility to handle high dynamic range and logarithmic color values across various bit depths using RGB or YCbCr pixel descriptions. It is based on, and largely supersedes, Kodak's Cineon format.
+ </p>
+ <p class="text-muted small">
+ Typical workflows involve scanning film for post-production. Each frame is stored as an individual DPX file ranging from 2K (2048px wide) up to 8K (8192px wide for IMAX) at 8 to 64 bits per color component. Sequences are processed via compositing software before being recorded back to tape or projected onto film.
+ </p>
+ </div>
+ </div>
-<p>As an example, had this information been lost, reducing the brightness of a linear image uniformly would result in highlights becoming darker (leftmost image), whereas with this extra information the highlights instead reduce in size and start showing details that were previously too bright to be seen (rightmost image). The latter is far closer to what happens in the real world.</p>
+ <!-- Technical Context Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">High Dynamic Range & Metadata</h2>
+ <p>
+ The header can contain production-specific film or television data. Television headers can store SMPTE timecodes to allow seamless replacement of shots exported as DPX sequences, while film headers preserve reel information and camera settings. These details follow the images throughout post-production pipelines.
+ </p>
+ </section>
+
+ <!-- Log Format Section -->
+ <section id="log" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Logarithmic Color Format</h2>
+ <p>
+ Color values are often stored logarithmically to mirror the density of color information in film emulsion. Unaltered logarithmic files appear low-contrast and require a look-up table (LUT) for cinematic projection. Beyond linearizing the image and adjusting gamma, LUTs define black and white points.
+ </p>
+
+ <div class="row g-4 text-center my-3">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/bluebells_log.jpg"><img src="https://imagemagick.org/image/bluebells_log.jpg" class="img-fluid rounded" alt="bluebells-log" /></a>
+ <p class="small text-muted mt-2 mb-0">Unaltered Logarithmic Image (Low Contrast)</p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/bluebells_lin.jpg"><img src="https://imagemagick.org/image/bluebells_lin.jpg" class="img-fluid rounded" alt="bluebells-linear" /></a>
+ <p class="small text-muted mt-2 mb-0">Corrected / Linearized Image</p>
+ </div>
+ </div>
+ </div>
+ </div>
-<ul>
- <a href="../image/bluebells_clipped.jpg"><img src="../image/bluebells_clipped.jpg" width="384" height="288" class="image-slices" alt="bluebells-clipped" /></a>
- <a href="../image/bluebells_darker.jpg"><img src="../image/bluebells_darker.jpg" width="384" height="288" class="image-slices" alt="bluebells-darker" /></a>
-</ul>
+ <p class="mt-3">
+ For 10-bit logarithmic images ranging from 0 to 1023, black and white points are typically set to 95 and 685, respectively. This stores color values lighter than pure white and darker than pure black, preserving extra highlight and shadow data for downstream grading.
+ </p>
-<h2><a class="anchor" id="properties"></a>DPX Properties</h2>
+ <div class="row g-4 text-center my-3">
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/bluebells_clipped.jpg"><img src="https://imagemagick.org/image/bluebells_clipped.jpg" class="img-fluid rounded" alt="bluebells-clipped" /></a>
+ <p class="small text-muted mt-2 mb-0">Clipped Highlights (Standard Reduction)</p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card h-100 border-0 bg-body-tertiary shadow-sm">
+ <div class="card-body p-2">
+ <a href="https://imagemagick.org/image/bluebells_darker.jpg"><img src="https://imagemagick.org/image/bluebells_darker.jpg" class="img-fluid rounded" alt="bluebells-darker" /></a>
+ <p class="small text-muted mt-2 mb-0">Preserved Highlight Details (DPX Headroom)</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
-<p>ImageMagick supports these DPX properties:</p>
+ <!-- DPX Properties Section -->
+ <section id="properties" class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">DPX Properties</h2>
+ <p>ImageMagick supports a comprehensive set of DPX metadata properties:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>dpx:file.copyright
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body p-0">
+ <pre class="overflow-auto p-3 mb-0 font-monospace text-body-secondary small" style="max-height: 45vh;"><code>dpx:file.copyright
dpx:file.creator
dpx:file.filename
dpx:file.project
@@ -302,101 +432,149 @@ dpx:television.vertical_sample_rate
dpx:television.video_signal
dpx:television.white_level
dpx:user.id
-dpx:user.data
-</code></pre>
-
-<p>Look for any user data as the <code>dpx:user-data</code> image profile.</p>
-
-<p> To determine which properties are associated with your DPX image, use this command for example:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -verbose bluebells.dpx
-</samp></pre>
-
-<p>To identify a particular property, try this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick identify -format "%[dpx:television.time.code]" bluebells.dpx
-</samp></pre>
-
-<p>Finally, to set a property:</p>
+dpx:user.data</code></pre>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick bluebells.dpx -define dpx:television.time.code=10:00:02:15 bluebells-001.dpx
-</samp></pre>
+ <p class="small text-muted">User data can be accessed via the <code>dpx:user-data</code> image profile.</p>
-<h2><a class="anchor" id="settings"></a>DPX Settings</h2>
+ <h3 class="h5 mt-4 mb-3">Command-Line Inspection & Modification</h3>
+ <p>Inspect all associated properties using verbose output:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick identify -verbose bluebells.dpx</samp></pre>
+ </div>
+ </div>
-<p>Use <a href="../command-line-options/index.html#set">-set</a> to specify the image or film gamma or black and white points. For example use:
-</p>
+ <p>Query a specific property format:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick identify -format "%[dpx:television.time.code]" bluebells.dpx</samp></pre>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-set gamma 1.7
+ <p>Modify and write a property value:</p>
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick bluebells.dpx -define dpx:television.time.code=10:00:02:15 bluebells-001.dpx</samp></pre>
+ </div>
+ </div>
+ </section>
+
+ <!-- DPX Settings Section -->
+ <section id="settings" class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">DPX Settings</h2>
+ <p>
+ Use <a href="../command-line-options/index.html#set">-set</a> to specify gamma, film gamma, or reference black and white points:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><code>-set gamma 1.7
-set film-gamma 0.6
-set reference-black 95
-set reference-white 685
--set profile dpx:user.data
-</code></pre>
-
+-set profile dpx:user.data</code></pre>
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/multispectral-imagery/index.html b/www/multispectral-imagery/index.html
index b0d58d750..2dd289171 100644
--- a/www/multispectral-imagery/index.html
+++ b/www/multispectral-imagery/index.html
@@ -8,233 +8,416 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Multispectral Imagery</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn about multispectral imagery support in ImageMagick, capturing wider wavelengths from ultraviolet to infrared, handling meta channels, and processing multi-band images.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Multispectral Imagery">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn about multispectral imagery support in ImageMagick, capturing wider wavelengths from ultraviolet to infrared, handling meta channels, and processing multi-band images.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Multispectral Imagery">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Multispectral Imagery",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/multispectral-imagery/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn about multispectral imagery support in ImageMagick, capturing wider wavelengths from ultraviolet to infrared, handling meta channels, and processing multi-band images.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/multispectral-imagery/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/multispectral-imagery/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Multispectral Imagery</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Multispectral Imagery</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn about multispectral imagery support in ImageMagick, capturing wider wavelengths from ultraviolet to infrared, handling meta channels, and processing multi-band images.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Multispectral imagery refers to images that are captured using multiple bands of the electromagnetic spectrum, beyond just the visible light spectrum. This means that they capture data across a wider range of wavelengths, from ultraviolet to infrared.</p>
-<p>By capturing data across multiple spectral bands, multispectral imagery can provide additional information about the objects or scenes being imaged, such as their composition, temperature, and vegetation health. This information can be used for a wide range of applications, including agriculture, environmental monitoring, disaster response, and military surveillance.</p>
-<p>Multispectral imagery is often captured using specialized sensors on satellites, drones, or aircraft. The data is then processed using specialized software to create images that display the information captured in each spectral band.</p>
-<p>Overall, multispectral imagery provides a powerful tool for analyzing and understanding the world around us, allowing us to gain insights that would be impossible to obtain using visible light imagery alone.</p>
-<h4>Multispectral Support in ImageMagick</h4>
-<p>ImageMagick supports multispectral images where all channels have the same dimensions and number of pixels as the original image. However, not all image formats support multispectral images. PSD, TIFF, MIFF, MPC, and <a href="http://im.snibgo.com/fmttxt.htm">FTXT</a> have full support for multispectral images up to 31 bands with 21 meta channels. If you build ImageMagick with the configure script <code>--enable-64bit-channel-masks</code> option, you can process 62 band multispectral images with up to 52 meta channels.</p>
-<p>We call image channels beyond the standard RGB(A) or CMYK(A) channels, "meta" channels. We label them as "meta", "meta1", "meta2", etc.. Meta channels are treated the same as any other channel meaning they can be read, written, and operated upon-- e.g., resized, gamma adjusted, etc.</p>
-<h5>Create a Multispectral Image</h5>
-<p>Begin with a multispectral image, typically in the TIFF or PSD format. If you don't have one, you can create your own. In our example, we create a single CMYK pixel with two meta channels. Stuff this in a file titled <code>multiMeta.txt</code>:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>0,0: 10,20,30,40,50,60</code></pre>
-<p>Let's convert that to the TIFF image format:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick -size 1x1 -colorspace CMYK -define ftxt:format="\x,\y:\c\n" -define ftxt:hasalpha=false -define ftxt:nummeta=2 ftxt:multiMeta.txt multiMeta.tif</samp></pre>
-<p>Let confirm that worked as expected:<p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><samp>$ identify -verbose multiMeta.tif
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Lead Section -->
+ <div class="row mb-4">
+ <div class="col-lg-10 mx-auto text-center">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 mb-3 fs-7">
+ <i class="bi bi-layers-fill"></i>
+ <span class="small fw-semibold">Advanced Image Processing</span>
+ </div>
+ <h1 class="display-5 fw-bold mb-3">Multispectral Imagery</h1>
+ <p class="lead text-body-secondary">
+ Multispectral imagery refers to images that are captured using multiple bands of the electromagnetic spectrum, beyond just the visible light spectrum. This means that they capture data across a wider range of wavelengths, from ultraviolet to infrared.
+ </p>
+ </div>
+ </div>
+
+ <!-- Information Grid Cards -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-info-circle me-2"></i>Applications</h5>
+ <p class="small text-body-secondary mb-0">
+ By capturing data across multiple spectral bands, multispectral imagery provides additional information about objects or scenes, such as composition, temperature, and vegetation health, for use in agriculture, environmental monitoring, disaster response, and military surveillance.
+ </p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-broadcast me-2"></i>Data Acquisition</h5>
+ <p class="small text-body-secondary mb-0">
+ Multispectral imagery is often captured using specialized sensors on satellites, drones, or aircraft. The data is then processed using specialized software to create images displaying the information captured in each spectral band.
+ </p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-lightbulb me-2"></i>Insights</h5>
+ <p class="small text-body-secondary mb-0">
+ Overall, multispectral imagery provides a powerful tool for analyzing and understanding the world around us, allowing insights that would be impossible to obtain using visible light imagery alone.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Multispectral Support in ImageMagick -->
+ <section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-cpu fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Multispectral Support in ImageMagick</h2>
+ </div>
+
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ ImageMagick supports multispectral images where all channels have the same dimensions and number of pixels as the original image. However, not all image formats support multispectral images. PSD, TIFF, MIFF, MPC, and <a href="http://im.snibgo.com/fmttxt.htm" target="_blank" rel="noopener">FTXT</a> have full support for multispectral images up to 31 bands with 21 meta channels.
+ </p>
+ <p class="text-body-secondary mb-3">
+ If you build ImageMagick with the configure script <code>--enable-64bit-channel-masks</code> option, you can process 62 band multispectral images with up to 52 meta channels.
+ </p>
+ <p class="text-body-secondary mb-0">
+ We call image channels beyond the standard RGB(A) or CMYK(A) channels, "meta" channels. We label them as "meta", "meta1", "meta2", etc. Meta channels are treated the same as any other channel meaning they can be read, written, and operated upon—e.g., resized, gamma adjusted, etc.
+ </p>
+ </div>
+ </section>
+
+ <!-- Create a Multispectral Image -->
+ <section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-file-earmark-plus fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Create a Multispectral Image</h2>
+ </div>
+
+ <p class="text-body-secondary mb-3">
+ Begin with a multispectral image, typically in the TIFF or PSD format. If you don't have one, you can create your own. In our example, we create a single CMYK pixel with two meta channels. Stuff this in a file titled <code>multiMeta.txt</code>:
+ </p>
+
+ <!-- Code Block 1 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">multiMeta.txt</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ 0,0: 10,20,30,40,50,60
+ </div>
+ </div>
+
+ <p class="text-body-secondary mb-3">Let's convert that to the TIFF image format:</p>
+
+ <!-- Code Block 2 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">convert.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick -size 1x1 -colorspace CMYK -define ftxt:format="\x,\y:\c\n" -define ftxt:hasalpha=false -define ftxt:nummeta=2 ftxt:multiMeta.txt multiMeta.tif
+ </div>
+ </div>
+
+ <p class="text-body-secondary mb-3">Let's confirm that worked as expected:</p>
+
+ <!-- Verbose Output Terminal Block -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">identify-verbose.log</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-auto" style="max-height: 75svh;">
+ <pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><samp>$ identify -verbose multiMeta.tif
Image:
Filename: multiMeta.tif
Permissions: rw-------
@@ -357,84 +540,189 @@ Image:
verbose: true
Tainted: False
Filesize: 306B
- Number pixels: 1
-</samp></pre>
-<p>Notice the channel depth and statistics associated with the two meta channels.<p>
-<h5>Working with Multispectral Images</h5>
-<p>Meta channels are treated the same as any other channel meaning they can be read, written, and operated upon-- e.g., resized, gamma adjusted, etc.. Here, we replace the first channel with the contents of the meta channel:<p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><pre><samp>$ magick multiMeta.tif -channel-fx 'meta1=>cyan' multiMeta-1.tif</samp></pre></pre>
-<p>The original cyan channel has an intensity of 10. It's now, per the channel FX instructions, 50.<p>
-<p>And in this example, we create two meta channels:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><pre><samp>$ magick lena.png \( mandril3.jpg -colorspace gray \) -channel-fx '| gray=>meta' \( zelda1.jpg -colorspace gray \) -channel-fx '| gray=>meta1' meta.tif</samp></pre></pre>
-<p>In this example, we blend two meta channels into a single alpha channel:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><pre><samp>$ magick in.tiff -alpha opaque \( +clone -set colorspace sRGB -channel-fx "meta0=>red meta1=>green" \) -channel A -fx "(v.r+v.g)/2" +channel out.tiff</samp></pre></pre>
-<br/>
-<h5>Writing Multispectral Images</h5>
-<p>You can preserve multispectral images by writing them to a format that supports meta channels such as TIFF or PSD. If you write to other image formats that do not support multispectral images, the channels are not preserved and instead lost-- e.g., PNG. In this example, we read, resize, and write a multispectral image:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><pre><samp>$ magick multiMeta.tif -resize 50% resizedMeta.tif</samp></pre></pre>
+ Number pixels: 1</samp></pre>
+ </div>
+ </div>
+
+ <p class="text-body-secondary mb-0">Notice the channel depth and statistics associated with the two meta channels.</p>
+ </section>
+
+ <!-- Working with Multispectral Images -->
+ <section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-sliders fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Working with Multispectral Images</h2>
+ </div>
+
+ <p class="text-body-secondary mb-3">
+ Meta channels are treated the same as any other channel meaning they can be read, written, and operated upon—e.g., resized, gamma adjusted, etc. Here, we replace the first channel with the contents of the meta channel:
+ </p>
+
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">replace-channel.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick multiMeta.tif -channel-fx 'meta1=>cyan' multiMeta-1.tif
+ </div>
+ </div>
+
+ <p class="text-body-secondary mb-3">
+ The original cyan channel has an intensity of 10. It's now, per the channel FX instructions, 50.
+ </p>
+
+ <p class="text-body-secondary mb-3">And in this example, we create two meta channels:</p>
+
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">create-meta.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick lena.png \( mandril3.jpg -colorspace gray \) -channel-fx '| gray=>meta' \( zelda1.jpg -colorspace gray \) -channel-fx '| gray=>meta1' meta.tif
+ </div>
+ </div>
+
+ <p class="text-body-secondary mb-3">In this example, we blend two meta channels into a single alpha channel:</p>
+
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">blend-meta.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick in.tiff -alpha opaque \( +clone -set colorspace sRGB -channel-fx "meta0=>red meta1=>green" \) -channel A -fx "(v.r+v.g)/2" +channel out.tiff
+ </div>
+ </div>
+ </section>
+
+ <!-- Writing Multispectral Images -->
+ <section class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-file-earmark-arrow-down fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Writing Multispectral Images</h2>
+ </div>
+
+ <p class="text-body-secondary mb-3">
+ You can preserve multispectral images by writing them to a format that supports meta channels such as TIFF or PSD. If you write to other image formats that do not support multispectral images, the channels are not preserved and instead lost—e.g., PNG. In this example, we read, resize, and write a multispectral image:
+ </p>
+
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">resize-meta.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick multiMeta.tif -resize 50% resizedMeta.tif
+ </div>
+ </div>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/news/index.html b/www/news/index.html
index 60e6f9ec4..934e3d6ab 100644
--- a/www/news/index.html
+++ b/www/news/index.html
@@ -162,7 +162,7 @@
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
+ <a class="navbar-brand fw-bold" href="../index.html" title="ImageMagick">ImageMagick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -210,7 +210,7 @@
<div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
+ <a href="../index.html" class="text-decoration-none">
<h1 class="fs-2 mb-1 display-5">News</h1>
</a>
<h2 class="fs-5 text-muted h4">ImageMagick</h2>
@@ -300,7 +300,7 @@
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
+ <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index.html">About ImageMagick</a>
</main><!-- /.container -->
<footer class="text-center pt-5 my-5 text-body-secondary border-top">
<div class="container-fluid">
diff --git a/www/opencl/index.html b/www/opencl/index.html
index ace84923d..e4c463bf3 100644
--- a/www/opencl/index.html
+++ b/www/opencl/index.html
@@ -162,7 +162,7 @@
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
+ <a class="navbar-brand fw-bold" href="../index.html" title="ImageMagick">ImageMagick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -210,7 +210,7 @@
<div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
+ <a href="../index.html" class="text-decoration-none">
<h1 class="fs-2 mb-1 display-5">Parallel Execution with OpenCL</h1>
</a>
<h2 class="fs-5 text-muted h4">ImageMagick</h2>
@@ -290,7 +290,7 @@ if (InitializeOpenCL(clEnv,exception) == MagickFalse)
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
+ <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index.html">About ImageMagick</a>
</main><!-- /.container -->
<footer class="text-center pt-5 my-5 text-body-secondary border-top">
<div class="container-fluid">
diff --git a/www/openmp/index.html b/www/openmp/index.html
index 9dbeca607..65bafe8f5 100644
--- a/www/openmp/index.html
+++ b/www/openmp/index.html
@@ -11,227 +11,354 @@
<meta name="description" content="Discover how ImageMagick leverages OpenMP for parallel execution, enabling faster image processing across multicore systems. Learn how threading boosts performance, how to benchmark efficiency, and how to configure builds with or without OpenMP support.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Parallel Execution with OpenMP">
<meta property="og:description" content="Discover how ImageMagick leverages OpenMP for parallel execution, enabling faster image processing across multicore systems. Learn how threading boosts performance, how to benchmark efficiency, and how to configure builds with or without OpenMP support.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Parallel Execution with OpenMP">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Parallel Execution with OpenMP",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/openmp/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Discover how ImageMagick leverages OpenMP for parallel execution, enabling faster image processing across multicore systems. Learn how threading boosts performance, how to benchmark efficiency, and how to configure builds with or without OpenMP support.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/openmp/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/openmp/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Parallel Execution with OpenMP</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Parallel Execution with OpenMP</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Discover how ImageMagick leverages OpenMP for parallel execution, enabling faster image processing across multicore systems. Learn how threading boosts performance, how to benchmark efficiency, and how to configure builds with or without OpenMP support.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">Many of ImageMagick's internal algorithms are threaded to take advantage of speed-ups offered by the multicore processor chips and <a href="https://www.openmp.org/">OpenMP</a>. OpenMP, is an API specification for parallel programming. If your compiler supports OpenMP (e.g. gcc, Visual Studio 2005) directives, ImageMagick automatically includes support. To verify, look for the OpenMP feature of ImageMagick with this command:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick identify -version
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container-fluid px-0">
+ <!-- Lead Introduction -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <p class="lead text-body-secondary">
+ Many of ImageMagick's internal algorithms are threaded to take advantage of speed-ups offered by multicore processor chips and <a href="https://www.openmp.org/">OpenMP</a>, an API specification for parallel programming. If your compiler supports OpenMP directives (such as GCC or Visual Studio 2005), ImageMagick automatically includes support.
+ </p>
+ </div>
+ </div>
+
+ <!-- Verification Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">Verifying OpenMP Support</h2>
+ <p>To verify if OpenMP is active in your ImageMagick build, look for the OpenMP feature string using the following command:</p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary"><samp>$ magick identify -version
Version: ImageMagick 7.0.10-50 2021-01-04 Q16 https://imagemagick.org
Copyright: © 1999-2021 ImageMagick Studio LLC
Features: OpenMP(4.5)</samp></pre>
-<p>With OpenMP enabled, most ImageMagick algorithms execute on all the cores on your system in parallel. ImageMagick typically divides the work so that each thread processes 64 rows of pixels. As rows are completed, OpenMP assigns more chunks of pixel rows to each thread until the algorithm completes. For example, if you have a quad-core system, and attempt to resize an image, the resizing takes place on 4 cores (8 if hyperthreading is enabled).</p>
-<p>You can further increase performance by reducing lock contention with the <a href="http://goog-perftools.sourceforge.net/doc/tcmalloc.html">tcmalloc</a> memory allocation library. To enable, add <code>--with-tcmalloc</code> to the <code>configure</code> command-line when you build ImageMagick.</p>
-<h4>The Perils of Parallel Execution</h4>
-<p>It can be difficult to predict behavior in a parallel environment. Performance might depend on a number of factors including the compiler, the version of the OpenMP library, the processor type, the number of cores, the amount of memory, whether hyperthreading is enabled, the mix of applications that are executing concurrently with ImageMagick, or the particular image-processing algorithm you utilize. The only way to be certain of the optimal performance, in terms of the number of threads, is to benchmark. ImageMagick includes progressive threading when benchmarking a command and returns the elapsed time and efficiency for one or more threads. This can help you identify how many threads are the most efficient in your environment. Here is an example benchmark for threads 1-8:</p>
+ </div>
+ </div>
+ </section>
+
+ <!-- How It Works Section -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">How Parallel Execution Works</h2>
+ <p>
+ With OpenMP enabled, most ImageMagick algorithms execute across all available system cores in parallel. ImageMagick typically divides the work so that each thread processes 64 rows of pixels. As rows are completed, OpenMP assigns additional chunks to each thread until the task is complete. For example, running a resize operation on a quad-core system utilizes 4 cores (or 8 if hyperthreading is enabled).
+ </p>
+
+ <div class="card border-0 bg-body-tertiary shadow-sm mt-3">
+ <div class="card-body">
+ <h3 class="h6 fw-bold mb-2">Performance Tip</h3>
+ <p class="small text-muted mb-0">
+ You can further increase performance by reducing memory lock contention with the <a href="http://goog-perftools.sourceforge.net/doc/tcmalloc.html">tcmalloc</a> memory allocation library. To enable it, add <code>--with-tcmalloc</code> to the <code>configure</code> command-line when building ImageMagick.
+ </p>
+ </div>
+ </div>
+ </section>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick -bench 40 model.png -sharpen 0x1 null:
+ <!-- The Perils of Parallel Execution & Benchmarking -->
+ <section class="mb-5">
+ <h2 class="h4 pb-2 border-bottom mb-3">The Perils of Parallel Execution and Benchmarking</h2>
+ <p>
+ Predicting behavior in a parallel environment can be complex. Performance depends on various factors including your compiler, OpenMP library version, processor type, core count, available memory, hyperthreading status, concurrent applications, and the specific image-processing algorithm used.
+ </p>
+ <p>
+ Because of these variables, benchmarking is the only reliable way to ensure optimal performance. ImageMagick supports progressive threading benchmarks, returning elapsed time and efficiency metrics across one or more threads. Below is an example benchmark measuring threads 1 through 8:
+ </p>
+
+ <div class="card bg-body-tertiary border-0 shadow-sm mb-3">
+ <div class="card-body">
+ <pre class="mb-0 font-monospace text-body-secondary small"><samp>$ magick -bench 40 model.png -sharpen 0x1 null:
Performance[1]: 40i 0.712ips 1.000e 14.000u 0:14.040
Performance[2]: 40i 1.362ips 0.657e 14.550u 0:07.340
Performance[3]: 40i 2.033ips 0.741e 14.530u 0:04.920
@@ -240,70 +367,118 @@ Performance[5]: 40i 3.236ips 0.820e 14.970u 0:03.090
Performance[6]: 40i 3.802ips 0.842e 15.280u 0:02.630
Performance[7]: 40i 4.274ips 0.857e 15.540u 0:02.340
Performance[8]: 40i 4.831ips 0.872e 15.680u 0:02.070</samp></pre>
-<p>Better performance correlates with higher values of IPS (iterations-per-second). In our example, 8 cores are optimal. However, in certain cases it might be optimal to set the number of threads to 1 (e.g. <code>-limit thread 1</code>) or to disable OpenMP completely. To disable this feature, add <code>--disable-openmp</code> to your configure script command line then rebuild and re-install ImageMagick.</p>
+ </div>
+ </div>
+
+ <p class="small text-muted">
+ Higher values of <strong>IPS</strong> (iterations-per-second) indicate better performance. In the example above, 8 cores are optimal. However, certain workloads perform best restricted to a single thread (e.g., using <code>-limit thread 1</code>).
+ </p>
+ </section>
+
+ <!-- Disabling OpenMP -->
+ <section class="mb-4">
+ <h2 class="h4 pb-2 border-bottom mb-3">Disabling OpenMP</h2>
+ <p class="mb-0">
+ If you need to disable OpenMP entirely, add <code>--disable-openmp</code> to your configure script command line, then rebuild and reinstall ImageMagick.
+ </p>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/perl-magick/index.html b/www/perl-magick/index.html
index e365c07b6..cdd6ccc56 100644
--- a/www/perl-magick/index.html
+++ b/www/perl-magick/index.html
@@ -11,2746 +11,1421 @@
<meta name="description" content="Use PerlMagick to read, manipulate, or write an image or image sequence from within a Perl script.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
- <style>
- html {
- scroll-padding-top: 70px;
- }
-
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
- }
-
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
- }
-
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
- }
-
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
- }
-
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
- }
-
- :root {
- --bs-code-color: revert;
- }
-
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
- }
-
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
- }
- </style>
- <!-- Open Graph Meta Tags -->
- <meta property="og:title" content="ImageMagick | PerlMagick, Perl API">
- <meta property="og:description" content="Use PerlMagick to read, manipulate, or write an image or image sequence from within a Perl script.">
- <meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
- <meta property="og:url" content="index.html">
- <meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | PerlMagick, Perl API">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
- <!-- JSON-LD Structured Data -->
- <script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | PerlMagick, Perl API",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
- </script>
- <!-- Google Custom Search -->
- <script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
-</head>
-
-<body>
- <script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
- </script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
- <span class="navbar-toggler-icon"></span>
- </button>
-
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
- <li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
- </li>
- <li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
- </li>
- <li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
- </li>
- <li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
- </li>
- <li class="nav-item">
- <a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
- </li>
- </ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/perl-magick/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
- </ul>
- </li>
- </ul>
- </div>
- </div>
- </nav>
-
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">PerlMagick, Perl API</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#installation">Installation</a> • <a href="#overview">Overview</a> • <a href="#example">Example Script</a> • <a href="#read">Read or Write an Image</a> • <a href="#manipulate">Manipulate an Image</a> • <a href="#set-attribute">Set an Image Attribute</a> • <a href="#get-attribute">Get an Image Attribute</a> • <a href="#compare">Compare an Image to its Reconstruction</a> • <a href="#montage">Create an Image Montage</a> • <a href="#blobs">Working with Blobs</a> • <a href="#direct-access">Direct-access to Image Pixels</a> • <a href="#miscellaneous">Miscellaneous Methods</a> • <a href="#exceptions">Handling Exceptions</a>• <a href="#constants">Constant</a> </p>
-
-<a class="anchor" id="introduction"></a>
-<p class="lead"><a href="../download/index.html">PerlMagick</a> is an objected-oriented <a href="https://www.perl.org/">Perl</a> interface to ImageMagick. Use the module to read, manipulate, or write an image or image sequence from within a Perl script. This makes it very suitable for Web CGI scripts. You must have ImageMagick 6.5.5 or above and Perl version 5.005_02 or greater installed on your system for PerlMagick to build properly.</p>
-
-<p>There are a number of useful scripts available to show you the value of PerlMagick. You can do Web based image manipulation and conversion with <a href="https://download.imagemagick.org/archive/perl/">MagickStudio</a>, or use <a href="https://github.com/ImageMagick/ImageMagick/blob/main/PerlMagick/demo/tree.pl">L-systems</a> to create images of plants using mathematical constructs, and finally navigate through collections of thumbnail images and select the image to view with the <a href="https://webmagick.sourceforge.net/">WebMagick Image Navigator</a>.</p>
-
-<p>You can try PerlMagick from your Web browser at the <a href="https://magickstudio.imagemagick.org/">ImageMagick Studio</a>. Or, you can see <a href="../examples/index.html">examples</a> of select PerlMagick functions.</p>
-
-<h2><a class="anchor" id="installation"></a>Installation</h2>
-
-<p><b>UNIX</b></p>
-
-<p>Is PerlMagick available from your system RPM repository? For example, on our CentOS system, we install PerlMagick thusly:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>yum install ImageMagick-perl
-</code></pre>
-
-<p>If not, you must install PerlMagick from the ImageMagick source distribution. Download the latest
-
-
-
-
-
-<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-31/ImageMagick-7.1.2-31.7z">source</a>
- release.</p>
-
-<p>Unpack the distribution with this command:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>tar xvzf ImageMagick.tar.gz
-</code></pre>
-
-<p>Next configure and compile ImageMagick:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>cd ImageMagick-7.1.2-31
-
-./configure -with-perl
-make</code></pre>
-
-<p>If ImageMagick / PerlMagick configured and compiled without complaint, you are ready to install it on your system. Administrator privileges are required to install. To install, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>sudo make install
-</code></pre>
-
-<p>You may need to configure the dynamic linker run-time bindings:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>sudo ldconfig /usr/local/lib
-</code></pre>
-
-
-<p>Finally, verify the PerlMagick install worked properly, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>perl -MImage::Magick -le 'print Image::Magick->QuantumDepth'
-</code></pre>
-
-<p>Congratulations, you have a working ImageMagick distribution and you are ready to use PerlMagick to <a href="https://usage.imagemagick.org/">convert, compose, or edit</a> your images.</p>
-
-<p><b>Windows XP / Windows 2000</b></p>
-
-<p>ImageMagick must already be installed on your system. Also, the ImageMagick source distribution for <a href="../download/index.html">Windows 2000</a> is required. You must also have the <code>nmake</code> from the Visual C++ or J++ development environment. Copy <code>\bin\IMagick.dll</code> and <code>\bin\X11.dll</code> to a directory in your dynamic load path such as <code>c:\perl\site\5.00502</code>.</p>
-
-<p>Next, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>cd PerlMagick
-perl Makefile.nt
-nmake
-nmake install
-</code></pre>
-
-
-<p><b>Running the Regression Tests</b></p>
-
-<p>To verify a correct installation, type</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>make test
-</code></pre>
-
-<p>Use <code>nmake test</code> under Windows. There are a few demonstration scripts available to exercise many of the functions PerlMagick can perform. Type</p>
-
-<p>Use the <code>prove</code> utility to execute a test from the build folder:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>prove --blib blib -I `pwd` -bv ./t/read.t
-</code></pre>
-
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>cd demo
-make
-</code></pre>
-
-<p>You are now ready to utilize the PerlMagick methods from within your Perl scripts.</p>
-
-<h2><a class="anchor" id="overview"></a>Overview</h2>
-
-<p>Any script that wants to use PerlMagick methods must first define the methods within its namespace and instantiate an image object. Do this with:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>use Image::Magick;
-
-$image = Image::Magick->new;
-</code></pre>
-
-<p>PerlMagick is <var>quantum</var> aware. You can request a specific quantum depth when you instantiate an image object:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>use Image::Magick::Q16;
-
-$image = Image::Magick::Q16->new;
-</code></pre>
-
-<p>The new() method takes the same parameters as <a href="#set-attribute">SetAttribute</a> . For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image = Image::Magick->new(size=>'384x256');
-</code></pre>
-
-<p>Next you will want to read an image or image sequence, manipulate it, and then display or write it. The input and output methods for PerlMagick are defined in <a href="#read">Read or Write an Image</a>. See <a href="#set-attribute">Set an Image Attribute</a> for methods that affect the way an image is read or written. Refer to <a href="#manipulate">Manipulate an Image</a> for a list of methods to transform an image. <a href="#get-attribute">Get an Image Attribute</a> describes how to retrieve an attribute for an image. Refer to <a href="#montage">Create an Image Montage</a> for details about tiling your images as thumbnails on a background. Finally, some methods do not neatly fit into any of the categories just mentioned. Review <a href="#miscellaneous">Miscellaneous Methods</a> for a list of these methods.</p>
-
-<p>Once you are finished with a PerlMagick object you should consider destroying it. Each image in an image sequence is stored in virtual memory. This can potentially add up to mebibytes of memory. Upon destroying a PerlMagick object, the memory is returned for use by other Perl methods. The recommended way to destroy an object is with <code>undef</code>:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>undef $image;
-</code></pre>
-
-<p>To delete all the images but retain the <code>Image::Magick</code> object use</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@$image = ();
-</code></pre>
-
-<p>and finally, to delete a single image from a multi-image sequence, use</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>undef $image->[$x];
-</code></pre>
-
-<p>The next section illustrates how to use various PerlMagick methods to manipulate an image sequence.</p>
-
-<p>Some of the PerlMagick methods require external programs such as <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a>. This may require an explicit path in your PATH environment variable to work properly. For example (in Linux),</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$ENV{PATH}' . "='/../bin:/usr/bin:/usr/local/bin';
-</code></pre>
-
-<h2><a class="anchor" id="example"></a>Example Script</h2>
-
-<p>Here is an example script to get you started:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>#!/usr/local/bin/perl
-use Image::Magick;<br />
-my($image, $x);<br />
-$image = Image::Magick->new;
-$x = $image->Read('girl.png', 'logo.png', 'rose.png');
-warn "$x" if "$x";<br />
-$x = $image->Crop(geometry=>'100x100+100+100');
-warn "$x" if "$x";<br />
-$x = $image->Write('x.png');
-warn "$x" if "$x";
-</code></pre>
-
-<p>The script reads three images, crops them, and writes a single image as a GIF animation sequence. In many cases you may want to access individual images of a sequence. The next example illustrates how this done:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>#!/usr/local/bin/perl
-use Image::Magick;<br />
-my($image, $p, $q);<br />
-$image = new Image::Magick;
-$image->Read('x1.png');
-$image->Read('j*.jpg');
-$image->Read('k.miff[1, 5, 3]');
-$image->Contrast();
-for ($x = 0; $image->[$x]; $x++)
-{
- $image->[$x]->Frame('100x200') if $image->[$x]->Get('magick') eq 'GIF';
- undef $image->[$x] if $image->[$x]->Get('columns') < 100;
-}
-$p = $image->[1];
-$p->Draw(stroke=>'red', primitive=>'rectangle', points=>20,20 100,100');
-$q = $p->Montage();
-undef $image;
-$q->Write('x.miff');
-</code></pre>
-
-<p>Suppose you want to start out with a 100 by 100 pixel white canvas with a red pixel in the center. Try</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image = Image::Magick->new;
-$image->Set(size=>'100x100');
-$image->ReadImage('canvas:white');
-$image->Set('pixel[49,49]'=>'red');
-</code></pre>
-
-<p>Here we reduce the intensity of the red component at (1,1) by half:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@pixels = $image->GetPixel(x=>1,y=>1);
-$pixels[0]*=0.5;
-$image->SetPixel(x=>1,y=>1,color=>\@pixels);
-</code></pre>
-
-<p>Or suppose you want to convert your color image to grayscale:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Quantize(colorspace=>'gray');
-</code></pre>
-
-<p>Let's annotate an image with a Taipai TrueType font:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$text = 'Works like magick!';
-$image->Annotate(font=>'kai.ttf', pointsize=>40, fill=>'green', text=>$text);
-</code></pre>
-
-<p>Perhaps you want to extract all the pixel intensities from an image and write them to STDOUT:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@pixels = $image->GetPixels(map=>'I', height=>$height, width=>$width, normalize=>true);
-binmode STDOUT;
-print pack('B*',join('',@pixels));
-</code></pre>
-
-<p>Other clever things you can do with a PerlMagick objects include</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$i = $#$p"+1"; # return the number of images associated with object p
-push(@$q, @$p); # push the images from object p onto object q
-@$p = (); # delete the images but not the object p
-$p->Convolve([1, 2, 1, 2, 4, 2, 1, 2, 1]); # 3x3 Gaussian kernel
-</code></pre>
-
- <h2><a class="anchor" id="read"></a>Read or Write an Image</h2>
-
-<p>Use the methods listed below to either read, write, or display an image or image sequence:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Read or Write Methods</caption>
-<thead>
- <colgroup>
- <col width="20%" />
- <col width="20%" />
- <col width="20%" />
- <col width="40%" />
- </colgroup>
- <tr>
- <th>Method</th>
- <th>Parameters</th>
- <th>Return Value</th>
- <th>Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>Read</td>
- <td>one or more filenames</td>
- <td>the number of images read</td>
- <td>read an image or image sequence</td>
- </tr>
-
- <tr>
- <td>Write</td>
- <td>filename</td>
- <td>the number of images written</td>
- <td>write an image or image sequence</td>
- </tr>
-
- <tr>
- <td>Display</td>
- <td>server name</td>
- <td>the number of images displayed</td>
- <td>display the image or image sequence to an X server</td>
- </tr>
-
- <tr>
- <td>Animate</td>
- <td>server name</td>
- <td>the number of images animated</td>
- <td>animate image sequence to an X server</td>
- </tr>
-</tbody>
-</table>
-</div>
-
-<p>For convenience, methods Write(), Display(), and Animate() can take any parameter that <a href="#set-attribute">SetAttribute</a> knows about. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Write(filename=>'image.png', compression=>'None');
-</code></pre>
-
-<p>Use <code>-</code> as the filename to method Read() to read from standard in or to method Write() to write to standard out:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>binmode STDOUT;
-$image->Write('png:-');
-</code></pre>
-
-<p>To read an image in the GIF format from a PERL filehandle, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image = Image::Magick->new;
-open(IMAGE, 'image.gif');
-$image->Read(file=>\*IMAGE);
-close(IMAGE);
-</code></pre>
-
-<p>To write an image in the PNG format to a PERL filehandle, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$filename = "image.png";
-open(IMAGE, ">$filename");
-$image->Write(file=>\*IMAGE, filename=>$filename);
-close(IMAGE);
-</code></pre>
-
-<p>Note, reading from or writing to a Perl filehandle may fail under Windows due to different versions of the C-runtime libraries between ImageMagick and the ActiveState Perl distributions or if one of the DLL's is linked with the /MT option. See <a href="http://msdn.microsoft.com/en-us/library/ms235460.aspx">Potential Errors Passing CRT Objects Across DLL Boundaries</a> for an explanation.</p>
-
-<p>If <code>%0Nd, %0No, or %0Nx</code> appears in the filename, it is interpreted as a printf format specification and the specification is replaced with the specified decimal, octal, or hexadecimal encoding of the scene number. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>image%03d.miff
-</code></pre>
-
-<p>converts files image000.miff, image001.miff, etc.</p>
-
-<p>You can optionally add <i>Image</i> to any method name. For example, ReadImage() is an alias for method Read().</p>
-
-<h2><a class="anchor" id="manipulate"></a>Manipulate an Image</h2>
-
-<p>Once you create an image with, for example, method ReadImage() you may want to operate on it. Below is a list of all the image manipulations methods available to you with PerlMagick. There are <a href="../examples/index.html">examples</a> of select PerlMagick methods. Here is an example call to an image manipulation method:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Crop(geometry=>'100x100+10+20');
-$image->[$x]->Frame("100x200");
-</code></pre>
-
-<p>And here is a list of other image manipulation methods you can call:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Image Manipulation Methods</caption>
-<thead>
- <tr>
- <th>Method</th>
- <th style="width: 40%">Parameters</th>
- <th style="width: 40%">Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>AdaptiveBlur</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>adaptively blur the image with a Gaussian operator of the given radius and standard deviation (sigma). Decrease the effect near edges.</td>
- </tr>
-
- <tr>
- <td>AdaptiveResize</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, filter=>{Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc}, support=><i>double</i>, blur=><i>double</i></td>
- <td>adaptively resize image using data dependant triangulation. Specify <code>blur</code> > 1 for blurry or < 1 for sharp</td>
- </tr>
-
- <tr>
- <td>AdaptiveSharpen</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>adaptively sharpen the image with a Gaussian operator of the given radius and standard deviation (sigma). Increase the effect near edges.</td>
- </tr>
-
- <tr>
- <td>AdaptiveThreshold</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, bias=><i>double</i></td>
- <td>local adaptive thresholding.</td>
- </tr>
-
- <tr>
- <td>AddNoise</td>
- <td>noise=>{Uniform, Gaussian, Multiplicative, Impulse, Laplacian, Poisson}, attenuate=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>add noise to an image</td>
- </tr>
-
- <tr>
- <td>AffineTransform</td>
- <td>affine=><i>array of float values</i>, translate=><i>float, float</i>, scale=> <i>float, float</i>, rotate=><i>float</i>, skewX=><i>float</i>, skewY=><i>float</i>, interpolate={Average, Bicubic, Bilinear, Filter, Integer, Mesh, NearestNeighbor}, background=><i><a href="../color/index.html">color name</a></i></td>
- <td>affine transform image</td>
- </tr>
-
- <tr>
- <td>Affinity</td>
- <td>image=><i>image-handle</i>, method=>{None, FloydSteinberg, Riemersma}</td>
- <td>choose a particular set of colors from this image</td>
- </tr>
-
- <tr>
- <td>Annotate</td>
- <td>text=><i>string</i>, font=><i>string</i>, family=><i>string</i>, style=>{Normal, Italic, Oblique, Any}, stretch=>{Normal, UltraCondensed, ExtraCondensed, Condensed, SemiCondensed, SemiExpanded, Expanded, ExtraExpanded, UltraExpanded}, weight=><i>integer</i>, pointsize=><i>integer</i>, density=><i>geometry</i>, stroke=><i><a href="../color/index.html">color name</a></i>, strokewidth=><i>integer</i>, fill=><i><a href="../color/index.html">color name</a></i>, undercolor=><i><a href="../color/index.html">color name</a></i>, kerning=><i>float</i>, geometry=><i>geometry</i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}, antialias=>{true, false}, x=><i>integer</i>, y=><i>integer</i>, affine=><i>array of float values</i>, translate=><i>float, float</i>, scale=><i>float, float</i>, rotate=><i>float</i>. skewX=><i>float</i>, skewY=> <i>float</i>, align=>{Left, Center, Right}, encoding=>{UTF-8}, interline-spacing=><i>double</i>, interword-spacing=><i>double</i>, direction=>{right-to-left, left-to-right}, decorate=>{none, underline, overline, line-through}, word-break=>{normal, break-word}</td>
- <td>annotate an image with text. See <a href="#miscellaneous">QueryFontMetrics</a> to get font metrics without rendering any text.</td>
- </tr>
-
- <tr>
- <td>AutoGamma</td>
- <td>channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>automagically adjust gamma level of image</td>
- </tr>
-
- <tr>
- <td>AutoLevel</td>
- <td>channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>automagically adjust color levels of image</td>
- </tr>
-
- <tr>
- <td>AutoOrient</td>
- <td><br /></td>
- <td>adjusts an image so that its orientation is suitable for viewing (i.e. top-left orientation)</td>
- </tr>
-
- <tr>
- <td>AutoThreshold</td>
- <td>method=>{Kapur, OTSU, Triangle}</td>
- <td>automatically perform image thresholding</td>
- </tr>
-
- <tr>
- <td>BilateralSmoothing</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, intensity-sigma=><i>double</i>, spatial-sigma=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>a non-linear, edge-preserving, and noise-reducing smoothing filter for images. It replaces the intensity of each pixel with a weighted average of intensity values from nearby pixels. This weight is based on a Gaussian distribution. The weights depend not only on Euclidean distance of pixels, but also on the radiometric differences (e.g., range differences, such as color intensity, depth distance, etc.). This preserves sharp edges. The default value for the intensity and spatial sigmas are <var>2*diameter</var> and <var>0.5*diameter</var> respectively.</td>
- </tr>
-
- <tr>
- <td>BlackThreshold</td>
- <td>threshold=><i>color</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>force all pixels below the threshold intensity into black</td>
- </tr>
-
- <tr>
- <td>BlueShift</td>
- <td>factor=><i>double</i>,</td>
- <td>simulate a scene at nighttime in the moonlight. Start with a factor of 1.5.</td>
- </tr>
-
- <tr>
- <td>Blur</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td>Border</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, bordercolor=><i><a href="../color/index.html">color name</a></i>, compose=>{Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyAlpha, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor },</td>
- <td>surround the image with a border of color</td>
- </tr>
-
- <tr>
- <td>CannyEdge</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, 'lower-percent'=><i>double</i>, 'upper-percent'=><i>double</i></td>
- <td>use a multi-stage algorithm to detect a wide range of edges in the image (e.g. CannyEdge('0x1+10%+40%')).</td>
- </tr>
-
- <tr>
- <td>Charcoal</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i></td>
- <td>simulate a charcoal drawing</td>
- </tr>
-
- <tr>
- <td>Chop</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}</td>
- <td>chop an image</td>
- </tr>
-
- <tr>
- <td>CLAHE</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, number-bins=><i>integer</i>, clip-limit=><i>double</i></td>
- <td>contrast limited adaptive histogram equalization. <var>width</var>, <var>height</var> divides the image into tiles. <var>number-bins</var> is the number of histogram bins per tile (min 2, max 256). <var>clip-limit</var> is the contrast limit for localised changes in contrast. A clip-limit of 2 to 3 is a good starting place.</td>
- </tr>
-
- <tr>
- <td>Clamp</td>
- <td>channel=>{Red, RGB, All, etc.}</td>
- <td>set each pixel whose value is below zero to zero and any pixel whose value is above the quantum range to the quantum range (e.g. 65535) otherwise the pixel value remains unchanged.</td>
- </tr>
-
- <tr>
- <td>Clip</td>
- <td>id=><i>name</i>, inside=><i>{true, false}</i>,</td>
- <td>apply along a named path from the 8BIM profile.</td>
- </tr>
-
- <tr>
- <td>ClipMask</td>
- <td>mask=><i>image-handle</i></td>
- <td>clip image as defined by the image mask</td>
- </tr>
-
- <tr>
- <td>Clut</td>
- <td>image=><i>image-handle</i>, interpolate={Average, Bicubic, Bilinear, Filter, Integer, Mesh, NearestNeighbor}, channel=>{Red, RGB, All, etc.}</td>
- <td>apply a color lookup table to an image sequence</td>
- </tr>
-
- <tr>
- <td>Color</td>
- <td>color=><i><a href="../color/index.html">color name</a></i></td>
- <td>set the entire image to this color.</td>
- </tr>
-
- <tr>
- <td>ColorDecisionList</td>
- <td>filename=><i>string</i>,</td>
- <td>color correct with a color decision list.</td>
- </tr>
-
- <tr>
- <td>Colorize</td>
- <td>fill=><i><a href="../color/index.html">color name</a></i>, blend=><i>string</i></td>
- <td>colorize the image with the fill color</td>
- </tr>
-
- <tr>
- <td>ColorMatrix</td>
- <td>matrix=><i>array of float values</i></td>
- <td>apply color correction to the image. Although you can use variable sized matrices, typically you use a 5 x 5 for an RGBA image and a 6x6 for CMYKA. A 6x6 matrix is required for offsets (populate the last column with normalized values).</td>
- </tr>
-
- <tr>
- <td>Colorspace</td>
- <td>colorspace=>{RGB, Gray, Transparent, OHTA, XYZ, YCbCr, YCC, YIQ, YPbPr, YUV, CMYK}</td>
- <td> set the image colorspace</td>
- </tr>
-
- <tr>
- <td>Comment</td>
- <td>string</td>
- <td>add a comment to your image</td>
- </tr>
-
- <tr>
- <td>ColorThreshold</td>
- <td>start-color=><i>color</i>, stop-color=><i>color</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>force all pixels below the threshold intensity into black</td>
- </tr>
-
- <tr>
- <td>CompareLayers</td>
- <td>method=>{any, clear, overlay}</td>
- <td>compares each image with the next in a sequence and returns the minimum bounding region of any pixel differences it discovers. Images do not have to be the same size, though it is best that all the images are coalesced (images are all the same size, on a flattened canvas, so as to represent exactly how a specific frame should look).</td>
- </tr>
-
- <tr>
- <td>Composite</td>
- <td>image=><i>image-handle</i>, compose=>{Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyAlpha, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor }, mask=><i>image-handle</i>, geometry=><i>geometry</i>, x=><i>integer</i>, y=><i>integer</i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}, opacity=><i>integer</i>, tile=>{True, False}, rotate=><i>double</i>, color=><i><a href="../color/index.html">color name</a></i>, blend=><i>geometry</i>, interpolate=>{undefined, average, bicubic, bilinear, filter, integer, mesh, nearest-neighbor, spline}, clip-to-self=>{True, False}</td>
- <td>composite one image onto another. Use the rotate parameter in concert with the tile parameter.</td>
- </tr>
-
- <tr>
- <td>ConnectedComponents</td>
- <td>connectivity=><i>integer</i>,</td>
- <td>connected-components uniquely labeled, choose from 4 or 8 way connectivity.</td>
- </tr>
-
- <tr>
- <td>Contrast</td>
- <td>sharpen=>{True, False}</td>
- <td>enhance or reduce the image contrast</td>
- </tr>
-
- <tr>
- <td>ContrastStretch</td>
- <td>levels=><i>string</i>, 'black-point'=><i>double</i>, 'white-point'=><i>double</i>, channel=>{Red, RGB, All, etc.}</td>
- <td>improve the contrast in an image by `stretching' the range of intensity values</td>
- </tr>
-
- <tr>
- <td>Convolve</td>
- <td>coefficients=><i>array of float values</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, bias=><i>double</i></td>
- <td>apply a convolution kernel to the image. Given a kernel <i>order</i> , you would supply <i>order*order</i> float values (e.g. 3x3 implies 9 values).</td>
- </tr>
-
- <tr>
- <td>CopyPixels</td>
- <td>image=><i>image-handle</i>, geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, offset=><i>geometry</i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}, dx=><i>integer</i>, dy=><i>integer</i></td>
- <td>copy pixels from the image as defined by the <code>width</code>x<code>height</code>+<code>x</code>+<code>y</code> to image at offset +<code>dx</code>,+<code>dy</code>.</td>
- </tr>
-
- <tr>
- <td>Crop</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, fuzz=><i>double</i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}</td>
- <td>crop an image</td>
- </tr>
-
- <tr>
- <td>CycleColormap</td>
- <td>amount=><i>integer</i></td>
- <td>displace image colormap by amount</td>
- </tr>
-
- <tr>
- <td>Decipher</td>
- <td>passphrase=><i>string</i></td>
- <td>convert cipher pixels to plain pixels</td>
- </tr>
-
- <tr>
- <td>Deconstruct</td>
- <td><br /></td>
- <td>break down an image sequence into constituent parts</td>
- </tr>
-
- <tr>
- <td>Deskew</td>
- <td>geometry=><i>string</i>,threshold=><i>double</i></td>
- <td>straighten the image</td>
- </tr>
-
- <tr>
- <td>Despeckle</td>
- <td> </td>
- <td>reduce the speckles within an image</td>
- </tr>
-
- <tr>
- <td>Difference</td>
- <td>image=><i>image-handle</i></td>
- <td>compute the difference metrics between two images </td>
- </tr>
-
- <tr>
- <td>Distort</td>
- <td>points=><i>array of float values</i>, method=>{Affine, AffineProjection, ScaleRotateTranslate, SRT, Perspective, PerspectiveProjection, BilinearForward, BilinearReverse, Polynomial, Arc, Polar, DePolar, Barrel, BarrelInverse, Shepards, Resize}, 'virtual-pixel'=>{Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White}, 'best-fit'=>{True, False}</td>
- <td>distort image</td>
- </tr>
-
- <tr>
- <td>Draw</td>
- <td>primitive=>{point, line, rectangle, arc, ellipse, circle, path, polyline, polygon, bezier, color, matte, text, @<i>filename</i>}, points=><i>string</i> , method=><i>{Point, Replace, Floodfill, FillToBorder, Reset}</i>, stroke=><i><a href="../color/index.html">color name</a></i>, fill=><i><a href="../color/index.html">color name</a></i>, font=><i>string</i>, pointsize=><i>integer</i>, strokewidth=><i>float</i>, antialias=>{true, false}, bordercolor=><i><a href="../color/index.html">color name</a></i>, x=><i>float</i>, y=><i>float</i>, dash-offset=><i>float</i>, dash-pattern=><i>array of float values</i>, affine=><i>array of float values</i>, translate=><i>float, float</i>, scale=><i>float, float</i>, rotate=><i>float</i>, skewX=><i>float</i>, skewY=><i>float</i>, interpolate=>{undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline}, kerning=><i>float</i>, text=><i>string</i>, vector-graphics=><i>string</i>, interline-spacing=><i>double</i>, interword-spacing=><i>double</i>, direction=>{right-to-left, left-to-right}, word-break=>{normal, break-word}</td>
- <td>annotate an image with one or more graphic primitives.</td>
- </tr>
-
- <tr>
- <td>Encipher</td>
- <td>passphrase=><i>string</i></td>
- <td>convert plain pixels to cipher pixels</td>
- </tr>
-
- <tr>
- <td>Edge</td>
- <td>radius=><i>double</i></td>
- <td>enhance edges within the image with a convolution filter of the given radius.</td>
- </tr>
-
- <tr>
- <td>Emboss</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i></td>
- <td>emboss the image with a convolution filter of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td>Enhance</td>
- <td><br /></td>
- <td>apply a digital filter to enhance a noisy image</td>
- </tr>
-
- <tr>
- <td>Equalize</td>
- <td>channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}<br /></td>
- <td>perform histogram equalization to the image</td>
- </tr>
-
- <tr>
- <td>Extent</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, fuzz=><i>double</i>, background=><i><a href="../color/index.html">color name</a></i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}</td>
- <td>set the image size</td>
- </tr>
-
- <tr>
- <td>Evaluate</td>
- <td>value=><i>double</i>, operator=><i>{Add, And, Divide, LeftShift, Max, Min, Multiply, Or, Rightshift, RMS, Subtract, Xor}</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow} </td>
- <td>apply an arithmetic, relational, or logical expression to the image</td>
- </tr>
-
- <tr>
- <td>Filter</td>
- <td>kernel=><i>string</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, bias=><i>double</i></td>
- <td>apply a convolution kernel to the image.</td>
- </tr>
-
- <tr>
- <td>Flip</td>
- <td><br /></td>
- <td>reflect the image scanlines in the vertical direction</td>
- </tr>
-
- <tr>
- <td>Flop</td>
- <td><br /></td>
- <td>reflect the image scanlines in the horizontal direction</td>
- </tr>
-
- <tr>
- <td>FloodfillPaint</td>
- <td>geometry=><i>geometry</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, x=><i>integer</i>, y=><i>integer</i> , fill=><i><a href="../color/index.html">color name</a></i>, bordercolor=><i><a href="../color/index.html">color name</a></i>, fuzz=><i>double</i>, invert=>{True, False}</td>
- <td>changes the color value of any pixel that matches the color of the target pixel and is a neighbor. If you specify a border color, the color value is changed for any neighbor pixel that is not that color.</td>
- </tr>
-
- <tr>
- <td>ForwardFourierTransform</td>
- <td>magnitude=>{True, False}</td>
- <td>implements the forward discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td>Frame</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, inner=><i>integer</i>, outer=><i>integer</i>, fill=><i><a href="../color/index.html">color name</a></i>, compose=>{Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyAlpha, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor },</td>
- <td>surround the image with an ornamental border</td>
- </tr>
-
- <tr>
- <td>Function</td>
- <td>parameters=><i>array of float values</i>, function=>{Sin}, 'virtual-pixel'=>{Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White}</td>
- <td>apply a function to the image</td>
- </tr>
-
- <tr>
- <td>Gamma</td>
- <td>gamma=><i>string</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>gamma correct the image</td>
- </tr>
-
- <tr>
- <td>GaussianBlur</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td>GetPixel</td>
- <td>geometry=><i>geometry</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, normalize=>{true, false}, x=><i>integer</i>, y=><i>integer</i></td>
- <td>get a single pixel. By default normalized pixel values are returned.</td>
- </tr>
-
- <tr>
- <td>GetPixels</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, map=><i>string</i>, normalize=>{true, false}</td>
- <td>get image pixels as defined by the map (e.g. "RGB", "RGBA", etc.). By default non-normalized pixel values are returned.</td>
- </tr>
-
- <tr>
- <td>Grayscale</td>
- <td>channel=>{Average, Brightness, Lightness, Rec601Luma, Rec601Luminance, Rec709Luma, Rec709Luminance, RMS}</td>
- <td>convert image to grayscale</td>
- </tr>
-
- <tr>
- <td>HaldClut</td>
- <td>image=><i>image-handle</i>, channel=>{Red, RGB, All, etc.}</td>
- <td>apply a Hald color lookup table to an image sequence</td>
- </tr>
-
- <tr>
- <td>HoughLine</td>
- <td>geometry=><i>geometry</i>, width=><i>double</i>, height=><i>double</i>, threshold=><i>double</i></td>
- <td>identify lines in the image (e.g. HoughLine('9x9+195')).</td>
- </tr>
-
- <tr>
- <td>Identify</td>
- <td>file=><i>file</i>, features=><i>distance</i>, moments=>{True, False}, unique=>{True, False}</td>
- <td>identify the attributes of an image</td>
- </tr>
-
- <tr>
- <td>Implode</td>
- <td>amount=><i>double</i>, interpolate=>{undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline}</td>
- <td>implode image pixels about the center</td>
- </tr>
-
- <tr>
- <td>Integral</td>
- <td> </td>
- <td>calculate the sum of values (pixel values) in the image.</td>
- </tr>
-
- <tr>
- <td>InverseDiscreteFourierTransform</td>
- <td>magnitude=>{True, False}</td>
- <td>implements the inverse discrete Fourier transform (DFT)</td>
- </tr>
-
- <tr>
- <td>Kmeans</td>
- <td>geometry=><i>geometry</i>, 'colors'=><i>double</i>, 'iterations'=><i>double</i>, 'tolerance'=><i>double</i></td>
- <td>K means color reduction.</td>
- </tr>
-
- <tr>
- <td>Kuwahara</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>edge preserving noise reduction filter</td>
- </tr>
-
- <tr>
- <td>Label</td>
- <td>string</td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td>Layers</td>
- <td>method=>{coalesce, compare-any, compare-clear, compare-over, composite, dispose, flatten, merge, mosaic, optimize, optimize-image, optimize-plus, optimize-trans, remove-dups, remove-zero}, compose=>{Undefined, Add, Atop, Blend, Bumpmap, Clear, ColorBurn, ColorDodge, Colorize, CopyBlack, CopyBlue, CopyCMYK, Cyan, CopyGreen, Copy, CopyMagenta, CopyAlpha, CopyRed, RGB, CopyYellow, Darken, Dst, Difference, Displace, Dissolve, DstAtop, DstIn, DstOut, DstOver, Dst, Exclusion, HardLight, Hue, In, Lighten, LinearLight, Luminize, Minus, Modulate, Multiply, None, Out, Overlay, Over, Plus, ReplaceCompositeOp, Saturate, Screen, SoftLight, Src, SrcAtop, SrcIn, SrcOut, SrcOver, Src, Subtract, Threshold, Xor }, dither=>{true, false}</td>
- <td>compare each image the GIF disposed forms of the previous image in the sequence. From this, attempt to select the smallest cropped image to replace each frame, while preserving the results of the animation.</td>
- </tr>
-
- <tr>
- <td>Level</td>
- <td>levels=><i>string</i>, 'black-point'=><i>double</i>, 'gamma'=><i>double</i>, 'white-point'=><i>double</i>, channel=>{Red, RGB, All, etc.}</td>
- <td>adjust the level of image contrast</td>
- </tr>
-
- <tr>
- <td>LevelColors</td>
- <td>invert=>>{True, False}, 'black-point'=><i>string</i>, 'white-point'=><i>string</i>, channel=>{Red, RGB, All, etc.}</td>
- <td>level image with the given colors</td>
- </tr>
-
- <tr>
- <td>LinearStretch</td>
- <td>levels=><i>string</i>, 'black-point'=><i>double</i>, 'white-point'=><i>double</i></td>
- <td>linear with saturation stretch</td>
- </tr>
-
- <tr>
- <td>LiquidResize</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, delta-x=><i>double</i>, rigidity=><i>double</i></td>
- <td>rescale image with seam-carving.</td>
- </tr>
-
- <tr>
- <td>Magnify</td>
- <td><br /></td>
- <td>double the size of the image with pixel art scaling</td>
- </tr>
-
- <tr>
- <td>Mask</td>
- <td>mask=><i>image-handle</i></td>
- <td>composite image pixels as defined by the mask</td>
- </tr>
-
- <tr>
- <td>MatteFloodfill</td>
- <td>geometry=><i>geometry</i>, x=><i>integer</i>, y=><i>integer</i> , matte=><i>integer</i>, bordercolor=><i><a href="../color/index.html">color name</a></i>, fuzz=><i>double</i>, invert=>{True, False}</td>
- <td>changes the matte value of any pixel that matches the color of the target pixel and is a neighbor. If you specify a border color, the matte value is changed for any neighbor pixel that is not that color.</td>
- </tr>
-
- <tr>
- <td>MeanShift</td>
- <td>geometry=><i>geometry</i>, width=><i>double</i>, height=><i>double</i>, distance=><i>double</i></td>
- <td>delineate arbitrarily shaped clusters in the image (e.g. MeanShift('7x7+10%')).</td>
- </tr>
-
- <tr>
- <td>MedianFilter</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>replace each pixel with the median intensity pixel of a neighborhood.</td>
- </tr>
-
- <tr>
- <td>Minify</td>
- <td><br /></td>
- <td>half the size of an image</td>
- </tr>
-
- <tr>
- <td>Mode</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>make each pixel the <var>predominant color</var> of the neighborhood.</td>
- </tr>
-
- <tr>
- <td>Modulate</td>
- <td>factor=><i>geometry</i>, brightness=><i>double</i>, saturation=><i>double</i>, hue=><i>double</i>, lightness=><i>double</i>, whiteness=><i>double</i>, blackness=><i>double</i> </td>
- <td>vary the brightness, saturation, and hue of an image by the specified percentage</td>
- </tr>
-
- <tr>
- <td>Morphology</td>
- <td>kernel=><i>string</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, iterations=><i>integer</i></td>
- <td>apply a morphology method to the image.</td>
- </tr>
-
- <tr>
- <td>MotionBlur</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, angle=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma) at the given angle to simulate the effect of motion</td>
- </tr>
-
- <tr>
- <td>Negate</td>
- <td>gray=>{True, False}, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>replace each pixel with its complementary color (white becomes black, yellow becomes blue, etc.)</td>
- </tr>
-
- <tr>
- <td>Normalize</td>
- <td>channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}<br /></td>
- <td>transform image to span the full range of color values</td>
- </tr>
-
- <tr>
- <td>OilPaint</td>
- <td>radius=><i>integer</i></td>
- <td>simulate an oil painting</td>
- </tr>
-
- <tr>
- <td>Opaque</td>
- <td>color=><i><a href="../color/index.html">color name</a></i>,
-fill=><i><a href="../color/index.html">color name</a></i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, invert=>{True, False}</td>
- <td>change this color to the fill color within the image</td>
- </tr>
-
- <tr>
- <td>OrderedDither</td>
- <td>threshold=>{threshold, checks, o2x2, o3x3, o4x4, o8x8, h4x4a, h6x6a, h8x8a, h4x4o, h6x6o, h8x8o, h16x16o, hlines6x4}, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>order dither image</td>
- </tr>
-
- <tr>
- <td>Perceptible</td>
- <td>epsilon=><i>double</i>, channel=>{Red, RGB, All, etc.}</td>
- <td>set each pixel whose value is less than |<var>epsilon</var>| to <var>-epsilon</var> or <var>epsilon</var> (whichever is closer) otherwise the pixel value remains unchanged..</td>
- </tr>
-
- <tr>
- <td>Polaroid</td>
- <td>caption=><i>string</i>, angle=><i>double</i>, pointsize=><i>double</i>, font=><i>string</i>, stroke=> <i><a href="../color/index.html">color name</a></i>, strokewidth=><i>integer</i>, fill=><i><a href="../color/index.html">color name</a></i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}, background=><i><a href="../color/index.html">color name</a></i></td>
- <td>simulate a Polaroid picture.</td>
- </tr>
-
- <tr>
- <td>Posterize</td>
- <td>levels=><i>integer</i>, dither=>{True, False}</td>
- <td>reduce the image to a limited number of color level</td>
- </tr>
-
- <tr>
- <td>Profile</td>
- <td>name=><i>string</i>, profile=><i>blob</i>, rendering-intent=>{Undefined, Saturation, Perceptual, Absolute, Relative}, black-point-compensation=>{True, False}</td>
- <td>add or remove ICC or IPTC image profile; name is formal name (e.g. ICC or filename; set profile to <code>''</code> to remove profile</td>
- </tr>
-
- <tr>
- <td>Quantize</td>
- <td>colors=><i>integer</i>, colorspace=>{RGB, Gray, Transparent, OHTA, XYZ, YCbCr, YIQ, YPbPr, YUV, CMYK, sRGB, HSL, HSB}, treedepth=> <i>integer</i>, dither=>{True, False}, dither-method=>{Riemersma, Floyd-Steinberg}, measure_error=>{True, False}, global_colormap=>{True, False}, transparent-color=><i>color</i></td>
- <td>preferred number of colors in the image</td>
- </tr>
-
- <tr>
- <td>Raise</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, raise=>{True, False}</td>
- <td>lighten or darken image edges to create a 3-D effect</td>
- </tr>
-
- <tr>
- <td>RangeThreshold</td>
- <td>geometry=><i>geometry</i>, 'low-black'=><i>double</i>, 'low-white'=><i>double</i>, 'high-white'=><i>double</i>, 'high-black'=><i>double</i></td>
- <td>combine soft and hard image thresholding.</td>
- </tr>
-
- <tr>
- <td>ReduceNoise</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>reduce noise in the image with a noise peak elimination filter</td>
- </tr>
-
- <tr>
- <td>Remap</td>
- <td>image=><i>image-handle</i>, dither=>{true, false}, dither-method=>{Riemersma, Floyd-Steinberg}</td>
- <td>replace the colors of an image with the closest color from a reference image.</td>
- </tr>
-
- <tr>
- <td>Resample</td>
- <td>density=><i>geometry</i>, x=><i>double</i>, y=><i>double</i>, filter=>{Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc}, support=><i>double</i></td>
- <td>resample image to desired resolution. Specify <code>blur</code> > 1 for blurry or < 1 for sharp</td>
- </tr>
-
- <tr>
- <td>Resize</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, filter=>{Point, Box, Triangle, Hermite, Hanning, Hamming, Blackman, Gaussian, Quadratic, Cubic, Catrom, Mitchell, Lanczos, Bessel, Sinc}, support=><i>double</i>, blur=><i>double</i></td>
- <td>scale image to desired size. Specify <code>blur</code> > 1 for blurry or < 1 for sharp</td>
- </tr>
-
- <tr>
- <td>Roll</td>
- <td>geometry=><i>geometry</i>, x=><i>integer</i>, y=><i>integer</i></td>
- <td>roll an image vertically or horizontally</td>
- </tr>
-
- <tr>
- <td>Rotate</td>
- <td>degrees=><i>double</i>, background=><i><a href="../color/index.html">color name</a></i></td>
- <td>rotate an image</td>
- </tr>
-
- <tr>
- <td>RotationalBlur</td>
- <td>geometry=><i>geometry</i>, angle=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>radial blur the image.</td>
- </tr>
-
- <tr>
- <td>Sample</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
- <td>scale image with pixel sampling.</td>
- </tr>
-
- <tr>
- <td>Scale</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
- <td>scale image to desired size</td>
- </tr>
-
- <tr>
- <td>Segment</td>
- <td>colorspace=>{RGB, Gray, Transparent, OHTA, XYZ, YCbCr, YCC, YIQ, YPbPr, YUV, CMYK}, verbose={True, False}, cluster-threshold=><i>double</i>, smoothing-threshold=<i>double</i></td>
- <td>segment an image by analyzing the histograms of the color components and identifying units that are homogeneous</td>
- </tr>
-
- <tr>
- <td>SelectiveBlur</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, threshold=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>selectively blur pixels within a contrast threshold.</td>
- </tr>
- <tr>
- <td>Separate</td>
- <td>channel=>{Red, RGB, All, etc.}</td>
- <td>separate a channel from the image into a grayscale image</td>
- </tr>
-
- <tr>
- <td>Shade</td>
- <td>geometry=><i>geometry</i>, azimuth=><i>double</i>, elevation=><i>double</i>, gray=>{true, false}</td>
- <td>shade the image using a distant light source</td>
- </tr>
-
- <tr>
- <td>SetPixel</td>
- <td>geometry=><i>geometry</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, color=><i>array of float values</i>, x=><i>integer</i>, y=><i>integer</i>, color=><i>array of float values</i></td>
- <td>set the value a single pixel. Normalized pixel values are expected.</td>
- </tr>
-
- <tr>
- <td>SetPixels</td>
- <td>geometry=><i>geometry</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, color=><i>array of float values</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, color=><i>array of float values</i></td>
- <td>set the value of one or more pixels. Normalized pixel values are expected.</td>
- </tr>
-
- <tr>
- <td>Shadow</td>
- <td>geometry=><i>geometry</i>, opacity=><i>double</i>, sigma=><i>double</i>, x=><i>integer</i>, y=><i>integer</i></td>
- <td>simulate an image shadow</td>
- </tr>
-
- <tr>
- <td>Sharpen</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>sharpen the image with a Gaussian operator of the given radius and standard deviation (sigma).</td>
- </tr>
-
- <tr>
- <td>Shave</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
- <td>shave pixels from the image edges</td>
- </tr>
-
- <tr>
- <td>Shear</td>
- <td>geometry=><i>geometry</i>, x=><i>double</i>, y=><i>double</i> fill=><i><a href="../color/index.html">color name</a></i></td>
- <td>shear the image along the X or Y axis by a positive or negative shear angle</td>
- </tr>
-
- <tr>
- <td>SigmoidalContrast</td>
- <td>geometry=><i>string</i>, 'contrast'=><i>double</i>, 'mid-point'=><i>double</i> channel=>{Red, RGB, All, etc.}, sharpen=>{True, False}</td>
- <td>sigmoidal non-linearity contrast control. Increase the contrast of the image using a sigmoidal transfer function without saturating highlights or shadows. <var>Contrast</var> indicates how much to increase the contrast (0 is none; 3 is typical; 20 is a lot); <var>mid-point</var> indicates where midtones fall in the resultant image (0 is white; 50% is middle-gray; 100% is black). To decrease contrast, set sharpen to False.</td>
- </tr>
-
- <tr>
- <td>Signature</td>
- <td><br /></td>
- <td>generate an SHA-256 message digest for the image pixel stream</td>
- </tr>
-
- <tr>
- <td>Sketch</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, angle=><i>double</i></td>
- <td>sketch the image with a Gaussian operator of the given radius and standard deviation (sigma) at the given angle</td>
- </tr>
-
- <tr>
- <td>Solarize</td>
- <td>geometry=><i>string</i>, threshold=><i>double</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>negate all pixels above the threshold level</td>
- </tr>
-
- <tr>
- <td>SortPixels</td>
- <td><br /></td>
- <td>sorts pixels within each scanline in ascending order of intensity.</td>
- </tr>
-
- <tr>
- <td>SparseColor</td>
- <td>points=><i>array of float values</i>, method=>{Barycentric, Bilinear, Shepards, Voronoi}, 'virtual-pixel'=>{Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White}</td>
- <td>interpolate the image colors around the supplied points</td>
- </tr>
-
- <tr>
- <td>Splice</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, fuzz=><i>double</i>, background=><i><a href="../color/index.html">color name</a></i>, gravity=>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}</td>
- <td>splice an image</td>
- </tr>
-
- <tr>
- <td>Spread</td>
- <td>radius=><i>double</i>, interpolate=>{undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline}</td>
- <td>displace image pixels by a random amount</td>
- </tr>
-
- <tr>
- <td>Statistic</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}, type=>{Contrast, Median, Mode, Mean, Maximum, Minimum, ReduceNoise, RMS}</td>
- <td>replace each pixel with corresponding statistic from the neighborhood.</td>
- </tr>
- <tr>
- <td>Stegano</td>
- <td>image=><i>image-handle</i>, offset=><i>integer</i></td>
- <td>hide a digital watermark within the image</td>
- </tr>
-
- <tr>
- <td>Stereo</td>
- <td>image=><i>image-handle</i>, x=><i>integer</i>, y=><i>integer</i></td>
- <td>composites two images and produces a single image that is the composite of a left and right image of a stereo pair</td>
- </tr>
-
- <tr>
- <td>Strip</td>
- <td><br /></td>
- <td>strip an image of all profiles and comments.</td>
- </tr>
-
- <tr>
- <td>Swirl</td>
- <td>degrees=><i>double</i>, interpolate=>{undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline}</td>
- <td>swirl image pixels about the center</td>
- </tr>
-
- <tr>
- <td>Texture</td>
- <td>texture=><i>image-handle</i></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td>Thumbnail</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
- <td>changes the size of an image to the given dimensions and removes any associated profiles.</td>
- </tr>
-
- <tr>
- <td>Threshold</td>
- <td>threshold=><i>string</i>, channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>threshold the image</td>
- </tr>
-
- <tr>
- <td>Tint</td>
- <td>fill=><i><a href="../color/index.html">color name</a></i>, blend=><i>string</i></td>
- <td>tint the image with the fill color.</td>
- </tr>
-
- <tr>
- <td>Transparent</td>
- <td>color=><i><a href="../color/index.html">color name</a></i>, invert=>{True, False}</td>
- <td>make this color transparent within the image</td>
- </tr>
-
- <tr>
- <td>Transpose</td>
- <td><br /></td>
- <td>flip image in the vertical direction and rotate 90 degrees</td>
- </tr>
-
- <tr>
- <td>Transverse</td>
- <td><br /></td>
- <td>flop image in the horizontal direction and rotate 270 degrees</td>
- </tr>
-
- <tr>
- <td>Trim</td>
- <td><br /></td>
- <td>remove edges that are the background color from the image</td>
- </tr>
-
- <tr>
- <td>UnsharpMask</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, gain=><i>double</i>, threshold=><i>double</i></td>
- <td>sharpen the image with the unsharp mask algorithm.</td>
- </tr>
-
- <tr>
- <td>Vignette</td>
- <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, x=><i>integer</i>, y=><i>integer</i>, background=><i><a href="../color/index.html">color name</a></i></td>
- <td>offset the edges of the image in vignette style</td>
- </tr>
-
- <tr>
- <td>Wave</td>
- <td>geometry=><i>geometry</i>, amplitude=><i>double</i>, wavelength=><i>double</i>, interpolate=>{undefined, average, bicubic, bilinear, mesh, nearest-neighbor, spline}</td>
- <td>alter an image along a sine wave</td>
- </tr>
-
- <tr>
- <td>WaveDenoise</td>
- <td>geometry=><i>geometry</i>, threshold=><i>double</i>, threshold=><i>double</i></td>
- <td>removes noise from the image using a wavelet transform</td>
- </tr>
-
- <tr>
- <td>WhiteBalance</td>
- <td></td>
- <td>applies white balancing to an image according to a grayworld assumption in the LAB colorspace.</td>
- </tr>
-
- <tr>
- <td>WhiteThreshold</td>
- <td>threshold=><i>string</i>, , channel=>{All, Default, Alpha, Black, Blue, CMYK, Cyan, Gray, Green, Index, Magenta, Alpha, Red, RGB, Yellow}</td>
- <td>force all pixels above the threshold intensity into white</td>
- </tr>
-</tbody>
-</table>
-</div>
-
-<p>Note, that the <code>geometry</code> parameter is a short cut for the <code>width</code> and <code>height</code> parameters (e.g. <code>geometry=>'106x80'</code> is equivalent to <code>width=>106, height=>80</code> ).</p>
-
-<p>You can specify <code>@filename</code> in both Annotate() and Draw(). This reads the text or graphic primitive instructions from a file on disk. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>image->Draw(fill=>'red', primitive=>'rectangle',
- points=>'20,20 100,100 40,40 200,200 60,60 300,300');
-</code></pre>
-
-<p>Is equivalent to</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Draw(fill=>'red', primitive=>'@draw.txt');
-</code></pre>
-
-<p>Where <code>draw.txt</code> is a file on disk that contains this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>rectangle 20, 20 100, 100
-rectangle 40, 40 200, 200
-rectangle 60, 60 300, 300
-</code></pre>
-
-<p>The <i>text</i> parameter for methods, Annotate(), Comment(), Draw(), and Label() can include the image filename, type, width, height, or other image attribute by embedding these special format characters:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>%b file size
-%c comment
-%d directory
-%e filename extension
-%f filename
-%g page geometry
-%h height
-%i input filename
-%k number of unique colors
-%l label
-%m magick
-%n number of scenes
-%o output filename
-%p page number
-%q quantum depth
-%r image class and colorspace
-%s scene number
-%t top of filename
-%u unique temporary filename
-%w width
-%x x resolution
-%y y resolution
-%z image depth
-%C image compression type
-%D image dispose method
-%H page height
-%Q image compression quality
-%T image delay
-%W page width
-%X page x offset
-%Y page y offset
-%@ bounding box
-%# signature
-%% a percent sign
-\n newline
-\r carriage return
-</code></pre>
-
-<p>For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>text=>"%m:%f %wx%h"
-</code></pre>
-
-<p>produces an annotation of <b>MIFF:bird.miff 512x480</b> for an image titled <b>bird.miff</b> and whose width is 512 and height is 480.</p>
-
-<p>You can optionally add <i>Image</i> to any method name. For example, TrimImage() is an alias for method Trim().</p>
-
-<p>Most of the attributes listed above have an analog in <a href="../magick/index.html">magick</a>. See the documentation for a more detailed description of these attributes.</p>
-
-<h2><a class="anchor" id="set-attribute"></a>Set an Image Attribute</h2>
-
-<p>Use method Set() to set an image attribute. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Set(dither=>'True');
-$image->[$x]->Set(delay=>3);
-</code></pre>
-
-<p>Where this example uses 'True' and this document says '{True, False}',
-you can use the case-insensitive strings 'True' and 'False', or you
-can use the integers 1 and 0.</p>
-
-<p>When you call Get() on a Boolean attribute, Image::Magick returns 1 or 0, not a string.</p>
-
-<p>And here is a list of all the image attributes you can set:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Image Attributes</caption>
-<thead>
- <tr>
- <th>Attribute</th>
- <th style="width: 40%">Values</th>
- <th style="width: 40%">Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>adjoin</td>
- <td>{True, False}</td>
- <td>join images into a single multi-image file</td>
- </tr>
- <tr>
- <td>alpha</td>
- <td>{On, Off, Opaque, Transparent, Copy, Extract, Set}</td>
- <td>control of and special operations involving the alpha/matte channel</td>
- </tr>
-
- <tr>
- <td>antialias</td>
- <td>{True, False}</td>
- <td>remove pixel aliasing</td>
- </tr>
-
- <tr>
- <td>area-limit</td>
- <td><i>integer</i></td>
- <td>set pixel area resource limit.</td>
- </tr>
-
- <tr>
- <td>attenuate</td>
- <td><i>double</i></td>
- <td>lessen (or intensify) when adding noise to an image.</td>
- </tr>
-
- <tr>
- <td>authenticate</td>
- <td><i>string</i></td>
- <td>decrypt image with this password.</td>
- </tr>
-
- <tr>
- <td>background</td>
- <td><i><a href="../color/index.html">color name</a></i></td>
- <td>image background color</td>
- </tr>
-
- <tr>
- <td>blue-primary</td>
- <td><i>x-value</i>, <i>y-value</i></td>
- <td>chromaticity blue primary point (e.g. 0.15, 0.06)</td>
- </tr>
-
- <tr>
- <td>bordercolor</td>
- <td><i><a href="../color/index.html">color name</a></i></td>
- <td>set the image border color</td>
- </tr>
-
- <tr>
- <td>clip-mask</td>
- <td><i>image</i></td>
- <td>associate a clip mask with the image.</td>
- </tr>
-
- <tr>
- <td>colormap[<i>i</i>]</td>
- <td><i><a href="../color/index.html">color name</a></i></td>
- <td>color name (e.g. red) or hex value (e.g. #ccc) at position
-<i>i</i></td>
- </tr>
-
- <tr>
- <td>comment</td>
- <td><i>string</i></td>
- <td>set the image comment</td>
- </tr>
-
- <tr>
- <td>compression</td>
- <td>{None, BZip, Fax, Group4, JPEG, JPEG2000, LosslessJPEG, LZW, RLE, Zip}</td>
- <td>type of image compression</td>
- </tr>
-
- <tr>
- <td>debug</td>
- <td>{All, Annotate, Blob, Cache, Coder, Configure, Deprecate, Draw, Exception, Locale, None, Resource, Transform, X11}</td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td>delay</td>
- <td><i>integer</i></td>
- <td>this many 1/100ths of a second must expire before displaying the next image in a sequence</td>
- </tr>
-
- <tr>
- <td>density</td>
- <td><i>geometry</i></td>
- <td>vertical and horizontal resolution in pixels of the image</td>
- </tr>
-
- <tr>
- <td>depth</td>
- <td><i>integer</i></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td>direction</td>
- <td><i>{Undefined, right-to-left, left-to-right</i></td>
- <td>render text right-to-left or left-to-right</td>
- </tr>
-
- <tr>
- <td>disk-limit</td>
- <td><i>integer</i></td>
- <td>set disk resource limit</td>
- </tr>
-
- <tr>
- <td>dispose</td>
- <td><i>{Undefined, None, Background, Previous}</i></td>
- <td>layer disposal method</td>
- </tr>
-
- <tr>
- <td>dither</td>
- <td>{True, False}</td>
- <td>apply error diffusion to the image</td>
- </tr>
-
- <tr>
- <td>display</td>
- <td><i>string</i></td>
- <td>specifies the X server to contact</td>
- </tr>
-
- <tr>
- <td>extract</td>
- <td><i>geometry</i></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td>file</td>
- <td><i>filehandle</i></td>
- <td>set the image filehandle</td>
- </tr>
-
- <tr>
- <td>filename</td>
- <td><i>string</i></td>
- <td>set the image filename</td>
- </tr>
-
- <tr>
- <td>fill</td>
- <td><i>color</i></td>
- <td>The fill color paints any areas inside the outline of drawn shape.</td>
- </tr>
-
- <tr>
- <td>font</td>
- <td><i>string</i></td>
- <td>use this font when annotating the image with text</td>
- </tr>
-
- <tr>
- <td>fuzz</td>
- <td><i>integer</i></td>
- <td>colors within this distance are considered equal</td>
- </tr>
-
- <tr>
- <td>gamma</td>
- <td><i>double</i></td>
- <td>gamma level of the image</td>
- </tr>
-
- <tr>
- <td>Gravity</td>
- <td>{Forget, NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}</td>
- <td>type of image gravity</td>
- </tr>
-
- <tr>
- <td>green-primary</td>
- <td><i>x-value</i>, <i>y-value</i></td>
- <td>chromaticity green primary point (e.g. 0.3, 0.6)</td>
- </tr>
-
- <tr>
- <td>index[<i>x</i>, <i>y</i>]</td>
- <td><i>string</i></td>
- <td>colormap index at position (<i>x</i>, <i>y</i>)</td>
- </tr>
-
- <tr>
- <td>interlace</td>
- <td>{None, Line, Plane, Partition, JPEG, GIF, PNG}</td>
- <td>the type of interlacing scheme</td>
- </tr>
-
- <tr>
- <td>iterations</td>
- <td><i>integer</i></td>
- <td>add Netscape loop extension to your GIF animation</td>
- </tr>
-
- <tr>
- <td>label</td>
- <td><i>string</i></td>
- <td>set the image label</td>
- </tr>
-
- <tr>
- <td>loop</td>
- <td><i>integer</i></td>
- <td>add Netscape loop extension to your GIF animation</td>
- </tr>
-
- <tr>
- <td>magick</td>
- <td><i>string</i></td>
- <td>set the image format</td>
- </tr>
-
- <tr>
- <td>map-limit</td>
- <td><i>integer</i></td>
- <td>set map resource limit</td>
- </tr>
-
- <tr>
- <td>mask</td>
- <td><i>image</i></td>
- <td>associate a mask with the image.</td>
- </tr>
-
- <tr>
- <td>matte</td>
- <td>{True, False}</td>
- <td>enable the image matte channel</td>
- </tr>
-
- <tr>
- <td>mattecolor</td>
- <td><i><a href="../color/index.html">color name</a></i></td>
- <td>set the image matte color</td>
- </tr>
-
- <tr>
- <td>memory-limit</td>
- <td><i>integer</i></td>
- <td>set memory resource limit</td>
- </tr>
-
- <tr>
- <td>monochrome</td>
- <td>{True, False}</td>
- <td>transform the image to black and white</td>
- </tr>
-
- <tr>
- <td>option</td>
- <td><i>string</i></td>
- <td>associate an option with an image format (e.g. option=>'ps:imagemask'</td>
- </tr>
-
- <tr>
- <td>orientation</td>
- <td>{TopLeft, TopRight, BottomRight, BottomLeft, LeftTop, RightTop, RightBottom, LeftBottom}</td>
- <td>image orientation</td>
- </tr>
-
- <tr>
- <td>page</td>
- <td>{ Letter, Tabloid, Ledger, Legal, Statement, Executive, A3, A4, A5, B4, B5, Folio, Quarto, 10x14} or <i>geometry</i></td>
- <td>preferred size and location of an image canvas</td>
- </tr>
-
- <tr>
- <td>pixel[<i>x</i>, <i>y</i>]</td>
- <td><i>string</i></td>
- <td>hex value (e.g. #ccc) at position (<i>x</i>, <i>y</i>)</td>
- </tr>
-
- <tr>
- <td>pointsize</td>
- <td><i>integer</i></td>
- <td>pointsize of the Postscript or TrueType font</td>
- </tr>
-
- <tr>
- <td>precision</td>
- <td><i>integer</i></td>
- <td>set the maximum number of significant digits to be printed</td>
- </tr>
-
- <tr>
- <td>quality</td>
- <td><i>integer</i></td>
- <td>JPEG/MIFF/PNG compression level</td>
- </tr>
-
- <tr>
- <td>red-primary</td>
- <td><i>x-value</i>, <i>y-value</i></td>
- <td>chromaticity red primary point (e.g. 0.64, 0.33)</td>
- </tr>
-
- <tr>
- <td>sampling-factor</td>
- <td><i>geometry</i></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td>scene</td>
- <td><i>integer</i></td>
- <td>image scene number</td>
- </tr>
-
- <tr>
- <td>server</td>
- <td><i>string</i></td>
- <td>specifies the X server to contact</td>
- </tr>
-
- <tr>
- <td>size</td>
- <td><i>string</i></td>
- <td>width and height of a raw image</td>
- </tr>
-
- <tr>
- <td>stroke</td>
- <td><i>color</i></td>
- <td>The stroke color paints along the outline of a shape.</td>
- </tr>
-
- <tr>
- <td>texture</td>
- <td><i>string</i></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td>tile-offset</td>
- <td><i>geometry</i></td>
- <td>image tile offset</td>
- </tr>
-
- <tr>
- <td>time-limit</td>
- <td><i>integer</i></td>
- <td>set time resource limit in seconds</td>
- </tr>
-
- <tr>
- <td>title</td>
- <td><i>string</i></td>
- <td>set the image title</td>
- </tr>
-
- <tr>
- <td>type</td>
- <td>{Bilevel, Grayscale, GrayscaleMatte, Palette, PaletteMatte, TrueColor, TrueColorMatte, ColorSeparation, ColorSeparationMatte}</td>
- <td>image type</td>
- </tr>
-
- <tr>
- <td>units</td>
- <td>{ Undefined, PixelsPerInch, PixelsPerCentimeter}</td>
- <td>units of image resolution</td>
- </tr>
-
- <tr>
- <td>verbose</td>
- <td>{True, False}</td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td>virtual-pixel</td>
- <td>{Background Black Constant Dither Edge Gray Mirror Random Tile Transparent White}</td>
- <td>the virtual pixel method</td>
- </tr>
-
- <tr>
- <td>white-point</td>
- <td><i>x-value</i>, <i>y-value</i></td>
- <td>chromaticity white point (e.g. 0.3127, 0.329)</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p>Note, that the <code>geometry</code> parameter is a short cut for the <code>width</code> and <code>height</code> parameters (e.g. <code>geometry=>'106x80'</code> is equivalent to <code>width=>106, height=>80</code>).</p>
-
-<p>SetAttribute() is an alias for method Set().</p>
-
-<p>Most of the attributes listed above have an analog in
-<a href="../magick/index.html">magick</a>. See the documentation for a more detailed description of these attributes.</p>
-
-<h2><a class="anchor" id="get-attribute"></a>Get an Image Attribute</h2>
-
-<p>Use method Get() to get an image attribute. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>($a, $b, $c) = $image->Get('colorspace', 'magick', 'adjoin');
-$width = $image->[3]->Get('columns');
-</code></pre>
-
-<p>In addition to all the attributes listed in <a href="#set-attribute">Set an Image Attribute</a> , you can get these additional attributes:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Image Attributes</caption>
-<thead>
- <tr>
- <th>Attribute</th>
- <th>Values</th>
- <th style="width: 60%">Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>area</td>
- <td><i>integer</i></td>
- <td>current area resource consumed</td>
- </tr>
-
- <tr>
- <td>base-columns</td>
- <td><i>integer</i></td>
- <td>base image width (before transformations)</td>
- </tr>
-
- <tr>
- <td>base-filename</td>
- <td><i>string</i></td>
- <td>base image filename (before transformations)</td>
- </tr>
-
- <tr>
- <td>base-rows</td>
- <td><i>integer</i></td>
- <td>base image height (before transformations)</td>
- </tr>
-
- <tr>
- <td>class</td>
- <td>{Direct, Pseudo}</td>
- <td>image class</td>
- </tr>
-
- <tr>
- <td>colors</td>
- <td><i>integer</i></td>
- <td>number of unique colors in the image</td>
- </tr>
-
- <tr>
- <td>columns</td>
- <td><i>integer</i></td>
- <td>image width</td>
- </tr>
-
- <tr>
- <td>copyright</td>
- <td><i>string</i></td>
- <td>get PerlMagick's copyright</td>
- </tr>
-
- <tr>
- <td>directory</td>
- <td><i>string</i></td>
- <td>tile names from within an image montage</td>
- </tr>
-
- <tr>
- <td>elapsed-time</td>
- <td><i>double</i></td>
- <td>elapsed time in seconds since the image was created</td>
- </tr>
-
- <tr>
- <td>error</td>
- <td><i>double</i></td>
- <td>the mean error per pixel computed with methods Compare() or Quantize()</td>
- </tr>
-
- <tr>
- <td>bounding-box</td>
- <td><i>string</i></td>
- <td>image bounding box</td>
- </tr>
-
- <tr>
- <td>disk</td>
- <td><i>integer</i></td>
- <td>current disk resource consumed</td>
- </tr>
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
- <tr>
- <td>filesize</td>
- <td><i>integer</i></td>
- <td>number of bytes of the image on disk</td>
- </tr>
-
- <tr>
- <td>format</td>
- <td><i>string</i></td>
- <td>get the descriptive image format</td>
- </tr>
-
- <tr>
- <td>geometry</td>
- <td><i>string</i></td>
- <td>image geometry</td>
- </tr>
+ <style>
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
+ }
- <tr>
- <td>height</td>
- <td><i>integer</i></td>
- <td>the number of rows or height of an image</td>
- </tr>
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
+ }
- <tr>
- <td>icc</td>
- <td><i>string</i></td>
- <td>ICC profile</td>
- </tr>
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
+ }
- <tr>
- <td>icc</td>
- <td><i>string</i></td>
- <td>ICM profile</td>
- </tr>
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
- <tr>
- <td>id</td>
- <td><i>integer</i></td>
- <td>ImageMagick registry id</td>
- </tr>
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
+ }
- <tr>
- <td>IPTC</td>
- <td><i>string</i></td>
- <td>IPTC profile</td>
- </tr>
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
+ }
- <tr>
- <td>mean-error</td>
- <td><i>double</i></td>
- <td>the normalized mean error per pixel computed with methods Compare() or Quantize()</td>
- </tr>
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
- <tr>
- <td>map</td>
- <td><i>integer</i></td>
- <td>current memory-mapped resource consumed</td>
- </tr>
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
- <tr>
- <td>matte</td>
- <td>{True, False}</td>
- <td>whether or not the image has a matte channel</td>
- </tr>
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
- <tr>
- <td>maximum-error</td>
- <td><i>double</i></td>
- <td>the normalized max error per pixel computed with methods Compare() or Quantize()</td>
- </tr>
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
- <tr>
- <td>memory</td>
- <td><i>integer</i></td>
- <td>current memory resource consumed</td>
- </tr>
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
- <tr>
- <td>mime</td>
- <td><i>string</i></td>
- <td>MIME of the image format</td>
- </tr>
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
- <tr>
- <td>montage</td>
- <td><i>geometry</i></td>
- <td>tile size and offset within an image montage</td>
- </tr>
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
- <tr>
- <td>page.x</td>
- <td><i>integer</i></td>
- <td>x offset of image virtual canvas</td>
- </tr>
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
- <tr>
- <td>page.y</td>
- <td><i>integer</i></td>
- <td>y offset of image virtual canvas</td>
- </tr>
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
- <tr>
- <td>rows</td>
- <td><i>integer</i></td>
- <td>the number of rows or height of an image</td>
- </tr>
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
- <tr>
- <td>signature</td>
- <td><i>string</i></td>
- <td>SHA-256 message digest associated with the image pixel stream</td>
- </tr>
+ .im-footer a:hover {
+ color: var(--im-primary);
+ }
+ </style>
- <tr>
- <td>taint</td>
- <td>{True, False}</td>
- <td>True if the image has been modified</td>
- </tr>
+ <!-- Open Graph -->
+ <meta property="og:title" content="ImageMagick | PerlMagick, Perl API">
+ <meta property="og:description" content="Use PerlMagick to read, manipulate, or write an image or image sequence from within a Perl script.">
+ <meta property="og:image" content="../image/logo.png">
+ <meta property="og:url" content="index.html">
+ <meta property="og:type" content="website">
- <tr>
- <td>total-ink-density</td>
- <td><i>double</i></td>
- <td>returns the total ink density for a CMYK image</td>
- </tr>
+ <!-- JSON-LD Structured Data -->
+ <script type="application/ld+json">
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/perl-magick/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Use PerlMagick to read, manipulate, or write an image or image sequence from within a Perl script.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
+ </script>
+ <script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
+</head>
- <tr>
- <td>transparent-color</td>
- <td><i><a href="../color/index.html">color name</a></i></td>
- <td>set the image transparent color</td>
- </tr>
+<body>
+ <!-- Theme Init -->
+ <script>
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
+ </script>
- <tr>
- <td>user-time</td>
- <td><i>double</i></td>
- <td>user time in seconds since the image was created</td>
- </tr>
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
+ <span class="navbar-toggler-icon"></span>
+ </button>
- <tr>
- <td>version</td>
- <td><i>string</i></td>
- <td>get PerlMagick's version</td>
- </tr>
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
+ <li class="nav-item">
+ <a class="nav-link " href="../download/index.html">Download</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link active" href="../develop/index.html">API & Develop</a>
+ </li>
+ <li class="nav-item">
+ <a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
+ </li>
+ </ul>
- <tr>
- <td>width</td>
- <td><i>integer</i></td>
- <td>the number of columns or width of an image</td>
- </tr>
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/perl-magick/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
+ </ul>
+ </div>
- <tr>
- <td>XMP</td>
- <td><i>string</i></td>
- <td>XMP profile</td>
- </tr>
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
+ </div>
+ </div>
+ </nav>
- <tr>
- <td>x-resolution</td>
- <td><i>integer</i></td>
- <td>x resolution of the image</td>
- </tr>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">PerlMagick, Perl API</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Use PerlMagick to read, manipulate, or write an image or image sequence from within a Perl script.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
- <tr>
- <td>y-resolution</td>
- <td><i>integer</i></td>
- <td>y resolution of the image</td>
- </tr>
- </tbody>
-</table>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Quick Navigation Bar -->
+<div class="card bg-body-tertiary border-0 shadow-sm mb-5 p-3">
+ <span class="text-uppercase text-secondary fw-bold fs-7 mb-2 d-block">Table of Contents</span>
+ <div class="d-flex flex-wrap gap-2 fs-7">
+ <a href="#installation" class="btn btn-sm btn-outline-secondary">Installation</a>
+ <a href="#overview" class="btn btn-sm btn-outline-secondary">Overview</a>
+ <a href="#example" class="btn btn-sm btn-outline-secondary">Example Script</a>
+ <a href="#read" class="btn btn-sm btn-outline-secondary">Read / Write</a>
+ <a href="#manipulate" class="btn btn-sm btn-outline-secondary">Manipulate</a>
+ <a href="#set-attribute" class="btn btn-sm btn-outline-secondary">Set Attribute</a>
+ <a href="#get-attribute" class="btn btn-sm btn-outline-secondary">Get Attribute</a>
+ <a href="#compare" class="btn btn-sm btn-outline-secondary">Compare</a>
+ <a href="#montage" class="btn btn-sm btn-outline-secondary">Montage</a>
+ <a href="#blobs" class="btn btn-sm btn-outline-secondary">Blobs</a>
+ <a href="#direct-access" class="btn btn-sm btn-outline-secondary">Direct Access</a>
+ <a href="#miscellaneous" class="btn btn-sm btn-outline-secondary">Miscellaneous</a>
+ <a href="#exceptions" class="btn btn-sm btn-outline-secondary">Exceptions</a>
+ <a href="#constants" class="btn btn-sm btn-outline-secondary">Constants</a>
+ </div>
</div>
+<div class="content-body">
+ <section class="mb-5">
+ <a class="anchor" id="introduction"></a>
+ <p class="lead text-body">
+ <a href="../download/index.html" class="fw-semibold">PerlMagick</a> is an object-oriented <a href="https://www.perl.org/" target="_blank" rel="noopener">Perl</a> interface to ImageMagick. Use the module to read, manipulate, or write an image or image sequence from within a Perl script. This makes it very suitable for Web CGI scripts. You must have ImageMagick 6.5.5 or above and Perl version 5.005_02 or greater installed on your system for PerlMagick to build properly.
+ </p>
+ <p>There are a number of useful scripts available to show you the value of PerlMagick. You can do Web based image manipulation and conversion with <a href="https://download.imagemagick.org/archive/perl/">MagickStudio</a>, or use <a href="https://github.com/ImageMagick/ImageMagick/blob/main/PerlMagick/demo/tree.pl" target="_blank" rel="noopener">L-systems</a> to create images of plants using mathematical constructs, and finally navigate through collections of thumbnail images and select the image to view with the <a href="https://webmagick.sourceforge.net/" target="_blank" rel="noopener">WebMagick Image Navigator</a>.</p>
+ <p>You can try PerlMagick from your Web browser at the <a href="https://magickstudio.imagemagick.org/" target="_blank" rel="noopener">ImageMagick Studio</a>. Or, you can see <a href="../examples/index.html">examples</a> of select PerlMagick functions.</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="installation"></a>Installation</h2>
+ <h5 class="fw-semibold text-primary mt-4">UNIX</h5>
+ <p>Is PerlMagick available from your system RPM repository? For example, on our CentOS system, we install PerlMagick thusly:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>yum install ImageMagick-perl</code></pre>
+ <p>If not, you must install PerlMagick from the ImageMagick source distribution. Download the latest
-<p>GetAttribute() is an alias for method Get().</p>
-
-<p>Most of the attributes listed above have an analog in
-<a href="../magick/index.html">magick</a>. See the documentation for a more detailed description of these attributes.</p>
-
-<h2><a class="anchor" id="compare"></a>Compare an Image to its Reconstruction</h2>
-
-<p>Mathematically and visually annotate the difference between an image and its reconstruction with the Compare() method. The method supports these parameters:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Compare Parameters</caption>
-<thead>
- <tr>
- <th>Parameter</th>
- <th>Values</th>
- <th>Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>channel</td>
- <td><i>double</i></td>
- <td>select image channels, the default is all channels except alpha.</td>
- </tr>
-
- <tr>
- <td>fuzz</td>
- <td><i>double</i></td>
- <td>colors within this distance are considered equal</td>
- </tr>
- <tr>
- <td>image</td>
- <td><i>image-reference</i></td>
- <td>the image reconstruction</td>
- </tr>
- <tr>
- <td>metric</td>
- <td>AE, MAE, MEPP, MSE, PAE, PSNR, RMSE</td>
- <td>measure differences between images with this metric</td>
- </tr>
- </tbody>
-</table>
-<p>In this example, we compare the ImageMagick logo to a sharpened reconstruction:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>use Image::Magick;
-
-$logo=Image::Magick->New();
+<a href="https://github.com/ImageMagick/ImageMagick/releases/download/7.1.2-34/ImageMagick-7.1.2-34.7z">source</a>
+ release.</p>
+ <p>Unpack the distribution with this command:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>tar xvzf ImageMagick.tar.gz</code></pre>
+ <p>Next configure and compile ImageMagick:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>cd ImageMagick-7.1.2-34
+./configure -with-perl
+make</code></pre>
+ <p>If ImageMagick / PerlMagick configured and compiled without complaint, you are ready to install it on your system. Administrator privileges are required to install. To install, type</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>sudo make install</code></pre>
+ <p>You may need to configure the dynamic linker run-time bindings:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>sudo ldconfig /usr/local/lib</code></pre>
+ <p>Finally, verify the PerlMagick install worked properly, type</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>perl -MImage::Magick -le 'print Image::Magick->QuantumDepth'</code></pre>
+ <p>Congratulations, you have a working ImageMagick distribution and you are ready to use PerlMagick to <a href="https://usage.imagemagick.org/">convert, compose, or edit</a> your images.</p>
+ <h5 class="fw-semibold text-primary mt-4">Windows XP / Windows 2000</h5>
+ <p>ImageMagick must already be installed on your system. Also, the ImageMagick source distribution for <a href="../download/index.html">Windows 2000</a> is required. You must also have the <code>nmake</code> from the Visual C++ or J++ development environment. Copy <code>\bin\IMagick.dll</code> and <code>\bin\X11.dll</code> to a directory in your dynamic load path such as <code>c:\perl\site\5.00502</code>.</p>
+ <p>Next, type</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>cd PerlMagick
+perl Makefile.nt
+nmake
+nmake install</code></pre>
+ <h5 class="fw-semibold text-primary mt-4">Running the Regression Tests</h5>
+ <p>To verify a correct installation, type</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>make test</code></pre>
+ <p>Use <code>nmake test</code> under Windows. There are a few demonstration scripts available to exercise many of the functions PerlMagick can perform.</p>
+ <p>Use the <code>prove</code> utility to execute a test from the build folder:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>prove --blib blib -I `pwd` -bv ./t/read.t</code></pre>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>cd demo
+make</code></pre>
+ <p>You are now ready to utilize the PerlMagick methods from within your Perl scripts.</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="overview"></a>Overview</h2>
+ <p>Any script that wants to use PerlMagick methods must first define the methods within its namespace and instantiate an image object. Do this with:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>use Image::Magick;
+$image = Image::Magick->new;</code></pre>
+ <p>PerlMagick is <var>quantum</var> aware. You can request a specific quantum depth when you instantiate an image object:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>use Image::Magick::Q16;
+$image = Image::Magick::Q16->new;</code></pre>
+ <p>The new() method takes the same parameters as <a href="#set-attribute">SetAttribute</a>. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image = Image::Magick->new(size=>'384x256');</code></pre>
+ <p>Next you will want to read an image or image sequence, manipulate it, and then display or write it. The input and output methods for PerlMagick are defined in <a href="#read">Read or Write an Image</a>. See <a href="#set-attribute">Set an Image Attribute</a> for methods that affect the way an image is read or written. Refer to <a href="#manipulate">Manipulate an Image</a> for a list of methods to transform an image. <a href="#get-attribute">Get an Image Attribute</a> describes how to retrieve an attribute for an image. Refer to <a href="#montage">Create an Image Montage</a> for details about tiling your images as thumbnails on a background. Finally, some methods do not neatly fit into any of the categories just mentioned. Review <a href="#miscellaneous">Miscellaneous Methods</a> for a list of these methods.</p>
+ <p>Once you are finished with a PerlMagick object you should consider destroying it. Each image in an image sequence is stored in virtual memory. This can potentially add up to mebibytes of memory. Upon destroying a PerlMagick object, the memory is returned for use by other Perl methods. The recommended way to destroy an object is with <code>undef</code>:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>undef $image;</code></pre>
+ <p>To delete all the images but retain the <code>Image::Magick</code> object use</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>@$image = ();</code></pre>
+ <p>and finally, to delete a single image from a multi-image sequence, use</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>undef $image->[$x];</code></pre>
+ <p>The next section illustrates how to use various PerlMagick methods to manipulate an image sequence.</p>
+ <p>Some of the PerlMagick methods require external programs such as <a href="http://www.cs.wisc.edu/~ghost/" target="_blank" rel="noopener">Ghostscript</a>. This may require an explicit path in your PATH environment variable to work properly. For example (in Linux),</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$ENV{PATH} = '/../bin:/usr/bin:/usr/local/bin';</code></pre>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="example"></a>Example Script</h2>
+ <p>Here is an example script to get you started:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>#!/usr/local/bin/perl
+use Image::Magick;
+my($image, $x);
+$image = Image::Magick->new;
+$x = $image->Read('girl.png', 'logo.png', 'rose.png');
+warn "$x" if "$x";
+$x = $image->Crop(geometry=>'100x100+100+100');
+warn "$x" if "$x";
+$x = $image->Write('x.png');
+warn "$x" if "$x";</code></pre>
+ <p>The script reads three images, crops them, and writes a single image as a GIF animation sequence. In many cases you may want to access individual images of a sequence. The next example illustrates how this done:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small overflow-auto" style="max-height:75svh;"><code>#!/usr/local/bin/perl
+use Image::Magick;
+my($image, $p, $q);
+$image = new Image::Magick;
+$image->Read('x1.png');
+$image->Read('j*.jpg');
+$image->Read('k.miff[1, 5, 3]');
+$image->Contrast();
+for ($x = 0; $image->[$x]; $x++)
+{
+ $image->[$x]->Frame('100x200') if $image->[$x]->Get('magick') eq 'GIF';
+ undef $image->[$x] if $image->[$x]->Get('columns') < 100;
+}
+$p = $image->[1];
+$p->Draw(stroke=>'red', primitive=>'rectangle', points=>'20,20 100,100');
+$q = $p->Montage();
+undef $image;
+$q->Write('x.miff');</code></pre>
+ <p>Suppose you want to start out with a 100 by 100 pixel white canvas with a red pixel in the center. Try</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image = Image::Magick->new;
+$image->Set(size=>'100x100');
+$image->ReadImage('canvas:white');
+$image->Set('pixel[49,49]'=>'red');</code></pre>
+ <p>Here we reduce the intensity of the red component at (1,1) by half:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>@pixels = $image->GetPixel(x=>1,y=>1);
+$pixels[0]*=0.5;
+$image->SetPixel(x=>1,y=>1,color=>\@pixels);</code></pre>
+ <p>Or suppose you want to convert your color image to grayscale:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image->Quantize(colorspace=>'gray');</code></pre>
+ <p>Let's annotate an image with a Taipei TrueType font:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$text = 'Works like magick!';
+$image->Annotate(font=>'kai.ttf', pointsize=>40, fill=>'green', text=>$text);</code></pre>
+ <p>Perhaps you want to extract all the pixel intensities from an image and write them to STDOUT:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>@pixels = $image->GetPixels(map=>'I', height=>$height, width=>$width, normalize=>true);
+binmode STDOUT;
+print pack('B*',join('',@pixels));</code></pre>
+ <p>Other clever things you can do with a PerlMagick objects include</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$i = $#$p+1; # return the number of images associated with object p
+push(@$q, @$p); # push the images from object p onto object q
+@$p = (); # delete the images but not the object p
+$p->Convolve([1, 2, 1, 2, 4, 2, 1, 2, 1]); # 3x3 Gaussian kernel</code></pre>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="read"></a>Read or Write an Image</h2>
+ <p>Use the methods listed below to either read, write, or display an image or image sequence:</p>
+ <div class="table-responsive my-3" style="max-height:75svh;">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Read or Write Methods</caption>
+ <thead class="table-dark">
+ <tr>
+ <th style="width: 20%;">Method</th>
+ <th style="width: 20%;">Parameters</th>
+ <th style="width: 20%;">Return Value</th>
+ <th style="width: 40%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>Read</code></td>
+ <td>one or more filenames</td>
+ <td>the number of images read</td>
+ <td>read an image or image sequence</td>
+ </tr>
+ <tr>
+ <td><code>Write</code></td>
+ <td>filename</td>
+ <td>the number of images written</td>
+ <td>write an image or image sequence</td>
+ </tr>
+ <tr>
+ <td><code>Display</code></td>
+ <td>server name</td>
+ <td>the number of images displayed</td>
+ <td>display the image or image sequence to an X server</td>
+ </tr>
+ <tr>
+ <td><code>Animate</code></td>
+ <td>server name</td>
+ <td>the number of images animated</td>
+ <td>animate image sequence to an X server</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>For convenience, methods Write(), Display(), and Animate() can take any parameter that <a href="#set-attribute">SetAttribute</a> knows about. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image->Write(filename=>'image.png', compression=>'None');</code></pre>
+ <p>Use <code>-</code> as the filename to method Read() to read from standard in or to method Write() to write to standard out:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>binmode STDOUT;
+$image->Write('png:-');</code></pre>
+ <p>To read an image in the GIF format from a PERL filehandle, use:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image = Image::Magick->new;
+open(IMAGE, 'image.gif');
+$image->Read(file=>\*IMAGE);
+close(IMAGE);</code></pre>
+ <p>To write an image in the PNG format to a PERL filehandle, use:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$filename = "image.png";
+open(IMAGE, ">$filename");
+$image->Write(file=>\*IMAGE, filename=>$filename);
+close(IMAGE);</code></pre>
+ <p>Note, reading from or writing to a Perl filehandle may fail under Windows due to different versions of the C-runtime libraries between ImageMagick and the ActiveState Perl distributions or if one of the DLL's is linked with the /MT option. See <a href="http://msdn.microsoft.com/en-us/library/ms235460.aspx" target="_blank" rel="noopener">Potential Errors Passing CRT Objects Across DLL Boundaries</a> for an explanation.</p>
+ <p>If <code>%0Nd, %0No, or %0Nx</code> appears in the filename, it is interpreted as a printf format specification and the specification is replaced with the specified decimal, octal, or hexadecimal encoding of the scene number. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>image%03d.miff</code></pre>
+ <p>converts files image000.miff, image001.miff, etc.</p>
+ <p>You can optionally add <i>Image</i> to any method name. For example, ReadImage() is an alias for method Read().</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="manipulate"></a>Manipulate an Image</h2>
+ <p>Once you create an image with, for example, method ReadImage() you may want to operate on it. Below is a list of all the image manipulations methods available to you with PerlMagick. There are <a href="../examples/index.html">examples</a> of select PerlMagick methods. Here is an example call to an image manipulation method:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image->Crop(geometry=>'100x100+10+20');
+$image->[$x]->Frame("100x200");</code></pre>
+ <p>And here is a list of other image manipulation methods you can call:</p>
+ <div class="table-responsive my-3" style="max-height:75svh;">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Image Manipulation Methods</caption>
+ <thead class="table-dark">
+ <tr>
+ <th style="width: 20%;">Method</th>
+ <th style="width: 40%;">Parameters</th>
+ <th style="width: 40%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>AdaptiveBlur</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=><i>channel_list</i></td>
+ <td>adaptively blur the image with a Gaussian operator of the given radius and standard deviation (sigma). Decrease the effect near edges.</td>
+ </tr>
+ <tr>
+ <td><code>AdaptiveResize</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, filter=><i>filter_type</i>, support=><i>double</i>, blur=><i>double</i></td>
+ <td>adaptively resize image using data dependant triangulation. Specify <code>blur</code> > 1 for blurry or < 1 for sharp</td>
+ </tr>
+ <tr>
+ <td><code>AdaptiveSharpen</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=><i>channel_list</i></td>
+ <td>adaptively sharpen the image with a Gaussian operator of the given radius and standard deviation (sigma). Increase the effect near edges.</td>
+ </tr>
+ <tr>
+ <td><code>AdaptiveThreshold</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, bias=><i>double</i></td>
+ <td>local adaptive thresholding.</td>
+ </tr>
+ <tr>
+ <td><code>AddNoise</code></td>
+ <td>noise=><i>{Uniform, Gaussian, Multiplicative, Impulse, Laplacian, Poisson}</i>, attenuate=><i>double</i>, channel=><i>channel_list</i></td>
+ <td>add noise to an image</td>
+ </tr>
+ <tr>
+ <td><code>AffineTransform</code></td>
+ <td>affine=><i>array</i>, translate=><i>float, float</i>, scale=><i>float, float</i>, rotate=><i>float</i>, skewX=><i>float</i>, skewY=><i>float</i>, interpolate=><i>method</i>, background=><i>color</i></td>
+ <td>affine transform image</td>
+ </tr>
+ <tr>
+ <td><code>Affinity</code></td>
+ <td>image=><i>image-handle</i>, method=><i>{None, FloydSteinberg, Riemersma}</i></td>
+ <td>choose a particular set of colors from this image</td>
+ </tr>
+ <tr>
+ <td><code>Annotate</code></td>
+ <td>text=><i>string</i>, font=><i>string</i>, family=><i>string</i>, style=><i>style</i>, weight=><i>integer</i>, pointsize=><i>integer</i>, stroke=><i>color</i>, fill=><i>color</i>, undercolor=><i>color</i>, kerning=><i>float</i>, geometry=><i>geometry</i>, gravity=><i>gravity</i>, antialias=><i>boolean</i>, x=><i>integer</i>, y=><i>integer</i>, align=><i>align</i></td>
+ <td>annotate an image with text. See <a href="#miscellaneous">QueryFontMetrics</a> to get font metrics without rendering any text.</td>
+ </tr>
+ <tr>
+ <td><code>AutoGamma</code></td>
+ <td>channel=><i>channel_list</i></td>
+ <td>automagically adjust gamma level of image</td>
+ </tr>
+ <tr>
+ <td><code>AutoLevel</code></td>
+ <td>channel=><i>channel_list</i></td>
+ <td>automagically adjust color levels of image</td>
+ </tr>
+ <tr>
+ <td><code>AutoOrient</code></td>
+ <td>-</td>
+ <td>adjusts an image so that its orientation is suitable for viewing (i.e. top-left orientation)</td>
+ </tr>
+ <tr>
+ <td><code>AutoThreshold</code></td>
+ <td>method=><i>{Kapur, OTSU, Triangle}</i></td>
+ <td>automatically perform image thresholding</td>
+ </tr>
+ <tr>
+ <td><code>Blur</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, bias=><i>double</i>, channel=><i>channel_list</i></td>
+ <td>reduce image noise and reduce detail levels with a Gaussian operator of the given radius and standard deviation (sigma).</td>
+ </tr>
+ <tr>
+ <td><code>Border</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, bordercolor=><i>color</i>, compose=><i>operator</i></td>
+ <td>surround the image with a border of color</td>
+ </tr>
+ <tr>
+ <td><code>CannyEdge</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, lower-percent=><i>double</i>, upper-percent=><i>double</i></td>
+ <td>use a multi-stage algorithm to detect a wide range of edges in the image.</td>
+ </tr>
+ <tr>
+ <td><code>Charcoal</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i></td>
+ <td>simulate a charcoal drawing</td>
+ </tr>
+ <tr>
+ <td><code>Chop</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, gravity=><i>gravity</i></td>
+ <td>chop an image</td>
+ </tr>
+ <tr>
+ <td><code>CLAHE</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, number-bins=><i>integer</i>, clip-limit=><i>double</i></td>
+ <td>contrast limited adaptive histogram equalization.</td>
+ </tr>
+ <tr>
+ <td><code>Clamp</code></td>
+ <td>channel=><i>channel_list</i></td>
+ <td>set each pixel whose value is below zero to zero and any pixel above quantum range to quantum range.</td>
+ </tr>
+ <tr>
+ <td><code>Clip</code></td>
+ <td>id=><i>name</i>, inside=><i>boolean</i></td>
+ <td>apply along a named path from the 8BIM profile.</td>
+ </tr>
+ <tr>
+ <td><code>ClipMask</code></td>
+ <td>mask=><i>image-handle</i></td>
+ <td>clip image as defined by the image mask</td>
+ </tr>
+ <tr>
+ <td><code>Clut</code></td>
+ <td>image=><i>image-handle</i>, interpolate=><i>method</i>, channel=><i>channel_list</i></td>
+ <td>apply a color lookup table to an image sequence</td>
+ </tr>
+ <tr>
+ <td><code>Color</code></td>
+ <td>color=><i>color</i></td>
+ <td>set the entire image to this color.</td>
+ </tr>
+ <tr>
+ <td><code>Colorize</code></td>
+ <td>fill=><i>color</i>, blend=><i>string</i></td>
+ <td>colorize the image with the fill color</td>
+ </tr>
+ <tr>
+ <td><code>Colorspace</code></td>
+ <td>colorspace=><i>{RGB, Gray, Transparent, OHTA, XYZ, YCbCr, YCC, YIQ, YPbPr, YUV, CMYK}</i></td>
+ <td>set the image colorspace</td>
+ </tr>
+ <tr>
+ <td><code>Comment</code></td>
+ <td>string</td>
+ <td>add a comment to your image</td>
+ </tr>
+ <tr>
+ <td><code>Composite</code></td>
+ <td>image=><i>image-handle</i>, compose=><i>operator</i>, mask=><i>image-handle</i>, geometry=><i>geometry</i>, x=><i>integer</i>, y=><i>integer</i>, gravity=><i>gravity</i></td>
+ <td>composite one image onto another.</td>
+ </tr>
+ <tr>
+ <td><code>Contrast</code></td>
+ <td>sharpen=><i>boolean</i></td>
+ <td>enhance or reduce the image contrast</td>
+ </tr>
+ <tr>
+ <td><code>Convolve</code></td>
+ <td>coefficients=><i>array</i>, channel=><i>channel_list</i>, bias=><i>double</i></td>
+ <td>apply a convolution kernel to the image.</td>
+ </tr>
+ <tr>
+ <td><code>Crop</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i>, fuzz=><i>double</i>, gravity=><i>gravity</i></td>
+ <td>crop an image</td>
+ </tr>
+ <tr>
+ <td><code>Deskew</code></td>
+ <td>geometry=><i>string</i>, threshold=><i>double</i></td>
+ <td>straighten the image</td>
+ </tr>
+ <tr>
+ <td><code>Despeckle</code></td>
+ <td>-</td>
+ <td>reduce the speckles within an image</td>
+ </tr>
+ <tr>
+ <td><code>Distort</code></td>
+ <td>points=><i>array</i>, method=><i>{Affine, Perspective, Barrel, Resize, etc.}</i>, virtual-pixel=><i>method</i></td>
+ <td>distort image</td>
+ </tr>
+ <tr>
+ <td><code>Draw</code></td>
+ <td>primitive=><i>{point, line, rectangle, circle, text, etc.}</i>, points=><i>string</i>, stroke=><i>color</i>, fill=><i>color</i>, font=><i>string</i></td>
+ <td>annotate an image with one or more graphic primitives.</td>
+ </tr>
+ <tr>
+ <td><code>Edge</code></td>
+ <td>radius=><i>double</i></td>
+ <td>enhance edges within the image with a convolution filter.</td>
+ </tr>
+ <tr>
+ <td><code>Emboss</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i></td>
+ <td>emboss the image with a convolution filter.</td>
+ </tr>
+ <tr>
+ <td><code>Equalize</code></td>
+ <td>channel=><i>channel_list</i></td>
+ <td>perform histogram equalization to the image</td>
+ </tr>
+ <tr>
+ <td><code>Extent</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, background=><i>color</i>, gravity=><i>gravity</i></td>
+ <td>set the image size and canvas extent</td>
+ </tr>
+ <tr>
+ <td><code>Flip</code></td>
+ <td>-</td>
+ <td>reflect the image scanlines in the vertical direction</td>
+ </tr>
+ <tr>
+ <td><code>Flop</code></td>
+ <td>-</td>
+ <td>reflect the image scanlines in the horizontal direction</td>
+ </tr>
+ <tr>
+ <td><code>GaussianBlur</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i></td>
+ <td>reduce image noise and detail levels with a Gaussian operator.</td>
+ </tr>
+ <tr>
+ <td><code>Grayscale</code></td>
+ <td>channel=><i>{Average, Brightness, Lightness, Rec601Luma, Rec709Luma, etc.}</i></td>
+ <td>convert image to grayscale</td>
+ </tr>
+ <tr>
+ <td><code>Implode</code></td>
+ <td>amount=><i>double</i></td>
+ <td>implode image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><code>Level</code></td>
+ <td>levels=><i>string</i>, gamma=><i>double</i>, channel=><i>channel_list</i></td>
+ <td>adjust the level of image contrast</td>
+ </tr>
+ <tr>
+ <td><code>LiquidResize</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, delta-x=><i>double</i>, rigidity=><i>double</i></td>
+ <td>rescale image with seam-carving.</td>
+ </tr>
+ <tr>
+ <td><code>Magnify</code></td>
+ <td>-</td>
+ <td>double the size of the image with pixel art scaling</td>
+ </tr>
+ <tr>
+ <td><code>MedianFilter</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
+ <td>replace each pixel with the median intensity pixel of a neighborhood.</td>
+ </tr>
+ <tr>
+ <td><code>Minify</code></td>
+ <td>-</td>
+ <td>half the size of an image</td>
+ </tr>
+ <tr>
+ <td><code>Modulate</code></td>
+ <td>brightness=><i>double</i>, saturation=><i>double</i>, hue=><i>double</i></td>
+ <td>vary the brightness, saturation, and hue of an image by percentage</td>
+ </tr>
+ <tr>
+ <td><code>Negate</code></td>
+ <td>gray=><i>boolean</i>, channel=><i>channel_list</i></td>
+ <td>replace each pixel with its complementary color</td>
+ </tr>
+ <tr>
+ <td><code>Normalize</code></td>
+ <td>channel=><i>channel_list</i></td>
+ <td>transform image to span the full range of color values</td>
+ </tr>
+ <tr>
+ <td><code>OilPaint</code></td>
+ <td>radius=><i>integer</i></td>
+ <td>simulate an oil painting</td>
+ </tr>
+ <tr>
+ <td><code>Polaroid</code></td>
+ <td>caption=><i>string</i>, angle=><i>double</i>, font=><i>string</i></td>
+ <td>simulate a Polaroid picture.</td>
+ </tr>
+ <tr>
+ <td><code>Posterize</code></td>
+ <td>levels=><i>integer</i>, dither=><i>boolean</i></td>
+ <td>reduce the image to a limited number of color levels</td>
+ </tr>
+ <tr>
+ <td><code>Quantize</code></td>
+ <td>colors=><i>integer</i>, colorspace=><i>colorspace</i>, dither=><i>boolean</i></td>
+ <td>preferred number of colors in the image</td>
+ </tr>
+ <tr>
+ <td><code>Resample</code></td>
+ <td>density=><i>geometry</i>, x=><i>double</i>, y=><i>double</i></td>
+ <td>resample image to desired resolution.</td>
+ </tr>
+ <tr>
+ <td><code>Resize</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, filter=><i>filter_type</i></td>
+ <td>scale image to desired size.</td>
+ </tr>
+ <tr>
+ <td><code>Rotate</code></td>
+ <td>degrees=><i>double</i>, background=><i>color</i></td>
+ <td>rotate an image</td>
+ </tr>
+ <tr>
+ <td><code>Sample</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
+ <td>scale image with pixel sampling.</td>
+ </tr>
+ <tr>
+ <td><code>Scale</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
+ <td>scale image to desired size</td>
+ </tr>
+ <tr>
+ <td><code>Sharpen</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i></td>
+ <td>sharpen the image with a Gaussian operator.</td>
+ </tr>
+ <tr>
+ <td><code>Shave</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
+ <td>shave pixels from the image edges</td>
+ </tr>
+ <tr>
+ <td><code>Shear</code></td>
+ <td>geometry=><i>geometry</i>, x=><i>double</i>, y=><i>double</i>, fill=><i>color</i></td>
+ <td>shear the image along the X or Y axis</td>
+ </tr>
+ <tr>
+ <td><code>Solarize</code></td>
+ <td>threshold=><i>double</i></td>
+ <td>negate all pixels above the threshold level</td>
+ </tr>
+ <tr>
+ <td><code>Spread</code></td>
+ <td>radius=><i>double</i></td>
+ <td>displace image pixels by a random amount</td>
+ </tr>
+ <tr>
+ <td><code>Strip</code></td>
+ <td>-</td>
+ <td>strip an image of all profiles and comments.</td>
+ </tr>
+ <tr>
+ <td><code>Swirl</code></td>
+ <td>degrees=><i>double</i></td>
+ <td>swirl image pixels about the center</td>
+ </tr>
+ <tr>
+ <td><code>Thumbnail</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i></td>
+ <td>changes image size and removes any associated profiles.</td>
+ </tr>
+ <tr>
+ <td><code>Threshold</code></td>
+ <td>threshold=><i>string</i>, channel=><i>channel_list</i></td>
+ <td>threshold the image</td>
+ </tr>
+ <tr>
+ <td><code>Tint</code></td>
+ <td>fill=><i>color</i>, blend=><i>string</i></td>
+ <td>tint the image with the fill color.</td>
+ </tr>
+ <tr>
+ <td><code>Transparent</code></td>
+ <td>color=><i>color</i>, invert=><i>boolean</i></td>
+ <td>make this color transparent within the image</td>
+ </tr>
+ <tr>
+ <td><code>Trim</code></td>
+ <td>-</td>
+ <td>remove edges that are the background color from the image</td>
+ </tr>
+ <tr>
+ <td><code>UnsharpMask</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, gain=><i>double</i>, threshold=><i>double</i></td>
+ <td>sharpen the image with the unsharp mask algorithm.</td>
+ </tr>
+ <tr>
+ <td><code>Vignette</code></td>
+ <td>geometry=><i>geometry</i>, radius=><i>double</i>, sigma=><i>double</i>, background=><i>color</i></td>
+ <td>offset the edges of the image in vignette style</td>
+ </tr>
+ <tr>
+ <td><code>Wave</code></td>
+ <td>geometry=><i>geometry</i>, amplitude=><i>double</i>, wavelength=><i>double</i></td>
+ <td>alter an image along a sine wave</td>
+ </tr>
+ <tr>
+ <td><code>WhiteThreshold</code></td>
+ <td>threshold=><i>string</i>, channel=><i>channel_list</i></td>
+ <td>force all pixels above the threshold intensity into white</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>Note that the <code>geometry</code> parameter is a shortcut for the <code>width</code> and <code>height</code> parameters (e.g. <code>geometry=>'106x80'</code> is equivalent to <code>width=>106, height=>80</code>).</p>
+ <p>You can optionally add <i>Image</i> to any method name above. For example, TrimImage() is an alias for method Trim().</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="set-attribute"></a>Set an Image Attribute</h2>
+ <p>Use method Set() to set an image attribute. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image->Set(dither=>'True');
+$image->[$x]->Set(delay=>3);</code></pre>
+ <p>Where this example uses 'True' and this document says '{True, False}', you can use the case-insensitive strings 'True' and 'False', or you can use the integers 1 and 0.</p>
+ <p>When you call Get() on a Boolean attribute, Image::Magick returns 1 or 0, not a string.</p>
+ <p>And here is a list of all the image attributes you can set:</p>
+ <div class="table-responsive my-3" style="max-height:75svh;">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Image Attributes</caption>
+ <thead class="table-dark">
+ <tr>
+ <th style="width: 25%;">Attribute</th>
+ <th style="width: 35%;">Values</th>
+ <th style="width: 40%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>adjoin</code></td>
+ <td>{True, False}</td>
+ <td>join images into a single multi-image file</td>
+ </tr>
+ <tr>
+ <td><code>alpha</code></td>
+ <td>{On, Off, Opaque, Transparent, Copy, Extract, Set}</td>
+ <td>control of and special operations involving the alpha/matte channel</td>
+ </tr>
+ <tr>
+ <td><code>antialias</code></td>
+ <td>{True, False}</td>
+ <td>remove pixel aliasing</td>
+ </tr>
+ <tr>
+ <td><code>background</code></td>
+ <td><i>color name</i></td>
+ <td>image background color</td>
+ </tr>
+ <tr>
+ <td><code>bordercolor</code></td>
+ <td><i>color name</i></td>
+ <td>set the image border color</td>
+ </tr>
+ <tr>
+ <td><code>comment</code></td>
+ <td><i>string</i></td>
+ <td>set the image comment</td>
+ </tr>
+ <tr>
+ <td><code>compression</code></td>
+ <td>{None, BZip, Fax, JPEG, JPEG2000, LZW, Zip}</td>
+ <td>type of image compression</td>
+ </tr>
+ <tr>
+ <td><code>delay</code></td>
+ <td><i>integer</i></td>
+ <td>this many 1/100ths of a second must expire before displaying next image</td>
+ </tr>
+ <tr>
+ <td><code>density</code></td>
+ <td><i>geometry</i></td>
+ <td>vertical and horizontal resolution in pixels of the image</td>
+ </tr>
+ <tr>
+ <td><code>depth</code></td>
+ <td><i>integer</i></td>
+ <td>image depth</td>
+ </tr>
+ <tr>
+ <td><code>dither</code></td>
+ <td>{True, False}</td>
+ <td>apply error diffusion to the image</td>
+ </tr>
+ <tr>
+ <td><code>filename</code></td>
+ <td><i>string</i></td>
+ <td>set the image filename</td>
+ </tr>
+ <tr>
+ <td><code>fill</code></td>
+ <td><i>color</i></td>
+ <td>paint any areas inside the outline of drawn shape</td>
+ </tr>
+ <tr>
+ <td><code>font</code></td>
+ <td><i>string</i></td>
+ <td>use this font when annotating the image with text</td>
+ </tr>
+ <tr>
+ <td><code>fuzz</code></td>
+ <td><i>integer</i></td>
+ <td>colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td><code>gamma</code></td>
+ <td><i>double</i></td>
+ <td>gamma level of the image</td>
+ </tr>
+ <tr>
+ <td><code>gravity</code></td>
+ <td>{NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast}</td>
+ <td>type of image gravity</td>
+ </tr>
+ <tr>
+ <td><code>interlace</code></td>
+ <td>{None, Line, Plane, Partition, JPEG, GIF, PNG}</td>
+ <td>the type of interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><code>loop</code> / <code>iterations</code></td>
+ <td><i>integer</i></td>
+ <td>add Netscape loop extension to your GIF animation</td>
+ </tr>
+ <tr>
+ <td><code>magick</code></td>
+ <td><i>string</i></td>
+ <td>set the image format</td>
+ </tr>
+ <tr>
+ <td><code>matte</code></td>
+ <td>{True, False}</td>
+ <td>enable the image matte channel</td>
+ </tr>
+ <tr>
+ <td><code>pointsize</code></td>
+ <td><i>integer</i></td>
+ <td>pointsize of the Postscript or TrueType font</td>
+ </tr>
+ <tr>
+ <td><code>quality</code></td>
+ <td><i>integer</i></td>
+ <td>JPEG/MIFF/PNG compression level</td>
+ </tr>
+ <tr>
+ <td><code>scene</code></td>
+ <td><i>integer</i></td>
+ <td>image scene number</td>
+ </tr>
+ <tr>
+ <td><code>size</code></td>
+ <td><i>string</i></td>
+ <td>width and height of a raw image</td>
+ </tr>
+ <tr>
+ <td><code>stroke</code></td>
+ <td><i>color</i></td>
+ <td>paint along the outline of a shape</td>
+ </tr>
+ <tr>
+ <td><code>type</code></td>
+ <td>{Bilevel, Grayscale, Palette, TrueColor, ColorSeparation}</td>
+ <td>image type</td>
+ </tr>
+ <tr>
+ <td><code>verbose</code></td>
+ <td>{True, False}</td>
+ <td>print detailed information about the image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>SetAttribute() is an alias for method Set().</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="get-attribute"></a>Get an Image Attribute</h2>
+ <p>Use method Get() to get an image attribute. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>($a, $b, $c) = $image->Get('colorspace', 'magick', 'adjoin');
+$width = $image->[3]->Get('columns');</code></pre>
+ <p>In addition to all the attributes listed in <a href="#set-attribute">Set an Image Attribute</a>, you can get these additional attributes:</p>
+ <div class="table-responsive my-3" style="max-height:75svh;">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Image Attributes (Read-Only/Get)</caption>
+ <thead class="table-dark">
+ <tr>
+ <th style="width: 25%;">Attribute</th>
+ <th style="width: 25%;">Values</th>
+ <th style="width: 50%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>base-columns</code></td>
+ <td><i>integer</i></td>
+ <td>base image width (before transformations)</td>
+ </tr>
+ <tr>
+ <td><code>base-rows</code></td>
+ <td><i>integer</i></td>
+ <td>base image height (before transformations)</td>
+ </tr>
+ <tr>
+ <td><code>class</code></td>
+ <td>{Direct, Pseudo}</td>
+ <td>image class</td>
+ </tr>
+ <tr>
+ <td><code>colors</code></td>
+ <td><i>integer</i></td>
+ <td>number of unique colors in the image</td>
+ </tr>
+ <tr>
+ <td><code>columns</code></td>
+ <td><i>integer</i></td>
+ <td>image width</td>
+ </tr>
+ <tr>
+ <td><code>copyright</code></td>
+ <td><i>string</i></td>
+ <td>get PerlMagick's copyright</td>
+ </tr>
+ <tr>
+ <td><code>elapsed-time</code></td>
+ <td><i>double</i></td>
+ <td>elapsed time in seconds since the image was created</td>
+ </tr>
+ <tr>
+ <td><code>error</code></td>
+ <td><i>double</i></td>
+ <td>the mean error per pixel computed with methods Compare() or Quantize()</td>
+ </tr>
+ <tr>
+ <td><code>filesize</code></td>
+ <td><i>integer</i></td>
+ <td>number of bytes of the image on disk</td>
+ </tr>
+ <tr>
+ <td><code>format</code></td>
+ <td><i>string</i></td>
+ <td>get the descriptive image format</td>
+ </tr>
+ <tr>
+ <td><code>height</code></td>
+ <td><i>integer</i></td>
+ <td>the number of rows or height of an image</td>
+ </tr>
+ <tr>
+ <td><code>signature</code></td>
+ <td><i>string</i></td>
+ <td>SHA-256 message digest associated with the image pixel stream</td>
+ </tr>
+ <tr>
+ <td><code>taint</code></td>
+ <td>{True, False}</td>
+ <td>True if the image has been modified</td>
+ </tr>
+ <tr>
+ <td><code>version</code></td>
+ <td><i>string</i></td>
+ <td>get PerlMagick's version</td>
+ </tr>
+ <tr>
+ <td><code>width</code></td>
+ <td><i>integer</i></td>
+ <td>the number of columns or width of an image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>GetAttribute() is an alias for method Get().</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="compare"></a>Compare an Image to its Reconstruction</h2>
+ <p>Mathematically and visually annotate the difference between an image and its reconstruction with the Compare() method. The method supports these parameters:</p>
+ <div class="table-responsive my-3">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Compare Parameters</caption>
+ <thead class="table-dark">
+ <tr>
+ <th>Parameter</th>
+ <th>Values</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>channel</code></td>
+ <td><i>double</i></td>
+ <td>select image channels, the default is all channels except alpha.</td>
+ </tr>
+ <tr>
+ <td><code>fuzz</code></td>
+ <td><i>double</i></td>
+ <td>colors within this distance are considered equal</td>
+ </tr>
+ <tr>
+ <td><code>image</code></td>
+ <td><i>image-reference</i></td>
+ <td>the image reconstruction</td>
+ </tr>
+ <tr>
+ <td><code>metric</code></td>
+ <td>AE, MAE, MEPP, MSE, PAE, PSNR, RMSE</td>
+ <td>measure differences between images with this metric</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>In this example, we compare the ImageMagick logo to a sharpened reconstruction:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>use Image::Magick;
+$logo = Image::Magick->New();
$logo->Read('logo:');
-$sharp=Image::Magick->New();
+$sharp = Image::Magick->New();
$sharp->Read('logo:');
$sharp->Sharpen('0x1');
-$difference=$logo->Compare(image=>$sharp, metric=>'rmse');
+$difference = $logo->Compare(image=>$sharp, metric=>'rmse');
print $difference->Get('error'), "\n";
-$difference->Display();
-</code></pre>
-
-<p>In addition to the reported root mean squared error of around 0.024, a difference image is displayed so you can visually identify the difference between the images.</p>
-
-<h2><a class="anchor" id="montage"></a>Create an Image Montage</h2>
-
-<p>Use method Montage() to create a composite image by combining several separate images. The images are tiled on the composite image with the name of the image optionally appearing just below the individual tile. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Montage(geometry=>'160x160', tile=>'2x2', texture=>'granite:');
-</code></pre>
-
-<p>And here is a list of Montage() parameters you can set:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Montage Parameters</caption>
-<thead>
- <tr>
- <th>Parameter</th>
- <th>Values</th>
- <th>Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>background</td>
- <td><i><a href="../color/index.html">color name</a></i></td>
- <td>background color name</td>
- </tr>
-
- <tr>
- <td>border</td>
- <td><i>integer</i></td>
- <td>image border width</td>
- </tr>
-
- <tr>
- <td>filename</td>
- <td><i>string</i></td>
- <td>name of montage image</td>
- </tr>
-
- <tr>
- <td>fill</td>
- <td><a href="../color/index.html">color name</a></td>
- <td>fill color for annotations</td>
- </tr>
-
- <tr>
- <td>font</td>
- <td><i>string</i></td>
- <td>X11 font name</td>
- </tr>
-
- <tr>
- <td>frame</td>
- <td><i>geometry</i></td>
- <td>surround the image with an ornamental border</td>
- </tr>
-
- <tr>
- <td>geometry</td>
- <td><i>geometry</i></td>
- <td>preferred tile and border size of each tile of the composite
-image (e.g. 120x120+4+3>)</td>
- </tr>
-
- <tr>
- <td>gravity</td>
- <td>NorthWest, North, NorthEast, West, Center, East, SouthWest,
-South, SouthEast</td>
- <td>direction image gravitates to within a tile</td>
- </tr>
-
- <tr>
- <td>label</td>
- <td><i>string</i></td>
- <td>assign a label to an image</td>
- </tr>
-
- <tr>
- <td>mode</td>
- <td>Frame, Unframe, Concatenate</td>
- <td>thumbnail framing options</td>
- </tr>
-
- <tr>
- <td>pointsize</td>
- <td><i>integer</i></td>
- <td>pointsize of the Postscript or TrueType font</td>
- </tr>
-
- <tr>
- <td>shadow</td>
- <td>{True, False}</td>
- <td>add a shadow beneath a tile to simulate depth</td>
- </tr>
-
- <tr>
- <td>stroke</td>
- <td><a href="../color/index.html">color name</a></td>
- <td>stroke color for annotations</td>
- </tr>
-
- <tr>
- <td>texture</td>
- <td><i>string</i></td>
- <td>name of texture to tile onto the image background</td>
- </tr>
-
- <tr>
- <td>tile</td>
- <td><i>geometry</i></td>
- <td>the number of tiles per row and page (e.g. 6x4)</td>
- </tr>
-
- <tr>
- <td>title</td>
- <td>string</td>
- <td>assign a title to the image montage</td>
- </tr>
-
- <tr>
- <td>transparent</td>
- <td><i>string</i></td>
- <td>make this color transparent within the image</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p>Note, that the <code>geometry</code> parameter is a short cut for the <code>width</code> and <code>height</code> parameters (e.g. <code>geometry=>'106x80'</code> is equivalent to <code>width=>106, height=>80</code>).</p>
-
-<p>MontageImage() is an alias for method Montage().</p>
-
-<p>Most of the attributes listed above have an analog in <a href="../montage/index.html">montage</a>. See the documentation for a more detailed description of these attributes.</p>
-
-<h2><a class="anchor" id="blobs"></a>Working with Blobs</h2>
-
-<p>A blob contains data that directly represent a particular image
-format in memory instead of on disk. PerlMagick supports
-blobs in any of these image <a href="../formats/index.html">formats</a> and provides methods to convert a blob to or from a particular image format.</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Blob Methods</caption>
-<thead>
- <tr>
- <th>Method</th>
- <th>Parameters</th>
- <th>Return Value</th>
- <th>Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>ImageToBlob</td>
- <td>any image <a href="#set-attribute">attribute</a></td>
- <td>an array of image data in the respective image format</td>
- <td>convert an image or image sequence to an array of blobs</td>
- </tr>
-
- <tr>
- <td>BlobToImage</td>
- <td>one or more blobs</td>
- <td>the number of blobs converted to an image</td>
- <td>convert one or more blobs to an image</td>
- </tr>
- </tbody>
-</table>
-</div>
-
-<p>ImageToBlob() returns the image data in their respective formats. You can then print it, save it to an ODBC database, write it to a file, or pipe it to a display program:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@blobs = $image->ImageToBlob();
-open(DISPLAY,"| display -") || die;
+$difference->Display();</code></pre>
+ <p>In addition to the reported root mean squared error of around 0.024, a difference image is displayed so you can visually identify the difference between the images.</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="montage"></a>Create an Image Montage</h2>
+ <p>Use method Montage() to create a composite image by combining several separate images. The images are tiled on the composite image with the name of the image optionally appearing just below the individual tile. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image->Montage(geometry=>'160x160', tile=>'2x2', texture=>'granite:');</code></pre>
+ <p>And here is a list of Montage() parameters you can set:</p>
+ <div class="table-responsive my-3" style="max-height:75svh;">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Montage Parameters</caption>
+ <thead class="table-dark">
+ <tr>
+ <th style="width: 25%;">Parameter</th>
+ <th style="width: 35%;">Values</th>
+ <th style="width: 40%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>background</code></td>
+ <td><i>color name</i></td>
+ <td>background color name</td>
+ </tr>
+ <tr>
+ <td><code>border</code></td>
+ <td><i>integer</i></td>
+ <td>image border width</td>
+ </tr>
+ <tr>
+ <td><code>filename</code></td>
+ <td><i>string</i></td>
+ <td>name of montage image</td>
+ </tr>
+ <tr>
+ <td><code>fill</code></td>
+ <td><i>color name</i></td>
+ <td>fill color for annotations</td>
+ </tr>
+ <tr>
+ <td><code>font</code></td>
+ <td><i>string</i></td>
+ <td>X11 font name</td>
+ </tr>
+ <tr>
+ <td><code>frame</code></td>
+ <td><i>geometry</i></td>
+ <td>surround the image with an ornamental border</td>
+ </tr>
+ <tr>
+ <td><code>geometry</code></td>
+ <td><i>geometry</i></td>
+ <td>preferred tile and border size of each tile</td>
+ </tr>
+ <tr>
+ <td><code>gravity</code></td>
+ <td>NorthWest, North, NorthEast, West, Center, East, SouthWest, South, SouthEast</td>
+ <td>direction image gravitates to within a tile</td>
+ </tr>
+ <tr>
+ <td><code>label</code></td>
+ <td><i>string</i></td>
+ <td>assign a label to an image</td>
+ </tr>
+ <tr>
+ <td><code>mode</code></td>
+ <td>Frame, Unframe, Concatenate</td>
+ <td>thumbnail framing options</td>
+ </tr>
+ <tr>
+ <td><code>shadow</code></td>
+ <td>{True, False}</td>
+ <td>add a shadow beneath a tile to simulate depth</td>
+ </tr>
+ <tr>
+ <td><code>tile</code></td>
+ <td><i>geometry</i></td>
+ <td>the number of tiles per row and page (e.g. 6x4)</td>
+ </tr>
+ <tr>
+ <td><code>title</code></td>
+ <td>string</td>
+ <td>assign a title to the image montage</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>MontageImage() is an alias for method Montage().</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="blobs"></a>Working with Blobs</h2>
+ <p>A blob contains data that directly represent a particular image format in memory instead of on disk. PerlMagick supports blobs in any of these image formats and provides methods to convert a blob to or from a particular image format.</p>
+ <div class="table-responsive my-3">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Blob Methods</caption>
+ <thead class="table-dark">
+ <tr>
+ <th>Method</th>
+ <th>Parameters</th>
+ <th>Return Value</th>
+ <th>Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>ImageToBlob</code></td>
+ <td>any image attribute</td>
+ <td>an array of image data</td>
+ <td>convert an image or image sequence to an array of blobs</td>
+ </tr>
+ <tr>
+ <td><code>BlobToImage</code></td>
+ <td>one or more blobs</td>
+ <td>the number of blobs converted</td>
+ <td>convert one or more blobs to an image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ <p>ImageToBlob() returns the image data in their respective formats. You can then print it, save it to an ODBC database, write it to a file, or pipe it to a display program:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>@blobs = $image->ImageToBlob();
+open(DISPLAY, "| display -") || die;
binmode DISPLAY;
print DISPLAY $blobs[0];
-close DISPLAY;
-</code></pre>
-
-<p>Method BlobToImage() returns an image or image sequence converted from the supplied blob:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@blob=$db->GetImage();
-$image=Image::Magick->new(magick=>'jpg');
-$image->BlobToImage(@blob);
-</code></pre>
-
-<h2><a class="anchor" id="direct-access"></a>Direct-access to Image Pixels</h2>
-
-<p>Use these methods to obtain direct access to the image pixels:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped caption-top">
-<caption>Direct-access to Image Pixels</caption>
-<thead>
- <tr>
- <th>Method</th>
- <th>Parameters</th>
- <th style="width: 50%">Description</th>
- </tr>
-</thead>
-
-<tbody>
- <tr>
- <td>GetAuthenticPixels</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i></td>
- <td>return authentic pixels as a C pointer</td>
- </tr>
-
- <tr>
- <td>GetVirtualPixels</td>
- <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i></td>
- <td>return virtual pixels as a const C pointer</td>
- </tr>
-
- <tr>
- <td>GetAuthenticIndexQueue</td>
- <td></td>
- <td>return colormap indexes or black pixels as a C pointer</td>
- </tr>
-
- <tr>
- <td>GetVirtualIndexQueue</td>
- <td></td>
- <td>return colormap indexes or black pixels as a const C pointer</td>
- </tr>
-
- <tr>
- <td>SyncAuthenticPixels</td>
- <td></td>
- <td>sync authentic pixels to pixel cache</td>
- </tr>
-
-</tbody>
-</table>
-</div>
-
-<h2><a class="anchor" id="miscellaneous"></a>Miscellaneous Methods</h2>
-
-<p>The Append() method append a set of images. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->Append(stack=>{true,false});
-</code></pre>
-
-<p>appends all the images associated with object <code>$image</code>. By default, images are stacked left-to-right. Set <code>stack</code> to True to stack them top-to-bottom.</p>
-
-<p>The Clone() method copies a set of images. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$q = $p->Clone();
-</code></pre>
-
-<p>copies all the images from object <code>$p</code> to <code>$q</code>. You can use this method for single or multi-image sequences.</p>
-
-<p>Coalesce() composites a set of images while respecting any page
-offsets and disposal methods. GIF, MIFF, and MNG animation sequences
-typically start with an image background and each subsequent image
-varies in size and offset. A new image sequence is returned with all
-images the same size as the first images virtual canvas and composited
-with the next image in the sequence.. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$q = $p->Coalesce();
-</code></pre>
-
-<p>The ComplexImages() method performs complex mathematics on an image sequence. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->ComplexImages('conjugate');
-</code></pre>
-
-<p>The EvaluateImages() method applies an arithmetic, logical or relational expression to a set of images. For example,</p>
-
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->EvaluateImages('mean');
-</code></pre>
-
-<p>averages all the images associated with object <code>$image</code>.</p>
-
-<p>The Features() method returns features for each channel in the image in each of four directions (horizontal, vertical, left and right diagonals) for the specified distance. The features include the angular second momentum, contrast, correlation, sum of squares: variance, inverse difference moment, sum average, sum variance, sum entropy, entropy, difference variance, difference entropy, information measures of correlation 1, information measures of correlation 2, and maximum correlation coefficient. Values in RGB, CMYK, RGBA, or CMYKA order (depending on the image type).</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@features = $image->Features(1);
-</code></pre>
-
-<p>The Flatten() method flattens a set of images and returns it. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $images->Flatten(background=>'none');
-$p->Write('flatten.png');
-</code></pre>
-
-<p>The sequence of images is replaced by a single image created by composing each image after the first over the first image.</p>
-
-<p>The Fx() method applies a mathematical expression to a set of images and returns the results. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->Fx(expression=>'(g+b)/2.0',channel=>'red');
-$p->Write('fx.miff');
-</code></pre>
-
-<p>replaces the red channel with the average of the green and blue channels.</p>
-
-<p>See <a href="../fx/index.html">FX, The Special Effects Image Operator</a> for a detailed discussion of this method.</p>
-
-<p>Histogram() returns the unique colors in the image and a count for each one. The returned values are an array of red, green, blue, opacity, and count values.</p>
-
-<p>The Morph() method morphs a set of images. Both the image pixels and size are linearly interpolated to give the appearance of a meta-morphosis from one image to the next:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->Morph(frames=><i>integer</i>);
-</code></pre>
-
-<p>where <i>frames</i> is the number of in-between images to generate. The default is 1.</p>
-
-<p>Mosaic() creates an mosaic from an image sequence.</p>
-
-<p>Method Mogrify() is a single entry point for the image manipulation methods (<a href="#manipulate">Manipulate an Image</a>). The parameters are the name of a method followed by any parameters the method may require. For example, these calls are equivalent:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->Crop('340x256+0+0');
-$image->Mogrify('crop', '340x256+0+0');
-</code></pre>
-
-<p>Method MogrifyRegion() applies a transform to a region of the image. It is similar to Mogrify() but begins with the region geometry. For example, suppose you want to brighten a 100x100 region of your image at location (40, 50):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->MogrifyRegion('100x100+40+50', 'modulate', brightness=>50);
-</code></pre>
-
-<p>PerceptualHash() maps visually identical images to the same or similar hash-- useful in image retrieval, authentication, indexing, or copy detection as well as digital watermarking. For each channel and for the sRGB and the HCLp colorspaces, 7 hash values are returned For an sRGB images, for example, expect 42 perceptual hashes.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@phash = $image->PerceptualHash();</code></pre>
-
-<p>Ping() is a convenience method that returns information about an image without having to read the image into memory. It returns the width, height, file size in bytes, and the file format of the image. You can specify more than one filename but only one filehandle:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>($width, $height, $size, $format) = $image->Ping('logo.png');
-($width, $height, $size, $format) = $image->Ping(file=>\*IMAGE);
-($width, $height, $size, $format) = $image->Ping(blob=>$blob);
-</code></pre>
-
-<p>This a more efficient and less memory intensive way to query if an image exists and what its characteristics are.</p>
-
-<p>Poly() builds a polynomial from the image sequence and the corresponding terms (coefficients and degree pairs):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->Poly([0.5,1.0,0.25,2.0,1.0,1.0]);
-</code></pre>
-
-<p>PreviewImage() tiles 9 thumbnails of the specified image with an image processing operation applied at varying strengths. This may be helpful pin-pointing an appropriate parameter for a particular image processing operation. Choose from these operations: <code>Rotate, Shear, Roll, Hue, Saturation, Brightness, Gamma, Spiff, Dull, Grayscale, Quantize, Despeckle, ReduceNoise, AddNoise, Sharpen, Blur, Threshold, EdgeDetect, Spread, Solarize, Shade, Raise, Segment, Swirl, Implode, Wave, OilPaint, CharcoalDrawing, JPEG</code>. Here is an example:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$preview = $image->Preview('Gamma');
-$preview->Display();
-</code></pre>
-
-<p>To have full control over text positioning you need font metric information. Use</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>($x_ppem, $y_ppem, $ascender, $descender, $width, $height, $max_advance) =
- $image->QueryFontMetrics(<i>parameters</i>);
-</code></pre>
-
-<p>Where <i>parameters</i> is any parameter of the <a href="#manipulate">Annotate</a> method. The return values are:</p>
-
-<ol>
- <li>character width</li>
- <li>character height</li>
- <li>ascender</li>
- <li>descender</li>
- <li>text width</li>
- <li>text height</li>
- <li>maximum horizontal advance</li>
- <li>bounds: x1</li>
- <li>bounds: y1</li>
- <li>bounds: x2</li>
- <li>bounds: y2</li>
- <li>origin: x</li>
- <li>origin: y</li>
-</ol>
-
-<p>Use QueryMultilineFontMetrics() to get the maximum text width and height for multiple lines of text.</p>
-
-<p>Call QueryColor() with no parameters to return a list of known colors names or specify one or more color names to get these attributes: red, green, blue, and opacity value.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@colors = $image->QueryColor();
-($red, $green, $blue) = $image->QueryColor('cyan');
-($red, $green, $blue, $alpha) = $image->QueryColor('#716baeff');
-</code></pre>
-
-<p>QueryColorname() accepts a color value and returns its respective name or hex value;</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$name = $image->QueryColorname('rgba(80,60,0,0)');
-</code></pre>
-
-<p>Call QueryFont() with no parameters to return a list of known fonts or specify one or more font names to get these attributes: font name, description, family, style, stretch, weight, encoding, foundry, format, metrics, and glyphs values.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@fonts = $image->QueryFont();
-$weight = ($image->QueryFont('Helvetica'))[5];
-</code></pre>
-
-<p>Call QueryFormat() with no parameters to return a list of known image formats or specify one or more format names to get these attributes: adjoin, blob support, raw, decoder, encoder, description, and module.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@formats = $image->QueryFormat();
-($adjoin, $blob_support, $raw, $decoder, $encoder, $description, $module) =
- $image->QueryFormat('gif');
-</code></pre>
-
-<p>Call MagickToMime() with the image format name to get its MIME type such as <code>image/tiff</code> from <code>tif</code>.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$mime = $image->MagickToMime('tif');
-</code></pre>
-
-<p>Use RemoteCommand() to send a command to an already running <a href="../display/index.html">display</a> or <a href="../animate/index.html">animate</a> application. The only parameter is the name of the image file to display or animate.</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$image->RemoteCommand('image.jpg');
-</code></pre>
-
-<p>The Smush() method smushes a set of images together. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->Smush(stack=>{true,false},offset=><var>integer</var>);
-</code></pre>
-
-<p>smushes together all the images associated with object <code>$image</code>. By default, images are smushed left-to-right. Set <code>stack</code> to True to smushed them top-to-bottom.</p>
-
-<p>Statistics() returns the image statistics for each channel in the image. The returned values are an array of depth, minima, maxima, mean, standard deviation, kurtosis, skewness, and entropy values in RGB, CMYK, RGBA, or CMYKA order (depending on the image type).</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>@statistics = $image->Statistics();
-</code></pre>
-
-<p>Finally, the Transform() method accepts a fully-qualified geometry specification for cropping or resizing one or more images. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$p = $image->Transform(crop=>'100x100+0+0');
-</code></pre>
-
-<p>You can optionally add <i>Image</i> to any method name above. For example, PingImage() is an alias for method Ping().</p>
-
-<h2><a class="anchor" id="exceptions"></a>Handling Exceptions</h2>
-
-<p>All PerlMagick methods return an undefined string context upon success. If any problems occur, the error is returned as a string with an embedded numeric status code. A status code less than 400 is a warning. This means that the operation did not complete but was recoverable to some degree. A numeric code greater or equal to 400 is an error and indicates the operation failed completely. Here is how exceptions are returned for the different methods:</p>
-
-<p>Methods which return a number (e.g. Read(), Write()):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$x = $image->Read(...);
-warn "$x" if "$x"; # print the error message
-$x =~ /(\d+)/;
-print $1; # print the error number
-print 0+$x; # print the number of images read
-</code></pre>
-
-<p>Methods which operate on an image (e.g. Resize(), Crop()):</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$x = $image->Crop(...);
+close DISPLAY;</code></pre>
+ <p>Method BlobToImage() returns an image or image sequence converted from the supplied blob:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>@blob = $db->GetImage();
+$image = Image::Magick->new(magick=>'jpg');
+$image->BlobToImage(@blob);</code></pre>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="direct-access"></a>Direct-access to Image Pixels</h2>
+ <p>Use these methods to obtain direct access to the image pixels:</p>
+ <div class="table-responsive my-3">
+ <table class="table table-sm table-hover table-striped caption-top align-middle">
+ <caption>Direct-access to Image Pixels</caption>
+ <thead class="table-dark">
+ <tr>
+ <th style="width: 30%;">Method</th>
+ <th style="width: 30%;">Parameters</th>
+ <th style="width: 40%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td><code>GetAuthenticPixels</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i></td>
+ <td>return authentic pixels as a C pointer</td>
+ </tr>
+ <tr>
+ <td><code>GetVirtualPixels</code></td>
+ <td>geometry=><i>geometry</i>, width=><i>integer</i>, height=><i>integer</i>, x=><i>integer</i>, y=><i>integer</i></td>
+ <td>return virtual pixels as a const C pointer</td>
+ </tr>
+ <tr>
+ <td><code>GetAuthenticIndexQueue</code></td>
+ <td>-</td>
+ <td>return colormap indexes or black pixels as a C pointer</td>
+ </tr>
+ <tr>
+ <td><code>SyncAuthenticPixels</code></td>
+ <td>-</td>
+ <td>sync authentic pixels to pixel cache</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="miscellaneous"></a>Miscellaneous Methods</h2>
+ <p>The Append() method appends a set of images. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$p = $image->Append(stack=>{true,false});</code></pre>
+ <p>appends all the images associated with object <code>$image</code>. By default, images are stacked left-to-right. Set <code>stack</code> to True to stack them top-to-bottom.</p>
+ <p>The Clone() method copies a set of images. For example,</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$q = $p->Clone();</code></pre>
+ <p>copies all the images from object <code>$p</code> to <code>$q</code>.</p>
+ <p>Coalesce() composites a set of images while respecting any page offsets and disposal methods.</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$q = $p->Coalesce();</code></pre>
+ <p>Method Mogrify() is a single entry point for the image manipulation methods. For example, these calls are equivalent:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$image->Crop('340x256+0+0');
+$image->Mogrify('crop', '340x256+0+0');</code></pre>
+ <p>Ping() is a convenience method that returns information about an image without having to read the image into memory:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>($width, $height, $size, $format) = $image->Ping('logo.png');</code></pre>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="exceptions"></a>Handling Exceptions</h2>
+ <p>All PerlMagick methods return an undefined string context upon success. If any problems occur, the error is returned as a string with an embedded numeric status code. A status code less than 400 is a warning. A numeric code greater or equal to 400 is an error and indicates the operation failed completely.</p>
+
+ <p>Methods which return a number (e.g. Read(), Write()):</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>$x = $image->Read(...);
warn "$x" if "$x"; # print the error message
$x =~ /(\d+)/;
print $1; # print the error number
-</code></pre>
-
-<p>Methods which return images (EvaluateSequence(), Montage(), Clone()) should be checked for errors this way:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$x = $image->Montage(...);
-warn "$x" if !ref($x); # print the error message
-$x =~ /(\d+)/;
-print $1; # print the error number
-</code></pre>
-
-<p>Here is an example error message:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Error 400: Memory allocation failed
-</code></pre>
-
-<p>Review the complete list of <a href="https://imagemagick.org/exception/">error and warning codes</a>.</p>
-
-<p>The following illustrates how you can use a numeric status code:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$x = $image->Read('rose.png');
-$x =~ /(\d+)/;
-die "unable to continue" if ($1 == ResourceLimitError);
-</code></pre>
-
-<h2><a class="anchor" id="constants"></a>Constants</h2>
-
-<p>PerlMagick includes these constants:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>BlobError
+print 0+$x; # print the number of images read</code></pre>
+ <p>Review the complete list of <a href="https://imagemagick.org/exception/">error and warning codes</a>.</p>
+ </section>
+ <section class="mb-5">
+ <h2 class="fw-bold border-bottom pb-2 mb-3"><a class="anchor" id="constants"></a>Constants</h2>
+ <p>PerlMagick includes these constants:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small overflow-auto" style="max-height:50svh;"><code>BlobError
BlobWarning
CacheError
CacheWarning
@@ -2791,77 +1466,107 @@ TypeError
TypeWarning
WarningException
XServerError
-XServerWarning
-</code></pre>
-
-<p>You can access them like this:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Image::Magick->QuantumDepth
-</code></pre>
-
+XServerWarning</code></pre>
+ <p>You can access them like this:</p>
+ <pre class="p-3 rounded bg-body-tertiary border font-mono small"><code>Image::Magick->QuantumDepth</code></pre>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/porting/index.html b/www/porting/index.html
index 3a7ecbb50..8d91a6a13 100644
--- a/www/porting/index.html
+++ b/www/porting/index.html
@@ -8,256 +8,407 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Porting to ImageMagick Version 7</title>
- <meta name="description" content="">
+ <meta name="description" content="Learn how ImageMagick version 7 differs from previous versions, including enhanced multi-channel pixel support, default HDRI, major command-line interface updates, and migration guides for MagickCore and MagickWand APIs.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Porting to ImageMagick Version 7">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Learn how ImageMagick version 7 differs from previous versions, including enhanced multi-channel pixel support, default HDRI, major command-line interface updates, and migration guides for MagickCore and MagickWand APIs.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Porting to ImageMagick Version 7">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Porting to ImageMagick Version 7",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/porting/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how ImageMagick version 7 differs from previous versions, including enhanced multi-channel pixel support, default HDRI, major command-line interface updates, and migration guides for MagickCore and MagickWand APIs.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/porting/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/porting/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Porting to ImageMagick Version 7</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#imv7">ImageMagick Version 7</a> • <a href="#hdri">High Dynamic Range Imaging</a> • <a href="#channels">Pixel Channels</a> • <a href="#alpha">Alpha</a> • <a href="#grayscale">Grayscale</a> • <a href="#mask">Masks</a> • <a href="#core">MagickCore API</a> • <a href="#headers">Header Files</a> • <a href="#deprecate">Deprecated Features Removed</a> • <a href="#cli">Command-line Interface</a> • <a href="#performance">Performance Improvements</a> • <a href="#summary">Version 7 Change Summary</a> </p>
-
-<p class="lead">The design of ImageMagick is an evolutionary process, with the design and implementation efforts serving to influence and guide further progress in the other. With ImageMagick version 7, we improved the design based on lessons learned from the version 6 implementation. ImageMagick was originally designed to display RGB images to an X Windows server. Over time we extended support to RGBA images and then to the CMYK and CMYKA image format. With ImageMagick version 7, we extend support to arbitrary colorspaces with an arbitrary number of pixel channels. In addition, ImageMagick 7 stores pixel channels as floats permitting out of band values (e.g. negative) and reduces rounding error. There are numerous other design enhancements described within.</p>
-
-<p>To support variable pixel channels in the MagickCore API, pixel handling has changed when getting or setting the pixel channels. You can access channels as an array, <var>pixel[i]</var>, or use an accessor method such as GetPixelRed() or SetPixelRed(). There are some modest changes to the MagickCore and MagickWand API's. The Magick++ and PerlMagick API's have not changed and matches that of the ImageMagick version 6.</p>
-
-<p>The shell API (command line) of ImageMagick version 7 has undergone
-a major overhaul, with specific emphasis on the ability to read 'options' not
-only from the command line, but also from scripts, and file streams. This
-allows for the use of 'co-processing' programming techniques or performing
-image handling using 'daemon/server backends', and even multi-machine
-distributed processing.</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Porting to ImageMagick Version 7</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how ImageMagick version 7 differs from previous versions, including enhanced multi-channel pixel support, default HDRI, major command-line interface updates, and migration guides for MagickCore and MagickWand APIs.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<p>With the shell API overhaul other improvements were made, including:
-better reporting of which option failed, the consolidation and deprecation of
-options, and more global use of 'image properties' (more commonly known as
-'percent escapes' in option arguments. </p>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Page Quick Nav Pills -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap justify-content-center gap-2 p-2 bg-body-tertiary rounded-3 border">
+ <a href="#imv7" class="btn btn-sm btn-outline-secondary border-0">Version 7</a>
+ <a href="#hdri" class="btn btn-sm btn-outline-secondary border-0">HDRI</a>
+ <a href="#channels" class="btn btn-sm btn-outline-secondary border-0">Channels</a>
+ <a href="#alpha" class="btn btn-sm btn-outline-secondary border-0">Alpha</a>
+ <a href="#grayscale" class="btn btn-sm btn-outline-secondary border-0">Grayscale</a>
+ <a href="#mask" class="btn btn-sm btn-outline-secondary border-0">Masks</a>
+ <a href="#core" class="btn btn-sm btn-outline-secondary border-0">MagickCore API</a>
+ <a href="#headers" class="btn btn-sm btn-outline-secondary border-0">Headers</a>
+ <a href="#deprecate" class="btn btn-sm btn-outline-secondary border-0">Deprecations</a>
+ <a href="#cli" class="btn btn-sm btn-outline-secondary border-0">CLI</a>
+ <a href="#performance" class="btn btn-sm btn-outline-secondary border-0">Performance</a>
+ <a href="#summary" class="btn btn-sm btn-outline-secondary border-0">Summary</a>
+ </div>
+ </div>
+ </div>
-<p>ImageMagick version 7 is available now as a <a href="https://download.imagemagick.org/archive/">production</a> release.</p>
+ <!-- Lead Description Section -->
+ <div class="row mb-5" id="imv7">
+ <div class="col-lg-10 mx-auto text-center">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-10 text-primary border border-primary border-opacity-25 mb-3 fs-7">
+ <i class="bi bi-arrow-up-right-circle-fill"></i>
+ <span class="small fw-semibold">Migration Guide</span>
+ </div>
+ <h1 class="display-5 fw-bold mb-3">Porting to ImageMagick Version 7</h1>
+ <p class="lead text-body-secondary">
+ The design of ImageMagick is an evolutionary process, with the design and implementation efforts serving to influence and guide further progress in the other. With ImageMagick version 7, we improved the design based on lessons learned from the version 6 implementation. ImageMagick was originally designed to display RGB images to an X Windows server. Over time we extended support to RGBA images and then to the CMYK and CMYKA image format. With ImageMagick version 7, we extend support to arbitrary colorspaces with an arbitrary number of pixel channels. In addition, ImageMagick 7 stores pixel channels as floats permitting out of band values (e.g. negative) and reduces rounding error. There are numerous other design enhancements described within.
+ </p>
+ </div>
+ </div>
-<p>Now that ImageMagick version 7 is released, we continue to support version 6 for a minimum of 10 years. Support for version 6 is limited primarily to bug fixes and security patches with few enhancements.</p>
+ <!-- General Overview Cards -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-code-slash me-2"></i>API Changes</h5>
+ <p class="small text-body-secondary mb-0">
+ To support variable pixel channels in the MagickCore API, pixel handling has changed when getting or setting channels. You can access channels as an array, <code>pixel[i]</code>, or use accessor methods. Magick++ and PerlMagick APIs remain unchanged from version 6.
+ </p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-terminal me-2"></i>Shell API Overhaul</h5>
+ <p class="small text-body-secondary mb-0">
+ The command-line interface has undergone a major overhaul, emphasizing options reading from scripts, file streams, co-processing, daemon/server backends, and multi-machine distributed processing.
+ </p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-shield-check me-2"></i>Releases & Support</h5>
+ <p class="small text-body-secondary mb-0">
+ ImageMagick version 7 is available now as a <a href="https://download.imagemagick.org/archive/" target="_blank" rel="noopener" class="text-decoration-none fw-semibold">production</a> release. Version 6 continues to be supported for a minimum of 10 years for bug fixes and security patches.
+ </p>
+ </div>
+ </div>
+ </div>
-<h2><a class="anchor" id="hdri"></a>High Dynamic Range Imaging</h2>
-<p>ImageMagick version 7 enables <a href="../high-dynamic-range/index.html">high dynamic range imaging</a> (HDRI) by default. HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows. In addition, image processing results are more accurate. The disadvantage is it requires more memory and may result in slower processing times. If you see differences in the results of your version 6 command-line with version 7, it is likely due to HDRI. You may need to add <code>-clamp</code> to your command-line to constrain pixels to the 0 .. QuantumRange range, or disable HDRI when you build ImageMagick version 7. To disable HDRI (recommended for smart phone builds such as iOS or production sites where performance is a premium), simply add <code>--disable-hdri</code> to the configure script command line when building ImageMagick.</p>
+ <!-- High Dynamic Range Imaging -->
+ <section class="mb-5" id="hdri">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-brightness-high fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">High Dynamic Range Imaging</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-0">
+ ImageMagick version 7 enables <a href="../high-dynamic-range/index.html" class="text-decoration-none fw-semibold">high dynamic range imaging</a> (HDRI) by default. HDRI accurately represents the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows. In addition, image processing results are more accurate. The disadvantage is it requires more memory and may result in slower processing times. If you see differences in the results of your version 6 command-line with version 7, it is likely due to HDRI. You may need to add <code>-clamp</code> to your command-line to constrain pixels to the 0 .. QuantumRange range, or disable HDRI when you build ImageMagick version 7. To disable HDRI (recommended for smart phone builds such as iOS or production sites where performance is a premium), simply add <code>--disable-hdri</code> to the configure script command line when building ImageMagick.
+ </p>
+ </div>
+ </section>
-<h2><a class="anchor" id="channels"></a>Pixel Channels</h2>
-<p>A pixel is comprised of one or more color values, or <var>channels</var> (e.g. red pixel channel).</p>
-<p>Prior versions of ImageMagick (4-6), support 4 to 5 pixel channels (RGBA or CMYKA). The first 4 channels are accessed with the PixelPacket data structure. The structure includes 4 members of type Quantum (typically 16-bits) of red, green, blue, and opacity. The black channel or colormap indexes are supported by a separate method and structure, IndexPacket. As an example, here is a code snippet from ImageMagick version 6 that negates the color components (but not the alpha component) of the image pixels:</p>
+ <!-- Pixel Channels -->
+ <section class="mb-5" id="channels">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-grid-3x3 fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Pixel Channels</h2>
+ </div>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>for (y=0; y < (ssize_t) image->rows; y++)
+ <p class="text-body-secondary mb-3">
+ A pixel is comprised of one or more color values, or <var>channels</var> (e.g. red pixel channel).
+ </p>
+ <p class="text-body-secondary mb-4">
+ Prior versions of ImageMagick (4-6), support 4 to 5 pixel channels (RGBA or CMYKA). The first 4 channels are accessed with the PixelPacket data structure. The structure includes 4 members of type Quantum (typically 16-bits) of red, green, blue, and opacity. The black channel or colormap indexes are supported by a separate method and structure, IndexPacket. As an example, here is a code snippet from ImageMagick version 6 that negates the color components (but not the alpha component) of the image pixels:
+ </p>
+
+ <!-- Code Snippet 1 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">im6-pixel-loop.c</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-auto" style="max-height: 75svh;">
+ <pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>for (y=0; y < (ssize_t) image->rows; y++)
{
IndexPacket
- *indexes;
-
+ *indexes;<br>
PixelPacket
- *q;
-
+ *q;<br>
q=GetCacheViewAuthenticPixels(image_view,0,y,image->columns,1,exception);
if (q == (PixelPacket *) NULL)
{
@@ -281,14 +432,26 @@ options, and more global use of 'image properties' (more commonly known as
if (SyncCacheViewAuthenticPixels(image_view,exception) == MagickFalse)
status=MagickFalse;
}</code></pre>
+ </div>
+ </div>
-<p>ImageMagick version 7 supports any number of channels from 1 to 64 (and beyond) and simplifies access with a single method that returns an array of pixel channels of type Quantum. Source code that compiles against prior versions of ImageMagick requires refactoring to work with ImageMagick version 7. We illustrate with an example. Let's naively refactor the version 6 code snippet from above so it works with the ImageMagick version 7 API:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>for (y=0; y < (ssize_t) image->rows; y++)
+ <p class="text-body-secondary mb-4">
+ ImageMagick version 7 supports any number of channels from 1 to 64 (and beyond) and simplifies access with a single method that returns an array of pixel channels of type Quantum. Source code that compiles against prior versions of ImageMagick requires refactoring to work with ImageMagick version 7. We illustrate with an example. Let's naively refactor the version 6 code snippet from above so it works with the ImageMagick version 7 API:
+ </p>
+
+ <!-- Code Snippet 2 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">im7-naive-loop.c</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-auto" style="max-height: 75svh;">
+ <pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>for (y=0; y < (ssize_t) image->rows; y++)
{
Quantum
- *q;
-
+ *q;<br>
q=GetCacheViewAuthenticPixels(image_view,0,y,image->columns,1,exception);
if (q == (Quantum *) NULL)
{
@@ -312,14 +475,24 @@ options, and more global use of 'image properties' (more commonly known as
if (SyncCacheViewAuthenticPixels(image_view,exception) == MagickFalse)
status=MagickFalse;
}</code></pre>
+ </div>
+ </div>
-<p>Let's do that again but take full advantage of the new variable pixel channel support:</p>
+ <p class="text-body-secondary mb-4">Let's do that again but take full advantage of the new variable pixel channel support:</p>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>for (y=0; y < (ssize_t) image->rows; y++)
+ <!-- Code Snippet 3 -->
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">im7-optimized-loop.c</span>
+ </div>
+ <div class="p-3 text-light font-mono small overflow-auto" style="max-height: 75svh;">
+ <pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code>for (y=0; y < (ssize_t) image->rows; y++)<br>
{
Quantum
- *q;
-
+ *q;<br>
q=GetCacheViewAuthenticPixels(image_view,0,y,image->columns,1,exception);
if (q == (Quantum *) NULL)
{
@@ -329,8 +502,7 @@ options, and more global use of 'image properties' (more commonly known as
for (x = 0; x < (ssize_t) image->columns; x++)
{
ssize_t
- i;
-
+ i;<br>
if (GetPixelWriteMask(image,q) <= (QuantumRange/2))
{
q+=GetPixelChannels(image);
@@ -349,520 +521,441 @@ options, and more global use of 'image properties' (more commonly known as
if (SyncCacheViewAuthenticPixels(image_view,exception) == MagickFalse)
status=MagickFalse;
}</code></pre>
+ </div>
+ </div>
-<p>Note, how we use GetPixelChannels() to advance to the next set of pixel channels.</p>
-
-<p>The colormap indexes and black pixel channel (for the CMYK colorspace) are no longer stored in the index channel, previously accessed with GetAuthenticIndexQueue() and GetCacheViewAuthenticIndexQueue(). Instead they are now a first class pixel channel and accessed as a member of the pixel array (e.g. <code>pixel[4]</code>) or with the convenience pixel accessor methods GetPixelIndex(), SetPixelIndex(), GetPixelBlack(), and SetPixelBlack().</p>
-
-<p>As a consequence of using an array structure for variable pixel channels, auto-vectorization compilers have additional opportunities to speed up pixel loops.</p>
-<p>The `sync` channel in IMv6 was really a flag instead of a channel. In IMv7, we instead use a flag: <code>-define compose:sync=false</code>.</p>
-
-<h4>Pixel Accessors</h4>
-<p>You can access pixel channel as array elements (e.g. <code>pixel[1]</code>) or use convenience accessors to get or set pixel channels:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>GetPixela() SetPixela()
-GetPixelAlpha() SetPixelAlpha()
-GetPixelb() SetPixelb()
-GetPixelBlack() SetPixelBlack()
-GetPixelBlue() SetPixelBlue()
-GetPixelCb() SetPixelCb()
-GetPixelCr() SetPixelCr()
-GetPixelCyan() SetPixelCyan()
-GetPixelGray() SetPixelGray()
-GetPixelGreen() SetPixelGreen()
-GetPixelIndex() SetPixelIndex()
-GetPixelL() SetPixelL()
-GetPixelMagenta() SetPixelMagenta()
-GetPixelReadMask() SetPixelReadMask()
-GetPixelWriteMask() SetPixelWriteMask()
-GetPixelMetacontentExtent() SetPixelMetacontentExtent()
-GetPixelOpacity() SetPixelOpacity()
-GetPixelRed() SetPixelRed()
-GetPixelYellow() SetPixelYellow()
-GetPixelY() SetPixelY()</code></pre>
-
-<p>You can find these accessors defined in the header file, <code>MagickCore/pixel-accessor.h</code></p>
-
-<h4>Pixel Traits</h4>
-<p>Each pixel channel includes one or more of these traits:</p>
-<dl class="row">
-<dt class="col-md-4">Undefined</dt>
-<dd class="col-md-8">no traits associated with this pixel channel</dd>
-<dt class="col-md-4">Copy</dt>
-<dd class="col-md-8">do not update this pixel channel, just copy it</dd>
-<dt class="col-md-4">Update</dt>
-<dd class="col-md-8">update this pixel channel</dd>
-<dt class="col-md-4">Blend</dt>
-<dd class="col-md-8">blend this pixel channel with the alpha mask if it's enabled</dd>
-</dl>
-<p>We provide these methods to set and get pixel traits:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>GetPixelAlphaTraits() SetPixelAlphaTraits()
-GetPixelBlackTraits() SetPixelBlackTraits()
-GetPixelBlueTraits() SetPixelBlueTraits()
-GetPixelCbTraits() SetPixelCbTraits()
-GetPixelChannelTraits() SetPixelChannelTraits()
-GetPixelCrTraits() SetPixelCrTraits()
-GetPixelGrayTraits() SetPixelGrayTraits()
-GetPixelGreenTraits() SetPixelGreenTraits()
-GetPixelIndexTraits() SetPixelIndexTraits()
-GetPixelMagentaTraits() SetPixelMagentaTraits()
-GetPixelRedTraits() SetPixelRedTraits()
-GetPixelYellowTraits() SetPixelYellowTraits()
-GetPixelYTraits() SetPixelYTraits()</code></pre>
-<p>For convenience you can set the active trait for a set of pixel channels with a channel mask and this method:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>SetImageChannelMask()
-</code></pre>
-
-<p>Previously MagickCore methods had channel analogs, for example, NegateImage() and NegateImageChannels(). The channel analog methods are no longer necessary because the pixel channel traits specify whether to act on a particular pixel channel or whether to blend with the alpha mask. For example, instead of</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>NegateImageChannel(image,channel);</code></pre>
-<p>we use:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>channel_mask=SetImageChannelMask(image,channel);
-NegateImage(image,exception);
-(void) SetImageChannelMask(image,channel_mask);</code></pre>
-
-<h4>Pixel User Channels</h4>
-<p>In version 7, we introduce pixel user channels. Traditionally we utilize 4 channels, red, green, blue, and alpha. For CMYK we also have a black channel. User channels are designed to contain whatever additional channel information that makes sense for your application. Some examples include extra channels in TIFF or PSD images or perhaps you require a channel with infrared information for the pixel. You can associate traits with the user channels so that when they are acted upon by an image processing algorithm (e.g. blur) the pixels are copied, acted upon by the algorithm, or even blended with the alpha channel if that makes sense.</p>
-<h4>Pixel Metacontent</h4>
-<p>In version 7, we introduce pixel metacontent. Metacontent is content about content. So rather than being the content itself, it's something that describes or is associated with the content. Here the content is a pixel. The pixel metacontent is for your exclusive use (internally the data is just copied, it is not modified) and is accessed with these MagickCore API methods:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>SetImageMetacontentExtent()
-GetImageMetacontentExtent()
-GetVirtualMetacontent()
-GetAuthenticMetacontent()
-GetCacheViewAuthenticMetacontent()
-GetCacheViewVirtualMetacontent()</code></pre>
-
-<h2><a class="anchor" id="alpha"></a>Alpha</h2>
-<p>We support alpha now, previously opacity. With alpha, a value of <code>0</code> means that the pixel does not have any coverage information and is transparent; i.e. there was no color contribution from any geometry because the geometry did not overlap this pixel. A value of <code>QuantumRange</code> means that the pixel is opaque because the geometry completely overlapped the pixel. As a consequence, in version 7, the PixelInfo structure member alpha has replaced the previous opacity member. Another consequence is the alpha part of an sRGB value in hexadecimal notation is now reversed (e.g. #0000 is fully transparent).</p>
-<h2><a class="anchor" id="colorspace"></a>Colorspace</h2>
-<p>The <code>Rec601Luma</code> and <code>Rec709Luma</code> colorspaces are no longer supported. Instead, specify the <code>gray</code> colorspace and choose from these intensity options:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Rec601Luma
-Rec601Luminance
-Rec709Luma
-Rec709Luminance</code></pre>
-<p>For example,</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick myImage.png -intensity Rec709Luminance -colorspace gray myImage.jpg</samp></pre></pre>
-
-<h2><a class="anchor" id="grayscale"></a>Grayscale</h2>
-<p>Previously, grayscale images were Rec601Luminance and consumed 4 channels: red, green, blue, and alpha. With version 7, grayscale consumes only 1 channel requiring far less resources as a result.</p>
-
-<h2><a class="anchor" id="mask"></a>Masks</h2>
-<p>Version 7 supports masks for most image operators. White pixels in a read mask ignores corresponding pixel in an image whereas white pixels in a write mask protects the corresponding pixel in the image. From the command-line, you can associate a mask with an image with the <code>-read-mask</code> and <code>-write-mask</code> options. This polarity matches the masks in version 6 of ImageMagick for ease of porting your workflow. For convenience, we continue to support the <code>-mask</code> option in version 7 to match the behavior of version 6.</p>
-<p>In this example, we compute the distortion of a masked reconstructed image:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ compare -metric rmse -read-mask hat_mask.png hat.png wizard.png difference.png</samp></pre>
-<p>Here we protect certain pixels from change:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick rose: -write-mask rose_bg_mask.png -modulate 110,100,33.3 +write-mask rose_blue.png</samp></pre></pre>
-
-<p>A mask associated with an image persists until it is modified or removed. This may produce unexpected results for complex command-lines. Here we only want to clip when applying the alpha option, not the resize:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick -density 300 -colorspace srgb image.eps -alpha transparent -clip -alpha opaque +clip -resize 1000x1000 -strip image.png</samp></pre>
-
-<h2><a class="anchor" id="core"></a>MagickCore API</h2>
-<p>Here are a list of changes to the MagickCore API:</p>
-<ul>
-<li>Almost all image processing algorithms are now channel aware.</li>
-<li>The MagickCore API adds an <code>ExceptionInfo</code> argument to those methods that lacked it in version 6, e.g. <code>NegateImage(image,MagickTrue,exception)</code></li>
-<li>All method channel analogs have been removed (e.g. BlurImageChannel()), they are no longer necessary, use pixel traits instead.</li>
-<li>Public and private API calls are now declared with the GCC visibility attribute. The MagickCore and MagickWand dynamic libraries now only export public struct and function declarations.</li>
-<li>The InterpolatePixelMethod enum is now PixelInterpolateMethod.</li>
-<li>The IntegerPixel storage type is removed (use LongPixel instead) and LongLongPixel is added</li>
-<li>Image signatures have changed to account for variable pixel channels.</li>
-<li>All color packet structures, PixelPacket, LongPacket, and DoublePacket, are consolidated to a single color structure, PixelInfo.</li>
-<li>The ChannelMoments structure member <code>I</code> is now <code>invariant</code>. <code>I</code> conflicts with the <code>complex.h</code> header.</li>
-<li>We added a length parameter to FormatMagickSize() to permit variable length buffers.</li>
-</ul>
-<h2><a class="anchor" id="core"></a>MagickWand API</h2>
-<p>Here are a list of changes to the MagickWand API:</p>
-<ul>
-<li>Almost all image processing algorithms are now channel aware.</li>
-<li>The DrawMatte() method is now called DrawAlpha().</li>
-<li>The MagickSetImageBias() and MagickSetImageClipMask() methods are no longer supported.</li>
-</ul>
-<h2><a class="anchor" id="core"></a>Magick++ API</h2>
-<p>Here are a list of changes to the Magick++ API:</p>
-<ul>
-<li>Almost all image processing algorithms are now channel aware.</li>
-<li>Use this construct, for example, to avoid operating on the alpha channel:
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>image.negateChannel(Magick::ChannelType(Magick::CompositeChannels ^ Magick::AlphaChannel));
-</code></pre>
-</li>
-</ul>
-<h2><a class="anchor" id="headers"></a>Header Files</h2>
-<p>Prior versions of ImageMagick (4-6) reference the ImageMagick header files as <samp>$ magick/</code> and <code>wand/</code>. ImageMagick 7 instead uses <code>MagickCore/</code> and <code>MagickWand/</code> respectively. For example,</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>#include <MagickCore/MagickCore.h>
-#include <MagickWand/MagickWand.h></code></pre>
-
-<h2><a class="anchor" id="deprecate"></a>Deprecated Features Removed</h2>
-<p>All deprecated features from ImageMagick version 6 are removed in version 7. These include the <code>Magick-config</code> and <code>Wand-config</code> configuration utilities. Instead use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>MagickCore-config
-MagickWand-config</code></pre>
-<p>The FilterImage() method has been removed. Use ConvolveImage() instead.</p>
-
-<p>In addition, all deprecated <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickCore/deprecate.h">MagickCore</a> and <a href="https://github.com/ImageMagick/ImageMagick/blob/main/MagickWand/deprecate.h">MagickWand</a> methods are no longer available in version 7.</p>
-
-<p>The Bessel filter was removed as it is an alias for Jinc. Use -filter Jinc instead.</p>
-
-<h2><a class="anchor" id="cli"></a>Shell API or Command-line Interface</h2>
-
-<p>As mentioned the primary focus of the changes to the Shell API or Command
-Line Interface is the abstraction so that not only can <var>options</var> be
-read from command line arguments, but also from a file (script) or from a file
-stream (interactive commands, or co-processing). </p>
-
-<p>To do this the CLI parser needed to be re-written, so as to always perform
-all options, in a strict, do-it-as-you-see it order. Previously in IMv6
-options were performed in groups (known as 'FireOptions), this awkwardness is
-now gone. However the strict order means that you can no longer give operations
-before providing an image for the operations to work on. To do so will now
-produce an error. </p>
-
-<p>Error reporting is now reporting exactly which option (by argument count on
-command line, or line,column in scripts) caused the 'exception'. This is not
-complete as yet but getting better. Also not complete is 'regard-warnings'
-handling or its replacement, which will allow you to ignore reported errors
-and continue processing (as appropriate due to error) in co-processes or
-interactive usage. </p>
-
-<p>With the IMv7 parser, activated by the `magick` utility, settings are applied to each image in memory in turn (if any). While an option: only need to be applied once globally. Using the other utilities directly, or as an argument to the `magick` CLI (e.g. `magick`) utilizes the legacy parser.</p>
-
-<p>The parenthesis options used to 'push' the current image list, and image
-settings (EG: '<code>(</code>' and '<code>)</code>' ) on to a stack now has
-a completely separate image settings stack. That is parenthesis 'push/pull'
-image lists, and curly braces (EG: '<code>{</code>' and '<code>}</code>' ) will
-'push/pull' image settings. </p>
-
-<p>Of course due to the previously reported changes to the underlying channel
-handling will result be many side effects to almost all options. Here are some
-specific </p>
-
-<p>Most algorithms update the red, green, blue, black (for CMYK), and alpha
-channels. Most operators will blend alpha the other color channels, but other
-operators (and situations) may require this blending to be disabled, and is
-currently done by removing alpha from the active channels via
-<code>-channel</code> option. (e.g. <code>magick castle.gif -channel RGB
--negate castle.png</code>). </p>
-
-<p>Reading gray-scale images generate an image with only one channel. If
-that image is to then accept color the <code>-colorspace</code> setting needs to
-be applied to expand the one channel into separate RGB (or other) channels.
-</p>
-<p>Previously, command-line arguments were limited to 4096 characters, with ImageMagick version 7 the limit has increased to 131072 characters.</p>
-
-<h2>Command Changes</h2>
-<p>Here are a list of changes to the ImageMagick commands:</p>
-<dl class="row">
-<dt class="col-md-4">magick</dt>
-<dd class="col-md-8"><b>IMPORTANT: The "<samp>$ magick</samp>" command is the new primary command of the Shell
- API, replacing the old "<code>convert</code>" command</b>. This allows you to
- create a 'magick script' of the form "<code>#!/path/to/command/magick
- -script</code>", or pipe options into a command "<code>magick -script
- -</code>, as a background process.</dd>
-<dt class="col-md-4">magick-script</dt>
-<dd class="col-md-8">This the same as "<samp>$ magick</samp>", (only command name is different)
- but which has an implicit "<code>-script</code>" option. This allows you to
- use it in an "<code>env</code>" style script form. That is a magick script
- starts with the 'she-bang' line of "<code>#!/usr/bin/env
- magick-script</code>" allowing the script interpreter to be found anywhere
- on the users command "<code>PATH</code>". This is required to get around
- a "one argument she-bang bug" that is common on most UNIX systems
- (including Linux, but not MacOSX).</dd>
-<dt class="col-md-4">animate, compare, composite, conjure, convert, display, identify,
- import, mogrify, montage, stream</dt>
-<dd class="col-md-8">To reduce the footprint of the command-line utilities, these
- utilities are symbolic links to the <samp>$ magick</samp> utility. On Windows these utilities are
- installed as separate executables and the legacy <code>convert</code> executable is no longer included. You can also invoke
- them from the <code>magick</code> utility, for example, use <pre><samp>$ magick logo: logo.png</samp></pre>
- to invoke the <code>magick</code> utility. Call these utilities by
- prefacing them with <code>magick</code>, such as <code>magick compare</code>, <code>magick identify</code>, <code>magick mogrify</code>,
- <code>magick montage</code>, etc. Do not use <code>magick convert</code>.
-</dd></dl>
-
-<h2>Behavioral Changes</h2>
-<p>Image settings are applied to each image on the command line. To associate a setting with a particular image, use parenthesis to remove ambiguity. In this example we assign a unique page offset to each image:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick \( -page +10+20 first.png \) \( -page +100+200 second.png \) ...</samp></pre></pre>
-
-<p>By default, image operations such as convolution blends alpha with each channel. To convolve each channel independently, deactivate the alpha channel as follows:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick ... -alpha discrete -blur 0x1 ...</samp></pre>
-<p>To remove the alpha values from your image, use <code>-alpha off</code>. If you want to instead persist the alpha channel but not blend the alpha pixels for certain image processing operations, use <code>-alpha deactivate</code> instead.</p>
-<p>Some options have changed in ImageMagick version 7. These include:</p>
-<dl>
-<dt class="col-md-4">-channel</dt>
-<dd class="col-md-8">the default is to update the RGBA channels, previously, in IMv6, the default was RGB. If you get results that differ from IMv6, you may need to specify <code>-channel RGB</code> on your command line (e.g. -channel RGB -negate).</dd>
-<dt class="col-md-4">+combine</dt>
-<dd class="col-md-8">This option now requires an argument, the image colorspace (e.g. +combine sRGB).</dd>
-<dt class="col-md-4">-format</dt>
-<dd class="col-md-8">The %Z image property is no longer supported.</dd>
-<dt class="col-md-4">-gamma</dt>
-<dd class="col-md-8">Multiple gamma arguments (e.g. <code>-gamma 1,2,3</code>) are no longer supported, instead use <code>-channel</code> (e.g. <code>-channel blue -gamma 2)</code>.</dd>
-<dt class="col-md-4">-region</dt>
-<dd class="col-md-8">This option sets a write mask for the region you define. In IMv6, a separate image was cloned instead, operated on, and the results were composited to the source image. In addition, the draw transformations are relative to the upper left corner of the image, previously in IMv6 they were relative to the region.</dd>
-</dl>
-
-<p>Use <code>-define morphology:showKernel=1</code> to post the morphology or convolution kernel. Previously it was <code>-define showKernel=1</code>.</p>
-
-<h2>New Options</h2>
-<p>ImageMagick version 7 supports these new options, though most are limited
-to the "<code>magick</code>" command, or to use in "<code>magick</code>"
-scripts.</p>
-
-<dl class="row">
-<dt class="col-md-4">{ ... }</dt>
-<dd class="col-md-8">Save (and restore) the current image settings (internally known as the
- "image_info" structure). This is automatically done with parenthesis (EG:
- '<code>(</code>' and '<code>)</code>') is "<code>-regard-parenthesis</code>" has
- been set, just as in IMv6. Caution is advised to prevent un-balanced
- braces errors.</dd>
-
-<dt class="col-md-4">--</dt>
-<dd class="col-md-8">End of options, to be used in IMv7 "<code>mogrify</code>" command to
- explicitly separate the operations to be applied and the images that
- are to be processed 'in-place'. (not yet implemented). However if
- not provided, "<code>-read</code>" can still be used to differentiate
- secondary image reads (for use in things like alpha composition) from
- the 'in-place' image being processed. In other commands (such as "magick") it is equivalent to an explicit "<code>-read</code>" (see below) of the next option as an image (as it was in IMv6). </dd>
-
-<dt class="col-md-4">-alpha activate/deactivate</dt>
-<dd class="col-md-8">enables and disables the alpha channel, respectively, with persistence. This is like on/off in Imagemagick 6. In Imagemagick 7, -alpha off will remove the alpha channel permanently such that -alpha on will not re-enable it.</dd>
-
-<dt class="col-md-4">-alpha discrete</dt>
-<dd class="col-md-8">treat the alpha channel independently (do not blend).</dd>
-
-<dt class="col-md-4">-channel-fx <var>expression</var> </dt>
-<dd class="col-md-8">
-<p>exchange, extract, or copy one or more image channels.</p>
-
-<p>The expression consists of one or more channels, either mnemonic or numeric (e.g. red or 0, green or 1, etc.), separated by certain operation symbols as follows:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><=> exchange two channels (e.g. red<=>blue)
-=> copy one channel to another channel (e.g. red=>green)
-= assign a constant value to a channel (e.g. red=50%)
-, write new image with channels in the specified order (e.g. red, green)
-; add a new output image for the next set of channel operations (e.g. red; green; blue)
-| move to the next input image for the source of channel data (e.g. | gray=>alpha)</code></pre>
-
-<p>For example, to create 3 grayscale images from the red, green, and blue channels of an image, use:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>-channel-fx "red; green; blue"</code></pre>
-
-<p>A channel without an operation symbol implies separate (i.e, semicolon).</p>
-
-<p>Here we take an sRGB image and a grayscale image and inject the grayscale image into the alpha channel:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick wizard.png mask.pgm -channel-fx '| gray=>alpha' wizard-alpha.png</samp></pre></pre>
-<p>Use a similar command to define a read mask:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><pre><samp>$ magick wizard.png mask.pgm -channel-fx '| gray=>read-mask' wizard-mask.png</samp></pre></pre>
-
-<p>Add <code>-debug pixel</code> prior to the <code>-channel-fx</code> option to track the channel morphology.</p>
-
-</dd>
-
-<dt class="col-md-4">-exit</dt>
-<dd class="col-md-8">Stop processing at this point. No further options will be processed after
- this option. Can be used in a script to force the "<samp>$ magick</samp>"
- command to exit, without actually closing the pipeline that it is
- processing options from. May also be used as a 'final' option on the "<samp>$ magick</samp>" command
- line, instead of an implicit output image, to completely prevent any image
- write. ASIDE: even the "<code>NULL:</code>" coder requires at least one
- image, for it to 'not write'! This option does not require any images at
- all. </dd>
-
-<dt class="col-md-4">-read {image}</dt>
-<dd class="col-md-8">Explicit read of an image, rather than an implicit read. This allows you
- to read from filenames that start with an 'option' character, and which
- otherwise could be mistaken as an option (unknown or otherwise). This will
- eventually be used in "<code>mogrify</code>" to allow the reading of
- secondary images, and allow the use of image list operations within that
- command. </dd>
-
-<dt class="col-md-4">-read-mask</dt>
-<dd class="col-md-8">prevent updates to image pixels specified by the mask</dd>
-
-<dt class="col-md-4">-region</dt>
-<dd class="col-md-8">supported in ImageMagick 7.0.2-6 and above</dd>
-
-<dt class="col-md-4">-script {file}</dt>
-<dd class="col-md-8">In "<samp>$ magick</samp>", stop the processing of command line arguments as
- image operations, and read all further options from the given file or
- pipeline.</dd>
-<dt class="col-md-4">-write-mask</dt>
-<dd class="col-md-8">prevent pixels from being written.</dd>
-
-</dl>
-
-<h2>Changed Options</h2>
-<p>These options are known to have changed, in some way.</p>
-<dl class="row">
-<dt class="col-md-4">-bias</dt>
-<dd class="col-md-8">The option is no longer recognized. Use <code>-define convolve:bias=<var>value</var></code> instead.</dd>
-<dt class="col-md-4">-draw</dt>
-<dd class="col-md-8">The <code>matte</code> primitive is now <code>alpha</code> (e.g. <code>-draw 'alpha 0,0 floodfill'</code>).</dd>
-<dt class="col-md-4">-negate</dt>
-<dd class="col-md-8">currently negates all channels, including alpha if present. As such you may need to use the -channel option to prevent alpha negation (e.g. -channel RGB -negate). </dd>
-<dt class="col-md-4">-preview</dt>
-<dd class="col-md-8">this option is now an image operator. The PREVIEW image format has been removed.</dd>
-</dl>
-
-<h2>Deprecated warning given, but will work (for now)</h2>
-<dl class="row">
-<dt class="col-md-4">-affine</dt>
-<dd class="col-md-8">Replaced by <code>-draw "affine ..."</code>. (see transform)</dd>
-<dt class="col-md-4">-average</dt>
-<dd class="col-md-8">Replaced by <code>-evaluate-sequence Mean</code>.</dd>
-<dt class="col-md-4">-box</dt>
-<dd class="col-md-8">Replaced by <code>-undercolor</code>.</dd>
-<dt class="col-md-4">-deconstruct</dt>
-<dd class="col-md-8">Replaced by <code>-layers CompareAny</code>.</dd>
-<dt class="col-md-4">-gaussian</dt>
-<dd class="col-md-8">Replaced by <code>-gaussian-blur</code>.</dd>
-<dt class="col-md-4">-/+map</dt>
-<dd class="col-md-8">Replaced by <code>-/+remap</code>.</dd>
-<dt class="col-md-4">-/+mask</dt>
-<dd class="col-md-8">Replaced by <code>-/+read-mask</code>, <code>-/+write-mask</code>.</dd>
-<dt class="col-md-4">-/+matte</dt>
-<dd class="col-md-8">Replaced by <code>-alpha Set/Off</code>.</dd>
-<dt class="col-md-4">-transform</dt>
-<dd class="col-md-8">Replaced by <code>-distort Affine "..."</code>.</dd>
-</dl>
-
-<h2>Deprecated warning given, and ignored (for now)</h2>
-<p>Almost 'plus' (+) option that did not do anything has been marked as
-deprecated, and does nothing. It does not even have associated code. For
-example "+annotate", "+resize", "+clut", and "+draw" .</p>
-
-<dl class="row">
-<dt class="col-md-4">-affinity</dt>
-<dd class="col-md-8">Replaced by <code>-remap</code>.</dd>
-<dt class="col-md-4">-maximum</dt>
-<dd class="col-md-8">Replaced by <code>-evaluate-sequence Max</code>.</dd>
-<dt class="col-md-4">-median</dt>
-<dd class="col-md-8">Replaced by <code>-evaluate-sequence Median</code>.</dd>
-<dt class="col-md-4">-minimum</dt>
-<dd class="col-md-8">Replaced by <code>-evaluate-sequence Min</code>.</dd>
-<dt class="col-md-4">-recolor</dt>
-<dd class="col-md-8">Replaced by <code>-color-matrix</code>.</dd>
-</dl>
-
-<h2>Removed / Replaced Options ("no such option" error and abort)</h2>
-
-<dl class="row">
-<dt class="col-md-4">-interpolate filter</dt>
-<dd class="col-md-8">remove slow and useless interpolation method</dd>
-<dt class="col-md-4">-origin</dt>
-<dd class="col-md-8">old option, unknown meaning.</dd>
-<dt class="col-md-4">-pen</dt>
-<dd class="col-md-8">Replaced by <code>-fill</code>.</dd>
-<dt class="col-md-4">-passphrase</dt>
-<dd class="col-md-8">old option, unknown meaning</dd>
-</dl>
-<h2><a class="anchor" id="performance"></a>Performance Improvements</h2>
-<p>Operating on grayscale images is significantly improved as only one channel is required. Previously, grayscale required three channels.</p>
-<p>The performance of <a href="../fx/index.html">-fx</a> option has increased by one to two orders of magnitude.</p>
-
-<h2><a class="anchor" id="summary"></a>Version 7 Change Summary</h2>
-<p>Changes from ImageMagick version 6 to version 7 are summarized here:</p>
-<h4>High Dynamic Range Imaging</h4>
-<ul>
-<li>ImageMagick version 7 enables HDRI by default. Expect more accurate image processing results with higher memory requirements and possible slower processing times. You can disable this feature for resource constrained system such as a cell phone with a slight loss of accuracy for certain algorithms (e.g. resizing).</li>
-</ul>
-<h4>Pixels</h4>
-<ul>
-<li>Pixels are no longer addressed with PixelPacket structure members (e.g. red, green, blue, opacity) but as an array of channels (e.g. pixel[PixelRedChannel]).</li>
-<li>Use convenience macros to access pixel channels (e.g. GetPixelRed(), SetPixelRed()).</li>
-<li>The black channel for the CMYK colorspace is no longer stored in the index channel, previously accessed with GetAuthenticIndexQueue() and GetCacheViewAuthenticIndexQueue(). Instead it is now a pixel channel and accessed with the convenience pixel macros GetPixelBlack() and SetPixelBlack().</li>
-<li>The index channel for colormapped images is no longer stored in the index channel, previously accessed with GetAuthenticIndexQueue() and GetCacheViewAuthenticIndexQueue(). Instead it is now a pixel channel and accessed with the convenience pixel macros GetPixelIndex() and SetPixelIndex().</li>
-<li>Use GetPixelChannels() to advance to the next set of pixel channels.</li>
-<li>Use the <var>metacontent</var> channel to associate metacontent with each pixel.</li>
-<li>All color packet structures, PixelPacket, LongPacket, and DoublePacket, are consolidated to a single color structure, PixelInfo.</li>
-</ul>
-<h4>Alpha</h4>
-<ul>
-<li>We support alpha rather than opacity (0 transparent; QuantumRange opaque).</li>
-<li>Use GetPixelAlpha() or SetPixelAlpha() to get or set the alpha pixel channel value.</li>
-</ul>
-<h4>Grayscale</h4>
-<ul>
-<li>Grayscale images consume one pixel channel in ImageMagick version 7. To process RGB, set the colorspace to RGB (e.g. -colorspace sRGB).</li>
-</ul>
-<h4>Masks</h4>
-<ul>
-<li>ImageMagick version 6 only supports read mask in limited circumstances. Version 7 supports both a read and write mask. The read mask is honored by most image-processing algorithms.</li>
-</ul>
-<h4>MagickCore API</h4>
-<ul>
-<li>Almost all image processing algorithms are now channel aware.</li>
-<li>MagickCore, version 7, adds an ExceptionInfo argument to those methods that lacked it in version 6, e.g. <code>NegateImage(image,MagickTrue,exception);</code></li>
-<li>All method channel analogs have been removed (e.g. BlurImageChannel()), they are no longer necessary, use pixel traits instead.</li>
-<li>Public and private API calls are now declared with the GCC visibility attribute. The MagickCore and MagickWand dynamic libraries now only export public struct and function declarations.</li>
-<li>The InterpolatePixelMethod enum is now PixelInterpolateMethod.</li>
-<li>To account for variable pixel channels, images may now return a different signature.</li>
-</ul>
-<h4>Deprecated Methods</h4>
-<ul>
-<li>All ImageMagick version 6 MagickCore and MagickWand deprecated methods are removed and no longer available in ImageMagick version 7.</li>
-<li>All MagickCore channel method analogs are removed (e.g. NegateImageChannels()). For version 7, use pixel traits instead.</li>
-<li>The FilterImage() method has been removed. Use ConvolveImage() instead.</li>
-</ul>
-</div>
+ <p class="text-body-secondary mb-3">Note, how we use GetPixelChannels() to advance to the next set of pixel channels.</p>
+ <p class="text-body-secondary mb-3">
+ The colormap indexes and black pixel channel (for the CMYK colorspace) are no longer stored in the index channel, previously accessed with GetAuthenticIndexQueue() and GetCacheViewAuthenticIndexQueue(). Instead they are now a first class pixel channel and accessed as a member of the pixel array (e.g. <code>pixel[4]</code>) or with the convenience pixel accessor methods GetPixelIndex(), SetPixelIndex(), GetPixelBlack(), and SetPixelBlack().
+ </p>
+ <p class="text-body-secondary mb-3">As a consequence of using an array structure for variable pixel channels, auto-vectorization compilers have additional opportunities to speed up pixel loops.</p>
+ <p class="text-body-secondary mb-4">The `sync` channel in IMv6 was really a flag instead of a channel. In IMv7, we instead use a flag: <code>-define compose:sync=false</code>.</p>
+
+ <h4 class="fw-bold mb-3">Pixel Accessors</h4>
+ <p class="text-body-secondary mb-3">You can access pixel channel as array elements (e.g. <code>pixel[1]</code>) or use convenience accessors to get or set pixel channels:</p>
+
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small">
+ GetPixela() SetPixela()<br>
+ GetPixelAlpha() SetPixelAlpha()<br>
+ GetPixelb() SetPixelb()<br>
+ GetPixelBlack() SetPixelBlack()<br>
+ GetPixelBlue() SetPixelBlue()<br>
+ GetPixelCb() SetPixelCb()<br>
+ GetPixelCr() SetPixelCr()<br>
+ GetPixelCyan() SetPixelCyan()<br>
+ GetPixelGray() SetPixelGray()<br>
+ GetPixelGreen() SetPixelGreen()<br>
+ GetPixelIndex() SetPixelIndex()<br>
+ GetPixelL() SetPixelL()<br>
+ GetPixelMagenta() SetPixelMagenta()<br>
+ GetPixelReadMask() SetPixelReadMask()<br>
+ GetPixelWriteMask() SetPixelWriteMask()<br>
+ GetPixelMetacontentExtent() SetPixelMetacontentExtent()<br>
+ GetPixelOpacity() SetPixelOpacity()<br>
+ GetPixelRed() SetPixelRed()<br>
+ GetPixelYellow() SetPixelYellow()<br>
+ GetPixelY() SetPixelY()
+ </div>
+ </div>
+ <p class="text-body-secondary mb-4">You can find these accessors defined in the header file, <code>MagickCore/pixel-accessor.h</code></p>
+
+ <h4 class="fw-bold mb-3">Pixel Traits</h4>
+ <p class="text-body-secondary mb-3">Each pixel channel includes one or more of these traits:</p>
+ <div class="card im-card p-3 mb-4">
+ <dl class="row mb-0">
+ <dt class="col-md-3 fw-semibold">Undefined</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">no traits associated with this pixel channel</dd>
+ <dt class="col-md-3 fw-semibold">Copy</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">do not update this pixel channel, just copy it</dd>
+ <dt class="col-md-3 fw-semibold">Update</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">update this pixel channel</dd>
+ <dt class="col-md-3 fw-semibold">Blend</dt>
+ <dd class="col-md-9 mb-0 text-body-secondary">blend this pixel channel with the alpha mask if it's enabled</dd>
+ </dl>
+ </div>
+ <p class="text-body-secondary mb-3">We provide these methods to set and get pixel traits:</p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">
+ GetPixelAlphaTraits() SetPixelAlphaTraits()<br>
+ GetPixelBlackTraits() SetPixelBlackTraits()<br>
+ GetPixelBlueTraits() SetPixelBlueTraits()<br>
+ GetPixelCbTraits() SetPixelCbTraits()<br>
+ GetPixelChannelTraits() SetPixelChannelTraits()<br>
+ GetPixelCrTraits() SetPixelCrTraits()<br>
+ GetPixelGrayTraits() SetPixelGrayTraits()<br>
+ GetPixelGreenTraits() SetPixelGreenTraits()<br>
+ GetPixelIndexTraits() SetPixelIndexTraits()<br>
+ GetPixelMagentaTraits() SetPixelMagentaTraits()<br>
+ GetPixelRedTraits() SetPixelRedTraits()<br>
+ GetPixelYellowTraits() SetPixelYellowTraits()<br>
+ GetPixelYTraits() SetPixelYTraits()
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">For convenience you can set the active trait for a set of pixel channels with a channel mask and this method:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small">SetImageChannelMask()</div>
+ </div>
+
+ <p class="text-body-secondary mb-3">Previously MagickCore methods had channel analogs, for example, NegateImage() and NegateImageChannels(). The channel analog methods are no longer necessary because the pixel channel traits specify whether to act on a particular pixel channel or whether to blend with the alpha mask. For example, instead of</p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">NegateImageChannel(image,channel);</div>
+ </div>
+ <p class="text-body-secondary mb-3">we use:</p>
+ <div class="terminal-card mb-4">
+ <div class="p-3 text-light font-mono small">
+ channel_mask=SetImageChannelMask(image,channel);<br>
+ NegateImage(image,exception);<br>
+ (void) SetImageChannelMask(image,channel_mask);
+ </div>
+ </div>
+ <h4 class="fw-bold mb-3">Pixel User Channels</h4>
+ <p class="text-body-secondary mb-4">
+ In version 7, we introduce pixel user channels. Traditionally we utilize 4 channels, red, green, blue, and alpha. For CMYK we also have a black channel. User channels are designed to contain whatever additional channel information that makes sense for your application. Some examples include extra channels in TIFF or PSD images or perhaps you require a channel with infrared information for the pixel. You can associate traits with the user channels so that when they are acted upon by an image processing algorithm (e.g. blur) the pixels are copied, acted upon by the algorithm, or even blended with the alpha channel if that makes sense.
+ </p>
+
+ <h4 class="fw-bold mb-3">Pixel Metacontent</h4>
+ <p class="text-body-secondary mb-3">
+ In version 7, we introduce pixel metacontent. Metacontent is content about content. So rather than being the content itself, it's something that describes or is associated with the content. Here the content is a pixel. The pixel metacontent is for your exclusive use (internally the data is just copied, it is not modified) and is accessed with these MagickCore API methods:
+ </p>
+ <div class="terminal-card">
+ <div class="p-3 text-light font-mono small">
+ SetImageMetacontentExtent()<br>
+ GetImageMetacontentExtent()<br>
+ GetVirtualMetacontent()<br>
+ GetAuthenticMetacontent()<br>
+ GetCacheViewAuthenticMetacontent()<br>
+ GetCacheViewVirtualMetacontent()
+ </div>
+ </div>
+ </section>
+
+ <!-- Alpha & Colorspace & Grayscale -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-4" id="alpha">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-circle-half me-2"></i>Alpha</h5>
+ <p class="small text-body-secondary mb-0">
+ We support alpha now, previously opacity. With alpha, a value of <code>0</code> means transparent and <code>QuantumRange</code> means opaque. The PixelInfo structure member alpha replaces opacity, and hexadecimal sRGB alpha notation is reversed (e.g., #0000 is fully transparent).
+ </p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-4" id="colorspace">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-palette me-2"></i>Colorspace</h5>
+ <p class="small text-body-secondary mb-0">
+ <code>Rec601Luma</code> and <code>Rec709Luma</code> colorspaces are no longer supported. Specify the <code>gray</code> colorspace and choose from intensity options like <code>Rec601Luminance</code> or <code>Rec709Luminance</code>.
+ </p>
+ </div>
+ </div>
+ <div class="col-md-4" id="grayscale">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3"><i class="bi bi-file-earmark-text me-2"></i>Grayscale</h5>
+ <p class="small text-body-secondary mb-0">
+ Previously, grayscale images consumed 4 channels (red, green, blue, alpha). With version 7, grayscale consumes only 1 channel, requiring far fewer resources.
+ </p>
+ </div>
+ </div>
+ </div>
+
+ <!-- Masks -->
+ <section class="mb-5" id="mask">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-shield-shaded fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Masks</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Version 7 supports masks for most image operators. White pixels in a read mask ignore corresponding pixels in an image, whereas white pixels in a write mask protect corresponding pixels. From the command-line, associate a mask using <code>-read-mask</code> and <code>-write-mask</code> options. The <code>-mask</code> option is also supported for backwards compatibility.
+ </p>
+ <p class="text-body-secondary mb-3">In this example, we compute the distortion of a masked reconstructed image:</p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> compare -metric rmse -read-mask hat_mask.png hat.png wizard.png difference.png
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </div>
+ <p class="text-body-secondary mb-3">Here we protect certain pixels from change:</p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick rose: -write-mask rose_bg_mask.png -modulate 110,100,33.3 +write-mask rose_blue.png
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">
+ A mask associated with an image persists until modified or removed, which may produce unexpected results for complex command-lines. Here we only want to clip when applying the alpha option, not the resize:
+ </p>
+ <div class="terminal-card">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick -density 300 -colorspace srgb image.eps -alpha transparent -clip -alpha opaque +clip -resize 1000x1000 -strip image.png
+ </div>
+ </div>
+ </div>
+ </section>
+
+ <!-- APIs & Headers -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-6" id="core">
+ <div class="card im-card h-100 p-4">
+ <h4 class="fw-bold mb-3"><i class="bi bi-cpu text-primary me-2"></i>MagickCore API Changes</h4>
+ <ul class="list-unstyled d-flex flex-column gap-2 small text-body-secondary mb-0">
+ <li><i class="bi bi-check2 text-success me-1"></i> Almost all image processing algorithms are now channel aware.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Adds an <code>ExceptionInfo</code> argument to methods lacking it in v6 (e.g., <code>NegateImage(image,MagickTrue,exception)</code>).</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> All method channel analogs removed (use pixel traits instead).</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Public/private API calls declared with GCC visibility attribute.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <code>InterpolatePixelMethod</code> enum is now <code>PixelInterpolateMethod</code>.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <code>IntegerPixel</code> removed (use <code>LongPixel</code>), <code>LongLongPixel</code> added.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Image signatures updated for variable pixel channels.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <code>PixelPacket</code>, <code>LongPacket</code>, and <code>DoublePacket</code> consolidated to <code>PixelInfo</code>.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> ChannelMoments member <code>I</code> renamed to <code>invariant</code> to avoid conflict with <code>complex.h</code>.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Added length parameter to <code>FormatMagickSize()</code>.</li>
+ </ul>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-4">
+ <h4 class="fw-bold mb-3"><i class="bi bi-code-square text-primary me-2"></i>MagickWand & Magick++ APIs</h4>
+ <h6 class="fw-semibold text-body mb-2">MagickWand API:</h6>
+ <ul class="list-unstyled d-flex flex-column gap-2 small text-body-secondary mb-3">
+ <li><i class="bi bi-check2 text-success me-1"></i> Almost all image processing algorithms are channel aware.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <code>DrawMatte()</code> method is now called <code>DrawAlpha()</code>.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> <code>MagickSetImageBias()</code> and <code>MagickSetImageClipMask()</code> no longer supported.</li>
+ </ul>
+ <h6 class="fw-semibold text-body mb-2">Magick++ API:</h6>
+ <ul class="list-unstyled d-flex flex-column gap-2 small text-body-secondary mb-0">
+ <li><i class="bi bi-check2 text-success me-1"></i> Channel-aware algorithms.</li>
+ <li><i class="bi bi-check2 text-success me-1"></i> Example construct to avoid operating on alpha channel: <br><code>image.negateChannel(Magick::ChannelType(Magick::CompositeChannels ^ Magick::AlphaChannel));</code></li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!-- Header Files & Deprecations -->
+ <div class="row g-4 mb-5">
+ <div class="col-md-6" id="headers">
+ <div class="card im-card h-100 p-4">
+ <h4 class="fw-bold mb-3"><i class="bi bi-file-earmark-code text-primary me-2"></i>Header Files</h4>
+ <p class="small text-body-secondary mb-3">
+ Prior versions of ImageMagick reference header files as <code>magick/</code> and <code>wand/</code>. ImageMagick 7 uses <code>MagickCore/</code> and <code>MagickWand/</code> respectively. For example:
+ </p>
+ <div class="terminal-card">
+ <div class="p-3 text-light font-mono small">
+ #include <MagickCore/MagickCore.h><br>
+ #include <MagickWand/MagickWand.h>
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+ <div class="col-md-6" id="deprecate">
+ <div class="card im-card h-100 p-4">
+ <h4 class="fw-bold mb-3"><i class="bi bi-trash text-primary me-2"></i>Deprecated Features Removed</h4>
+ <p class="small text-body-secondary mb-3">All deprecated features from v6 are removed, including <code>Magick-config</code> and <code>Wand-config</code>. Use instead:</p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">
+ MagickCore-config<br>
+ MagickWand-config
+ </div>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ The <code>FilterImage()</code> method is removed (use <code>ConvolveImage()</code>). The Bessel filter is removed as an alias for Jinc (use <code>-filter Jinc</code>).
+ </p>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
</div>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ <!-- Shell API / CLI -->
+ <section class="mb-5" id="cli">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-terminal-fill fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Shell API or Command-line Interface</h2>
+ </div>
+
+ <div class="card im-card p-4 mb-4">
+ <p class="text-body-secondary mb-3">
+ The primary focus of changes to the Shell API/CLI is abstraction so options can be read from command line arguments, files (scripts), or file streams (interactive commands/co-processing).
+ </p>
+ <p class="text-body-secondary mb-3">
+ The CLI parser was rewritten to perform options strictly in a do-it-as-you-see-it order. You can no longer give operations before providing an image. Error reporting now pinpoints exact options causing exceptions.
+ </p>
+ <p class="text-body-secondary mb-0">
+ Parentheses (<code>(</code> and <code>)</code>) push/pull image lists, while curly braces (<code>{</code> and <code>}</code>) push/pull image settings. Command-line character limits increased from 4096 to 131072 characters.
+ </p>
+ </div>
+
+ <h4 class="fw-bold mb-3">Command Changes</h4>
+ <div class="card im-card p-4 mb-4">
+ <dl class="row mb-0">
+ <dt class="col-md-3 font-semibold">magick</dt>
+ <dd class="col-md-9 mb-3 text-body-secondary"><b>IMPORTANT: The <code>magick</code> command is the new primary command of the Shell API, replacing <code>convert</code></b>. Enables magick scripts or piping options.</dd>
+ <dt class="col-md-3 font-semibold">magick-script</dt>
+ <dd class="col-md-9 mb-3 text-body-secondary">Same as <code>magick</code> with an implicit <code>-script</code> option, allowing she-bang scripts (e.g., <code>#!/usr/bin/env magick-script</code>).</dd>
+ <dt class="col-md-3 font-semibold">Other Utilities</dt>
+ <dd class="col-md-9 mb-0 text-body-secondary">animate, compare, composite, conjure, convert, display, identify, import, mogrify, montage, stream are symbolic links to <code>magick</code>. On Windows, use <code>magick compare</code>, <code>magick identify</code>, etc. Do not use <code>magick convert</code>.</dd>
+ </dl>
+ </div>
+
+ <h4 class="fw-bold mb-3">Behavioral Changes</h4>
+ <div class="card im-card p-4 mb-4">
+ <p class="text-body-secondary mb-3">Image settings apply to each image on the command line. Use parentheses to associate settings with particular images:</p>
+ <div class="terminal-card mb-3">
+ <div class="p-3 text-light font-mono small">
+ <span class="text-success">$</span> magick \( -page +10+20 first.png \) \( -page +100+200 second.png \) ...
+ </div>
+ </div>
+ <p class="text-body-secondary mb-0">
+ Default channel updates include RGBA (previously RGB). Use <code>-channel RGB</code> if legacy results differ. <code>+combine</code> requires a colorspace argument. <code>-gamma</code> no longer accepts multiple arguments.
+ </p>
+ </div>
+
+ <h4 class="fw-bold mb-3">New Options</h4>
+ <div class="card im-card p-4 mb-4">
+ <dl class="row mb-0">
+ <dt class="col-md-3 font-semibold">{ ... }</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">Save/restore current image settings.</dd>
+ <dt class="col-md-3 font-semibold">-alpha activate/deactivate</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">Enables/disables alpha channel with persistence.</dd>
+ <dt class="col-md-3 font-semibold">-alpha discrete</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">Treat alpha channel independently without blending.</dd>
+ <dt class="col-md-3 font-semibold">-channel-fx expression</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">Exchange, extract, or copy one or more image channels.</dd>
+ <dt class="col-md-3 font-semibold">-exit</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">Stop processing immediately.</dd>
+ <dt class="col-md-3 font-semibold">-read {image}</dt>
+ <dd class="col-md-9 mb-2 text-body-secondary">Explicit read of an image.</dd>
+ <dt class="col-md-3 font-semibold">-script {file}</dt>
+ <dd class="col-md-9 mb-0 text-body-secondary">Read further options from a given file or pipeline.</dd>
+ </dl>
+ </div>
+ </section>
+ <!-- Performance Improvements -->
+ <section class="mb-5" id="performance">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-speedometer2 fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Performance Improvements</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">Operating on grayscale images is significantly improved as only one channel is required (previously three).</p>
+ <p class="text-body-secondary mb-0">The performance of <a href="../fx/index.html" class="text-decoration-none fw-semibold">-fx</a> option has increased by one to two orders of magnitude.</p>
+ </div>
+ </section>
+
+ <!-- Version 7 Change Summary -->
+ <section class="mb-4" id="summary">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-list-check fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Version 7 Change Summary</h2>
+ </div>
+ <div class="card im-card p-4">
+ <h5 class="fw-bold text-primary mb-2">High Dynamic Range Imaging</h5>
+ <p class="small text-body-secondary mb-3">HDRI enabled by default for accurate results; can be disabled via <code>--disable-hdri</code>.</p>
+
+ <h5 class="fw-bold text-primary mb-2">Pixels & Alpha</h5>
+ <p class="small text-body-secondary mb-3">Addressed as an array of channels (e.g., <code>pixel[PixelRedChannel]</code>) with convenience accessors. Alpha replaces opacity (0 transparent, QuantumRange opaque).</p>
+
+ <h5 class="fw-bold text-primary mb-2">Grayscale & Masks</h5>
+ <p class="small text-body-secondary mb-3">Grayscale consumes one channel. Version 7 fully supports both read and write masks.</p>
+
+ <h5 class="fw-bold text-primary mb-2">MagickCore API & Deprecations</h5>
+ <p class="small text-body-secondary mb-0">Channel-aware algorithms, ExceptionInfo arguments added, and all v6 deprecated channel analogs removed.</p>
+ </div>
+ </section>
+</div>
+
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/privacy-policy/index.html b/www/privacy-policy/index.html
index 294018258..945d57277 100644
--- a/www/privacy-policy/index.html
+++ b/www/privacy-policy/index.html
@@ -11,281 +11,420 @@
<meta name="description" content="ImageMagick does not collect any personal identifier information (PII).">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Privacy Policy">
<meta property="og:description" content="ImageMagick does not collect any personal identifier information (PII).">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Privacy Policy">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Privacy Policy",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/privacy-policy/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "ImageMagick does not collect any personal identifier information (PII).",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/privacy-policy/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/privacy-policy/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Privacy Policy</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Privacy Policy</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">ImageMagick does not collect any personal identifier information (PII).</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="lead">As the organization responsible for maintaining and distributing the open‑source ImageMagick software, ImageMagick Studio LLC does not collect, store, or process any personally identifiable information (PII). Likewise, the ImageMagick software itself is designed without mechanisms to gather PII from its users. Both the organization and the software distribution are committed to safeguarding user privacy by ensuring that no personal identifiers are collected during installation, configuration, or use.</p>
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Lead Section -->
+ <div class="row mb-4">
+ <div class="col-lg-10 mx-auto text-center">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-success bg-opacity-10 text-success border border-success border-opacity-25 mb-3 fs-7">
+ <i class="bi bi-shield-lock-fill"></i>
+ <span class="small fw-semibold">Zero PII Collection</span>
+ </div>
+ <h1 class="display-6 fw-bold mb-3">Privacy Policy</h1>
+ </div>
+ </div>
+ <!-- Privacy Policy Card -->
+ <div class="row justify-content-center">
+ <div class="col-lg-10">
+ <div class="card im-card p-4 p-md-5 shadow-sm">
+ <div class="card-body">
+ <p class="lead text-body-secondary mb-0">
+ As the organization responsible for maintaining and distributing the open‑source ImageMagick software, ImageMagick Studio LLC does not collect, store, or process any personally identifiable information (PII). Likewise, the ImageMagick software itself is designed without mechanisms to gather PII from its users. Both the organization and the software distribution are committed to safeguarding user privacy by ensuring that no personal identifiers are collected during installation, configuration, or use.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/quantize/index.html b/www/quantize/index.html
index 09aec372f..ccf5d03e9 100644
--- a/www/quantize/index.html
+++ b/www/quantize/index.html
@@ -8,401 +8,605 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Color Reduction Utilizing Adaptive Spatial Subdivision</title>
- <meta name="description" content="">
+ <meta name="description" content="Detailed guide on how ImageMagick performs color reduction using adaptive spatial subdivision, classification, reduction, assignment phases, and error measurement.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Color Reduction Utilizing Adaptive Spatial Subdivision">
- <meta property="og:description" content="">
+ <meta property="og:description" content="Detailed guide on how ImageMagick performs color reduction using adaptive spatial subdivision, classification, reduction, assignment phases, and error measurement.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Color Reduction Utilizing Adaptive Spatial Subdivision">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Color Reduction Utilizing Adaptive Spatial Subdivision",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/quantize/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Detailed guide on how ImageMagick performs color reduction using adaptive spatial subdivision, classification, reduction, assignment phases, and error measurement.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/quantize/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/quantize/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Color Reduction Utilizing Adaptive Spatial Subdivision</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#describe">Algorithm Description</a> • <a href="#measure">Measuring Color Reduction Error</a></p>
-
-<p class="lead">This document describes how ImageMagick performs color reduction on an image. To fully understand what follows, you should have a knowledge of basic imaging techniques and the tree data structure and terminology.</p>
-
-<h2><a class="anchor" id="describe"></a>Algorithm Description</h2>
-
-<p>For purposes of color allocation, an image is a set of <var>n</var> pixels, where each pixel is a point in RGB space. RGB space is a 3-dimensional vector space, and each pixel, <var>p(i)</var>, is defined by an ordered triple of red, green, and blue coordinates, (<var>r(i)</var>, <var>g(i)</var>, <var>b(i)</var>).</p>
-
-<p>Each primary color component (<var>red</var>, <var>green</var>, or <var>blue</var>) represents an intensity which varies linearly from 0 to a maximum value, <var>Cmax</var>, which corresponds to full saturation of that color. Color allocation is defined over a domain consisting of the cube in RGB space with opposite vertices at (0, 0, 0) and (<var>Cmax</var>, <var>Cmax</var>, <var>Cmax</var>). ImageMagick requires <var>Cmax</var>= <var>255</var>.</p>
-
-<p>The algorithm maps this domain onto a tree in which each node represents a cube within that domain. In the following discussion, these cubes are defined by the coordinate of two opposite vertices: The vertex nearest the origin in RGB space and the vertex farthest from the origin.</p>
-
-<p>The tree's root node represents the entire domain, (0,0,0) through (<var>Cmax</var>, <var>Cmax</var>, <var>Cmax</var>). Each lower level in the tree is generated by subdividing one node's cube into eight smaller cubes of equal size. This corresponds to bisecting the parent cube with planes passing through the midpoints of each edge.</p>
-
-<p>The basic algorithm operates in three phases:</p>
-
-<ol>
- <li>Classification</li>
- <li>Reduction</li>
- <li>Assignment</li>
-</ol>
-
-<p><b>Classification</b></p>
-
-<p>Classification builds a color description tree for the image. Reduction collapses the tree until the number it represents, at most, is the number of colors desired in the output image. Assignment defines the output image's color map and sets each pixel's color by reclassification in the reduced tree. <var>Our goal is to minimize the numerical discrepancies between the original colors and quantized colors</var>. To learn more about quantization error, see <a href="#measure">Measuring Color Reduction Error</a>.</p>
-
-<p>Classification begins by initializing a color description tree of sufficient depth to represent each possible input color in a leaf. However, it is impractical to generate a fully-formed color description tree in the classification phase for realistic values of <var>Cmax</var>. If color components in the input image are quantized to <var>k</var>-bit precision, so that <var>Cmax</var> = <var>2^k-1</var>, the tree would need <var>k</var> levels below the root node to allow representing each possible input color in a leaf. This becomes prohibitive because the tree's total number of nodes:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>total nodes = 1+Sum(8^i), i=1,k
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Color Reduction Utilizing Adaptive Spatial Subdivision</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Detailed guide on how ImageMagick performs color reduction using adaptive spatial subdivision, classification, reduction, assignment phases, and error measurement.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Header & Quick Navigation -->
+<div class="mb-5 border-bottom pb-4">
+ <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+ <a href="#describe" class="btn btn-sm btn-outline-primary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-gear-fill"></i> Algorithm Description
+ </a>
+ <a href="#measure" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-bar-chart-fill"></i> Measuring Color Reduction Error
+ </a>
+ </div>
+ <p class="lead text-body-secondary mb-0">
+ This document describes how ImageMagick performs color reduction on an image. To fully understand what follows, you should have a knowledge of basic imaging techniques and the tree data structure and terminology.
+ </p>
+</div>
+<!-- Section: Algorithm Description -->
+<section id="describe" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Algorithm Description</h2>
+ <a href="#describe" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary">
+ For purposes of color allocation, an image is a set of <var class="text-secondary"><n></var> pixels, where each pixel is a point in RGB space. RGB space is a 3-dimensional vector space, and each pixel, <var class="text-secondary">p(i)</var>, is defined by an ordered triple of red, green, and blue coordinates, (<var class="text-secondary">r(i)</var>, <var class="text-secondary">g(i)</var>, <var class="text-secondary">b(i)</var>).
+ </p>
+ <p class="text-body-secondary">
+ Each primary color component (<var class="text-secondary">red</var>, <var class="text-secondary">green</var>, or <var class="text-secondary">blue</var>) represents an intensity which varies linearly from 0 to a maximum value, <var class="text-secondary">Cmax</var>, which corresponds to full saturation of that color. Color allocation is defined over a domain consisting of the cube in RGB space with opposite vertices at (0, 0, 0) and (<var class="text-secondary">Cmax</var>, <var class="text-secondary">Cmax</var>, <var class="text-secondary">Cmax</var>). ImageMagick requires <var class="text-secondary">Cmax</var> = <var class="text-secondary">255</var>.
+ </p>
+ <p class="text-body-secondary">
+ The algorithm maps this domain onto a tree in which each node represents a cube within that domain. In the following discussion, these cubes are defined by the coordinate of two opposite vertices: The vertex nearest the origin in RGB space and the vertex farthest from the origin.
+ </p>
+ <p class="text-body-secondary">
+ The tree's root node represents the entire domain, (0,0,0) through (<var class="text-secondary">Cmax</var>, <var class="text-secondary">Cmax</var>, <var class="text-secondary">Cmax</var>). Each lower level in the tree is generated by subdividing one node's cube into eight smaller cubes of equal size. This corresponds to bisecting the parent cube with planes passing through the midpoints of each edge.
+ </p>
+ <p class="text-body-secondary mb-3">The basic algorithm operates in three phases:</p>
+ <div class="row g-3 mb-4">
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3 bg-body-tertiary border">
+ <div class="fw-bold text-primary mb-1">1. Classification</div>
+ <p class="small text-body-secondary mb-0">Builds a color description tree for the image.</p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3 bg-body-tertiary border">
+ <div class="fw-bold text-primary mb-1">2. Reduction</div>
+ <p class="small text-body-secondary mb-0">Collapses the tree until the number it represents matches the desired colors.</p>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3 bg-body-tertiary border">
+ <div class="fw-bold text-primary mb-1">3. Assignment</div>
+ <p class="small text-body-secondary mb-0">Defines the color map and sets each pixel's color by reclassification.</p>
+ </div>
+ </div>
+ </div>
+ <h3 class="h5 fw-bold mt-4 mb-2">Classification</h3>
+ <p class="text-body-secondary">
+ Classification builds a color description tree for the image. Reduction collapses the tree until the number it represents, at most, is the number of colors desired in the output image. Assignment defines the output image's color map and sets each pixel's color by reclassification in the reduced tree. <mark class="px-2 py-1 rounded bg-warning bg-opacity-20 text-body">Our goal is to minimize the numerical discrepancies between the original colors and quantized colors</mark>. To learn more about quantization error, see <a href="#measure" class="text-decoration-none">Measuring Color Reduction Error</a>.
+ </p>
+ <p class="text-body-secondary">
+ Classification begins by initializing a color description tree of sufficient depth to represent each possible input color in a leaf. However, it is impractical to generate a fully-formed color description tree in the classification phase for realistic values of <var class="text-secondary">Cmax</var>. If color components in the input image are quantized to <var class="text-secondary">k</var>-bit precision, so that <var class="text-secondary">Cmax</var> = <var class="text-secondary">2^k-1</var>, the tree would need <var class="text-secondary">k</var> levels below the root node to allow representing each possible input color in a leaf. This becomes prohibitive because the tree's total number of nodes:
+ </p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">node-calculation.txt</span>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code>total nodes = 1 + Sum(8^i), i=1,k
For k=8,
-nodes = 1 + (8^1+8^2+....+8^8)
- = 1 + 8(8^8 - 1)/(8 - 1)
- = 19,173,961 </code></pre>
-
-<p>Therefore, to avoid building a fully populated tree, ImageMagick:</p>
-
-<ol>
- <li>initializes data structures for nodes only as they are needed;</li>
- <li>chooses a maximum depth for the tree as a function of the desired number of colors in the output image (currently the <var>base-two</var> logarithm of <var>Cmax</var>).</li>
-</ol>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>For Cmax=255,
+nodes = 1 + (8^1 + 8^2 + .... + 8^8)
+ = 1 + 8(8^8 - 1) / (8 - 1)
+ = 19,173,961</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary mb-3">Therefore, to avoid building a fully populated tree, ImageMagick:</p>
+ <ul class="text-body-secondary mb-3">
+ <li>initializes data structures for nodes only as they are needed;</li>
+ <li>chooses a maximum depth for the tree as a function of the desired number of colors in the output image (currently the <var class="text-secondary">base-two</var> logarithm of <var class="text-secondary">Cmax</var>).</li>
+ </ul>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">tree-depth.txt</span>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code>For Cmax=255,
maximum tree depth = log<sub>2</sub>(256)
- = 8 </code></pre>
-
-<p>A tree of this depth generally allows the best representation of the source image with the fastest computational speed and the least amount of memory. However, the default depth is inappropriate for some images. Therefore, the caller can request a specific tree depth.</p>
-
-<p>For each pixel in the input image, classification scans downward from the root of the color description tree. At each level of the tree, it identifies the single node which represents a cube in RGB space containing the pixels' color. It updates the following data for each such node:</p>
-
-<dl class="row">
-<dt class="col-md-4">n1</dt>
- <dd class="col-md-8">number of pixels whose color is contained in the RGB cube which this node represents;</dd>
-<dt class="col-md-4">n2</dt>
- <dd class="col-md-8">number of pixels whose color is not represented in a node at lower depth in the tree; initially, <var>n2=0</var> for all nodes except leaves of the tree.</dd>
-<dt class="col-md-4">Sr,Sg,Sb</dt>
- <dd class="col-md-8">sums of the <var>red</var>, <var>green</var>, and <var>blue</var> component values for all pixels not classified at a lower depth. The combination of these sums and <var>n2</var> will ultimately characterize the mean color of a set of pixels represented by this node.</dd>
-<dt class="col-md-4">E</dt>
- <dd class="col-md-8">the distance squared in RGB space between each pixel contained within a node and the nodes' center. This represents the quantization error for a node.</dd>
-</dl>
-
-<p><b>Reduction</b></p>
-
-<p>Reduction repeatedly prunes the tree until the number of nodes with <var>n2</var> > <var>0</var> is less than or equal to the maximum number of colors allowed in the output image. On any given iteration over the tree, it selects those nodes whose <var>E</var> value is minimal for pruning and merges their color statistics upward. It uses a pruning threshold, <var>Ep</var>, to govern node selection as follows:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>Ep = 0
+ = 8</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary">
+ A tree of this depth generally allows the best representation of the source image with the fastest computational speed and the least amount of memory. However, the default depth is inappropriate for some images. Therefore, the caller can request a specific tree depth.
+ </p>
+ <p class="text-body-secondary">
+ For each pixel in the input image, classification scans downward from the root of the color description tree. At each level of the tree, it identifies the single node which represents a cube in RGB space containing the pixels' color. It updates the following data for each such node:
+ </p>
+ <div class="card im-card p-4 mb-4 bg-body-tertiary">
+ <dl class="row mb-0 font-mono small">
+ <dt class="col-md-3 text-primary fw-bold">n1</dt>
+ <dd class="col-md-9 font-sans text-body-secondary">number of pixels whose color is contained in the RGB cube which this node represents;</dd>
+
+ <dt class="col-md-3 text-primary fw-bold">n2</dt>
+ <dd class="col-md-9 font-sans text-body-secondary">number of pixels whose color is not represented in a node at lower depth in the tree; initially, <var class="text-secondary">n2=0</var> for all nodes except leaves of the tree.</dd>
+
+ <dt class="col-md-3 text-primary fw-bold">Sr, Sg, Sb</dt>
+ <dd class="col-md-9 font-sans text-body-secondary">sums of the <var class="text-secondary">red</var>, <var class="text-secondary">green</var>, and <var class="text-secondary">blue</var> component values for all pixels not classified at a lower depth. The combination of these sums and <var class="text-secondary">n2</var> will ultimately characterize the mean color of a set of pixels represented by this node.</dd>
+
+ <dt class="col-md-3 text-primary fw-bold">E</dt>
+ <dd class="col-md-9 font-sans text-body-secondary">the distance squared in RGB space between each pixel contained within a node and the nodes' center. This represents the quantization error for a node.</dd>
+ </dl>
+ </div>
+ <h3 class="h5 fw-bold mt-4 mb-2">Reduction</h3>
+ <p class="text-body-secondary">
+ Reduction repeatedly prunes the tree until the number of nodes with <var class="text-secondary">n2</var> > <var class="text-secondary">0</var> is less than or equal to the maximum number of colors allowed in the output image. On any given iteration over the tree, it selects those nodes whose <var class="text-secondary">E</var> value is minimal for pruning and merges their color statistics upward. It uses a pruning threshold, <var class="text-secondary">Ep</var>, to govern node selection as follows:
+ </p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">pruning-algorithm.txt</span>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code>Ep = 0
while number of nodes with (n2 > 0) > required maximum number of colors
prune all nodes such that E <= Ep
- Set Ep to minimum E in remaining nodes </code></pre>
-
-<p>This has the effect of minimizing any quantization error when merging two nodes together.</p>
-
-<p>When a node to be pruned has offspring, the pruning procedure invokes itself recursively in order to prune the tree from the leaves upward. The values of <var>n2</var>, <var>Sr</var>, <var>Sg</var>, and <var>Sb</var> in a node being pruned are always added to the corresponding data in that node's parent. This retains the pruned node's color characteristics for later averaging.</p>
-
-<p>For each node, <var>n2</var> pixels exist for which that node represents the smallest volume in RGB space containing those pixel's colors. When <var>n2</var> > <var>0</var> the node will uniquely define a color in the output image. At the beginning of reduction, <var>n2</var> = <var>0</var> for all nodes except the leaves of the tree which represent colors present in the input image.</p>
-
-<p>The other pixel count, <var>n1</var>, indicates the total number of colors within the cubic volume which the node represents. This includes <var>n1</var> - <var>n2</var> pixels whose colors should be defined by nodes at a lower level in the tree.</p>
-
-<p><b>Assignment</b></p>
-
-<p>Assignment generates the output image from the pruned tree. The output image consists of two parts:</p>
-<ol>
- <li>A color map, which is an array of color descriptions (RGB triples) for each color present in the output image.</li>
-
- <li>A pixel array, which represents each pixel as an index into the color map array.</li>
-</ol>
-
-<p>First, the assignment phase makes one pass over the pruned color description tree to establish the image's color map. For each node with <var>n2</var> > <var>0</var>, it divides <var>Sr</var>, <var>Sg</var>, and <var>Sb</var> by <var>n2</var>. This produces the mean color of all pixels that classify no lower than this node. Each of these colors becomes an entry in the color map.</p>
-
-<p>Finally, the assignment phase reclassifies each pixel in the pruned tree to identify the deepest node containing the pixel's color. The pixel's value in the pixel array becomes the index of this node's mean color in the color map.</p>
-
-<p>Empirical evidence suggests that the distances in color spaces such as YUV, or YIQ correspond to perceptual color differences more closely than do distances in RGB space. These color spaces may give better results when color reducing an image. Here the algorithm is as described except each pixel is a point in the alternate color space. For convenience, the color components are normalized to the range 0 to a maximum value, <var>Cmax</var>. The color reduction can then proceed as described.</p>
-
-<h2><a class="anchor" id="measure"></a>Measuring Color Reduction Error</h2>
-
-<p>Depending on the image, the color reduction error may be obvious or invisible. Images with high spatial frequencies (such as hair or grass) will show error much less than pictures with large smoothly shaded areas (such as faces). This because the high-frequency contour edges introduced by the color reduction process are masked by the high frequencies in the image.</p>
-
-<p>To measure the difference between the original and color reduced images (the total color reduction error), ImageMagick sums over all pixels in an image the distance squared in RGB space between each original pixel value and its color reduced value. ImageMagick prints several error measurements including the mean error per pixel, the normalized mean error, and the normalized maximum error.</p>
-
-<p>The normalized error measurement can be used to compare images. In general, the closer the mean error is to zero the more the quantized image resembles the source image. Ideally, the error should be perceptually-based, since the human eye is the final judge of quantization quality.</p>
-
-<p>These errors are measured and printed when the <a href="../command-line-options/index.html#colors">-colors</a> and <a href="../command-line-options/index.html#verbose">-verbose</a> options are specified on the <a href="../magick/index.html">magick</a> command line:</p>
+ Set Ep to minimum E in remaining nodes</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary">
+ This has the effect of minimizing any quantization error when merging two nodes together.
+ </p>
+ <p class="text-body-secondary">
+ When a node to be pruned has offspring, the pruning procedure invokes itself recursively in order to prune the tree from the leaves upward. The values of <var class="text-secondary">n2</var>, <var class="text-secondary">Sr</var>, <var class="text-secondary">Sg</var>, and <var class="text-secondary">Sb</var> in a node being pruned are always added to the corresponding data in that node's parent. This retains the pruned node's color characteristics for later averaging.
+ </p>
+ <p class="text-body-secondary">
+ For each node, <var class="text-secondary">n2</var> pixels exist for which that node represents the smallest volume in RGB space containing those pixel's colors. When <var class="text-secondary">n2</var> > <var class="text-secondary">0</var> the node will uniquely define a color in the output image. At the beginning of reduction, <var class="text-secondary">n2</var> = <var class="text-secondary">0</var> for all nodes except the leaves of the tree which represent colors present in the input image.
+ </p>
+ <p class="text-body-secondary">
+ The other pixel count, <var class="text-secondary">n1</var>, indicates the total number of colors within the cubic volume which the node represents. This includes <var class="text-secondary">n1</var> - <var class="text-secondary">n2</var> pixels whose colors should be defined by nodes at a lower level in the tree.
+ </p>
+ <h3 class="h5 fw-bold mt-4 mb-2">Assignment</h3>
+ <p class="text-body-secondary">
+ Assignment generates the output image from the pruned tree. The output image consists of two parts:
+ </p>
+ <ol class="text-body-secondary mb-3">
+ <li>A color map, which is an array of color descriptions (RGB triples) for each color present in the output image.</li>
+ <li>A pixel array, which represents each pixel as an index into the color map array.</li>
+ </ol>
+ <p class="text-body-secondary">
+ First, the assignment phase makes one pass over the pruned color description tree to establish the image's color map. For each node with <var class="text-secondary">n2</var> > <var class="text-secondary">0</var>, it divides <var class="text-secondary">Sr</var>, <var class="text-secondary">Sg</var>, and <var class="text-secondary">Sb</var> by <var class="text-secondary">n2</var>. This produces the mean color of all pixels that classify no lower than this node. Each of these colors becomes an entry in the color map.
+ </p>
+ <p class="text-body-secondary">
+ Finally, the assignment phase reclassifies each pixel in the pruned tree to identify the deepest node containing the pixel's color. The pixel's value in the pixel array becomes the index of this node's mean color in the color map.
+ </p>
+ <p class="text-body-secondary">
+ Empirical evidence suggests that the distances in color spaces such as YUV, or YIQ correspond to perceptual color differences more closely than do distances in RGB space. These color spaces may give better results when color reducing an image. Here the algorithm is as described except each pixel is a point in the alternate color space. For convenience, the color components are normalized to the range 0 to a maximum value, <var class="text-secondary">Cmax</var>. The color reduction can then proceed as described.
+ </p>
+</section>
+<!-- Section: Measuring Color Reduction Error -->
+<section id="measure" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Measuring Color Reduction Error</h2>
+ <a href="#measure" class="text-body-tertiary text-decoration-none"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary">
+ Depending on the image, the color reduction error may be obvious or invisible. Images with high spatial frequencies (such as hair or grass) will show error much less than pictures with large smoothly shaded areas (such as faces). This is because the high-frequency contour edges introduced by the color reduction process are masked by the high frequencies in the image.
+ </p>
+ <p class="text-body-secondary">
+ To measure the difference between the original and color reduced images (the total color reduction error), ImageMagick sums over all pixels in an image the distance squared in RGB space between each original pixel value and its color reduced value. ImageMagick prints several error measurements including the mean error per pixel, the normalized mean error, and the normalized maximum error.
+ </p>
+ <p class="text-body-secondary">
+ The normalized error measurement can be used to compare images. In general, the closer the mean error is to zero the more the quantized image resembles the source image. Ideally, the error should be perceptually-based, since the human eye is the final judge of quantization quality.
+ </p>
+ <p class="text-body-secondary mb-3">
+ These errors are measured and printed when the <a href="../command-line-options/index.html#colors" class="text-decoration-none fw-semibold">-colors</a> and <a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-semibold">-verbose</a> options are specified on the <a href="../magick/index.html" class="text-decoration-none">magick</a> command line:
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm">
+ <div class="table-responsive" style="max-height: 65vh;">
+ <table class="table table-hover table-striped align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 35%;">Metric</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><code class="fw-semibold text-primary">mean error per pixel</code></td>
+ <td class="font-sans">Is the mean error for any single pixel in the image.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold text-primary">normalized mean square error</code></td>
+ <td class="font-sans">Is the normalized mean square quantization error for any single pixel in the image. This distance measure is normalized to a range between 0 and 1. It is independent of the range of red, green, and blue values in the image.</td>
+ </tr>
+ <tr>
+ <td><code class="fw-semibold text-primary">normalized maximum square error</code></td>
+ <td class="font-sans">Is the largest normalized square quantization error for any single pixel in the image. This distance measure is normalized to a range between of red, green, and blue values in the image.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <tr>
- <td>mean error per pixel</td>
- <td>is the mean error for any single pixel in the image.</td>
- </tr>
- <tr>
- <td>normalized mean square error</td>
- <td>is the normalized mean square quantization error for any single pixel in the image. This distance measure is normalized to a range between 0 and 1. It is independent of the range of red, green, and blue values in the image.</td>
- </tr>
- <tr>
- <td>normalized maximum square error</td>
- <td>is the largest normalized square quantization error for any single pixel in the image. This distance measure is normalized to a range between of red, green, and blue values in the image.</td>
- </tr>
-</table></div>
+ </div>
-</div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
- </div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/resources/index.html b/www/resources/index.html
index d98148261..2273ed547 100644
--- a/www/resources/index.html
+++ b/www/resources/index.html
@@ -11,573 +11,834 @@
<meta name="description" content="Learn about ImageMagick resources including configuration files, modules, fonts, and environment variables. Understand how XML files map formats, colors, delegates, locales, logging, and MIME types to support image processing.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Resources">
<meta property="og:description" content="Learn about ImageMagick resources including configuration files, modules, fonts, and environment variables. Understand how XML files map formats, colors, delegates, locales, logging, and MIME types to support image processing.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Resources">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Resources",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/resources/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn about ImageMagick resources including configuration files, modules, fonts, and environment variables. Understand how XML files map formats, colors, delegates, locales, logging, and MIME types to support image processing.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/resources/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/resources/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Resources</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#configure">Configuration Files</a> • <a href="#modules">Modules</a> • <a href="#fonts">Fonts</a> • <a href="#environment">Environment Variables</a></p>
-
-<p class="lead">ImageMagick depends on a number of external resources including configuration files, loadable modules, fonts, and environment variables.</p>
-
-<h2><a class="anchor" id="configure"></a>Configuration Files</h2>
-
-<p>ImageMagick depends on a number of external configuration files detailed here:</p>
-
-<dl class="row">
-
-<dt class="col-md-4"><a href="https://imagemagick.org/source/colors.xml">colors.xml</a></dt>
- <dd class="col-md-8">Associate a color name with its red, green, blue, and alpha intensities.
-
- A number of command line options require a <a href="../color/index.html">color parameter</a>. It is often convenient to refer to a color by name (e.g. white) rather than by hex value (e.g. #fff). This file maps a color name to its equivalent red, green, blue, and alpha intensities (e.g. for white, red = 255, green = 255, blue = 255, and alpha = 0).
- </dd>
-
-<dt class="col-md-4"><a class="anchor" id="configure.xml"/><a href="https://imagemagick.org/source/configure.xml">configure.xml</a></dt>
- <dd class="col-md-8">Set ImageMagick build parameters and system-wide environment variables (e.g. MAGICK_TEMPORARY_PATH).
- As ImageMagick is built, a number of build parameters are saved to this configuration file. They include the version, release date, dependent delegate libraries, and quantum depth among others.
- </dd>
-
-<dt class="col-md-4"><a href="../source/delegates.xml">delegates.xml</a></dt>
- <dd class="col-md-8">Associate delegate programs with certain image formats.
-
- ImageMagick relies on a number of delegate programs to support certain image formats such as <a href="https://www.darktable.org/">darktable</a> to read raw camera formats or <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> to read Postscript images. Use this configuration file to map an input or output format to an external delegate program.
- </dd>
-
-<dt class="col-md-4"><a href="https://imagemagick.org/source/english.xml">english.xml</a></dt>
- <dd class="col-md-8">Associate message tags with English translations.</dd>
-
-<dt class="col-md-4"><a href="https://imagemagick.org/source/francais.xml">francais.xml</a></dt>
- <dd class="col-md-8">Associate message tags with French translations. </dd>
-
-<dt class="col-md-4"><a href="https://imagemagick.org/source/locale.xml">locale.xml</a></dt>
- <dd class="col-md-8">Associate message tags with a translation for your locale.
-
- ImageMagick has a number of informational, warning, and error messages that are represented as tags. Tags are short descriptions of a message such as
- <var>FileNotFound</var> or <var>MemoryAllocationFailed</var>. This configuration file lists locales that have a translation for each tag recognized by ImageMagick. Currently only English and French translations are available in the <code>english.xml</code> and <code>francais.xml</code> configuration files.
- </dd>
-
-<dt class="col-md-4"><a href="https://imagemagick.org/source/log.xml">log.xml</a></dt>
- <dd class="col-md-8">Configure logging parameters.
- ImageMagick is capable of spewing copious amounts of informational or debugging statements. Use this file to configure how the information will appear in a log message and where you want the logging messages posted.
- </dd>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Resources</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn about ImageMagick resources including configuration files, modules, fonts, and environment variables. Understand how XML files map formats, colors, delegates, locales, logging, and MIME types to support image processing.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<dt class="col-md-4"><a href="https://imagemagick.org/source/mime.xml">mime.xml</a></dt>
- <dd class="col-md-8">Associate an internet media type with a unique identifier.
- Many files and data streams have identifiers that uniquely identify a
-particular internet media type. For example, files in the "Corel Draw
-drawing" format (mime type="application/vnd.corel-draw") are associated with
-the filename pattern <code>*.cdr</code>, and also have an initial string of the
-characters "CDRXvrsn". ImageMagick uses combinations of this information,
-when available, to attempt to quickly determine the internet media type of a
-file or data stream.
-</dd>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Page Quick Nav Pills -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap justify-content-center gap-2 p-2 bg-body-tertiary rounded-3 border">
+ <a href="#configure" class="btn btn-sm btn-outline-secondary border-0">Configuration Files</a>
+ <a href="#modules" class="btn btn-sm btn-outline-secondary border-0">Modules</a>
+ <a href="#fonts" class="btn btn-sm btn-outline-secondary border-0">Fonts</a>
+ <a href="#environment" class="btn btn-sm btn-outline-secondary border-0">Environment Variables</a>
+ </div>
+ </div>
+ </div>
-<dt class="col-md-4"><a href="../source/policy-open.xml">policy.xml</a></dt>
- <dd class="col-md-8">Configure ImageMagick <a href="../security-policy/index.html">security policies</a>.
- By default any coder, delegate, filter, or file path is permitted. Use a policy to deny access to, for example, the MPEG video delegate, or permit reading images from a file system but deny writing to that same file system. Or use the resource policy to set resource limits. Policies are useful for multi-user servers that want to limit the overall impact ImageMagick has on the system. For example, to limit the maximum image size in memory to 100MP:
+ <!-- Lead Description -->
+ <div class="row mb-5">
+ <div class="col-lg-10 mx-auto text-center">
+ <p class="lead text-body-secondary">
+ ImageMagick depends on a number of external resources including configuration files, loadable modules, fonts, and environment variables.
+ </p>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="resource" name="area" value="100MP"/></code></pre>
+ <!-- Configuration Files Section -->
+ <section id="configure" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-file-earmark-code fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Configuration Files</h2>
+ </div>
+
+ <p class="text-body-secondary mb-4">
+ ImageMagick depends on a number of external configuration files detailed here:
+ </p>
+
+ <div class="row g-4 mb-4">
+ <!-- colors.xml -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary"><a href="https://imagemagick.org/source/colors.xml" class="text-decoration-none">colors.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Associate a color name with its red, green, blue, and alpha intensities. Many command line options require a <a href="../color/index.html">color parameter</a>. It is often convenient to refer to a color by name (e.g. white) rather than by hex value (e.g. #fff).
+ </p>
+ </div>
+ </div>
+ </div>
-Any image larger than this area limit is cached to disk rather than memory.
+ <!-- configure.xml -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary"><a href="https://imagemagick.org/source/configure.xml" class="text-decoration-none" id="configure.xml">configure.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Set ImageMagick build parameters and system-wide environment variables (e.g. <code>MAGICK_TEMPORARY_PATH</code>), including version, release date, delegate libraries, and quantum depth.
+ </p>
+ </div>
+ </div>
+ </div>
-Use <code>width</code> to limit the maximum width of an image in pixels. Exceed this limit and an exception is thrown and processing stops.
+ <!-- delegates.xml -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary"><a href="https://imagemagick.org/source/delegates.xml" class="text-decoration-none">delegates.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Associate delegate programs with certain image formats, such as <a href="https://www.darktable.org/" target="_blank" rel="noopener">darktable</a> for raw camera formats or <a href="http://www.cs.wisc.edu/~ghost/" target="_blank" rel="noopener">Ghostscript</a> for Postscript images.
+ </p>
+ </div>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="resource" name="width" value="8KP"/></code></pre>
+ <!-- locale files -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary">Locale Files (<a href="https://imagemagick.org/source/english.xml">english.xml</a>, <a href="https://imagemagick.org/source/francais.xml">francais.xml</a>, <a href="https://imagemagick.org/source/locale.xml">locale.xml</a>)</h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Associate message tags (such as <var>FileNotFound</var> or <var>MemoryAllocationFailed</var>) with local translations. Currently available in English and French.
+ </p>
+ </div>
+ </div>
+ </div>
-To limit the elapsed time of any ImageMagick command to 5 minutes, use this policy:
+ <!-- log.xml -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary"><a href="https://imagemagick.org/source/log.xml" class="text-decoration-none">log.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Configure logging parameters. Control how informational or debugging statements appear and where they are posted.
+ </p>
+ </div>
+ </div>
+ </div>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="resource" name="time" value="300"/></code></pre>
-For convenience, define arguments for the memory, map, and disk resources with SI prefixes (e.g. 100MB). In addition, resource policies are maximums for each instance of ImageMagick (e.g. policy memory limit 1GB, the <code>-limit 2GB</code> option exceeds policy maximum so memory limit is 1GB). </dd>
+ <!-- mime.xml -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary"><a href="https://imagemagick.org/source/mime.xml" class="text-decoration-none">mime.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Associate internet media types with unique identifiers and filename patterns (e.g. <code>*.cdr</code>) to quickly determine file formats or data streams.
+ </p>
+ </div>
+ </div>
+ </div>
-<dt class="col-md-4"><a href="https://imagemagick.org/source/quantization-table.xml">quantization-table.xml</a></dt>
- <dd class="col-md-8">Custom JPEG quantization tables. Activate with <code>-define:q-table=quantization-table.xml</code>.</dd>
+ <!-- policy.xml -->
+ <div class="col-12">
+ <div class="card im-card p-4">
+ <h5 class="card-title fw-bold font-mono text-primary"><a href="../source/policy-open.xml" class="text-decoration-none">policy.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Configure ImageMagick <a href="../security-policy/index.html">security policies</a> to restrict coders, delegates, filters, or file paths, and set resource limits for multi-user servers.
+ </p>
+ <div class="mt-3">
+ <p class="small fw-semibold text-body mb-2">Example Resource Limit Policies:</p>
+ <div class="row g-3">
+ <div class="col-md-4">
+ <div class="p-2 bg-body-tertiary rounded border font-mono small">
+ <policy domain="resource" name="area" value="100MP"/>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="p-2 bg-body-tertiary rounded border font-mono small">
+ <policy domain="resource" name="width" value="8KP"/>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="p-2 bg-body-tertiary rounded border font-mono small">
+ <policy domain="resource" name="time" value="300"/>
+ </div>
+ </div>
+ </div>
+ <p class="small text-body-secondary mt-2 mb-0">
+ Memory, map, and disk arguments support SI prefixes (e.g. <code>100MB</code>). Policies represent maximum limits per ImageMagick instance.
+ </p>
+ </div>
+ </div>
+ </div>
-<dt class="col-md-4"><a href="https://imagemagick.org/source/thresholds.xml">thresholds.xml</a></dt>
- <dd class="col-md-8">Set threshold maps for ordered posterized dither.</dd>
+ <!-- other xml files -->
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary fs-6"><a href="https://imagemagick.org/source/quantization-table.xml" class="text-decoration-none">quantization-table.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Custom JPEG quantization tables. Activate with <code>-define:q-table=quantization-table.xml</code>.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary fs-6"><a href="https://imagemagick.org/source/thresholds.xml" class="text-decoration-none">thresholds.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Set threshold maps for ordered posterized dither.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-4">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary fs-6"><a href="https://imagemagick.org/source/type.xml" class="text-decoration-none" id="type.xml">type.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Configure font name, family, foundry, style, format, metrics, and glyphs.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary fs-6"><a href="https://imagemagick.org/source/type-ghostscript.xml" class="text-decoration-none">type-ghostscript.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Configure <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> fonts accessible within ImageMagick.
+ </p>
+ </div>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <div class="card-body">
+ <h5 class="card-title fw-bold font-mono text-primary fs-6"><a href="https://imagemagick.org/source/type-windows.xml" class="text-decoration-none">type-windows.xml</a></h5>
+ <p class="card-text small text-body-secondary mt-2">
+ Associate names with Windows font glyphs.
+ </p>
+ </div>
+ </div>
+ </div>
+ </div>
-<dt class="col-md-4"><a class="anchor" id="type.xml"></a><a href="https://imagemagick.org/source/type.xml">type.xml</a></dt>
- <dd class="col-md-8">Configure fonts.
- Define the font name, family, foundry, style, format, metrics, and glyphs for any font you want to use within ImageMagick.
- </dd>
+ <!-- Search Paths Card -->
+ <div class="card im-card p-4 bg-body-tertiary">
+ <h5 class="fw-bold mb-3">Configuration File Search Order</h5>
+ <p class="small text-body-secondary mb-3">
+ Under Linux and Unix operating systems, ImageMagick searches directories in this order:
+ </p>
+ <div class="p-3 bg-body rounded border font-mono small mb-3">
+ $MAGICK_CONFIGURE_PATH<br>
+ $PREFIX/etc/ImageMagick-7<br>
+ $PREFIX/share/ImageMagick-7<br>
+ $XDG_CACHE_HOME/ImageMagick<br>
+ $HOME/.config/ImageMagick<br>
+ <<var>client path</var>>/etc/ImageMagick
+ </div>
+ <p class="small text-body-secondary mb-3">
+ For Linux pre-compiled uninstalled binary distributions:
+ </p>
+ <div class="p-3 bg-body rounded border font-mono small mb-3">
+ $MAGICK_CONFIGURE_PATH<br>
+ $MAGICK_HOME/etc/ImageMagick-7<br>
+ $MAGICK_HOME/share/ImageMagick-7<br>
+ $PREFIX/share/ImageMagick-7<br>
+ $XDG_CACHE_HOME/ImageMagick<br>
+ $HOME/.config/ImageMagick/<br>
+ <<var>client path</var>>/etc/ImageMagick<br>
+ <<var>current directory</var>>
+ </div>
+ <p class="small text-body-secondary mb-3">
+ Under Windows:
+ </p>
+ <div class="p-3 bg-body rounded border font-mono small mb-3">
+ $MAGICK_CONFIGURE_PATH<br>
+ <<var>windows registry</var>><br>
+ $PREFIX/config<br>
+ $USERPROFILE/.config/ImageMagick<br>
+ <<var>client path</var>>
+ </div>
+ <p class="small text-body-secondary mb-0">
+ If a configuration file cannot be found, ImageMagick relies on built-in default values.
+ </p>
+ </div>
+ </section>
-<dt class="col-md-4"><a href="https://imagemagick.org/source/type-ghostscript.xml">type-ghostscript.xml</a></dt>
- <dd class="col-md-8">Configure <a href="http://www.cs.wisc.edu/~ghost/">Ghostscript</a> fonts.
- The Ghostscript package includes a number of <a href="https://sourceforge.net/projects/gs-fonts/">fonts</a> that can be accessed with ImageMagick.
- </dd>
+ <!-- Modules Section -->
+ <section id="modules" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-boxes fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Modules</h2>
+ </div>
-<dt class="col-md-4"><a href="https://imagemagick.org/source/type-windows.xml">type-windows.xml</a></dt>
- <dd class="col-md-8">Associate names with Windows font glyphs.</dd>
-</dl>
+ <div class="row g-4">
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3">Coders</h5>
+ <p class="small text-body-secondary mb-3">
+ An image coder (encoder/decoder) manages a specific format (PNG, GIF, JPEG). Search order:
+ </p>
+ <div class="p-3 bg-body-tertiary rounded border font-mono small">
+ $MAGICK_HOME/lib/ImageMagick-7.1.2/modules-Q16/coders<br>
+ <<var>client path</var>>/../lib/ImageMagick-7.1.2/modules-Q16/coders<br>
+ $MAGICK_HOME/share/ImageMagick-7.1.2/modules-Q16/coders<br>
+ $XDG_CACHE_HOME/ImageMagick<br>
+ $HOME/.config/ImageMagick<br>
+ <<var>client path</var>>/lib/ImageMagick-7.1.2/modules-Q16/coders
+ </div>
+ </div>
+ </div>
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4">
+ <h5 class="fw-bold text-primary mb-3">Filters</h5>
+ <p class="small text-body-secondary mb-3">
+ Custom image processing algorithm modules. Search order:
+ </p>
+ <div class="p-3 bg-body-tertiary rounded border font-mono small">
+ $MAGICK_HOME/lib/ImageMagick-7.1.2/modules-Q16/filters<br>
+ <<var>client path</var>>/../lib/ImageMagick-7.1.2/modules-Q16/filters<br>
+ $MAGICK_HOME/share/ImageMagick-7.1.2/modules-Q16/filters<br>
+ $XDG_CACHE_HOME/ImageMagick<br>
+ $HOME/.config/ImageMagick<br>
+ <<var>client path</var>>/lib/ImageMagick-7.1.2/modules-Q16/filters
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
-<p>Under Linux and Linux-like operating systems, ImageMagick searches for each of the configuration files listed above by looking in the locations given below, in order, and loads them if found:</p>
+ <!-- Fonts Section -->
+ <section id="fonts" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-fonts fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Fonts</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ ImageMagick loads raw TrueType and Postscript font files, searching for <a href="#type.xml">type.xml</a> in this order:
+ </p>
+ <div class="p-3 bg-body-tertiary rounded border font-mono small">
+ $MAGICK_CONFIGURE_PATH<br>
+ $MAGICK_HOME/etc/ImageMagick-7.1.2<br>
+ $MAGICK_HOME/share/ImageMagick-7.1.2<br>
+ $XDG_CACHE_HOME/ImageMagick<br>
+ $HOME/.config/ImageMagick<br>
+ <<var>client path</var>>/etc/ImageMagick<br>
+ $MAGICK_FONT_PATH
+ </div>
+ </div>
+ </section>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_CONFIGURE_PATH
-$PREFIX/etc/ImageMagick-7
-$PREFIX/share/ImageMagick-7
-$XDG_CACHE_HOME/ImageMagick
-$HOME/.config/ImageMagick
-<<var>client path</var>>/etc/ImageMagick</code></pre>
+ <!-- Environment Variables Section -->
+ <section id="environment" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-terminal-dash fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Environment Variables</h2>
+ </div>
-<p>The environmental variable $PREFIX is the default install path (e.g. <code>/usr/local</code>). The <var>client path</var> is the execution path of your ImageMagick client (e.g. <code>/usr/local</code>) .</p>
-
-<p>For the Linux or Linux pre-compiled uninstalled binary distributions, the configuration load order is:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_CONFIGURE_PATH
-$MAGICK_HOME/etc/ImageMagick-7
-$MAGICK_HOME/share/ImageMagick-7
-$PREFIX/share/ImageMagick-7
-$XDG_CACHE_HOME/ImageMagick
-$HOME/.config/ImageMagick/
-<<var>client path</var>>/etc/ImageMagick
-<<var>current directory</var>></code></pre>
-
-<p>Under Windows, ImageMagick searches for these configuration files in the following order, and loads them if found:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_CONFIGURE_PATH
-<<var>windows registry</var>>
-$PREFIX/config
-$USERPROFILE/.config/ImageMagick
-<<var>client path</var>></code></pre>
-
-<p>Above, $PREFIX is the default install path, typically <code>c:\\Program Files\\ImageMagick-7.1.2</code>.</p>
-
-<p>For an uninstalled Windows installation, the configuration load order is:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_CONFIGURE_PATH
-$MAGICK_HOME
-$USERPROFILE/.config/ImageMagick
-<var>client path</var>
-<<var>current directory</var>></code></pre>
-
-<p>If a configuration file cannot not be found, ImageMagick relies on built-in default values.</p>
-
-<h2><a class="anchor" id="modules"></a>Modules</h2>
-
-<h4>Coders</h4>
-<p>An image coder (i.e. encoder / decoder) is responsible for registering, optionally classifying, optionally reading, optionally writing, and unregistering one image format (e.g. PNG, GIF, JPEG, etc.). ImageMagick searches for coders in the following order and it uses the first match found:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_HOME/lib/ImageMagick-7.1.2/modules-Q16/coders
-<<var>client path</var>>/../lib/ImageMagick-7.1.2/modules-Q16/coders
-$MAGICK_HOME/lib/ImageMagick-7.1.2/modules-Q16/coders
-$MAGICK_HOME/share/ImageMagick-7.1.2/modules-Q16/coders
-$XDG_CACHE_HOME/ImageMagick
-$HOME/.config/ImageMagick
-<<var>client path</var>>/lib/ImageMagick-7.1.2/modules-Q16/coders</code></pre>
-
-<h4>Filters</h4>
-<p>ImageMagick provides a convenient mechanism for adding your own custom image processing algorithms. ImageMagick searches for filters in the following order and it uses the first match found:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_HOME/lib/ImageMagick-7.1.2/modules-Q16/filters
-<<var>client path</var>>/../lib/ImageMagick-7.1.2/modules-Q16/filters
-$MAGICK_HOME/lib/ImageMagick-7.1.2/modules-Q16/filters
-$MAGICK_HOME/share/ImageMagick-7.1.2/modules-Q16/filters
-$XDG_CACHE_HOME/ImageMagick
-$HOME/.config/ImageMagick
-<<var>client path</var>>/lib/ImageMagick-7.1.2/modules-Q16/filters</code></pre>
-
-<h2><a class="anchor" id="fonts"></a>Fonts</h2>
-
-<p>ImageMagick is able to load raw TrueType and Postscript font files. It searches for the font configuration file, <a href="#type.xml">type.xml</a>, in the following order, and loads them if found:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>$MAGICK_CONFIGURE_PATH
-$MAGICK_HOME/etc/ImageMagick/-7.1.2
-
-$MAGICK_HOME/share/ImageMagick-7.1.2
-
-$XDG_CACHE_HOME/ImageMagick
-$HOME/.config/ImageMagick
-<<var>client path</var>>/etc/ImageMagick
-$MAGICK_FONT_PATH</code></pre>
-
-<h2><a class="anchor" id="environment"></a>Environment Variables</h2>
-
-<p>Environment variables recognized by ImageMagick include:</p>
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td>HOME</td>
- <td>Set path to search for configuration files in <code>$HOME/.config/ImageMagick</code> if the directory exists.</td>
- </tr>
- <tr>
- <td>LD_LIBRARY_PATH</td>
- <td>Set path to the ImageMagick shareable libraries and other dependent libraries.</td>
- </tr>
- <tr>
- <td>MAGICK_AREA_LIMIT</td>
- <td>Set the maximum <var>width * height</var> of an image that can reside in the pixel cache memory. Images that exceed the area limit are cached to disk (see <a href="#disk-limit">MAGICK_DISK_LIMIT</a>) and optionally memory-mapped.</td>
- </tr>
- <tr>
- <td>MAGICK_FILTER_MODULE_PATH</td>
- <td>Set search path to use when searching for filter process modules (invoked via <a href="../command-line-options/index.html#process">-process</a>). This path permits the user to extend ImageMagick's image processing functionality by adding loadable modules to a preferred location rather than copying them into the ImageMagick installation directory. The formatting of the search path is similar to operating system search paths (i.e. colon delimited for Linux, and semi-colon delimited for Microsoft Windows). This user specified search path is searched before trying the <a href="#modules">default search path</a>.</td>
- </tr>
- <tr>
- <td>MAGICK_CODER_MODULE_PATH</td>
- <td>Set path where ImageMagick can locate its coder modules. This path permits the user to arbitrarily extend the image formats supported by ImageMagick by adding loadable coder modules from an preferred location rather than copying them into the ImageMagick installation directory. The formatting of the search path is similar to operating system search paths (i.e. colon delimited for Linux, and semi-colon delimited for Microsoft Windows). This user specified search path is searched before trying the <a href="#modules">default search path</a>.</td>
- </tr>
- <tr>
- <td>MAGICK_CONFIGURE_PATH</td>
- <td>Set path where ImageMagick can locate its configuration files. Use this search path to search for configuration (.xml) files. The formatting of the search path is similar to operating system search paths (i.e. colon delimited for Linux, and semi-colon delimited for Microsoft Windows). This user specified search path is searched before trying the <a href="#configure">default search path</a>.</td>
- </tr>
- <tr>
- <td>MAGICK_DATE_PRECISION</td>
- <td>Set the maximum number of characters printed for any timestamp.</td>
- </tr>
- <tr>
- <td>MAGICK_DEBUG</td>
- <td>Set debug options. See <a href="../command-line-options/index.html#debug">-debug</a> for a description of debugging options.</td>
- </tr>
- <tr>
- <td><a class="anchor" id="disk-limit"></a>MAGICK_DISK_LIMIT</td>
- <td>Set maximum amount of disk space in bytes permitted for use by the pixel cache. When this limit is exceeded, the pixel cache is not be created and an error message is returned.</td>
- </tr>
- <tr>
- <td>MAGICK_ERRORMODE</td>
- <td>Set the process error mode (Windows only). A typical use might be a value of 1 to prevent error mode dialogs from displaying a message box and hanging the application.</td>
- </tr>
- <tr>
- <td>MAGICK_FILE_LIMIT</td>
- <td>Set maximum number of open pixel cache files. When this limit is exceeded, any subsequent pixels cached to disk are closed and reopened on demand. This behavior permits a large number of images to be accessed simultaneously on disk, but with a speed penalty due to repeated open/close calls.</td>
- </tr>
- <tr>
- <td>MAGICK_FONT_PATH</td>
- <td>Set path ImageMagick searches for TrueType and Postscript Type1 font files. This path is only consulted if a particular font file is not found in the current directory.</td>
- </tr>
- <tr>
- <td>MAGICK_HEIGHT_LIMIT</td>
- <td>Set the maximum <var>height</var> of an image.</td>
- </tr>
- <tr>
- <td>MAGICK_HOME</td>
- <td>Set the path at the top of ImageMagick installation directory. This path is consulted by <var>uninstalled</var> builds of ImageMagick which do not have their location hard-coded or set by an installer.</td>
- </tr>
- <tr>
- <td>MAGICK_LIST_LENGTH_LIMIT</td>
- <td>Set the maximum length of an image sequence.</td>
- </tr>
- <tr>
- <td><a class="anchor" id="map-limit"></a>MAGICK_MAP_LIMIT</td>
- <td>Set maximum amount of memory map in bytes to allocate for the pixel cache. When this limit is exceeded, the image pixels are cached to disk (see MAGICK_DISK_LIMIT).</td>
- </tr>
- <tr>
- <td>MAGICK_MEMORY_LIMIT</td>
- <td>Set maximum amount of memory in bytes to allocate for the pixel cache from the heap. When this limit is exceeded, the image pixels are cached to memory-mapped disk (see <a href="#map-limit">MAGICK_MAP_LIMIT</a>).</td>
- </tr>
- <tr>
- <td>MAGICK_OCL_DEVICE</td>
- <td>Set to <code>off</code> to disable hardware acceleration of certain accelerated algorithms (e.g. blur, convolve, etc.).</td>
- </tr>
- <tr>
- <td>MAGICK_PRECISION</td>
- <td>Set the maximum number of significant digits to be printed.</td>
- </tr>
- <tr>
- <td>MAGICK_SHRED_PASSES</td>
- <td>If you want to keep the temporary files ImageMagick creates private, overwrite them with zeros or random data before they are removed. On the first pass, the file is zeroed. For subsequent passes, random data is written.</td>
- </tr>
- <tr>
- <td>MAGICK_SYNCHRONIZE</td>
- <td>Set to "true" to ensure all image data is fully flushed and synchronized to disk. There is a performance penalty, however, the benefits include ensuring a valid image file in the event of a system crash and early reporting if there is not enough disk space for the image pixel cache.</td>
- </tr>
- <tr>
- <td>MAGICK_TEMPORARY_PATH</td>
- <td>Set path to store temporary files.</td>
- </tr>
- <tr>
- <td>MAGICK_THREAD_LIMIT</td>
- <td>Set maximum parallel threads. Many ImageMagick algorithms run in parallel on multi-processor systems. Use this environment variable to set the maximum number of threads that are permitted to run in parallel.</td>
- </tr>
- <tr>
- <td>MAGICK_THROTTLE_LIMIT</td>
- <td>Periodically yield the CPU for at least the time specified in milliseconds.</td>
- </tr>
- <tr>
- <td>MAGICK_TIME_LIMIT</td>
- <td>Set maximum time in seconds. When this limit is exceeded, an exception is thrown and processing stops.</td>
- </tr>
- <tr>
- <td>MAGICK_WIDTH_LIMIT</td>
- <td>Set the maximum <var>width</var> of an image.</td>
- </tr>
- <tr>
- <td>SOURCE_DATE_EPOCH</td>
- <td>A UNIX timestamp, defined as the number of seconds, excluding leap seconds, since <code>01 Jan 1970 00:00:00 UTC</code>. Special-purpose setting for pipeline builds. This setting disables the time-to-live settings.</td>
- </tr>
-</table></div>
-
-<p>Define arguments for the <code>MAGICK_MEMORY_LIMIT</code>, <code>MAGICK_DISK_LIMIT</code>, and <code>MAGICK_MEMORY_LIMIT</code> environment variables with SI prefixes (e.g. <code>100MB</code>). <code>MAGICK_WIDTH_LIMIT</code>, <code>MAGICK_HEIGHT_LIMIT</code> and <code>MAGICK_AREA_LIMIT</code> accepts pixel suffixes such as MP for mega-pixels (e.g. 100MP). Note, you can restrict limits relative to any <a href="../security-policy/index.html">security policies</a>, but you cannot relax them.</p>
+ <p class="text-body-secondary mb-4">
+ Environment variables recognized by ImageMagick include:
+ </p>
+
+ <div class="card im-card overflow-hidden">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col" style="width: 30%;">Variable</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">HOME</td>
+ <td class="small text-body-secondary">Set path to search for configuration files in <code>$HOME/.config/ImageMagick</code> if the directory exists.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">LD_LIBRARY_PATH</td>
+ <td class="small text-body-secondary">Set path to the ImageMagick shareable libraries and other dependent libraries.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_AREA_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum <var>width * height</var> of an image residing in pixel cache memory. Exceeding limits caches to disk.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_FILTER_MODULE_PATH</td>
+ <td class="small text-body-secondary">Set search path when searching for filter process modules invoked via <a href="../command-line-options/index.html#process">-process</a>.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_CODER_MODULE_PATH</td>
+ <td class="small text-body-secondary">Set path where ImageMagick locates coder modules to extend supported image formats.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_CONFIGURE_PATH</td>
+ <td class="small text-body-secondary">Set path where ImageMagick locates configuration (.xml) files. Searched before defaults.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_DATE_PRECISION</td>
+ <td class="small text-body-secondary">Set maximum number of characters printed for any timestamp.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_DEBUG</td>
+ <td class="small text-body-secondary">Set debug options. See <a href="../command-line-options/index.html#debug">-debug</a> for a description.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary" id="disk-limit">MAGICK_DISK_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum amount of disk space in bytes permitted for use by the pixel cache.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_ERRORMODE</td>
+ <td class="small text-body-secondary">Set process error mode (Windows only).</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_FILE_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum number of open pixel cache files.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_FONT_PATH</td>
+ <td class="small text-body-secondary">Set path searched for TrueType and Postscript Type1 font files.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_HEIGHT_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum <var>height</var> of an image.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_HOME</td>
+ <td class="small text-body-secondary">Set top-level path of the ImageMagick installation directory for uninstalled builds.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_LIST_LENGTH_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum length of an image sequence.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary" id="map-limit">MAGICK_MAP_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum amount of memory map in bytes to allocate for the pixel cache.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_MEMORY_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum amount of heap memory in bytes to allocate for the pixel cache.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_OCL_DEVICE</td>
+ <td class="small text-body-secondary">Set to <code>off</code> to disable hardware acceleration of accelerated algorithms.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_PRECISION</td>
+ <td class="small text-body-secondary">Set maximum number of significant digits to be printed.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_SHRED_PASSES</td>
+ <td class="small text-body-secondary">Overwrite temporary files with zeros or random data before removal.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_SYNCHRONIZE</td>
+ <td class="small text-body-secondary">Set to "true" to ensure all image data is fully flushed and synchronized to disk.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_TEMPORARY_PATH</td>
+ <td class="small text-body-secondary">Set path to store temporary files.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_THREAD_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum parallel threads for multi-processor systems.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_THROTTLE_LIMIT</td>
+ <td class="small text-body-secondary">Periodically yield the CPU for at least the time specified in milliseconds.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_TIME_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum time in seconds before throwing an exception.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">MAGICK_WIDTH_LIMIT</td>
+ <td class="small text-body-secondary">Set maximum <var>width</var> of an image.</td>
+ </tr>
+ <tr>
+ <td class="font-mono fw-semibold text-primary">SOURCE_DATE_EPOCH</td>
+ <td class="small text-body-secondary">UNIX timestamp defining seconds since <code>01 Jan 1970 00:00:00 UTC</code> for pipeline builds.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ <p class="small text-body-secondary mt-3">
+ Define arguments for <code>MAGICK_MEMORY_LIMIT</code>, <code>MAGICK_DISK_LIMIT</code>, and <code>MAGICK_MAP_LIMIT</code> with SI prefixes (e.g. <code>100MB</code>). <code>MAGICK_WIDTH_LIMIT</code>, <code>MAGICK_HEIGHT_LIMIT</code>, and <code>MAGICK_AREA_LIMIT</code> accept pixel suffixes such as MP for mega-pixels (e.g. <code>100MP</code>). Limits can restrict security policies, but cannot relax them.
+ </p>
+ </section>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/search/index4840.html b/www/search/index4840.html
index 1d6fa6ca8..921d1a5db 100644
--- a/www/search/index4840.html
+++ b/www/search/index4840.html
@@ -4,7 +4,7 @@
<html lang="en" data-bs-theme="auto">
-<!-- Mirrored from imagemagick.org/search/?q=ImageMagick&sa= by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 26 Sep 2026 14:34:53 GMT -->
+<!-- Mirrored from https://imagemagick.org/search/?q=ImageMagick&sa= by HTTrack Website Copier/3.x [XR&CO], Sun, 25 Oct 2026 15:10:11 GMT -->
<!-- Added by HTTrack --><meta http-equiv="content-type" content="text/html;charset=utf-8" /><!-- /Added by HTTrack -->
<head>
<meta charset="utf-8">
@@ -13,282 +13,400 @@
<meta name="description" content="">
<link rel="canonical" href="https://imagemagick.org/search/">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://cse.google.com/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Search">
<meta property="og:description" content="">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="https://imagemagick.org/search/">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Search">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Search",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/search/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://cse.google.com/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index-2.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/search/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/search/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Search</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Search</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5"></p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
</div>
- </header>
+ </div>
+ </header>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
<div>
<p class="lead"> </p>
<div class="gcse-searchresults-only"></div>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index-2.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
-<!-- Mirrored from imagemagick.org/search/?q=ImageMagick&sa= by HTTrack Website Copier/3.x [XR&CO'2014], Sat, 26 Sep 2026 14:34:53 GMT -->
+<!-- Mirrored from https://imagemagick.org/search/?q=ImageMagick&sa= by HTTrack Website Copier/3.x [XR&CO], Sun, 25 Oct 2026 15:10:11 GMT -->
</html>
diff --git a/www/security-policy/index.html b/www/security-policy/index.html
index 6c63bdcef..6a6498c5f 100644
--- a/www/security-policy/index.html
+++ b/www/security-policy/index.html
@@ -8,607 +8,583 @@
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, viewport-fit=cover">
<title>ImageMagick | Security Policy</title>
- <meta name="description" content="Learn how to configure and enforce ImageMagick’s security policy to balance functionality with protection. Explore policy options, open, limited, secure, and websafe—plus resource limits, coder restrictions, and best practices for safeguarding deployments in containers, servers, and public websites.">
+ <meta name="description" content="Learn how to configure and enforce ImageMagick’s security policy to balance functionality with protection. Explore open, limited, secure, and websafe options, along with resource limits, coder restrictions, and best practices for securing containers, servers, and web applications.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Security Policy">
- <meta property="og:description" content="Learn how to configure and enforce ImageMagick’s security policy to balance functionality with protection. Explore policy options, open, limited, secure, and websafe—plus resource limits, coder restrictions, and best practices for safeguarding deployments in containers, servers, and public websites.">
+ <meta property="og:description" content="Learn how to configure and enforce ImageMagick’s security policy to balance functionality with protection. Explore open, limited, secure, and websafe options, along with resource limits, coder restrictions, and best practices for securing containers, servers, and web applications.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Security Policy">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Security Policy",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/security-policy/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Learn how to configure and enforce ImageMagick’s security policy to balance functionality with protection. Explore open, limited, secure, and websafe options, along with resource limits, coder restrictions, and best practices for securing containers, servers, and web applications.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link active" href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/security-policy/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/security-policy/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Security Policy</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#policy">Security Policy </a> • <a href="#example">Example Security Policy</a> • <a href="#synchronize">Pixel Cache Synchronize Policy</a> • <a href="#zero-configuration">Zero Configuration Security Policy</a> • <a href="#other">Other Security Considerations</a></p>
-
-<div class="alert alert-success" role="alert">
- <h4 class="alert-heading">ImageMagick Security Policy</h4>
-<p>Establish a security policy suitable for your local environment before utilizing ImageMagick. ImageMagick’s security model is “everything allowed unless denied,” and the last matching policy wins. Be careful when adding new rules: any later policy can override earlier denies or allows. Place broad deny rules first, followed by specific exceptions, and review ordering to avoid accidental authorization.</p>
-</div>
-
-
-<p class="lead">ImageMagick is intentionally open by default, and that design choice reflects its primary use in controlled environments such as Docker containers or other sandboxed deployments.</p>
-<p>Security always involves balancing protection against potential vulnerabilities with the practical need to get work done. In ImageMagick, the security policy is the mechanism that lets you tune that balance. It acts as the control point between strict lockdown and operational convenience, allowing you to decide which features, coders, and operations are permitted in your environment.</p>
-<p>A well‑designed policy can:</p>
-<ul>
-<li>Limit or disable high‑risk coders and operations.</li>
-<li>Constrain resource usage to prevent abuse.</li>
-<li>Define exactly what types of input ImageMagick is allowed to process.</li>
-<li>Adapt the system to your threat model rather than forcing a one‑size‑fits‑all configuration.</li>
-</ul>
-<p>This flexibility is intentional. ImageMagick ships in an open state so it can be embedded into controlled environments, containers, pipelines, or isolated servers, where administrators can then tighten the policy to match their needs. <strong class="text-warning">The more untrusted input you expect to handle, the more restrictive your policy should be</strong>.</p>
-
-<p>ImageMagick generally evaluates security policies using a "last matching policy wins" model. For path policies, ImageMagick additionally evaluates canonical filesystem paths (resolved paths) and enforces canonical denies to prevent policy bypass through alternate path representations, symlinks, or path traversal tricks. As a result, path authorization may be more restrictive than a simple last-match-wins evaluation.<p>
-<p>Path policies are evaluated against both the supplied path and its canonical form. Canonical path denies cannot be bypassed by later rules that only match alternative lexical representations of the same filesystem location.</p>
-
-<h2><a class="anchor" id="environment"></a>Selecting the Right Security Policy for Your Environment</h2>
-
-<p>To ensure optimal security, you can restrict ImageMagick to only reading or writing web-safe image formats like GIF, JPEG, and PNG. Alternatively, you can customize the security policy to fit the needs of your local environment or organizational policies. This policy can include details such as memory usage limits, allowed paths for reading and writing, limits on the number of images in a sequence, maximum workflow runtime, allowed disk space for image pixels, a secret passphrase for remote connections, and which coders are permitted or denied. By customizing the security policy, you can help secure your environment and ensure that ImageMagick is a responsible member of your local system, such as by preventing overloading with large images.</p>
-
-<p>It is important to set limits on ImageMagick's resource usage to prevent potentially harmful situations. For example, if you accidentally download an image from the internet that has been crafted to generate a very large image (e.g., 20000 by 20000 pixels), ImageMagick may try to allocate the necessary resources (such as memory and disk space) and your system may deny the request or cause the program to exit. Alternatively, your computer may become temporarily slow or unresponsive, or ImageMagick may be forced to abort. To avoid such situations, you can set limits in the <a href="../source/policy-open.xml">policy.xml</a> configuration file.</p>
-
-<p>Keep in mind that what is considered reasonable for one environment may not be suitable for another. For example, you may have ImageMagick sandboxed in a secure environment, while someone else may use it to process images on a publicly accessible website. Or, ImageMagick may be running on a host with a lot of memory, while another instance is running on a device with limited resources. In the case of the host with large memory, it may make sense to allow large image processing, but not on the device with limited resources. If you are using ImageMagick on a public website, you may want to increase security by disabling certain coders such as MVG or HTTPS.</p>
-
-
-<p>To help you get started, as of version 7.1.1-16, ImageMagick provides security polices that you can select when installing ImageMagick. Choose from:</p>
-
-<ul>
-<dt><a href="../source/policy-open.xml">open</a></dt>
-<dd>The default policy for ImageMagick installations is the open security policy. This policy is designed for usage in secure settings like those protected by firewalls or within Docker containers. Within this framework, ImageMagick enjoys broad access to resources and functionalities. This policy provides convenient and adaptable options for image manipulation. However, it's important to note that it might present security vulnerabilities in less regulated conditions. Thus, organizations should thoroughly assess the appropriateness of the open policy according to their particular use case and security prerequisites. </dd>
-<dt><a href="../source/policy-limited.xml">limited</a></dt>
-<dd>The primary objective of the limited security policy is to find a middle ground between convenience and security. This policy involves the deactivation of potentially hazardous functionalities, like specific coders such as SVG or HTTP. Furthermore, it establishes several constraints on the utilization of resources like memory, storage, and processing duration, all of which are adjustable. This policy proves advantageous in situations where there's a need to mitigate the potential threat of handling possibly malicious or demanding images, all while retaining essential capabilities for prevalent image formats.</dt>
-<dt><a href="../source/policy-secure.xml">secure</a></dt>
-<dd>This stringent security policy prioritizes the implementation of rigorous controls and restricted resource utilization to establish a profoundly secure setting while employing ImageMagick. It deactivates conceivably hazardous functionalities, including specific coders like SVG or HTTP. The policy promotes the tailoring of security measures to harmonize with the requirements of the local environment and the guidelines of the organization. This protocol encompasses explicit particulars like limitations on memory consumption, sanctioned pathways for reading and writing, confines on image sequences, the utmost permissible duration of workflows, allocation of disk space intended for image data, and even an undisclosed passphrase for remote connections. By adopting this robust policy, entities can elevate their overall security stance and alleviate potential vulnerabilities.</dt>
-<dt><a href="../source/policy-websafe.xml">websafe</a></dt>
-<dd> This security protocol designed for web-safe usage focuses on situations where ImageMagick is applied in publicly accessible contexts, like websites. It deactivates the capability to read from or write to any image formats other than web-safe formats like GIF, JPEG, and PNG. Additionally, this policy prohibits the execution of image filters and indirect reads, thereby thwarting potential security breaches. By implementing these limitations, the web-safe policy fortifies the safeguarding of systems accessible to the public, reducing the risk of exploiting ImageMagick's capabilities for potential attacks.</dd>
-</ul>
-<p>Under Linux, select the policy with the <code>--with-security-policy={open, limited, secure, websafe}</code> configure script option. Under Windows, the choice is presented when you run the configure app.</p>
-
-<p>We encourage you to review each rule in your <code>policy.xml</code> configuration file. Adjust the parameters according to your organization's requirements. You can modify the allowed image formats, set specific paths, and restrict certain operations based on your security needs. Remember that customizing the security policy is a delicate balance between functionality and security. Overly restrictive policies might hinder legitimate image processing tasks, while overly permissive policies can introduce vulnerabilities.</p>
-
-<p>Doyensec provides a policy evaluator tool that can assist you in designing and auditing your security policy. The tool is found at <a href="https://imagemagick-secevaluator.doyensec.com/">imagemagick-secevaluator.doyensec.com</a>.</p>
-
-<h2><a class="anchor" id="example"></a>Example Security Policy</h2>
-
-<p>Here is an example security policy:</p>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Security Policy</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Learn how to configure and enforce ImageMagick’s security policy to balance functionality with protection. Explore open, limited, secure, and websafe options, along with resource limits, coder restrictions, and best practices for securing containers, servers, and web applications.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><code><?xml version="1.0" encoding="UTF-8"?>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="security-policy-content">
+ <!-- Table of Contents / Quick Nav -->
+ <div class="card im-card p-3 mb-4 bg-body-tertiary border-0">
+ <p class="text-center mb-0 small fw-medium">
+ <a href="#policy" class="text-decoration-none">Security Policy</a> •
+ <a href="#environment" class="text-decoration-none">Environment Selection</a> •
+ <a href="#example" class="text-decoration-none">Example Policy</a> •
+ <a href="#discussion" class="text-decoration-none">Discussion</a> •
+ <a href="#synchronize" class="text-decoration-none">Pixel Cache Sync</a> •
+ <a href="#zero-configuration" class="text-decoration-none">Zero Config</a> •
+ <a href="#other" class="text-decoration-none">Best Practices</a>
+ </p>
+ </div>
+ <!-- Intro Alert -->
+ <div class="alert alert-warning border-0 shadow-sm mb-4" role="alert" id="policy">
+ <h4 class="alert-heading h5 fw-bold mb-2"><i class="bi bi-shield-lock-fill me-2"></i>ImageMagick Security Policy</h4>
+ <p class="mb-0 small">Establish a security policy tailored to your environment before deploying ImageMagick. ImageMagick operates on an <strong>"everything allowed unless denied"</strong> model, where the <em>last matching policy wins</em>. Place broad deny rules first, followed by specific exceptions, and review rule ordering carefully to prevent unintended authorizations.</p>
+ </div>
+ <p class="lead text-body">ImageMagick is intentionally open by default, a design choice optimized for controlled, sandboxed environments like Docker containers and isolated application pipelines.</p>
+ <p>Security involves balancing protection against potential vulnerabilities with practical operational needs. ImageMagick's security policy acts as the control point between strict lockdown and convenience, letting you dictate which features, coders, and operations are permitted.</p>
+ <h3 class="h5 fw-bold mt-4 mb-3">A well-designed policy empowers you to:</h3>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-4">
+ <li class="d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i><span><strong>Limit or disable high-risk coders</strong> and external operations to minimize attack surfaces.</span></li>
+ <li class="d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i><span><strong>Constrain resource usage</strong> to prevent denial-of-service (DoS) attacks and resource exhaustion.</span></li>
+ <li class="d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i><span><strong>Define strict input boundaries</strong> for what file types and formats ImageMagick may process.</span></li>
+ <li class="d-flex align-items-start gap-2"><i class="bi bi-check-circle-fill text-success mt-1"></i><span><strong>Tailor defenses</strong> to your specific threat model rather than relying on a rigid, one-size-fits-all setup.</span></li>
+ </ul>
+ <p>Because ImageMagick ships in an open state for easy integration into containers and automated build pipelines, administrators must tighten policies to match production requirements. <strong class="text-warning-emphasis bg-warning-subtle px-1 rounded">The more untrusted input your application handles, the more restrictive your policy must be.</strong></p>
+ <p>Policies are evaluated using a "last matching policy wins" model. For filesystem paths, ImageMagick evaluates canonical (fully resolved) paths and enforces canonical denies to block bypass attempts via symlinks, alternate representations, or path traversal tricks.</p>
+ <hr class="my-4 text-muted opacity-25">
+ <h2 class="h4 fw-bold mt-4 mb-3" id="environment"><i class="bi bi-sliders me-2 text-primary"></i>Selecting the Right Security Policy for Your Environment</h2>
+ <p>To ensure optimal security in public-facing applications, you can restrict ImageMagick exclusively to web-safe formats like GIF, JPEG, and PNG. Alternatively, you can customize limits for memory allocation, allowed read/write paths, sequence frame counts, workflow runtime, and pixel cache disk space.</p>
+ <p>Setting resource limits protects against malicious or malformed files—such as an internet-sourced image crafted to declare 20,000×20,000 dimensions. Without limits, such files can exhaust memory and disk space, causing system slowdowns or crashes. You can configure these limits in your <code>policy.xml</code> file.</p>
+ <p>Environments vary wildly: a sandboxed internal service with abundant RAM has different security needs than a public web server processing user uploads. To simplify hardening, ImageMagick provides four pre-built security policies (available as of version 7.1.1-16):</p>
+ <div class="row g-3 my-3">
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <h5 class="fw-bold text-primary"><a href="../source/policy-open.xml" class="text-decoration-none">open</a></h5>
+ <p class="small text-body-secondary mb-0">The default profile. Ideal for secure, firewalled environments or Docker containers where broad functionality and convenience are prioritized over strict lockdown.</p>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <h5 class="fw-bold text-warning"><a href="../source/policy-limited.xml" class="text-decoration-none">limited</a></h5>
+ <p class="small text-body-secondary mb-0">Strikes a balance between usability and security. Disables hazardous coders (like SVG or HTTP) and applies adjustable resource constraints on memory, storage, and runtime.</p>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <h5 class="fw-bold text-danger"><a href="../source/policy-secure.xml" class="text-decoration-none">secure</a></h5>
+ <p class="small text-body-secondary mb-0">A rigorous profile enforcing strict resource caps, explicit read/write pathways, sequence limits, and disabled high-risk capabilities for hardened deployments.</p>
+ </div>
+ </div>
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-3">
+ <h5 class="fw-bold text-success"><a href="../source/policy-websafe.xml" class="text-decoration-none">websafe</a></h5>
+ <p class="small text-body-secondary mb-0">Designed for public websites. Restricts I/O strictly to GIF, JPEG, and PNG formats while blocking image filters and indirect reads to prevent exploitation.</p>
+ </div>
+ </div>
+ </div>
+ <p class="small text-muted mt-2">Under Linux, select your policy using the configure script option <code>--with-security-policy={open,limited,secure,websafe}</code>. Under Windows, select it during the GUI configuration app workflow.</p>
+ <p>We encourage reviewing every rule in your <code>policy.xml</code>. Finding the right balance ensures robust defense without breaking legitimate image processing pipelines.</p>
+ <div class="p-3 bg-body-tertiary rounded border border-secondary-subtle my-3">
+ <p class="mb-0 small"><i class="bi bi-tools text-warning me-2"></i><strong>Policy Evaluator:</strong> Doyensec provides a helpful interactive security policy auditor at <a href="https://imagemagick-secevaluator.doyensec.com/" target="_blank" rel="noopener">imagemagick-secevaluator.doyensec.com</a>.</p>
+ </div>
+ <hr class="my-4 text-muted opacity-25">
+ <h2 class="h4 fw-bold mt-4 mb-3" id="example"><i class="bi bi-file-earmark-code me-2 text-primary"></i>Example Hardened Security Policy</h2>
+ <p>Below is a production-ready example of a hardened security policy tailored for public-facing web applications:</p>
+ <div class="card terminal-card mb-3">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">policy.xml</span>
+ </div>
+ <div class="p-3 bg-body text-body font-mono small overflow-auto" style="max-height: 500px;">
+<pre class="mb-0"><code><?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE policymap [
<!ELEMENT policymap (policy)*>
- <!ATTLIST policymap xmlns CDATA #FIXED "">
+ <!ATTLIST policymap
+ xmlns CDATA #FIXED ""
+ >
<!ELEMENT policy EMPTY>
- <!ATTLIST policy xmlns CDATA #FIXED "">
- <!ATTLIST policy domain NMTOKEN #REQUIRED>
- <!ATTLIST policy name NMTOKEN #IMPLIED>
- <!ATTLIST policy pattern CDATA #IMPLIED>
- <!ATTLIST policy rights NMTOKEN #IMPLIED>
- <!ATTLIST policy stealth NMTOKEN #IMPLIED>
- <!ATTLIST policy value CDATA #IMPLIED>
+ <!ATTLIST policy
+ xmlns CDATA #FIXED ""
+ domain NMTOKEN #REQUIRED
+ name NMTOKEN #IMPLIED
+ pattern CDATA #IMPLIED
+ rights NMTOKEN #IMPLIED
+ stealth NMTOKEN #IMPLIED
+ value CDATA #IMPLIED
+ >
]>
-<!--
- Creating a security policy that fits your specific local environment
- before making use of ImageMagick is highly advised. You can find guidance on
- setting up this policy at https://imagemagick.org/security-policy/,
- and it's important to verify your policy using the validation tool located
- at https://imagemagick-secevaluator.doyensec.com/. We also strongly
- recommend that all users validate their security assumptions by testing their
- configurations after making any policy changes. This helps ensure that the
- intended restrictions are functioning as expected in their specific
- deployment environment.
-
-
- Web-safe ImageMagick security policy:
-
- This security protocol designed for web-safe usage focuses on situations
- where ImageMagick is applied in publicly accessible contexts, like websites.
- It deactivates the capability to read from or write to any image formats
- other than web-safe formats like GIF, JPEG, and PNG. Additionally, this
- policy prohibits the execution of image filters and indirect reads, thereby
- thwarting potential security breaches. By implementing these limitations,
- the web-safe policy fortifies the safeguarding of systems accessible to
- the public, reducing the risk of exploiting ImageMagick's capabilities
- for potential attacks.
--->
<policymap>
- <!-- Set maximum parallel threads. -->
- <policy domain="resource" name="thread" value="2"/>
- <!-- Set maximum time in seconds or mnemonics, e.g. "2 minutes". When this
- limit is exceeded, an exception is thrown and processing stops. -->
+ <!-- Resource Limits -->
+ <policy domain="resource" name="thread" value="4"/>
<policy domain="resource" name="time" value="60"/>
- <!-- Set maximum number of open pixel cache files. When this limit is
- exceeded, any subsequent pixels cached to disk are closed and reopened
- on demand. -->
<policy domain="resource" name="file" value="768"/>
- <!-- Set maximum amount of memory in bytes to allocate for the pixel cache
- from the heap. When this limit is exceeded, the image pixels are cached
- to memory-mapped disk. -->
<policy domain="resource" name="memory" value="256MiB"/>
- <!-- Set maximum amount of memory map in bytes to allocate for the pixel
- cache. When this limit is exceeded, the image pixels are cached to
- disk. -->
<policy domain="resource" name="map" value="512MiB"/>
- <!-- Set the maximum width * height of an image that can reside in the pixel
- cache memory. Images that exceed the area limit are cached to disk. -->
- <policy domain="resource" name="area" value="16KP"/>
- <!-- Set maximum amount of disk space in bytes permitted for use by the pixel
- cache. When this limit is exceeded, the pixel cache is not be created
- and an exception is thrown. -->
+ <policy domain="resource" name="area" value="32MP"/>
<policy domain="resource" name="disk" value="1GiB"/>
- <!-- Set the maximum length of an image sequence. When this limit is
- exceeded, an exception is thrown. -->
<policy domain="resource" name="list-length" value="16"/>
- <!-- Set the maximum width of an image. When this limit is exceeded, an
- exception is thrown. -->
<policy domain="resource" name="width" value="4KP"/>
- <!-- Set the maximum height of an image. When this limit is exceeded, an
- exception is thrown. -->
<policy domain="resource" name="height" value="4KP"/>
- <!-- Periodically yield the CPU for at least the time specified in
- milliseconds. -->
<policy domain="resource" name="throttle" value="2"/>
- <!-- Dynamically yield the CPU relative to the system load average. -->
<policy domain="resource" name="dynamic-throttle" value="false"/>
- <!-- Do not create temporary files in the default shared directories, instead
- specify a private area to store only ImageMagick temporary files. -->
- <!-- <policy domain="resource" name="temporary-path" value="/magick/tmp"/> -->
- <!-- Force memory initialization by memory mapping select memory
- allocations. -->
+ <!-- Pixel Cache Security -->
<policy domain="cache" name="memory-map" value="anonymous"/>
- <!-- Ensure all image data is fully flushed and synchronized to disk. -->
<policy domain="cache" name="synchronize" value="true"/>
- <!-- Replace passphrase for secure distributed processing -->
- <!-- <policy domain="cache" name="shared-secret" value="secret-passphrase" stealth="true"/> -->
- <!-- Do not permit any external delegates to execute. -->
+ <!-- Delegate and Filter Restrictions -->
<policy domain="delegate" rights="none" pattern="*"/>
- <!-- Do not permit any image filters to load. -->
<policy domain="filter" rights="none" pattern="*"/>
- <!-- Don't read/write from/to stdin/stdout. -->
+ <!-- Path Restrictions -->
<policy domain="path" rights="none" pattern="-"/>
<policy domain="path" rights="none" pattern="[Ff][Dd]:*"/>
- <!-- Sensitive paths are not permitted. -->
<policy domain="path" rights="none" pattern="/etc/*"/>
- <!-- Relative paths are not permitted. -->
<policy domain="path" rights="none" pattern="*../*"/>
- <!-- Indirect reading is not permitted. -->
<policy domain="path" rights="none" pattern="@*"/>
- <!-- Deny all image modules and specifically exempt reading or writing
- web-safe image formats. -->
- <policy domain="module" rights="none" pattern="*" />
- <policy domain="module" rights="read | write" pattern="{GIF,JPEG,PNG,WEBP}" />
- <!-- This policy sets the number of times to replace content of certain
- memory buffers and temporary files before they are freed or deleted. -->
+ <policy domain="path" rights="none" pattern="|*"/>
+ <!-- Module Restrictions -->
+ <policy domain="module" rights="none" pattern="*"/>
+ <policy domain="module" rights="read | write" pattern="{GIF,JPEG,PNG,WEBP}"/>
+ <!-- System Security Options -->
<policy domain="system" name="shred" value="1"/>
- <!-- Enable the initialization of buffers with zeros, resulting in a minor
- performance penalty but with improved security. -->
<policy domain="system" name="memory-map" value="anonymous"/>
- <!-- Set the maximum amount of memory in bytes that is permitted for
- allocation requests. -->
<policy domain="system" name="max-memory-request" value="256MiB"/>
- <!-- If the basename of path is a symbolic link, the open fails -->
+ <policy domain="system" name="max-profile-size" value="16MiB"/>
+ <policy domain="system" name="max-profile-count" value="16"/>
<policy domain="system" name="symlink" rights="none" pattern="follow"/>
- <!-- Blocks all SVG entity‑substitution attempts by denying the
- svg:substitute-entities define -->
<policy domain="system" name="svg" rights="none" pattern="substitute-entities"/>
</policymap></code></pre>
-
-<p>To prevent one session from consuming all available memory when processing multiple sessions at the same time, large images are cached to disk with this policy. If an image exceeds the pixel cache disk limit, the program will exit. Additionally, a time limit has been set to prevent any processing tasks from running for too long. If an image has a width or height larger than 8192 pixels, or if an image sequence has more than 32 frames, processing will stop and an exception will be thrown.</p>
-
-<p>Starting with ImageMagick 7.0.1-8, you can prevent the use of any external delegate or all external delegates (by setting the pattern to "*"). Prior to these releases, you can use the domain of <code>coder</code> and set rights to none and the glob pattern to HTTPS to prevent external delegate usage. Additionally, users are prevented from executing any image filters and from performing indirect reads. If you want to, for example, read text from a file (e.g. <code>caption:@myCaption.txt</code>), you'll need to disable this path policy.</p>
-
-<p>Policy <a href="https://en.wikipedia.org/wiki/Glob_(programming)">glob patterns</a>, before ImageMagick 7.1.1-16, are <em>case sensitive</em>. To get expected behavior, coders and modules must be upper-case (e.g. "EPS" not "eps") or use a case-insensitive pattern such as <code>[Pp][Nn][Gg]</code>.</p>
-
-<p>Here is what you can expect when you restrict the HTTPS coder, for example:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><samp>$ magick https://imagemagick.org/image/wizard.png wizard.jpg
-convert: attempt to perform an operation not allowed by the security policy `HTTPS'
-convert: no images defined `wizard.jpg'</samp></pre>
-
-<p>As of ImageMagick version 7.0.4-7, you can conveniently deny access to all external delegates and coders except for a small subset of proven web-safe image types. For example,</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="delegate" rights="none" pattern="*" />
-<policy domain="module" rights="none" pattern="*" />
-<policy domain="module" rights="read | write" pattern="{GIF,JPEG,PNG,WEBP}" /></code></pre>
-
-<p>The module policy enables or disables a complete module for both read or write. To just read or write an image format, use the coder policy instead. For example, we disable reading just a few Postscript related formats, however, you can still write them:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="coder" rights="write" pattern="{PDF,PS,PS2,PS3,XPS}" /></code></pre>
-
-<p>As of ImageMagick 7.0.7-0, you can allocate the pixel cache and some internal buffers with anonymous memory mapping rather than from heap. As a consequence, the pixels are initialized to zero resulting in a minor performance penalty. You can also jumble the contents of certain memory buffers (requires version 7.1.0-38) and temporary files before they are freed or deleted. The shred value is the number of times to replace content with random data. For example,</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="system" name="memory-map" value="anonymous"/>
-<policy domain="cache" name="memory-map" value="anonymous"/>
-<policy domain="system" name="shred" value="1"/></code></pre>
-<p>For performance reasons, the first pass is fast by repeating the random sequence as necessary to overwrite the contents of the buffer or file. Subsequent passes are an order of magnitude slower, but generate cryptographically strong random bytes for the length of the buffer or file.</p>
-
-<p>Some image processing algorithms (e.g. wavelet transform) might consume a substantial amount of memory to complete. ImageMagick maintains a separate memory pool for these large resource requests and as of 7.0.6-1 permits you to set a maximum request limit. If the limit is exceeded, the allocation is instead memory-mapped on disk. Here we limit the maximum memory request by policy:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="system" name="max-memory-request" value="256MiB"/> </code></pre>
-
-<p>As of ImageMagick version 7.0.4-23, you can limit the maximum number of images in a sequence. For example, to limit an image sequence to at most 64 frames, use:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="resource" name="list-length" value="64"/></code></pre>
-
-<p>Note, numeric values in policies are floating-point with an optional SI prefix (e.g., 10MiB).</p>
-
-<p>For additional details about resource limits and the policy configuration file, read <a href="../resources/index.html">Resources</a> and <a href="../architecture/index.html">Architecture</a>.</p>
-
-<p>As of ImageMagick 7.0.6-0, you can programmatically set the ImageMagick security policy with SetMagickSecurityPolicy() (MagickCore) or MagickSetSecurityPolicy() (MagickWand).</p>
-
-<p>As of ImageMagick version 7.0.8-11, you can set a <code>module</code> security policy. For example, to prevent Postscript or PDF interpretation, use:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="module" rights="none" pattern="{ps,pdf,xps}/></code></pre>
-
-<p>As of ImageMagick version 7.0-10-52, you can set a <code>font</code> policy. Specify a path to a Unicode font that ImageMagick defaults to whenever the user does not specify a font preference:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="system" name="font" value="/usr/share/fonts/arial-unicode.ttf"/></code></pre>
-
-<p>Note, in file path glob patterns, use the backslash character (\) to escape characters that would otherwise be interpreted as special characters. For example:</p>
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code><policy domain="path" rights="none" pattern="c:\\\\*"/></code></pre>
-
-<p>You can verify your policy changes are in effect with this command:</p>
-
-<pre class="overflow-auto p-3 mb-2 text-body-secondary bg-body-tertiary" style="max-height:75svh;"><samp>$ magick identify -list policy
-Path: ImageMagick-7/policy.xml
- Policy: Cache
- name: memory-map
- value: anonymous
- Policy: Cache
- name: synchronize
- value: true
- Policy: Resource
- name: list-length
- value: 32
- Policy: Resource
- name: time
- value: 120
- Policy: Resource
- name: thread
- value: 2
- Policy: Resource
- name: file
- value: 768
- Policy: Resource
- name: disk
- value: 1GiB
- Policy: Resource
- name: map
- value: 512MiB
- Policy: Resource
- name: memory
- value: 256MiB
- Policy: Resource
- name: area
- value: 16KP
- Policy: Resource
- name: height
- value: 8KP
- Policy: Resource
- name: width
- value: 8KP
- Policy: Resource
- name: temporary-path
- value: /opt/tmp
- Policy: Module
- rights: Write
- pattern: {HTTP,HTTPS,MVG,PS,PDF}
- Policy: Filter
- rights: None
- pattern: *
- Policy: Path
- rights: None
- pattern: @*
- Policy: System
- name: font
- value: ImageMagick-7/arial-unicode.ttf
-
-Path: [built-in]
- Policy: Undefined
- rights: None</samp></pre>
-<p>Notice the <code>shared-secret</code> policy is not listed due to the <code>stealth</code> property.</p>
-
-
-<h2><a class="anchor" id="synchronize"></a>Pixel Cache Synchronize Policy</h2>
-
-<p>When writing image pixels to disk, ImageMagick first preallocates the disk file, which is faster than fully populating the file with zeros. To improve performance even further, the file is memory-mapped on disk. This can result in an increase in performance of up to 5 times, but there is a possibility that the disk file may run out of free space as it is populated, causing the operating system (OS) to throw a SIGBUS signal which prevents ImageMagick from continuing. To prevent a SIGBUS signal from occurring, use this security policy:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary">
-<policy domain="cache" name="synchronize" value="True"/>
-</pre>
-
-<p>Set to True to ensure all image data is fully flushed and synchronized to disk. There is a performance penalty, however, the benefits include ensuring a valid image file in the event of a system crash and early reporting if there is not enough disk space for the image pixel cache.</p>
-
-<h2><a class="anchor" id="zero-configuration"></a>Zero Configuration Security Policy</h2>
-
-<p>A zero configuration build of ImageMagick does not permit external configuration files. To define your security policy, you must instead edit the <code>MagickCore/policy-private.h</code> source module, add your policy statements, and then build the ImageMagick distribution. Here is an example zero configuration security policy:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary"><code>static const char
- *ZeroConfigurationPolicy = \
-"<policymap> \
- <policy domain=\"module\" rights=\"none\" pattern=\"MVG\"/> \
-</policymap>";</code></pre>
-
-<h2><a class="anchor" id="other"></a>Other Security Considerations</h2>
-
-<p>If you spot a vulnerability in ImageMagick, first determine if the vulnerability can be mitigated by the security policy. ImageMagick, by default, is open. Use the security policy to add constraints to meet the requirements of your local security governance. If you feel confident that the security policy does not address the vulnerability, post the vulnerability as a <a href="https://github.com/ImageMagick/ImageMagick/security/advisories/new">security advisory</a>. Most vulnerabilities are reviewed and resolved within 48 hours.</p>
-
-<p>There are several ways to keep ImageMagick safer:<p>
-<ol>
-<li>Use web-safe image formats: Limiting ImageMagick to only reading or writing web-safe image formats like GIF, JPEG, and PNG can help increase security.</li>
-
-<li>Customize the security policy: You can customize the security policy to fit the needs of your local environment or organizational policies. This policy can cover aspects such as memory usage, allowable paths for reading and writing, the number of images allowed in a sequence, the maximum time a workflow can run, the amount of disk space allowed for image pixels, a secret passphrase for remote connections, and which coders are permitted or denied.</li>
-
-<li>Set limits on resource usage: You can set limits on resources such as memory usage, disk space, and workflow runtime to prevent potentially harmful situations.</li>
-
-<li>Use sandboxing: Sandboxing is a security technique that allows you to run a program in a restricted environment to prevent it from accessing sensitive information or making changes to the system.</li>
-
-<li>Disable potentially dangerous coders: If you are using ImageMagick on a public website, you may want to increase security by disabling certain coders such as MVG or HTTPS.</li>
-
-<li>Review <a href="../source/delegates.xml">delegates.xml</a> and disable by policy any that are not suitable in your environment. For those that remain, use <code>configure --with--frozenpaths=yes</code> to ensure that every delegate program uses an <strong>absolute pathname</strong>, for example <code>/usr/bin/gs</code> instead of <code>gs</code>, so that delegate resolution is deterministic and not dependent on the environment’s <code>PATH</code>.</li>
-
-<li>Prevent execution of image filters and indirect reads: You can prevent users from executing image filters and performing indirect reads to increase security.</li>
-
-<li>Use a current version of ImageMagick: It is important to use a current version of ImageMagick to take advantage of the latest security fixes and updates.</li>
-</ol>
-
+ </div>
+ </div>
+ <hr class="my-4 text-muted opacity-25">
+ <h2 class="h4 fw-bold mt-4 mb-3" id="discussion"><i class="bi bi-chat-left-text me-2 text-primary"></i>Security Policy Discussion & Advanced Tuning</h2>
+ <p>Starting with ImageMagick 7.0.1-8, external delegates can be globally disabled by setting the pattern to <code>"*"</code>. Glob patterns are case-sensitive prior to version 7.1.1-16, so coders must be uppercase (e.g., <code>"EPS"</code>) or use case-insensitive patterns like <code>[Pp][Nn][Gg]</code>.</p>
+ <p>When restricting coders like HTTPS, attempting an unauthorized operation returns an error:</p>
+ <div class="card terminal-card mb-3">
+ <div class="p-3 bg-body font-mono small text-secondary">
+ $ magick https://imagemagick.org/image/wizard.png wizard.jpg<br>
+ magick: attempt to perform an operation not allowed by the security policy `HTTPS'<br>
+ magick: no images defined `wizard.jpg'
+ </div>
+ </div>
+ <p>You can also use anonymous memory mapping and buffer shredding to enhance data hygiene:</p>
+ <div class="card terminal-card mb-3">
+ <div class="p-3 bg-body font-mono small">
+ <policy domain="system" name="memory-map" value="anonymous"/><br>
+ <policy domain="cache" name="memory-map" value="anonymous"/><br>
+ <policy domain="system" name="shred" value="1"/>
+ </div>
+ </div>
+ <p>To verify your active security policy configuration at any time, run:</p>
+ <div class="card terminal-card mb-3">
+ <div class="p-3 bg-body font-mono small text-secondary">
+ $ magick identify -list policy
+ </div>
+ </div>
+ <hr class="my-4 text-muted opacity-25">
+ <h2 class="h4 fw-bold mt-4 mb-3" id="synchronize"><i class="bi bi-hdd me-2 text-primary"></i>Pixel Cache Synchronize Policy</h2>
+ <p>When writing pixels to disk, ImageMagick preallocates and memory-maps files for performance. However, if disk space runs out during population, the OS may trigger a <code>SIGBUS</code> signal. Setting <code>synchronize</code> to <code>true</code> ensures data is flushed and synchronized immediately, preventing crashes and offering early error reporting:</p>
+ <div class="card terminal-card mb-3">
+ <div class="p-3 bg-body font-mono small">
+ <policy domain="cache" name="synchronize" value="true"/>
+ </div>
+ </div>
+ <h2 class="h4 fw-bold mt-4 mb-3" id="zero-configuration"><i class="bi bi-cpu me-2 text-primary"></i>Zero Configuration Security Policy</h2>
+ <p>For embedded builds that prohibit external configuration files, you can embed policies directly into the source module <code>MagickCore/policy-private.h</code> before compilation:</p>
+ <div class="card terminal-card mb-3">
+ <div class="p-3 bg-body font-mono small">
+ static const char *ZeroConfigurationPolicy = \<br>
+ "<policymap> <policy domain=\"module\" rights=\"none\" pattern=\"MVG\"/> </policymap>";
+ </div>
+ </div>
+ <h2 class="h4 fw-bold mt-4 mb-3" id="other"><i class="bi bi-shield-check me-2 text-primary"></i>Other Security Best Practices</h2>
+ <ol class="list-group list-group-numbered list-group-flush mb-4">
+ <li class="list-group-item bg-transparent"><strong>Use web-safe image formats:</strong> Restrict processing strictly to trusted formats like GIF, JPEG, and PNG.</li>
+ <li class="list-group-item bg-transparent"><strong>Customize resource limits:</strong> Control memory, disk space, and runtime bounds to thwart denial-of-service attacks.</li>
+ <li class="list-group-item bg-transparent"><strong>Deploy sandboxing:</strong> Run ImageMagick inside isolated containers or restricted user namespaces.</li>
+ <li class="list-group-item bg-transparent"><strong>Disable dangerous coders:</strong> Turn off vector graphics (MVG) and remote network fetches (HTTPS) on public instances.</li>
+ <li class="list-group-item bg-transparent"><strong>Review delegates:</strong> Audit <code>delegates.xml</code> and use absolute pathnames (e.g., <code>/usr/bin/gs</code>) to prevent path hijacking.</li>
+ <li class="list-group-item bg-transparent"><strong>Keep ImageMagick updated:</strong> Always run the latest stable release to incorporate critical security patches.</li>
+ </ol>
</div>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/sitemap/index.html b/www/sitemap/index.html
index ee31e72b4..3dfca3026 100644
--- a/www/sitemap/index.html
+++ b/www/sitemap/index.html
@@ -11,555 +11,778 @@
<meta name="description" content="Explore the ImageMagick sitemap for quick access to downloads, installation guides, command-line tools, APIs, supported formats, tutorials, and community support. Navigate directly to resources for creating, editing, and converting images across 200+ formats.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
+ }
+
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Sitemap">
<meta property="og:description" content="Explore the ImageMagick sitemap for quick access to downloads, installation guides, command-line tools, APIs, supported formats, tutorials, and community support. Navigate directly to resources for creating, editing, and converting images across 200+ formats.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Sitemap">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Sitemap",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/sitemap/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Explore the ImageMagick sitemap for quick access to downloads, installation guides, command-line tools, APIs, supported formats, tutorials, and community support. Navigate directly to resources for creating, editing, and converting images across 200+ formats.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/sitemap/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/sitemap/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Sitemap</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Sitemap</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Explore the ImageMagick sitemap for quick access to downloads, installation guides, command-line tools, APIs, supported formats, tutorials, and community support. Navigate directly to resources for creating, editing, and converting images across 200+ formats.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Page Quick Nav Pills -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap justify-content-center gap-2 p-2 bg-body-tertiary rounded-3 border">
+ <a href="#overview" class="btn btn-sm btn-outline-secondary border-0">Overview</a>
+ <a href="#download" class="btn btn-sm btn-outline-secondary border-0">Download</a>
+ <a href="#install" class="btn btn-sm btn-outline-secondary border-0">Install</a>
+ <a href="#command-line" class="btn btn-sm btn-outline-secondary border-0">CLI Tools</a>
+ <a href="#program-interfaces" class="btn btn-sm btn-outline-secondary border-0">APIs</a>
+ <a href="#format" class="btn btn-sm btn-outline-secondary border-0">Formats</a>
+ <a href="#help" class="btn btn-sm btn-outline-secondary border-0">Help</a>
+ <a href="#support" class="btn btn-sm btn-outline-secondary border-0">Support</a>
+ <a href="#miscellaneous" class="btn btn-sm btn-outline-secondary border-0">Miscellaneous</a>
+ <a href="#legacy" class="btn btn-sm btn-outline-secondary border-0">Legacy</a>
</div>
- </header>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#overview">Overview</a> • <a href="#download">Download ImageMagick</a> • <a href="#install">Install ImageMagick</a> • <a href="#command-line">Command-line Tools</a> • <a href="#program-interfaces">Program Interfaces</a> • <a href="#formats">Image Formats</a> • <a href="#help">Getting Help</a> • <a href="#support">Support ImageMagick</a> • <a href="#miscellaneous">Miscellaneous Topics</a></p>
-
-<p class="lead">Use this ImageMagick sitemap to quickly jump to one of the areas of interest listed below. If you can't find what you want on this page, try our <a href="../search/index4840.html?q=ImageMagick&sa=">site search</a>.</p>
-
-<h2><a class="anchor" id="overview"></a>Overview</h2>
-
-<dl >
- <li><a href="../index-2.html">Introduction</a>: convert, edit, or compose images from the command-line or program interface.</li>
- <li><a href="../examples/index.html">Examples of ImageMagick usage</a>: a few examples that show what you can do with an image using ImageMagick.</li>
- <li><a href="https://usage.imagemagick.org/">Anthony Thyssen's examples of ImageMagick usage</a>: a comprehensive tutorial of using ImageMagick from the command line.</li>
- <li><a href="../color/index.html">Color names</a>: how to specify a color name, a hex color, or a numerical RGB, RGBA, HSL, HSLA, CMYK, or CMYKA color.</li>
- <li><a href="../color-management/index.html">Color management</a>: accurate color management with color profiles or in lieu of-- built-in gamma compression or expansion as demanded by the colorspace.</li>
- <li><a href="../resources/index.html">Resources</a>: ImageMagick depends on external resources including configuration files, loadable modules, fonts, and environment variables.</li>
- <li><a href="../openmp/index.html">Parallel execution</a>: ImageMagick is threaded to take advantage of speed-ups offered by the multicore processor chips.</li>
- <li><a href="../security-policy/index.html">Security policy</a>: best practices strongly encourage you to configure a security policy that suits your local environment.</li>
- <li><a href="../architecture/index.html">Architecture</a>: get to know more about the software and algorithms behind ImageMagick.</li>
- <li><a href="../license/index.html">License</a>: the legally binding and authoritative terms and conditions for use, reproduction, and distribution of ImageMagick.</li>
- <li><a href="../export/index.html">Export classification</a>: export control status of ImageMagick.</li>
- <li><a href="../privacy-policy/index.html">Privacy policy</a>: we do not collect personal identifier information.</li>
- <li><a href="../porting/index.html">ImageMagick version 7</a>: learn how ImageMagick version 7 differs from previous versions.</li>
- <li><a href="../changelog/index.html">Changelog</a>: a chronological list of changes, bug fixes, and new features for each ImageMagick release.</li>
- <li><a href="../history/index.html">History</a>: how ImageMagick was conceived and developed.</li>
-</dl>
-
-<h2><a class="anchor" id="download"></a>Download ImageMagick</h2>
-
-<dl >
- <li><a href="../download/index.html">Download ImageMagick</a>: ImageMagick source and binary distributions are available from a variety of FTP and Web mirrors.</li>
- <li><a href="https://download.imagemagick.org/archive/">Linux source</a>: Linux source distributions.</li>
- <li><a href="https://download.imagemagick.org/archive/windows/">Windows source</a>: Windows source distributions.</li>
- <li><a href="https://download.imagemagick.org/archive/binaries/">Linux and Windows binaries</a>: Linux and Windows binary distributions.</li>
- <li><a href="https://github.com/ImageMagick/ImageMagick">Git repository</a>: stable and development source releases.</li>
-</dl>
-
-<h2><a class="anchor" id="install"></a>Install ImageMagick</h2>
-
- <p>You can install ImageMagick from source. However, if you don't have a proper development environment or if you're anxious to get started, download a ready-to-run Linux or Windows executable.</p>
-<dl >
- <li><a href="../install-source/index.html">Install from source</a>: ImageMagick builds under Windows, macOS, and Linux.</li>
-</dl>
-
-<h2><a class="anchor" id="command-line"></a>Command-line Tools</h2>
-<dl >
- <li><a href="../command-line-tools/index.html">Command-line tools</a>: overview of the ImageMagick commands.
- <ul >
- <li><a href="../magick/index.html">magick</a>: convert between image formats as well as resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and more.</li>
- <li><a href="../animate/index.html">magick animate</a>: animates an image sequence on any X server.</li>
- <li><a href="../compare/index.html">magick compare</a>: mathematically and visually annotate the difference between an image and its reconstruction.</li>
- <li><a href="../composite/index.html">magick composite</a>: overlaps one image over another.</li>
- <li><a href="../conjure/index.html">magick conjure</a>: interprets and executes scripts written in the Magick Scripting Language (MSL).</li>
- <li><a href="../display/index.html">magick display</a>: displays an image or image sequence on any X server.</li>
- <li><a href="../identify/index.html">magick identify</a>: describes the format and characteristics of one or more image files.</li>
- <li><a href="../import/index.html">magick import</a>: saves any visible window on an X server and outputs it as an image file.</li>
- <li><a href="../mogrify/index.html">magick mogrify</a>: resize an image, blur, crop, despeckle, dither, draw on, flip, join, re-sample, and more.</li>
- <li><a href="../montage/index.html">magick montage</a>: create a composite image by combining several separate images.</li>
- <li><a href="../stream/index.html">magick stream</a>: a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats.</li>
- </ul></li>
- <li><a href="../command-line-processing/index.html">Command line processing</a>: the anatomy of the command line.</li>
- <li><a href="../command-line-options/index.html">Command line options</a>: annotated list of all options that can appear on the command-line.</li>
- <li><a href="../fx/index.html">Fx</a>: apply a mathematical expression to an image or image channels.</li>
- <li><a href="http://www.fmwconcepts.com/imagemagick/" rel="noopener noreferrer" target="_blank">Fred's ImageMagick Scripts</a>: a plethora of command-line scripts that perform geometric transforms, blurs, sharpens, edging, noise removal, and color manipulations.</li>
-</dl>
-
-<h2><a class="anchor" id="program-interfaces"></a>Program Interfaces</h2>
-
-<dl >
- <li><a href="../develop/index.html">Program interfaces</a>: application programming interfaces.
- <ul >
- <li><a href="http://common-lisp.net/project/cl-magick/">CL-Magick</a>: provides a Common Lisp interface to the ImageMagick library.</li>
- <li><a href="https://github.com/dlemstra/Magick.NET">Magick.NET</a>: Use Magick.NET to convert, compose, and edit images from Windows .NET.</li>
- <li><a href="../magick%2b%2b/index.html">Magick++</a>: provides an object-oriented C++ interface to ImageMagick.</li>
- <li><a href="http://pecl.php.net/package/imagick">IMagick</a>: is a native PHP extension to create and modify images using the ImageMagick API.</li>
- <li><a href="https://github.com/techblue/jmagick">JMagick</a>: provides an object-oriented Java interface to ImageMagick.</li>
- <li><a href="../magick-core/index.html">MagickCore</a>: C API, recommended for wizard-level developers.</li>
- <li><a href="../magick-wand/index.html">MagickWand</a>: convert, compose, and edit images from the C language.</li>
- <li><a href="https://code.google.com/archive/p/nmagick">nMagick</a>: is a port of the ImageMagick library to the haXe and Neko platforms.</li>
- <li><a href="https://wiki.freepascal.org/PascalMagick">PascalMagick</a>: a Pascal binding for the MagickWand API and also the low-level MagickCore library.</li>
- <li><a href="../perl-magick/index.html">PerlMagick</a>: convert, compose, and edit images from the Perl language.</li>
- <li><a href="https://download.imagemagick.org/archive/python/">PythonMagick</a>: an object-oriented Python interface to ImageMagick.</li>
- <li><a href="https://rmagick.github.io/">RMagick</a>: is an interface between the Ruby programming language and ImageMagick.</li>
- <li><a href="https://download.imagemagick.org/archive/tcl/">TclMagick</a>: a native Tcl-extension to the ImageMagick MagickWand API.</li>
- </ul></li>
-</dl>
-
-<h2><a class="anchor" id="format"></a>Image Formats</h2>
-<dl >
- <li><a href="../formats/index.html">Supported image formats</a>: annotated list of all image formats that ImageMagick can read and/or write.</li>
- <li><a href="../motion-picture/index.html">Motion picture digital images</a>: use SMPTE DPX Version 2.0 to process images used by the motion picture (film and high-definition) industry.</li>
- <li><a href="../high-dynamic-range/index.html">High dynamic-range images</a>: accurately represent the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows.</li>
- <li><a href="../magick-vector-graphics/index.html">Magick Vector Graphics</a>: a modularized language for describing two-dimensional vector and mixed vector/raster graphics in ImageMagick.</li>
- <li><a href="../miff/index.html">Magick Image File Format</a>: MIFF is ImageMagick's own platform-independent format for storing bitmap images.</li>
-</dl>
-
-<h2><a class="anchor" id="help"></a>Getting Help</h2>
-
-<dl >
- <li><a href="https://github.com/ImageMagick/ImageMagick/discussions">Discussions</a> forums: to get help from fellow ImageMagick users and developers, post to these forums.</li>
-</dl>
-
-<h2><a class="anchor" id="support"></a>Support ImageMagick</h2>
-
-<dl >
- <li><a href="https://github.com/ImageMagick/ImageMagick/issues">Report bugs and vulnerabilities</a>: our highest priority is to fix security defects and bug reports, usually within 48 hours of your report.</li>
- <li><a href="../support/index.html">Sponsor ImageMagick</a>: contribute bug fixes, enhancements, hardware, funds, etc. to ensure the ImageMagick project thrives.</li>
-</dl>
-
-<h2><a class="anchor" id="miscellaneous"></a>Miscellaneous Topics</h2>
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <tr>
- <td><a href="https://usage.imagemagick.org/anim_basics/">Animation</a></td>
- <td>create a GIF animation sequence from a group of images.</td>
- </tr>
- <tr>
- <td><a href="../command-line-options/index.html#bilateral-blur">Bilateral blur</a></td>
- <td>non-linear, edge-preserving, and noise-reducing smoothing filter.</td>
- </tr>
- <tr>
- <td><a href="../color-management/index.html">Color management</a></td>
- <td>accurate color management with color profiles or in lieu of-- built-in gamma compression or expansion as demanded by the colorspace.</td>
- </tr>
- <tr>
- <td><a href="../color-thresholding/index.html">Color thresholding</a></td>
- <td>force all pixels in the color range to white otherwise black.</td>
- </tr>
- <tr>
- <td><a href="../command-line-processing/index.html">Command-line processing</a></td>
- <td>utilize ImageMagick from the command-line.</td>
- </tr>
- <tr>
- <td><a href="https://en.wikipedia.org/wiki/Complex_text_layout">Complex text layout</a></td>
- <td>bidirectional text support and shaping.</td>
- </tr>
- <tr>
- <td><a href="../composite/index.html">Composite</a></td>
- <td>overlap one image over another.</td>
- </tr>
- <tr>
- <td><a href="../connected-components/index.html">Connected component labeling</a></td>
- <td>uniquely label connected regions in an image.</td>
- </tr>
- <tr>
- <td><a href="../content-provenance-authenticity/index.html">Content provenance authenticity</a></td>
- <td>embed and verify content provenance using cryptographic keys, certificates, and manifests. This enables trusted workflows for digital assets.</td>
- </tr>
- <tr>
- <td><a href="../convex-hull/index.html">Convex hull</a></td>
- <td>smallest area convex polygon containing the image foreground objects. In addition, the minimum bounding box and unrotate angle are also generated.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/crop/">Decorate</a></td>
- <td>add a border or frame to an image.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/transform/#vision">Delineate image features</a></td>
- <td><a href="https://usage.imagemagick.org/transform/#canny">Canny edge detection</a>, <a href="../command-line-options/index.html#hough-lines">Hough lines</a>.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/fourier/">Discrete Fourier transform</a></td>
- <td>implements the forward and inverse <a href="https://en.wikipedia.org/wiki/Discrete_Fourier_transform">DFT</a>.</td>
- </tr>
- <tr>
- <td><a href="../distribute-pixel-cache/index.html">Distributed pixel cache</a></td>
- <td>offload intermediate pixel storage to one or more remote servers.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/draw/">Draw</a></td>
- <td>add shapes or text to an image.</td>
- </tr>
- <tr>
- <td><a href="../cipher/index.html">Encipher or decipher an image</a></td>
- <td>convert ordinary images into unintelligible gibberish and back again.</td>
- </tr>
- <tr>
- <td><a href="../convert/index.html">Format conversion</a></td>
- <td>convert an image from one <a href="../formats/index.html">format </a> to another (e.g. PNG to JPEG).</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/distorts/">Generalized pixel distortion</a></td>
- <td>correct for, or induce image distortions including perspective.</td>
- </tr>
- <tr>
- <td><a href="../architecture/index.html#distributed">Heterogeneous distributed processing</a></td>
- <td>certain algorithms are <a href="../opencl/index.html">OpenCL</a>-enabled to take advantage of speed-ups offered by executing in concert across heterogeneous platforms consisting of CPUs, GPUs, and other processors.</td>
- </tr>
- <tr>
- <td><a href="../high-dynamic-range/index.html">High dynamic-range images</a></td>
- <td>accurately represent the wide range of intensity levels found in real scenes ranging from the brightest direct sunlight to the deepest darkest shadows.</td>
- </tr>
- <tr>
- <td><a href="../clahe/index.html">Histogram equalization</a></td>
- <td>use adaptive histogram equalization to improve contrast in images.</td>
- </tr>
- <tr>
- <td><a href="../magick-cache/index.html">Image cache</a></td>
- <td>secure methods and tools to cache images, image sequences, video, audio or metadata in a local folder..</td>
- </tr>
- <tr>
- <td><a href="../fx/index.html">Image calculator</a></td>
- <td>apply a mathematical expression to an image, image sequence, or image channels.</td>
- </tr>
- <tr>
- <td><a href="../gradient/index.html">Image gradients</a></td>
- <td>create a gradual blend of two colors whose shape is horizontal, vertical, circular, or elliptical.</td>
- </tr>
- <tr>
- <td><a href="../identify/index.html">Image identification</a></td>
- <td>describe the format and attributes of an image.</td>
- </tr>
- <tr>
- <td><a href="../download/index.html#iOS">ImageMagick on the iPhone</a></td>
- <td>convert, edit, or compose images on your <a href="https://www.apple.com/os/ios/">iOS</a> device such as the iPhone or iPad.</td>
- </tr>
- <tr>
- <td><a href="../architecture/index.html#tera-pixel">Large image support</a></td>
- <td>read, process, or write mega-, giga-, or tera-pixel image sizes.</td>
- </tr>
- <tr>
- <td><a href="../montage/index.html">Montage</a></td>
- <td>juxtapose image thumbnails on an image canvas.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/morphology/">Morphology of shapes</a></td>
- <td>extract features, describe shapes, and recognize patterns in images.</td>
- </tr>
- <tr>
- <td><a href="../motion-picture/index.html">Motion picture support</a></td>
- <td>read and write the common image formats used in digital film work.</td>
- </tr>
- <tr>
- <td><a href="../architecture/index.html#multispectral">Multispectral imagery</a></td>
- <td>support multispectral imagery up to 32 bands, 22 of them meta channels.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/transform/#vision">Noise and color reduction</a></td>
- <td>Kuwahara Filter, mean-shift.</td>
- </tr>
- <tr>
- <td><a href="http://www.fmwconcepts.com/misc_tests/perceptual_hash_test_results_510/index.html">Perceptual hash</a></td>
- <td>map visually identical images to the same or similar hash-- useful in image retrieval, authentication, indexing, or copy detection as well as digital watermarking.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/blur/">Special effects</a></td>
- <td>blur, sharpen, threshold, or tint an image.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/text/">Text & comments</a></td>
- <td>insert descriptive or artistic text in an image.</td>
- </tr>
- <tr>
- <td><a href="../architecture/index.html#threads">Threads of execution support</a></td>
- <td>ImageMagick is thread safe and most internal algorithms execute in <a href="../openmp/index.html">parallel</a> to take advantage of speed-ups offered by multicore processor chips.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/resize/">Transform</a></td>
- <td>resize, rotate, deskew, crop, flip or trim an image.</td>
- </tr>
- <tr>
- <td><a href="https://usage.imagemagick.org/masking/">Transparency</a></td>
- <td>render portions of an image invisible.</td>
- </tr>
- <tr>
- <td><a href="../architecture/index.html#virtual-pixels">Virtual pixel support</a></td>
- <td>convenient access to pixels outside the image boundaries.</td>
- </tr>
-</table>
-</div>
-<br/>
+ <!-- Lead Description -->
+ <div class="row mb-5">
+ <div class="col-lg-10 mx-auto text-center">
+ <p class="lead text-body-secondary">
+ Use this ImageMagick sitemap to quickly jump to one of the areas of interest listed below. If you can't find what you want on this page, try our <a href="../search/index4840.html?q=ImageMagick&sa=" class="text-decoration-none fw-semibold">site search</a>.
+ </p>
+ </div>
+ </div>
-<h2><a class="anchor" id="legacy"></a>ImageMagick Legacy</h2>
-<p>We continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/">https://legacy.imagemagick.org</a>.</p>
-</div>
+ <!-- Sitemap Sections Grid -->
+ <div class="row g-4 mb-5">
+ <!-- Overview -->
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4" id="overview">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-info-circle text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Overview</h2>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="../index.html" class="text-decoration-none fw-semibold">Introduction</a>: convert, edit, or compose images from the command-line or program interface.</li>
+ <li><a href="../examples/index.html" class="text-decoration-none fw-semibold">Examples of ImageMagick usage</a>: a few examples that show what you can do with an image using ImageMagick.</li>
+ <li><a href="https://usage.imagemagick.org/" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Anthony Thyssen's examples of ImageMagick usage</a>: a comprehensive tutorial of using ImageMagick from the command line.</li>
+ <li><a href="../color/index.html" class="text-decoration-none fw-semibold">Color names</a>: how to specify a color name, a hex color, or a numerical RGB, RGBA, HSL, HSLA, CMYK, or CMYKA color.</li>
+ <li><a href="../color-management/index.html" class="text-decoration-none fw-semibold">Color management</a>: accurate color management with color profiles or in lieu of-- built-in gamma compression or expansion as demanded by the colorspace.</li>
+ <li><a href="../resources/index.html" class="text-decoration-none fw-semibold">Resources</a>: ImageMagick depends on external resources including configuration files, loadable modules, fonts, and environment variables.</li>
+ <li><a href="../openmp/index.html" class="text-decoration-none fw-semibold">Parallel execution</a>: ImageMagick is threaded to take advantage of speed-ups offered by the multicore processor chips.</li>
+ <li><a href="../security-policy/index.html" class="text-decoration-none fw-semibold">Security policy</a>: best practices strongly encourage you to configure a security policy that suits your local environment.</li>
+ <li><a href="../architecture/index.html" class="text-decoration-none fw-semibold">Architecture</a>: get to know more about the software and algorithms behind ImageMagick.</li>
+ <li><a href="../license/index.html" class="text-decoration-none fw-semibold">License</a>: the legally binding and authoritative terms and conditions for use, reproduction, and distribution of ImageMagick.</li>
+ <li><a href="../export/index.html" class="text-decoration-none fw-semibold">Export classification</a>: export control status of ImageMagick.</li>
+ <li><a href="../privacy-policy/index.html" class="text-decoration-none fw-semibold">Privacy policy</a>: we do not collect personal identifier information.</li>
+ <li><a href="../porting/index.html" class="text-decoration-none fw-semibold">ImageMagick version 7</a>: learn how ImageMagick version 7 differs from previous versions.</li>
+ <li><a href="../changelog/index.html" class="text-decoration-none fw-semibold">Changelog</a>: a chronological list of changes, bug fixes, and new features for each ImageMagick release.</li>
+ <li><a href="../history/index.html" class="text-decoration-none fw-semibold">History</a>: how ImageMagick was conceived and developed.</li>
+ </ul>
+ </div>
+ </div>
+ <!-- Download & Install -->
+ <div class="col-lg-6">
+ <div class="d-flex flex-column gap-4 h-100">
+ <!-- Download -->
+ <div class="card im-card p-4" id="download">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-download text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Download ImageMagick</h2>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="../download/index.html" class="text-decoration-none fw-semibold">Download ImageMagick</a>: ImageMagick source and binary distributions are available from a variety of FTP and Web mirrors.</li>
+ <li><a href="https://download.imagemagick.org/archive/" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Linux source</a>: Linux source distributions.</li>
+ <li><a href="https://download.imagemagick.org/archive/windows/" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Windows source</a>: Windows source distributions.</li>
+ <li><a href="https://download.imagemagick.org/archive/binaries/" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Linux and Windows binaries</a>: Linux and Windows binary distributions.</li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Git repository</a>: stable and development source releases.</li>
+ </ul>
+ </div>
+ <!-- Install -->
+ <div class="card im-card p-4" id="install">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-hdd-stack text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Install ImageMagick</h2>
+ </div>
+ <p class="small text-body-secondary mb-2">
+ You can install ImageMagick from source. However, if you don't have a proper development environment or if you're anxious to get started, download a ready-to-run Linux or Windows executable.
+ </p>
+ <ul class="list-unstyled mb-0 small text-body-secondary">
+ <li><a href="../install-source/index.html" class="text-decoration-none fw-semibold">Install from source</a>: ImageMagick builds under Windows, macOS, and Linux.</li>
+ </ul>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+ </div>
+ </div>
+
+ <!-- Command-line Tools -->
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4" id="command-line">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-terminal text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Command-line Tools</h2>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="../command-line-tools/index.html" class="text-decoration-none fw-semibold">Command-line tools</a>: overview of the ImageMagick commands.
+ <ul class="mt-2 d-flex flex-column gap-1">
+ <li><a href="../magick/index.html" class="text-decoration-none font-mono">magick</a>: convert, resize, blur, crop, dither, draw, flip, join, re-sample, and more.</li>
+ <li><a href="../animate/index.html" class="text-decoration-none font-mono">magick animate</a>: animates an image sequence on any X server.</li>
+ <li><a href="../compare/index.html" class="text-decoration-none font-mono">magick compare</a>: mathematically and visually annotate the difference between an image and its reconstruction.</li>
+ <li><a href="../composite/index.html" class="text-decoration-none font-mono">magick composite</a>: overlaps one image over another.</li>
+ <li><a href="../conjure/index.html" class="text-decoration-none font-mono">magick conjure</a>: interprets and executes scripts written in the Magick Scripting Language (MSL).</li>
+ <li><a href="../display/index.html" class="text-decoration-none font-mono">magick display</a>: displays an image or image sequence on any X server.</li>
+ <li><a href="../identify/index.html" class="text-decoration-none font-mono">magick identify</a>: describes the format and characteristics of one or more image files.</li>
+ <li><a href="../import/index.html" class="text-decoration-none font-mono">magick import</a>: saves any visible window on an X server and outputs it as an image file.</li>
+ <li><a href="../mogrify/index.html" class="text-decoration-none font-mono">magick mogrify</a>: resize, blur, crop, despeckle, dither, draw, flip, join, re-sample, etc.</li>
+ <li><a href="../montage/index.html" class="text-decoration-none font-mono">magick montage</a>: create a composite image by combining several separate images.</li>
+ <li><a href="../stream/index.html" class="text-decoration-none font-mono">magick stream</a>: lightweight tool to stream pixel components to choice of storage formats.</li>
+ </ul>
+ </li>
+ <li class="mt-2"><a href="../command-line-processing/index.html" class="text-decoration-none fw-semibold">Command line processing</a>: the anatomy of the command line.</li>
+ <li><a href="../command-line-options/index.html" class="text-decoration-none fw-semibold">Command line options</a>: annotated list of all options that can appear on the command-line.</li>
+ <li><a href="../fx/index.html" class="text-decoration-none fw-semibold">Fx</a>: apply a mathematical expression to an image or image channels.</li>
+ <li><a href="http://www.fmwconcepts.com/imagemagick/" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Fred's ImageMagick Scripts</a>: a plethora of command-line scripts for geometric transforms, blurs, sharpens, edging, and color manipulations.</li>
+ </ul>
+ </div>
+ </div>
+
+ <!-- Program Interfaces & Formats -->
+ <div class="col-lg-6">
+ <div class="d-flex flex-column gap-4 h-100">
+ <!-- Program Interfaces -->
+ <div class="card im-card p-4" id="program-interfaces">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-code-square text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Program Interfaces</h2>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="../develop/index.html" class="text-decoration-none fw-semibold">Program interfaces</a>: application programming interfaces.
+ <ul class="mt-2 d-flex flex-column gap-1">
+ <li><a href="http://common-lisp.net/project/cl-magick/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">CL-Magick</a>: Common Lisp interface.</li>
+ <li><a href="https://github.com/dlemstra/Magick.NET" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Magick.NET</a>: Windows .NET support.</li>
+ <li><a href="../magick%2b%2b/index.html" class="text-decoration-none" rel="noopener noreferrer" target="_blank">Magick++</a>: Object-oriented C++ interface.</li>
+ <li><a href="http://pecl.php.net/package/imagick" class="text-decoration-none" rel="noopener noreferrer" target="_blank">IMagick</a>: Native PHP extension.</li>
+ <li><a href="https://github.com/techblue/jmagick" class="text-decoration-none" rel="noopener noreferrer" target="_blank">JMagick</a>: Object-oriented Java interface.</li>
+ <li><a href="../magick-core/index.html" class="text-decoration-none">MagickCore</a>: C API for wizard-level developers.</li>
+ <li><a href="../magick-wand/index.html" class="text-decoration-none">MagickWand</a>: C language API.</li>
+ <li><a href="https://code.google.com/archive/p/nmagick" class="text-decoration-none" rel="noopener noreferrer" target="_blank">nMagick</a>: haXe and Neko platforms.</li>
+ <li><a href="https://wiki.freepascal.org/PascalMagick" class="text-decoration-none" rel="noopener noreferrer" target="_blank">PascalMagick</a>: Pascal binding.</li>
+ <li><a href="../perl-magick/index.html" class="text-decoration-none">PerlMagick</a>: Perl language interface.</li>
+ <li><a href="https://download.imagemagick.org/archive/python/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">PythonMagick</a>: Python interface.</li>
+ <li><a href="https://rmagick.github.io/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">RMagick</a>: Ruby interface.</li>
+ <li><a href="https://download.imagemagick.org/archive/tcl/" class="text-decoration-none" rel="noopener noreferrer" target="_blank">TclMagick</a>: Tcl-extension.</li>
+ </ul>
+ </li>
+ </ul>
+ </div>
+
+ <!-- Image Formats -->
+ <div class="card im-card p-4" id="format">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-file-earmark-image text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Image Formats</h2>
</div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="../formats/index.html" class="text-decoration-none fw-semibold">Supported image formats</a>: annotated list of all formats ImageMagick reads/writes.</li>
+ <li><a href="../motion-picture/index.html" class="text-decoration-none fw-semibold">Motion picture digital images</a>: SMPTE DPX Version 2.0 support.</li>
+ <li><a href="../high-dynamic-range/index.html" class="text-decoration-none fw-semibold">High dynamic-range images</a>: represent wide intensity range from direct sunlight to shadows.</li>
+ <li><a href="../magick-vector-graphics/index.html" class="text-decoration-none fw-semibold">Magick Vector Graphics</a>: modularized language for 2D vector/raster graphics.</li>
+ <li><a href="../miff/index.html" class="text-decoration-none fw-semibold">Magick Image File Format</a>: platform-independent format for storing bitmaps.</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!-- Help & Support -->
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4" id="help">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-question-circle text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Getting Help</h2>
</div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Discussions forums</a>: get help from fellow users and developers.</li>
+ </ul>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
+ </div>
+
+ <div class="col-lg-6">
+ <div class="card im-card h-100 p-4" id="support">
+ <div class="d-flex align-items-center gap-2 mb-3 border-bottom pb-2">
+ <i class="bi bi-shield-check text-primary fs-5"></i>
+ <h2 class="h4 fw-bold mb-0">Support ImageMagick</h2>
+ </div>
+ <ul class="list-unstyled d-flex flex-column gap-2 mb-0 small text-body-secondary">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" class="text-decoration-none fw-semibold" rel="noopener noreferrer" target="_blank">Report bugs and vulnerabilities</a>: high priority security fixes within 48 hours.</li>
+ <li><a href="../support/index.html" class="text-decoration-none fw-semibold">Sponsor ImageMagick</a>: contribute bug fixes, hardware, or funds to ensure project thrives.</li>
+ </ul>
</div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
</div>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ <!-- Miscellaneous Topics Section -->
+ <section id="miscellaneous" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-collection text-primary fs-4"></i>
+ <h2 class="h3 fw-bold mb-0">Miscellaneous Topics</h2>
+ </div>
+ <div class="card im-card overflow-hidden">
+ <div class="table-responsive" style="max-height: 75svh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-dark">
+ <tr>
+ <th scope="col" style="width: 30%;">Topic / Feature</th>
+ <th scope="col" style="width: 70%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><a href="https://usage.imagemagick.org/anim_basics/" class="fw-semibold text-primary text-decoration-none">Animation</a></td>
+ <td class="text-body">create a GIF animation sequence from a group of images.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#bilateral-blur" class="fw-semibold text-primary text-decoration-none">Bilateral blur</a></td>
+ <td class="text-body">non-linear, edge-preserving, and noise-reducing smoothing filter.</td>
+ </tr>
+ <tr>
+ <td><a href="../color-management/index.html" class="fw-semibold text-primary text-decoration-none">Color management</a></td>
+ <td class="text-body">accurate color management with color profiles or built-in gamma compression.</td>
+ </tr>
+ <tr>
+ <td><a href="../color-thresholding/index.html" class="fw-semibold text-primary text-decoration-none">Color thresholding</a></td>
+ <td class="text-body">force all pixels in the color range to white otherwise black.</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-processing/index.html" class="fw-semibold text-primary text-decoration-none">Command-line processing</a></td>
+ <td class="text-body">utilize ImageMagick from the command-line.</td>
+ </tr>
+ <tr>
+ <td><a href="https://en.wikipedia.org/wiki/Complex_text_layout" class="fw-semibold text-primary text-decoration-none">Complex text layout</a></td>
+ <td class="text-body">bidirectional text support and shaping.</td>
+ </tr>
+ <tr>
+ <td><a href="../composite/index.html" class="fw-semibold text-primary text-decoration-none">Composite</a></td>
+ <td class="text-body">overlap one image over another.</td>
+ </tr>
+ <tr>
+ <td><a href="../connected-components/index.html" class="fw-semibold text-primary text-decoration-none">Connected component labeling</a></td>
+ <td class="text-body">uniquely label connected regions in an image.</td>
+ </tr>
+ <tr>
+ <td><a href="../content-provenance-authenticity/index.html" class="fw-semibold text-primary text-decoration-none">Content provenance authenticity</a></td>
+ <td class="text-body">embed and verify content provenance using cryptographic keys, certificates, and manifests.</td>
+ </tr>
+ <tr>
+ <td><a href="../convex-hull/index.html" class="fw-semibold text-primary text-decoration-none">Convex hull</a></td>
+ <td class="text-body">smallest area convex polygon containing foreground objects plus minimum bounding box.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/crop/" class="fw-semibold text-primary text-decoration-none">Decorate</a></td>
+ <td class="text-body">add a border or frame to an image.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/transform/#vision" class="fw-semibold text-primary text-decoration-none">Delineate image features</a></td>
+ <td class="text-body">Canny edge detection, Hough lines.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/fourier/" class="fw-semibold text-primary text-decoration-none">Discrete Fourier transform</a></td>
+ <td class="text-body">implements forward and inverse DFT.</td>
+ </tr>
+ <tr>
+ <td><a href="../distribute-pixel-cache/index.html" class="fw-semibold text-primary text-decoration-none">Distributed pixel cache</a></td>
+ <td class="text-body">offload intermediate pixel storage to remote servers.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/draw/" class="fw-semibold text-primary text-decoration-none">Draw</a></td>
+ <td class="text-body">add shapes or text to an image.</td>
+ </tr>
+ <tr>
+ <td><a href="../cipher/index.html" class="fw-semibold text-primary text-decoration-none">Encipher or decipher an image</a></td>
+ <td class="text-body">convert ordinary images into unintelligible gibberish and back.</td>
+ </tr>
+ <tr>
+ <td><a href="../magick/index.html" class="fw-semibold text-primary text-decoration-none">Format conversion</a></td>
+ <td class="text-body">convert an image from one format to another (e.g. PNG to JPEG).</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/distorts/" class="fw-semibold text-primary text-decoration-none">Generalized pixel distortion</a></td>
+ <td class="text-body">correct for or induce image distortions including perspective.</td>
+ </tr>
+ <tr>
+ <td><a href="../architecture/index.html#distributed" class="fw-semibold text-primary text-decoration-none">Heterogeneous distributed processing</a></td>
+ <td class="text-body">OpenCL-enabled algorithms executing across heterogeneous platforms.</td>
+ </tr>
+ <tr>
+ <td><a href="../high-dynamic-range/index.html" class="fw-semibold text-primary text-decoration-none">High dynamic-range images</a></td>
+ <td class="text-body">accurately represent wide intensity levels from sunlight to shadows.</td>
+ </tr>
+ <tr>
+ <td><a href="../clahe/index.html" class="fw-semibold text-primary text-decoration-none">Histogram equalization</a></td>
+ <td class="text-body">use adaptive histogram equalization to improve contrast.</td>
+ </tr>
+ <tr>
+ <td><a href="../magick-cache/index.html" class="fw-semibold text-primary text-decoration-none">Image cache</a></td>
+ <td class="text-body">secure methods and tools to cache media or metadata locally.</td>
+ </tr>
+ <tr>
+ <td><a href="../fx/index.html" class="fw-semibold text-primary text-decoration-none">Image calculator</a></td>
+ <td class="text-body">apply mathematical expression to an image, sequence, or channels.</td>
+ </tr>
+ <tr>
+ <td><a href="../gradient/index.html" class="fw-semibold text-primary text-decoration-none">Image gradients</a></td>
+ <td class="text-body">create gradual blend of two colors (horizontal, vertical, circular).</td>
+ </tr>
+ <tr>
+ <td><a href="../identify/index.html" class="fw-semibold text-primary text-decoration-none">Image identification</a></td>
+ <td class="text-body">describe format and attributes of an image.</td>
+ </tr>
+ <tr>
+ <td><a href="../download/index.html#iOS" class="fw-semibold text-primary text-decoration-none">ImageMagick on the iPhone</a></td>
+ <td class="text-body">convert, edit, or compose images on iOS device.</td>
+ </tr>
+ <tr>
+ <td><a href="../architecture/index.html#tera-pixel" class="fw-semibold text-primary text-decoration-none">Large image support</a></td>
+ <td class="text-body">read, process, or write mega-, giga-, or tera-pixel image sizes.</td>
+ </tr>
+ <tr>
+ <td><a href="../montage/index.html" class="fw-semibold text-primary text-decoration-none">Montage</a></td>
+ <td class="text-body">juxtapose image thumbnails on a canvas.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/morphology/" class="fw-semibold text-primary text-decoration-none">Morphology of shapes</a></td>
+ <td class="text-body">extract features, describe shapes, and recognize patterns.</td>
+ </tr>
+ <tr>
+ <td><a href="../motion-picture/index.html" class="fw-semibold text-primary text-decoration-none">Motion picture support</a></td>
+ <td class="text-body">read and write common digital film formats.</td>
+ </tr>
+ <tr>
+ <td><a href="../architecture/index.html#multispectral" class="fw-semibold text-primary text-decoration-none">Multispectral imagery</a></td>
+ <td class="text-body">support multispectral imagery up to 32 bands.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/transform/#vision" class="fw-semibold text-primary text-decoration-none">Noise and color reduction</a></td>
+ <td class="text-body">Kuwahara Filter, mean-shift.</td>
+ </tr>
+ <tr>
+ <td><a href="http://www.fmwconcepts.com/misc_tests/perceptual_hash_test_results_510/index.html" class="fw-semibold text-primary text-decoration-none" rel="noopener noreferrer" target="_blank">Perceptual hash</a></td>
+ <td class="text-body">map visually identical images to similar hashes for retrieval.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/blur/" class="fw-semibold text-primary text-decoration-none">Special effects</a></td>
+ <td class="text-body">blur, sharpen, threshold, or tint an image.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/text/" class="fw-semibold text-primary text-decoration-none">Text & comments</a></td>
+ <td class="text-body">insert descriptive or artistic text.</td>
+ </tr>
+ <tr>
+ <td><a href="../architecture/index.html#threads" class="fw-semibold text-primary text-decoration-none">Threads of execution support</a></td>
+ <td class="text-body">thread safe execution in parallel on multicore processors.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/resize/" class="fw-semibold text-primary text-decoration-none">Transform</a></td>
+ <td class="text-body">resize, rotate, deskew, crop, flip, or trim.</td>
+ </tr>
+ <tr>
+ <td><a href="https://usage.imagemagick.org/masking/" class="fw-semibold text-primary text-decoration-none">Transparency</a></td>
+ <td class="text-body">render portions of an image invisible.</td>
+ </tr>
+ <tr>
+ <td><a href="../architecture/index.html#virtual-pixels" class="fw-semibold text-primary text-decoration-none">Virtual pixel support</a></td>
+ <td class="text-body">convenient access to pixels outside image boundaries.</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+ </section>
+
+ <!-- Legacy Section -->
+ <div class="card im-card p-4 bg-body-tertiary text-center" id="legacy">
+ <h3 class="fw-bold mb-2">ImageMagick Legacy</h3>
+ <p class="small text-body-secondary mb-0">
+ We continue to maintain the legacy release of ImageMagick, version 6, at <a href="https://legacy.imagemagick.org/" class="text-decoration-none fw-semibold font-mono" rel="noopener noreferrer" target="_blank">https://legacy.imagemagick.org</a>.
+ </p>
+ </div>
+</div>
+
+ </div>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/source/policy-limited.xml b/www/source/policy-limited.xml
index d5968dee7..2b3f03490 100644
--- a/www/source/policy-limited.xml
+++ b/www/source/policy-limited.xml
@@ -16,96 +16,126 @@
value CDATA #IMPLIED
>
]>
+
<!--
- Creating a security policy that fits your specific local environment
- before making use of ImageMagick is highly advised. You can find guidance on
- setting up this policy at https://imagemagick.org/script/security-policy.php,
- and it's important to verify your policy using the validation tool located
- at https://imagemagick-secevaluator.doyensec.com/. We also strongly
- recommend that all users validate their security assumptions by testing their
- configurations after making any policy changes. This helps ensure that the
- intended restrictions are functioning as expected in their specific
- deployment environment.
-
-
- Limited ImageMagick security policy:
-
- The primary objective of the limited security policy is to find a
- middle ground between convenience and security. This policy involves the
- deactivation of potentially hazardous functionalities, like specific coders
- such as SVG or HTTP. Furthermore, it establishes several constraints on
- the utilization of resources like memory, storage, and processing duration,
- all of which are adjustable. This policy proves advantageous in situations
- where there's a need to mitigate the potential threat of handling possibly
- malicious or demanding images, all while retaining essential capabilities
- for prevalent image formats.
+ ImageMagick Security Policy
+
+ This policy is intended for general-purpose deployments that process
+ potentially untrusted images while maintaining support for common image
+ formats and workflows.
+
+ The policy balances usability and security by:
+
+ * Limiting resource consumption (CPU time, memory, disk usage, image
+ dimensions, and sequence length).
+ * Blocking potentially dangerous path access methods such as indirect
+ reads (@files) and pipes.
+ * Preventing access to sensitive filesystem locations.
+ * Restricting high-risk coders that have historically been involved in
+ external content processing, scripting, or complex parsers.
+ * Limiting large allocation requests that could otherwise lead to
+ excessive memory consumption.
+
+ After modifying this policy, test and validate the resulting behavior in
+ your environment to ensure the restrictions are operating as intended.
+
+ Documentation:
+ https://imagemagick.org/script/security-policy.php
+
+ Policy Evaluator:
+ https://imagemagick-secevaluator.doyensec.com/
-->
+
<policymap>
- <!-- Set maximum parallel threads. -->
+
+ <!-- Maximum number of worker threads. -->
<policy domain="resource" name="thread" value="4"/>
- <!-- Set maximum time in seconds. When this limit is exceeded, an exception
- is thrown and processing stops. -->
+
+ <!-- Maximum execution time (seconds) before processing is terminated. -->
<policy domain="resource" name="time" value="240"/>
- <!-- Set maximum number of open pixel cache files. When this limit is
- exceeded, any subsequent pixels cached to disk are closed and reopened
- on demand. -->
+
+ <!-- Maximum number of simultaneously open pixel cache files. -->
<policy domain="resource" name="file" value="768"/>
- <!-- Set maximum amount of memory in bytes to allocate for the pixel cache
- from the heap. When this limit is exceeded, the image pixels are cached
- to memory-mapped disk. -->
+
+ <!-- Maximum heap memory used for pixel cache data. Excess pixels are
+ stored in mapped or disk-backed cache. -->
<policy domain="resource" name="memory" value="768MiB"/>
- <!-- Set maximum amount of memory map in bytes to allocate for the pixel
- cache. When this limit is exceeded, the image pixels are cached to
- disk. -->
+
+ <!-- Maximum memory-mapped pixel cache size. Excess cache data is
+ written to disk. -->
<policy domain="resource" name="map" value="2GiB"/>
- <!-- Set the maximum width * height of an image that can reside in the pixel
- cache memory. Images that exceed the area limit are cached to disk. -->
- <policy domain="resource" name="area" value="8KP"/>
- <!-- Set maximum amount of disk space in bytes permitted for use by the pixel
- cache. When this limit is exceeded, the pixel cache is not created
- and an exception is thrown. -->
+
+ <!-- Maximum in-memory image area before pixels are cached to disk. -->
+ <policy domain="resource" name="area" value="32MP"/>
+
+ <!-- Maximum disk space available for pixel cache operations. -->
<policy domain="resource" name="disk" value="2GiB"/>
- <!-- Set the maximum length of an image sequence. When this limit is
- exceeded, an exception is thrown. -->
+
+ <!-- Maximum number of images permitted in a sequence. -->
<policy domain="resource" name="list-length" value="64"/>
- <!-- Set the maximum width of an image. When this limit is exceeded, an
- exception is thrown. -->
+
+ <!-- Maximum image width. -->
<policy domain="resource" name="width" value="16KP"/>
- <!-- Set the maximum height of an image. When this limit is exceeded, an
- exception is thrown. -->
+
+ <!-- Maximum image height. -->
<policy domain="resource" name="height" value="16KP"/>
- <!-- Periodically yield the CPU for at least the time specified in
- milliseconds. -->
+
+ <!-- Optional: periodically yield CPU time to improve system responsiveness. -->
<!-- <policy domain="resource" name="throttle" value="2"/> -->
- <!-- Do not create temporary files in the default shared directories, instead
- specify a private area to store only ImageMagick temporary files. -->
+
+ <!-- Optional: store temporary files in a dedicated private directory. -->
<!-- <policy domain="resource" name="temporary-path" value="/magick/tmp/"/> -->
- <!-- Force memory initialization by memory mapping select memory
- allocations. -->
+
+ <!-- Optional: force anonymous memory mapping for selected cache allocations. -->
<!-- <policy domain="cache" name="memory-map" value="anonymous"/> -->
- <!-- Ensure all image data is fully flushed and synchronized to disk. -->
+
+ <!-- Optional: fully synchronize image cache data to disk before closing. -->
<!-- <policy domain="cache" name="synchronize" value="true"/> -->
- <!-- Replace passphrase for secure distributed processing -->
- <!-- <policy domain="cache" name="shared-secret" value="secret-passphrase" stealth="true"/> -->
- <!-- Do not permit any delegates to execute. -->
+
+ <!-- Optional: shared secret used by distributed pixel cache operations.
+ Replace with a site-specific value if enabled. -->
+ <!-- <policy domain="cache" name="shared-secret"
+ value="secret-passphrase" stealth="true"/> -->
+
+ <!-- Optional: disable execution of all delegates. -->
<!-- <policy domain="delegate" rights="none" pattern="*"/> -->
- <!-- Do not permit any image filters to load. -->
+
+ <!-- Optional: disable loading of all image filter modules. -->
<!-- <policy domain="filter" rights="none" pattern="*"/> -->
- <!-- Don't read/write from/to stdin/stdout. -->
+
+ <!-- Optional: disable stdin/stdout image processing ("-"). -->
<!-- <policy domain="path" rights="none" pattern="-"/> -->
- <!-- don't read sensitive paths. -->
+
+ <!-- Prevent access to sensitive system configuration files. -->
<policy domain="path" rights="none" pattern="/etc/*"/>
- <!-- Indirect reads are not permitted. -->
+
+ <!-- Prevent indirect file reads using @filename syntax. -->
<policy domain="path" rights="none" pattern="@*"/>
- <!-- These image types are security risks on read, but write is fine -->
- <policy domain="module" rights="write" pattern="{MSL,MVG,PS,SVG,TXT,URL,XPS}"/>
- <!-- This policy sets the number of times to replace content of certain
- memory buffers and temporary files before they are freed or deleted. -->
+
+ <!-- Prevent use of pipes for reading or writing image data. -->
+ <policy domain="path" rights="none" pattern="|*"/>
+
+ <!--
+ Restrict high-risk coders.
+
+ Read access is denied while write access remains permitted.
+ This allows ImageMagick to generate these formats without accepting
+ potentially untrusted input through them.
+ -->
+ <policy domain="module" rights="write"
+ pattern="{MSL,MVG,PDF,PS,SVG,TXT,URL,XPS}"/>
+
+ <!-- Optional: overwrite temporary files and buffers before deletion. -->
<!-- <policy domain="system" name="shred" value="1"/> -->
- <!-- Enable the initialization of buffers with zeros, resulting in a minor
- performance penalty but with improved security. -->
+
+ <!-- Optional: initialize allocated memory with zeros for improved security. -->
<!-- <policy domain="system" name="memory-map" value="anonymous"/> -->
- <!-- Set the maximum amount of memory in bytes that are permitted for
- allocation requests. -->
+
+ <!-- Maximum size of a single allocation request. -->
<policy domain="system" name="max-memory-request" value="512MiB"/>
+
+ <!-- Maximum size and count of an image profile. -->
+ <policy domain="system" name="max-profile-size" value="16MiB"/>
+ <policy domain="system" name="max-profile-count" value="16"/>
+
</policymap>
diff --git a/www/source/policy-open.xml b/www/source/policy-open.xml
index b77f19b01..76b422558 100644
--- a/www/source/policy-open.xml
+++ b/www/source/policy-open.xml
@@ -1,9 +1,7 @@
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE policymap [
<!ELEMENT policymap (policy)*>
- <!ATTLIST policymap
- xmlns CDATA #FIXED ""
- >
+ <!ATTLIST policymap xmlns CDATA #FIXED "">
<!ELEMENT policy EMPTY>
<!ATTLIST policy
@@ -16,155 +14,212 @@
value CDATA #IMPLIED
>
]>
+
<!--
- Creating a security policy that fits your specific local environment
- before making use of ImageMagick is highly advised. You can find guidance on
- setting up this policy at https://imagemagick.org/script/security-policy.php,
- and it's important to verify your policy using the validation tool located
- at https://imagemagick-secevaluator.doyensec.com/. We also strongly
- recommend that all users validate their security assumptions by testing their
- configurations after making any policy changes. This helps ensure that the
- intended restrictions are functioning as expected in their specific
- deployment environment.
+ ImageMagick Security Policy Configuration
+ ========================================
+ This file provides the default "open" ImageMagick security policy along with
+ numerous optional hardening examples. The default configuration permits broad
+ functionality and is appropriate only for trusted environments such as
+ systems protected by firewalls, isolated containers, or tightly controlled
+ internal workloads.
- Open ImageMagick security policy:
+ For untrusted input or multi-tenant environments, review and customize this
+ policy to match your security requirements.
- The default policy for ImageMagick installations is the open security
- policy. This policy is designed for usage in secure settings like those
- protected by firewalls or within Docker containers. Within this framework,
- ImageMagick enjoys broad access to resources and functionalities. This policy
- provides convenient and adaptable options for image manipulation. However,
- it's important to note that it might present security vulnerabilities in
- less regulated conditions. Thus, organizations should thoroughly assess
- the appropriateness of the open policy according to their particular use
- case and security prerequisites.
+ Additional documentation:
+ https://imagemagick.org/script/security-policy.php
- ImageMagick security policies in a nutshell:
+ Security policy validator:
+ https://imagemagick-secevaluator.doyensec.com/
- Domains include system, delegate, coder, filter, module, path, or resource.
+ Important:
+ * Security policies should be reviewed for your specific deployment.
+ * Test all policy changes to confirm they behave as expected.
+ * Rules are processed in order.
+ * Policy names, domains, and patterns are case-sensitive.
- Rights include none, read, write, execute and all. Use | to combine them,
- for example: "read | write" to permit read from, or write to, a path.
+ Domains:
+ system, resource, cache, delegate, filter, module, path, and coder
- Use a glob expression as a pattern.
+ Rights:
+ none, read, write, execute, all
- Suppose we do not want users to process MPEG video images, use this policy:
+ Multiple rights may be combined:
+ rights="read|write"
- <policy domain="module" rights="none" pattern="video" />
+ Patterns use ImageMagick glob matching.
- Here we do not want users reading images from HTTP:
+ Example: disable all video modules
- <policy domain="coder" rights="none" pattern="HTTP" />
+ <policy domain="module" rights="none" pattern="VIDEO"/>
- The /repository file system is restricted to read only. We use a glob
- expression to match all paths that start with /repository:
+ Example: disable HTTP image reads
- <policy domain="path" rights="read" pattern="/repository/*" />
+ <policy domain="coder" rights="none" pattern="HTTP"/>
- Prevent users from executing any image filters:
+ Example: permit read-only access to a repository
- <policy domain="filter" rights="none" pattern="*" />
+ <policy domain="path" rights="read"
+ pattern="/repository/*"/>
- Cache large images to disk rather than memory:
+ Example: disable all image filters
- <policy domain="resource" name="area" value="1GP"/>
+ <policy domain="filter" rights="none" pattern="*"/>
- Use the default system font unless overridden by the application:
+ Example: restrict processing to common web-safe formats
- <policy domain="system" name="font" value="/usr/share/fonts/favorite.ttf"/>
+ <policy domain="delegate" rights="none" pattern="*"/>
+ <policy domain="filter" rights="none" pattern="*"/>
+ <policy domain="coder" rights="none" pattern="*"/>
+ <policy domain="coder" rights="read|write"
+ pattern="{GIF,JPEG,PNG,WEBP}"/>
+-->
- Define arguments for the memory, map, area, width, height and disk resources
- with SI prefixes (.e.g 100MB). In addition, resource policies are maximums
- for each instance of ImageMagick (e.g. policy memory limit 1GB, -limit 2GB
- exceeds policy maximum so memory limit is 1GB).
+<policymap>
- Rules are processed in order. Here we want to restrict ImageMagick to only
- read or write a small subset of proven web-safe image types:
+ <!-- Deny use of undefined domains. -->
+ <policy domain="Undefined" rights="none"/>
- <policy domain="delegate" rights="none" pattern="*" />
- <policy domain="filter" rights="none" pattern="*" />
- <policy domain="coder" rights="none" pattern="*" />
- <policy domain="coder" rights="read|write" pattern="{GIF,JPEG,PNG,WEBP}" />
+ <!-- ================================================================== -->
+ <!-- Resource Policies -->
+ <!-- ================================================================== -->
- See https://imagemagick.org/script/security-policy.php for a deeper
- understanding of ImageMagick security policies.
--->
-<policymap>
- <policy domain="Undefined" rights="none"/>
- <!-- Set maximum parallel threads. -->
+ <!-- Maximum number of worker threads. -->
<!-- <policy domain="resource" name="thread" value="2"/> -->
- <!-- Set maximum time to live in seconds or mnemonics, e.g. "2 minutes". When
- this limit is exceeded, an exception is thrown and processing stops. -->
+
+ <!-- Maximum execution time before processing is aborted. -->
<!-- <policy domain="resource" name="time" value="120"/> -->
- <!-- Set maximum number of open pixel cache files. When this limit is
- exceeded, any subsequent pixels cached to disk are closed and reopened
- on demand. -->
+
+ <!-- Maximum number of open pixel cache files. -->
<!-- <policy domain="resource" name="file" value="768"/> -->
- <!-- Set maximum amount of memory in bytes to allocate for the pixel cache
- from the heap. When this limit is exceeded, the image pixels are cached
- to memory-mapped disk. -->
+
+ <!-- Maximum heap memory available to the pixel cache. -->
<!-- <policy domain="resource" name="memory" value="256MiB"/> -->
- <!-- Set maximum amount of memory map in bytes to allocate for the pixel
- cache. When this limit is exceeded, the image pixels are cached to
- disk. -->
+
+ <!-- Maximum memory-mapped cache allocation. -->
<!-- <policy domain="resource" name="map" value="512MiB"/> -->
- <!-- Set the maximum width * height of an image that can reside in the pixel
- cache memory. Images that exceed the area limit are cached to disk. -->
+
+ <!-- Maximum image area (width × height) cached in memory. -->
<!-- <policy domain="resource" name="area" value="16KP"/> -->
- <!-- Set maximum amount of disk space in bytes permitted for use by the pixel
- cache. When this limit is exceeded, the pixel cache is not created
- and an exception is thrown. -->
+
+ <!-- Maximum disk space available to the pixel cache. -->
<!-- <policy domain="resource" name="disk" value="1GiB"/> -->
- <!-- Set the maximum length of an image sequence. When this limit is
- exceeded, an exception is thrown. -->
+
+ <!-- Maximum number of images permitted in a sequence. -->
<!-- <policy domain="resource" name="list-length" value="32"/> -->
- <!-- Set the maximum width of an image. When this limit is exceeded, an
- exception is thrown. -->
+
+ <!-- Maximum image width. -->
<!-- <policy domain="resource" name="width" value="8KP"/> -->
- <!-- Set the maximum height of an image. When this limit is exceeded, an
- exception is thrown. -->
+
+ <!-- Maximum image height. -->
<!-- <policy domain="resource" name="height" value="8KP"/> -->
- <!-- Periodically yield the CPU for at least the time specified in
- milliseconds. -->
+
+ <!-- Yield the CPU periodically (milliseconds). -->
<!-- <policy domain="resource" name="throttle" value="2"/> -->
- <!-- Do not create temporary files in the default shared directories, instead
- specify a private area to store only ImageMagick temporary files. -->
- <!-- <policy domain="resource" name="temporary-path" value="/magick/tmp/"/> -->
- <!-- Force memory initialization by memory mapping select memory
- allocations. -->
- <!-- <policy domain="cache" name="memory-map" value="anonymous"/> -->
- <!-- Ensure all image data is fully flushed and synchronized to disk. -->
- <!-- <policy domain="cache" name="synchronize" value="true"/> -->
- <!-- Replace passphrase for secure distributed processing -->
- <!-- <policy domain="cache" name="shared-secret" value="secret-passphrase" stealth="true"/> -->
- <!-- Do not permit any delegates to execute. -->
+
+ <!-- Use a private directory for ImageMagick temporary files. -->
+ <!-- <policy domain="resource" name="temporary-path"
+ value="/magick/tmp/"/> -->
+
+ <!-- ================================================================== -->
+ <!-- Pixel Cache Policies -->
+ <!-- ================================================================== -->
+
+ <!-- Use anonymous memory mapping to initialize cache memory. -->
+ <!-- <policy domain="cache" name="memory-map"
+ value="anonymous"/> -->
+
+ <!-- Force cache data to be flushed and synchronized to disk. -->
+ <!-- <policy domain="cache" name="synchronize"
+ value="true"/> -->
+
+ <!-- Shared secret for distributed pixel cache clients. -->
+ <!-- <policy domain="cache" name="shared-secret"
+ value="secret-passphrase" stealth="true"/> -->
+
+ <!-- Maximum authenticated distributed pixel cache clients. -->
+ <!-- <policy domain="cache" name="max-dpc-clients"
+ value="128"/> -->
+
+ <!-- Maximum unauthenticated distributed pixel cache clients. -->
+ <!-- <policy domain="cache"
+ name="max-dpc-unauthenticated-clients"
+ value="16"/> -->
+
+ <!-- ================================================================== -->
+ <!-- Delegate and Filter Policies -->
+ <!-- ================================================================== -->
+
+ <!-- Disable execution of all delegates. -->
<!-- <policy domain="delegate" rights="none" pattern="*"/> -->
- <!-- Do not permit any image filters to load. -->
+
+ <!-- Disable loading of all image filters. -->
<!-- <policy domain="filter" rights="none" pattern="*"/> -->
- <!-- Don't read/write from/to stdin/stdout. -->
+
+ <!-- ================================================================== -->
+ <!-- Path Restrictions -->
+ <!-- ================================================================== -->
+
+ <!-- Disallow stdin and stdout image I/O. -->
<!-- <policy domain="path" rights="none" pattern="-"/> -->
- <!-- don't read sensitive paths. -->
+
+ <!-- Prevent access to sensitive system locations. -->
<!-- <policy domain="path" rights="none" pattern="/etc/*"/> -->
- <!-- Indirect reads are not permitted. -->
+
+ <!-- Disable indirect file reads (@filename). -->
<!-- <policy domain="path" rights="none" pattern="@*"/> -->
- <!-- These image types are security risks on read, but write is fine -->
- <!-- <policy domain="module" rights="write" pattern="{MSL,MVG,PS,SVG,TXT,URL,XPS}"/> -->
- <!-- This policy sets the number of times to replace content of certain
- memory buffers and temporary files before they are freed or deleted. -->
+
+ <!-- Disable pipe execution. -->
+ <!-- <policy domain="path" rights="none" pattern="|*"/> -->
+
+ <!-- ================================================================== -->
+ <!-- Module Restrictions -->
+ <!-- ================================================================== -->
+
+ <!--
+ Disable reading of higher-risk formats while still permitting writes.
+
+ Common candidates include:
+ MSL, MVG, PDF, PS, SVG, TXT, URL, and XPS
+
+ Review carefully before enabling.
+ -->
+ <!-- <policy domain="module" rights="write"
+ pattern="{MSL,MVG,PDF,PS,SVG,TXT,URL,XPS}"/> -->
+
+ <!-- ================================================================== -->
+ <!-- System Policies -->
+ <!-- ================================================================== -->
+
+ <!-- Overwrite temporary data before release or deletion. -->
<!-- <policy domain="system" name="shred" value="1"/> -->
- <!-- Enable the initialization of buffers with zeros, resulting in a minor
- performance penalty but with improved security. -->
- <!-- <policy domain="system" name="memory-map" value="anonymous"/> -->
- <!-- Set the maximum amount of memory in bytes that are permitted for
- allocation requests. -->
- <!-- <policy domain="system" name="max-memory-request" value="256MiB"/> -->
- <!-- If the basename of path is a symbolic link, the open fails -->
- <!-- <policy domain="system" name="symlink" rights="none" pattern="follow"/> -->
- <!-- Blocks all SVG entity‑substitution attempts by denying the svg:substitute-entities define -->
- <!-- <policy domain="system" name="svg" rights="none" pattern="substitute-entities"/> -->
- <!-- Set the maximum distributed pixel cache clients -->
- <!-- <policy domain="cache" name="max-dpc-clients" value="128"/> -->
- <!-- Set the maximum distributed pixel cache unauthenticated clients -->
- <!-- <policy domain="cache" name="max-dpc-unauthenticated-clients" value="16"/> -->
+
+ <!-- Initialize newly allocated memory with zeros. -->
+ <!-- <policy domain="system" name="memory-map"
+ value="anonymous"/> -->
+
+ <!-- Maximum permitted single memory allocation request. -->
+ <!-- <policy domain="system" name="max-memory-request"
+ value="256MiB"/> -->
+
+ <!-- Maximum size and count of an image profile. -->
+ <!-- <policy domain="system" name="max-profile-size"
+ value="16MiB"/> -->
+ <!-- <policy domain="system" name="max-profile-count"
+ value="16"/> -->
+
+ <!-- Refuse paths whose basename is a symbolic link. -->
+ <!-- <policy domain="system"
+ name="symlink"
+ rights="none"
+ pattern="follow"/> -->
+
+ <!-- Disable SVG entity substitution. -->
+ <!-- <policy domain="system"
+ name="svg"
+ rights="none"
+ pattern="substitute-entities"/> -->
+
</policymap>
diff --git a/www/source/policy-secure.xml b/www/source/policy-secure.xml
index b328769ac..036ada73e 100644
--- a/www/source/policy-secure.xml
+++ b/www/source/policy-secure.xml
@@ -16,107 +16,127 @@
value CDATA #IMPLIED
>
]>
+
<!--
- Creating a security policy that fits your specific local environment
- before making use of ImageMagick is highly advised. You can find guidance on
- setting up this policy at https://imagemagick.org/script/security-policy.php,
- and it's important to verify your policy using the validation tool located
- at https://imagemagick-secevaluator.doyensec.com/. We also strongly
- recommend that all users validate their security assumptions by testing their
- configurations after making any policy changes. This helps ensure that the
- intended restrictions are functioning as expected in their specific
- deployment environment.
-
-
- Secure ImageMagick security policy:
-
- This stringent security policy prioritizes the implementation of
- rigorous controls and restricted resource utilization to establish a
- profoundly secure setting while employing ImageMagick. It deactivates
- conceivably hazardous functionalities, including specific coders like
- SVG or HTTP. The policy promotes the tailoring of security measures to
- harmonize with the requirements of the local environment and the guidelines
- of the organization. This protocol encompasses explicit particulars like
- limitations on memory consumption, sanctioned pathways for reading and
- writing, confines on image sequences, the utmost permissible duration of
- workflows, allocation of disk space intended for image data, and even an
- undisclosed passphrase for remote connections. By adopting this robust
- policy, entities can elevate their overall security stance and alleviate
- potential vulnerabilities.
+ ImageMagick Security Policy
+
+ Creating a security policy that fits your specific environment before using
+ ImageMagick is highly recommended. Documentation is available at:
+
+ https://imagemagick.org/script/security-policy.php
+
+ Validate policy changes with the ImageMagick security policy evaluator:
+
+ https://imagemagick-secevaluator.doyensec.com/
+
+ After making policy changes, test and validate your configuration to ensure
+ restrictions are functioning as intended in your deployment environment.
+
+ This policy implements a restrictive security posture suitable for processing
+ untrusted images. It limits resource consumption, disables delegates and
+ filters, restricts filesystem access, blocks indirect reads and pipes, and
+ prevents reading several historically high-risk formats while continuing to
+ permit writing them when required. Review and adjust these settings to meet
+ your organization's operational and security requirements.
-->
+
<policymap>
- <!-- Set maximum parallel threads. -->
+
+ <!-- Maximum number of processing threads. -->
<policy domain="resource" name="thread" value="2"/>
- <!-- Set maximum time in seconds. When this limit is exceeded, an exception
- is thrown and processing stops. -->
+
+ <!-- Maximum execution time in seconds before processing is aborted. -->
<policy domain="resource" name="time" value="120"/>
- <!-- Set maximum number of open pixel cache files. When this limit is
- exceeded, any subsequent pixels cached to disk are closed and reopened
- on demand. -->
+
+ <!-- Maximum number of open pixel cache files. -->
<policy domain="resource" name="file" value="768"/>
- <!-- Set maximum amount of memory in bytes to allocate for the pixel cache
- from the heap. When this limit is exceeded, the image pixels are cached
- to memory-mapped disk. -->
+
+ <!-- Maximum heap memory available for pixel cache data. -->
<policy domain="resource" name="memory" value="768MiB"/>
- <!-- Set maximum amount of memory map in bytes to allocate for the pixel
- cache. When this limit is exceeded, the image pixels are cached to
- disk. -->
+
+ <!-- Maximum memory-mapped cache size before disk caching is required. -->
<policy domain="resource" name="map" value="2GiB"/>
- <!-- Set the maximum width * height of an image that can reside in the pixel
- cache memory. Images that exceed the area limit are cached to disk. -->
- <policy domain="resource" name="area" value="8KP"/>
- <!-- Set maximum amount of disk space in bytes permitted for use by the pixel
- cache. When this limit is exceeded, the pixel cache is not created
- and an exception is thrown. -->
+
+ <!-- Maximum image area allowed in memory before disk caching is used. -->
+ <policy domain="resource" name="area" value="32MP"/>
+
+ <!-- Maximum disk space available for the pixel cache. -->
<policy domain="resource" name="disk" value="2GiB"/>
- <!-- Set the maximum length of an image sequence. When this limit is
- exceeded, an exception is thrown. -->
+
+ <!-- Maximum number of images permitted in a sequence. -->
<policy domain="resource" name="list-length" value="32"/>
- <!-- Set the maximum width of an image. When this limit is exceeded, an
- exception is thrown. -->
+
+ <!-- Maximum permitted image width. -->
<policy domain="resource" name="width" value="8KP"/>
- <!-- Set the maximum height of an image. When this limit is exceeded, an
- exception is thrown. -->
+
+ <!-- Maximum permitted image height. -->
<policy domain="resource" name="height" value="8KP"/>
- <!-- Periodically yield the CPU for at least the time specified in
- milliseconds. -->
+
+ <!-- Periodically yield CPU time (milliseconds). -->
<!-- <policy domain="resource" name="throttle" value="2"/> -->
- <!-- Dynamically yield the CPU relative to the system load average. -->
+
+ <!-- Dynamically adjust CPU usage based on system load. -->
<!-- <policy domain="resource" name="dynamic-throttle" value="true"/> -->
- <!-- Do not create temporary files in the default shared directories, instead
- specify a private area to store only ImageMagick temporary files. -->
+
+ <!-- Use a dedicated directory for ImageMagick temporary files. -->
<!-- <policy domain="resource" name="temporary-path" value="/magick/tmp/"/> -->
- <!-- Force memory initialization by memory mapping select memory
- allocations. -->
+
+ <!-- Zero-initialize selected allocations using anonymous memory mapping. -->
<policy domain="cache" name="memory-map" value="anonymous"/>
- <!-- Ensure all image data is fully flushed and synchronized to disk. -->
+
+ <!-- Force cache data to be synchronized to disk. -->
<policy domain="cache" name="synchronize" value="true"/>
- <!-- Replace passphrase for secure distributed processing -->
- <!-- <policy domain="cache" name="shared-secret" value="secret-passphrase" stealth="true"/> -->
- <!-- Do not permit any delegates to execute. -->
+
+ <!-- Shared secret for distributed cache operations. -->
+ <!-- <policy domain="cache" name="shared-secret"
+ value="secret-passphrase" stealth="true"/> -->
+
+ <!-- Disable execution of all delegates. -->
<policy domain="delegate" rights="none" pattern="*"/>
- <!-- Do not permit any image filters to load. -->
+
+ <!-- Disable loading of all image filters. -->
<policy domain="filter" rights="none" pattern="*"/>
- <!-- Don't read/write from/to stdin/stdout. -->
+
+ <!-- Prevent reading from stdin and writing to stdout. -->
<policy domain="path" rights="none" pattern="-"/>
- <policy domain="path" rights="none" pattern="[Ff][Dd]:*"/>
- <!-- Sensitive paths are not permitted. -->
+
+ <!-- Prevent access to file descriptors. -->
+ <policy domain="path" rights="none" pattern="[Ff][Dd\]:*"/>
+
+ <!-- Prevent access to sensitive system directories. -->
<policy domain="path" rights="none" pattern="/etc/*"/>
- <!-- Relative paths are not permitted. -->
+
+ <!-- Prevent directory traversal via relative paths. -->
<policy domain="path" rights="none" pattern="*../*"/>
- <!-- Indirect reading is not permitted. -->
+
+ <!-- Disable indirect file reads (@filename syntax). -->
<policy domain="path" rights="none" pattern="@*"/>
- <!-- These image types are security risks on read, but write is fine -->
- <policy domain="module" rights="write" pattern="{MSL,MVG,PS,SVG,TXT,URL,XPS}"/>
- <!-- This policy sets the number of times to replace content of certain
- memory buffers and temporary files before they are freed or deleted. -->
+
+ <!-- Disable pipe-based I/O. -->
+ <policy domain="path" rights="none" pattern="|*"/>
+
+ <!--
+ Permit writing, but not reading, of high-risk formats and pseudo-formats.
+ Reads are blocked; writes remain available when needed.
+ -->
+ <policy domain="module" rights="write"
+ pattern="{MSL,MVG,PDF,PS,SVG,TXT,URL,XPS}"/>
+
+ <!-- Number of overwrite passes before temporary data is deleted. -->
<policy domain="system" name="shred" value="1"/>
- <!-- Enable the initialization of buffers with zeros, resulting in a minor
- performance penalty but with improved security. -->
+
+ <!-- Use anonymous memory mapping for improved memory safety. -->
<policy domain="system" name="memory-map" value="anonymous"/>
- <!-- Set the maximum amount of memory in bytes that are permitted for
- allocation requests. -->
+
+ <!-- Maximum single memory allocation request. -->
<policy domain="system" name="max-memory-request" value="256MiB"/>
- <!-- If the basename of path is a symbolic link, the open fails -->
- <policy domain="system" name="symlink" rights="none" pattern="follow"/>
+
+ <!-- Maximum size and count of a single image profile. -->
+ <policy domain="system" name="max-profile-size" value="16MiB"/>
+ <policy domain="system" name="max-profile-count" value="16"/>
+
+ <!-- Fail if the target path is a symbolic link. -->
+ <policy domain="system" name="symlink"
+ rights="none" pattern="follow"/>
+
</policymap>
diff --git a/www/source/policy-websafe.xml b/www/source/policy-websafe.xml
index 856ba8897..1c3505080 100644
--- a/www/source/policy-websafe.xml
+++ b/www/source/policy-websafe.xml
@@ -16,105 +16,124 @@
value CDATA #IMPLIED
>
]>
+
<!--
- Creating a security policy that fits your specific local environment
- before making use of ImageMagick is highly advised. You can find guidance on
- setting up this policy at https://imagemagick.org/script/security-policy.php,
- and it's important to verify your policy using the validation tool located
- at https://imagemagick-secevaluator.doyensec.com/. We also strongly
- recommend that all users validate their security assumptions by testing their
- configurations after making any policy changes. This helps ensure that the
- intended restrictions are functioning as expected in their specific
- deployment environment.
-
-
- Web-safe ImageMagick security policy:
-
- This security protocol designed for web-safe usage focuses on situations
- where ImageMagick is applied in publicly accessible contexts, like websites.
- It deactivates the capability to read from or write to any image formats
- other than web-safe formats like GIF, JPEG, and PNG. Additionally, this
- policy prohibits the execution of image filters and indirect reads, thereby
- thwarting potential security breaches. By implementing these limitations,
- the web-safe policy fortifies the safeguarding of systems accessible to
- the public, reducing the risk of exploiting ImageMagick's capabilities
- for potential attacks.
+ ImageMagick Web-Safe Security Policy
+
+ This policy is intended for public-facing services that process untrusted
+ images. It reduces ImageMagick's attack surface while preserving support
+ for common raster image operations.
+
+ Security objectives:
+
+ * Limit CPU, memory, disk, and file resource consumption.
+ * Mitigate denial-of-service attacks through resource and runtime limits.
+ * Prevent access to sensitive local files and Linux virtual filesystems.
+ * Prevent indirect file reads via @filename expansion.
+ * Prevent use of stdin/stdout and file descriptor paths.
+ * Disable all delegates and loadable filters.
+ * Disable selected high-risk modules that provide scripting, vector
+ graphics processing, or URL access.
+
+ This policy does not restrict ImageMagick to a specific image format
+ allowlist. Additional coder or module restrictions may be added for
+ deployments requiring a stricter security posture.
+
+ References:
+
+ https://imagemagick.org/security-policy/
+ https://imagemagick-secevaluator.doyensec.com/
-->
+
<policymap>
- <!-- Set maximum parallel threads. -->
- <policy domain="resource" name="thread" value="2"/>
- <!-- Set maximum time to live in seconds or mnemonics, e.g. "2 minutes". When
- this limit is exceeded, an exception is thrown and processing stops. -->
- <policy domain="resource" name="time" value="60"/>
- <!-- Set maximum number of open pixel cache files. When this limit is
- exceeded, any subsequent pixels cached to disk are closed and reopened
- on demand. -->
+
+ <!-- ============================================================= -->
+ <!-- Resource Limits -->
+ <!-- ============================================================= -->
+
+ <!-- Limit ImageMagick to at most four worker threads. -->
+ <policy domain="resource" name="thread" value="4"/>
+
+ <!-- Abort operations that exceed 30 seconds of processing time. -->
+ <policy domain="resource" name="time" value="30"/>
+
+ <!-- Maximum number of simultaneously open pixel-cache files. -->
<policy domain="resource" name="file" value="768"/>
- <!-- Set maximum amount of memory in bytes to allocate for the pixel cache
- from the heap. When this limit is exceeded, the image pixels are cached
- to memory-mapped disk. -->
- <policy domain="resource" name="memory" value="768MiB"/>
- <!-- Set maximum amount of memory map in bytes to allocate for the pixel
- cache. When this limit is exceeded, the image pixels are cached to
- disk. -->
- <policy domain="resource" name="map" value="2GiB"/>
- <!-- Set the maximum width * height of an image that can reside in the pixel
- cache memory. Images that exceed the area limit are cached to disk. -->
- <policy domain="resource" name="area" value="8KP"/>
- <!-- Set maximum amount of disk space in bytes permitted for use by the pixel
- cache. When this limit is exceeded, the pixel cache is not created
- and an exception is thrown. -->
+
+ <!-- Maximum heap memory available to the pixel cache. -->
+ <policy domain="resource" name="memory" value="512MiB"/>
+
+ <!-- Maximum amount of memory-mapped pixel cache storage. -->
+ <policy domain="resource" name="map" value="1024MiB"/>
+
+ <!-- Images larger than 32 megapixels spill to disk-backed cache. -->
+ <policy domain="resource" name="area" value="32MP"/>
+
+ <!-- Limit total disk usage for pixel cache and temporary files. -->
<policy domain="resource" name="disk" value="2GiB"/>
- <!-- Set the maximum length of an image sequence. When this limit is
- exceeded, an exception is thrown. -->
+
+ <!-- Limit the number of images permitted in a sequence. -->
<policy domain="resource" name="list-length" value="16"/>
- <!-- Set the maximum width of an image. When this limit is exceeded, an
- exception is thrown. -->
- <policy domain="resource" name="width" value="4KP"/>
- <!-- Set the maximum height of an image. When this limit is exceeded, an
- exception is thrown. -->
- <policy domain="resource" name="height" value="4KP"/>
- <!-- Periodically yield the CPU for at least the time specified in
- milliseconds. -->
- <!-- <policy domain="resource" name="throttle" value="2"/> -->
- <!-- Dynamically yield the CPU relative to the system load average. -->
- <policy domain="resource" name="dynamic-throttle" value="true"/>
- <!-- Do not create temporary files in the default shared directories, instead
- specify a private area to store only ImageMagick temporary files. -->
- <!-- <policy domain="resource" name="temporary-path" value="/magick/tmp/"/> -->
- <!-- Force memory initialization by memory mapping select memory
- allocations. -->
- <policy domain="cache" name="memory-map" value="anonymous"/>
- <!-- Ensure all image data is fully flushed and synchronized to disk. -->
- <policy domain="cache" name="synchronize" value="true"/>
- <!-- Replace passphrase for secure distributed processing -->
- <!-- <policy domain="cache" name="shared-secret" value="secret-passphrase" stealth="true"/> -->
- <!-- Do not permit any delegates to execute. -->
- <policy domain="delegate" rights="none" pattern="*"/>
- <!-- Do not permit any image filters to load. -->
- <policy domain="filter" rights="none" pattern="*"/>
- <!-- Don't read/write from/to stdin/stdout. -->
+
+ <!-- Reject images wider than approximately 8192 pixels. -->
+ <policy domain="resource" name="width" value="8KP"/>
+
+ <!-- Reject images taller than approximately 8192 pixels. -->
+ <policy domain="resource" name="height" value="8KP"/>
+
+ <!-- Prevent excessively large single memory allocation requests. -->
+ <policy domain="system" name="max-memory-request" value="512MiB"/>
+
+ <!-- Maximum size of a single image profile. -->
+ <policy domain="system" name="max-profile-size" value="16MiB"/>
+ <policy domain="system" name="max-profile-count" value="16"/>
+
+ <!-- ============================================================= -->
+ <!-- Path Restrictions -->
+ <!-- ============================================================= -->
+
+ <!-- Disallow reading from or writing to stdin/stdout via "-". -->
<policy domain="path" rights="none" pattern="-"/>
- <policy domain="path" rights="none" pattern="[Ff][Dd]:*"/>
- <!-- Sensitive paths are not permitted. -->
- <policy domain="path" rights="none" pattern="/etc/*"/>
- <!-- Relative paths are not permitted. -->
- <policy domain="path" rights="none" pattern="*../*"/>
- <!-- Indirect reading is not permitted. -->
+
+ <!-- Disable indirect file reads such as @filename. -->
<policy domain="path" rights="none" pattern="@*"/>
- <!-- Deny all image modules and specifically exempt reading or writing
- web-safe image formats. -->
- <policy domain="module" rights="none" pattern="*" />
- <policy domain="module" rights="read | write" pattern="{BMP,GIF,JPEG,PNG,TIFF,WEBP}"/>
- <policy domain="module" rights="read | write" pattern="{MPC}" stealth="true"/>
- <policy domain="module" rights="write" pattern="{JSON,INFO,PNM,PS}"/>
- <!-- This policy sets the number of times to replace content of certain
- memory buffers and temporary files before they are freed or deleted. -->
- <policy domain="system" name="shred" value="1"/>
- <!-- Enable the initialization of buffers with zeros, resulting in a minor
- performance penalty but with improved security. -->
- <policy domain="system" name="memory-map" value="anonymous"/>
- <!-- Set the maximum amount of memory in bytes that are permitted for
- allocation requests. -->
- <policy domain="system" name="max-memory-request" value="256MiB"/>
+
+ <!-- Prevent access to file descriptors (fd:). -->
+ <policy domain="path" rights="none" pattern="[Ff][Dd\\]:*"/>
+
+ <!-- Prevent access to operating system configuration files. -->
+ <policy domain="path" rights="none" pattern="/etc/*"/>
+
+ <!-- Prevent access to Linux process and runtime information. -->
+ <policy domain="path" rights="none" pattern="/proc/*"/>
+
+ <!-- Prevent access to Linux kernel and device nformation. -->
+ <policy domain="path" rights="none" pattern="/sys/*"/>
+
+ <!-- Disable pipe-based I/O. -->
+ <policy domain="path" rights="none" pattern="|*"/>
+
+ <!-- ============================================================= -->
+ <!-- Feature Restrictions -->
+ <!-- ============================================================= -->
+
+ <!-- Disable all external delegates (Ghostscript, ffmpeg, etc.). -->
+ <policy domain="delegate" rights="none" pattern="*"/>
+
+ <!-- Disable all loadable image filters. -->
+ <policy domain="filter" rights="none" pattern="*"/>
+
+ <!-- ============================================================= -->
+ <!-- High-Risk Module Restrictions -->
+ <!-- ============================================================= -->
+
+ <!-- Disable the Magick Vector Graphics interpreter. -->
+ <policy domain="module" rights="none" pattern="MVG"/>
+
+ <!-- Disable the Magick Scripting Language interpreter. -->
+ <policy domain="module" rights="none" pattern="MSL"/>
+
+ <!-- Disable URL, HTTP, HTTPS, and related network access support. -->
+ <policy domain="module" rights="none" pattern="URL"/>
+
</policymap>
diff --git a/www/stream/index.html b/www/stream/index.html
index 5f47a6dac..331fd8a01 100644
--- a/www/stream/index.html
+++ b/www/stream/index.html
@@ -11,481 +11,617 @@
<meta name="description" content="Stream one or more pixel components of the image or portion of the image to your choice of storage formats">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
+ }
+
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Command-line Tools: Stream">
<meta property="og:description" content="Stream one or more pixel components of the image or portion of the image to your choice of storage formats">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Command-line Tools: Stream">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Command-line Tools: Stream",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/stream/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Stream one or more pixel components of the image or portion of the image to your choice of storage formats",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link active" href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/stream/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/stream/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Command-line Tools: Stream</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
- </div>
- </header>
-
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#usage">Example Usage</a> • <a href="#options">Option Summary</a></p>
-
-<p class="lead"><code>Stream</code> is a lightweight tool to stream one or more pixel components of the image or portion of the image to your choice of storage formats. It writes the pixel components as they are read from the input image a row at a time making <code>stream</code> desirable when working with large images or when you require raw pixel components.</p>
-
-<h2><a class="anchor" id="usage"></a>Example Usage</h2>
-
-<p>We list a few examples of the <code>stream</code> command here to illustrate its usefulness and ease of use. To get started, lets stream the red, green, blue components of a 640x480 JPEG image to disk as unsigned characters:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick stream -map rgb -storage-type char image.jpg pixels.dat
-$ magick display -depth 8 -size 640x480 rgb:pixels.dat
-</samp></pre>
-
-<p>Here we extract a 100x100 region from a TIFF image in the grayscale format as doubles:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick stream -map i -storage-type double -extract 100x100+30+40 image.tif gray.raw
-</samp></pre>
-
-<p>You can also associate the region to extract with the image filename:</p>
-
-<pre class="p-3 mb-2 text-body-secondary bg-body-tertiary cli"><samp>$ magick stream -map i -storage-type double 'image.tif[100x100+30+40]' gray.raw
-</samp></pre>
-
-<p>Streaming requires that the image coder read the image pixels in row order. Not all formats adhere to this requirement. Verify a particular image format first, before you utilize streaming in your workflow.</p>
-
-
-<h2><a class="anchor" id="options"></a>Option Summary</h2>
-
-<p>The <code>stream</code> command recognizes these options. Click on an option to get more details about how that option works.</p>
-
-
-<div style="max-height:75svh; overflow-y:auto; overflow-x:hidden;">
-<table class="table table-sm table-hover table-striped">
- <colgroup>
- <col style="width:30%">
- <col style="width:70%">
- </colgroup>
- <thead>
- <tr>
- <th scope="col">Option</th>
- <th scope="col">Description</th>
- </tr>
- </thead>
- <tbody>
- <tr>
- <td><a href="../command-line-options/index.html#authenticate">-authenticate <var>value</var></a></td>
- <td>decrypt image with this password</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#channel">-channel <var>type</var></a></td>
- <td>apply option to select image channels</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#colorspace">-colorspace <var>type</var></a></td>
- <td>set image colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#debug">-debug <var>events</var></a></td>
- <td>display copious debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#define">-define <var>format:option</var></a></td>
- <td>define one or more image format options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#density">-density <var>geometry</var></a></td>
- <td>horizontal and vertical density of the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#depth">-depth <var>value</var></a></td>
- <td>image depth</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#extract">-extract <var>geometry</var></a></td>
- <td>extract area from image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#help">-help</a></td>
- <td>print program options</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interlace">-interlace <var>type</var></a></td>
- <td>type of image interlacing scheme</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#interpolate">-interpolate <var>method</var></a></td>
- <td>pixel color interpolation method</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#limit">-limit <var>type value</var></a></td>
- <td>pixel cache resource limit</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#list">-list <var>type</var></a></td>
- <td>Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#log">-log <var>format</var></a></td>
- <td>format of debugging information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#stream-map">-map <var>components</var></a></td>
- <td>store pixels in this format.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#monitor">-monitor</a></td>
- <td>monitor progress</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quantize">-quantize <var>colorspace</var></a></td>
- <td>reduce image colors in this colorspace</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#quiet">-quiet</a></td>
- <td>suppress all warning messages</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#regard-warnings">-regard-warnings</a></td>
- <td>pay attention to warning messages.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#respect-parentheses">-respect-parentheses</a></td>
- <td>settings remain in effect until parenthesis boundary.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#sampling-factor">-sampling-factor <var>geometry</var></a></td>
- <td>horizontal and vertical sampling factor</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#seed">-seed <var>value</var></a></td>
- <td>seed a new sequence of pseudo-random numbers</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#set">-set <var>attribute value</var></a></td>
- <td>set an image attribute</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#size">-size <var>geometry</var></a></td>
- <td>width and height of image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#storage-type">-storage-type <var>type</var></a></td>
- <td>store pixels with this storage type.</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#synchronize">-synchronize</a></td>
- <td>synchronize image to storage device</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#taint">-taint</a></td>
- <td>mark the image as modified</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#transparent-color">-transparent-color <var>color</var></a></td>
- <td>transparent color</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#verbose">-verbose</a></td>
- <td>print detailed information about the image</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#version">-version</a></td>
- <td>print version information</td>
- </tr>
-
- <tr>
- <td><a href="../command-line-options/index.html#virtual-pixel">-virtual-pixel <var>method</var></a></td>
- <td>access method for pixels outside the boundaries of the image</td>
- </tr>
-
- </tbody>
-</table>
-</div>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Command-line Tools: Stream</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Stream one or more pixel components of the image or portion of the image to your choice of storage formats</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <!-- Page Header & Quick Navigation -->
+<div class="mb-5 border-bottom pb-4">
+ <div class="d-flex flex-wrap align-items-center gap-2 mb-3">
+ <a href="#usage" class="btn btn-sm btn-outline-primary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-terminal-fill"></i> Example Usage
+ </a>
+ <a href="#options" class="btn btn-sm btn-outline-secondary rounded-pill px-3 d-inline-flex align-items-center gap-2">
+ <i class="bi bi-list-task"></i> Option Summary
+ </a>
+ </div>
+ <p class="lead text-body-secondary mb-0">
+ <code class="text-primary fw-semibold fs-5">stream</code> is a lightweight tool to stream one or more pixel components of an image or portion of an image to your choice of storage formats. It writes pixel components as they are read from the input image a row at a time, making it ideal when working with large images or when raw pixel components are required.
+ </p>
</div>
+<!-- Section: Example Usage -->
+<section id="usage" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4">
+ <h2 class="h3 fw-bold mb-0">Example Usage</h2>
+ <a href="#usage" class="text-body-tertiary text-decoration-none" aria-label="Anchor link"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary">
+ Below are practical examples demonstrating how to use the <code class="text-primary fw-semibold">stream</code> command. To get started, let's stream the red, green, and blue components of a 640x480 JPEG image to disk as unsigned characters:
+ </p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">stream-rgb.sh</span>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code><span class="text-secondary"># Stream RGB pixels to raw unsigned character data</span>
+$ magick stream -map rgb -storage-type char image.jpg pixels.dat
+<span class="text-secondary"># Display the generated raw pixel file</span>
+$ magick display -depth 8 -size 640x480 rgb:pixels.dat</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary">
+ Here we extract a 100x100 region from a TIFF image in grayscale format as double-precision floating-point numbers:
+ </p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">stream-extract.sh</span>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code><span class="text-secondary"># Extract 100x100 region with offsets X=30, Y=40</span>
+$ magick stream -map i -storage-type double -extract 100x100+30+40 image.tif gray.raw</code></pre>
+ </div>
+ </div>
+ <p class="text-body-secondary">
+ You can also associate the region to extract directly within the input image filename:
+ </p>
+ <div class="terminal-card mb-4">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">stream-inline.sh</span>
+ </div>
+ <div class="p-3">
+ <pre class="mb-0 text-light font-mono small"><code><span class="text-secondary"># Inline geometry selection</span>
+$ magick stream -map i -storage-type double 'image.tif[100x100+30+40]' gray.raw</code></pre>
+ </div>
+ </div>
+ <div class="alert alert-warning bg-warning bg-opacity-10 border-warning border-opacity-25 d-flex align-items-center gap-3 my-4" role="alert">
+ <i class="bi bi-exclamation-triangle-fill text-warning fs-4"></i>
+ <div class="small text-body">
+ <strong>Format Compatibility Note:</strong> Streaming requires the image coder to read pixel data in strict row order. Not all image formats support sequential row-order reading. Always verify your specific input format before incorporating streaming into production workflows.
+ </div>
+ </div>
+</section>
+<!-- Section: Option Summary -->
+<section id="options" class="mb-5 pt-3 border-top">
+ <div class="d-flex align-items-center gap-2 mb-3">
+ <h2 class="h3 fw-bold mb-0">Option Summary</h2>
+ <a href="#options" class="text-body-tertiary text-decoration-none" aria-label="Anchor link"><i class="bi bi-link-45deg fs-4"></i></a>
+ </div>
+ <p class="text-body-secondary mb-4">
+ The <code class="text-primary fw-semibold">stream</code> command recognizes the following options. Select an option link for detailed documentation.
+ </p>
+ <div class="card im-card overflow-hidden shadow-sm border-0">
+ <div class="table-responsive" style="max-height: 75vh;">
+ <table class="table table-hover align-middle mb-0">
+ <thead class="table-light sticky-top shadow-sm">
+ <tr>
+ <th scope="col" style="width: 35%;">Option</th>
+ <th scope="col" style="width: 65%;">Description</th>
+ </tr>
+ </thead>
+ <tbody class="font-mono small">
+ <tr>
+ <td><a href="../command-line-options/index.html#authenticate" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-authenticate <var class="text-secondary">value</var></code></a></td>
+ <td class="font-sans text-body-secondary">Decrypt image with this password</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#channel" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-channel <var class="text-secondary">type</var></code></a></td>
+ <td class="font-sans text-body-secondary">Apply option to select image channels</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#colorspace" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-colorspace <var class="text-secondary">type</var></code></a></td>
+ <td class="font-sans text-body-secondary">Set image colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#debug" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-debug <var class="text-secondary">events</var></code></a></td>
+ <td class="font-sans text-body-secondary">Display copious debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#define" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-define <var class="text-secondary">format:option</var></code></a></td>
+ <td class="font-sans text-body-secondary">Define one or more image format options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#density" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-density <var class="text-secondary">geometry</var></code></a></td>
+ <td class="font-sans text-body-secondary">Horizontal and vertical density of the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#depth" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-depth <var class="text-secondary">value</var></code></a></td>
+ <td class="font-sans text-body-secondary">Image depth</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#extract" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-extract <var class="text-secondary">geometry</var></code></a></td>
+ <td class="font-sans text-body-secondary">Extract area from image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#help" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-help</code></a></td>
+ <td class="font-sans text-body-secondary">Print program options</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interlace" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-interlace <var class="text-secondary">type</var></code></a></td>
+ <td class="font-sans text-body-secondary">Type of image interlacing scheme</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#interpolate" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-interpolate <var class="text-secondary">method</var></code></a></td>
+ <td class="font-sans text-body-secondary">Pixel color interpolation method</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#limit" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-limit <var class="text-secondary">type value</var></code></a></td>
+ <td class="font-sans text-body-secondary">Pixel cache resource limit</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#list" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-list <var class="text-secondary">type</var></code></a></td>
+ <td class="font-sans text-body-secondary">Color, Configure, Delegate, Format, Magic, Module, Resource, or Type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#log" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-log <var class="text-secondary">format</var></code></a></td>
+ <td class="font-sans text-body-secondary">Format of debugging information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#stream-map" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-map <var class="text-secondary">components</var></code></a></td>
+ <td class="font-sans text-body-secondary">Store pixels in this format</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#monitor" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-monitor</code></a></td>
+ <td class="font-sans text-body-secondary">Monitor progress</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quantize" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-quantize <var class="text-secondary">colorspace</var></code></a></td>
+ <td class="font-sans text-body-secondary">Reduce image colors in this colorspace</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#quiet" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-quiet</code></a></td>
+ <td class="font-sans text-body-secondary">Suppress all warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#regard-warnings" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-regard-warnings</code></a></td>
+ <td class="font-sans text-body-secondary">Pay attention to warning messages</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#respect-parentheses" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-respect-parentheses</code></a></td>
+ <td class="font-sans text-body-secondary">Settings remain in effect until parenthesis boundary</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#sampling-factor" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-sampling-factor <var class="text-secondary">geometry</var></code></a></td>
+ <td class="font-sans text-body-secondary">Horizontal and vertical sampling factor</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#seed" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-seed <var class="text-secondary">value</var></code></a></td>
+ <td class="font-sans text-body-secondary">Seed a new sequence of pseudo-random numbers</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#set" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-set <var class="text-secondary">attribute value</var></code></a></td>
+ <td class="font-sans text-body-secondary">Set an image attribute</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#size" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-size <var class="text-secondary">geometry</var></code></a></td>
+ <td class="font-sans text-body-secondary">Width and height of image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#storage-type" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-storage-type <var class="text-secondary">type</var></code></a></td>
+ <td class="font-sans text-body-secondary">Store pixels with this storage type</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#synchronize" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-synchronize</code></a></td>
+ <td class="font-sans text-body-secondary">Synchronize image to storage device</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#taint" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-taint</code></a></td>
+ <td class="font-sans text-body-secondary">Mark the image as modified</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#transparent-color" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-transparent-color <var class="text-secondary">color</var></code></a></td>
+ <td class="font-sans text-body-secondary">Transparent color</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#verbose" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-verbose</code></a></td>
+ <td class="font-sans text-body-secondary">Print detailed information about the image</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#version" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-version</code></a></td>
+ <td class="font-sans text-body-secondary">Print version information</td>
+ </tr>
+ <tr>
+ <td><a href="../command-line-options/index.html#virtual-pixel" class="text-decoration-none fw-semibold text-primary"><code class="text-primary">-virtual-pixel <var class="text-secondary">method</var></code></a></td>
+ <td class="font-sans text-body-secondary">Access method for pixels outside the boundaries of the image</td>
+ </tr>
+ </tbody>
+ </table>
+ </div>
+ </div>
+</section>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="../support/index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
</div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="../support/index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
- </div>
+ </footer>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
</body>
-
</html>
diff --git a/www/support/index.html b/www/support/index.html
index 91f4f21bb..d222f4dff 100644
--- a/www/support/index.html
+++ b/www/support/index.html
@@ -11,340 +11,553 @@
<meta name="description" content="Support ImageMagick development by sponsoring, contributing code, or donating resources. Help maintain one of the most comprehensive free image processing suites used worldwide in web, publishing, and film industries.">
<link rel="canonical" href="index.html">
<meta name="robots" content="index, follow">
- <meta name="theme-color" content="#000000">
- <meta name="google-site-verification" content="_bMOCDpkx9ZAzBwb2kF3PRHbfUUdFj2uO8Jd1AXArz4">
+ <meta name="theme-color" content="#0d1117">
+
<link rel="shortcut icon" href="../image/wand.png" type="image/png">
<link rel="apple-touch-icon" href="../image/wand.png" type="image/png">
- <link rel="preconnect" href="https://cdn.jsdelivr.net/">
- <link rel="preconnect" href="https://localhost/">
- <link rel="preload" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" as="style" crossorigin="anonymous">
- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" crossorigin="anonymous">
- <!-- Accessibility Enhancement -->
+
+ <!-- Fonts & Icons -->
+ <link rel="preconnect" href="https://fonts.googleapis.com/">
+ <link rel="preconnect" href="https://fonts.gstatic.com/" crossorigin>
+ <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@400;500;600&family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css">
+ <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css">
+
<style>
- html {
- scroll-padding-top: 70px;
+ :root {
+ --im-font-sans: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+ --im-font-mono: 'Fira Code', monospace;
+ --im-primary: #8b5cf6;
+ --im-primary-hover: #7c3aed;
+ --im-accent: #f59e0b;
+ --im-bg-gradient: linear-gradient(135deg, #0f172a 0%, #1e1b4b 50%, #0f172a 100%);
}
- iframe {
- width: 100% !important;
- max-width: 100% !important;
- height: 400px;
- border: 1px solid #ccc;
- box-sizing: border-box;
+ body {
+ font-family: var(--im-font-sans);
+ min-height: 100vh;
+ display: flex;
+ flex-direction: column;
}
- a.nav-link:hover,
- a.dropdown-item:hover {
- color: #ffc107 !important;
- text-shadow: 0px 2px 4px rgba(255, 193, 7, 0.8);
+ code, kbd, pre, .font-mono {
+ font-family: var(--im-font-mono) !important;
}
- .btn-outline-warning {
- color: #cd7f32;
- border-color: #cd7f32;
+ /* Modern Navbar */
+ .im-navbar {
+ backdrop-filter: blur(12px);
+ -webkit-backdrop-filter: blur(12px);
+ background-color: rgba(15, 23, 42, 0.85) !important;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
- .navbar-brand {
- color: #d4af37;
- transition: color 0.3s ease, text-shadow 0.3s ease;
+ .im-navbar .nav-link {
+ font-weight: 500;
+ color: rgba(255, 255, 255, 0.75);
+ transition: all 0.2s ease;
+ padding: 0.5rem 0.85rem;
+ border-radius: 0.375rem;
}
- .navbar-brand:hover {
- color: #e9c03d;
- text-shadow: 0px 2px 4px rgba(203, 163, 120, 0.6);
+ .im-navbar .nav-link:hover,
+ .im-navbar .nav-link.active {
+ color: #ffffff !important;
+ background: rgba(255, 255, 255, 0.08);
}
- :root {
- --bs-code-color: revert;
+ .im-brand {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ background: linear-gradient(135deg, #a78bfa 0%, #f472b6 100%);
+ -webkit-background-clip: text;
+ -webkit-text-fill-color: transparent;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ }
+
+ /* Hero Section */
+ .im-hero {
+ background: var(--im-bg-gradient);
+ color: #ffffff;
+ padding: 4rem 0 3.5rem;
+ position: relative;
+ overflow: hidden;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-hero::before {
+ content: '';
+ position: absolute;
+ top: -50%;
+ right: -10%;
+ width: 500px;
+ height: 500px;
+ background: radial-gradient(circle, rgba(139, 92, 246, 0.15) 0%, rgba(0,0,0,0) 70%);
+ pointer-events: none;
+ }
+
+ /* Terminal Widget */
+ .terminal-card {
+ background: #090d16;
+ border: 1px solid rgba(255, 255, 255, 0.12);
+ border-radius: 0.75rem;
+ box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.5);
+ overflow: hidden;
+ }
+
+ .terminal-header {
+ background: rgba(255, 255, 255, 0.04);
+ padding: 0.6rem 1rem;
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid rgba(255, 255, 255, 0.08);
+ }
+
+ .terminal-dot {
+ width: 10px;
+ height: 10px;
+ border-radius: 50%;
}
- .table {
- table-layout: fixed; /* force equal distribution of width */
- width: 100%; /* table spans full container */
+ /* Cards & Container */
+ .im-card {
+ border: 1px solid var(--bs-border-color-translucent);
+ border-radius: 0.75rem;
+ transition: transform 0.2s ease, box-shadow 0.2s ease;
+ background: var(--bs-body-bg);
}
- .table td, .table th {
- white-space: normal; /* allow wrapping */
- word-break: break-word; /* break long words/strings */
+ .im-card:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08);
+ }
+
+ /* Footer */
+ .im-footer {
+ margin-top: auto;
+ background: #090d16;
+ color: rgba(255, 255, 255, 0.6);
+ border-top: 1px solid rgba(255, 255, 255, 0.1);
+ }
+
+ .im-footer a {
+ color: rgba(255, 255, 255, 0.75);
+ text-decoration: none;
+ transition: color 0.2s;
+ }
+
+ .im-footer a:hover {
+ color: var(--im-primary);
}
</style>
- <!-- Open Graph Meta Tags -->
+
+ <!-- Open Graph -->
<meta property="og:title" content="ImageMagick | Sponsor ImageMagick Development">
<meta property="og:description" content="Support ImageMagick development by sponsoring, contributing code, or donating resources. Help maintain one of the most comprehensive free image processing suites used worldwide in web, publishing, and film industries.">
<meta property="og:image" content="../image/logo.png">
- <meta property="og:logo" content="../image/logo.png">
<meta property="og:url" content="index.html">
<meta property="og:type" content="website">
- <meta property="og:site_name" content="ImageMagick">
- <meta property="og:locale" content="en_us">
- <!-- Twitter Card Meta Tags -->
- <meta name="twitter:card" content="summary_large_image">
- $site=strtolower("ImageMagick");
- <meta name="twitter:site" content="@imagemagick">
- <meta name="twitter:creator" content="@imagemagick">
- <meta name="twitter:title" content="ImageMagick | Sponsor ImageMagick Development">
- <meta name="twitter:description" content="$this->description">
- <meta name="twitter:image" content="../image/logo.png">
- <meta name="twitter:image:alt" content="ImageMagick logo and tag line">
+
<!-- JSON-LD Structured Data -->
<script type="application/ld+json">
- {
- "@context": "https://schema.org",
- "@type": "SoftwareApplication",
- "name": "ImageMagick",
- "url": "ImageMagick | Sponsor ImageMagick Development",
- "image": "https://imagemagick.org/image/logo.png",
- "description": "$this->description",
- "applicationCategory": "Multimedia",
- "operatingSystem": "Windows, macOS, Linux, Unix",
- "softwareVersion": "7.1.2-31",
- "license": "https://imagemagick.org/license/",
- "creator": {
- "@type": "Organization",
- "name": "ImageMagick Studio LLC",
- "url": "https://imagemagick.org"
- },
- "keywords": [
- "".ucfirst($title)."",
- "image processing software",
- "image conversion tool",
- "batch image editing",
- "open-source image editor",
- "ImageMagick command-line",
- "resize images ImageMagick",
- "crop and rotate images",
- "ImageMagick tutorial",
- "ImageMagick automation",
- "ImageMagick for developers",
- "ImageMagick CLI",
- "ImageMagick filters and effects",
- "ImageMagick scripting",
- "ImageMagick API integration"
- ],
- "sameAs": [
- "https://github.com/ImageMagick",
- "https://x.com/imagemagick"
- ],
- "offers": {
- "@type": "Offer",
- "price": "0.00",
- "priceCurrency": "USD"
- }
- }
+ {
+ "@context": "https://schema.org",
+ "@type": "SoftwareApplication",
+ "name": "ImageMagick",
+ "url": "https://imagemagick.org/support/",
+ "image": "https://imagemagick.org/image/logo.png",
+ "description": "Support ImageMagick development by sponsoring, contributing code, or donating resources. Help maintain one of the most comprehensive free image processing suites used worldwide in web, publishing, and film industries.",
+ "applicationCategory": "MultimediaApplication",
+ "operatingSystem": "Windows, macOS, Linux, Unix",
+ "softwareVersion": "7.1.2-34",
+ "license": "https://imagemagick.org/license/",
+ "offers": {
+ "@type": "Offer",
+ "price": "0.00",
+ "priceCurrency": "USD"
+ }
+ }
</script>
- <!-- Google Custom Search -->
<script async src="https://localhost/cse.js?cx=8720b81722164487b"></script>
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
</head>
<body>
+ <!-- Theme Init -->
<script>
- function setTheme(theme) {
- localStorage.setItem('theme', theme);
- updateThemeIcon(theme);
- document.documentElement.setAttribute('data-bs-theme', theme === 'auto' ? getSystemTheme() : theme);
- }
- function getSystemTheme() {
- return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
- }
- function updateThemeIcon(theme) {
- const iconMap = {
- light: '☀️',
- dark: '🌙',
- auto: '🌓'
- };
- document.getElementById('currentThemeIcon').textContent = iconMap[theme] || '🌓';
- }
- document.addEventListener('DOMContentLoaded', () => {
- const savedTheme = localStorage.getItem('theme') || 'auto';
- setTheme(savedTheme);
- });
+ (function() {
+ const saved = localStorage.getItem('theme') || 'auto';
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = saved === 'auto' ? (systemDark ? 'dark' : 'light') : saved;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ })();
</script>
- <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
- <div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
- <button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
+
+ <!-- Navigation -->
+ <nav class="navbar navbar-expand-lg navbar-dark fixed-top im-navbar">
+ <div class="container-xl">
+ <a class="navbar-brand im-brand" href="../index.html">
+ <img src="../image/wand.png" alt="Wand Icon" width="24" height="24" class="d-inline-block align-text-top">
+ ImageMagick
+ </a>
+ <button class="navbar-toggler border-0" type="button" data-bs-toggle="collapse" data-bs-target="#imNavbar" aria-controls="imNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
- <div class="collapse navbar-collapse" id="magick-navbars">
- <ul class="navbar-nav me-auto">
+ <div class="collapse navbar-collapse" id="imNavbar">
+ <ul class="navbar-nav me-auto mb-2 mb-lg-0 ms-lg-3">
<li class="nav-item">
- <a class="nav-link "" href="../download/index.html">Download</a>
+ <a class="nav-link " href="../download/index.html">Download</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-tools/index.html">Tools</a>
+ <a class="nav-link " href="../command-line-tools/index.html">Tools</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../command-line-processing/index.html">CLI</a>
+ <a class="nav-link " href="../command-line-processing/index.html">CLI Usage</a>
</li>
<li class="nav-item">
- <a class="nav-link "" href="../develop/index.html">Develop</a>
+ <a class="nav-link " href="../develop/index.html">API & Develop</a>
</li>
<li class="nav-item">
<a class="nav-link" rel="noopener noreferrer" target="_blank" href="https://github.com/ImageMagick/ImageMagick/discussions">Community</a>
</li>
</ul>
- <ul class="navbar-nav ms-auto">
- <li class="nav-item ms-3">
- <form class="d-flex form-inline" action="https://imagemagick.org/support/">
- <input class="form-control me-2" type="text" name="q" placeholder="Search site..." aria-label="Search">
- <button class="btn btn-outline-warning" type="submit" name="sa">Search</button>
- </form>
- </li>
- <li class="nav-item dropdown ms-3">
- <a class="nav-link dropdown-toggle" href="#" id="themeDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
- <span id="currentThemeIcon">🌓</span>
- </a>
- <ul class="dropdown-menu dropdown-menu-end" aria-labelledby="themeDropdown">
- <li><a class="dropdown-item" href="#" onclick="setTheme('light')">☀️ Light</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('dark')">🌙 Dark</a></li>
- <li><a class="dropdown-item" href="#" onclick="setTheme('auto')">🌓 Auto</a></li>
+
+ <div class="d-flex align-items-center gap-2">
+ <!-- Search Trigger Modal / Input -->
+ <form class="d-flex" action="https://imagemagick.org/support/index.html" role="search">
+ <div class="input-group input-group-sm">
+ <input class="form-control bg-body-tertiary border-secondary-subtle" type="search" placeholder="Search site..." name="q" aria-label="Search">
+ <button class="btn btn-outline-warning" type="submit" name="sa"><i class="bi bi-search"></i></button>
+ </div>
+ </form>
+
+ <!-- Theme Dropdown -->
+ <div class="dropdown">
+ <button class="btn btn-sm btn-outline-secondary dropdown-toggle d-flex align-items-center gap-1 border-0 text-white" type="button" id="themeSelect" data-bs-toggle="dropdown" aria-expanded="false">
+ <i class="bi bi-circle-half"></i>
+ </button>
+ <ul class="dropdown-menu dropdown-menu-end shadow" aria-labelledby="themeSelect">
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('light')"><i class="bi bi-sun-fill"></i> Light</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('dark')"><i class="bi bi-moon-stars-fill"></i> Dark</button></li>
+ <li><button class="dropdown-item d-flex align-items-center gap-2" onclick="setTheme('auto')"><i class="bi bi-circle-half"></i> Auto</button></li>
</ul>
- </li>
- </ul>
+ </div>
+
+ <a href="https://github.com/ImageMagick/ImageMagick" target="_blank" class="btn btn-sm btn-outline-light d-flex align-items-center gap-1 ms-1">
+ <i class="bi bi-github"></i> <span class="d-none d-xl-inline">GitHub</span>
+ </a>
+ </div>
</div>
</div>
</nav>
- <div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
- <header class="d-flex align-items-center pb-3 mb-5 border-bottom">
- <div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
- <h1 class="fs-2 mb-1 display-5">Sponsor ImageMagick Development</h1>
- </a>
- <h2 class="fs-5 text-muted h4">ImageMagick</h2>
+ <!-- Hero Header Block -->
+ <header class="im-hero mt-5 pt-5">
+ <div class="container-xl pt-3">
+ <div class="row align-items-center g-4">
+ <div class="col-lg-7">
+ <div class="d-inline-flex align-items-center gap-2 px-3 py-1 rounded-pill bg-primary bg-opacity-20 text-primary border border-primary border-opacity-30 mb-3 fs-7">
+ <span class="badge bg-primary">v7.1.2-34</span>
+ <span class="small text-light">Latest Stable Release</span>
+ </div>
+ <h1 class="display-4 fw-bold mb-3 tracking-tight">Sponsor ImageMagick Development</h1>
+ <p class="lead text-light opacity-75 mb-4 fs-5">Support ImageMagick development by sponsoring, contributing code, or donating resources. Help maintain one of the most comprehensive free image processing suites used worldwide in web, publishing, and film industries.</p>
+ <div class="d-flex flex-wrap gap-3">
+ <a href="../download/index.html" class="btn btn-primary btn-lg px-4 fw-semibold d-flex align-items-center gap-2 shadow">
+ <i class="bi bi-download"></i> Get ImageMagick
+ </a>
+ <a href="../command-line-processing/index.html" class="btn btn-outline-light btn-lg px-4 fw-semibold d-flex align-items-center gap-2">
+ <i class="bi bi-terminal"></i> Documentation
+ </a>
+ </div>
+ </div>
+
+ <!-- Terminal Quickstart Preview -->
+ <div class="col-lg-5">
+ <div class="terminal-card">
+ <div class="terminal-header">
+ <div class="terminal-dot bg-danger"></div>
+ <div class="terminal-dot bg-warning"></div>
+ <div class="terminal-dot bg-success"></div>
+ <span class="small text-secondary font-mono ms-2">quickstart.sh</span>
+ </div>
+ <div class="p-3 text-light font-mono small">
+ <div class="text-secondary"># Install via your favorite Package Manager</div>
+ <div class="text-success">$ brew install imagemagick</div>
+ <div class="text-secondary mt-2"># Convert PNG to WebP with compression</div>
+ <div>$ magick input.png -quality 85 output.webp</div>
+ <div class="text-secondary mt-2"># Resize image maintaining aspect ratio</div>
+ <div>$ magick input.jpg -resize 800x600^ output.jpg</div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </header>
+
+ <!-- Main Body Content -->
+ <main class="py-5">
+ <div class="container-xl">
+ <div class="row g-5">
+ <!-- Main Column -->
+ <div class="col-lg-8">
+ <div class="container py-4">
+ <!-- Page Quick Nav Pills -->
+ <div class="row mb-4">
+ <div class="col-12">
+ <div class="d-flex flex-wrap justify-content-center gap-2 p-2 bg-body-tertiary rounded-3 border">
+ <a href="#sponsors" class="btn btn-sm btn-outline-secondary border-0">Our Sponsors</a>
+ <a href="#contribute" class="btn btn-sm btn-outline-secondary border-0">Contribute Code</a>
+ <a href="#support" class="btn btn-sm btn-outline-secondary border-0">Sponsor & Donate</a>
</div>
- </header>
+ </div>
+ </div>
- <main role="main" class="container">
- <div class="row g-4">
- <div class="col-lg-9 col-12">
- <div>
-<p class="text-center"><a href="#contribute">Contribute a Bug Fix or Enhancement</a> • <a href="#support">Sponsor the ImageMagick Project</a></p>
-
-
-<a class="anchor" id="sponsor"></a>
-
-<p class="lead">We want to thank the following sponsors of the ImageMagick project, including:</p>
-
-<dl>
-<!-- source repos, social coding -->
- <dt class="col-md-12"><a href="http://www.amd.com/"><a href="https://github.com/sponsors/ImageMagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="5%" height="5%" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg></a> The world's leading software development platform.</dt><br/>
-<!-- online studio + jqmagick -->
- <dt class="col-md-12"><a href="https://www.futureweb.at/"> <img class="clearfix" src="../image/futureweb_red.png" width="143" height="160" alt="[Futureweb – Your Austrian Webdesign & Hosting Company]" /></a> Futureweb – Your Austrian Webdesign & Hosting Company.</dt><br/>
-</dl>
-
-<h2><a class="anchor" id="contribute"></a>Contribute a Bug Fix or Enhancement</h2>
-<p>Open an issue on the <a href="https://github.com/ImageMagick/ImageMagick/">GitHub repository</a> if you think you have found a bug or security vulnerability. Open a pull request to the repository if you have a fix. Post to the <a href="https://github.com/ImageMagick/ImageMagick/discussions">discussions</a> forum if you want to propose an enhancement for discussion.</p>
-
-<h2><a class="anchor" id="support"></a>Sponsor the ImageMagick Project</h2>
-
-<p>ImageMagick has been available for free since the early 1990's. It has consistently been one of the most comprehensive free image processing packages available, but, unlike competing packages, it continues to be supported and enhanced. Today, ImageMagick is more comprehensive and better supported than ever.</p>
-<p>ImageMagick has enjoyed considerable support from commercial users. Since ImageMagick is not restricted from use in commercial or proprietary applications, it is used to support thousands of commercial web sites and is used in professional digital image and movie studios as well as publishing shops. It is also used as a component of a number of commercial applications. Many of these commercial users have made contributions to ImageMagick, large and small, often anonymous, but always appreciated.</p>
-<p>ImageMagick Studio LLC is looking for support from individuals or companies that use ImageMagick, or would like to help support free software. If you or your company depends on ImageMagick, supporting ImageMagick is a way to express your gratitude and to contribute back to the further development of ImageMagick.</p>
-<p>ImageMagick support can take many forms. The following are some possibilities:</p>
-<ul>
-<li>Contribute source code or patches to help improve ImageMagick.</li>
-<li>Send us a licensed copy of Adobe Photoshop.</li>
-<li>Lend us developers to add support for additional image formats or to finish integrating support for the SVG specification.</li>
-<li>Extend our FFT algorithm to support non-square images.</li>
-<li>Port our Linux build environment from Autoconf / Automake to CMake.</li>
-<li>Provide technical writers to assist with the development of commercial-grade technical documentation.</li>
-<li>Donate a quality SWOP or Eurostandard ICC profile to use as a default CMYK to RGB conversion profile.</li>
-<li>Donate a workstation with a modern processor and plenty of memory and disk. We would use it for our primary development environment.</li>
-<li>Donate a Windows laptop so we can build and test ImageMagick under Windows 11.</li>
-<li>Make a monetary contribution.</li></ul>
-
-<p>Donations can be anonymous, or public.</p>
-<fieldset>
-<legend>Sponsor the ImageMagick Project</legend>
-<h2>Github</a></h2>
-<p>ImageMagick Studio LLC is the organization that designs, maintains, and enhances the ImageMagick software suite. In the past, we paid for the privilege of producing free software out of our own pockets. Now, to help defray costs associated with network bandwidth, development software, computer hardware, taxes, legal, and other expenses, we accept donations from individuals or companies like yourself.</p>
-<ul>
-<iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border: 0;"></iframe>
-</ul>
-<h2><a href="https://www.paypal.com/biz/fund?id=9XPKRUWDXRR8J">Paypal</a></h2>
-<p>For direct monetary contributions, click on the donate button to contribute thru Paypal or with a credit card:</p>
-
-<ul>
-<a href="https://www.paypal.com/biz/fund?id=9XPKRUWDXRR8J"><img "image" src="../image/donate.png" border="0" name="submit" alt="Sponsor ImageMagick" width="92" height="26"</img></a>
-</ul>
-
-<h2>Bitcoin</h2>
-<p>Our Bitcoin Address is: <a href="bitcoin:bc1qd7lckxu36ceupgt4wpnvnug3dr8jcnpqxsla2k?label=ImageMagick%20Donation">bc1qd7lckxu36ceupgt4wpnvnug3dr8jcnpqxsla2k</a>. Or you can reference the below QR code:</p>
-<ul>
-<dt class="col-md-4"><img src="../image/bitcoin.svg" alt="Click to Donate to ImageMagick via Bitcoin" title="Click to Donate to ImageMagick via Bitcoin" width="160" height="160" /></dt>
-</ul>
-</fieldset>
-<br/>
-<p>If you have any questions about supporting ImageMagick, please <a href="https://github.com/ImageMagick/ImageMagick/discussions">contact us</a>.
-</p>
+ <!-- Sponsors Showcase Section -->
+ <section id="sponsors" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-heart-fill fs-4 text-danger"></i>
+ <h2 class="h3 fw-bold mb-0">Project Sponsors</h2>
+ </div>
+
+ <p class="lead text-body-secondary mb-4">
+ We want to sincerely thank the following sponsors of the ImageMagick project:
+ </p>
+
+ <div class="row g-4">
+ <!-- GitHub Sponsor Card -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-4">
+ <div class="d-flex align-items-center gap-3 mb-3">
+ <a href="https://github.com/sponsors/ImageMagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub" class="text-body">
+ <svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg text-primary" viewBox="0 0 512 499.36" width="48" height="48" role="img" focusable="false"><title>GitHub</title><path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z"/></svg>
+ </a>
+ <div>
+ <h5 class="fw-bold mb-1"><a href="http://www.amd.com/" class="text-decoration-none">AMD</a></h5>
+ <p class="small text-body-secondary mb-0">The world's leading software development platform.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ <!-- Futureweb Sponsor Card -->
+ <div class="col-md-6">
+ <div class="card im-card h-100 p-4">
+ <div class="d-flex align-items-center gap-3 mb-3">
+ <a href="https://www.futureweb.at/" target="_blank" rel="noopener">
+ <img src="../image/futureweb_red.png" width="100" height="112" alt="Futureweb" class="img-fluid rounded" />
+ </a>
+ <div>
+ <h5 class="fw-bold mb-1"><a href="https://www.futureweb.at/" class="text-decoration-none" target="_blank" rel="noopener">Futureweb</a></h5>
+ <p class="small text-body-secondary mb-0">Your Austrian Webdesign & Hosting Company.</p>
+ </div>
+ </div>
+ </div>
+ </div>
+ </div>
+ </section>
-</div>
+ <!-- Contribute Section -->
+ <section id="contribute" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-code-slash fs-4 text-primary"></i>
+ <h2 class="h3 fw-bold mb-0">Contribute a Bug Fix or Enhancement</h2>
+ </div>
+ <div class="card im-card p-4">
+ <p class="text-body-secondary mb-3">
+ Open an issue on the <a href="https://github.com/ImageMagick/ImageMagick/" target="_blank" rel="noopener">GitHub repository</a> if you think you have found a bug or security vulnerability. Open a pull request to the repository if you have a fix. Post to the <a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank" rel="noopener">discussions</a> forum if you want to propose an enhancement for discussion.
+ </p>
+ </div>
+ </section>
+
+ <!-- Support Section -->
+ <section id="support" class="mb-5">
+ <div class="d-flex align-items-center gap-2 mb-4 border-bottom pb-2">
+ <i class="bi bi-shield-shaded fs-4 text-success"></i>
+ <h2 class="h3 fw-bold mb-0">Sponsor the ImageMagick Project</h2>
+ </div>
+
+ <p class="text-body-secondary mb-3">
+ ImageMagick has been available for free since the early 1990's. It has consistently been one of the most comprehensive free image processing packages available, but, unlike competing packages, it continues to be supported and enhanced. Today, ImageMagick is more comprehensive and better supported than ever.
+ </p>
+ <p class="text-body-secondary mb-3">
+ ImageMagick has enjoyed considerable support from commercial users. Since ImageMagick is not restricted from use in commercial or proprietary applications, it is used to support thousands of commercial web sites and is used in professional digital image and movie studios as well as publishing shops. It is also used as a component of a number of commercial applications. Many of these commercial users have made contributions to ImageMagick, large and small, often anonymous, but always appreciated.
+ </p>
+ <p class="text-body-secondary mb-4">
+ ImageMagick Studio LLC is looking for support from individuals or companies that use ImageMagick, or would like to help support free software. If you or your company depends on ImageMagick, supporting ImageMagick is a way to express your gratitude and to contribute back to the further development of ImageMagick.
+ </p>
+
+ <!-- Ways to Support Card Grid -->
+ <div class="card im-card p-4 mb-4 bg-body-tertiary">
+ <h5 class="fw-bold mb-3">Ways You Can Support ImageMagick</h5>
+ <div class="row g-3">
+ <div class="col-md-6">
+ <ul class="list-unstyled small text-body-secondary d-flex flex-column gap-2 mb-0">
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Contribute source code or patches to help improve ImageMagick.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Send us a licensed copy of Adobe Photoshop.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Lend developers for additional formats or SVG support.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Extend our FFT algorithm to support non-square images.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Port our Linux build environment from Autoconf to CMake.</li>
+ </ul>
</div>
- <div class="col-lg-3 col-12 ps-lg-4 border-start d-flex flex-column align-items-center align-items-lg-start">
- <div class="container text-center my-3">
- <a href="../image/wizard.png" rel="noopener noreferrer" target="_blank">
- <img alt="ImageMagick Wizard" class="img-fluid img-thumbnail" height="351" loading="lazy" src="../image/wizard.jpg" width="264">
- </a>
- <p class="mt-2"><iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="107" style="border:0 !important; width:107px !important; height:35px !important;"></iframe></p>
+ <div class="col-md-6">
+ <ul class="list-unstyled small text-body-secondary d-flex flex-column gap-2 mb-0">
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Provide technical writers for commercial-grade documentation.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Donate a quality SWOP or Eurostandard ICC profile.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Donate a workstation with modern processor and memory.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Donate a Windows laptop for Windows 11 testing.</li>
+ <li><i class="bi bi-check-circle-fill text-success me-2"></i>Make a monetary contribution (anonymous or public).</li>
+ </ul>
+ </div>
+ </div>
+ </div>
+
+ <!-- Sponsor Action Box -->
+ <div class="card im-card border-primary p-4">
+ <div class="text-center mb-4">
+ <h4 class="fw-bold">Make a Contribution</h4>
+ <p class="small text-body-secondary">ImageMagick Studio LLC relies on donations to defray network bandwidth, hardware, taxes, and legal expenses.</p>
+ </div>
+
+ <div class="row g-4 align-items-center text-center">
+ <!-- GitHub Sponsors -->
+ <div class="col-md-4 border-end-md">
+ <h5 class="fw-bold mb-2">GitHub Sponsors</h5>
+ <p class="small text-body-secondary mb-3">Support via GitHub's sponsorship program.</p>
+ <div class="d-inline-block overflow-hidden rounded shadow-sm" style="height: 32px; width: 107px;">
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" class="w-100 h-100 border-0" scrolling="no"></iframe>
</div>
- <div class="container text-center my-3">
- <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745"
- crossorigin="anonymous"></script>
- <!-- Banner Ad -->
- <ins class="adsbygoogle"
- style="display:block"
- data-ad-client="ca-pub-3129977114552745"
- data-ad-slot="1083537442"
- data-ad-format="auto"
- data-full-width-responsive="true"></ins>
- <script>
- (adsbygoogle = window.adsbygoogle || []).push({});
- </script>
+ </div>
+
+ <!-- PayPal -->
+ <div class="col-md-4 border-end-md">
+ <h5 class="fw-bold mb-2">PayPal</h5>
+ <p class="small text-body-secondary mb-3">Direct monetary contribution via credit card or PayPal.</p>
+ <a href="https://www.paypal.com/biz/fund?id=9XPKRUWDXRR8J" target="_blank" rel="noopener">
+ <img src="../image/donate.png" border="0" name="submit" alt="Sponsor ImageMagick" width="92" height="26" class="shadow-sm" />
+ </a>
+ </div>
+
+ <!-- Bitcoin -->
+ <div class="col-md-4">
+ <h5 class="fw-bold mb-2">Bitcoin</h5>
+ <p class="small text-body-secondary mb-2">Scan QR or use address:</p>
+ <div class="mb-2">
+ <img src="../image/bitcoin.svg" alt="Bitcoin QR Code" title="Click to Donate to ImageMagick via Bitcoin" width="120" height="120" class="rounded border p-1 bg-white" />
</div>
+ <a href="bitcoin:bc1qd7lckxu36ceupgt4wpnvnug3dr8jcnpqxsla2k?label=ImageMagick%20Donation" class="small font-mono text-break text-decoration-none">bc1qd7lckxu36ceupgt4wpnvnug3dr8jcnpqxsla2k</a>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
- </main><!-- /.container -->
- <footer class="text-center pt-5 my-5 text-body-secondary border-top">
- <div class="container-fluid">
- <a href="../security-policy/index.html">Security</a> •
- <a href="../news/index.html">News</a>
-
- <a href="#"><img class="d-inline" id="wand" alt="And Now a Touch of Magick" width="16" height="16" src="../image/wand.png"></a>
-
- <a href="../links/index.html">Related</a> •
- <a href="../sitemap/index.html">Sitemap</a>
- <br>
- <a href="index.html">Sponsor</a> •
- <a href="../cite/index.html">Cite</a> •
- <a href="http://pgp.mit.edu/pks/lookup?op=get&search=0x89AB63D48277377A">Public Key</a> •
- <a href="https://github.com/ImageMagick/ImageMagick/discussions">Contact Us</a>
- <br>
- <a href="https://github.com/imagemagick/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="GitHub"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 512 499.36" width="2%" height="2%" role="img" focusable="false">
- <title>GitHub</title>
- <path fill="currentColor" fill-rule="evenodd" d="M256 0C114.64 0 0 114.61 0 256c0 113.09 73.34 209 175.08 242.9 12.8 2.35 17.47-5.56 17.47-12.34 0-6.08-.22-22.18-.35-43.54-71.2 15.49-86.2-34.34-86.2-34.34-11.64-29.57-28.42-37.45-28.42-37.45-23.27-15.84 1.73-15.55 1.73-15.55 25.69 1.81 39.21 26.38 39.21 26.38 22.84 39.12 59.92 27.82 74.5 21.27 2.33-16.54 8.94-27.82 16.25-34.22-56.84-6.43-116.6-28.43-116.6-126.49 0-27.95 10-50.8 26.35-68.69-2.63-6.48-11.42-32.5 2.51-67.75 0 0 21.49-6.88 70.4 26.24a242.65 242.65 0 0 1 128.18 0c48.87-33.13 70.33-26.24 70.33-26.24 14 35.25 5.18 61.27 2.55 67.75 16.41 17.9 26.31 40.75 26.31 68.69 0 98.35-59.85 120-116.88 126.32 9.19 7.9 17.38 23.53 17.38 47.41 0 34.22-.31 61.83-.31 70.23 0 6.85 4.61 14.81 17.6 12.31C438.72 464.97 512 369.08 512 256.02 512 114.62 397.37 0 256 0z" />
- </svg></a> •
- <a href="https://twitter.com/imagemagick" rel="noopener noreferrer" target="_blank" aria-label="Twitter"><svg xmlns="http://www.w3.org/2000/svg" class="navbar-nav-svg" viewBox="0 0 300 300" width="2%" height="2%" role="img" focusable="false">
- <title>Twitter</title>
- <path d="M178.57 127.15 290.27 0h-26.46l-97.03 110.38L89.34 0H0l117.13 166.93L0 300.25h26.46l102.4-116.59 81.8 116.59h89.34M36.01 19.54H76.66l187.13 262.13h-40.66" />
- </svg></a>
- <br>
- <small>Copyright © 1999 ImageMagick Studio LLC</small>
- </div>
- </footer>
- <div style="visibility: hidden;">
- <div class="gcse-search"></div>
</div>
+ </section>
+
+ <!-- Contact footer note -->
+ <div class="text-center mt-5">
+ <p class="text-body-secondary small mb-0">
+ If you have any questions about supporting ImageMagick, please <a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank" rel="noopener">contact us</a>.
+ </p>
</div>
+</div>
- <!-- Javascript assets -->
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js" integrity="sha384-FKyoEForCGlyvwx9Hj09JcYn3nv7wiPVlz7YYwJrWVcXK/BmnVDxM+D2scQbITxI" crossorigin="anonymous"></script>
-</body>
+ </div>
+ <!-- Right Sidebar -->
+ <aside class="col-lg-4">
+ <div class="sticky-top" style="top: 90px;">
+ <!-- Sponsor Card -->
+ <div class="card im-card mb-4 overflow-hidden border-0 bg-gradient bg-primary bg-opacity-10">
+ <div class="card-body p-4 text-center">
+ <img src="../image/wizard.jpg" alt="ImageMagick Wizard" class="rounded shadow mb-3 img-fluid" style="max-height: 200px;">
+ <h5 class="fw-bold">Support Open Source</h5>
+ <p class="small text-body-secondary mb-3">Help maintain and sustain ImageMagick development.</p>
+ <iframe src="https://github.com/sponsors/ImageMagick/button" title="Sponsor ImageMagick" height="35" width="114" class="border-0"></iframe>
+ </div>
+ </div>
+
+ <!-- Banner Ad Container -->
+ <div class="text-center p-2 mv-4 rounded border border-secondary-subtle bg-body-tertiary">
+ <script async src="https://localhost/pagead/js/adsbygoogle.js?client=ca-pub-3129977114552745" crossorigin="anonymous"></script>
+ <ins class="adsbygoogle"
+ style="display:block"
+ data-ad-client="ca-pub-3129977114552745"
+ data-ad-slot="1083537442"
+ data-ad-format="auto"
+ data-full-width-responsive="true"></ins>
+ <script>
+ (adsbygoogle = window.adsbygoogle || []).push({});
+ </script>
+ </div>
+
+ <!-- Quick Links Navigation -->
+ <div class="card im-card p-3 mb-4">
+ <h6 class="fw-bold text-uppercase fs-7 text-secondary mb-3">Resources</h6>
+ <ul class="nav flex-column gap-1 fs-6">
+ <li class="nav-item"><a href="../security-policy/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-shield-check me-2 text-success"></i> Security Policy</a></li>
+ <li class="nav-item"><a href="../license/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-file-earmark-text me-2 text-info"></i> Open Source License</a></li>
+ <li class="nav-item"><a href="../porting/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-signpost-split me-2 text-warning"></i> Porting v6 to v7</a></li>
+ <li class="nav-item"><a href="../formats/index.html" class="nav-link p-2 rounded text-body-secondary"><i class="bi bi-filetype-png me-2 text-danger"></i> Supported Formats</a></li>
+ </ul>
+ </div>
+ </div>
+ </aside>
+ </div>
+ </div>
+ </main>
+
+ <!-- Footer -->
+ <footer class="im-footer py-5 mt-auto">
+ <div class="container-xl">
+ <div class="row g-4">
+ <div class="col-md-6 col-lg-4">
+ <a class="navbar-brand im-brand mb-2 fs-5" href="../index.html">ImageMagick</a>
+ <p class="small text-secondary">Mastering Digital Image Alchemy. The open-source suite for image creation, conversion, and batch manipulation.</p>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Navigation</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="../download/index.html">Download</a></li>
+ <li><a href="../command-line-tools/index.html">Tools</a></li>
+ <li><a href="../develop/index.html">APIs & Libraries</a></li>
+ <li><a href="../sitemap/index.html">Sitemap</a></li>
+ </ul>
+ </div>
+ <div class="col-6 col-md-3 col-lg-2">
+ <h6 class="text-light fw-bold mb-3">Community</h6>
+ <ul class="list-unstyled small d-flex flex-column gap-2">
+ <li><a href="https://github.com/ImageMagick/ImageMagick/discussions" target="_blank">Discussions</a></li>
+ <li><a href="https://github.com/ImageMagick/ImageMagick/issues" target="_blank">Report an Issue</a></li>
+ <li><a href="index.html">Sponsor Us</a></li>
+ <li><a href="../cite/index.html">Cite ImageMagick</a></li>
+ </ul>
+ </div>
+ <div class="col-md-6 col-lg-4">
+ <h6 class="text-light fw-bold mb-3">Connect</h6>
+ <div class="d-flex gap-3 fs-5">
+ <a href="https://github.com/imagemagick/imagemagick" target="_blank" aria-label="GitHub"><i class="bi bi-github"></i></a>
+ <a href="https://x.com/imagemagick" target="_blank" aria-label="X/Twitter"><i class="bi bi-twitter-x"></i></a>
+ </div>
+ <p class="small text-secondary mt-3 mb-0">Copyright © 1999 ImageMagick Studio LLC</p>
+ </div>
+ </div>
+ </div>
+ </footer>
+
+ <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/js/bootstrap.bundle.min.js"></script>
+ <script>
+ function setTheme(theme) {
+ localStorage.setItem('theme', theme);
+ const systemDark = window.matchMedia('(prefers-color-scheme: dark)').matches;
+ const applied = theme === 'auto' ? (systemDark ? 'dark' : 'light') : theme;
+ document.documentElement.setAttribute('data-bs-theme', applied);
+ }
+ </script>
+ <div style="visibility: hidden;">
+ <div class="gcse-search"></div>
+ </div>
+</body>
</html>
diff --git a/www/vpat/index.html b/www/vpat/index.html
index 836b36eb3..bd876aa84 100644
--- a/www/vpat/index.html
+++ b/www/vpat/index.html
@@ -162,7 +162,7 @@
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
+ <a class="navbar-brand fw-bold" href="../index.html" title="ImageMagick">ImageMagick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -210,7 +210,7 @@
<div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
+ <a href="../index.html" class="text-decoration-none">
<h1 class="fs-2 mb-1 display-5">Voluntary Product Accessibility Template</h1>
</a>
<h2 class="fs-5 text-muted h4">ImageMagick</h2>
@@ -294,7 +294,7 @@
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
+ <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index.html">About ImageMagick</a>
</main><!-- /.container -->
<footer class="text-center pt-5 my-5 text-body-secondary border-top">
<div class="container-fluid">
diff --git a/www/webp/index.html b/www/webp/index.html
index 9309c2f32..81eff9ae9 100644
--- a/www/webp/index.html
+++ b/www/webp/index.html
@@ -162,7 +162,7 @@
</script>
<nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
<div class="container-fluid">
- <a class="navbar-brand fw-bold" href="../index-2.html" title="ImageMagick">ImageMagick</a>
+ <a class="navbar-brand fw-bold" href="../index.html" title="ImageMagick">ImageMagick</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#magick-navbars" aria-controls="magick-navbars" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
@@ -210,7 +210,7 @@
<div class="col-lg-8 mx-auto text-body-secondary pt-5 pt-lg-5">
<header class="d-flex align-items-center pb-3 mb-5 border-bottom">
<div class="mt-3 ms-3">
- <a href="../index-2.html" class="text-decoration-none">
+ <a href="../index.html" class="text-decoration-none">
<h1 class="fs-2 mb-1 display-5">WebP Encoding Options</h1>
</a>
<h2 class="fs-5 text-muted h4">ImageMagick</h2>
@@ -420,7 +420,7 @@
</div>
</div>
</div>
- <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index-2.html">About ImageMagick</a>
+ <a aria-label="About ImageMagick" class="btn btn-outline-warning mt-3" href="../index.html">About ImageMagick</a>
</main><!-- /.container -->
<footer class="text-center pt-5 my-5 text-body-secondary border-top">
<div class="container-fluid">