Dieser Guide hilft dir dabei, Bilder für die Website optimal aufzubereiten, zu komprimieren und in WordPress mit passenden Alt-Texten zu pflegen.

1. Warum Bilder optimieren?

Schnellere Ladezeiten: Kleinere Dateien sorgen für ein schnelleres Nutzererlebnis.
Besseres Ranking: Suchmaschinen belohnen performante Websites.
Optimale Darstellung: Klare, farbgetreue Bilder auf allen Endgeräten.
Barrierefreiheit: Alt-Texte und Beschreibungen machen Inhalte für alle zugänglich.

2. Die wichtigsten Dateiformate

Format	Für was geeignet	Stärken	Hinweise
JPEG	Fotos, komplexe Motive	Sehr gute Kompression bei Fotos	Qualität ab 70–85 % ausreichend für Web
PNG	Logos, Icons, Grafiken mit Transparenz	Verlustfrei, transparente Hintergründe	Für einfache Grafiken ideal
WebP	Moderne Websites, Fotos & Grafiken	Noch kleinere Dateien als JPEG/PNG	Breite Browser-Abstützung ist weit verbreitet
SVG	Logos, Icons, Vektorgrafiken	Skalierbar ohne Qualitätsverlust	Nur für Zeichnungen und Icons geeignet
AVIF	Zukunftsorientierte Nutzung	Sehr gute Kompression, zukunftssicher	Kann als Ergänzung neben WebP angeboten werden

3. Auflösung und Abmessungen festlegen

Zielgröße bestimmen: Definiere, wie groß das Bild maximal angezeigt wird. Für normale Content-Bilder sind häufig 800–1200 px ausreichend.
Optimale Breite für volle Darstellung: Bilder, die über die gesamte Bildschirmbreite laufen (z. B. Hero-Bilder), sollten etwa 1920 px breit sein.
Seitenverhältnis konstant halten: Achte darauf, Breite und Höhe im gleichen Verhältnis zu skalieren (z. B. 16:9 oder 4:3), um Bildverzerrungen zu vermeiden.

Übersicht: Empfohlene Abmessungen

Bildtyp	Empfohlene Abmessungen	Format
Hero-Banner	1920 × 1080 px	px als JPG
Logos	je nach Einsatzgröße (z. B. 200 × 200 px)	Vektor (SVG)
Grafiken	800 × 600 px (je nach Einsatz)	px, png oder Vektor (SVG)
SVG-Grafik	beliebige Skalierung	Vektor (SVG)
Animationen	variabel, z. B. 800 × 450 px (16:9 oder 1:1)	MP4, GIF/WebP oder auch SVG-Animation
Fotos	1200 × 800 px	px als JPG

4. Kompressionstechniken anwenden

Ideale Dateigröße: Strebe eine Dateigröße von 100–200 KB pro Bild an, um Ladezeiten gering zu halten.
Verlustbehaftete Kompression (Lossy):
Setze Qualitätseinstellungen zwischen 60 und 80 % ein – das spart Platz, ohne dass man den Unterschied visuell wahrnimmt.
Verlustfreie Kompression (Lossless):
Nutze sie für Logos und Icons, wenn jede Kante scharf bleiben muss.

Empfohlene Tools & Plugins

Desktop-Anwendungen: Photoshop, Affinity Photo, Figma, Adobe XD
Online-Tools: TinyPNG, Squoosh
WordPress-Plugins: Smush, ShortPixel, Imagify

5. Farbprofil und Metadaten

sRGB: Stelle vor dem Export sicher, dass Ihr Bild im sRGB-Farbraum ist – das gewährleistet größtmögliche Kompatibilität im Browser.
Metadaten entfernen: Entferne EXIF- und GPS-Daten, um die Dateigröße weiter zu reduzieren und Datenschutz zu wahren.

6. Alt-Texte und Beschriftungen

Datei-Name: Vermeide nicht aussagekräftige Namen. Anstatt “Bild-01.jpg” lieber “Webdesign-Agentur-Team.jpg”
Alternativtext (Alt-Text): Beschreibe kurz und präzise den Bildinhalt.
Beispiel: Statt „IMG_2025-3“ lieber „Roter Klassiker-Sportwagen auf Landstraße“.
Titel und Beschreibung: Ergänze bei Bedarf eine Bildbeschreibung im Titel- und Beschreibungsfeld für Nutzer, die mehr Kontext wünschen.
Keyword-Integration: Binde wichtige Begriffe ein, ohne den Alt-Text zu überladen.

7. Weitere nützliche Tipps

Bildnamen: Verwende nur Buchstaben, Zahlen und Bindestriche (z. B. „Sommer-Blumenwiese.jpg“).
Automatisierte Workflows: Nutze Tools wie Adobe Bridge oder Skripte, um Stapelverarbeitungen (Größe, Farbraum, Metadaten) automatisch durchzuführen.
Regelmäßige Überprüfung: Führe in festgelegten Abständen eine Bildbestandsprüfung durch, um veraltete oder doppelte Dateien zu entfernen.
SEO-Optimierung: Achte darauf, dass jede Seite nur die Bilder lädt, die tatsächlich benötigt werden, und gebe Bildunterschriften nur dort an, wo sie echten Mehrwert bieten.

Du kämpfst mit unzähligen WordPress-Seiten und bist genervt von jedem einzelnen Update?

Du wirst wahnsinnig, wenn du Plugins und Custom-Themes auf jeder Site neu aufsetzen musst?

Glaub uns: We feel you.

Mehrere WordPress-Projekte gleichzeitig zu managen, kann frustrierend werden. Darum wollen wir dir heute eine geniale WP-Funktion vorstellen, die genau dafür gemacht ist, dein nerviges Seiten-Chaos zu zähmen: WordPress Multisite.

Wie’s funktioniert, für wen es sich lohnt und wie du’s einrichtest? Das und mehr erfährst du jetzt!

Was ist WordPress Multisite?

Stell dir vor, du hast ein neues Produkt am Start und willst dafür eine eigene Website aufbauen – mit Branding, Themes, Plugins und allem Pipapo. Normalerweise müsstest du jetzt wieder bei null anfangen, ein eigenes WP aufsetzen, alle Plugins installieren und Themes anpassen. Bei jedem kleinen Update würdest du an zwei Stellen rumfrickeln. Puh!

Multisite ist hier der wahre Superheld. Einmal installiert, kümmerst du dich nur noch um eine WordPress-Installation, hast dafür aber beliebig viele Websites in einem Netzwerk. Gemeinsame Themes, gemeinsame Plugins, gemeinsames Dashboard. Genial, oder?

Kommt drauf an.

Wie funktioniert WP Multisite?

Das Hauptfeature: Alle Websites in einem Netzwerk nutzen denselben Pool an Themes und Plugins. Ob du jede Site damit anders aussehen lässt oder doch ein Corporate-Design durchziehst, entscheidest du. Die Daten einzelner Sites können komplett getrennt oder (teilweise) gemeinsam genutzt werden.

Jede Website hat zwar ihr eigenes Backend, das nur der jeweilige Admin sieht. Aber ein ganz besonderer Admin, der sogenannte Superadmin, hat Zugriff auf das große Ganze und kann alles steuern – von Benutzerrollen bis Plugin-Installationen.

Sogar neue Sites legt er mit ein paar Klicks an.

1. Gemeinsame Entwicklung

Du teilst dir einen Kern aus Code, Themes und Plugins. Das heißt weniger Installations-Orgie, wenn du eine neue Seite an den Start bringst. Vor allem, wenn du ein Custom Parent-Theme bauen lässt, das du für alle Sites nutzen willst, bist du auf der Überholspur.

2. Neue Administratoren-Rollen

Im Multisite-Weltall gibt es Sternenstaub für die Rollen und Rechte:

Der Superadmin thront oben in der Hierarchie und darf Plugins/Themes installieren oder löschen.
Die Site-Admins (untergeordnete Admins) kümmern sich um ihre eigenen Websites und dürfen nur, was du ihnen erlaubst.

Superpraktisch: Für mehrere Sites brauchst du nicht mal mehrere Accounts. Du kannst dich einfach auf verschiedenen Websites im Netzwerk umsehen und Änderungen vornehmen.

3. Gemeinsame Domainnamen

Neue Websites kannst du als Subdomain (sub.domain.at) oder Unterverzeichnis (domain.at/sub) anlegen.

Auch Domain-Mapping steht dir zur Verfügung, falls jede Website eine eigenständige URL bekommen soll.

Google bewertet Subdomains als einzelne Websites, während Unterverzeichnisse als Seiten der Hauptdomain durchgehen.

SEO-Strategie gefällig? Entscheide nach Belieben!

Sie suchen professionelle Unterstützung für den Website-Relaunch?

Dann sind wir die richtige Agentur an Ihrer Seite.

Vorteile eines Multisite-Netzwerks

Globale Installation von Plugins und Themes – einmal einrichten, für alle freischalten.
Weniger Update-Stress und zentrale Backups – ein Klick, alle Websites sind up to date.
Effiziente Entwicklung neuer Subsites – perfekt für Markenfamilien oder Tochterunternehmen mit ähnlichem Setup.
Weniger Code, weniger Serverleistung pro Website, daher nachhaltiger und oft günstiger beim Hosting.
Mehr Flexibilität bei den User-Rollen und Rechten – Site-Admins dürfen nur das, was du willst.

Nachteile von Multisite

Wo Licht ist, ist auch Schatten – so ist das leider im WordPress-Universum:

Backups für einzelne Websites sind tricky, weil alles in einer Datenbank steckt.
Sicherheitslücken treffen gleich alle Websites im Verbund (Autsch!).
Große Netzwerke brauchen ordentliche Serverleistung, Shared Hosting kann da schnell in die Knie gehen.
Manche Plugins sind nicht multisite-freundlich.
Site-Admins ohne FTP-Zugang können Code nicht selbst anpassen.

Kurz: Sei bei Plugins wählerisch. Achte besonders auf Sicherheit, denn wenn einer im Netzwerk schlampt, kann’s wehtun. Ein starkes Hosting hilft, Performance und Stabilität aufrechtzuerhalten.

Wir haben das Multisite Feature bereits erfolgreich im Einsatz.

Beim internationalen Online-Shop von Dr. Spiller machte es Sinn, Multisite einzusetzen.

Für wen lohnt sich Multisite?

Pro Multisite: Viele Websites mit ähnlichem Aufbau

Wenn deine Seiten sich in Optik, Funktionen und eingesetzten Plugins stark ähneln, wirst du Multisite lieben. Denke an:

Parent-Theme für ein einheitliches Branding
Wiederkehrende Plugins für SEO, Security und Co.
Mehrere Corporate Sites deiner Tochterfirmen oder internationale Varianten (Sprachen, Marken, Länder)
Intranet-Lösung – die Abteilungen sind nur einen Klick entfernt

Kontra Multisite: Große Netzwerke mit völlig unterschiedlichen Sites

Führt jede deiner Websites ein komplett anderes Leben (andere Plugins, Designs, Features)? Dann bringt dir eine gemeinsame WP-Installation nichts. Deine Pluginliste bläht sich nur unnötig auf und die Verwaltung wird chaotischer, statt einfacher.

Schau dir in dem Fall lieber Tools wie Jetpack oder ManageWP an. Die bieten ebenfalls gemeinsame Dashboards, Backups und Updates – nur eben ohne die Vor- und Nachteile einer echten Multisite.

Du interessierst dich für eine Multisite?

Dann hast du dich gerade frisch in unsere Spezial-Expertise verliebt! Wir sind genau die richtige WordPress-Agentur, um dich an die Hand zu nehmen.

Automatisierte Lieferantenbestellungen ohne Schnittstelle?

Webbasierte Schnittstellen bilden die Grundlage für reibungslose Kommunikation moderner Systeme.

Beispiel: Die Anbindung von Online-Shops an Lieferantensysteme zur direkten Auftragsabwicklung.

Doch was, wenn ein Lieferantensystem keine vorgesehene Schnittstelle bietet?

Genau vor dieser Herausforderung standen wir bei unserem Online-Shop Holzplatte-online.com. Unser Lieferant, dessen Bestellsystem auf einer älteren PHP-Webanwendung lief, hatte keinen eigenen Webservice.

Das Problem? Bestellungen aus dem Shop mussten manuell im System des Lieferanten eingegeben werden – ein zeitraubender und fehleranfälliger Prozess.

Für uns als Digitalagentur war klar: Hier musste eine Lösung her, die Automatisierung ermöglicht. Da eine neue Schnittstelle des Lieferanten in weiter Ferne lag, mussten wir uns selbst um die Lösung kümmern.

Gesagt, getan.

Das Problem im Detail

Der Lieferant verfügt über ein eigenes Bestellsystem, das über eine klassische Weboberfläche erreichbar ist. Es gibt keine SOAP- oder REST-Schnittstelle (API), um Bestellungen direkt aus dem Shop heraus zu übertragen. Jede Bestellung aus dem Online-Shop muss vom Mitarbeiter manuell in das Lieferantensystem eingegeben werden – ein Prozess, der nicht nur unnötig Ressourcen bindet, sondern auch zu Verzögerungen und möglichen Fehlern führt.

Unser Ansatz: Automatisierung ohne API

Statt auf eine API zu warten, entschieden wir uns, das Problem auf einer anderen Ebene zu lösen: Mithilfe eines .NET HTTP-Clients, der direkt mit der bestehenden Weboberfläche des Lieferantensystems kommuniziert.

Wie haben wir das umgesetzt?

Analyse der Lieferanten-Weboberfläche:
Im ersten Schritt haben wir uns das alte Webinterface des Lieferanten genau angesehen. Dabei ging es vor allem darum, die Struktur und Funktionsweise der Bestellprozesse zu verstehen.
Simulation der Benutzerinteraktionen:
Mithilfe eines .NET HTTP-Clients simulierten wir die Eingaben und Aktionen, die ein Benutzer manuell durchführen würde – vom Login bis zum Absenden der Bestellung.
Automatisierung der Prozesse:
- Wir haben die HTTP-Requests analysiert und nachgestellt. Dabei haben wir auch Parameter wie Session-IDs oder User Agent Strings berücksichtigt.
- Alle nötigen Daten einer Bestellung werden aus unserem Shop automatisch in die entsprechende Formularstruktur des Lieferantensystems übertragen um anschließend den Auftrag auszulösen.
Testphase:
In einer umfassenden Testphase haben wir sichergestellt, dass die automatisierten Bestellungen fehlerfrei und schnell durchlaufen.

Das Ergebnis und die Wirkung

Zeitersparnis: Der Aufwand für die manuelle Eingabe von Bestellungen entfällt.
Fehlerreduktion: Tippfehler oder falsche Angaben gehören der Vergangenheit an.
Kosteneffizienz: Die Mitarbeitenden können sich auf wertschöpfende Aufgaben konzentrieren, anstatt Zeit mit redundanten Eingaben zu verbringen.
Schnelligkeit: Bestellungen werden jetzt in Echtzeit an den Lieferanten übermittelt.

Für unseren Online-Shop Holzplatte-online.com bedeutet das einen großen Schritt in Richtung Effizienzsteigerung und Automatisierung. Gleichzeitig zeigt dieses Projekt, wie wir bei SuS.digital Lösungen finden, auch wenn die technischen Rahmenbedingungen auf den ersten Blick schwierig erscheinen.

Fazit

Das Ergebnis hat unsere Erwartungen nicht nur erfüllt, sondern übertroffen: Der Bestellprozess läuft nun reibungslos, und wir haben dadurch Holzplatte Online einen Wettbewerbsvorteil verschafft.

Docker hat zweifellos die Art und Weise revolutioniert, wie wir Anwendungen entwickeln, bereitstellen und ausführen. Allerdings kommt mit den vielen Vorteilen von Docker auch eine potenzielle Herausforderung: der teilweise hohe Festplattenspeicherverbrauch. Docker-Images und -Container können im Laufe der Zeit beträchtlichen Speicherplatz beanspruchen, insbesondere wenn alte Images nicht ordnungsgemäß freigegeben werden. In unserem Fall ging der Speicher auf unserem Continous Integration System kontinuierlich zur neige.

In diesem Blogbeitrag möchte ich zeigen, wie wir mit einigen nützlichen Linux-Commands dagegen vorgegangen sind.

Überblick verschaffen

				
					df -h -t ext4

Der Befehl df steht für „disk free“ und wird verwendet, um Informationen über die Festplattennutzung anzuzeigen. Mit der Option -h wird die Ausgabe in sinnvollen Größeneinheiten angezeigt, und mit -t ext4 wird die Anzeige auf das ext4-Dateisystem eingeschränkt um die zahlreichen Docker Filesysteme auszublenden. Das hilft, einen Überblick über den verbleibenden Speicherplatz auf dem Dateisystem zu erhalten, auf dem Docker-Images und -Container gespeichert sind.

Detailanalyse mit Verzeichnisbaum

				
					ncdu /

Der Befehl ncdu steht für „NCurses Disk Usage“ und ist ein hilfreiches Tool, um den Speicherverbrauch auf einem System zu analysieren. Durch die Ausführung von ncdu / erhält man eine interaktive Übersicht über den belegten Speicherplatz auf der Festplatte. Dies ermöglicht es, Verzeichnisse und Dateien zu identifizieren, die besonders viel Platz verbrauchen, und herauszufinden, ob Docker-Images und -Container zu den Platzfressern gehören.

Ungenutzte Docker Images löschen

				
					docker image prune -a

Mit diesem Befehl können nicht mehr verwendete Docker-Images bereinigt werden. Das Flag -a bedeutet „alle“ und zeigt an, dass sowohl nicht getaggte als auch ungenutzte getaggte Images entfernt werden sollen. Dadurch kann Speicherplatz freigeben werden, indem veraltete und nicht mehr benötigte Images gelöscht werden.

Alte Docker Build Artefakte entfernen

				
					docker builder prune

Der Befehl docker builder prune hilft dabei, nicht mehr verwendete Build-Elemente zu entfernen. Während des Build-Prozesses erstellt Docker temporäre Images und Schichten, die nach Abschluss des Builds oft nicht mehr benötigt werden. Durch das Aufrufen dieses Befehls können diese temporären Ressourcen gelöscht und somit Speicherplatz gespart werden.

Fazit

Insgesamt ist es wichtig, den Festplattenspeicherverbrauch von Docker im Auge zu behalten, um Engpässe und unerwartete Platzmangel-Probleme zu vermeiden. Durch die regelmäßige Verwendung der genannten Linux-Befehle kann der Speicherplatz effizient verwaltet und sichergestellt werden, dass das Docker-Ökosystem reibungslos läuft.

Der Pagebuilder Elementor für WordPress macht es Online-Marketern leicht, Inhalte dank WYSIWYG (what you see is what you get) Editor ohne Programmierkenntnisse zu erstellen. Je nach Kundenanforderungen setzen wir diesen Pagebuilder ein, um ansprechende Seiten effizient umzusetzen.

YOAST Primärkategorie im Elementor Blogloop nutzen

Bei einem vorangegangen Projekt gab es vom Kunden den Wunsch, beim bestehenden „Beiträge“-Element von Elementor nicht einfach alle hinterlegten Kategorien aufzulisten, sondern nur die Hauptkategorie als kleinen Tag anzuzeigen. Elementor bietet zwar die Darstellung der erstbesten Kategorie an, nicht aber die Darstellung eines mit dem YOAST-Plugin hinterlegten Primärkategorie.

Elementor Element Skin anpassen

Aus unserer Sicht gibt es drei Lösungswege. Eine davon ist die Umsetzung eines eigenen Blogloop Elements. Eine Andere die Erstellung eines eigenen Skins für die bestehende Elementor „Beiträge“ Komponente. Da wir das Rad nicht neu erfinden und das bestehende Design vom Elementor Pagebuilder wiederverwenden wollten, haben wir uns für die dritte etwas weniger gut dokumentierte Variante entschieden: Die Anpassung eines bestehenden Elementor Element Skins.

Mit unserer Lösung können wir nun die primäre Kategorie von YOAST auch im Elementor Pagebuilder Blogloop auslesen.

Im Code werden die einzelnen Schritte beschrieben.

				
					<?php
/**
 * Originalen Skin für das Posts-Widget durch Skin ersetzen, der den Primary Tag des YOAST Seo Plugins verwendet
 */
add_action( 'elementor/widget/posts/skins_init', function( $widget ) {
   
    if (!class_exists('\\WPSEO_Primary_Term')) {
        return;
    }
 
    //Originalen Skin ableiten um die render_badge Methode zu überschreiben
    class CardSkinWithPrimaryTerm extends \ElementorPro\Modules\Posts\Skins\Skin_Cards {
        protected function render_badge() {
            //Die Taxonomie des Badges auslesen
            //das heißt ob es sich um eine Kategorie, Schlagwörter etc. handelt
            $taxonomy = $this->get_instance_value( 'badge_taxonomy' );
            if ( empty( $taxonomy ) || ! taxonomy_exists( $taxonomy ) ) {
                return parent::render_badge();
            }
 
            //Der vom Benutzer hinterlegte primäre Term von YOAST auslesen. Bspw. die primäre Kategorie
            $primary_term = new \WPSEO_Primary_Term( $taxonomy, get_the_ID() );
            if ( ! $primary_term || ! $primary_term->get_primary_term() ) {
                return parent::render_badge();
            }
 
            //Beim oberen Objekt handelt es sich um eine Klasse von YOAST, von der wir die
            //zugehörige Term ID erhalten und das volle WordPress-Term Objekt laden:
            $primary_term = get_term( $primary_term->get_primary_term(), $taxonomy );
 
            //Nun kann der Name des Terms ausgegeben werden
            ?>
            <div class="elementor-post__badge"><?php echo esc_html($primary_term->name); ?></div>
            <?php
        }
    }
 
    //Damit Elementor beim Skin "Card" unsere Version verwendet, muss der Originale Skin zunächst deregistriert werden
    $original = $widget->get_skin( 'cards' );   
    remove_action( 'elementor/element/posts/section_layout/before_section_end',
                    [ $original, 'register_controls' ] );
    remove_action( 'elementor/element/posts/section_query/after_section_end',
                    [ $original, 'register_style_sections' ] );
    remove_action( 'elementor/element/posts/cards_section_design_image/before_section_end',
                    [ $original, 'register_additional_design_image_controls' ] );
    $widget->remove_skin( 'cards' );
 
    //Erst nachdem der vorige Skin vollständig deregistriert wurde,
    //kann unsere abgeleitete Version registriert werden.
    $widget->add_skin( new CardSkinWithPrimaryTerm( $widget ) );
} );

Man kennt es von Rechnungen die man erhält: Statt dem manuellen Abtippen vom IBAN und Zahlungsbetrag kann man einen QR-Code auf der Rechnung mit der Banking-App scannen und so die Überweisungsdaten der Rechnung direkt übernehmen. Aber wie bekommt man diese Funktion auf seine eigenen ausgesendeten Rechnungen?

QR-Code für Rechnungen in individueller Softwarelösung integrieren

Der in diesen QR-Codes verwendete Code entspricht den von der European Payments Clouncil (EPC) herausgegebenen QR Code Leitlinien zur Erfassung der Überweisungsdaten einer SEPA Geldüberweisung (Quick Response Code – Guidelines to Enable the Data Capture for the Initiation of a SEPA Credit Transfer) die bereits 2012 veröffentlicht wurden.

Im Wesentlichen werden die Überweisungsdaten wie IBAN, BIC, Empfängername, Währung Überweisungsbetrag und Verwendungszweck gemeinsam mit wenigen Steuercodes als Zeichenfolge mit Newlines kombiniert und diese als
QR-Code ausgegeben.

Umsetzung in einer .NET C# App

Unsere interne Zeiterfassungs- und Faktura Webanwendung ProjectTime ist mit .NET 6.0 mit der Programmiersprache C# umgesetzt. Die Generierung des QR-Codes kann folgendermaßen aussehen:

				
					decimal amount = 42.42M;
string reference = "Testzweck";
 
StringBuilder builder = new StringBuilder();
 
//  Service Tag
builder.Append("BCD\n");
 
//  EPC Code Version
builder.Append("002\n");
 
//  Character Set
builder.Append("2\n"); // ISO 8859-1 - Latin1
 
// "Sepa Credit Transfer"
builder.Append("SCT\n");
 
// BIC
builder.Append("GIBAATWWXXX\n");
 
// Name
builder.Append("Empfangskonto\n");
 
// IBAN
builder.Append("AT023400000002613800\n");
 
// Betrag
builder.Append(String.Format(new CultureInfo("en-EN"), "EUR{0:0.00}\n", amount));
 
//Zusatz
builder.Append("\n");
 
//Creditor Reference
builder.Append("\n");
 
//Verwendungszweck
builder.Append(reference + "\n");
 
//Hinweis an Nutzer
builder.Append("\n");
 
string result = builder.ToString();

Der in diesem Beispiel im QR Code eingebettete Code würde so aussehen:

				
					BCD
002
2
SCT
GIBAATWWXXX
Empfangskonto
AT023400000002613800
EUR42.42


Testzweck

Mit einer der vielen QR Bilbiotheken für .NET generieren wir daraus vektorbasierte QR Codes, die wir in unseren PDF-Rechnungen einbetten.

Vorteile des QR-Codes auf Rechnungen

Was sind die Vorteile? Durch die Vereinfachung der Bezahlung überweisen Kunden schneller. Außerdem werden Tippfehler bei Beträgen vermieden und der Verwendungszweck für die automatische Zuordnung beim Empfänger vorgegeben werden kann.

Was tun, wenn einer der Hauptrechner pünktlich zum Start des Homeoffice aufgrund des Covid19-Lockdown mit Displayfehler die Arbeit verweigert? Im Fall unseres 2011er iMac heizt man am besten den Ofen auf Ober- und Unterhitze mit 200°C vor.

Genau das ist bei uns im April eingetreten. Der in die Jahre gekommene Hauptrechner ließ sich nicht mehr starten, das Display zeigte beim Einschalten nur eine weiße Fläche mit vertikalen grünen Streifen – nichts geht mehr.

Grafikkarte defekt

Nach kurzer Recherche ist schnell klar, dass der Übeltäter die Grafikkarte ist und das Problem nicht gerade selten auftritt: Möglicherweise zeigen die Lötstellen der Grafikkarte Ermüdungserscheinungen. Da der Rechner schon einige Jahre auf dem Buckel hat und ohnehin bald erneuert werden soll, stellt sich die Frage nach einem Neu- bzw. gebrauchtkauf der baugleichen Grafikkarte nicht mehr. Stattdessen setzen wir auf Hop oder Drop und wenden einen schon länger bekannten „Schmäh“ an: Wir backen die Grafikkarte für kurze Zeit in einem Backofen um feine Risse der Lötstellen vielleicht doch wieder zu schließen.

Zutaten

Um das Prozedere durchzuführen ist es zunächst wichtig, alle relevanten Utensilien zu besorgen. Dazu gehören beispielsweise

Glasheber zum Anheben des Displayglases
Mittel zum Entfernen der alten Wärmeleitpaste (zb Arctic Silver ArctiClean)
Wattestäbchen
Neue Wärmeleitpaste
Torx T10 Schraubenzieher
Alufolie
Backofen
viel Zeit

Rezept

1. Gehäuse öffnen

Im ersten Schritt muss das Display entfernt werden, um überhaupt zum Mainboard zu gelangen. Das Display wird dabei von einem Displayglas geschützt, welches mit starken Magneten am Gehäuse gehalten wird. Mit den entsprechenden Glashebern hat man es aber schnell entfernt. Mit dem Torx-Schraubenzieher wird dann das Displaypanel vom Gehäuse abgeschraubt.

Das Display kann dann für wenige Zentimeter angehoben werden – die Ansteuerungskabel für das Panel und Hintergrundbeleuchtung sind derart kurz gehalten, dass das Abhängen eine kleine Herausforderung ist.

2. Mainboard ausbauen

Hat man das Display endlich entfernt, so erkennt man im mittleren Bereich das aufgeteilte, umgedreht eingebaute Mainboard. In der Mitte befinden sich die Heatpipes des CPU-Kühlers die nach rechts außen die Wärme zum Lüfter ableiten. Im linken mittleren Bereich, direkt zwischen dem Slot-In-CD-Laufwerk und der Festplatte, befindet sich dagegen der Kühlkörper der die ebenfalls umgedreht eingebaute Grafikkarte verdeckt. Um zu dieser zu gelangen, muss das Mainboard inklusive CPU, Grafikkarte und aller Kühlkörper abgesteckt und ausgebaut werden.

3. Grafikkarte reinigen

Der Kühlkörper der Grafikkarte kann nun abgeschraubt werden um zur Grafikkarte zu gelangen.

Mit den Wattestäbchen und der Lösung wird die alte, ausgetrocknete Wärmeleitpaste feinsäuberlich entfernt.

Der Kern der Grafikkarte ist nicht wie bei CPUs mittlerweile üblich mittels Heatspreader geschützt sondern sitzt blank am Board, weshalb man bei den Kanten des Kerns durchaus vorsichtig vorgehen sollte.

4. Backen

Die ganze Grafikkarte kommt nun mittels Distanzhaltern aus Alufolie auf einem Backblech für 10 Minuten bei ca. 200°C in den vorgeheizten Ofen. Den Geruch sollte man eher nicht genießen.

5. Ziehen lassen und garnieren

Nach 10 Minuten im Rohr lässt man die knusprig aussehende Karte abkühlen, steckt sie anschließend wieder ans Mainboard benetzt sie mit neuer Wärmeleitpaste.

6. Wieder zusammenstellen

Feinsäuberlich baut man die Teile wieder zusammen – zuvor aufgenommene Fotos der einzelnen Anschlüsse und Kabel helfen enorm.

7. Genießen

Abschließend der beste und spannendste Moment der Arbeit: Man schaltet den Rechner ein und wartet darauf, ob nun alles wieder funktioniert, oder ob der Rechner nun gänzlich für die Entsorgung bereit ist.

Wenn endlich eine rein weiße Fläche dargestellt wird dauert es noch eine gefühlte Ewigkeit bis auch tatsächlich das graue Apple-Logo inkl. Ladebalken erscheint und man realisiert, dass es tatsächlich geklappt hat.

Zusammenfassung

Mit dieser kuriosen Reparatur haben wir unseren iMac mittlerweile wieder 9 Monate in Betrieb. Sollte das Problem erneut auftreten, so kann ein zweiter Backvorgang nochmals helfen.

Wie lässt sich ein Dualmonitor-Betrieb mit dem Macbook Pro 13″ realisieren.

Als Arbeitsumgebung bevorzuge ich einen Laptop mit zwei extern angeschlossenen Monitoren. Das ist bei mit Windows betriebenen Geräten normalerweise keine Herausforderung, solange die integrierte Grafikkarte des Laptops mehrere Monitore ansteuern kann bzw. ein DisplayPort Daisy Chaining möglich ist. Mit älteren Lenovo Laptops und den dazugehörigen Workstation-Docks war ein solches Setup kein Problem.

Das Problem

Anders sieht es bei Macbooks und macOS aus. Dieses unterstützt zwar mehrere externe Monitore, ein Daisy Chaining über ein Displayport Kabel ist aber nicht vorgesehen.

Die Lösung

Mit Thunderbolt 3 Docks diverser Hersteller ist es aber dennoch möglich. Konkret können wir von einer funktionierende Lösung mit dem Dell Docking Station Thunderbolt WD19TB mit 180-Watt Netzteil und einem zusätzlichen USB-C / Thunderbolt 3 zu DisplayPort-Kabel berichten.

Um nicht nur gespiegelte sondern „erweiterte“ Ansichten des Desktops zu erhalten, darf allerdings nur ein DisplayPort der Dockingstation verwendet werden. Das zweite Display muss über den im Dock verfügbaren Thunderbolt 3 Port und dem USB-C zu DisplayPort-Kabel angeschlossen werden. Wie es scheint können derzeit nur damit zwei separate Videostreams vom Macbook mit nur einem Kabel realisiert werden.

Der Anschlussplan sieht folgendermaßen aus:

Dank des Docks wird das Macbook auch über ein einziges Kabel geladen, hat Netzwerkzugriff über Gigabit-LAN und es können weitere USB-Geräte angeschlossen werden.

Animation und Motion Design auf Websites ist kein neuer Trend. Schon mit Adobe Flash wurden Webseiten animiert. Es gibt unzählige Tools und Bibliotheken die bei der Umsetzung animierter Grafiken unterstützen – die meisten davon arbeiten mit SVG und CSS. Ein wiederkehrendes Problem das sich für uns beim produktiven Einsatz gezeigt hat, war der fehlende Workflow zwischen Grafiker und Entwickler.

Um zu einen für uns gut funktionierenden Workflow zu gelangen benötigten wir einige Schritte die wir im folgenden zeigen möchten.

Logoanimationen als SVG mit JavaScript programmieren

Angefangen hat es mit der Idee das Logo einer Kundenseite zu animieren. Die Animation war großartig und begeisterte alle Beteiligten.

Der Nachteil: die Umsetzung erfolgte mit eingebettetem JavaScript und der Bibliothek SVG.js, welches genau auf diese Seite abgestimmt war. Somit konnten wir das fertig animierte Logo nicht einfach in unsere eigene Portfolioseite mit aufnehmen. Diese Art der Umsetzung erschwert auch Änderungswünsche des Designers, die programmatisch umgesetzt werden müssen.

SVG Animationen mit Adobe After Effects und Bodymovin (Lottie)

Adobe After Effects wurde als Kompositions- und Animationstool für Video und Filmaufnahmen entwickelt. Erst mit dem von Airbnb entwickelten Plugin Bodymovin lassen sich erstellte Animationen im dafür vorgesehenen JSON-Lottie-Format als Vektorgrafiken für Websites und Apps exportieren.

Die Animation im Web erfolgt mittels eingebundener JavaScript-Bibliothek. Im Gegensatz zur mit SVG.js implementierten Variante, ist das Lottie-File portabler. Dieser Umstand erweist sich auch im praktischen Einsatz als wesentlich komfortabler – Änderungen lassen sich vom Designer direkt in After Effects umsetzen und müssen anschließend nur noch exportiert und auf den jeweiligen Server übertragen werden.

Leider gab es zum Zeitpunkt unseres Einsatzes auch gravierende Nachteile im Funktionsumfang des Bodymovin-Plugins. Viele der erstellten Animationen konnten nicht eins zu eins exportiert werden. Hier macht sich bemerkbar, dass es sich um ein – dennoch sehr mächtiges – Plugin für eine Anwendung handelt, die nicht für vektorbasierte Webanimationen entwickelt wurde.

SVG Animationen mit Keyshape

Bei der Recherche zu weiteren Alternativen entdeckten wir durch Zufall das nicht sehr bekannte Keyshape für Mac. Im Gegensatz zu Bodymovin werden bei diesem Tool native SVG mit CSS Keyframes generiert. Einfache animierte Vektorgrafiken lassen sich damit ressourcenschonend ohne Notwendigkeit zur Einbindung einer Drittbibliothek erstellen. Mit Keyshape ist sogar der Import von Lottie-Dateien möglich. Die zuvor mit After Effects für Bodymovin erstellten Grafiken können wir damit mit wenig Aufwand wiederverwenden.

Für uns ist es aktuell das Tool der Wahl um Animationen für Logos, Icons oder Illustrationen als SVG zu exportieren und in unseren Web- und Softwareprojekten einzusetzen. Der schlanke Aufbau ermöglicht ein schnelles Einlernen und bietet dennoch alle Funktionen die benötigt werden.

Cookie	Dauer	Beschreibung
cookielawinfo-checkbox-analytics	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Analytics".
cookielawinfo-checkbox-functional	11 months	The cookie is set by GDPR cookie consent to record the user consent for the cookies in the category "Functional".
cookielawinfo-checkbox-necessary	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookies is used to store the user consent for the cookies in the category "Necessary".
cookielawinfo-checkbox-others	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Other.
cookielawinfo-checkbox-performance	11 months	This cookie is set by GDPR Cookie Consent plugin. The cookie is used to store the user consent for the cookies in the category "Performance".
viewed_cookie_policy	11 months	The cookie is set by the GDPR Cookie Consent plugin and is used to store whether or not user has consented to the use of cookies. It does not store any personal data.

1. Warum Bilder optimieren?

2. Die wichtigsten Dateiformate

3. Auflösung und Abmessungen festlegen

4. Kompressionstechniken anwenden

5. Farbprofil und Metadaten

6. Alt-Texte und Beschriftungen

7. Weitere nützliche Tipps

Was ist WordPress Multisite?

Wie funktioniert WP Multisite?

1. Gemeinsame Entwicklung

2. Neue Administratoren-Rollen

3. Gemeinsame Domainnamen

Sie suchen professionelle Unterstützung für den Website-Relaunch?

Vorteile eines Multisite-Netzwerks

Nachteile von Multisite

Wir haben das Multisite Feature bereits erfolgreich im Einsatz.

Für wen lohnt sich Multisite?

Pro Multisite: Viele Websites mit ähnlichem Aufbau

Kontra Multisite: Große Netzwerke mit völlig unterschiedlichen Sites

Du interessierst dich für eine Multisite?

Automatisierte Lieferantenbestellungen ohne Schnittstelle?

Das Problem im Detail

Unser Ansatz: Automatisierung ohne API

Wie haben wir das umgesetzt?

Das Ergebnis und die Wirkung

Fazit

Überblick verschaffen

Detailanalyse mit Verzeichnisbaum

Ungenutzte Docker Images löschen

Alte Docker Build Artefakte entfernen

Fazit

YOAST Primärkategorie im Elementor Blogloop nutzen

Elementor Element Skin anpassen

QR-Code für Rechnungen in individueller Softwarelösung integrieren

Umsetzung in einer .NET C# App

Vorteile des QR-Codes auf Rechnungen

Grafikkarte defekt

Zutaten

Rezept

1. Gehäuse öffnen

2. Mainboard ausbauen

3. Grafikkarte reinigen

4. Backen

5. Ziehen lassen und garnieren

6. Wieder zusammenstellen

7. Genießen

Zusammenfassung

Das Problem

Die Lösung

Logoanimationen als SVG mit JavaScript programmieren

SVG Animationen mit Adobe After Effects und Bodymovin (Lottie)

SVG Animationen mit Keyshape

Let’s work together