feat: image variants per image

web/src/components/ActivityCardList.vue

@@ -4,6 +4,7 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import ActivityActor from '@/components/ActivityActor.vue'
 import ActivityBadge from '@/components/ActivityBadge.vue'
+import ActivityDetailLine from '@/components/ActivityDetailLine.vue'
 import ActivitySentence from '@/components/ActivitySentence.vue'
 import { ACTIVITY_SKELETON_CARDS } from '@/composables/useActivity'
 import { categoryIcon, outcomeBadge, rowSurface, type ActivityItem } from '@/lib/activity'
@@ -96,10 +97,11 @@ function cardClass(item: ActivityItem) {
 							:name="categoryIcon(item.category)"
 							class="mt-0.5 size-4 shrink-0 text-muted"
 						/>
-						<span
-							class="line-clamp-3 min-w-0 flex-1 text-md wrap-anywhere text-default"
-						>
-							<ActivitySentence :item="item" />
+						<span class="flex min-w-0 flex-1 flex-col">
+							<span class="line-clamp-3 text-md wrap-anywhere text-default">
+								<ActivitySentence :item="item" />
+							</span>
+							<ActivityDetailLine :item="item" wrap />
 						</span>
 					</div>
 					<div class="flex flex-wrap items-center gap-1.5">

web/src/components/ActivityDetailLine.vue

@@ -0,0 +1,19 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+import type { ActivityItem } from '@/lib/activity'
+import { detailLine } from '@/lib/activitySentence'
+
+const props = defineProps<{ item: ActivityItem; wrap?: boolean }>()
+
+const line = computed(() => detailLine(props.item))
+</script>
+
+<template>
+	<span
+		v-if="line"
+		data-testid="activity-detail-line"
+		class="block text-xs/5 text-muted"
+		:class="wrap ? 'wrap-anywhere' : 'truncate'"
+		>{{ line }}</span
+	>
+</template>

web/src/components/ActivityDetailsPanel.vue

@@ -5,6 +5,7 @@ import { computed, ref, watch } from 'vue'
 import ActivityActor from '@/components/ActivityActor.vue'
 import ActivityBadge from '@/components/ActivityBadge.vue'
 import ActivityDiff from '@/components/ActivityDiff.vue'
+import ActivityDetailLine from '@/components/ActivityDetailLine.vue'
 import ActivitySentence from '@/components/ActivitySentence.vue'
 import {
 	categoryIcon,
@@ -99,6 +100,7 @@ function onOpenChange(isOpen: boolean) {
 					>
 						<ActivitySentence :item="current" />
 					</p>
+					<ActivityDetailLine :item="current" wrap />
 					<div class="flex flex-wrap items-center gap-1.5">
 						<ActivityBadge v-bind="outcomeBadge(current.outcome)" />
 						<ActivityBadge

web/src/components/ActivityTable.vue

@@ -4,6 +4,7 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import ActivityActor from '@/components/ActivityActor.vue'
 import ActivityBadge from '@/components/ActivityBadge.vue'
+import ActivityDetailLine from '@/components/ActivityDetailLine.vue'
 import ActivitySentence from '@/components/ActivitySentence.vue'
 import ActivityTargetCell from '@/components/ActivityTargetCell.vue'
 import { ACTIVITY_SKELETON_ROWS } from '@/composables/useActivity'
@@ -124,8 +125,11 @@ function rowClass(item: ActivityItem) {
 							:name="categoryIcon(item.category)"
 							class="size-4 shrink-0 text-muted"
 						/>
-						<span class="truncate text-default">
-							<ActivitySentence :item="item" />
+						<span class="flex min-w-0 flex-col">
+							<span class="truncate text-default">
+								<ActivitySentence :item="item" />
+							</span>
+							<ActivityDetailLine :item="item" />
 						</span>
 						<UIcon
 							v-if="item.security"

web/src/components/ArticleEditorImageNode.vue

@@ -1,13 +1,19 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-import { computed, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
 import { NodeViewWrapper, nodeViewProps } from '@tiptap/vue-3'
+import VariantSelect from '@/components/variants/VariantSelect.vue'
 import { articleImageId } from '@/lib/articleImage'
 import { mediaRevision, withMediaRevision } from '@/lib/mediaRevision'
+import { variantOfSrc, withVariant } from '@/lib/variants/blockVariant'
+import { formatDimensions } from '@/lib/variants/variantFormat'
+import { bareOriginalOption, variantOption } from '@/lib/variants/variantOptions'
+import { useVariantCatalogStore } from '@/stores/variantCatalog'
 
 const props = defineProps(nodeViewProps)
 
+const catalog = useVariantCatalogStore()
 const imageId = computed(() => articleImageId(props.node))
 const showDeleteButton = computed(() => props.selected && imageId.value !== null)
 interface ImageNodeAttrs {
@@ -31,11 +37,41 @@ const imageAttrs = computed(() => {
 })
 
 const failed = ref(false)
+const picking = ref(false)
+const pickButton = ref<{ $el: HTMLElement } | null>(null)
 const displayAttrs = computed(() => ({
 	...imageAttrs.value,
 	src: withMediaRevision(imageAttrs.value.src, mediaRevision.value),
 }))
 
+const variantName = computed(() => variantOfSrc(imageAttrs.value.src))
+const variant = computed(() =>
+	variantName.value === null ? undefined : catalog.find(variantName.value),
+)
+const verdict = computed<'deleted' | 'disabled' | null>(() => {
+	if (variantName.value === null || !catalog.loaded) {
+		return null
+	}
+	if (!variant.value) {
+		return 'deleted'
+	}
+	return variant.value.enabled ? null : 'disabled'
+})
+const chip = computed(() =>
+	variant.value
+		? `${variant.value.name} · ${formatDimensions(variant.value.width, variant.value.height)}`
+		: null,
+)
+const warningTitle = computed(() =>
+	verdict.value === 'deleted'
+		? t("Variant '{0}' no longer exists.", [variantName.value ?? ''])
+		: t("Variant '{0}' is disabled.", [variantName.value ?? '']),
+)
+const pickOptions = computed(() => [
+	bareOriginalOption(),
+	...catalog.enabled.map((entry) => variantOption(entry)),
+])
+
 watch(
 	() => displayAttrs.value.src,
 	() => {
@@ -49,18 +85,96 @@ function onDeleteClick() {
 	}
 	props.extension.options.onRequestRemove(imageId.value)
 }
+
+function rewrite(name: string) {
+	const src = imageAttrs.value.src
+	if (src) {
+		props.updateAttributes({ src: withVariant(src, name) })
+	}
+	picking.value = false
+}
+
+async function onPickOpenChange(open: boolean) {
+	if (open) {
+		return
+	}
+	picking.value = false
+	await nextTick()
+	pickButton.value?.$el?.focus()
+}
 </script>
 
 <template>
 	<NodeViewWrapper
 		as="div"
 		class="relative block"
-		:class="[failed ? 'w-full' : 'w-fit', { 'outline-2 outline-primary rounded-md': selected }]"
+		:class="[
+			failed || verdict ? 'w-full' : 'w-fit',
+			{ 'outline-2 outline-primary rounded-md': selected },
+		]"
 		data-testid="article-editor-image"
 		@dragstart.prevent
 	>
 		<div
-			v-if="failed"
+			v-if="verdict"
+			data-testid="article-editor-variant-warning"
+			class="flex flex-col border border-warning font-sans text-sm"
+		>
+			<div class="relative aspect-video overflow-hidden border border-default">
+				<div
+					class="variant-placeholder absolute inset-0 flex items-center justify-center bg-secondary-200 text-muted opacity-50 dark:bg-secondary-300"
+				>
+					<UIcon name="i-lucide-image-off" class="size-10" />
+				</div>
+				<span
+					v-if="chip"
+					data-testid="variant-chip"
+					class="absolute top-2 left-2 inline-flex h-5 items-center border border-accented bg-default px-1.5 font-mono text-xs font-medium text-highlighted"
+					>{{ chip }}</span
+				>
+			</div>
+			<UAlert
+				role="alert"
+				color="warning"
+				variant="soft"
+				orientation="vertical"
+				:close="false"
+				icon="i-lucide-triangle-alert"
+				:title="warningTitle"
+				:description="t('This image returns an error on the public site.')"
+				:ui="{ actions: 'mt-2 w-full flex-col items-stretch gap-2' }"
+			>
+				<template #actions>
+					<div class="flex">
+						<UButton
+							ref="pickButton"
+							color="neutral"
+							variant="outline"
+							icon="i-lucide-layers"
+							data-testid="pick-another-variant"
+							class="h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs font-medium text-highlighted ring-0 md:h-7"
+							:ui="{ leadingIcon: 'size-3.5' }"
+							@mousedown.prevent
+							@click="picking = true"
+						>
+							{{ t('Pick another variant') }}
+						</UButton>
+					</div>
+					<VariantSelect
+						v-if="picking"
+						:open="true"
+						:options="pickOptions"
+						:model-value="undefined"
+						:placeholder="t('Variant')"
+						class="max-w-80"
+						@update:open="onPickOpenChange"
+						@update:model-value="rewrite"
+					/>
+				</template>
+			</UAlert>
+		</div>
+		<div
+			v-else-if="failed"
 			data-testid="article-editor-image-missing"
 			class="flex min-h-40 flex-col items-center justify-center gap-2 border border-dashed border-accented bg-elevated p-6 text-center font-sans text-sm text-muted"
 		>
@@ -70,15 +184,22 @@ function onDeleteClick() {
 			}}</span>
 			<span>{{ t('It was deleted from the library. Remove it from the article.') }}</span>
 		</div>
-		<img
-			v-else
-			v-bind="displayAttrs"
-			draggable="false"
-			class="block max-w-full"
-			@error="failed = true"
-		/>
+		<div v-else class="relative">
+			<img
+				v-bind="displayAttrs"
+				draggable="false"
+				class="block max-w-full"
+				@error="failed = true"
+			/>
+			<span
+				v-if="chip"
+				data-testid="variant-chip"
+				class="absolute top-2 left-2 inline-flex h-5 items-center border border-accented bg-default px-1.5 font-mono text-xs font-medium text-highlighted"
+				>{{ chip }}</span
+			>
+		</div>
 		<UButton
-			v-if="showDeleteButton || (failed && imageId !== null)"
+			v-if="showDeleteButton || ((failed || verdict) && imageId !== null)"
 			data-testid="remove-image-button"
 			icon="i-lucide-trash-2"
 			color="neutral"
@@ -92,3 +213,13 @@ function onDeleteClick() {
 		</UButton>
 	</NodeViewWrapper>
 </template>
+
+<style scoped>
+.variant-placeholder {
+	background-image: repeating-linear-gradient(
+		135deg,
+		color-mix(in srgb, var(--ui-text-muted) 12%, transparent) 0 1px,
+		transparent 1px 12px
+	);
+}
+</style>

web/src/components/BulkDeleteMediaDialog.vue

@@ -4,6 +4,7 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import MediaBadge from '@/components/MediaBadge.vue'
+import VariantRemovalNote from '@/components/variants/VariantRemovalNote.vue'
 import type { MediaItem } from '@/composables/useMedia'
 import { pluralArticles } from '@/lib/mediaFormat'
 
@@ -20,6 +21,12 @@ const emit = defineEmits<{ close: [confirmed: boolean] }>()
 const total = computed(() => props.items.length)
 const imageLabel = computed(() => t(total.value === 1 ? '{0} image' : '{0} images', [total.value]))
 const inUse = computed(() => props.items.filter((item) => item.used_in > 0))
+const variantCount = computed(() =>
+	props.items.reduce((sum, item) => sum + (item.variant_count ?? 0), 0),
+)
+const variantBytes = computed(() =>
+	props.items.reduce((sum, item) => sum + (item.variant_size ?? 0), 0),
+)
 const articleCount = computed(() => inUse.value.reduce((sum, item) => sum + item.used_in, 0))
 const description = computed(() => {
 	const usedCount = inUse.value.length
@@ -79,6 +86,7 @@ const description = computed(() => {
 					<MediaBadge v-else kind="unused" :label="t('Unused')" />
 				</li>
 			</ul>
+			<VariantRemovalNote :count="variantCount" :bytes="variantBytes" />
 		</template>
 	</ConfirmDialog>
 </template>

web/src/components/DeleteMediaDialog.vue

@@ -4,6 +4,7 @@ import { t } from '@/i18n'
 import { computed } from 'vue'
 import ConfirmDialog from '@/components/ConfirmDialog.vue'
 import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
+import VariantRemovalNote from '@/components/variants/VariantRemovalNote.vue'
 import type { MediaItem, MediaUsageItem } from '@/composables/useMedia'
 import { pluralArticles } from '@/lib/mediaFormat'
 
@@ -58,6 +59,7 @@ const description = computed(() =>
 					<MediaArticleStatusBadge :published="article.published" />
 				</li>
 			</ul>
+			<VariantRemovalNote :count="item.variant_count" :bytes="item.variant_size" />
 		</template>
 	</ConfirmDialog>
 </template>

web/src/components/ImageUploader.vue

@@ -8,6 +8,8 @@ import { ApiError, useApi } from '@/composables/useApi'
 import { useLibraryList } from '@/composables/useLibraryList'
 import { classifyMediaError, type MediaItem } from '@/composables/useMedia'
 import { oldestOf } from '@/composables/useMediaUpload'
+import { useCanManageVariants } from '@/composables/useCanManageVariants'
+import { useVariantCatalogStore } from '@/stores/variantCatalog'
 import { hashFile } from '@/lib/fileHash'
 import {
 	IMAGE_TYPE_REJECTION_TEXT,
@@ -17,6 +19,7 @@ import {
 	validateImageFile,
 } from '@/lib/imageUpload'
 import { libraryMatchText } from '@/lib/mediaFormat'
+import { insertedUrl } from '@/lib/variants/variantOptions'
 import { UNDERLINE_TAB_TRIGGER } from '@/lib/tabStyles'
 import {
 	ASPECT_RATIOS,
@@ -55,7 +58,7 @@ const props = withDefaults(
 
 const emit = defineEmits<{
 	uploaded: [item: MediaItem]
-	inserted: [item: MediaItem, alt: string]
+	inserted: [item: MediaItem, alt: string, src: string]
 	close: []
 }>()
 
@@ -102,7 +105,9 @@ const tab = ref<Tab>('library')
 const existing = ref<MediaItem | null>(null)
 const selected = ref<MediaItem | null>(null)
 const alt = ref('')
+const variant = ref('')
 let tabTouched = false
+let variantsRequested = false
 
 const naturalWidth = ref(0)
 const naturalHeight = ref(0)
@@ -117,6 +122,8 @@ const sourceBitmap = ref<ImageBitmap | null>(null)
 const { progress, start, abort } = useImageUpload()
 const { request } = useApi()
 const library = useLibraryList()
+const canManageVariants = useCanManageVariants()
+const catalog = useVariantCatalogStore()
 let closeTimer: ReturnType<typeof setTimeout> | null = null
 
 const uploadPercent = computed(() => {
@@ -418,11 +425,22 @@ function selectItem(item: MediaItem) {
 	}
 	selected.value = item
 	alt.value = ''
+	variant.value = ''
+	requestVariants()
+}
+
+function requestVariants() {
+	if (variantsRequested || !canManageVariants.value) {
+		return
+	}
+	variantsRequested = true
+	catalog.load()
 }
 
 async function searchLibrary(query: string) {
 	selected.value = null
 	alt.value = ''
+	variant.value = ''
 	await library.search(query)
 }
 
@@ -430,7 +448,7 @@ function insertSelected() {
 	if (!selected.value) {
 		return
 	}
-	emit('inserted', selected.value, alt.value)
+	emit('inserted', selected.value, alt.value, insertedUrl(selected.value, variant.value))
 	open.value = false
 }
 
@@ -710,6 +728,8 @@ watch(open, (isOpen) => {
 		existing.value = null
 		selected.value = null
 		alt.value = ''
+		variant.value = ''
+		variantsRequested = false
 		tabTouched = false
 		library.reset()
 		if (props.initialFile) {
@@ -768,6 +788,9 @@ onUnmounted(() => {
 				<MediaPicker
 					v-if="onLibraryTab"
 					v-model:alt="alt"
+					v-model:variant="variant"
+					:variants="catalog.status === 'ready' ? catalog.enabled : []"
+					:variants-ready="catalog.status === 'ready'"
 					:items="library.items.value"
 					:status="library.status.value"
 					:show-skeleton="library.showSkeleton.value"

web/src/components/MediaBadge.vue

@@ -3,7 +3,7 @@ import { computed } from 'vue'
 
 const props = withDefaults(
 	defineProps<{
-		kind: 'unused' | 'duplicate' | 'used' | 'online' | 'draft'
+		kind: 'unused' | 'duplicate' | 'used' | 'online' | 'draft' | 'variants'
 		label: string
 		size?: 'sm' | 'md'
 	}>(),
@@ -21,6 +21,10 @@ const badges = {
 		icon: 'i-lucide-copy',
 		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
 	},
+	variants: {
+		icon: 'i-lucide-layers',
+		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
+	},
 	used: { icon: undefined, class: OUTLINE },
 	online: {
 		icon: 'i-lucide-globe',

web/src/components/MediaCardBadges.vue

@@ -4,7 +4,8 @@ import { t } from '@/i18n'
 import MediaBadge from '@/components/MediaBadge.vue'
 
 defineProps<{
-	item: { duplicate: boolean; used_in: number }
+	item: { duplicate: boolean; used_in: number; variant_count?: number }
+	variants?: boolean
 }>()
 </script>
 
@@ -12,4 +13,9 @@ defineProps<{
 	<MediaBadge v-if="item.duplicate" kind="duplicate" :label="t('Duplicate')" />
 	<MediaBadge v-if="item.used_in > 0" kind="used" :label="t('Used in {0}', [item.used_in])" />
 	<MediaBadge v-else kind="unused" :label="t('Unused')" />
+	<MediaBadge
+		v-if="variants && (item.variant_count ?? 0) > 0"
+		kind="variants"
+		:label="item.variant_count === 1 ? t('1 variant') : t('{0} variants', [item.variant_count])"
+	/>
 </template>

web/src/components/MediaDetailPanel.vue

@@ -1,10 +1,11 @@
 <script setup lang="ts">
 import { t } from '@/i18n'
 
-import { computed } from 'vue'
+import { computed, ref, watch } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
 import MediaArticleStatusBadge from '@/components/MediaArticleStatusBadge.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
+import MediaVariantsTab from '@/components/variants/MediaVariantsTab.vue'
 import type { MediaItem, MediaUsageItem } from '@/composables/useMedia'
 import {
 	formatDimensions,
@@ -14,6 +15,8 @@ import {
 	joinNames,
 	pluralArticles,
 } from '@/lib/mediaFormat'
+import { PANEL_TAB_TRIGGER } from '@/lib/tabStyles'
+import { useCanManageVariants } from '@/composables/useCanManageVariants'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
 const ACTION_BUTTON =
@@ -31,10 +34,46 @@ const emit = defineEmits<{
 	rename: []
 	delete: []
 	'review-duplicates': []
+	gone: []
 }>()
 
 const open = defineModel<boolean>('open', { default: false })
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
+const canManageVariants = useCanManageVariants()
+const panelTab = ref<'details' | 'variants'>('details')
+const variantsVisited = ref(false)
+
+const tabItems = computed(() => [
+	{
+		get label() {
+			return t('Details')
+		},
+		value: 'details',
+	},
+	{
+		get label() {
+			return t('Variants')
+		},
+		value: 'variants',
+	},
+])
+const tabModel = computed({
+	get: () => panelTab.value,
+	set: (value: string) => {
+		panelTab.value = value === 'variants' ? 'variants' : 'details'
+		if (panelTab.value === 'variants') {
+			variantsVisited.value = true
+		}
+	},
+})
+
+watch(
+	() => [open.value, props.item?.id],
+	() => {
+		panelTab.value = 'details'
+		variantsVisited.value = false
+	},
+)
 
 const closeButton = computed(() => ({
 	color: 'neutral' as const,
@@ -124,126 +163,158 @@ const duplicateAlert = computed(() => {
 		}"
 	>
 		<template #body>
-			<div v-if="item" class="flex flex-col gap-5">
-				<MediaThumb
-					:item="item"
-					size="xl"
-					class="aspect-4/3 w-full border border-default md:aspect-16/10"
-				/>
-
-				<div class="flex gap-2 max-md:flex-wrap">
-					<UButton
+			<div v-if="item" class="flex flex-col gap-4">
+				<div
+					v-if="canManageVariants"
+					data-testid="panel-tabs"
+					class="-mx-4 -mt-4 h-11 border-b border-default px-4 md:-mx-5 md:-mt-5 md:mb-1 md:h-10 md:px-5"
+				>
+					<UTabs
+						v-model="tabModel"
+						:items="tabItems"
+						variant="link"
 						color="neutral"
-						variant="outline"
-						icon="i-lucide-link"
-						:class="ACTION_BUTTON"
-						@click="emit('copy-url')"
-					>
-						{{ t('Copy URL') }}
-					</UButton>
-					<UButton
-						color="neutral"
-						variant="outline"
-						icon="i-lucide-pencil"
-						:disabled="offline"
-						:class="ACTION_BUTTON"
-						@click="emit('rename')"
-					>
-						{{ t('Rename') }}
-					</UButton>
-					<UButton
-						color="neutral"
-						variant="outline"
-						icon="i-lucide-trash-2"
-						:disabled="offline"
-						:class="ACTION_BUTTON"
-						class="text-error"
-						@click="emit('delete')"
-					>
-						{{ t('Delete') }}
-					</UButton>
+						:content="false"
+						class="-mb-px"
+						:ui="{
+							list: 'gap-5 border-b-0 p-0',
+							trigger: PANEL_TAB_TRIGGER,
+						}"
+					/>
 				</div>
 
-				<UAlert
-					v-if="duplicateAlert"
-					data-testid="duplicate-alert"
-					color="info"
-					variant="soft"
-					orientation="vertical"
-					:close="false"
-					icon="i-lucide-copy"
-					:title="duplicateAlert.title"
-					:description="duplicateAlert.description"
-					:ui="{ actions: 'mt-2 w-full', description: 'text-wrap' }"
-				>
-					<template #actions>
+				<MediaVariantsTab
+					v-if="canManageVariants && variantsVisited"
+					v-show="panelTab === 'variants'"
+					:key="item.id"
+					:item="item"
+					@gone="emit('gone')"
+				/>
+
+				<div v-show="panelTab === 'details'" class="flex flex-col gap-5">
+					<MediaThumb
+						:item="item"
+						size="xl"
+						class="aspect-4/3 w-full border border-default md:aspect-16/10"
+					/>
+
+					<div class="flex gap-2 max-md:flex-wrap">
 						<UButton
 							color="neutral"
 							variant="outline"
-							icon="i-lucide-arrow-right"
-							block
-							class="h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-7"
-							:ui="{ leadingIcon: 'size-3.5' }"
-							@click="emit('review-duplicates')"
+							icon="i-lucide-link"
+							:class="ACTION_BUTTON"
+							@click="emit('copy-url')"
 						>
-							{{ t('Review duplicates') }}
+							{{ t('Copy URL') }}
 						</UButton>
-					</template>
-				</UAlert>
+						<UButton
+							color="neutral"
+							variant="outline"
+							icon="i-lucide-pencil"
+							:disabled="offline"
+							:class="ACTION_BUTTON"
+							@click="emit('rename')"
+						>
+							{{ t('Rename') }}
+						</UButton>
+						<UButton
+							color="neutral"
+							variant="outline"
+							icon="i-lucide-trash-2"
+							:disabled="offline"
+							:class="ACTION_BUTTON"
+							class="text-error"
+							@click="emit('delete')"
+						>
+							{{ t('Delete') }}
+						</UButton>
+					</div>
 
-				<dl class="grid grid-cols-[110px_minmax(0,1fr)] gap-x-3 gap-y-2 text-toned">
-					<template v-for="row in metadata" :key="row.label">
-						<dt class="text-muted">{{ row.label }}</dt>
-						<dd class="m-0 text-highlighted">{{ row.value }}</dd>
-					</template>
-					<dt class="text-muted">URL</dt>
-					<dd class="m-0 truncate font-mono text-xs/5 text-highlighted">
-						{{ displayUrl }}
-					</dd>
-				</dl>
-
-				<section class="flex flex-col gap-2">
-					<h3 class="text-base font-semibold text-highlighted">
-						{{
-							item.used_in > 0
-								? t('Used in {0}', [pluralArticles(item.used_in)])
-								: t('Not used in any article')
-						}}
-					</h3>
-					<template v-if="item.used_in > 0">
-						<ul v-if="usage.length > 0" class="border border-default">
-							<li
-								v-for="(article, index) in usage"
-								:key="article.id"
-								data-testid="usage-row"
-								class="flex min-h-12 items-center gap-2 px-3 md:min-h-10"
-								:class="{ 'border-t border-muted': index > 0 }"
+					<UAlert
+						v-if="duplicateAlert"
+						data-testid="duplicate-alert"
+						color="info"
+						variant="soft"
+						orientation="vertical"
+						:close="false"
+						icon="i-lucide-copy"
+						:title="duplicateAlert.title"
+						:description="duplicateAlert.description"
+						:ui="{ actions: 'mt-2 w-full', description: 'text-wrap' }"
+					>
+						<template #actions>
+							<UButton
+								color="neutral"
+								variant="outline"
+								icon="i-lucide-arrow-right"
+								block
+								class="h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-7"
+								:ui="{ leadingIcon: 'size-3.5' }"
+								@click="emit('review-duplicates')"
 							>
-								<RouterLink
-									:to="`/article/${article.id}/edit`"
-									class="min-w-0 flex-1 truncate font-medium text-highlighted underline underline-offset-3"
-								>
-									{{ article.title }}
-								</RouterLink>
-								<MediaArticleStatusBadge :published="article.published" size="md" />
-								<UIcon
-									name="i-lucide-arrow-up-right"
-									class="size-3.5 shrink-0 text-muted"
-								/>
-							</li>
-						</ul>
-						<p class="text-xs text-muted">
+								{{ t('Review duplicates') }}
+							</UButton>
+						</template>
+					</UAlert>
+
+					<dl class="grid grid-cols-[110px_minmax(0,1fr)] gap-x-3 gap-y-2 text-toned">
+						<template v-for="row in metadata" :key="row.label">
+							<dt class="text-muted">{{ row.label }}</dt>
+							<dd class="m-0 text-highlighted">{{ row.value }}</dd>
+						</template>
+						<dt class="text-muted">URL</dt>
+						<dd class="m-0 truncate font-mono text-xs/5 text-highlighted">
+							{{ displayUrl }}
+						</dd>
+					</dl>
+
+					<section class="flex flex-col gap-2">
+						<h3 class="text-base font-semibold text-highlighted">
 							{{
-								t(
-									'Counted from the text of your articles each time you open this page.',
-								)
+								item.used_in > 0
+									? t('Used in {0}', [pluralArticles(item.used_in)])
+									: t('Not used in any article')
 							}}
+						</h3>
+						<template v-if="item.used_in > 0">
+							<ul v-if="usage.length > 0" class="border border-default">
+								<li
+									v-for="(article, index) in usage"
+									:key="article.id"
+									data-testid="usage-row"
+									class="flex min-h-12 items-center gap-2 px-3 md:min-h-10"
+									:class="{ 'border-t border-muted': index > 0 }"
+								>
+									<RouterLink
+										:to="`/article/${article.id}/edit`"
+										class="min-w-0 flex-1 truncate font-medium text-highlighted underline underline-offset-3"
+									>
+										{{ article.title }}
+									</RouterLink>
+									<MediaArticleStatusBadge
+										:published="article.published"
+										size="md"
+									/>
+									<UIcon
+										name="i-lucide-arrow-up-right"
+										class="size-3.5 shrink-0 text-muted"
+									/>
+								</li>
+							</ul>
+							<p class="text-xs text-muted">
+								{{
+									t(
+										'Counted from the text of your articles each time you open this page.',
+									)
+								}}
+							</p>
+						</template>
+						<p v-else class="text-muted">
+							{{ t('This image is safe to delete. No article shows it.') }}
 						</p>
-					</template>
-					<p v-else class="text-muted">
-						{{ t('This image is safe to delete. No article shows it.') }}
-					</p>
-				</section>
+					</section>
+				</div>
 			</div>
 		</template>
 	</USlideover>

web/src/components/MediaEmptyState.vue

@@ -6,7 +6,7 @@ import { computed } from 'vue'
 const QUERY_MAX_LENGTH = 40
 
 const props = defineProps<{
-	variant: 'first-run' | 'no-results' | 'no-duplicates'
+	variant: 'first-run' | 'no-results' | 'no-duplicates' | 'no-variants'
 	query?: string
 	filterLabel?: string
 	offline?: boolean
@@ -42,6 +42,20 @@ const current = computed(() => {
 			action: t('Back to all images'),
 		}
 	}
+	if (props.variant === 'no-variants') {
+		return {
+			icon: 'i-lucide-layers',
+			get title() {
+				return t('No images with variants')
+			},
+			get description() {
+				return t(
+					'Variants are generated when an image is requested with ?v=<name>, or from its Variants tab.',
+				)
+			},
+			action: t('Show all images'),
+		}
+	}
 	return {
 		icon: 'i-lucide-search',
 		get title() {

web/src/components/MediaGrid.vue

@@ -6,7 +6,7 @@ import MediaCardBadges from '@/components/MediaCardBadges.vue'
 import MediaCheckbox from '@/components/MediaCheckbox.vue'
 import MediaThumb from '@/components/MediaThumb.vue'
 import type { MediaItem } from '@/composables/useMedia'
-import { accessibleName, formatDimensions, formatSize } from '@/lib/mediaFormat'
+import { accessibleName, formatDimensions, formatSize, totalMeta } from '@/lib/mediaFormat'
 
 const SELECTED_CARD =
 	'border-primary bg-secondary-200 text-primary-900 inset-ring-1 inset-ring-primary dark:bg-secondary-300'
@@ -16,6 +16,7 @@ const props = defineProps<{
 	items: MediaItem[]
 	columns: number
 	selected: number[]
+	totalSize?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -108,12 +109,15 @@ function onKeyup(event: KeyboardEvent) {
 						<span
 							class="truncate text-xs/5"
 							:class="selected.includes(item.id) ? 'text-primary-600' : 'text-muted'"
-							>{{ formatSize(item.size) }} ·
-							{{ formatDimensions(item.width, item.height) }}</span
+							>{{
+								totalSize
+									? totalMeta(item)
+									: `${formatSize(item.size)} · ${formatDimensions(item.width, item.height)}`
+							}}</span
 						>
 					</span>
 					<span class="flex flex-wrap gap-1">
-						<MediaCardBadges :item="item" />
+						<MediaCardBadges :item="item" variants />
 					</span>
 				</span>
 			</button>

web/src/components/MediaPicker.vue

@@ -4,7 +4,9 @@ import { t } from '@/i18n'
 import { computed, nextTick, onBeforeUnmount, ref, watch } from 'vue'
 import { useMediaQuery } from '@vueuse/core'
 import MediaThumb from '@/components/MediaThumb.vue'
+import VariantPickerField from '@/components/variants/VariantPickerField.vue'
 import type { LibraryStatus } from '@/composables/useLibraryList'
+import type { ImageVariant } from '@/composables/useImageVariants'
 import type { MediaItem } from '@/composables/useMedia'
 import { accessibleName, formatDimensions, formatSize } from '@/lib/mediaFormat'
 
@@ -34,6 +36,8 @@ const props = defineProps<{
 	firstNewId: number | null
 	inArticleIds: number[]
 	selected: MediaItem | null
+	variants?: ImageVariant[]
+	variantsReady?: boolean
 }>()
 
 const emit = defineEmits<{
@@ -45,6 +49,7 @@ const emit = defineEmits<{
 }>()
 
 const alt = defineModel<string>('alt', { default: '' })
+const variant = defineModel<string>('variant', { default: '' })
 
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const grid = ref<HTMLElement | null>(null)
@@ -323,6 +328,12 @@ onBeforeUnmount(clearDebounce)
 					>
 				</div>
 			</div>
+			<VariantPickerField
+				v-model:variant="variant"
+				:image="selected"
+				:variants="variants ?? []"
+				:ready="variantsReady ?? false"
+			/>
 			<UFormField
 				:label="t('Alt text (optional)')"
 				help="Describes the image for people who use a screen reader, and shows if it doesn't load. Leave it empty if the image is only decoration."

web/src/components/MediaToolbar.vue

@@ -2,11 +2,20 @@
 import { t, formatNumber } from '@/i18n'
 
 import { computed, onBeforeUnmount, ref, watch } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import MediaVariantsFilter from '@/components/MediaVariantsFilter.vue'
 import type { MediaCounts } from '@/composables/useMedia'
-import type { MediaControls, MediaFilter, MediaSort, MediaView } from '@/lib/mediaQuery'
+import type {
+	MediaControls,
+	MediaFilter,
+	MediaSort,
+	MediaVariantsFilter as VariantsFilterValue,
+	MediaView,
+} from '@/lib/mediaQuery'
 import { UNDERLINE_TAB_TRIGGER } from '@/lib/tabStyles'
 
 const SEARCH_DEBOUNCE_MS = 120
+const DESKTOP_QUERY = '(min-width: 48rem)'
 
 const SORT_LABELS: Record<MediaSort, string> = {
 	get newest() {
@@ -21,6 +30,9 @@ const SORT_LABELS: Record<MediaSort, string> = {
 	get largest() {
 		return t('Largest')
 	},
+	get total_size() {
+		return t('Largest total size (original + variants)')
+	},
 }
 
 const VIEW_OPTIONS: { value: MediaView; icon: string; label: string }[] = [
@@ -54,10 +66,12 @@ const emit = defineEmits<{
 	'update:q': [value: string]
 	'update:filter': [value: MediaFilter]
 	'update:sort': [value: MediaSort]
+	'update:variants': [value: VariantsFilterValue]
 	'update:view': [value: MediaView]
 	purge: []
 }>()
 
+const isDesktop = useMediaQuery(DESKTOP_QUERY)
 const searchText = ref(props.controls.q)
 let debounceTimer: ReturnType<typeof setTimeout> | null = null
 
@@ -128,9 +142,13 @@ const tab = computed({
 	},
 })
 
+function sortLabel(value: MediaSort) {
+	return value === 'total_size' && !isDesktop.value ? t('Largest total size') : SORT_LABELS[value]
+}
+
 const sortItems = computed(() =>
 	(Object.keys(SORT_LABELS) as MediaSort[]).map((value) => ({
-		label: SORT_LABELS[value],
+		label: sortLabel(value),
 		type: 'checkbox' as const,
 		checked: props.controls.sort === value,
 		onUpdateChecked: () => emit('update:sort', value),
@@ -197,19 +215,30 @@ const sortItems = computed(() =>
 			</template>
 		</UInput>
 
+		<MediaVariantsFilter
+			:model-value="controls.variants"
+			class="order-3 w-full md:order-none md:mb-1.5 md:w-auto"
+			@update:model-value="emit('update:variants', $event)"
+		/>
+
 		<div
-			class="order-3 flex flex-wrap gap-x-2 gap-y-3 md:order-none md:mb-1.5 md:flex-nowrap md:gap-2"
+			class="order-4 flex flex-wrap gap-x-2 gap-y-3 md:order-none md:mb-1.5 md:flex-nowrap md:gap-2"
 		>
-			<UDropdownMenu :items="sortItems" :content="{ align: 'start' }">
+			<UDropdownMenu
+				:items="sortItems"
+				:content="{ align: 'start' }"
+				:ui="{ content: 'md:w-85' }"
+			>
 				<UButton
 					color="neutral"
 					variant="outline"
 					trailing-icon="i-lucide-chevron-down"
 					:aria-label="t('Sort')"
-					class="h-11 flex-1 justify-between border border-accented bg-default px-2.5 text-sm font-normal text-highlighted ring-0 md:h-8 md:w-32 md:flex-none"
+					class="h-11 flex-1 justify-between border border-accented bg-default px-2.5 text-sm font-normal text-highlighted ring-0 md:h-8 md:flex-none"
+					:class="controls.sort === 'total_size' ? 'md:w-auto' : 'md:w-32'"
 					:ui="{ trailingIcon: 'size-3.5 text-muted' }"
 				>
-					{{ SORT_LABELS[controls.sort] }}
+					{{ sortLabel(controls.sort) }}
 				</UButton>
 			</UDropdownMenu>
 

web/src/components/MediaVariantsFilter.vue

@@ -0,0 +1,39 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import type { MediaVariantsFilter } from '@/lib/mediaQuery'
+
+const SEGMENT =
+	'h-10.5 flex-1 justify-center rounded-none px-2.5 text-xs font-medium whitespace-nowrap ring-0 md:h-7.5 md:flex-none md:px-3 md:text-sm'
+
+defineProps<{ modelValue: MediaVariantsFilter }>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: MediaVariantsFilter] }>()
+
+const OPTIONS: { value: MediaVariantsFilter; label: () => string }[] = [
+	{ value: 'all', label: () => t('All') },
+	{ value: 'with', label: () => t('With variants') },
+	{ value: 'without', label: () => t('Without') },
+]
+</script>
+
+<template>
+	<div
+		role="group"
+		:aria-label="t('Variants')"
+		data-testid="variants-filter"
+		class="flex shrink-0 border border-accented bg-default"
+	>
+		<UButton
+			v-for="option in OPTIONS"
+			:key="option.value"
+			:color="option.value === modelValue ? 'primary' : 'neutral'"
+			:variant="option.value === modelValue ? 'solid' : 'ghost'"
+			:aria-pressed="option.value === modelValue"
+			:class="[SEGMENT, option.value === modelValue ? '' : 'text-toned']"
+			@click="emit('update:modelValue', option.value)"
+		>
+			{{ option.label() }}
+		</UButton>
+	</div>
+</template>

web/src/components/__tests__/pickerKit.ts

@@ -82,7 +82,8 @@ export const Host = defineComponent({
 		return {
 			open,
 			onUploaded: (item: MediaItem) => emit('uploaded', item),
-			onInserted: (item: MediaItem, alt: string) => emit('inserted', item, alt),
+			onInserted: (item: MediaItem, alt: string, src: string) =>
+				emit('inserted', item, alt, src),
 			onClose: () => emit('close'),
 		}
 	},

web/src/components/variants/MediaVariantsTab.vue

@@ -0,0 +1,224 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed, nextTick, onMounted, ref } from 'vue'
+import { useMediaQuery } from '@vueuse/core'
+import { useLocalizedToast } from '@/i18n/presentation'
+import VariantImageRow from '@/components/variants/VariantImageRow.vue'
+import VariantOriginalBlock from '@/components/variants/VariantOriginalBlock.vue'
+import VariantPreviewDialog from '@/components/variants/VariantPreviewDialog.vue'
+import { useImageVariantRows } from '@/composables/useImageVariantRows'
+import type { MediaItem } from '@/composables/useMedia'
+import type { MediaVariantItem } from '@/composables/useMediaVariants'
+
+const ROOMY_QUERY = '(min-width: 40rem)'
+const SKELETON_ROWS = 5
+const TOAST_DURATION_MS = 5000
+const SETTINGS_VARIANTS_PATH = '/settings/media/variants'
+const RETRY_BUTTON =
+	'h-11 gap-1.5 border border-accented bg-default px-2.5 text-xs text-highlighted ring-0 md:h-7'
+
+const props = defineProps<{ item: MediaItem }>()
+
+const emit = defineEmits<{ gone: [] }>()
+
+const toast = useLocalizedToast()
+const roomy = useMediaQuery(ROOMY_QUERY)
+const rows = useImageVariantRows(props.item.id, () => emit('gone'))
+
+const previewOpen = ref(false)
+const previewTarget = ref<MediaVariantItem | null>(null)
+let previewOpener: HTMLElement | null = null
+
+const total = computed(() => rows.items.value.length)
+const showList = computed(
+	() => rows.status.value === 'ready' && rows.unsupported.value === null && total.value > 0,
+)
+const showEmpty = computed(
+	() => rows.status.value === 'ready' && rows.unsupported.value === null && total.value === 0,
+)
+const generateAllDisabled = computed(() => rows.allGenerated.value || rows.anyBusy.value)
+
+onMounted(rows.load)
+
+async function copyUrl(variant: MediaVariantItem) {
+	try {
+		await navigator.clipboard.writeText(`${window.location.origin}${variant.url}`)
+	} catch {
+		return
+	}
+	toast.add(() => ({
+		id: `media-variant-url-copied-${props.item.id}-${variant.name}`,
+		color: 'success' as const,
+		icon: 'i-lucide-circle-check',
+		get title() {
+			return t('URL copied')
+		},
+		get description() {
+			return t('Paste it wherever you need the image address.')
+		},
+		duration: TOAST_DURATION_MS,
+	}))
+}
+
+function openPreview(variant: MediaVariantItem, opener: HTMLElement) {
+	previewOpener = opener
+	previewTarget.value = variant
+	previewOpen.value = true
+}
+
+async function onPreviewOpenChange(open: boolean) {
+	previewOpen.value = open
+	if (open) {
+		return
+	}
+	await nextTick()
+	previewOpener?.focus()
+}
+</script>
+
+<template>
+	<div data-testid="variants-tab" class="flex flex-col gap-4">
+		<section
+			v-if="rows.status.value === 'loading' && rows.showSkeleton.value"
+			:aria-label="t('Loading variants')"
+			aria-busy="true"
+			class="border border-default"
+		>
+			<div
+				v-for="row in SKELETON_ROWS"
+				:key="row"
+				data-testid="variant-skeleton-row"
+				class="flex flex-col gap-2 px-3 py-2.5"
+				:class="row > 1 ? 'border-t border-muted' : ''"
+			>
+				<USkeleton class="h-3.25 w-[30%] rounded-none bg-accented" />
+				<USkeleton class="h-2.75 w-[55%] rounded-none bg-accented" />
+			</div>
+		</section>
+
+		<UAlert
+			v-else-if="rows.status.value === 'error'"
+			role="alert"
+			color="error"
+			variant="soft"
+			orientation="vertical"
+			:close="false"
+			icon="i-lucide-circle-x"
+			:title="t('Couldn\'t load variants')"
+			:description="t('Check your connection and try again.')"
+			:ui="{ actions: 'mt-2' }"
+		>
+			<template #actions>
+				<UButton
+					color="neutral"
+					variant="outline"
+					icon="i-lucide-rotate-cw"
+					:class="RETRY_BUTTON"
+					:ui="{ leadingIcon: 'size-3.5' }"
+					@click="rows.load"
+				>
+					{{ t('Try again') }}
+				</UButton>
+			</template>
+		</UAlert>
+
+		<template v-else-if="rows.status.value === 'ready'">
+			<VariantOriginalBlock :item="item" />
+
+			<UAlert
+				v-if="rows.unsupported.value !== null"
+				color="info"
+				variant="soft"
+				:close="false"
+				icon="i-lucide-info"
+				:title="t('Variants aren\'t generated for this format.')"
+				:description="t('SVG images are served as they are.')"
+			/>
+
+			<UEmpty
+				v-else-if="showEmpty"
+				variant="naked"
+				icon="i-lucide-layers"
+				:title="t('No variants defined')"
+				:description="
+					t('Define a variant in Settings to get resized copies of this image.')
+				"
+				:ui="{
+					root: 'gap-3 border border-default bg-default px-6 py-7',
+					header: 'gap-3',
+					avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
+					title: 'text-[0.9375rem] font-semibold',
+					description: 'max-w-95 text-muted text-pretty',
+				}"
+			>
+				<template #actions>
+					<RouterLink
+						:to="SETTINGS_VARIANTS_PATH"
+						class="inline-flex min-h-11 items-center gap-1 font-medium text-highlighted underline underline-offset-3 sm:min-h-5"
+					>
+						{{ t('Settings → Media → Variants') }}
+						<UIcon name="i-lucide-arrow-up-right" class="size-3.5" />
+					</RouterLink>
+				</template>
+			</UEmpty>
+
+			<template v-else-if="showList">
+				<div class="flex items-center gap-3">
+					<div class="flex flex-1 flex-col">
+						<span class="font-semibold text-highlighted">{{
+							t('{0} of {1} generated', [rows.generatedCount.value, total])
+						}}</span>
+						<span
+							v-if="rows.generatedCount.value === 0 && !rows.anyBusy.value"
+							class="text-xs/5 text-muted"
+							>{{ t('Nothing generated yet.') }}</span
+						>
+						<span v-if="rows.anyBusy.value" class="text-xs/5 text-info">{{
+							t('Generating variants…')
+						}}</span>
+					</div>
+					<UButton
+						color="neutral"
+						variant="outline"
+						:icon="rows.anyBusy.value ? 'i-lucide-loader-circle' : 'i-lucide-zap'"
+						:disabled="generateAllDisabled"
+						class="h-11 border border-accented bg-default px-3 text-sm font-medium text-highlighted ring-0 sm:h-8"
+						:ui="{
+							leadingIcon: rows.anyBusy.value ? 'size-4 animate-spin' : 'size-4',
+						}"
+						@click="rows.generateAll"
+					>
+						{{ rows.anyBusy.value ? t('Generating…') : t('Generate all') }}
+					</UButton>
+				</div>
+				<ul class="border border-default">
+					<VariantImageRow
+						v-for="(row, index) in rows.rows.value"
+						:key="row.item.name"
+						:row="row"
+						:original-size="item.size"
+						:roomy="roomy"
+						:first="index === 0"
+						@copy="copyUrl(row.item)"
+						@preview="openPreview(row.item, $event)"
+						@purge="rows.purge(row.item.name)"
+						@generate="rows.generateOne(row.item.name)"
+					/>
+				</ul>
+			</template>
+		</template>
+
+		<p role="status" aria-live="polite" data-testid="variants-announcer" class="sr-only">
+			{{ rows.announcement.value }}
+		</p>
+
+		<VariantPreviewDialog
+			v-if="previewTarget"
+			:open="previewOpen"
+			:variant="previewTarget"
+			:original="item"
+			@update:open="onPreviewOpenChange"
+		/>
+	</div>
+</template>

web/src/components/variants/VariantImageRow.vue

@@ -0,0 +1,140 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import VariantStatusBadge from '@/components/variants/VariantStatusBadge.vue'
+import type { VariantRow } from '@/composables/useImageVariantRows'
+import type { VariantFormat } from '@/composables/useImageVariants'
+import { causeText } from '@/lib/variants/variantCauses'
+import { formatLabel, formatVariantSize } from '@/lib/variants/variantFormat'
+import { signedPercent } from '@/lib/variants/variantSaving'
+
+type ActionKey = 'copy' | 'preview' | 'purge' | 'generate' | 'retry'
+
+const props = defineProps<{
+	row: VariantRow
+	originalSize: number
+	roomy: boolean
+	first: boolean
+}>()
+
+const emit = defineEmits<{
+	copy: [element: HTMLElement]
+	preview: [element: HTMLElement]
+	purge: []
+	generate: []
+}>()
+
+const ACTIONS: Record<ActionKey, { icon: string; label: () => string }> = {
+	copy: { icon: 'i-lucide-link', label: () => t('Copy URL') },
+	preview: { icon: 'i-lucide-eye', label: () => t('Preview') },
+	purge: { icon: 'i-lucide-eraser', label: () => t('Purge') },
+	generate: { icon: 'i-lucide-zap', label: () => t('Generate now') },
+	retry: { icon: 'i-lucide-rotate-cw', label: () => t('Retry') },
+}
+
+const ACTIONS_BY_STATUS: Record<VariantRow['status'], ActionKey[]> = {
+	generated: ['copy', 'preview', 'purge'],
+	missing: ['copy', 'generate'],
+	busy: [],
+	failed: ['retry'],
+}
+
+const item = computed(() => props.row.item)
+const generated = computed(() => props.row.status === 'generated')
+const actions = computed(() =>
+	ACTIONS_BY_STATUS[props.row.status].map((key) => ({ key, ...ACTIONS[key] })),
+)
+const meta = computed(() => {
+	const base = `${item.value.output_width}×${item.value.output_height} · ${formatLabel(item.value.output_format as VariantFormat)}`
+	if (!generated.value || item.value.size === null) {
+		return base
+	}
+	return `${base} · ${formatVariantSize(item.value.size)} ·`
+})
+const saving = computed(() =>
+	t('{0} vs original', [signedPercent(props.originalSize, item.value.size ?? 0)]),
+)
+
+function run(key: ActionKey, event: Event) {
+	const element = event.currentTarget as HTMLElement
+	if (key === 'copy') {
+		emit('copy', element)
+	} else if (key === 'preview') {
+		emit('preview', element)
+	} else if (key === 'purge') {
+		emit('purge')
+	} else {
+		emit('generate')
+	}
+}
+</script>
+
+<template>
+	<li
+		data-testid="variant-row"
+		:data-variant="item.name"
+		class="flex flex-col gap-2 px-3 py-2.5 sm:gap-1"
+		:class="[
+			row.status === 'busy' ? 'bg-elevated' : 'bg-default',
+			first ? '' : 'border-t border-muted',
+		]"
+	>
+		<div class="flex items-center gap-2">
+			<span class="font-mono text-sm font-medium text-highlighted">{{ item.name }}</span>
+			<VariantStatusBadge :status="row.status" />
+			<span class="flex-1" />
+			<div v-if="roomy && actions.length > 0" class="flex gap-1">
+				<template v-for="action in actions" :key="action.key">
+					<UButton
+						v-if="action.key === 'retry'"
+						color="neutral"
+						variant="outline"
+						:icon="action.icon"
+						class="h-7 gap-1.5 border border-accented bg-default px-2.5 text-xs font-medium text-highlighted ring-0"
+						:ui="{ leadingIcon: 'size-3.5' }"
+						@click="run(action.key, $event)"
+					>
+						{{ action.label() }}
+					</UButton>
+					<UTooltip v-else :text="action.label()">
+						<UButton
+							color="neutral"
+							variant="outline"
+							:icon="action.icon"
+							:aria-label="action.label()"
+							class="size-7 justify-center border border-accented bg-default p-0 text-highlighted ring-0"
+							:ui="{ leadingIcon: 'size-4' }"
+							@click="run(action.key, $event)"
+						/>
+					</UTooltip>
+				</template>
+			</div>
+		</div>
+		<div class="flex flex-wrap gap-1 text-xs/5 text-toned">
+			<span>{{ meta }}</span>
+			<span v-if="generated" class="font-medium text-success">{{ saving }}</span>
+		</div>
+		<div
+			v-if="row.status === 'failed' && row.cause"
+			class="flex items-center gap-1.5 text-xs/5 text-error"
+		>
+			<UIcon name="i-lucide-circle-alert" class="size-3.5 shrink-0" />
+			<span>{{ causeText(row.cause) }}</span>
+		</div>
+		<div v-if="!roomy && actions.length > 0" class="flex flex-wrap gap-2">
+			<UButton
+				v-for="action in actions"
+				:key="action.key"
+				color="neutral"
+				variant="outline"
+				:icon="action.icon"
+				class="h-11 gap-1.5 border border-accented bg-default px-3 text-sm font-medium text-highlighted ring-0"
+				:ui="{ leadingIcon: 'size-4' }"
+				@click="run(action.key, $event)"
+			>
+				{{ action.label() }}
+			</UButton>
+		</div>
+	</li>
+</template>

web/src/components/variants/VariantOriginalBlock.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import MediaThumb from '@/components/MediaThumb.vue'
+import type { MediaItem } from '@/composables/useMedia'
+import { formatDimensions, formatSize, formatType } from '@/lib/mediaFormat'
+
+defineProps<{ item: MediaItem }>()
+</script>
+
+<template>
+	<div
+		data-testid="variants-original"
+		class="flex items-center gap-3 border border-default bg-muted p-3"
+	>
+		<MediaThumb :item="item" size="md" class="h-13.5 w-18 border border-default" />
+		<div class="flex min-w-0 flex-col">
+			<span class="text-xs/5 text-muted">{{ t('Original · kept untouched') }}</span>
+			<span class="truncate font-semibold text-highlighted">{{ item.filename }}</span>
+			<span class="text-xs/5 text-toned">
+				{{ formatType(item.content_type) }} ·
+				{{ formatDimensions(item.width, item.height) }} · {{ formatSize(item.size) }}
+			</span>
+		</div>
+	</div>
+</template>

web/src/components/variants/VariantPaneImage.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import MediaThumb from '@/components/MediaThumb.vue'
+
+defineProps<{
+	src: string
+	width: number
+	height: number
+	contentType: string
+	sha256: string
+}>()
+
+const failed = ref(false)
+</script>
+
+<template>
+	<MediaThumb
+		v-if="failed"
+		data-testid="pane-placeholder"
+		:item="{ url: '', content_type: contentType, sha256 }"
+		size="lg"
+		class="shrink-0"
+		:style="{ width: `${width}px`, height: `${height}px` }"
+	/>
+	<img
+		v-else
+		:src="src"
+		alt=""
+		:width="width"
+		:height="height"
+		class="block max-w-none shrink-0"
+		@error="failed = true"
+	/>
+</template>

web/src/components/variants/VariantPickerField.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import VariantSelect from '@/components/variants/VariantSelect.vue'
+import type { ImageVariant } from '@/composables/useImageVariants'
+import type { MediaItem } from '@/composables/useMedia'
+import {
+	buildOptions,
+	insertedUrl,
+	isVector,
+	ORIGINAL_OPTION_VALUE,
+} from '@/lib/variants/variantOptions'
+
+const LINK_TOKEN = '\u0000'
+const SETTINGS_VARIANTS_PATH = '/settings/media/variants'
+
+const props = defineProps<{
+	image: MediaItem
+	variants: ImageVariant[]
+	ready: boolean
+}>()
+
+const variant = defineModel<string>('variant', { default: ORIGINAL_OPTION_VALUE })
+
+const options = computed(() => buildOptions(props.image, props.variants))
+const vector = computed(() => isVector(props.image))
+const noVariants = computed(() => props.ready && !vector.value && props.variants.length === 0)
+const url = computed(() => insertedUrl(props.image, variant.value))
+const helpParts = computed(() =>
+	t('No variants defined. Add one in {0}.', [LINK_TOKEN]).split(LINK_TOKEN),
+)
+</script>
+
+<template>
+	<UFormField
+		:label="t('Variant')"
+		name="variant"
+		:ui="{
+			label: 'font-medium text-highlighted',
+			help: 'text-xs/5 text-muted',
+		}"
+		data-testid="variant-field"
+	>
+		<VariantSelect v-model="variant" :options="options" />
+		<template #help>
+			<span v-if="noVariants" class="flex items-center gap-1.5">
+				<UIcon name="i-lucide-info" class="size-3.5 shrink-0" />
+				<span data-testid="variant-help"
+					>{{ helpParts[0]
+					}}<RouterLink
+						:to="SETTINGS_VARIANTS_PATH"
+						class="font-medium text-highlighted underline underline-offset-3"
+						>{{ t('Settings → Media → Variants') }}</RouterLink
+					>{{ helpParts[1] }}</span
+				>
+			</span>
+			<span v-else data-testid="variant-url" class="font-mono">{{ url }}</span>
+		</template>
+	</UFormField>
+</template>

web/src/components/variants/VariantPreviewDialog.vue

@@ -0,0 +1,109 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import VariantPaneImage from '@/components/variants/VariantPaneImage.vue'
+import type { MediaItem } from '@/composables/useMedia'
+import type { MediaVariantItem } from '@/composables/useMediaVariants'
+import type { VariantFormat } from '@/composables/useImageVariants'
+import { formatSize, formatType } from '@/lib/mediaFormat'
+import { formatLabel, formatVariantSize } from '@/lib/variants/variantFormat'
+import { savesPercent } from '@/lib/variants/variantSaving'
+
+const VARIANT_TONE_HASH = '1'
+const PANE =
+	'flex overflow-auto border border-default bg-muted h-45 items-start justify-start sm:h-75 sm:items-center sm:justify-center'
+
+const props = defineProps<{ variant: MediaVariantItem; original: MediaItem }>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+const variantSize = computed(() => props.variant.size ?? 0)
+const variantTitle = computed(
+	() =>
+		`${props.variant.name} · ${props.variant.output_width}×${props.variant.output_height} · ${formatLabel(props.variant.output_format as VariantFormat)}`,
+)
+const variantSub = computed(() =>
+	t('{0} · saves {1}%', [
+		formatVariantSize(variantSize.value),
+		savesPercent(props.original.size, variantSize.value),
+	]),
+)
+const originalTitle = computed(
+	() =>
+		`${t('Original')} · ${props.original.width ?? 0}×${props.original.height ?? 0} · ${formatType(props.original.content_type)}`,
+)
+</script>
+
+<template>
+	<UModal
+		v-model:open="open"
+		:title="t('Preview: {0}', [variant.name])"
+		:description="t('Both images are shown at actual size. Scroll to pan.')"
+		:ui="{
+			content:
+				'sm:top-20 sm:translate-y-0 sm:max-w-220 max-sm:!inset-x-4 max-sm:!top-auto max-sm:!bottom-4 max-sm:!w-auto max-sm:!max-w-none max-sm:!translate-x-0 max-sm:!translate-y-0 divide-y-0 shadow-(--shadow-modal) ring-0',
+			header: 'min-h-0 px-6 pt-5 pb-0 sm:px-6',
+			close: 'top-5 end-6',
+			title: 'text-lg/6 font-semibold',
+			description: 'sr-only',
+			body: 'px-6 pt-5 pb-0 sm:px-6 sm:pt-5 sm:pb-0',
+			footer: 'px-6 py-5 sm:px-6',
+		}"
+	>
+		<template #body>
+			<div class="flex flex-col gap-3">
+				<div class="grid grid-cols-1 gap-4 sm:grid-cols-2">
+					<div class="flex min-w-0 flex-col gap-2">
+						<div :class="PANE" data-testid="preview-variant-pane">
+							<VariantPaneImage
+								:src="variant.url"
+								:width="variant.output_width"
+								:height="variant.output_height"
+								:content-type="original.content_type"
+								:sha256="VARIANT_TONE_HASH"
+							/>
+						</div>
+						<div class="flex flex-col">
+							<span class="font-semibold text-highlighted">{{ variantTitle }}</span>
+							<span class="text-xs/5 text-toned">{{ variantSub }}</span>
+						</div>
+					</div>
+					<div class="flex min-w-0 flex-col gap-2">
+						<div :class="PANE" data-testid="preview-original-pane">
+							<VariantPaneImage
+								:src="original.url"
+								:width="original.width ?? 0"
+								:height="original.height ?? 0"
+								:content-type="original.content_type"
+								:sha256="original.sha256"
+							/>
+						</div>
+						<div class="flex flex-col">
+							<span class="font-semibold text-highlighted">{{ originalTitle }}</span>
+							<span class="text-xs/5 text-toned">{{
+								formatSize(original.size)
+							}}</span>
+						</div>
+					</div>
+				</div>
+				<p class="text-xs/5 text-muted">
+					{{ t('Both images are shown at actual size. Scroll to pan.') }}
+				</p>
+			</div>
+		</template>
+		<template #footer>
+			<div class="flex w-full flex-col-reverse gap-2 sm:flex-row sm:justify-end">
+				<UButton
+					color="neutral"
+					variant="outline"
+					block
+					class="h-11 justify-center border border-accented bg-default text-sm text-highlighted ring-0 sm:h-8 sm:w-auto sm:px-3"
+					@click="open = false"
+				>
+					{{ t('Close') }}
+				</UButton>
+			</div>
+		</template>
+	</UModal>
+</template>

web/src/components/variants/VariantRemovalNote.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { removalNote } from '@/lib/mediaFormat'
+
+defineProps<{ count: number; bytes: number }>()
+</script>
+
+<template>
+	<UAlert
+		v-if="count > 0"
+		data-testid="variant-removal-note"
+		color="warning"
+		variant="soft"
+		icon="i-lucide-layers"
+		:title="removalNote(count, bytes)"
+		:ui="{
+			root: 'items-center px-3 py-2.5',
+			title: 'font-medium text-highlighted',
+		}"
+	/>
+</template>

web/src/components/variants/VariantSelect.vue

@@ -0,0 +1,72 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import { ORIGINAL_OPTION_VALUE, type VariantOption } from '@/lib/variants/variantOptions'
+
+const ORIGINAL_ITEM_VALUE = '@original'
+
+const props = defineProps<{
+	options: VariantOption[]
+	modelValue?: string
+	id?: string
+	placeholder?: string
+	ariaLabel?: string
+}>()
+
+const emit = defineEmits<{ 'update:modelValue': [value: string] }>()
+
+const open = defineModel<boolean>('open', { default: false })
+
+function toItemValue(value: string) {
+	return value === ORIGINAL_OPTION_VALUE ? ORIGINAL_ITEM_VALUE : value
+}
+
+const items = computed(() =>
+	props.options.map((option) => ({ ...option, value: toItemValue(option.value) })),
+)
+const current = computed(() =>
+	props.modelValue === undefined ? undefined : toItemValue(props.modelValue),
+)
+
+function choose(value: string) {
+	emit('update:modelValue', value === ORIGINAL_ITEM_VALUE ? ORIGINAL_OPTION_VALUE : value)
+}
+</script>
+
+<template>
+	<USelectMenu
+		v-model:open="open"
+		:model-value="current"
+		:items="items"
+		value-key="value"
+		label-key="label"
+		:id="id"
+		:placeholder="placeholder"
+		:search-input="false"
+		:aria-label="ariaLabel ?? t('Variant')"
+		color="neutral"
+		variant="outline"
+		data-testid="variant-select"
+		class="w-full"
+		:ui="{
+			base: 'h-11 rounded-none border border-accented bg-default px-3 text-lg ring-0 data-[state=open]:border-primary data-[state=open]:ring-1 data-[state=open]:ring-primary md:h-10 md:text-sm',
+			trailingIcon: 'size-4 text-muted',
+			content: 'min-w-(--reka-combobox-trigger-width)',
+			item: 'min-h-11 ps-2 text-lg md:min-h-9 md:text-sm',
+			itemLeadingIcon: 'hidden',
+			itemTrailingIcon: 'hidden',
+		}"
+		@update:model-value="choose($event as string)"
+	>
+		<template #item-leading="{ item }">
+			<span class="flex size-4 items-center justify-center">
+				<UIcon
+					v-if="(item as VariantOption).value === current"
+					name="i-lucide-check"
+					class="size-3.5"
+				/>
+			</span>
+		</template>
+	</USelectMenu>
+</template>

web/src/components/variants/VariantStatusBadge.vue

@@ -0,0 +1,49 @@
+<script setup lang="ts">
+import { t } from '@/i18n'
+
+import { computed } from 'vue'
+import type { RowStatus } from '@/composables/useImageVariantRows'
+
+const props = defineProps<{ status: RowStatus }>()
+
+const BADGES = {
+	generated: {
+		icon: 'i-lucide-circle-check',
+		class: 'border border-(--rc-success-soft) bg-(--rc-success-soft) text-success',
+		label: () => t('Generated'),
+	},
+	missing: {
+		icon: 'i-lucide-circle-dashed',
+		class: 'border border-accented bg-transparent text-toned',
+		label: () => t('Not generated'),
+	},
+	busy: {
+		icon: 'i-lucide-loader-circle',
+		class: 'border border-(--rc-info-soft) bg-(--rc-info-soft) text-info',
+		label: () => t('Generating'),
+	},
+	failed: {
+		icon: 'i-lucide-circle-x',
+		class: 'border border-(--rc-error-soft) bg-(--rc-error-soft) text-error',
+		label: () => t('Failed'),
+	},
+} as const
+
+const badge = computed(() => BADGES[props.status])
+</script>
+
+<template>
+	<UBadge
+		color="neutral"
+		variant="soft"
+		:icon="badge.icon"
+		:class="badge.class"
+		:data-status="status"
+		:ui="{
+			base: 'h-5 gap-1 px-1.5 py-0 text-xs whitespace-nowrap',
+			leadingIcon: status === 'busy' ? 'size-3 animate-spin' : 'size-3',
+		}"
+	>
+		{{ badge.label() }}
+	</UBadge>
+</template>