Ich habe eine vollfarbige PSD-Bilddatei, die ich in ein Format konvertieren möchte, das einfach im Internet geteilt werden kann.
Die aktuelle Größe der PSD liegt bei etwa 7 MB.
Ich möchte die Dateigröße auf etwa 70 KB reduzieren, ohne an Qualität zu verlieren.
Was ist das beste Format und die beste Methode, um dies zu tun?
Ich habe versucht, diese Dateigrößenreduzierung mit Photoshop-Tools zu erreichen. Das Speichern als JPEG und das Einstellen der Qualität auf highgibt mir eine Datei von 110 KB
Das ist zu groß und führt bei einer niedrigeren Qualitätsstufe zu inakzeptablen Ergebnissen.
Ich weiß, dass es viele andere Methoden gibt, um die Dateigröße zu reduzieren. Können Sie Ihre Erfahrungen zu diesem Thema teilen?
Experimentieren Sie neben dem Ausprobieren verschiedener Qualitätseinstellungen auch mit stärkerer Komprimierung und der „Blur“-Einstellung für JPEGs.
Probieren Sie auch zusätzliche Optimierungstools wie Image Optim, ImageAlpha, TinyPNG oder JPEGmini aus .
Ist es ein Foto oder eher ein Vektorbild wie ein Schema?
Im ersten Fall ist JPEG die beste Wahl: PNG-Bilder wären oft größer. Dies hindert Sie nicht daran, PNG in der Vorschau auszuprobieren und zu sehen, wie es sich auf die Qualität und Größe auswirkt, aber in den meisten Fällen werden Sie enttäuscht sein.
Beschränken Sie sich bei der Verwendung von JPEG nicht auf die Komprimierungsstufen aus der Liste (z. B. 20, 40, 60, 80 und 100). In einigen Fällen führte die Auswahl von beispielsweise 75 statt 80 zu einem kleineren Bild, während der Qualitätsabfall praktisch nicht wahrnehmbar war.
Im zweiten Fall führt JPEG normalerweise zu einem erheblichen Qualitätsverlust, PNG jedoch nicht.
Wenn das Bild keinen Verlauf hat, versuchen Sie es mit PNG-8 anstelle des standardmäßigen PNG-24 und experimentieren Sie mit der Anzahl der Farben, um zu sehen, wie sich dies sowohl auf die Größe als auch auf die Qualität des Bildes auswirkt.
Beispielsweise ist es nicht ungewöhnlich, dass PNG-8 mit 16 Farben im Vergleich zu PNG-8 mit 32 Farben oder mehr oder im Vergleich zu PNG-24 viel kleinere Dateien erzeugt, während der Qualitätsverlust kaum wahrnehmbar ist.
Der Dialog, der angezeigt wird, wenn Sie auf Datei › Für Web und Geräte speichern klicken , ermutigt zum Experimentieren, indem er Ihnen eine schnelle Vorschau verschiedener Einstellungen ermöglicht ; Denken Sie auch daran, die Registerkarten „2-auf“ und „4-auf“ in der oberen linken Ecke dieses Dialogfelds zu verwenden.
Erinnern Sie sich schließlich an die goldenen Regeln eines Webdesigners:
Fügen Sie niemals Text in Bilder ein. Es besteht keine Notwendigkeit, Benutzerbandbreite zu verschwenden, wenn Sie einfach Text in HTML einfügen können, ohne andere desaströse Folgen des Einfügens von Text in Bilder (wie z. B. das Töten von SEO, automatischer Übersetzung, Zugänglichkeit usw.)
Überlegen Sie zweimal, ob das Bild wirklich nützlich für Ihre Benutzer ist. Bereichert es den Inhalt oder fügt es nur mehr visuelle Unordnung hinzu? Könnte es nicht durch die von HTML 5 und CSS 3 bereitgestellten Elemente ersetzt werden?
Erstellen Sie niemals Bilder, die immer kleiner als ihre tatsächliche Größe angezeigt würden. Wenn die Miniaturansichten der Produkte einer E-Commerce-Site 400 × 300 groß sind, verwenden Sie nicht die 1 200 × 900-großen Fotos in voller Größe, es sei denn, Sie möchten wirklich die Bandbreite Ihres Servers und Ihrer Clients verbrauchen.
Wenn es sich nicht um ein fotorealistisches Bild handelt und/oder eine begrenzte Farbpalette hat, könnte Photoshop Save For Web im PNG-8-Format die beste Option sein. Hier können Sie die Anzahl der Farben (2-256) festlegen, je weniger Farben desto kleiner die Datei. Sie können verschiedene Werte für die Anzahl der Farben eingeben und die Auswirkungen auf das Bild (in der Vorschau) und die resultierende Dateigröße sehen.
Vielleicht möchten Sie sogar zurückgehen und Ihr Bild überarbeiten, um mit weniger Farben zu arbeiten. Ich versuche oft von Anfang an, Webgrafiken mit weniger Farben gut aussehen zu lassen, um kleine PNG-8-Dateien zu erstellen.
Ich habe kürzlich hier gelesen , dass Sie bei JPG-Komprimierung 31 mit doppelten Abmessungen speichern können, die Sie benötigen, und es dann auf Ihrer Webseite mit halben Abmessungen anzeigen können, und es wird gut aussehen. Wenn Sie also möchten, dass Ihr Foto mit 200 x 200 Pixel angezeigt wird, speichern Sie es mit 400 x 400 Pixel und einer Qualität von 31 und stellen Sie Ihre Bildgröße in Ihrem CSS oder HTML auf 200 x 200 Pixel ein. Dadurch sieht das Bild so aus, als wäre es in hoher Qualität gespeichert worden, aber mit einer viel kleineren Dateigröße UND es sieht auf Retina-Displays gut aus. Das würde für Fotos gut funktionieren.
Für Bilder mit großen Bereichen mit Volltonfarben würde ich entweder als PNG-8 speichern oder, wenn das Bild einen Farbverlauf oder viele Farben hat, als PNG-24. Oder wenn Sie es in Illustrator erstellt haben, können Sie es als SVG speichern, abhängig von Ihrer Zielgruppe (und ihren Browsern).
Sie können die Bildabmessungen , dh Pixel, ändern, während Sie die Auflösung beibehalten . Dadurch wird die Dateigröße definitiv reduziert, während die Qualität des Fotos erhalten bleibt.
Scott