Joomla Responsive Image Using srcset and Compression

Optimierung? Check. Lazy loading ? Check. Trotzdem wirkt Ihre Joomla!-Website ungelenk und lädt auf Mobilgeräten und bei langsamen Verbindungen viel zu lange. Keine Sorge – hier kommt die HTML-Struktur ins Spiel, genauer gesagt die Bildquellen, auch bekannt als srcset- Attribut.

Vielleicht verwendet Ihr Joomla!-Blog hochauflösende Bilder, auf die Sie nicht verzichten möchten. Kein Problem! Mit dem Joomla!-Plugin Droppics können Sie Bilder nicht nur allgemein optimieren, sondern auch je nach Gerät des Nutzers unterschiedliche Bilddateien bereitstellen.

Responsive Bilder mit HTML srcset

Wer sich schon einmal mit HTML beschäftigt hat, weiß, dass Bilder durch das Attribut ` src` . Die Bildquelle ist der Speicherort, von dem Browser die Bilder laden, um sie den Joomla!-Benutzern anzuzeigen. Das Problem bei der Verwendung einer festen Quelle für ein bestimmtes Bild ist, dass immer dieselbe Datei geladen wird, unabhängig von ihrer Größe.

Wenn Sie beispielsweise ein Hero-Banner am Anfang eines Artikels haben, wird dasselbe Bild auf allen Geräten geladen. Browser laden das Bild herunter und skalieren es dann herunter, manchmal drastisch, insbesondere auf Mobilgeräten. Moderne Browser ermöglichen es Ihnen, nicht nur eine Bildquelle, sondern mehrere Bildquellen – das sogenannte Source Set ` srcset` .

Wie der Name schon sagt, handelt es sich bei der Quellenliste um eine Liste von Bildquellen anstelle einer einzelnen Quelle. Jeder Quelle ist eine Browserbreite zugeordnet, sodass mobile Geräte kleine Bilder herunterladen und Desktop-Nutzer, die auf Ihren Joomla!-Blog zugreifen, das Bild in voller Auflösung erhalten. Anders ausgedrückt: Die Bildquellenliste (srcset) sorgt dafür, dass Bilder responsiv dargestellt werden.

Die Verwendung von Source Sets führt nicht nur zu kürzeren Ladezeiten, sondern auch zu besseren SEO-Werten. Der einzige Nachteil: Es müssen Kopien desselben Bildes in verschiedenen Auflösungen bereitstehen, wenn Nutzer sie benötigen. Mehr über das srcset -Attribut und alles Weitere zu Source Sets hier . Wenn Sie es kaum erwarten können, sie auf Ihrem Joomla!-Blog einzusetzen, lesen Sie einfach weiter.

Skalierte Bilder auf Joomla! mit Droppics bereitstellen

Droppics ist Ihnen vielleicht nur als Joomla!-Galerie-Manager-Erweiterung bekannt, doch im Hintergrund passiert einiges, was Ihnen möglicherweise entgangen ist. Beispielsweise nutzt Droppics jetzt das Quellenset, um die passenden Bilder für Ihre Nutzer zu laden. Wenn Sie diese Funktion noch nicht kennen, nutzen Sie sie womöglich auch nicht.

Um das srcset-Attribut in Ihrem Joomla!-Blog zu verwenden, müssen Sie es zunächst in den Droppics-Einstellungen aktivieren. Gehen Sie dazu in den Hauptparameter “ und aktivieren Sie Option „Responsive Bilder “. Speichern Sie die Änderungen, um die neuen Einstellungen zu übernehmen.

Wie die „Responsive Bilder “ erklärt, erstellt Droppics durch Aktivierung dieser Einstellung zwei neue Vorschaubilder für jedes Joomla!-Bild. Diese Vorschaubilder sind die responsiven Bilder selbst, die je nach Gerät, mit dem auf Ihren Joomla!-Blog zugegriffen wird, korrekt dargestellt werden.

Wenn Sie einen Beitrag erstellen und ein Droppics-Bild einfügen, setzt die Erweiterung automatisch das srcset-Attribut . Überzeugen Sie sich selbst: Untersuchen Sie den HTML-Code im Frontend – Sie werden mehrere Quellen für verschiedene Bildschirmgrößen finden.

Allgemeine Optimierung ist zwar gut und schön, ebenso wie lazy loading, aber manchmal stoßen diese Methoden an ihre Grenzen. In manchen Fällen kann die Verwendung moderner HTML-Techniken, bei denen Bildquellensätze anstelle einzelner Quellen verwendet werden, der Schlüssel zur Überwindung langer Ladezeiten sein.

Aber Moment mal, das ist noch nicht alles. Es fehlt noch ein Puzzleteil.

srcset-Bilder in Joomla! komprimieren

Sie fragen sich vielleicht, ob es sinnvoll ist, mehrere Kopien desselben Bildes zu speichern. Möglicherweise möchten Sie Speicherplatz auf dem Server sparen oder befürchten, dass sich die neuen Bilder anhäufen. Nur weil Sie das Quellset verwenden, heißt das nicht, dass Sie es nicht mit anderen Optimierungstechniken wie der Komprimierung kombinieren können.

ImageRecycle ist auch für Joomla! verfügbar und lässt sich nahtlos in Droppics integrieren. Sie können es sogar so konfigurieren, dass Ihre Joomla!-Quellbilder direkt nach der Generierung automatisch komprimiert werden. Mit verlustbehafteter Komprimierung (optimale Datenspeicherung) sparen Sie bis zu 80 %, mit verlustfreier Komprimierung (Originalkomprimierung) bis zu 20 %. Weitere Informationen zu den Unterschieden finden Sie hier .

ImageRecycle lässt sich so einstellen , dass Bilder automatisch komprimiert werden. Gehen Sie dazu in Joomla! zur Konfiguration der Erweiterung, wählen Sie im Reiter „Erweitert“ die Option „Medien beim Speichern optimieren“ die Benutzeroberfläche von ImageRecycle manuell auswählen, welche Bilder optimiert werden sollen

Ladezeiten sind ein vielschichtiges Problem. Man muss gleichzeitig die Dateigröße minimieren, die Qualität erhalten und Speicherplatz sparen. Mit dem vielseitigen Quellset von Droppics und der Komprimierung von ImageRecycleist das nicht nur möglich, sondern auch ein einfacher, automatisierter Prozess.