Stellen Sie ordnungsgemäß skalierte Bilder auf Ihrer WordPress- oder Joomla-Website bereit

Nehmen Sie ein beliebiges Bild in Ihrem WordPress- oder Joomla-Blog auf. Wenn Sie die Qualität bewerten, ist die Wahrscheinlichkeit groß, dass das Bild so groß ist, dass es verkleinert werden muss, damit es auf die Desktop-Geräte Ihrer Leser passt, geschweige denn auf mobile Geräte. Qualität ist schön und gut, aber Hüllen wie diese haben einen hohen Preis.

Um möglichst viele unterschiedliche Darstellungen mit einem einzigen Bild unterzubringen, muss man ein großes verwenden. Dies führt wiederum dazu, dass große Dateien auch auf kleinen Geräten vollständig heruntergeladen werden müssen. Es gibt eine Lösung: Die Bereitstellung von Bildern erfolgt skaliert je nach Anzeigegerät, egal ob Desktop, Tablet oder Mobilgerät.

Skalierte Bilder auf WordPress und Joomla mit CSS bereitstellen

Wie viel Platz nehmen Bilder auf Webseiten ein? Es gibt keine festen Regeln, aber angesichts ihrer Bedeutung und Allgegenwärtigkeit ist die Antwort definitiv eine Menge. Wenn Sie Bilder bereitstellen, die Sie am Ende sowieso neu skalieren, ist es nur sinnvoll, sparsam zu sein und Ihren WordPress- oder Joomla-Benutzern Bilder bereitzustellen, die bereits verkleinert sind, um die Ladezeiten Ihrer Website zu beschleunigen.

CSS hilft bei einer Reihe relativ unbekannter, aber unbezahlbarer Attribute: srcset , size und media . Mit diesen Attributen – die alle von den meisten modernen Webbrowsern unterstützt werden – können Sie angeben, welche Bildversionen abhängig von der Größe des Ansichtsfensters bereitgestellt werden sollen.

Das srcset ergänzt die übliche src- Registerkarte. Wie der Attributname schon sagt, geben Sie damit statt eines einzelnen Bildes eine Liste skalierter Bilder und die Breite an, in der jedes einzelne Bild verwendet werden soll. In Verbindung damit wird das Größenattribut , mit dem Sie basierend auf der Breite des Ansichtsfensters definieren können, wann Bilder angezeigt werden sollen.

Sie können mehr lesen über diese Attribute hier , aber die gute Nachricht ist dass in den letzten paar Jahren, Wordpress Ihre Bilder automatisch skaliert und dient dazu die entsprechenden Größen für Ihre Leser. Das Ergebnis ist atemberaubend: Ein Porträtbild mit 511 KB wird auf Mobilgeräten auf 42 KB reduziert.

Automatische Neuskalierung und Optimierung mit ImageRecycle

Bei der Bildgröße gilt: Je kleiner, desto besser, solange die Qualität nicht beeinträchtigt wird. Obwohl WordPress Ihnen durch die Verwendung von srcset , können Sie noch mehr tun, um die Bildgröße zu minimieren, insbesondere durch Neuskalieren und Komprimieren von Bildern.

ImageRecycle ist ein Plugin, das Bilder gleichzeitig für Sie neu skalieren und komprimieren kann und sowohl für WordPress als auch für Joomla verfügbar ist. Das Beste daran: Mit ImageRecycle können Sie Bilder automatisch neu skalieren und komprimieren.

Die Neuskalierung ist besonders nützlich, wenn Sie in Ihrem WordPress- oder Joomla-Blog Stockbilder verwenden. Diese Bilder sind oft unverhältnismäßig groß, um allen Verwendungszwecken, einschließlich Printmedien, gerecht zu werden. Im Internet ist es höchst unwahrscheinlich, dass Sie jemals die gesamte Auflösung nutzen müssen. Mit ImageRecycle können Sie große Bilder beim Hochladen automatisch auf eine maximale Höhe oder Breite verkleinern.

Die Neuskalierung wird durch die Komprimierung ergänzt, die die Bildgröße optimiert, ohne die Qualität zu beeinträchtigen. Mit verlustbehafteter Komprimierung können Sie den Bildraum um bis zu 80% reduzieren. Dies gilt nicht nur für die Originalbilder, sondern auch für die von WordPress neu skalierten Bilder. Auch ImageRecycle kann ImageRecycle automatisch für Sie erledigen.

Was Sie als ein paar zusätzliche Kilobyte ansehen, kann für Ihre Leserschaft wertvolle verlorene Zeit bedeuten. Die gute Nachricht ist, dass Sie für die Ladezeiten nicht auf Qualität verzichten müssen. Durch die intelligentere Verwendung von CSS und die ImageRecycle und Optimierung von ImageRecycle Sie qualitativ hochwertige Bilder, die sich an die Geräte Ihrer Leser anpassen.