Wesentliche WordPress-Plugins für die Arbeit mit animierten GIFs
Einst beschränkt auf kitschige, blinkende Banner mit Neonfarben und Cartoons, die durch Pop-ups und E-Mail-Header schwebten, haben sich GIFs zum Besseren gewandelt. Mit dieser Änderung sind sie hier, um zu bleiben, insbesondere für WordPress-Benutzer und -Entwickler. GIF-Dateien wurden speziell für das Web entwickelt und sind in der Regel klein, was sie perfekt macht, um einem Beitrag einen Hauch von Bewegung zu verleihen. Tatsächlich können animierte GIFs einem ansonsten statischen Artikel oder Thema ein erfrischendes Lebensgefühl verleihen.
Animierte GIFs bringen jedoch ihren gerechten Anteil an Problemen und Frustrationen mit sich. Da animierte GIFs aus vielen Frames bestehen, können sie schnell von kleinen, unauffälligen Dateien zu einigen der unhandlichsten Grafiken auf Ihrem Server werden. GIFs sind dafür bekannt, die Ladezeiten auf Seiten, auf denen sie verwendet werden, zu verlangsamen, was sie zu einem Hindernis für wiederholten Datenverkehr und zu einem Problempunkt für Webmaster macht, die die Bedeutung von Geschwindigkeit in Zeiten der Ungeduld verstehen.
Dann gibt es noch all die WordPress-spezifischen Probleme. WordPress wurde nicht mit Blick auf animierte GIFs erstellt, und ihr Wiederaufleben hat Entwicklern einige Kopfschmerzen bereitet. Während WordPress die Größe von Bildern im Allgemeinen automatisch ändert, unterbricht dieser Prozess Animationen, indem nur der erste Frame angezeigt wird. Darüber hinaus kann es schwierig sein, animierte GIFs als vorgestellte Bilder in WordPress zu verwenden. Sie können RSS-Feeds, E-Mail-Kampagnen, Titelseitenanzeigen und Miniaturansichten stören.
In den meisten Fällen überwiegen die Vorteile immer noch die Nachteile. Um GIFs jedoch zu einem erfolgreichen Teil Ihrer WordPress-Veröffentlichung zu machen, müssen Sie möglicherweise einige neue Techniken ausprobieren. Sehen Sie sich unten einige unverzichtbare Plugins und Techniken für die Arbeit mit animierten GIFs an.
Basic: Machen Sie Ihre WordPress-Site schneller
Eines der Hauptprobleme bei der Verwendung von animierten GIFs in WordPress ist das Problem der Ladezeit. Ladezeiten so schnell wie möglich zu halten, ist unerlässlich, um Ihre Besucher zufrieden zu stellen und Ihre Website so effektiv wie möglich zu gestalten.
Laut KISSmetrics ist die Ladezeit ein wesentlicher Faktor für den Seitenabbruch. Bei einer Ladezeit von nur 4 Sekunden steigt die Seitenabbruchrate auf 25 % und nähert sich 50 %, wenn sich diese Zeit 10 Sekunden nähert. Darüber hinaus kann eine Verzögerung von 1 Sekunde bei der Seitenantwort zu einer Verringerung der Conversions um 7 % führen.
Das bedeutet, dass, wenn eine Website 100.000 US-Dollar pro Tag einbringt – eine E-Commerce-Website oder ein anderer Online-Händler – eine Seitenverzögerung von 1 Sekunde jedes Jahr 2,5 Millionen US-Dollar an verlorenen Verkäufen bedeuten kann. Es wirkt sich auch direkt auf die Kundenzufriedenheit aus. Eine Verzögerung von 1 Sekunde verringert die Kundenzufriedenheit um 16 %. Ihre Kunden möchten, dass Ihre Website mit wenig bis gar keiner Verzögerung funktioniert.
Da GIFs verwendet werden können, um die Benutzerzufriedenheit zu erhöhen, wird dies noch problematischer. Vielleicht verwenden Sie ein animiertes GIF, um zu veranschaulichen, wie ein Produkt funktioniert, wie im Fall dieser Tierfalle unten. Das GIF ist einfach der schnellste und einfachste Weg, um den Einstell- und Auslösemechanismus der Falle zu erklären.
Auch außerhalb von E-Commerce-Websites können GIFs verwendet werden, um bestimmte Punkte zu veranschaulichen, einem ansonsten trockenen Thema Humor zu verleihen oder das Gefühl der Benutzerinteraktion zu steigern. Sie können eine großartige Möglichkeit sein, ein unbekanntes Konzept mit einem vertrauten zu verknüpfen und dabei die Popkultur als Verbindung zu nutzen. Zum Beispiel Blogs von WebpageFX für ein Publikum von Geschäftsinhabern, die mit Begriffen wie „Meta-Keywords” und „Keyword Stuffing” vertraut sein können oder auch nicht. Diese Praktiken sind veraltet und völlig wirkungslos – aber anstatt dies zu sagen, zeigten sie, wie (un)effektiv es mit einem animierten GIF wäre.
Offensichtlich sind GIFs großartig, um das Verständnis zu verbessern oder einfach ein Lächeln auf das Gesicht des Lesers zu zaubern – aber das schafft ein direktes Dilemma. Trotz ihrer inhärenten Vorteile können diese Dateien ziemlich groß sein, und langsame Ladezeiten können im Laufe der Zeit zu Gewinnverlusten und einem geringeren Verkehrsaufkommen führen. Wenn GIFs für Sie und Ihren Blog wichtig sind, ist es wichtig, Probleme zu beseitigen, die zu Verzögerungen und langsamen Ladezeiten führen. Die folgenden Plugins können dazu beitragen, die Dateigröße zu verringern und das Ladeerlebnis zu verbessern, ohne Ihre Animationen oder deren Qualität zu beeinträchtigen.
WP Smush.it
WP Smush.it ist weit verbreitet und für Entwickler aller Erfahrungsstufen verfügbar und verfügt über die Funktionen, die erforderlich sind, um Bilder so zu optimieren, dass die Ladezeiten verkürzt und die Endbenutzer zufrieden gestellt werden. Das Plugin wurde entwickelt, um:
- Optimieren Sie die JPEG-Komprimierung
- Konvertieren Sie einige statische GIFs in indizierte PNGs
- Entfernen Sie nicht verwendete Farben aus indizierten Bildern
- Entfernen Sie unnötige Metadaten aus Bildern
- Machen Sie animierte GIFs effizienter, indem Sie Pixel entfernen, die über Frames hinweg gleich bleiben
Im Gegensatz zu einigen anderen Bildkomprimierungs-Plugins, die animierte GIFs genauso brechen wie WordPress selbst, enthält WP Smush.it speziell Optimierungstechniken für animierte GIFs.
Bilder, die von Backend-Benutzern und Administratoren gleichermaßen zu Seiten hinzugefügt werden, werden beim Hochladen automatisch durch das Plugin geführt. Das bedeutet, dass Sie Ihren Prozess überhaupt nicht ändern müssen, um eine verbesserte Benutzererfahrung zu erzielen. Viel besser geht es nicht! Benutzer, die besorgt darüber sind, wie sich vorhandene Bilder auf die Ladezeiten auswirken, können das Plugin auch verwenden, um vorhandene Inhalte zu scannen. WP Smush.it ist einfach zu installieren und unkompliziert zu bedienen.
Jedes Lazy-Loading-Plugin
Eine weitere Option zur Optimierung der Ladezeiten bei der Einbindung von GIFs ist die Verwendung eines Lazy-Loading-Plugins. Diese Plugins wurden für Benutzer entwickelt. Anstatt darauf zu warten, dass eine ganze Seite geladen wird – was die Zeit verlangsamt und zu Frustration führt – laden Lazy-Loading-Plugins nur den Inhalt, der gerade auf dem Bildschirm des Besuchers sichtbar ist. Lazy Loading beschleunigt Websites mit vielen Bildern und kann eine effektive Möglichkeit sein, Ihre Besucher bei Laune zu halten.
Es gibt viele kostenlose Optionen, die Lazy Loading einfach machen. Dazu gehören – sind aber nicht beschränkt auf:
- Lazy Load – Lazy Load verwendet jQUEry.sonar, um nur sichtbare Bilder zu laden. Es wurde vom WordPress VIP-Team geschrieben und erhält von den Benutzern konstant hohe Rankings.
- Image Lazy Load – Image Lazy Load (Unveil.js) wurde als leichtgewichtige Version des ursprünglichen Lazy Load entwickelt und bietet Unterstützung für hochauflösende Bilder auf Geräten mit Retina-Displays.
- BJ Lazy Load – BJ Lazy Load ersetzt eingebettete Beitragsbilder durch Platzhalter und lädt Inhalte, kurz bevor sie beim Scrollen für Endbenutzer sichtbar werden.
- Rocket Lazy Load – Rocket Lazy Load ist als kleines (weniger als 2 KB) Skript konzipiert, das alle Seitenbilder – Widgets, Einbettungen, Miniaturansichten, Avatare und mehr – beim Scrollen anzeigt. Es ist vor allem für seine geringe Größe bekannt.
Mittelstufe: Installieren Sie einige praktische Animations-Plugins
Sobald Sie die Ladezeiten und die Geschwindigkeit gemeistert haben, ist es an der Zeit, zu etwas Fortgeschrittenem überzugehen, das für die meisten allgemeinen WordPress-Benutzer dennoch machbar ist. Diese Animations-Plugins machen bestehende GIFs benutzerfreundlicher und sichtbar attraktiver. Die unten aufgeführten praktischen Animations-Plugins verbessern die Fähigkeit von WordPress, GIFs anzuzeigen.
Animierte GIF-Größenänderung
Animated GIF Resize behebt die automatische Größenänderungsfunktion von WordPress, sodass Sie die Größe von animierten GIFs ändern können, ohne die Animation zu beschädigen. Dadurch wird das häufig auftretende Problem beseitigt, dass WordPress den ersten Frame eines animierten GIF ohne irgendetwas anderes anzeigt.
Giphypress
Jeder, der häufig mit animierten GIFs gearbeitet hat, ist wahrscheinlich mit Giphy vertraut, einem animierten GIF-Archiv, das es Benutzern ermöglicht, nach Tags zu suchen und GIFs zu finden, die für fast jedes Thema relevant sind. Giphypress macht es einfach, Giphy-Dateien auf Ihrer Website einzubetten – verwenden Sie einfach die vom Plugin hinzugefügte Schaltfläche, um nach dem perfekten Bild zu suchen, und klicken Sie auf „In Beitrag einbetten”.
GIF-Animationsvorschau
GIF Animation Preview sucht und findet alle Stellen, an denen Sie ein animiertes GIF auf Ihrer WordPress-Site verwendet haben, und ersetzt sie durch Vorschaubilder. Unabhängig davon, woher das GIF stammt (interne oder externe Bildquellen funktionieren beide), verwendet das Plugin den ersten Frame der Animation, um eine Vorschau zu generieren. Dann haben Website-Besucher die Möglichkeit, auf Wiedergabe zu klicken, um den Rest der Animation zu sehen, oder fortzufahren, ohne die Animation anzusehen.
Dies ist eine großartige Möglichkeit, die Ladezeiten von Seiten auf Ihrer Website zu verkürzen, insbesondere wenn Sie sich gegen die Verwendung eines Lazy-Loading-Plugins entschieden haben – anstatt jeden einzelnen Frame jedes animierten GIFs auf der Seite laden zu müssen, müssen Besucher nur laden der erste Rahmen. Diese Art von Funktionalität wird von großen Websites wie BuzzFeed verwendet, insbesondere für mobile Besucher, die eher einen Grund haben, wählerisch zu sein, welche Daten sie herunterladen.
Fortgeschritten: Machen Sie coolere Dinge mit animierten GIFs
Diese Plugins und Techniken sind etwas schwieriger einzurichten, aber sie sind ziemlich leistungsfähig. Lesen Sie weiter, um zu erfahren, wie Sie ein GIF als Beitragsbild festlegen (etwas, das wir immer häufiger auf Websites wie BuzzFeed, Mashable und TechCrunch sehen) und wie Sie eine Reihe separater Bilddateien direkt auf Ihrer Website in eine animierte Sequenz umwandeln.
Festlegen eines animierten GIF als Beitragsbild
Zum größten Teil waren Webdesigner und -entwickler – insbesondere in WordPress – beim Versuch, ein animiertes GIF als Beitragsbild festzulegen, eingeschränkt. Da WordPress automatisch ein Miniaturbild aus dem von Ihnen bereitgestellten Bild erstellt und animierte GIFs zerstört, kann es sehr schwierig sein, es durchzuziehen. Das bedeutet jedoch nicht, dass es unmöglich ist.
Eine Möglichkeit, die Verzögerung zu umgehen, besteht darin, die URL des Bildes in das Feld mit den vorgestellten Bildern einzufügen, anstatt eine Grafik von Ihrem Computer oder irgendwo im Internet herunterzuladen und hochzuladen. Dies ist ein Hit oder Miss.
Eine andere – vielleicht weniger ideale, aber dennoch praktikable Option für diejenigen, die sich mit der WordPress-Entwicklung auskennen – besteht darin, das Format des vorgestellten Bildes von „vorgestellt” auf „vollständig” innerhalb der Indexdatei des Themas zu ändern. Dadurch kann das vorgestellte Bild originale, unverzerrte animierte Gifs abrufen. Dies erfordert die Bereitschaft, ein wenig zu codieren, und hat den Nachteil, dass es für alle Ihre vorgestellten Bilder gilt – Sie müssen also damit beginnen, sie manuell auf die richtige Breite und Höhe zu skalieren.
Es muss nicht kompliziert sein. Tatsächlich gibt es auch Plugins, um den Prozess zu erleichtern. Autoset Featured Image und Automatic Featured Image Posts sind zwei Plugins (wählen Sie eines aus), die automatisch das erste Bild – unabhängig von seinem Format – als Featured Image festlegen. Das heißt, wenn Ihr erstes Bild, das in einem Beitrag angezeigt wird, ein animiertes GIF ist, wird es zum vorgestellten Bild. Diese Problemumgehung hat jedoch andere Nachteile – nämlich, dass Sie immer wählerisch sein müssen, welches Bild Sie in Ihren Beiträgen ganz oben platzieren!
Automatisch animierte Bilder
Das Auto Animate Image- Plug-in ermöglicht es Benutzern, Animationen einzubetten, die aus einer Reihe separater Dateien erstellt wurden, anstelle eines standardmäßigen animierten GIF. Es kann verwendet werden, um das 256-Farben-Maximum von animierten GIFs zu umgehen, was ein natürlicheres, fließenderes Gefühl ermöglicht. Auf der anderen Seite ist es einfach, etwas zu erstellen, das Ihre Website immens verlangsamt, daher erfordert die Verwendung dieses Plugins etwas Fingerspitzengefühl.
Das Plugin zeigt nicht nur mehrere Bilder – ansonsten unbewegte Bilder – kontinuierlich wie eine Animation an, es unterstützt auch beliebige Dateinamen, kein Standard erforderlich. Das bedeutet, dass GIF, PNG, JPEG, JPEG XR – und andere HD-Fotooptionen – BMP, TIFF, WebP und SVG alle austauschbar verwendet werden können, um etwas Neues und völlig Originelles zu schaffen. Animationen, die mit Auto Animate Image erstellt wurden, können auf Verzögerung, Wiederholen, Zurückspulen, Pause und sogar Leer eingestellt werden, was zu mehr Optionen als ein Standard-GIF führt. Es macht das Schreiben von JavaScript überflüssig, kann aber auf Wunsch damit gesteuert werden. Das Plugin unterstützt die meisten Browser, sodass Sie sich keine Gedanken über unterschiedliche Endbenutzererfahrungen machen müssen.
Es geht darum, Ihre Besucher glücklich zu machen
GIFs sind zurück. Viele würden argumentieren, dass sie von den Toten zurückgekehrt sind. Anstelle der alten, kitschigen Animationen, die sie früher waren, sind sie jetzt integraler Bestandteil sauberer, solider und effektiver Webdesigns. Bei der Arbeit in WordPress können sie jedoch mehr als nur ein bisschen problematisch sein.
Beginnen Sie am Anfang – auf der Grundstufe. Nehmen Sie sich die Zeit, sich Plugins anzusehen, um die Ladegeschwindigkeit zu erhöhen, finden Sie heraus, womit Sie sich wohlfühlen, und testen Sie, wie sich die Zeiten verkürzen. Arbeiten Sie von dort aus an fortgeschritteneren Animations-Plugins. Dann werden Sie kreativ. Brechen Sie aus dem „normalen” animierten GIF-Trott aus, indem Sie Ihre eigenen Animationen aus statischen Bildern erstellen und sicherstellen, dass Ihre animierten GIFs als Beitragsbilder eingestellt werden können.
Ein animiertes GIF muss keine Frustration, Negativität oder gefürchtete Stunden vor dem Computerbildschirm verursachen, um zu versuchen, Ihre Seiten schneller zu laden oder genau richtig anzuzeigen. Sie sollen Spaß machen, und die oben beschriebenen Plugins und Optionen sorgen dafür, dass dies auch so bleibt.