Stellen Sie auf Ihrer WordPress- oder Joomla-Website korrekt skalierte Bilder bereit

Nehmen Sie ein beliebiges Bild aus Ihrem WordPress- oder Joomla-Blog. Wenn Ihnen Qualität wichtig ist, ist das Bild wahrscheinlich so groß, dass es verkleinert werden muss, um auf den Desktop-Geräten Ihrer Leser – geschweige denn auf Mobilgeräten – angezeigt zu werden. Qualität ist zwar wichtig, aber solche Fälle haben ihren Preis.

Um ein einzelnes Bild auf möglichst vielen verschiedenen Bildschirmgrößen darzustellen, muss es groß sein. Das bedeutet wiederum große Dateien, die selbst auf kleinen Geräten vollständig heruntergeladen werden müssen. Es gibt jedoch eine Lösung: Bilder werden je nach Anzeigegerät – ob Desktop, Tablet oder Smartphone – skaliert.

Skalierte Bilder auf WordPress und Joomla mit CSS bereitstellen

Wie viel Speicherplatz benötigen Bilder auf Webseiten? Es gibt keine festen Regeln, aber angesichts ihrer Bedeutung und weiten Verbreitung ist die Antwort definitiv: sehr viel. Wenn Sie Bilder verwenden, die Sie ohnehin skalieren müssen, ist es sinnvoll, ressourcenschonend vorzugehen und Ihren WordPress- oder Joomla-Nutzern bereits verkleinerte Bilder bereitzustellen, um die Ladezeiten Ihrer Webseite zu verkürzen.

CSS bietet eine Reihe relativ unbekannter, aber unschätzbarer Attribute: srcset , sizes und media . Mit diesen Attributen – die von den meisten modernen Webbrowsern unterstützt werden – können Sie festlegen, welche Bildversionen abhängig von der Größe des Viewports angezeigt werden sollen.

Das `srcset` ergänzt das übliche `src`- Attribut. Wie der Name schon sagt, gibt es hier nicht ein einzelnes Bild an, sondern eine Liste skalierter Bilder und deren jeweilige Breite. Zusammen mit dem sizes` lässt sich festlegen, wann Bilder basierend auf der Viewport-Breite angezeigt werden sollen.

Mehr zu diesen Eigenschaften erfahren Sie hier . Die gute Nachricht ist jedoch, dass WordPress seit einigen Jahren Ihre Bilder automatisch skaliert und Ihren Lesern die jeweils passende Größe bereitstellt. Das Ergebnis ist beeindruckend: Ein Porträtbild mit 511 KB wird auf Mobilgeräten auf 42 KB reduziert.

Automatische Skalierung und Optimierung mit ImageRecycle

Bei Bildgrößen gilt: Je kleiner, desto besser, solange die Qualität nicht darunter leidet. WordPress unterstützt Sie zwar mit dem `srcset`- , aber Sie können die Bildgrößen noch weiter minimieren, insbesondere durch Skalierung und Komprimierung der Bilder.

ImageRecycle ist ein Plugin, das Bilder gleichzeitig skaliert und komprimiert und sowohl für WordPress als auch für Joomla verfügbar ist. Das Beste daran: ImageRecycle kann Bilder automatisch skalieren und komprimieren.

Die Skalierung ist besonders nützlich, wenn Sie in Ihrem WordPress- oder Joomla-Blog Stockfotos verwenden. Diese Bilder sind oft unverhältnismäßig groß, um alle Verwendungszwecke, einschließlich Printmedien, abzudecken. Im Web benötigen Sie jedoch höchstwahrscheinlich nie ihre volle Auflösung. Mit ImageRecyclekönnen Sie große Bilder beim Hochladen automatisch auf eine maximale Höhe oder Breite skalieren.

Ergänzend zur Skalierung ist die Komprimierung wichtig, um die Bildgröße zu optimieren, ohne die Qualität zu beeinträchtigen. Mit verlustbehafteter Komprimierung lässt sich der Speicherplatzbedarf um bis zu 80 % reduzieren. Dies gilt nicht nur für die Originalbilder, sondern auch für die von WordPress skalierten Bilder. ImageRecycle kann dies automatisch für Sie erledigen.

Ein paar zusätzliche Kilobyte können für Ihre Leser wertvolle Zeit kosten. Die gute Nachricht: Sie müssen nicht auf Qualität verzichten, um die Ladezeiten zu verkürzen. Dank intelligenterem Einsatz von CSS und der Skalierungs- und Optimierungsfunktionen von ImageRecycleerhalten Sie hochwertige Bilder, die sich an die Geräte Ihrer Leser anpassen.