Joomla Responsive Image mit srcset und Komprimierung

Optimierung? Überprüfen. Lazy loading ? Nochmal Überprüfen. Dennoch, Ihr Joomla! Die Website fühlt sich klobig an und das Laden auf mobilen Geräten und langsamen Verbindungen dauert zu lange. Verzweifeln Sie nicht – hier ist die HTML-Struktur praktisch; genauer gesagt, die Bildquellensätze oder das srcset- Attribut.

Vielleicht dein Joomla! Blog verwendet qualitativ hochwertige Bilder, die Sie einfach nicht entfernen können oder wollen. Das ist kein Grund zur Sorge. Mit dem Droppics-Plugin von Joomla! Können Sie nicht nur die allgemeine Optimierung für Bilder anwenden, sondern je nach Gerät des Benutzers unterschiedliche Dateien bereitstellen.

Responsive Images mit HTML srcset

Wenn Sie sich jemals mit HTML beschäftigt haben, wissen Sie, dass Bilder durch ein Quellattribut definiert werden – src . Die Bildquelle ist der Ort, von dem Browser Bilder laden, um sie auf Ihrem Joomla! Benutzer. Das Problem bei der Verwendung einer konsistenten Quelle für ein bestimmtes Bild besteht darin, dass immer dieselbe Datei geladen wird, egal wie groß sie ist.

Wenn Sie beispielsweise ein Hero-Banner oben in einem Artikel haben, wird dasselbe Bild auf allen Geräten geladen. Browser laden das Bild herunter und verkleinern es dann, manchmal drastisch, insbesondere auf Mobilgeräten. Mit modernen Browsern können Sie nicht nur eine Quelle für Bilder definieren, sondern eine Reihe von Quellen – den Quellsatz srcset .

Wie der Name schon sagt, ist der Quellensatz eine Liste von Quellen anstelle einer einzelnen Quelle. Jeder Quelle ist eine Browserbreite zugeordnet, sodass mobile Geräte kleine Bilder herunterladen und Benutzer auf Ihr Joomla! Blog von Desktops Laden Sie das Bild in voller Auflösung herunter. Mit anderen Worten, das Bild srcset wandelt Bilder in reaktionsfähige Bilder um.

Das Ergebnis der Verwendung von Quellensätzen sind nicht nur schnellere Ladezeiten, sondern auch verbesserte SEO-Scores. All dies hat den geringen Preis, Kopien desselben Bildes mit unterschiedlichen Auflösungen zur Verfügung zu haben, die jederzeit verfügbar sind, wenn Benutzer sie benötigen. Sie können mehr über das lesen srcset Attribut und alles andere Zusammenhang mit Quellensätze hier , aber wenn Sie sind ungeduldig mit ihnen auf Ihrer Joomla zu starten! Blog, lesen Sie weiter.

Servieren von skalierten Bildern auf Joomla! mit Droppics

Sie kennen Droppics vielleicht einfach als Joomla! Galerie-Manager-Erweiterung, aber unter der Haube passiert viel, was Sie vielleicht nicht wissen. Ein typisches Beispiel: Droppics verwendet jetzt den Quellensatz, um die richtigen Bilder für Ihre Benutzer zu laden. Wenn Sie diese Funktion nicht kennen, können Sie sie möglicherweise auch nicht ausnutzen.

Um das srcset-Attribut auf Ihrem Joomla! blog, müssen Sie es zuerst über Ihre Droppics-Konfiguration aktivieren. zur Hauptparameter in den Droppics-Optionen und aktivieren Sie responsive Bilder aus den ersten Optionen. Speichern Sie die Änderungen, um die neuen Einstellungen zu übernehmen.

Wie die Responsive Images Ihnen sagt, erstellt Droppics durch Aktivieren der Einstellung zwei neue Miniaturansichten für jede Joomla! Bild, das Sie haben. Diese Thumbnails sind die responsiven Bilder selbst, die je nach Gerät, das für den Zugriff auf Ihre Joomla! bloggen.

Wenn Sie einen Beitrag erstellen und ein Droppics-Bild einfügen, legt die Erweiterung automatisch das srcset für Sie fest. Glauben Sie uns nicht? Überprüfen Sie den HTML-Code im Frontend und Sie werden mehrere Quellen für verschiedene Gerätegrößen finden.

Die allgemeine Optimierung ist gut und schön, ebenso wie das lazy loading , aber manchmal können sie nur so viel tun. In einigen Fällen kann die Verwendung der modernen HTML-Technik zur Bereitstellung von Bildquellensätzen anstelle von singulären Quellen der Schlüssel zur Überwindung langsamer Ladezeiten sein.

Aber warte, das ist noch nicht alles. Es fehlt noch ein Teil des Puzzles.

Komprimiere srcset Images auf Joomla!

Sie fragen sich vielleicht, ob es sich lohnt, mehrere Kopien desselben Bildes zu haben. Vielleicht möchten Sie Serverplatz sparen oder befürchten, dass sich die neuen Images stapeln. Nur weil Sie den Quellensatz verwenden, bedeutet dies nicht, dass Sie ihn nicht mit anderen Optimierungstechniken wie der Komprimierung kombinieren können.

ImageRecycle ist auch auf Joomla! und Sie können es nahtlos in Droppics integrieren. Sie können es sogar so konfigurieren, dass Ihr Joomla! Quellensatzbilder sofort, wenn sie generiert werden. Sie können bis zu 80% mit verlustbehafteter oder bester Speicherkomprimierung und bis zu 20% mit verlustfreier oder ursprünglicher Komprimierung sparen. Sie können mehr über den Unterschied lesen hier .

Sie können ImageRecycle Bilder automatisch komprimiert werden, indem Sie zur Konfiguration der Erweiterung in Joomla! Gehen Sie von dort aus zur Erweitert “ und aktivieren „Medien beim Speichern optimieren“ . ImageRecycle manuell auswählen, welche Bilder optimiert werden .

Ladezeiten sind ein vielschichtiges Problem. Sie müssen gleichzeitig die Dateigröße minimieren und gleichzeitig die Qualität beibehalten und Speicherplatz sparen. Mit dem magischen Droppics-Quellenset und der ImageRecycle -Komprimierung ist dies nicht nur alles möglich, sondern es kann auch ein einfacher, automatisierter Prozess sein.