Online-Bildgrößenänderung und -optimierung

Wenn Sie über eine Sammlung toller Bilder verfügen, möchten Sie diese sicher gerne mit Ihren Kunden auf Ihrer Website teilen. Sie können eine ansprechende Diashow erstellen, Galerien anlegen oder die Bilder einfach in eine einzelne Seite oder einen Blogbeitrag einfügen. Unabhängig von Ihrer Wahl stoßen Sie bei der Verwendung eines einfachen Bildbearbeitungsprogramms auf ein bekanntes Problem: die Bildskalierung.

Im Folgenden finden Sie einige Empfehlungen zur Bildgrößenänderung, die Ihnen hilfreich sein werden.

Passen Sie die Größe an Ihre Inhalte an.

Passen Sie die Größe Ihrer Bilder stets an die Breite des Inhalts an. Wenn Ihr Inhaltsbereich beispielsweise auf 650 Pixel Breite begrenzt ist, müssen Sie Ihr Bild nicht größer als 650 Pixel skalieren, da Ihre Seite nur bis zu 650 Pixel anzeigt. Ist das Bild kleiner oder größer als der Container, verschlechtert sich die Darstellungsqualität.

Bildauflösung für das Web anpassen

Auf keiner Website wird die Angabe „pro Zoll“ verwendet. PPI (Pixel pro Zoll) und DPI (Dots pro Zoll) spielen keine Rolle, wenn Sie Bilder bearbeiten oder deren Größe ändern, beispielsweise für E-Mails, Blogs oder soziale Medien. Außer beim Drucken und der Bildschirmdarstellung können Sie keine Unterschiede in Bildeigenschaften oder -qualität feststellen.

Dies gilt insbesondere für PDFs. Vermeiden Sie es, PDFs mit Bildern in einer Auflösung von über 72 dpi für die Webdarstellung bereitzustellen. In diesem Fall kann der ImageRecycle PDF Optimizer helfen: Optimieren Sie ein PDF mit 300-dpi-Bildern und sparen Sie so 98 % der Dateigröße bei optimaler Lesbarkeit im Web.

Die beste JPG-Exportqualität mit ImageRecycle

Für die Verwendung mit Photoshop wird empfohlen, JPEG-Bilder im Web mit maximal 20 % Komprimierung zu speichern. Sie können auch verschiedene JPEG-Einstellungen testen, um die für Sie beste zu finden. Die Wahl der Komprimierung ist eine Frage des richtigen Verhältnisses zwischen Dateigröße und Qualität.

Mit dem Bildoptimierungsalgorithmus ImageRecycle verläuft der Prozess nun ganz anders. ImageRecycle ermittelt das aktuelle Komprimierungsverhältnis des Bildes und optimiert es entsprechend. Da die Komprimierung nicht auf das gesamte Bild angewendet wird, werden Sie vom folgenden Test begeistert sein.

Zu beachten ist: Je weniger das Originalbild komprimiert wird, desto besser sind Optimierung und Dateigröße.

Im folgenden Beispiel habe ich vier JPG-Bilder mit Photoshop in den Qualitätsstufen 60 %, 80 %, 90 % und 100 % exportiert.
Anschließend habe ich die Bilder mit ImageRecycle . Hier ist das Ergebnis der Größenänderung. Die Qualität der Bilder mit 90 % und 100 % ist etwas besser als die der beiden anderen. Die Lehre daraus: Exportieren Sie Ihre JPG-Bilder so unkomprimiert wie möglich – ImageRecycle erledigt den Rest!

Optimieren Sie die endgültigen Bilder

Je nach Website können dieselben Bilder auf verschiedenen Seiten in unterschiedlichen Größen angezeigt werden. Dies ist typisch für Online-Shops mit Slidern, Produktlisten und Produktdetails.
Die Größenanpassung erfolgt üblicherweise über eine Online-PHP-Bibliothek wie GD. Achten Sie auf die Qualität und Dateigröße Ihrer Originalbilder im Vergleich zu den finalen Bildern. Verlassen Sie sich nicht blind auf Online-Bibliotheken oder Cache-Generatoren, da dies zu Qualitäts- und Größenproblemen führen kann. Wenn Ihre Originalbilder bereits optimiert sind (durch Feinabstimmung von Qualität, Farben und Komprimierung), um Bandbreite und Ladezeiten zu optimieren, können diese Optimierungen durch manche Web-Erweiterungen zur Größenanpassung verloren gehen.

Die Lösung:

• Optimieren Sie das Bild, das im Browser Ihres Endkunden angezeigt wird. Sie können dies manuell für jedes Bild und jede Größe durchführen oder unsere API bzw. CMS-Erweiterung von ImageRecycle verwenden, um den Ordner mit Ihren endgültigen Bildern auszuwählen. Anschließend können Sie die automatische Optimierung ausführen.
• Nutzen Sie unseren Größenänderungs-Tool für Originalbilder. So sparen Sie Speicherplatz auf dem Server, bearbeiten Ihre Bilder schneller und benötigen in der Regel keine Bilder mit einer Breite von mehr als 1600 Pixeln für die endgültige Anzeige.

Was kommt als Nächstes: HTML5 & die<picture> Element

Responsive Design-Techniken, einschließlich Media Queries, ermöglichen es Webdesignern, das Layout einer Website an eine Vielzahl von Geräten – von Desktop-Computern bis hin zu Smartphones – anzupassen und dabei stets eine scharfe Darstellung zu gewährleisten. Das Problem liegt hier nicht in der Anzeige selbst, sondern in der Performance: Das Desktop-Bild wird auf Smartphones und Tablets angezeigt und geladen.

Der<picture> Das HTML5-Element versucht, dieses Problem zu lösen. Der Vorteil nativ optimierter Bildressourcen liegt in der Ladezeit – besonders wichtig für Nutzer mit langsameren mobilen Internetverbindungen.<picture> Das Element ermöglicht eine dynamische Größenänderung, indem es dem Browser lediglich eine HTML-Anweisung gibt.

Codeauszug:

Aktuell besteht die Einschränkung darin, dass für die korrekte Funktion eine sehr aktuelle Chrome-Version (39) und etwas JavaScript erforderlich sind. In naher Zukunft, wenn diese Technologie mit einem Bildoptimierer kombiniert wird, können wir mit optimalen Ladezeiten für die Website rechnen.