up version

Merge branch 'main' of https://github.com/Domoel/Zeitfresser-Wordpress-Theme
fix(performance): delete all original image subsizes during cleanup
2026-04-25 10:22:58 +02:00 · 2026-04-25 10:19:45 +02:00 · 2026-04-25 10:19:33 +02:00 · 2026-04-25 02:34:55 +02:00 · 2026-04-25 02:26:19 +02:00 · 2026-04-25 02:18:25 +02:00
6 changed files with 1179 additions and 353 deletions
@@ -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.
 *
@@ -268,21 +339,34 @@ function zeitfresser_cleanup_wp_head() {
 add_action( 'init', 'zeitfresser_cleanup_wp_head' );

 /**
- * Preload local fonts for better performance
+ * 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-500.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>
-    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/roboto-500.woff2" as="font" type="font/woff2" crossorigin>
-    <link rel="preload" href="<?php echo get_template_directory_uri(); ?>/fonts/roboto-700.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 ( 'preconnect' === $relation_type ) {
+        $urls[] = [
+            'href'        => get_template_directory_uri(),
+            'crossorigin' => 'anonymous',
+        ];
+    }
+
+    return $urls;
+
+}, 10, 2 );
+
 /**
 * Remove front-end dashicons for visitors.
 *
@@ -317,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' );
@@ -335,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.
 *
@@ -365,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 );

 /**
@@ -399,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;
        }
@@ -409,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.
@@ -417,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(
@@ -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' );
@@ -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
 }
@@ -28,134 +28,91 @@ A performance-optimized, minimalist dark blog theme for WordPress, built for fas
 <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**.

-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. Every part of the system has been refactored with performance, clarity, and maintainability in mind.
+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, with a 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 a core design principle.
+Performance is not an afterthought in Zeitfresser — it is the foundation of the entire system.

- No unnecessary dependencies or heavy libraries  
- Minimal JavaScript footprint  
- Deferred and optimized script loading  
- Lean CSS architecture with reduced redundancy  
- Clean DOM structure for predictable rendering  
+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.

-Assets are loaded only when needed, avoiding common bottlenecks such as render-blocking scripts or excessive CSS overhead.
+The DOM structure remains intentionally simple, which helps ensure consistent rendering across browsers and improves maintainability over time.

-### Key Benefits
+## 🖼️ Image Optimization System (v1.7)

- No inline styles or dynamically injected CSS  
- No dependency on the WordPress Customizer for color rendering  
- Consistent color usage across all components  
- Easy to maintain and extend  
- Fully compatible with modern browsers and rendering pipelines  
+With version **1.7**, Zeitfresser introduces a fully integrated **image optimization pipeline**.

-### Design Approach
+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 theme follows a dark-first design with carefully selected contrast values:
+The system is designed to be both flexible and safe:

- Background and surface colors are optimized for readability  
- Accent colors are used sparingly to guide attention  
- Typography and spacing work together with color to create hierarchy  
+- 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  

-This approach ensures a clean, stable, and performant visual system without unnecessary complexity.
+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 font system:
+Zeitfresser uses a fully self-hosted typography system built around Oswald and Roboto.

- **Oswald** (400, 500, 700) for headings  
- **Roboto** (400, 500, 700) for body text  
+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.

-Key improvements:
-
- No external font requests (Google Fonts removed)  
- Fonts served locally via optimized `.woff2` files  
- Critical font assets are **preloaded** for faster rendering  
- Consistent typography across all environments  
- Full control over font loading and rendering behavior  
-
-The typography system is based on CSS variables and designed to be predictable, maintainable, and visually consistent.
+The result is a predictable and visually stable typography layer across all environments.

 ## 🎨 CSS-Based Color System

-Zeitfresser uses a fully static, CSS variable-driven color system.
+The theme relies entirely on a static, CSS variable-driven color system.

-All colors are defined using native CSS custom properties (`:root`) and applied consistently across the entire theme. This replaces traditional PHP-driven or dynamically generated styles with a simpler and more predictable approach.
+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

-The theme is optimized for real-world performance:
+Zeitfresser is optimized for real-world performance.

- Stable layout with no unexpected shifts (CLS-safe)  
- Optimized Largest Contentful Paint (LCP)  
- Reduced render-blocking resources  
- Early font availability through preload strategy  
-
-Even long-form articles render quickly and consistently.
+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

-A core feature of the theme is its editorial-style floating Table of Contents.
+A key editorial feature of the theme is the floating Table of Contents.

- Automatically generated from headings  
- Positioned outside the main content flow  
- Highlights the active section  
- Includes a subtle progress indicator  
- Smooth scroll behavior  
-
-Designed to enhance navigation without adding visual noise.
+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 cleanly with the WordPress Customizer.
+Zeitfresser integrates cleanly with the WordPress Customizer, offering a small but focused set of options.

- Enable/disable TOC globally  
- Configure heading thresholds for TOC visibility  
- Adjust layout behavior without adding complexity  
-
-All options are intentionally minimal and focused.
+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 strict philosophy:  
+The guiding principle behind Zeitfresser is simple:  
 **clarity over decoration**.

- Minimal dark UI with subtle accent colors  
- Typography-driven hierarchy  
- Clean spacing instead of visual clutter  
- Focus on long-form readability  
-
-The result is a calm, distraction-free reading experience.
+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 codebase has been systematically refactored:
+The codebase has been systematically refactored to remove legacy patterns and reduce complexity.

- Legacy components removed  
- CSS conflicts minimized  
- Modular structure  
- No unnecessary abstractions  
- No technical debt patterns  
-
-The theme is designed for long-term maintainability.
+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.

- Desktop: full editorial experience  
- Mobile: simplified, focused layout  
- Feature-aware behavior (e.g. TOC disabled when not useful)  
-
-All core functionality remains accessible.
+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

@@ -167,17 +124,15 @@ To install the theme:

 ## ⚡ Recommended Setup

-For best performance:
+While the theme performs well out of the box, it benefits from a modern setup.

- Enable caching (server or plugin)  
- Use a CDN for global delivery  
- Optimize existing media assets  
-
-The theme is designed to perform well out of the box, but benefits from a modern hosting setup.
+Using caching, a CDN, and optimized hosting will further improve performance, especially for larger sites with extensive media libraries.

 ## 🛠 Development & Support

-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

@@ -187,10 +142,9 @@ Originally based on the [Daisy Blog](https://wordpress.org/themes/daisy-blog/) t

 ## 💬 Final Note

-Zeitfresser is built for developers and writers who value:
+Zeitfresser is built for developers and writers who care about:

- performance  
- readability  
- clean engineering  
+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.**
+It avoids unnecessary complexity and focuses on doing a few things exceptionally well:  
+**presenting content clearly, loading fast, and remaining maintainable over time.**
@@ -5,7 +5,7 @@ Author: Zeitfresser
 Author URI: https://ztfr.eu/
 Theme URI: https://ztfr.eu/
 Description: Zeitfresser Wordpress Theme
-Version: 1.6
+Version: 1.7.1
 Tested up to: 6.2
 Requires PHP: 7.0
 License: GNU General Public License v2 or later
@@ -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">
Author	SHA1	Message	Date
Dome	937b36b27f	up version	2026-04-25 10:22:58 +02:00
Dome	76902390e4	Merge branch 'main' of https://github.com/Domoel/Zeitfresser-Wordpress-Theme	2026-04-25 10:19:45 +02:00
Dome	e1f7db91f8	fix(performance): delete all original image subsizes during cleanup - 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	2026-04-25 10:19:33 +02:00
Dome	05c9a70e01	Update readme.md	2026-04-25 02:34:55 +02:00
Dome	af8a9447b0	Update customizer.php	2026-04-25 02:26:19 +02:00
Dome	b0eb1d9526	feat(performance): introduce image optimization pipeline with optional automation and cleanup - Add AVIF/WebP conversion for uploads and legacy media - Implement manual batch optimizer via Performance Tools dashboard - Introduce automatic optimization toggle via Customizer - Add optional automatic deletion of original images after optimization - Ensure safe processing with versioned metadata and idempotent operations - Decouple manual optimization from automation logic using force flag - Add live progress UI for optimization and cleanup processes - Improve UX with status indicators, dependency handling and warnings	2026-04-25 02:18:25 +02:00