Tutorial: Eigenen WordPress Logo-Optimizer selber bauen

Wer eine WordPress-Seite betreibt, kennt das Problem: Das Logo ist zu groß, hat einen weißen Hintergrund, der nicht zum Design passt, oder sieht im Browser-Tab winzig und unlesbar aus. Dieses Tutorial zeigt dir, wie du dir mit einer kleinen lokalen Web-App ein Werkzeug baust, das per Drag-and-Drop deine Logos optimiert – ganz ohne Grafik-Vorkenntnisse.

1. Die Vorbereitung (Einmalig)

Damit die App auf deinem Computer laufen kann, benötigt sie eine „Umgebung“. Keine Sorge, das ist schnell erledigt. Lade dir als erstes die Sprache Python unter python.org herunter (neueste Version für Windows oder Mac).
Wichtig bei Windows: Achte beim Installieren zwingend darauf, den Haken bei „Add Python to PATH“ zu setzen. Das ist entscheidend für den reinen Ablauf.

Nun sagen wir deinem Computer, welche speziellen Grafik-Fähigkeiten er braucht. Öffne dein Terminal (Windows: Suche nach „cmd“ oder „Eingabeaufforderung“ / Mac: Suche nach „Terminal“). Kopiere den folgenden Befehl hinein und drücke Enter:

bashpip install streamlit Pillow numpy

Warte kurz, bis die Bestätigung „Successfully installed“ erscheint. In einem typischen Mittelstands-Szenario bedeutet das: Das Setup dauert keine zwei Minuten und ist danach dauerhaft verfügbar.

2. Die App erstellen und starten

Du musst nicht programmieren können. Erstelle auf deinem Computer einen neuen Ordner, z. B. mit dem Namen „Logo-App“. Öffne ein einfaches Textprogramm (Windows: Editor / Mac: TextEdit), kopiere den kompletten Codeblock hier unten und füge ihn ein. Speichere die Datei dann unter dem Namen logo_app.py in deinem neuen Ordner ab.

pythonimport streamlit as st
from PIL import Image
import numpy as np
import io
import os

st.set_page_config(page_title="Logo Optimizer", page_icon="🎨")
st.title("🎨 WordPress Logo Optimizer")
st.info("Diese App macht dein Logo transparent und erstellt die perfekten Größen für Header, Footer und Browser-Tab.")

def process_image(uploaded_file):
    base_name = os.path.splitext(uploaded_file.name)[0]
    img = Image.open(uploaded_file).convert("RGBA")
    
    # Hintergrund transparent machen
    data = np.array(img)
    rgb = data[:, :, :3]
    white_mask = np.all(rgb > 240, axis=-1)
    data[white_mask, 3] = 0
    img = Image.fromarray(data)

    # Ränder beschneiden
    bbox = img.getbbox()
    if bbox: img = img.crop(bbox)

    results = []

    # 1. Header Version (600px)
    w_h = 600
    h_h = int(img.height * (w_h / img.width))
    results.append({"name": f"{base_name}_header_600px.png", "img": img.resize((w_h, h_h), Image.LANCZOS)})

    # 2. Footer Version (300px)
    w_f = 300
    h_f = int(img.height * (w_f / img.width))
    results.append({"name": f"{base_name}_footer_300px.png", "img": img.resize((w_f, h_f), Image.LANCZOS)})

    # 3. Favicon (Quadratisch 512x512)
    arr = np.array(img); alpha = arr[:, :, 3]; v_proj = np.sum(alpha, axis=1)
    split_y = img.height
    for y in range(img.height // 2, img.height):
        if v_proj[y] < (img.width * 5): split_y = y; break
    
    kimw_part = img.crop((0, 0, img.width, split_y))
    k_bbox = kimw_part.getbbox()
    if k_bbox: kimw_part = kimw_part.crop(k_bbox)
    
    favicon = Image.new('RGBA', (512, 512), (255, 255, 255, 0))
    ts = 460
    if kimw_part.width > kimw_part.height:
        nw = ts; nh = int(kimw_part.height * (ts / kimw_part.width))
    else:
        nh = ts; nw = int(kimw_part.width * (ts / kimw_part.height))
    kimw_res = kimw_part.resize((nw, nh), Image.LANCZOS)
    favicon.paste(kimw_res, ((512 - nw) // 2, (512 - nh) // 2), kimw_res)
    results.append({"name": f"{base_name}_favicon_512x512.png", "img": favicon})

    return results

uploaded_file = st.file_uploader("Logo hier hineinziehen oder klicken", type=["png", "jpg", "jpeg"])

if uploaded_file:
    processed_images = process_image(uploaded_file)
    st.write("### Deine optimierten Formate:")
    cols = st.columns(3)
    for idx, item in enumerate(processed_images):
        with cols[idx]:
            st.image(item["img"])
            buf = io.BytesIO(); item["img"].save(buf, format="PNG")
            st.download_button(label=f"Download {item['name'][-12:]}", data=buf.getvalue(), file_name=item["name"], mime="image/png")

Um die App zu starten, öffne dein Terminal. Tippe cd (mit einem Leerzeichen am Ende) und ziehe deinen Ordner „Logo-App“ einfach mit der Maus in das Terminal-Fenster. Drücke Enter. Starte die Web-App dann mit diesem Befehl:

bashstreamlit run logo_app.py

Dein Browser öffnet sich automatisch. Zieh dein Original-Logo hinein, und die App entfernt den Hintergrund und generiert die perfekten Größen. Klicke einfach auf Download.

Gut zu wissen

Streamlit ist ein Framework, das Skripte in interaktive Web-Apps verwandelt. Anstatt Skripte unübersichtlich über Befehle zu bedienen, generiert Streamlit in Sekundenschnelle ein visuelles Interface für den Browser.

Was bedeutet das für Entscheider?

Solche kleinen Skripte sind perfekte Beispiele für Micro-Automatisierung im Alltag. Marketing- und Content-Teams arbeiten damit deutlich autarker. Kleinere Bilddateien laden schneller (Google Core Web Vitals) und durch das exakte Zuschneiden des Favicons wird die Marke im Browser-Tab der Nutzer sofort erkannt. Es gibt keinen Vendor-Lock-in durch Grafik-Software-Abos und keine Datenschutzrisiken, weil alles lokal bleibt.

Handlungsempfehlung

Einmalig einrichten: Führen Sie das Setup (Python & Bibliotheken) auf dem Rechner Ihres Content-Verantwortlichen durch.
Skript als Standard-Tool etablieren: Speichern Sie das Skript zentral ab und ersetzen Sie bisherige manuelle Workflows in Photoshop oder Canva.
Erweitern: Das Skript kann in Zukunft einfach um zusätzliche Maße (Open Graph Bilder für Social Media) erweitert werden.

Fazit & Ausblick

Wer heute noch wiederkehrende Klicks in Grafikprogrammen durchführt, verschwendet wertvolle Ressourcen. Dieses kleine Tool beweist: Mit wenigen Zeilen Code und der richtigen Anleitung übernehmen wir die Kontrolle über unsere digitalen Produktionsketten selbst – effizient, sicher und DSGVO-konform.

5. FAQ

Warum muss ich Python in den PATH aufnehmen?

Das Hinzufügen zum „PATH“ unter Windows sorgt dafür, dass dein Computer den Befehl pip und streamlit im Terminal überhaupt findet und ausführen kann. Ohne diesen Haken erhältst du eine Fehlermeldung, dass der Befehl nicht erkannt wird.

Kann das Skript mein Originalbild überschreiben?

Nein. Das Skript lädt das Originalbild nur in den Arbeitsspeicher, verarbeitet es dort und erzeugt komplett neue Dateien (Header, Footer, Favicon), die du über den Browser herunterlädst. Das Original bleibt immer unangetastet.

Was mache ich, wenn sich mein Logo-Design ändert?

Du musst am Code nichts ändern. Starte einfach die App über das Terminal (streamlit run logo_app.py) neu, ziehe das neue Logo hinein, und die App generiert die neuen Dateien automatisch in den drei passenden Formaten.

Schluss mit Pixelbrei: So baut ihr euer eigenes Tool für perfekte WordPress-Logos (ohne Coding-Wissen).