Reduzieren Sie die Dateigröße ohne Qualitätsverlust

Die Wahl der besten Komprimierungsmethode hängt von Ihrem Bildinhalt ab. Wenn Sie versuchen, Bilder mit vielen Farben und sanften Übergängen zwischen ihnen zu speichern, wählen Sie eher JPEG. Andernfalls sollten Sie stattdessen PNG ausprobieren, wenn Sie Lineart, Text oder Bild mit ein paar Farben haben.

Spezifische Komprimierungsschemata, Parameter, Farbreduktion usw. hängen vom jeweiligen Fall ab. Es gibt einige Bilder, die Sie sicher speichern können, wenn der "Schieberegler" für die JPEG-Komprimierung auf 30 oder 40 eingestellt ist, ohne dass Artefakte sichtbar werden. Einige andere erfordern Einstellungen von 80 oder mehr. Ihr 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 (feine 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 etwas "Glättung" erforderlich ist, probieren Sie verschiedene Dithering-Algorithmen aus.

Hier sind ein paar Beispiele:

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 Bytes
2. JPEG, Optimiert, Qualität: 60, Unschärfe: 0, Größe: 16 898 Bytes
3. JPEG, Progressiv, Qualität: 60, Unschärfe: 0, Größe: 11.104 Bytes
4. PNG-8, Dithering: diffus, Farben: 256, Größe: 4.528 Bytes

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

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 bei bestimmten Arten von Inhalten besser
• Verkleinern Sie das Bild in Pixeln – dies hat einen sehr erheblichen Effekt und sollte unbedingt berücksichtigt werden, wenn Sie die Kontrolle über das Gesamtlayout haben
• Verwenden Sie nach Möglichkeit Nicht-Bildelemente, versuchen Sie zB, Text in Bildern durch HTML-Text zu ersetzen; Versuchen Sie, Farbblöcke durch HTML-Elemente zu ersetzen.

Um die letzten beiden Punkte zu erweitern, sollten Sie versuchen, den Umfang der Bilder in Ihren Layouts als Ganzes zu minimieren, bevor Sie Zeit damit verbringen, die Dateigröße vorhandener Bilder zu reduzieren.

Ich werde versuchen, einige bisher unbeantwortete Fragen zu beantworten:

Viele der Bilder, die ich verwende und erstelle, werden per E-Mail verschickt. Dies schränkt meine Möglichkeiten zum Platzieren von Text mit 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 Stylings/img-Tags einfügen. Hier ist eine Liste dessen, was in verschiedenen E-Mail-Clients funktioniert.

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

Probieren Sie Google Webfonts aus, die mit Abstand beste Quelle für Webfonts. Alles kostenlos nutzbar. Ein anderes wäre Font Squirrel . (Es verwendet auch @font-face).

Es gibt keine Möglichkeit, dies zu tun. JPEG ist ein verlustbehaftetes Format. Es gibt immer einen Kompromiss zwischen Qualität und Dateigröße.