JPEG-Optimierung für das Web - Ultimate Guide

Die Bildkomprimierung findet sich in jedem nativen Medienformat. Der Unterschied zwischen GIF, PNG und JPEG ist jedoch Wie Die Informationen werden komprimiert und auf dem Bildschirm angezeigt. Es gibt so viele Tipps, wie man großartige Bildmedien komponiert, die im Web veröffentlicht werden, und dennoch verstehen viele Designer einige Grundlagen nicht.

In diesem Handbuch möchte ich einige Ideen für die korrekte JPEG-Komprimierung vorstellen. Sie möchten Ihre Bilder optimieren, um die Ladezeiten von Webseiten zu reduzieren und dabei ein angemessenes Qualitätsniveau zu erreichen. Es geht darum, ein Gleichgewicht zwischen Dateigrößen und Bildschirmdarstellung zu finden. Für Designer gibt es keine perfekte Lösung. Das erfordert zunächst etwas Übung, aber wenn Sie die JPEG-Komprimierung verstehen, wird die Entwicklung von Websites in Zukunft viel einfacher.

Vermeiden Sie immer bei 100% sparen

Sie sollten Ihre JPEG-Bilder fast nie in 100% iger Qualität speichern. Dieser Wille nicht möglichst viel produzieren “optimiert” Bild. Es berechnet tatsächlich durch eine Optimierungsgrenzformel, die Ihre Dateigrößen exorbitant erhöht. Selbst verglichen mit einer Qualität von 90% oder 95% wird die Dateigröße erheblich verringert.

In den meisten Fällen wird empfohlen, Bilder zu speichern, deren Qualität unter 90% liegt. Wenn Sie das Dialogfeld "Für Web speichern" in Photoshop öffnen, werden Sie feststellen, dass sie voreingestellte Werte enthalten, aus denen Sie auswählen können. Ich habe die möglichen JPEG-Werte unten hinzugefügt - beachten Sie die inhärenten Namenskonventionen.

Niedrig - 10%
Mittel - 30%
Hoch - 60%
Sehr hoch - 80%
Maximal - 100%

Selbst in Adobe Photoshop wird eine Bildqualität von 60% als "hoch" angesehen. Viele Webentwickler versprechen, dass zwischen 50% und 70% ein sicherer Bereich ist.

Wie niedrig ist zu niedrig??

Die Werte, die Sie für die Optimierung auswählen, sind vollständig vom Projekt abhängig. Sie müssen sich überlegen, mit welchen Grafikarten die höchsten Dateigrößen ausgegeben werden. Diese müssen unbedingt komprimiert werden.

Ich würde sagen, dass Sie unter 30% die grundlegende Bildqualität wirklich abschneiden. Andere Designer werden 50% schwören “Grenze” den optimalen Wert zu verringern. Aber der beste Rat hier ist, einfach verschiedene Einstellungen auszuprobieren und zu sehen, was am besten aussieht! Mit einigen Teststudien, die JPEG-Bilder für das Web optimieren, können Sie nichts falsch machen.

Komprimierungsoptionen

Wir sollten zuerst die beiden Begriffe "Kompression" und "Qualität" klären, die zueinander invers sind. Das bedeutet, wenn Sie ein JPEG mit 40% Komprimierung speichern, erhalten Sie 60% Qualität (verglichen mit maximal 100% Qualität ohne Komprimierung)..

Dies sind die grundlegendsten Optionen, die genutzt werden können - und sollten beim Speichern für das Web ausreichen. Allgemeine Benutzer erhalten nicht viel tiefere Anpassungen. Subsampling beschäftigt sich mit komplizierteren Themen, wenn Sie RGB-Bilder in YCbCr (Luminance, Chroma Blue, Chroma Red) konvertieren..

(Bildquelle: Kara Monroe)

Das Leuchtdichte oder die Helligkeitseinstellung wird bei der JPEG-Komprimierung immer auf dem höchstmöglichen Wert gehalten. Mit diesem Helligkeitswert auf einem separaten Kanal können die einzelnen Farbwerte von Rot und Blau einfacher optimiert werden. Dies ist auch bekannt als Chroma-Unterabtastung. Designer, die daran interessiert sind, sich die Hände schmutzig zu machen, werden gerne mehr über diesen Kompressionsalgorithmus lesen. In diesem großartigen Blogbeitrag finden Sie Informationen zum Chroma-Sampling, das speziell auf JPEG-Bilder ausgerichtet ist.

(Bildquelle: Derek Hatfield)

Als interessante Randnotiz verwendet Adobe Photoshop nicht immer Subsampling für die Komprimierung. Bilder, die über das gespeichert wurden “Speichern Sie für Web” Das Dialogfeld verwendet nur Chroma-Unterabtastungen mit einem Qualitätswert von 50%.

Unterschiedliche Webmedien

Das Web ist auch voll mit verschiedenen Bildmedien. Sie können Fotos, Symbole, Schaltflächen, Abzeichen und jede Menge andere Grafiken erstellen. Es ist jedoch bemerkenswert, dass der Vergleich der Qualität zwischen einer Schaltfläche und einem Foto keinen Sinn macht.

Wenn Sie Fotos oder detaillierte Bilder verwenden, sollten Sie die Verknüpfung mit einer separaten, weniger komprimierten JPEG-Datei in Betracht ziehen. Dann können Sie Miniaturansichten auf Ihrer Site mit einer höheren Komprimierungsrate und wesentlich kleineren Dateigrößen einrichten. Der einzige Nachteil ist, dass Sie zwei Bildergruppen für eine Mediengalerie bereitstellen müssen. Beachten Sie die vielen verschiedenen Grafiken, die Sie auf einer Website genäht haben, und erwägen Sie Optimierungstechniken für jede einzelne Grafik.

Planen eines Grafikmodells

Sie möchten ein organisiertes Dateisystem haben, das leicht zu durchsuchen ist. Einige Webmaster entscheiden sich dafür, ihre Fotos an anderer Stelle im Internet zu hosten - wie Flickr oder Picasa. Sie möchten dennoch ein Komprimierungswerkzeug verwenden, um die Bildgröße zu reduzieren. Die Anzeige auf Ihrer Website ist jedoch unterschiedlich. Dies gilt insbesondere für den populären Aufstieg mobiler Geräte mit Zugang zum Internet.

Ich habe einen interessanten Artikel über JavaScript-JPEG-Kodierung gefunden, der in Ihrem Frontend-Code vorkommt. Qualitativ hochwertige Bildergalerien bieten nicht viel Nutzen, können jedoch die Ladezeiten für Ihre mobilen Besucher verkürzen. Es ist auch eine nützliche Technik, wenn Sie Bilder schnell verknüpfen oder Thumbnails neu beschneiden.

Ein weiteres ausgefallenes Tool zum Auschecken ist Yahoo! Smush.it. Es handelt sich um eine browserbasierte Web-App, mit der Sie ein Bild hochladen können. Smush.it entfernt alle unnötigen zusätzlichen Bytes, um die Dateigröße zu optimieren. Es ist 100% verlustfrei, was bedeutet, dass sich die Bildqualität überhaupt nicht verschlechtert. Und noch besser können Sie Batch-Uploads von direkten URLs durchführen, wenn Sie sie auf Ihrer Website oder einem Drittanbieter-Server gehostet haben.

Zusätzliche Tools

In Bezug auf die Bildmanipulation gibt es eine Menge Software, die Sie ausprobieren können. Alle zusätzlichen Bytes, die Sie für jede Dateigröße benötigen, sind von entscheidender Bedeutung. Es gibt nicht viel Software, aber die verfügbaren Optionen sind erstaunlich.

IrfanView

Mit dieser kostenlosen Software für Windows können Sie jeden Satz großer Bilder anzeigen und optimieren. Ich mag diese Software besonders, weil sie die Stapelkonvertierung von Bildern in mehreren Verzeichnissen unterstützt. Sie können dieselben Funktionen automatisch auf Hunderte von JPEG-Bildern anwenden.

Was noch besser ist, ist die Plugin-Unterstützung von Drittanbieter-Entwicklern. Ein solches Beispiel ist RIOT (Radical Image Optimization Tool). Dieses Plugin funktioniert für andere ähnliche Open-Source-Grafikeditoren wie GIMP. Es bietet eine Ansicht mit zwei Bildern, in der Sie die Kompressionsparameter für jedes Ihrer Bilder manuell anpassen können.

Die Software-Unterstützung ist wunderbar und die RIOT-Funktionen sind sehr einfach zu bedienen. Neben der Bildkomprimierung können Sie auch zusätzliche Metadaten wie EXIF und Adobe XMP entfernen. Diese zusätzlichen Daten können nur die Gesamtgröße Ihrer Dateien erhöhen und werden selten benötigt.

ImageOptim für Mac

Wenn Sie OS X verwenden und eine leistungsstarke Komprimierungs-App benötigen, suchen Sie nicht weiter. ImageOptim ist ein leistungsfähiges Werkzeug zum Komprimieren von Bildern für das Web - manchmal sogar besser als Photoshop.

Die gesamte Anwendung unterstützt die Drag-and-Drop-Funktion, sodass große Bildsätze problemlos optimiert werden können. Auf ähnliche Weise können Sie Befehle direkt im Terminal ausführen und Shell-Skripts einrichten. Weitere Informationen und technische Unterstützung finden Sie auf der Google-Codeseite.

Bei der neuesten stabilen Version 1.3.3 gab es einige kleinere Probleme beim Rendern von pixelierten JPEG-Bildern in Opera. Überprüfen Sie alle Ihre optimierten Bilder in den 4 wichtigsten Browsern - Chrome, Safari, Firefox und Opera (und möglicherweise auch IE). Wenn etwas schief aussieht, können Sie versuchen, ImageOptim 1.3.0 herunterzuladen, das etwas sauberer konvertiert.

Hilfreiche Ressourcen

JPEG 101: Ein Crash-Kurs-Leitfaden zu JPEG
Rechte Komprimierungseinstellungen zum Speichern von JPG-Bildern für WordPress
Clevere JPEG-Optimierungstechniken
So optimieren Sie JPEG-Bilder für Websites
Alles, was Sie über die Bildkomprimierung wissen müssen

Fazit

Die JPEG-Komprimierung ist schwierig, da Sie die richtige Balance zwischen Qualität und Substanz finden müssen. Während unsere modernen Internet-Verbindungsgeschwindigkeiten zunehmen, besteht immer noch die Notwendigkeit, die Größe von Webseiten zu reduzieren. Mit neuen Frameworks wie jQuery und Typekit können hunderte zusätzlicher Kilobytes erreicht werden, selbst bei einem optimierten Design.

Ich muss immer noch Adobe Photoshop als meine erste Bildbearbeitungssoftware empfehlen. Es gibt andere Beispiele, die möglicherweise besser für den JPEG-Optimierungsprozess sind. Webdesigner kommen jedoch mit noch weniger bekannten Open-Source-Lösungen zurecht. Wenn Sie ähnliche Tricks oder Ideen zur JPEG-Komprimierung haben, teilen Sie uns diese bitte im Post-Diskussionsbereich mit.