Startseite » Insights » Automatische Bildoptimierung in der professionellen Webentwicklung

Automatische Bildoptimierung in der professionellen Webentwicklung

Die digitale Welt ist visuell. Neben Texten und Videos spielen vor allem Bilder eine herausgehobene Rolle in der Rezeption einer Website. Bilder werden genutzt, um den Usern Inhalte zu vermitteln oder ein Image zu entwickeln, die Möglichkeiten sind endlos. Bilder immer und zu jeder Zeit optimal in den responsiven Ansichten auf unterschiedlichen Devices und Browsern darzustellen, gestaltet sich jedoch mühselig und bindet Ressourcen. Um dies zu vermeiden, empfehlen wir als Digitalagentur die integrierte automatische Bildoptimierung. Mit unserem modernen Jamstack-Framework Next.js funktioniert das ganz unkompliziert. Du kümmerst dich um die perfekte Bildauswahl, die Technik um die optimale Darstellung.

Warum müssen Bilder fürs Web optimiert ausgespielt werden?

Die Optimierung von Bildern ist ein Rankingfaktor. Dabei interessieren insbesondere die Dateigröße, Auflösungen und Proportionen sowie das Bildformat. Sind diese Parameter nicht optimiert, finden sich bspw. falsche Bildausschnitte an der vorgesehenen Stelle oder Texte werden von Bildern überlagert. Web-Fehler schaden der Usability, die Bounce Rate steigt, die Sichtbarkeit geht zurück. – Was also tun? – Image-SEO hat positive Auswirkungen auf das organische Suchpotenzial! Bei der richtigen und praktischen Ausspielung der passenden Bilder helfen heute spezialisierte Cloud-Dienste oder JavaScript-Frameworks mit einer integrierten automatische Bildoptimierung. Komm, wir beraten dich!

Responsive Bilder mit dem ‚srcset‘-Attribut

Der Prozess beginnt mit der Ausarbeitung eines ‚srcset‘. Das ist eine Liste von unterschiedlich hoch aufgelösten Versionen eines Bildes und seiner diversen Größe, den Responsive Images. Das ‚srcset‘ ist zentral für die integrierte automatische Bildoptimierung. Bei der Anfrage eines Browsers sucht sich dieser aus der Liste die jeweils passende Größe aus. Wird das Bild im Porträt-Modus des Handys geladen, lädt der Browser die gewünschte Auflösung im Landscape-Modus nach, wenn das Handy gedreht wird. Wird es auf dem Desktop ausgespielt, wird eine andere Bildgröße genutzt als für ein Smartphone.

Automatische Bildoptimierung zeigt eine Illustration der verschiedenen Devices, die sich automatisch die unterschiedlichen Bildformate ziehen.

Automatische Bildoptimierung zeigt eine Illustration dwie ein Bild schnell geladen werden kann und trotzdem eine gute Qualität hat mit WebP.

Welche Dateiformate wir als Digitalagentur empfehlen

In der professionellen Webentwicklung werden für die Darstellung von Bildern unterschiedliche Bildformate genutzt. Das sind JPEG (für jpg-Dateien) und PNG/APNG. Das auch bekannte GIF-Format wird hingegen für sogenannte GIF-Animationen genutzt. Vor allem zwei Formate rücken in den Fokus: neben dem PNG-Format auch WebP. Beide unterstützen Bilder mit einem transparenten Hintergrund oder transparenten Bildbereichen, was bspw. zum Webdesign-Trend Glasmorphismus passt. WebP-Bilder sind um ein Vielfaches kleiner als ihr PNG-Pendant. Beim Laden einer Website ist das ein entscheidender Vorteil, denn der User muss nicht lange warten.

WebP für die Bildoptimierung in der professionellen Webentwicklung

WebP ist ein Grafikformat für verlustfreie Bildkompression von statischen oder animierten Bildern. Es ermöglicht selbst bei einer sehr hohen Komprimierung eine perfekte Bildqualität pro Datenmenge. Dabei arbeitet WebP besonders effektiv bei der Komprimierung von detailarmen und gleichförmigen Bildteilen. Farbige Flächen bleiben farbig, an jeder Stelle. Aufgrund dieser Vorteile nutzt unsere Digitalagentur in der professionellen Webentwicklung für die Darstellung von Bildern WebP. Dieses Bildformat wird inzwischen von jedem Browser unterstützt.

Wenn es um Grafiken oder Illustrationen geht, verwenden wir allerdings SVG-Dateien. Sie sind bestens skalierbar und von geringer Dateigröße. Das ist gut für die Performance einer Website.

Wie funktioniert der
Bildexport bei WebP-Formaten?

Ein WebP-Format kann kinderleicht mit einem Bildbearbeitungsprogramm aus einem anderen Format (z. B. aus einem PNG) exportiert werden. Deine Digitalagentur hilft dir dabei gern. Eine andere Möglichkeit ist es, das Zielformat über eine integrierte automatische Bildoptimierung auf einem Server zu erzeugen.

Integrierte automatische Bildoptimierung

Bei unserem Headless-Ansatz nutzen wir die integrierte automatische Bildoptimierung des Jamstack-Frameworks Next.js. Next.js bringt von Hause aus eine perfekt funktionierende Bildoptimierung mit. Diese wird von unseren Full-Stack-Developern angepasst und ganz individuell auf das jeweilige Webprojekt konfiguriert. Bilder, egal in welchem Format, werden dafür zunächst ins CMS geladen und auf dem Server gerendert, d. h. komprimiert und umgewandelt und dann dort in verschiedenen benötigten Auflösungen als WebP im ‚srcset‘ hinterlegt. Beim Aufruf der Seite wird nun das passende Format abgerufen und angezeigt. Dieser WebP-Workflow gehört als integrierte automatische Bildoptimierung innerhalb der professionellen Webentwicklung zum Prozess der automatisierten Bildoptimierung. Er erleichtert Webmastern die Arbeit, indem er automatisch die passende Ausspielung aller Bilder auf allen digitalen Geräten garantiert.

Automatische Bildoptimierung zeigt eine Illustration des Serverworklows und wie verschiedene Formate mit WebP komprimiert werden.

Warum du die integrierte automatische Bildoptimierung lieben wirst

Du hast nicht die Ressourcen, dich ständig um die Bilder auf deiner Website zu kümmern? Manchmal muss es eben schnell gehen, und häufig liegen dann die Bilder als png-, jpg- oder sonstige Dateien in den unterschiedlichsten Dateigrößen, Auflösungen und Proportionen vor. Diese auf die jeweils passende Größe zu optimieren, erfordert genaue und präzise manuelle Arbeit. Wenn zudem die Bilder noch viel zu groß oder nicht richtig formatiert sind, erschwert dies den Prozess noch zusätzlich.

Im Rahmen der Backend-Webentwicklung empfehlen wir deshalb die Integration der automatischen Bildoptimierung über Next.js. Du lädst nur noch die Bilder im Backend hoch und unsere Konfiguration des Jamstack-Frameworks spielt diese passend, automatisch und verlustfrei aus.