Reduzieren Sie die Dateigröße, ohne an Qualität zu verlieren

11

Ich möchte Dateien in Photoshop speichern, sie aber so klein wie möglich halten.

Ich verwende Save for Web (und Geräte) und speichere als JPEG. Hier sind die Einstellungen, die ich verwendet habe:

die Einstellungen

Ich möchte die Qualitätseinstellungen wirklich nicht verringern, da ich Text verwende und manchmal Artefakte sehe, wenn die Einstellung zu niedrig ist.

Dies erzeugt Dateigrößen von mehreren hundert Kilobyte, abhängig von der Bildgröße. Obwohl dies kein großes Problem ist, werden diese Bilder für das Web verwendet und kleiner ist besser. Was sind Techniken ohne Qualitätsminderung, um die Dateigröße zu reduzieren?

Aktualisieren:

Weitere Informationen finden Sie hier:

Viele der Bilder, die ich verwende und erstelle, werden per E-Mail gesendet. Dies schränkt meine Möglichkeiten zum Platzieren von Text mithilfe von HTML und CSS über dem Bild erheblich ein.

Außerdem verwende ich eine Vielzahl von Schriftarten. Einige könnte ich mit CSS für das Web verwenden, @font-faceaber Sie können auf große Dateien stoßen und in einigen Fällen können Sie die Schriftart nicht legal ins Web hochladen. Ich könnte einen Dienst wie Typekit verwenden, aber auch hier sind viele von mir verwendete Schriftarten mit Typekit nicht verfügbar.

Hier ist ein Beispielbild:

Beispielbild

adobe-photoshop images image-quality save L84
quelle
1
Darauf gibt es mehrere Antworten - ein Beispiel für die Art von Bildern, über die Sie sprechen, würde helfen.
e100
1
@ e100 - Ich aktualisiere die Frage, um ein Beispielbild bereitzustellen und weitere Informationen hinzuzufügen.
L84
Ähnliche Frage: Grafikdesign.stackexchange.com/q/3429/10419
Kornel
Wenn Sie die Website-Seite steuern, prüfen Sie die Code- / Build-Optionen. Ich bin der Designer eines professionellen Webteams und wir liefern Vollbildvideos ohne großen Erfolg auf Desktop / Handy. Bilder, sofern nicht unbedingt erforderlich, sind Vektor-SVG und werden als Schriftart geladen. Reduziert die Anzahl der Seiten-KB drastisch. Heldenbanner mit einer Breite von 2000 Pixel sind zu 85% JPG und die Jungs laden sie im Hintergrund vor. Das Endbenutzergerät wird erkannt und relative Versionen der Datei geliefert (dh kleinere Version für Mobilgeräte). Wenn der Benutzer die Startseite passiert, wird der Bildschirm sofort geladen. Und wir streben eine Homepage von maximal 2 Sekunden an.
Applefanboy

Antworten:

15

Die Wahl der besten Komprimierungsmethode hängt von Ihrem Bildinhalt ab. Wenn Sie versuchen, Bilder mit vielen Farben und glatten Übergängen zwischen ihnen zu speichern, wählen Sie lieber JPEG. Andernfalls sollten Sie stattdessen PNG ausprobieren, wenn Sie ein lineares Textbild mit einigen Farben haben.

Spezifisches Komprimierungsschema, Parameter, Farbreduzierung usw. hängen vom speziellen Fall ab. Es gibt einige Bilder, die Sie sicher speichern können, wenn der JPEG-Komprimierungs- "Schieberegler" auf 30 oder 40 eingestellt ist, ohne dass Artefakte sichtbar werden. Einige andere erfordern Einstellungen 80 oder mehr. Dein Auge sollte der Richter sein.

Wenn wir über JPEG-Komprimierung sprechen, zögern Sie nicht, z. B. die Option "Progressiv" zu verwenden oder "Unschärfe" auf einen Wert ungleich Null zu setzen (subtile Unschärfe kann schwerwiegende Komprimierungsartefakte maskieren).

Im Fall von PNG sollten Sie versuchen, die Menge der verwendeten Farben so weit wie möglich zu reduzieren (verwenden Sie dafür PNG-8). Wenn eine gewisse "Glättung" erforderlich ist, probieren Sie verschiedene Dithering-Algorithmen aus.

Hier einige Beispiele:

JPEG, progressiv, Qualität: 40, Unschärfe: 0,18 JPEG, optimiert, Qualität: 60, Unschärfe: 0 JPEG, progressiv, Qualität: 60, Unschärfe: 0 PNG-8, Dithering: diffus, 256 Farben

Von links nach rechts, von oben nach unten, ihre Parameter sind:

  1. JPEG, progressiv, Qualität: 40, Unschärfe: 0,18, Größe: 9 672 Byte
  2. JPEG, Optimiert, Qualität: 60, Unschärfe: 0, Größe: 16 898 Byte
  3. JPEG, Progressive, Qualität: 60, Unschärfe: 0, Größe: 11 104 Byte
  4. PNG-8, Dithering: diffus, Farben: 256, Größe: 4 528 Bytes

Vergleichen Sie sie visuell und sehen Sie sich dann die jeweiligen Datengrößen genau an. Das erste Paar ist ungefähr 9,7 kB gegenüber 16,9 kB. Zweitens ist 11,1 kB gegenüber 4,5 kB. All das durch (IMHO) vernachlässigbaren visuellen Unterschied.

thebodzio
quelle
Meine größte Sorge bezüglich der progressiven Option ist die Unterstützung von E-Mail-Clients. Ich habe meiner Frage weitere Informationen hinzugefügt, um dies zu erklären.
L84
1
Soweit ich das beurteilen kann, ist „progressiv“ ein Teil des JPEG-Standards und nicht etwas Exotisches, daher sollte die Unterstützung fast 100% betragen. Aber es ist "Ich denke", nicht "Ich weiß" :).
Thebodzio
Ich stimme zu und ich glaube, Sie haben Recht, ich hatte diese Frage bei Webmaster SE gestellt und im schlimmsten Fall werden die Bilder angezeigt, aber erst, wenn sie vollständig geladen sind.
L84
1
Genau so soll "progressiv" funktionieren: Es sollte nacheinander immer detailliertere Versionen des Bildes anzeigen, sobald mehr Daten verfügbar sind.
Thebodzio
Entschuldigung, ich meinte, es wird überhaupt nichts angezeigt, bis das Bild geladen wird und Scan für Scan geladen wird.
L84
10

Hier sind einige Optionen:

  • Verwenden Sie ein anderes Format als JPEG (PNG oder GIF). Die Ergebnisse in Bezug auf Dateigröße und Bildqualität hängen vom Inhalt Ihres Bildes ab. Jeder ist besser in bestimmten Arten von Inhalten
  • Verkleinern Sie das Bild in Bezug auf Pixel - dies hat einen sehr signifikanten Effekt und sollte auf jeden Fall berücksichtigt werden, wenn Sie die Kontrolle über das Gesamtlayout haben
  • Verwenden Sie nach Möglichkeit Nicht-Bildelemente, z. B. versuchen Sie, Text in Bildern durch HTML-Text zu ersetzen. Versuchen Sie, Farbblöcke durch HTML-Elemente zu ersetzen.

Wenn Sie die letzten beiden Punkte näher erläutern, sollten Sie versuchen, das Ausmaß der Bilder in Ihren Layouts als Ganzes zu minimieren, bevor Sie Zeit mit der Reduzierung der Dateigröße vorhandener Bilder verbringen.

e100
quelle
2

Ich werde versuchen, einige bisher unbeantwortete Fragen zu beantworten:

Viele der Bilder, die ich verwende und erstelle, werden per E-Mail gesendet. Dies schränkt meine Möglichkeiten zum Platzieren von Text mithilfe von HTML und CSS über dem Bild erheblich ein.

Sie können HTML-E-Mails senden (wie Newsletter erstellt werden). Mit HTML und Inline-CSS (aus Kompatibilitätsgründen). Die Bilder müssen sich auf einem Server befinden und Sie müssen die vollständige URL in die Stile / IMG-Tags einfügen. Hier ist eine Liste der Funktionen in verschiedenen E-Mail-Clients.

Außerdem verwende ich eine Vielzahl von Schriftarten. Einige könnte ich mit CSS @ font-face für das Web verwenden, aber Sie können auf große Dateien stoßen und in einigen Fällen können Sie die Schrift nicht legal ins Web hochladen.

Probieren Sie Google Webfonts aus , die mit Abstand beste Webfont-Quelle. Alles kostenlos zu benutzen. Ein anderes wäre Font Squirrel . (Es wird auch @ font-face verwendet).

Jannik Ruf
quelle
Danke für die Links. Ich habe einige Websites von Campaign Monitors durchsucht, aber die CSS-Seite nicht gesehen. Sehr nützliche Infos da.
L84
-1

Das können Sie auf keinen Fall tun. JPEG ist ein verlustbehaftetes Format. Es gibt immer einen Handel zwischen Qualität und Dateigröße.

wollen252
quelle
Andere Empfehlungen als die Verwendung von JPEG. Wie ist PNG?
L84
1
PNG ist verlustfrei, aber auch ziemlich groß. Wo benutzt du dieses Bild? Wenn es für das Web ist, ist es immer besser, den Text zu codieren.
Jannik Ruf
JPEG und GIF sind eine gute Wahl für die Webansicht (PNG wird selten verwendet). Aber es hängt viel davon ab, was Sie tun möchten: Hintergrund, Diashow, Miniaturansicht oder Symbol usw.
wollen252
Wenn es nur Text ohne Effekte ist (dh nur weißer Text auf schwarzem Hintergrund), ist Gif gut und sehr klein.
Jannik Ruf
4
Dies ist keine wirklich gute Antwort. Es gibt verschiedene Möglichkeiten, die Dateigröße zu reduzieren. Es ist falsch zu sagen, dass PNG im Web selten verwendet wird.
e100