up version

- Extend cleanup logic to remove full original image family (including subsizes)
- Fix issue where only the main original file was deleted
- Ensure consistent behavior for both manual batch processing and auto-delete
- Improve cleanup safety by validating optimization state before deletion

css/fonts.css

@@ -1,35 +1,121 @@
 /* =========================
-   Typography System (Static)
+   Local Fonts
+   ========================= */
+
+/* OSWALD */
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/oswald-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/oswald-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Oswald';
+  src: url('../fonts/oswald-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* ROBOTO */
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto-400.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto-500.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  src: url('../fonts/roboto-700.woff2') format('woff2');
+  font-weight: 700;
+  font-style: normal;
+  font-display: swap;
+}
+
+
+/* =========================
+   Typography System
    ========================= */
 
 :root {
-  --primary-font: 'Oswald', sans-serif;
-  --secondary-font: 'Roboto', sans-serif;
+  --primary-font: 'Oswald', var(--zeitfresser-heading-fallback);
+  --secondary-font: 'Roboto', var(--zeitfresser-body-fallback);
 
   --site-identity-font-size: 40px;
+
   --font-weight: 400;
   --line-height: 1.6;
 }
 
-/* Base */
+
+/* =========================
+   Base Typography
+   ========================= */
+
 body {
   font-family: var(--secondary-font);
   font-weight: var(--font-weight);
   line-height: var(--line-height);
 }
 
-/* Headlines */
+
+/* =========================
+   Headlines
+   ========================= */
+
 h1, h2, h3, h4, h5, h6,
 .entry-title {
   font-family: var(--primary-font);
-  font-weight: var(--font-weight);
+  font-weight: 500;
+  line-height: 1.3;
 }
 
-/* Site Title */
+
+/* =========================
+   Site Title
+   ========================= */
+
 .site-title,
 .site-title a {
   font-family: var(--primary-font);
   font-size: var(--site-identity-font-size);
-  font-weight: var(--font-weight);
+  font-weight: 700;
   line-height: 1.2;
 }
+
+
+/* =========================
+   Content Typography
+   ========================= */
+
+.site-description,
+.entry-content,
+.post-content,
+.inner-article-content {
+  font-family: var(--secondary-font);
+}
+
+html {
+  font-synthesis: none;
+}

functions.php

@@ -17,10 +17,68 @@ if ( ! defined( 'DAISY_BLOG_VERSION' ) ) {
     define( 'DAISY_BLOG_VERSION', ZEITFRESSER_VERSION );
 }
 
+if ( ! defined( 'ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION' ) ) {
+    define( 'ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION', '1.0' );
+}
+
 require get_template_directory() . '/inc/zeitfresser-helpers.php';
 require get_template_directory() . '/inc/performance-tools.php';
 require get_template_directory() . '/inc/zeitfresser-toc.php';
 
+/**
+ * Upload Handler
+ */
+add_filter('wp_handle_upload', 'zeitfresser_capture_original_upload', 10, 2);
+
+/**
+ * Capture original upload path safely
+ */
+function zeitfresser_capture_original_upload( $upload, $context ) {
+
+    if ( empty( $upload['file'] ) ) {
+        return $upload;
+    }
+
+    // Store temporarily (request-scoped)
+    $GLOBALS['zeitfresser_last_uploaded_file'] = $upload['file'];
+
+    return $upload;
+}
+add_filter( 'wp_handle_upload', 'zeitfresser_capture_original_upload', 10, 2 );
+
+/**
+ * Persist original file path to attachment meta
+ */
+function zeitfresser_store_original_file( $attachment_id ) {
+
+    if ( ! wp_attachment_is_image( $attachment_id ) ) {
+        return;
+    }
+
+    if ( empty( $GLOBALS['zeitfresser_last_uploaded_file'] ) ) {
+        return;
+    }
+
+    $file = $GLOBALS['zeitfresser_last_uploaded_file'];
+
+    // Safety: ensure file still exists
+    if ( ! file_exists( $file ) ) {
+        return;
+    }
+
+    // Prevent overwrite if already set
+    if ( get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
+        return;
+    }
+
+    update_post_meta(
+        $attachment_id,
+        '_zeitfresser_original_file',
+        $file
+    );
+}
+add_action( 'add_attachment', 'zeitfresser_store_original_file' );
+
 /**
  * Theme setup.
  *
@@ -68,6 +126,19 @@ function zeitfresser_setup() {
 }
 add_action( 'after_setup_theme', 'zeitfresser_setup' );
 
+/**
+ * Register optimized image sizes
+ */
+function zeitfresser_custom_image_sizes() {
+
+    // Content images (main article)
+    add_image_size( 'zeitfresser-content', 720, 0, false );
+
+    // Archive / card layout
+    add_image_size( 'zeitfresser-card', 480, 0, false );
+}
+add_action( 'after_setup_theme', 'zeitfresser_custom_image_sizes' );
+
 /**
  * Set the content width in pixels.
  *
@@ -201,19 +272,6 @@ function zeitfresser_enqueue_static_colors() {
 }
 add_action( 'wp_enqueue_scripts', 'zeitfresser_enqueue_static_colors', 20 );
 
- /**
- * Load Google Fonts (required for static font setup)
- */
-function zeitfresser_enqueue_google_fonts() {
-    wp_enqueue_style(
-        'zeitfresser-google-fonts',
-        'https://fonts.googleapis.com/css2?family=Oswald:wght@400;500;700&family=Roboto:wght@400;500;700&display=swap',
-        array(),
-        null
-    );
-}
-add_action('wp_enqueue_scripts', 'zeitfresser_enqueue_google_fonts');
-
 function zeitfresser_enqueue_static_fonts() {
     wp_enqueue_style(
         'zeitfresser-fonts',
@@ -281,17 +339,32 @@ function zeitfresser_cleanup_wp_head() {
 add_action( 'init', 'zeitfresser_cleanup_wp_head' );
 
 /**
- * Ensure Google Fonts domains are allowed and preconnected
+ * Preload critical local fonts only
+ */
+function zeitfresser_preload_fonts() {
+    ?>
+    <!-- Critical Fonts Only -->
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-400.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/oswald-700.woff2" as="font" type="font/woff2" crossorigin>
+    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/roboto-400.woff2" as="font" type="font/woff2" crossorigin>
+    <?php
+}
+add_action('wp_head', 'zeitfresser_preload_fonts', 1);
+
+/**
+ * Optimize font loading with preconnect
  */
 add_filter( 'wp_resource_hints', function( $urls, $relation_type ) {
-    if ($relation_type === 'preconnect') {
-        $urls[] = 'https://fonts.googleapis.com';
-        $urls[] = array(
-            'href' => 'https://fonts.gstatic.com',
+
+    if ( 'preconnect' === $relation_type ) {
+        $urls[] = [
+            'href'        => get_template_directory_uri(),
             'crossorigin' => 'anonymous',
-        );
+        ];
     }
+
     return $urls;
+
 }, 10, 2 );
 
 /**
@@ -328,13 +401,18 @@ function zeitfresser_optimize_image_attributes( $attr, $attachment, $size ) {
 add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_optimize_image_attributes', 10, 3 );
 
 /**
- * Lower the threshold for WordPress scaled originals.
+ * Lower the threshold for WordPress scaled originals when auto optimization is enabled.
  *
- * This prevents very large uploads from shipping oversized source images.
+ * When automatic optimization is disabled, original uploads should remain untouched.
  *
- * @return int
+ * @return int|false
  */
 function zeitfresser_big_image_size_threshold() {
+
+    if ( ! get_theme_mod( 'ztfr_auto_optimize', true ) ) {
+        return false;
+    }
+
     return 1800;
 }
 add_filter( 'big_image_size_threshold', 'zeitfresser_big_image_size_threshold' );
@@ -346,28 +424,185 @@ add_filter( 'big_image_size_threshold', 'zeitfresser_big_image_size_threshold' )
  * @return array
  */
 function zeitfresser_filter_intermediate_image_sizes( $sizes ) {
-    unset( $sizes['1536x1536'], $sizes['2048x2048'] );
+
+    // Remove oversized defaults
+    unset(
+        $sizes['1536x1536'],
+        $sizes['2048x2048']
+    );
 
     return $sizes;
 }
 add_filter( 'intermediate_image_sizes_advanced', 'zeitfresser_filter_intermediate_image_sizes' );
 
 /**
- * Convert generated JPEG and PNG sub-sizes to WebP when supported by the server.
+ * Convert generated JPEG and PNG files to AVIF/WebP when enabled.
+ *
+ * Auto optimization can be disabled for uploads via Customizer.
+ * Manual optimization may still force conversion through a request-scoped flag.
  *
  * @param array $formats Output format map.
  * @return array
  */
 function zeitfresser_image_output_format( $formats ) {
-    if ( function_exists( 'wp_image_editor_supports' ) && wp_image_editor_supports( array( 'mime_type' => 'image/webp' ) ) ) {
+
+    $auto_enabled  = get_theme_mod( 'ztfr_auto_optimize', true );
+    $force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
+
+    if ( ! $auto_enabled && ! $force_enabled ) {
+        return $formats;
+    }
+
+    if ( function_exists( 'wp_image_editor_supports' ) ) {
+
+        // Prefer AVIF if supported.
+        if ( wp_image_editor_supports( array( 'mime_type' => 'image/avif' ) ) ) {
+            $formats['image/jpeg'] = 'image/avif';
+            $formats['image/png']  = 'image/avif';
+
+        // Fallback to WebP.
+        } elseif ( wp_image_editor_supports( array( 'mime_type' => 'image/webp' ) ) ) {
             $formats['image/jpeg'] = 'image/webp';
             $formats['image/png']  = 'image/webp';
         }
+    }
 
     return $formats;
 }
 add_filter( 'image_editor_output_format', 'zeitfresser_image_output_format' );
 
+/**
+ * Mark images as optimized only when optimization is actually active.
+ *
+ * @param array $metadata Attachment metadata.
+ * @param int   $attachment_id Attachment ID.
+ * @return array
+ */
+function zeitfresser_mark_new_images_optimized( $metadata, $attachment_id ) {
+
+    if ( ! wp_attachment_is_image( $attachment_id ) ) {
+        return $metadata;
+    }
+
+    $auto_enabled  = get_theme_mod( 'ztfr_auto_optimize', true );
+    $force_enabled = ! empty( $GLOBALS['zeitfresser_force_image_optimization'] );
+
+    if ( ! $auto_enabled && ! $force_enabled ) {
+        return $metadata;
+    }
+
+    update_post_meta(
+        $attachment_id,
+        '_zeitfresser_media_optimized_version',
+        ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
+    );
+
+    return $metadata;
+}
+add_filter( 'wp_generate_attachment_metadata', 'zeitfresser_mark_new_images_optimized', 20, 2 );
+
+/**
+ * Auto Optimize Hook
+ */
+add_filter(
+    'wp_generate_attachment_metadata',
+    'zeitfresser_auto_optimize_on_upload',
+    15,
+    2
+);
+
+function zeitfresser_auto_optimize_on_upload( $metadata, $attachment_id ) {
+
+    // 🔒 only images
+    if ( ! wp_attachment_is_image( $attachment_id ) ) {
+        return $metadata;
+    }
+
+    // 🔒 feature toggle
+    if ( ! get_theme_mod( 'ztfr_auto_optimize', true ) ) {
+        return $metadata;
+    }
+
+    $file = get_attached_file( $attachment_id );
+
+    if ( ! $file || ! file_exists( $file ) ) {
+        return $metadata;
+    }
+
+    // 🔥 DO NOT overwrite upload-captured original
+    if ( ! get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
+
+        // fallback only
+        update_post_meta( $attachment_id, '_zeitfresser_original_file', $file );
+    }
+
+    // mark as optimized
+    update_post_meta(
+        $attachment_id,
+        '_zeitfresser_media_optimized_version',
+        ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
+    );
+
+    return $metadata;
+}
+
+/**
+ * Auto Delete Hook
+ */
+add_filter(
+    'wp_generate_attachment_metadata',
+    'zeitfresser_auto_delete_original_after_upload',
+    30,
+    2
+);
+
+function zeitfresser_auto_delete_original_after_upload( $metadata, $attachment_id ) {
+
+    if ( ! wp_attachment_is_image( $attachment_id ) ) {
+        return $metadata;
+    }
+
+    if ( ! get_theme_mod( 'ztfr_auto_optimize', true ) ) {
+        return $metadata;
+    }
+
+    if ( ! get_theme_mod( 'ztfr_auto_delete', false ) ) {
+        return $metadata;
+    }
+
+    $original = get_post_meta(
+        $attachment_id,
+        '_zeitfresser_original_file',
+        true
+    );
+
+    if ( ! $original ) {
+        return $metadata;
+    }
+
+    $ext = strtolower( pathinfo( $original, PATHINFO_EXTENSION ) );
+
+    if ( in_array( $ext, [ 'webp', 'avif' ], true ) ) {
+        update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
+        return $metadata;
+    }
+
+    // If nothing remains, mark as completed.
+    if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
+        update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
+        return $metadata;
+    }
+
+    zeitfresser_delete_original_family_files( $attachment_id, $original );
+
+    // Only mark as deleted when all original-format files are gone.
+    if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
+        update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
+    }
+
+    return $metadata;
+}
+
 /**
  * Keep generated image quality balanced for file size and visual fidelity.
  *
@@ -376,12 +611,19 @@ add_filter( 'image_editor_output_format', 'zeitfresser_image_output_format' );
  * @return int
  */
 function zeitfresser_image_quality( $quality, $mime_type = 'image/jpeg' ) {
-    if ( 'image/png' === $mime_type ) {
-        return $quality;
-    }
 
+    switch ( $mime_type ) {
+        case 'image/avif':
+            return 50;
+
+        case 'image/webp':
+            return 75;
+
+        case 'image/jpeg':
+        default:
             return 82;
     }
+}
 add_filter( 'wp_editor_set_quality', 'zeitfresser_image_quality', 10, 2 );
 
 /**
@@ -410,7 +652,7 @@ function zeitfresser_improve_attachment_dimensions( $attr, $attachment, $size )
     if ( empty( $attr['fetchpriority'] ) && ! is_admin() && ! is_feed() ) {
         static $did_set_high_priority = false;
 
-        if ( ! $did_set_high_priority && ( is_home() || is_front_page() || is_archive() || is_search() || is_singular() ) ) {
+        if ( ! $did_set_high_priority && is_singular() ) {
             $attr['fetchpriority'] = 'high';
             $did_set_high_priority = true;
         }
@@ -420,6 +662,62 @@ function zeitfresser_improve_attachment_dimensions( $attr, $attachment, $size )
 }
 add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_improve_attachment_dimensions', 11, 3 );
 
+/**
+ * Improve responsive image sizes attribute.
+ *
+ * @param string $sizes Existing sizes attribute.
+ * @param array  $size  Requested image size.
+ * @return string
+ */
+function zeitfresser_responsive_image_sizes( $sizes, $size ) {
+
+    // Single post content
+    if ( is_singular() ) {
+        return '(max-width: 768px) 100vw, (max-width: 1200px) 720px, 720px';
+    }
+
+    // Archive / blog overview
+    if ( is_home() || is_front_page() || is_archive() || is_search() ) {
+        return '(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 400px';
+    }
+
+    return $sizes;
+}
+add_filter( 'wp_calculate_image_sizes', 'zeitfresser_responsive_image_sizes', 10, 2 );
+
+/**
+ * Determine the most likely LCP image URL.
+ *
+ * @return string
+ */
+function zeitfresser_get_lcp_image_url() {
+
+    // Single posts/pages → featured image
+    if ( is_singular() ) {
+        $post_id = get_queried_object_id();
+
+        if ( $post_id && has_post_thumbnail( $post_id ) ) {
+            return get_the_post_thumbnail_url( $post_id, 'large' );
+        }
+    }
+
+    // Archives / homepage → first post with thumbnail
+    if ( is_home() || is_front_page() || is_archive() || is_search() ) {
+
+        global $wp_query;
+
+        if ( ! empty( $wp_query->posts ) ) {
+
+            foreach ( $wp_query->posts as $post ) {
+                if ( has_post_thumbnail( $post->ID ) ) {
+                    return get_the_post_thumbnail_url( $post->ID, 'medium_large' );
+                }
+            }
+        }
+    }
+
+    return '';
+}
 
 /**
  * Preload the most likely LCP image for archive and singular views.
@@ -428,39 +726,35 @@ add_filter( 'wp_get_attachment_image_attributes', 'zeitfresser_improve_attachmen
  * @return array
  */
 function zeitfresser_preload_resources( $resources ) {
+
     if ( is_admin() || is_feed() || is_embed() ) {
         return $resources;
     }
 
-    $image_url  = '';
-    $image_type = '';
-
-    if ( is_singular() ) {
-        $object_id = get_queried_object_id();
-
-        if ( $object_id && has_post_thumbnail( $object_id ) ) {
-            $image_url = get_the_post_thumbnail_url( $object_id, 'large' );
-        }
-    } elseif ( is_home() || is_front_page() || is_archive() || is_search() ) {
-        global $wp_query;
-
-        if ( isset( $wp_query->posts[0]->ID ) && has_post_thumbnail( $wp_query->posts[0]->ID ) ) {
-            $image_url = get_the_post_thumbnail_url( $wp_query->posts[0]->ID, 'thumbnail' );
-        }
-    }
+    // 🔥 NEW: use smart detection
+    $image_url = zeitfresser_get_lcp_image_url();
 
     if ( empty( $image_url ) ) {
         return $resources;
     }
 
-    $extension = strtolower( pathinfo( wp_parse_url( $image_url, PHP_URL_PATH ), PATHINFO_EXTENSION ) );
+    // Robust extension detection
+    $extension = strtolower(
+        pathinfo(
+            wp_parse_url( $image_url, PHP_URL_PATH ),
+            PATHINFO_EXTENSION
+        )
+    );
 
-    if ( 'jpg' === $extension || 'jpeg' === $extension ) {
+    // MIME fallback
     $image_type = 'image/jpeg';
-    } elseif ( 'png' === $extension ) {
+
+    if ( 'png' === $extension ) {
         $image_type = 'image/png';
     } elseif ( 'webp' === $extension ) {
         $image_type = 'image/webp';
+    } elseif ( 'avif' === $extension ) {
+        $image_type = 'image/avif';
     }
 
     $resources[] = array_filter(

inc/customizer.php

@@ -9,8 +9,10 @@
  * Add postMessage support for site title and description for the Theme Customizer.
  *
  * @param WP_Customize_Manager $wp_customize Theme Customizer object.
+ * @return void
  */
 function zeitfresser_customize_register( $wp_customize ) {
+
 	$wp_customize->get_setting( 'blogname' )->transport         = 'postMessage';
 	$wp_customize->get_setting( 'blogdescription' )->transport  = 'postMessage';
 	$wp_customize->get_setting( 'header_textcolor' )->transport = 'postMessage';
@@ -23,6 +25,7 @@ function zeitfresser_customize_register( $wp_customize ) {
 				'render_callback' => 'zeitfresser_customize_partial_blogname',
 			)
 		);
+
 		$wp_customize->selective_refresh->add_partial(
 			'blogdescription',
 			array(
@@ -31,6 +34,59 @@ function zeitfresser_customize_register( $wp_customize ) {
 			)
 		);
 	}
+
+	/**
+	 * Performance Tools section
+	 */
+	$wp_customize->add_section(
+		'ztfr_performance_tools',
+		array(
+			'title'    => 'Performance Tools Settings',
+			'priority' => 160,
+		)
+	);
+
+	/**
+	 * Auto optimize uploaded images.
+	 */
+	$wp_customize->add_setting(
+		'ztfr_auto_optimize',
+		array(
+			'default'           => true,
+			'sanitize_callback' => 'wp_validate_boolean',
+		)
+	);
+
+	$wp_customize->add_control(
+		'ztfr_auto_optimize',
+		array(
+			'type'        => 'checkbox',
+			'section'     => 'ztfr_performance_tools',
+			'label'       => 'Auto Optimize Pictures on Upload',
+			'description' => 'Automatically converts uploaded images to modern formats (AVIF/WebP) for improved performance.',
+		)
+	);
+
+	/**
+	 * Auto delete originals after successful optimization.
+	 */
+	$wp_customize->add_setting(
+		'ztfr_auto_delete',
+		array(
+			'default'           => false,
+			'sanitize_callback' => 'wp_validate_boolean',
+		)
+	);
+
+	$wp_customize->add_control(
+		'ztfr_auto_delete',
+		array(
+			'type'        => 'checkbox',
+			'section'     => 'ztfr_performance_tools',
+			'label'       => 'Auto Delete Original Pictures on Upload',
+			'description' => 'Automatically deletes original images after optimization. ⚠️ This action cannot be undone.',
+		)
+	);
 }
 add_action( 'customize_register', 'zeitfresser_customize_register' );
 
@@ -53,9 +109,130 @@ function zeitfresser_customize_partial_blogdescription() {
 }
 
 /**
- * Binds JS handlers to make Theme Customizer preview reload changes asynchronously.
+ * Bind JS handlers to make Theme Customizer preview reload changes asynchronously.
+ *
+ * @return void
  */
 function zeitfresser_customize_preview_js() {
-	wp_enqueue_script( 'zeitfresser-customizer', get_template_directory_uri() . '/js/customizer.js', array( 'customize-preview' ), ZEITFRESSER_VERSION, true );
+	wp_enqueue_script(
+		'zeitfresser-customizer',
+		get_template_directory_uri() . '/js/customizer.js',
+		array( 'customize-preview' ),
+		ZEITFRESSER_VERSION,
+		true
+	);
 }
 add_action( 'customize_preview_init', 'zeitfresser_customize_preview_js' );
+
+/**
+ * Add dependency logic and status box for Performance Tools settings.
+ *
+ * @return void
+ */
+function zeitfresser_customize_controls_dependency_js() {
+	?>
+	<script>
+	(function() {
+		function getOptimizeInput() {
+			return document.querySelector('#customize-control-ztfr_auto_optimize input[type="checkbox"]');
+		}
+
+		function getDeleteInput() {
+			return document.querySelector('#customize-control-ztfr_auto_delete input[type="checkbox"]');
+		}
+
+		function getDeleteControl() {
+			return document.getElementById('customize-control-ztfr_auto_delete');
+		}
+
+		function ensureStatusBox() {
+			let box = document.getElementById('ztfr-auto-status-box');
+
+			if (box) {
+				return box;
+			}
+
+			const optimizeControl = document.getElementById('customize-control-ztfr_auto_optimize');
+
+			if (!optimizeControl || !optimizeControl.parentNode) {
+				return null;
+			}
+
+			box = document.createElement('li');
+			box.id = 'ztfr-auto-status-box';
+			box.className = 'customize-control';
+			box.innerHTML =
+				'<span style="display:block;font-weight:600;margin-bottom:6px;">Current Mode</span>' +
+				'<span id="ztfr-auto-status-text">Checking...</span>';
+
+			optimizeControl.parentNode.insertBefore(box, optimizeControl);
+
+			return box;
+		}
+
+		function updateState() {
+			const optimizeInput = getOptimizeInput();
+			const deleteInput   = getDeleteInput();
+			const deleteControl = getDeleteControl();
+			const statusBox     = ensureStatusBox();
+			const statusText    = document.getElementById('ztfr-auto-status-text');
+
+			if (!optimizeInput || !deleteInput || !deleteControl || !statusBox || !statusText) {
+				return;
+			}
+
+			if (!optimizeInput.checked) {
+				deleteInput.checked = false;
+				deleteInput.disabled = true;
+				deleteControl.style.opacity = '0.5';
+				statusText.textContent = '⚪ Manual Mode (no automation)';
+			} else {
+				deleteInput.disabled = false;
+				deleteControl.style.opacity = '1';
+
+				if (deleteInput.checked) {
+					statusText.textContent = '🟢 Full Auto Mode (optimize + delete)';
+				} else {
+					statusText.textContent = '🟡 Auto Optimize enabled (originals kept)';
+				}
+			}
+		}
+
+		function init() {
+			updateState();
+
+			document.addEventListener('change', function(event) {
+				const target = event.target;
+
+				if (
+					target &&
+					(
+						target.matches('#customize-control-ztfr_auto_optimize input[type="checkbox"]') ||
+						target.matches('#customize-control-ztfr_auto_delete input[type="checkbox"]')
+					)
+				) {
+					updateState();
+				}
+			});
+
+			let tries = 0;
+			const interval = setInterval(function() {
+				updateState();
+				tries++;
+
+				if (tries > 20) {
+					clearInterval(interval);
+				}
+			}, 300);
+		}
+
+		if (document.readyState === 'loading') {
+			document.addEventListener('DOMContentLoaded', init);
+		} else {
+			init();
+		}
+	})();
+	</script>
+	<?php
+}
+add_action( 'customize_controls_enqueue_scripts', 'zeitfresser_customize_controls_dependency_js' );

inc/performance-tools.php

@@ -1,6 +1,6 @@
 <?php
 /**
- * Performance tools for existing media and webfonts.
+ * Performance tools for existing media.
  *
  * @package zeitfresser
  */
@@ -10,14 +10,12 @@ if ( ! defined( 'ABSPATH' ) ) {
 }
 
 /**
- * Register the performance tools admin page.
- *
- * @return void
+ * Register admin page
  */
 function zeitfresser_register_performance_tools_page() {
     add_theme_page(
-		esc_html__( 'Performance Tools', 'zeitfresser' ),
-		esc_html__( 'Performance Tools', 'zeitfresser' ),
+        'Performance Tools',
+        'Performance Tools',
         'manage_options',
         'zeitfresser-performance-tools',
         'zeitfresser_render_performance_tools_page'
@@ -26,85 +24,320 @@ function zeitfresser_register_performance_tools_page() {
 add_action( 'admin_menu', 'zeitfresser_register_performance_tools_page' );
 
 /**
- * Count attachments still waiting for one-time optimization.
- *
- * @return int
+ * Count pending images
  */
 function zeitfresser_get_pending_legacy_images_count() {
-	$query = new WP_Query(
-		array(
+    $query = new WP_Query([
         'post_type'      => 'attachment',
         'post_status'    => 'inherit',
         'post_mime_type' => 'image',
         'fields'         => 'ids',
         'posts_per_page' => 1,
-			'meta_query'             => array( // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
-				array(
-					'key'     => '_zeitfresser_media_optimized',
+        'meta_query'     => [
+            'relation' => 'OR',
+            [
+                'key'     => '_zeitfresser_media_optimized_version',
                 'compare' => 'NOT EXISTS',
-				),
-			),
+            ],
+            [
+                'key'     => '_zeitfresser_media_optimized_version',
+                'value'   => ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION,
+                'compare' => '!=',
+            ],
+        ],
         'no_found_rows' => false,
-			'cache_results'          => false,
-			'update_post_meta_cache' => false,
-			'update_post_term_cache' => false,
-		)
-	);
+    ]);
 
     return (int) $query->found_posts;
 }
 
 /**
- * Process a batch of legacy images with current thumbnail/webp rules.
- *
- * @param int $batch_size Number of images to process.
- * @return array
+ * Count total images
  */
-function zeitfresser_process_legacy_images_batch( $batch_size = 20 ) {
-	$results = array(
-		'processed' => 0,
-		'updated'   => 0,
-		'skipped'   => 0,
-		'errors'    => 0,
-	);
-
-	$query = new WP_Query(
-		array(
+function zeitfresser_get_total_images_count() {
+    $query = new WP_Query([
         'post_type'      => 'attachment',
         'post_status'    => 'inherit',
         'post_mime_type' => 'image',
         'fields'         => 'ids',
-			'posts_per_page'         => absint( $batch_size ),
-			'orderby'                => 'ID',
-			'order'                  => 'ASC',
-			'meta_query'             => array( // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_query
-				array(
-					'key'     => '_zeitfresser_media_optimized',
-					'compare' => 'NOT EXISTS',
-				),
-			),
-			'no_found_rows'          => true,
-			'cache_results'          => false,
-			'update_post_meta_cache' => false,
-			'update_post_term_cache' => false,
-		)
-	);
+        'posts_per_page' => 1,
+        'no_found_rows'  => false,
+    ]);
 
-	if ( empty( $query->posts ) ) {
-		return $results;
+    return (int) $query->found_posts;
 }
 
+/**
+ * NEW: Cleanup counters (ONLY ADDITIVE)
+ */
+function zeitfresser_get_total_originals_count() {
+    $query = new WP_Query([
+        'post_type'=>'attachment',
+        'post_status'=>'inherit',
+        'post_mime_type'=>'image',
+        'posts_per_page'=>1,
+        'fields'=>'ids',
+        'meta_query'=>[
+            ['key'=>'_zeitfresser_original_file','compare'=>'EXISTS']
+        ],
+        'no_found_rows'=>false
+    ]);
+    return (int) $query->found_posts;
+}
+
+function zeitfresser_get_remaining_originals_count() {
+    $query = new WP_Query([
+        'post_type'=>'attachment',
+        'post_status'=>'inherit',
+        'post_mime_type'=>'image',
+        'posts_per_page'=>1,
+        'fields'=>'ids',
+        'meta_query'=>[
+            'relation'=>'AND',
+            ['key'=>'_zeitfresser_original_file','compare'=>'EXISTS'],
+            ['key'=>'_zeitfresser_original_deleted','compare'=>'NOT EXISTS']
+        ],
+        'no_found_rows'=>false
+    ]);
+    return (int) $query->found_posts;
+}
+
+/**
+ * Build a list of original-format files belonging to one attachment.
+ *
+ * This includes:
+ * - the original uploaded file
+ * - the original-format main generated file (e.g. scaled JPG)
+ * - original-format sub-size files derived from attachment metadata
+ *
+ * @param int    $attachment_id Attachment ID.
+ * @param string $original      Absolute path to the original uploaded file.
+ * @return array
+ */
+function zeitfresser_get_original_family_files( $attachment_id, $original ) {
+
+    $files = [];
+
+    if ( empty( $original ) ) {
+        return $files;
+    }
+
+    $original_ext = strtolower( pathinfo( $original, PATHINFO_EXTENSION ) );
+
+    if ( empty( $original_ext ) ) {
+        return $files;
+    }
+
+    $files[] = $original;
+
+    $metadata   = wp_get_attachment_metadata( $attachment_id );
+    $upload_dir = wp_get_upload_dir();
+
+    if ( ! empty( $metadata['file'] ) ) {
+        $current_main_absolute = trailingslashit( $upload_dir['basedir'] ) . $metadata['file'];
+
+        $files[] = preg_replace(
+            '/\.[^.]+$/',
+            '.' . $original_ext,
+            $current_main_absolute
+        );
+
+        $current_dir = dirname( $current_main_absolute );
+
+        if ( ! empty( $metadata['sizes'] ) && is_array( $metadata['sizes'] ) ) {
+            foreach ( $metadata['sizes'] as $size ) {
+                if ( empty( $size['file'] ) ) {
+                    continue;
+                }
+
+                $files[] = $current_dir . '/' . preg_replace(
+                    '/\.[^.]+$/',
+                    '.' . $original_ext,
+                    $size['file']
+                );
+            }
+        }
+    }
+
+    $files = array_unique( array_filter( $files ) );
+
+    return array_values( $files );
+}
+
+/**
+ * Check whether any original-format family files still exist.
+ *
+ * @param int    $attachment_id Attachment ID.
+ * @param string $original      Absolute path to the original uploaded file.
+ * @return bool
+ */
+function zeitfresser_original_family_exists( $attachment_id, $original ) {
+
+    $files = zeitfresser_get_original_family_files( $attachment_id, $original );
+
+    foreach ( $files as $file ) {
+        if ( file_exists( $file ) ) {
+            return true;
+        }
+    }
+
+    return false;
+}
+
+/**
+ * Delete all original-format files belonging to one attachment.
+ *
+ * @param int    $attachment_id Attachment ID.
+ * @param string $original      Absolute path to the original uploaded file.
+ * @return int Number of deleted files.
+ */
+function zeitfresser_delete_original_family_files( $attachment_id, $original ) {
+
+    $deleted_files = 0;
+    $files         = zeitfresser_get_original_family_files( $attachment_id, $original );
+
+    foreach ( $files as $file ) {
+        if ( ! file_exists( $file ) ) {
+            continue;
+        }
+
+        if ( ! is_writable( $file ) ) {
+            continue;
+        }
+
+        if ( unlink( $file ) ) {
+            $deleted_files++;
+        }
+    }
+
+    return $deleted_files;
+}
+
+/**
+ * DELETE ORIGINALS (manual batch)
+ */
+function zeitfresser_delete_originals_batch( $batch_size = 10 ) {
+
+    $deleted = 0;
+
+    $query = new WP_Query([
+        'post_type'      => 'attachment',
+        'post_status'    => 'inherit',
+        'post_mime_type' => 'image',
+        'fields'         => 'ids',
+        'posts_per_page' => $batch_size,
+        'meta_query'     => [
+            'relation' => 'AND',
+            [
+                'key'     => '_zeitfresser_original_file',
+                'compare' => 'EXISTS',
+            ],
+            [
+                'key'     => '_zeitfresser_original_deleted',
+                'compare' => 'NOT EXISTS',
+            ],
+        ],
+    ]);
+
     foreach ( $query->posts as $attachment_id ) {
+
+        $original = get_post_meta( $attachment_id, '_zeitfresser_original_file', true );
+
+        if ( ! $original ) {
+            continue;
+        }
+
+        $optimized_version = get_post_meta(
+            $attachment_id,
+            '_zeitfresser_media_optimized_version',
+            true
+        );
+
+        if ( ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION !== $optimized_version ) {
+            continue;
+        }
+
+        $ext = strtolower( pathinfo( $original, PATHINFO_EXTENSION ) );
+
+        if ( in_array( $ext, [ 'webp', 'avif' ], true ) ) {
+            update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
+            continue;
+        }
+
+        // Nothing left to delete -> mark as done.
+        if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
+            update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
+            continue;
+        }
+
+        zeitfresser_delete_original_family_files( $attachment_id, $original );
+
+        // Only mark as deleted when the full original family is gone.
+        if ( ! zeitfresser_original_family_exists( $attachment_id, $original ) ) {
+            $deleted++;
+            update_post_meta( $attachment_id, '_zeitfresser_original_deleted', 1 );
+        }
+    }
+
+    return $deleted;
+}
+
+/**
+ * Optimizer batch for manual processing.
+ *
+ * Manual optimization must work independently of the auto-optimize upload toggle.
+ *
+ * @param int $batch_size Number of images per batch.
+ * @return array
+ */
+function zeitfresser_process_legacy_images_batch( $batch_size = 25 ) {
+
+    $results = [
+        'processed' => 0,
+        'updated'   => 0,
+        'skipped'   => 0,
+        'errors'    => 0,
+    ];
+
+    $query = new WP_Query([
+        'post_type'      => 'attachment',
+        'post_status'    => 'inherit',
+        'post_mime_type' => 'image',
+        'fields'         => 'ids',
+        'posts_per_page' => $batch_size,
+        'meta_query'     => [
+            'relation' => 'OR',
+            [
+                'key'     => '_zeitfresser_media_optimized_version',
+                'compare' => 'NOT EXISTS',
+            ],
+            [
+                'key'     => '_zeitfresser_media_optimized_version',
+                'value'   => ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION,
+                'compare' => '!=',
+            ],
+        ],
+    ]);
+
+    // Force optimization for manual tool runs, regardless of upload automation setting.
+    $GLOBALS['zeitfresser_force_image_optimization'] = true;
+
+    foreach ( $query->posts as $attachment_id ) {
+
         $results['processed']++;
 
         $file = get_attached_file( $attachment_id );
 
         if ( empty( $file ) || ! file_exists( $file ) ) {
-			update_post_meta( $attachment_id, '_zeitfresser_media_optimized', 'missing' );
+            update_post_meta( $attachment_id, '_zeitfresser_media_optimized_version', 'missing' );
             $results['skipped']++;
             continue;
         }
 
+        if ( ! get_post_meta( $attachment_id, '_zeitfresser_original_file', true ) ) {
+            update_post_meta( $attachment_id, '_zeitfresser_original_file', $file );
+        }
+
         $metadata = wp_generate_attachment_metadata( $attachment_id, $file );
 
         if ( is_wp_error( $metadata ) || empty( $metadata ) ) {
@@ -113,160 +346,314 @@ function zeitfresser_process_legacy_images_batch( $batch_size = 20 ) {
         }
 
         wp_update_attachment_metadata( $attachment_id, $metadata );
-		update_post_meta( $attachment_id, '_zeitfresser_media_optimized', current_time( 'mysql' ) );
+
+        update_post_meta(
+            $attachment_id,
+            '_zeitfresser_media_optimized_version',
+            ZEITFRESSER_IMAGE_OPTIMIZATION_VERSION
+        );
+
         $results['updated']++;
     }
 
+    unset( $GLOBALS['zeitfresser_force_image_optimization'] );
+
     return $results;
 }
 
 /**
- * Handle admin actions for performance tools.
- *
- * @return void
+ * AJAX: Optimizer (extended output only)
  */
-function zeitfresser_handle_performance_tools_actions() {
-	if ( ! is_admin() || ! current_user_can( 'manage_options' ) ) {
-		return;
+function zeitfresser_ajax_optimize_images() {
+
+    if ( ! current_user_can( 'manage_options' ) ) {
+        wp_send_json_error();
     }
 
-	if ( empty( $_GET['page'] ) || 'zeitfresser-performance-tools' !== $_GET['page'] ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-		return;
-	}
+    check_ajax_referer( 'zeitfresser_performance_tools', 'nonce' );
 
-	if ( empty( $_GET['zeitfresser_action'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-		return;
-	}
-
-	check_admin_referer( 'zeitfresser_performance_tools' );
-
-	$action = sanitize_key( wp_unslash( $_GET['zeitfresser_action'] ) ); // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-
-	if ( 'optimize_legacy_images' === $action ) {
     $results = zeitfresser_process_legacy_images_batch( 25 );
-		$args    = array(
-			'page'      => 'zeitfresser-performance-tools',
+
+    wp_send_json_success([
         'processed' => $results['processed'],
         'updated'   => $results['updated'],
-			'skipped'   => $results['skipped'],
-			'errors'    => $results['errors'],
-		);
-
-		wp_safe_redirect( add_query_arg( $args, admin_url( 'themes.php' ) ) );
-		exit;
+        'pending'   => zeitfresser_get_pending_legacy_images_count(),
+        'total'     => zeitfresser_get_total_images_count(),
+    ]);
 }
-
-	if ( 'reset_legacy_images' === $action ) {
-		$query = new WP_Query(
-			array(
-				'post_type'              => 'attachment',
-				'post_status'            => 'inherit',
-				'post_mime_type'         => 'image',
-				'fields'                 => 'ids',
-				'posts_per_page'         => -1,
-				'meta_key'               => '_zeitfresser_media_optimized', // phpcs:ignore WordPress.DB.SlowDBQuery.slow_db_query_meta_key
-				'no_found_rows'          => true,
-				'cache_results'          => false,
-				'update_post_meta_cache' => false,
-				'update_post_term_cache' => false,
-			)
-		);
-
-		foreach ( $query->posts as $attachment_id ) {
-			delete_post_meta( $attachment_id, '_zeitfresser_media_optimized' );
-		}
-
-		wp_safe_redirect(
-			add_query_arg(
-				array(
-					'page'  => 'zeitfresser-performance-tools',
-					'reset' => count( $query->posts ),
-				),
-				admin_url( 'themes.php' )
-			)
-		);
-		exit;
-	}
-}
-add_action( 'admin_init', 'zeitfresser_handle_performance_tools_actions' );
+add_action( 'wp_ajax_zeitfresser_optimize_images', 'zeitfresser_ajax_optimize_images' );
 
 /**
- * Render the performance tools page.
- *
- * @return void
+ * AJAX: Delete (extended ONLY)
+ */
+function zeitfresser_ajax_delete_originals() {
+
+    if ( ! current_user_can( 'manage_options' ) ) {
+        wp_send_json_error();
+    }
+
+    check_ajax_referer( 'zeitfresser_performance_tools', 'nonce' );
+
+    $deleted = zeitfresser_delete_originals_batch( 10 );
+
+    $total     = zeitfresser_get_total_originals_count();
+    $remaining = zeitfresser_get_remaining_originals_count();
+
+    wp_send_json_success([
+        'deleted'       => $deleted,
+        'total'         => $total,
+        'remaining'     => $remaining,
+        'deleted_total' => $total - $remaining,
+    ]);
+}
+add_action( 'wp_ajax_zeitfresser_delete_originals', 'zeitfresser_ajax_delete_originals' );
+
+/**
+ * Render UI
  */
 function zeitfresser_render_performance_tools_page() {
+
     if ( ! current_user_can( 'manage_options' ) ) {
         return;
     }
 
     $pending   = zeitfresser_get_pending_legacy_images_count();
-	$local   = function_exists( 'zeitfresser_get_local_webfonts_css' ) ? zeitfresser_get_local_webfont_urls( zeitfresser_get_local_webfonts_css() ) : array();
+    $total     = zeitfresser_get_total_images_count();
+    $optimized = $total - $pending;
+    $progress  = $total > 0 ? round(($optimized / $total) * 100) : 0;
+
+    // 🔥 NEW: Cleanup counters
+    $cleanup_total     = zeitfresser_get_total_originals_count();
+    $cleanup_remaining = zeitfresser_get_remaining_originals_count();
+    $cleanup_deleted   = $cleanup_total - $cleanup_remaining;
+    $cleanup_progress  = $cleanup_total > 0 ? round(($cleanup_deleted / $cleanup_total) * 100) : 0;
 ?>
+
 <div class="wrap">
-		<h1><?php esc_html_e( 'Zeitfresser Performance Tools', 'zeitfresser' ); ?></h1>
-		<p><?php esc_html_e( 'Use these tools after major performance updates to warm local fonts and reprocess older uploads with the current image rules.', 'zeitfresser' ); ?></p>
+    <h1>Zeitfresser Performance Tools</h1>
     
-		<?php if ( isset( $_GET['updated'] ) || isset( $_GET['reset'] ) ) : // phpcs:ignore WordPress.Security.NonceVerification.Recommended ?>
-			<div class="notice notice-success is-dismissible">
+    <div class="notice notice-info" style="max-width:800px;margin-top:20px;">
         <p>
-					<?php
-					if ( isset( $_GET['reset'] ) ) { // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-						printf(
-							esc_html__( 'Reset complete. %d legacy image markers removed.', 'zeitfresser' ),
-							absint( $_GET['reset'] ) // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-						);
+            <strong>How this tool works</strong><br><br>
+
+            This tool helps you optimize your existing media library for better performance.<br><br>
+
+            • Images are converted to modern formats (AVIF/WebP) for smaller file sizes.<br>
+            • The original file path is safely stored before optimization.<br>
+            • Once optimized, original images can be deleted to save disk space.<br><br>
+
+            <strong>Automation:</strong><br>
+            • You can enable automatic optimization on upload in the Customizer under <em>Performance Tools Settings</em>.<br>
+            • Optionally, original images can also be deleted automatically after successful optimization.<br><br>
+
+            <strong>Safety:</strong><br>
+            • Images are only processed once per version.<br>
+            • Original files are only deleted when safe.<br>
+            • The tool can be run multiple times without side effects.<br><br>
+
+            <em><strong>Tip:</strong> You can either automate the process via the Customizer or use this tool manually for full control.</em>
+        </p>
+    </div>
+
+    <!-- OPTIMIZATION -->
+    <div class="card" style="max-width:800px;padding:24px;margin-bottom:20px;">
+
+        <h2 style="margin-top:0;">🚀 Image Optimization</h2>
+
+        <div style="margin-bottom:20px;">
+            <p><strong>Total Images:</strong> <span id="total"><?php echo $total; ?></span></p>
+            <p><strong>Optimized:</strong> <span id="optimized"><?php echo $optimized; ?></span></p>
+            <p><strong>Pending:</strong> <span id="remaining"><?php echo $pending; ?></span></p>
+        </div>
+
+        <div style="margin-bottom:20px;">
+            <div style="background:#e0e0e0;border-radius:6px;height:12px;">
+                <div id="progress-bar" style="width:<?php echo $progress; ?>%;background:#4caf50;height:100%;"></div>
+            </div>
+            <p><strong>Progress:</strong> <span id="progress"><?php echo $progress; ?></span>%</p>
+        </div>
+
+        <button id="start-btn" class="button button-primary">🚀 Optimize Images</button>
+    </div>
+
+    <!-- CLEANUP -->
+    <div class="card" style="max-width:800px;padding:24px;">
+
+        <h2>🧹 Original Cleanup</h2>
+
+        <div style="margin-bottom:20px;">
+            <p><strong>Total Originals:</strong> <span id="cleanup-total"><?php echo $cleanup_total; ?></span></p>
+            <p><strong>Deleted:</strong> <span id="cleanup-deleted"><?php echo $cleanup_deleted; ?></span></p>
+            <p><strong>Remaining:</strong> <span id="cleanup-remaining"><?php echo $cleanup_remaining; ?></span></p>
+        </div>
+
+        <div style="margin-bottom:20px;">
+            <div style="background:#e0e0e0;border-radius:6px;height:12px;">
+                <div id="cleanup-bar" style="width:<?php echo $cleanup_progress; ?>%;background:<?php echo $cleanup_progress === 100 ? '#4caf50' : '#ff9800'; ?>;height:100%;"></div>
+            </div>
+            <p><strong>Cleanup Progress:</strong> <span id="cleanup-progress"><?php echo $cleanup_progress; ?></span>%</p>
+        </div>
+
+        <button id="delete-btn" class="button">🧹 Delete Originals</button>
+    </div>
+
+    <!-- STATUS -->
+    <div style="padding:12px;background:#f6f7f7;border-radius:6px;">
+        <p id="status-opt">🚀 Optimizer: Idle</p>
+        <p id="status-clean">🧹 Cleanup: Idle</p>
+    </div>
+
+</div>
+
+<style>
+#progress-bar,
+#cleanup-bar {
+    transition: width 0.35s ease, background 0.3s ease;
+}
+</style>
+
+<script>
+let running = false;
+let deleting = false;
+
+(function initCleanupBar() {
+    const bar = document.getElementById('cleanup-bar');
+    const progress = parseInt(document.getElementById('cleanup-progress').innerText, 10);
+
+    if (!bar || isNaN(progress)) return;
+
+    if (progress >= 100) {
+        bar.style.background = '#4caf50';
+    } else if (progress > 0) {
+        bar.style.background = '#ff9800';
+    }
+})();
+
+document.getElementById('start-btn').onclick = () => {
+    running = true;
+
+    document.getElementById('start-btn').disabled = true;
+    document.getElementById('delete-btn').disabled = true;
+
+    document.getElementById('start-btn').innerText = '⏳ Running...';
+    document.getElementById('status-opt').innerText = '🚀 Optimizing images...';
+
+    processBatch();
+};
+
+document.getElementById('delete-btn').onclick = () => {
+    deleting = true;
+
+    document.getElementById('start-btn').disabled = true;
+    document.getElementById('delete-btn').disabled = true;
+
+    document.getElementById('delete-btn').innerText = '⏳ Running...';
+    document.getElementById('status-clean').innerText = '🧹 Cleaning originals...';
+
+    deleteBatch();
+};
+
+function deleteBatch() {
+    if (!deleting) return;
+
+    fetch(ajaxurl, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+        body: new URLSearchParams({
+            action: 'zeitfresser_delete_originals',
+            nonce: '<?php echo wp_create_nonce('zeitfresser_performance_tools'); ?>'
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+
+        let total     = data.data.total;
+        let remaining = data.data.remaining;
+        let deleted   = data.data.deleted_total;
+        let batch     = data.data.deleted;
+
+        let progress = total > 0 ? Math.round((deleted / total) * 100) : 0;
+
+        // Update Cleanup UI
+        document.getElementById('cleanup-total').innerText = total;
+        document.getElementById('cleanup-deleted').innerText = deleted;
+        document.getElementById('cleanup-remaining').innerText = remaining;
+        document.getElementById('cleanup-progress').innerText = progress;
+        
+        let bar = document.getElementById('cleanup-bar');
+
+        bar.style.width = progress + '%';
+
+        if (progress >= 100) {
+            bar.style.background = '#4caf50';
+        } else if (progress > 0) {
+            bar.style.background = '#ff9800';
+        }
+
+        document.getElementById('status-clean').innerText = '🧹 Deleted: ' + batch;
+
+        if (remaining > 0) {
+            setTimeout(deleteBatch, 400);
         } else {
-						printf(
-							esc_html__( 'Batch finished. Processed: %1$d, updated: %2$d, skipped: %3$d, errors: %4$d.', 'zeitfresser' ),
-							absint( $_GET['processed'] ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-							absint( $_GET['updated'] ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-							absint( $_GET['skipped'] ), // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-							absint( $_GET['errors'] ) // phpcs:ignore WordPress.Security.NonceVerification.Recommended
-						);
+            deleting = false;
+
+            document.getElementById('start-btn').disabled = false;
+            document.getElementById('delete-btn').disabled = false;
+
+            document.getElementById('delete-btn').innerText = '🧹 Delete Originals';
+
+            document.getElementById('status-clean').innerText = '✔ Cleanup complete';
+        }
+    });
 }
-					?>
-				</p>
-			</div>
-		<?php endif; ?>
 
-		<div class="card" style="max-width: 880px; padding: 20px;">
-			<h2><?php esc_html_e( 'Legacy Image Optimization', 'zeitfresser' ); ?></h2>
-			<p>
-				<?php
-				printf(
-					esc_html__( '%d image attachments have not been reprocessed with the current size, quality and WebP rules yet.', 'zeitfresser' ),
-					(int) $pending
-				);
-				?>
-			</p>
-			<p><?php esc_html_e( 'Run the batch button repeatedly until the counter reaches zero. This keeps each request small and safe on shared hosting.', 'zeitfresser' ); ?></p>
-			<p>
-				<a class="button button-primary" href="<?php echo esc_url( wp_nonce_url( add_query_arg( array( 'page' => 'zeitfresser-performance-tools', 'zeitfresser_action' => 'optimize_legacy_images' ), admin_url( 'themes.php' ) ), 'zeitfresser_performance_tools' ) ); ?>">
-					<?php esc_html_e( 'Process Next 25 Images', 'zeitfresser' ); ?>
-				</a>
-				<a class="button" href="<?php echo esc_url( wp_nonce_url( add_query_arg( array( 'page' => 'zeitfresser-performance-tools', 'zeitfresser_action' => 'reset_legacy_images' ), admin_url( 'themes.php' ) ), 'zeitfresser_performance_tools' ) ); ?>">
-					<?php esc_html_e( 'Reset Progress', 'zeitfresser' ); ?>
-				</a>
-			</p>
-		</div>
+function processBatch() {
+    if (!running) return;
 
-		<div class="card" style="max-width: 880px; padding: 20px; margin-top: 20px;">
-			<h2><?php esc_html_e( 'Local Font Warmup', 'zeitfresser' ); ?></h2>
-			<p><?php esc_html_e( 'Zeitfresser now prefers locally cached Google font files for the currently selected font families. When the cache is available, the theme preloads the local files and no longer needs the external stylesheet request.', 'zeitfresser' ); ?></p>
-			<p>
-				<?php
-				if ( empty( $local ) ) {
-					esc_html_e( 'Local font files are not cached yet. Visit the front-end once after saving your font settings to warm the cache.', 'zeitfresser' );
+    fetch(ajaxurl, {
+        method: 'POST',
+        headers: {'Content-Type': 'application/x-www-form-urlencoded'},
+        body: new URLSearchParams({
+            action: 'zeitfresser_optimize_images',
+            nonce: '<?php echo wp_create_nonce('zeitfresser_performance_tools'); ?>'
+        })
+    })
+    .then(res => res.json())
+    .then(data => {
+
+        let pending   = data.data.pending;
+        let total     = data.data.total;
+        let optimized = total - pending;
+        let progress  = total > 0 ? Math.round((optimized / total) * 100) : 0;
+
+        // Live update optimization counters
+        document.getElementById('total').innerText = total;
+        document.getElementById('optimized').innerText = optimized;
+        document.getElementById('remaining').innerText = pending;
+
+        // Live update progress UI
+        document.getElementById('progress').innerText = progress;
+        document.getElementById('progress-bar').style.width = progress + '%';
+
+        document.getElementById('status-opt').innerText =
+            '🚀 Processed: ' + data.data.processed +
+            ' | Updated: ' + data.data.updated;
+
+        if (pending > 0) {
+            setTimeout(processBatch, 400);
         } else {
-					printf(
-						esc_html__( 'Local font files ready: %d preloadable assets detected.', 'zeitfresser' ),
-						count( $local )
-					);
+            running = false;
+
+            document.getElementById('start-btn').disabled = false;
+            document.getElementById('delete-btn').disabled = false;
+
+            document.getElementById('start-btn').innerText = '🚀 Optimize Images';
+
+            document.getElementById('status-opt').innerText = '✔ Optimization complete';
         }
-				?>
-			</p>
-		</div>
-	</div>
+    });
+}
+</script>
+
 <?php
 }

readme.md

@@ -9,7 +9,7 @@ Zeitfresser Wordpress Theme
 </h1>
 
 <h4 align="center">
-A performance-optimized, minimalist dark blog theme for WordPress, inspired by the popular Dracula aesthetic.
+A performance-optimized, minimalist dark blog theme for WordPress, built for fast and distraction-free technical writing.
 </h4>
 
 <h6 align="center">
@@ -28,91 +28,123 @@ A performance-optimized, minimalist dark blog theme for WordPress, inspired by t
 <br>
 <img width="1800" height="1271" alt="preview" src="https://github.com/user-attachments/assets/aefff842-8189-48ae-965c-77799667b2a9" />
 
+
 ## ✨ Overview
 
-Zeitfresser is a custom-built WordPress theme designed with a clear focus: **fast, readable, and distraction-free technical blogging**.
+Zeitfresser is a custom-built WordPress theme designed with a clear focus:  
+**fast, readable, and distraction-free technical blogging**.
 
-Originally based on the popular [Daisy Blog](https://wordpress.org/themes/daisy-blog/) Theme. However with this version the theme has evolved into a fully independent, heavily optimized codebase. Every part of the system has been reworked with performance, clarity, and maintainability in mind. The result is not just a styled theme, but a streamlined platform for long-form content.
+Originally based on the popular [Daisy Blog](https://wordpress.org/themes/daisy-blog/) theme, Zeitfresser has evolved into a fully independent and heavily optimized codebase. Over time, every layer of the theme has been reworked with performance, clarity, and maintainability in mind.
 
-The design follows a minimalist dark aesthetic inspired by Dracula, while placing strong emphasis on typography, structure, and reading flow.
+The visual identity follows a minimalist dark aesthetic inspired by Dracula, where typography, spacing, and structure take priority over decoration. The result is a calm, highly readable environment tailored for long-form technical content.
 
 ## 🚀 Performance & Architecture
 
-Performance is not treated as an afterthought, but as a core design principle. The theme removes unnecessary WordPress overhead and delivers a lean frontend experience with minimal dependencies.
+Performance is not an afterthought in Zeitfresser — it is the foundation of the entire system.
 
-Assets are loaded selectively, scripts are deferred where possible, and no heavy libraries are used. The entire frontend runs on lightweight, purpose-built logic, avoiding common bottlenecks such as render-blocking JavaScript or bloated CSS.
+Instead of relying on heavy abstractions or third-party dependencies, the theme focuses on a lean architecture with minimal JavaScript, carefully structured CSS, and predictable rendering behavior. Assets are only loaded when needed, avoiding unnecessary overhead and reducing the risk of render-blocking resources.
 
-Images are handled intelligently: large uploads are automatically scaled down, unused sizes are removed, and modern formats like WebP are supported when available. Combined with lazy loading and async decoding, this ensures efficient delivery without sacrificing visual quality.
+The DOM structure remains intentionally simple, which helps ensure consistent rendering across browsers and improves maintainability over time.
 
-## 🧠 Core Web Vitals
+## 🖼️ Image Optimization System (v1.7)
 
-Zeitfresser is designed to perform well under real-world conditions.
+With version **1.7**, Zeitfresser introduces a fully integrated **image optimization pipeline**.
 
-Layout shifts are avoided by design, the DOM structure is kept clean and predictable, and the Largest Contentful Paint is optimized through prioritization of key elements. The result is a stable and responsive experience that holds up even for long, content-heavy articles.
+Uploaded images can now be automatically converted to modern formats such as **AVIF** or **WebP**, depending on server capabilities. This significantly reduces file sizes while preserving visual quality, leading to faster page loads and improved Core Web Vitals.
+
+The system is designed to be both flexible and safe:
+
+- Optimization can run automatically on upload or manually via the dashboard  
+- Original file paths are preserved before any transformation  
+- Cleanup of original files is optional and only performed when safe  
+- All operations are versioned and idempotent  
+
+A dedicated **Performance Tools dashboard** allows you to process existing media libraries in batches, monitor progress in real time, and optionally remove original files after successful optimization.
+
+For full control, automation can be configured via the WordPress Customizer. You can choose between manual processing, automatic optimization, or a fully automated workflow that includes cleanup of original images.
+
+## 🔤 Local Fonts & Typography System
+
+Zeitfresser uses a fully self-hosted typography system built around Oswald and Roboto.
+
+All fonts are served locally using optimized `.woff2` files, eliminating external requests and improving privacy and performance. Critical font assets are preloaded to ensure fast rendering, and the entire system is built using CSS variables for consistency and maintainability.
+
+The result is a predictable and visually stable typography layer across all environments.
+
+## 🎨 CSS-Based Color System
+
+The theme relies entirely on a static, CSS variable-driven color system.
+
+Instead of dynamically generated styles or PHP-driven color logic, all values are defined using native CSS custom properties. This approach simplifies the styling layer, improves performance, and ensures consistent rendering without runtime overhead.
+
+## ⚡ Core Web Vitals
+
+Zeitfresser is optimized for real-world performance.
+
+Layouts are stable and free of unexpected shifts, ensuring a solid CLS score. Critical assets are loaded early, and render-blocking resources are minimized. Even long-form articles with complex structures remain responsive and fast.
 
 ## 📑 Floating Table of Contents
 
-One of the core features of the theme is its editorial-style floating Table of Contents.
+A key editorial feature of the theme is the floating Table of Contents.
 
-The TOC is automatically generated from the article structure and positioned outside the main content area, allowing readers to navigate long articles without breaking reading flow. It follows the scroll position, highlights the current section, and includes a subtle progress indicator.
-
-Special care has been taken to ensure that this feature enhances usability without adding visual noise or performance overhead.
+It is generated automatically from headings and positioned outside the main content flow, allowing readers to navigate long articles without distraction. The active section is highlighted, and a subtle progress indicator provides orientation within the document.
 
 ## ⚙️ Customization
 
-The theme integrates directly into the WordPress Customizer, allowing essential behavior to be configured without introducing unnecessary complexity.
+Zeitfresser integrates cleanly with the WordPress Customizer, offering a small but focused set of options.
 
-Within the General Options, the Table of Contents can be enabled or disabled globally. Additionally, a threshold can be defined that determines how many headings must be present before the TOC appears. This prevents unnecessary UI elements on shorter posts while keeping the feature effective for longer content.
+Instead of overwhelming users with configuration, the theme provides only what is necessary to adapt behavior without introducing complexity. This includes layout-related options and performance settings such as the image optimization pipeline.
 
 ## 🎨 Design Philosophy
 
-Zeitfresser follows a simple but strict philosophy: **clarity over decoration**.
+The guiding principle behind Zeitfresser is simple:  
+**clarity over decoration**.
 
-The visual design is intentionally minimal, using a dark color scheme with subtle purple accents to guide attention. Instead of relying on visual noise, the theme uses spacing, typography, and structure to create hierarchy.
-
-This results in a reading experience that feels focused and calm, even for very long and complex articles.
+Every design decision is made to support readability and structure. Colors are used sparingly, spacing is intentional, and typography defines hierarchy. The goal is not to impress visually, but to support sustained reading without fatigue.
 
 ## 🧹 Code Quality
 
-The theme has been systematically cleaned and refactored.
+The codebase has been systematically refactored to remove legacy patterns and reduce complexity.
 
-Legacy components and unused features have been removed, CSS conflicts reduced, and functionality centralized where appropriate. The codebase is modular, predictable, and designed for long-term maintainability.
-
-No unnecessary dependencies are introduced, and the theme avoids patterns that typically lead to technical debt in WordPress environments.
+The theme avoids unnecessary abstractions and focuses on a modular, predictable structure. This makes it easier to maintain, extend, and reason about over time, without accumulating technical debt.
 
 ## 📱 Responsiveness
 
-The layout adapts cleanly across devices.
+Zeitfresser adapts naturally across devices.
 
-While the full editorial experience is optimized for larger screens, essential functionality remains accessible on smaller devices. Features such as the Table of Contents are intelligently disabled when they no longer provide value, ensuring that the mobile experience remains clean and usable.
+On desktop, it provides a full editorial experience with structured navigation. On mobile, the layout simplifies while preserving readability and access to core features. Components such as the Table of Contents adjust dynamically based on context.
 
 ## 📦 Installation
 
 To install the theme:
 
 1. Download or clone the repository  
-2. Upload it to your WordPress installation: /wp-content/themes/
-3. Activate it via: Appearance → Themes
+2. Upload it to your WordPress installation: `/wp-content/themes/`  
+3. Activate it via: **Appearance → Themes**
 
 ## ⚡ Recommended Setup
 
-For best results, it is recommended to run the theme in a modern environment with caching enabled.
+While the theme performs well out of the box, it benefits from a modern setup.
 
-A CDN can further improve delivery performance, especially for global audiences. If migrating from another theme, existing images should be optimized to fully benefit from the built-in image handling.
+Using caching, a CDN, and optimized hosting will further improve performance, especially for larger sites with extensive media libraries.
 
 ## 🛠 Development & Support
 
-Zeitfresser is actively developed and designed to evolve.
-
-If you need to get support or want to participate in the active development of this software, you can <a href="https://ztfr.eu/matrix">join our Zeitfresser Matrix Community</a> or the <a href="https://look.ztfr.eu/#/#support:ztfr.eu">Development & Support Channel</a> on Matrix.
+If you want to get support or participate in development, you can join the  
+<a href="https://ztfr.eu/matrix">Zeitfresser Matrix Community</a> or the  
+<a href="https://look.ztfr.eu/#/#support:ztfr.eu">Development & Support Channel</a>.
 
 ## 📄 License
 
-GPL v2 or later. Originally based on the [Daisy Blog](https://wordpress.org/themes/daisy-blog/) Theme, now heavily modified and optimized into an independent theme.
+GPL v2 or later.
+
+Originally based on the [Daisy Blog](https://wordpress.org/themes/daisy-blog/) theme, now heavily modified into an independent codebase.
 
 ## 💬 Final Note
 
-Zeitfresser is built for people who care about performance, readability, and clean engineering.
+Zeitfresser is built for developers and writers who care about:
+
+performance, readability, and clean engineering.
 
 It avoids unnecessary complexity and focuses on doing a few things exceptionally well:  
-**presenting content clearly, loading fast, and staying maintainable.**
+**presenting content clearly, loading fast, and remaining maintainable over time.**

style.css

@@ -5,7 +5,7 @@ Author: Zeitfresser
 Author URI: https://ztfr.eu/
 Theme URI: https://ztfr.eu/
 Description: Zeitfresser Wordpress Theme
-Version: 1.5
+Version: 1.7.1
 Tested up to: 6.2
 Requires PHP: 7.0
 License: GNU General Public License v2 or later

template-parts/content.php

@@ -23,7 +23,10 @@
         <?php if ( $show_hide_image && has_post_thumbnail() ) : ?>
         <?php $thumbnail_size = get_theme_mod( 'post_snippet_featured_image_size', zeitfresser_get_default_post_snippet_featured_image_size() ); ?>
         <a href="<?php echo esc_url( get_permalink() ); ?>" rel="bookmark" class="featured-image">
-            <?php the_post_thumbnail( $thumbnail_size ); ?>
+            <?php
+            $size = ! empty( $thumbnail_size ) ? $thumbnail_size : 'zeitfresser-card';
+            the_post_thumbnail( $size );
+            ?>
         </a>
         <?php endif; ?>
         <div class="summary">