▷ So komprimieren Sie ein BILD im PHOTOSHOP

Eine Website basiert nicht nur auf dem unkontrollierten Hochladen von Inhalten, Sie müssen sich um die Struktur des Webs kümmern, einschließlich aller Elemente, die wir darin hosten. Es muss berücksichtigt werden, dass der Zugriff über Internetverbindungen erfolgt und dass es zwar vielerorts hohe Geschwindigkeiten gibt, an anderen jedoch noch etwas verzögert. All dies, ohne die Bedeutung des mobilen Themas und die Kosten für Megabyte zu berücksichtigen. Aus diesem Grund ist das Komprimieren von Bildern ohne Verlust der Photoshop-Qualität eine sehr gefragte Aufgabe von Entwicklern, die im Interesse der Benutzer denken.

Was wir nicht tun sollten, ist, unsere Website in einen langsamen Raum zu verwandeln, den die Leute nicht mehr betreten möchten, was wir vermeiden können, wenn wir verschiedene Elemente berücksichtigen und lernen, Bilder in Photoshop zu komprimieren. Eine davon und sehr wichtig ist das Hochladen von Bildern. Wenn Sie eine Website mit vielen visuellen Inhalten haben, müssen Sie sich sowohl innen als auch außen darum kümmern, indem Sie Photoshop-Bilder komprimieren und die Seite viel schneller machen.

Die Geschwindigkeit unserer Website ist für die Benutzererfahrung von entscheidender Bedeutung, da es nicht dasselbe ist, eine schnelle Seite aufzurufen, die unsere Verbindung zu einer Website nicht beeinträchtigt, auf der alle Objekte, die wir sehen, sehr langsam geladen werden. Um die Bilder zu sehen, müssen sie außerdem auf den Server heruntergeladen werden. Je höher das Volumen, desto länger dauert das Laden und der Benutzer wird wahrscheinlich verzweifeln und gehen. Daher ist es wichtig, Bilder in Photoshop zu bearbeiten und unsere Website oder einfach unseren Platz zu verbessern, indem Sie wissen, wie man Bilder in Photoshop komprimiert.

Wenn Sie sehr umfangreiche Bilder hochladen, wird Ihre Seite langsam und die Benutzer werden müde und gehen. Wenn Sie vermeiden möchten, dass Besuche verloren gehen, kümmern Sie sich um alles, was Sie hochladen, und erfahren Sie, wie Sie ein Bild in Photosho komprimieren, um seine Größe zu reduzieren.

1. Arten von Bildformaten in Photoshop

Um über Bildoptimierung zu sprechen, müssen wir unterscheiden, welche Art von Bildformat wir haben und welches für uns am besten geeignet ist.

JPEG.webp-FormatFür die allgemeine Verwendung in der Fotografie ist es das Standardformat, das mit guten Qualitätsergebnissen verwendet wird. Unterstützt 24-Bit-Farbe.

PNG-8-FormatEs ist die Alternative zu GIF.webp, jedoch ohne Animationen und kann bis zu 256 Farben darstellen. Seine Komprimierung für das Web ist eine der am besten geeigneten und ermöglicht eine gute Qualität bei reduzierten Größen.

PNG-24-FormatEs ist eine gute Option, qualitativ hochwertige Bilder wie JPEG.webp zu exportieren. Diese Art der Erweiterung ist praktisch, wenn wir ein Bild haben, das Transparenz enthält. Es zeigt auch bis zu 16 Millionen Farben an, da es 24-Bit-Farben unterstützt.

GIF.webp-FormatEs ist das Format für Animationen schlechthin. Stellt bis zu 256 Farben in Formen mit großen Mengen von Volltonfarbe, Linien oder Text dar.

Für dieses Tutorial werden wir zwei der nützlichsten und am häufigsten verwendeten Formate zum Hochladen von Bildern ins Web auswählen: JPEG.webp und PNG-8.

2. So komprimieren Sie ein Bild in Photoshop

Wenn wir in Photoshop in einem Arbeitsbereich arbeiten, tun wir dies nach bestimmten Parametern je nach Bild oder allgemeiner Natur. Einer davon ist die Größe, die Proportionen des Bildes, mit dem wir arbeiten. Die Größe eines Bildes entspricht der Anzahl der Pixel, die es vertikal und horizontal enthält, woraus sich die Größe des Bildes ergibt.

Was wir Auflösung nennen, bedeutet die Anzahl der Informationen in einem bestimmten Raum, die als Pixel pro Zoll oder dpi bezeichnet wird. Dies bedeutet, dass unsere Auflösung umso höher ist, je höher die Anzahl der Pixel pro Zoll ist.

Nachdem beide Aspekte unterschieden wurden, ist zu beachten, dass zwei Bilder die gleiche Größe, aber unterschiedliche Auflösung und Proportionen haben können. Wenn es sich um Bilder für das Web handelt, wird empfohlen, die Größen in Pixelgröße zu behandeln. Um darauf zuzugreifen, gehen Sie zu Bild / Bildgröße oder drücken Sie die folgende Kombination.

Strg + Alt + I

NotizDie Option Bild neu berechnen ermöglicht es uns, die Größe zu ändern, ohne die Auflösung zu ändern. Wählen Sie die für Sie am besten geeignete Option aus.

3. Photoshop-Farbprofil ändern

Der Farbraum, in dem wir arbeiten, beeinflusst auch die endgültige Datei. Zu erwähnen ist der Unterschied zwischen sRGB- und RGB-Raum. Das Adobe RGB-System wurde 1998 vom Unternehmen eingeführt und umfasst ein viel breiteres Farbspektrum als der sRGB-Raum. Das bedeutet nicht, dass es schlimmer ist, sondern dass sie sich anderen Zielen widmen.

Das RGB-System liegt mit seinem Spektrum näher am CMYK, das sich an der Druckwelt orientiert. Obwohl es mehr Farben gibt, ist sRGB der Standard, der digital in Geräten verbreitet wird, seien es Mobiltelefone, Monitore oder andere digitale Geräte. Wenn eines dieser Geräte auf RGB trifft, versucht es, die überschüssigen Farben zu komprimieren und erzeugt ein falsches sRGB mit schlechteren Ergebnissen.

Schritt 1
Daher wird empfohlen, die Fotos, den Arbeitsbereich in Photoshop aufzunehmen oder mit diesem System zu optimieren, um die Farbkompatibilität zu verbessern. Um das Arbeitsfarbprofil zu ändern, gehen Sie zu Ihrem Bearbeiten-Menü und wählen Sie In Profil konvertieren.

Schritt 2
Im nächsten Fenster müssen Sie nur noch das gewünschte Profil auswählen, in diesem Fall sRGB.

4. Bild komprimieren, ohne Photoshop-Qualität zu verlieren

Das JPG.webp-Format ist der am häufigsten verwendete Standard und bietet zwar eine Komprimierung, bietet jedoch nicht so viele bearbeitbare Parameter wie PNG. Wir können das endgültige Gewicht unseres Bildes variieren, indem wir die Größe unseres Fotos ändern oder beim Exportieren.

Schritt 1
Beim Speichern als JPEG.webp sehen wir, dass wir zwei Möglichkeiten haben, einerseits die Bildoptionen (Qualität) und andererseits die Formatoptionen zu konfigurieren. Gehen Sie dazu in das Menü Datei / Speichern unter oder die folgende Kombination und wählen Sie das JPEG.webp-Format aus.

Umschalt + Strg + S

Schritt 2
Diese Konfigurationsparameter erscheinen im nächsten Fenster. Mal sehen, was jeder bedeutet.

BildoptionenHier müssen wir die endgültige Qualität des Bildes auswählen. Es ist offensichtlich, dass je höher die Qualität, desto größer die Dateigröße, um zu sehen, was es schließlich einnehmen wird, wenn wir auf Vorschau klicken. Verschieben Sie den Balken, um diese Werte ändern zu können.

Wenn ein Foto in Postergröße gedruckt werden soll, müssen wir eine viel höhere Qualität auswählen als bei einem Bild für das Internet. Denken Sie daran, dass je größer das Bild ist, desto mehr Ressourcen werden benötigt, um es über das Internet zu laden.

FormatoptionenHier finden wir verschiedene Alternativen, um unserem Bild das endgültige Format zu geben. Am meisten empfohlen wird die Standard-Baseline, da sie normalerweise am kompatibelsten ist.

• Grundlinie ("Standard"). Es verwendet ein Format, das von den meisten Webbrowsern und Programmen erkannt wird. Derzeit geben die neuesten Programme normalerweise keine Inkompatibilitäten an.

• Optimierte Grundlinie. Dieses Format erstellt eine Bilddatei, die optimierte Farben enthält, wodurch Sie eine kleinere Größe erhalten.

• Progressiv. Mit dieser Option werden verschiedene Versionen angezeigt, die beim Herunterladen immer detaillierter werden. Es ist der Benutzer, der entscheidet, wie viele erstellt werden. Es ist ein Format, das verwendet wurde und häufig verwendet wird, wenn wir zu langsamen Verbindungen gehen, die das Laden von Sweep-Sweeps erfordern.

NotizEs sollte erwähnt werden, dass nicht alle Browser progressive oder optimierte JPEG.webp-Bilder erkennen oder unterstützen.

5. Komprimieren Sie PNG-Bilder in Photoshop

Schritt 1
Um als PNG zu exportieren, müssen wir den gleichen ersten Schritt wie bei den anderen Formaten machen, gehen Sie zu Datei Menü / Speichern unter und wählen Sie in diesem Fall PNG.

Schritt 2
Nun sehen Sie im Speicherfenster, dass verschiedene Optionen angezeigt werden.

KompressionWir können die gewünschte Komprimierungsart auswählen oder keine sagen, wenn sie nicht angewendet werden soll. Je nach Auswahl wird die Ladegeschwindigkeit erhöht oder verringert.

WebenDiese Option ist wichtig, insbesondere wenn wir über Webplattformen sprechen. Sehen wir uns den Unterschied an:

• Weder. Mit dieser Option kann ein Bild nur angezeigt werden, wenn es vollständig geladen wurde, dh wenn wir eine langsame oder problematische Verbindung haben, wird das Bild erst angezeigt, wenn es in der Internetübertragung geladen wird.

• Verflochten. Diese Option wird eher für Webdienste empfohlen, da beim Laden reduzierte Versionen des Bilds angezeigt werden. Dies trägt dazu bei, dass der Download-Prozess kleiner wird und der Benutzer weiß, dass das Bild heruntergeladen wird.

6. JPG.webp-Bilder für Photoshop-Web speichern

Schritt 1
Eine der vorteilhaftesten Optionen, die wir in Photoshop zur Bildoptimierung haben, ist Als Web gespeichert, mit dem wir verschiedene Parameter manuell anpassen können. Diese Speicherung ist sehr nützlich für Bilder, die für das Hochladen im Internet bestimmt sind, und ermöglicht qualitativ hochwertige Bilder, jedoch mit reduzierter Größe. Dazu gehen wir File / Save for Web oder machen die folgende Kombination.

Alt + Umschalt + Strg + S

Schritt 2
Wenn wir JPEG.webp auswählen möchten, haben wir diese Einstellungen.

BildqualitätWählen Sie Ihre bevorzugte Bildqualität von Niedrig bis Maximum oder mit den Werten rechts. Sie können die Größenvariation unter dem Bild links sehen.

ProgressivDas Bild wird nach und nach geladen, das heißt, wir gehen von der Anzeige in niedriger Auflösung zur echten über.

InterlacedZeigt das Bild nur an, wenn es vollständig geladen ist.

HeiligenscheinWenn das Bild transparent ist, wählen Sie eine Halo-Farbe, die dem Hintergrund der Seite entspricht, auf der es eingebettet werden soll.

Farbprofil einbettenWählen Sie diese Option, um das ICC-Profil des Bildes beizubehalten. Einige Webbrowser verwenden es, um die Farbe zu korrigieren.

In sRGB umwandelnVerwenden Sie dieses Profil, um die Farbkompatibilität auf Geräten und Monitoren zu verbessern.

Sie haben weitere Optionen wie Vorschaumodus, Metadaten oder Größenänderung mit oder ohne Einschränkung.

7. PNG-Bilder für Web-Photoshop speichern

Schritt 1
Wie wir bereits wissen, um auf Saved for Web in PNG zugreifen zu können, müssen wir zu File / Save for Web gehen. Denken Sie daran, dass dieses Format für Bilder mit einem Webziel sehr gut geeignet ist, da das Ergebnis ein sehr gutes Verhältnis zwischen Qualität und Dateigewicht ergibt.

Schritt 2
Um als PNG zu exportieren, wählen Sie es aus dem Dropdown-Menü aus. Denken Sie daran, dass PNG 24 mehr Farbe bietet, sodass die Größen viel höher sind als die von PNG-8. Letzteres empfehlen wir für Standard-Webbilder. Das angezeigte Fenster ähnelt dem von JPEG.webp und zusätzlich zu den bereits im vorherigen Abschnitt gezeigten Optionen können wir auch wählen:

TransparenzHier können Sie die Transparenzart auswählen, die am besten zu Ihrem Bild passt oder diese entfernen und mit Halo eine bestimmte Farbe auswählen.

Fit für das WebMit diesem Parameter kann das Bild weiter komprimiert werden, je höher der Anpassungsprozentsatz, desto höher die Komprimierung, desto geringer die Qualität und desto kleiner die Größe.

8. Bilder für Photoshop-Web speichern

Schritt 1
Um eine automatische Komprimierung sowohl für PNG als auch für JPEG.webp durchführen zu können, öffnen wir das Speichern für Web in Datei / Speichern für Web oder die folgende Tastenkombination.

Alt + Umschalt + Strg + S

Schritt 2
Klicken Sie rechts neben der Option Voreinstellungen auf die angezeigte Menüregisterkarte und wählen Sie Auf Dateigröße optimieren.

Schritt 3
Jetzt müssen Sie nur noch die gewünschte Bildgröße auswählen und das Programm führt die Komprimierung automatisch für Sie durch. Sie können die Werte variieren, um unterschiedliche Ergebnisse zu erhalten.

Schritt 4
Sie können auch in das Fenster mit dem Namen 4 Kopien gehen und dort eine der Versionen auswählen, die Ihnen zur Verfügung gestellt werden, und diese speichern.

Schritt 5
Wenn Sie die Größe und Übertragungsgeschwindigkeit ändern möchten, klicken Sie auf die Werte unter dem Bild und wählen Sie diese automatisch aus.

Wie Sie sehen, gibt es je nach Verwendungszweck verschiedene Möglichkeiten, die Größe Ihrer Bilder zu reduzieren. Es gibt viele Parameter, die Sie berücksichtigen müssen, aber abhängig von der erforderlichen Stufe ist der eine oder der andere nützlicher, um zu wissen, wie Sie ein Photoshop-Bild komprimieren. Im folgenden Video zeigen wir Ihnen grafisch, wie Sie Bilder grundlegend und vollständig optimieren und komprimieren. Wenn Sie eine schnelle Komprimierung wünschen, ist die erste Methode gut für Sie und wenn Sie etwas komplexeres suchen, bei dem Sie alle Parameter bearbeiten können, ist Ihre Methode die zweite.