PNG oder JPG? 6 Tipps, die wir aus unseren Fehlern gelernt haben

Seite Ladezeiten sind wichtig. Amazon Insider schätzen, dass alle 100 ms in Latenz zu erhöhen Amazon grob% 1 Gewinn.

Einfach ausgedrückt: Die Besucher hassen langsamen Sites, so lassen Sie sie nicht warten.

Leider sind viele Websites, einschließlich dieser bis vor kurzem, nach ineffizient codierte Bilder verlangsamt. Beachten Sie, dass es viele andere Komponenten, um Ladezeiten und wenn Sie sich auf Ihre Website optimieren möchten, sollten Sie analysieren und zu verstehen alle. Aber heute machen wir nur das sich auf die Bilder konzentrieren.

Unser Fehler war sehr einfach: Wir verwendeten PNG für alles. Natürlich haben wir eine andere Kodierung Formaten wie JPG existiert realisiert, wir hatten einfach kein gutes Bewusstsein, wenn Sie sollte eine und das andere nicht zu verwenden. Bzzzzt.

1. PNG ist ein verlustfreies Format: das heißt, es komprimiert Bilder ohne irgendeine Qualität zu verlieren. Aber es ist nicht wirtschaftlich, die meisten Bilder in einem verlustfreien Format wie PNG, wenn der Verlust der Qualität mit JPG kaum wahrnehmbar für das menschliche Auge und ein JPG kann nur ein Viertel des Raumes ist zu kodieren.

   Zum Beispiel zuvor die Titelseite gewogen 701KB und war sichtlich langsam geladen. Ein großer Teil dieses Gewichts waren die PNG-Appliance Symbole. Batch-Konvertierung die Symbole, um JPG rasiert 400KB off, eine 60% Ermäßigung!

2. Gotcha! JPG unterstützt keine Transparenz (aber vergeuden Sie nicht Ihre Zeit damit, PNGs optimieren): Da wir hing zunächst auf das Symbol Transparenz in das Web-Design haben wir widerstanden, der die Änderung und versuchte die Optimierung der PNGs zuerst. Wir haben versucht, jedem Werkzeug, das wir finden konnten. Lossless-Optimierer wie pngcrush und optipng erst nachgegeben, eine 3-4% ige Abnahme der Dateigröße. Lossy-Kompressoren wie pngnq aufgeschlitzt die Dateigröße drastisch durch die Reduzierung der Farbtiefe, aber die Verschlechterung der Bildqualität war oft nicht akzeptabel. Einige Symbole (z. B. Drupal) sah OK, aber andere sah furchtbar aus.

   Bottom line: PNG-Optimierung ist ein schlechter Ersatz für JPG. Wir schlossen daraus, dass es besser sei, das Web-Design und Kompromisse, die als akzeptieren 3X Anstieg der Ladezeit für die Titelseite ändern.

3. Machen Sie keine Kompromisse bei Auflösung, Kompromisse bei der Kompression: nachdem wir mit der ersten Seite wandten wir unsere Aufmerksamkeit auf die Screenshots Abschnitt fertig. Um für die Größe des PNG codiert Screenshots haben wir bereits die Auflösung des Bildes reduziert hatte, aber das ist eine schlechte Bewegung zu kompensieren, weil es in dramatischen Rückgang der Lesbarkeit der screenshot Ergebnisse.

   Für die gleiche Größe haben wir entdeckt, könnte man eine viel höhere Auflösung JPG-Bild in hoher Qualität, so dass der Benutzer würde kaum bemerken, die Kompressions-Artefakte zu kodieren. Insgesamt würde dies eine viel schönere, mehr nutzbare screenshot ohne Erhöhung Anforderungen an die Bandbreite stellen.

   Lange Rede kurzer Sinn, ist die Auflösung sehr wichtig, die Wahrnehmung von Qualität und es ist eines der letzten Dinge, die Sie aufgeben wollen, wenn Sie reduzieren Anforderungen an die Bandbreite sind.

4. Keep PNG “Meister” für die Zukunft Bildbearbeitung: Ich kann nicht genug betonen. JPG ist ein verlustfreies Format, und jedes Mal, wenn Sie re-encode eine JPG die Qualität verschlechtert. Nach ein paar Pässe Kompressionsartefakte häufen sich und kann sich gut sichtbar für das menschliche Auge.

   Aus diesem Grund ist es am besten immer in der Nähe Meister der Ihre Bilder halten im PNG-Format, falls Sie Änderungen vornehmen wollen.

5. Als PNG besser als JPG und umgekehrt ist: manchmal hat man einfach nicht wollen, ein Bild mit JPG komprimieren. Wie ich bereits erwähnte, wenn Sie wirklich brauchen Transparenz JPG wird. Aber auch wir entdeckt haben, klein und einfach Bilder können tatsächlich besser komprimieren mit PNG als JPG. Es scheint davon abhängen, wie viel ist “going on” in das Bild. PNG funktioniert am besten für Vektor-Art-Grafik mit harten Linien. JPG eignet sich am besten für alles mit komplexen Verläufen (zB ein Foto).
6. Verwenden Sie imagemagick Batch-Konvertierung PNG zu JPG: manuell Re-Encoding PNG-Bilder in JPG ist langweilig, besonders wenn Sie konvertieren eine große Anzahl von Bildern.

   ImageMagick ist das Schweizer Taschenmesser der Befehlszeile Bildbearbeitungsprogrammen. Mit ihm ersparte uns eine Menge Zeit:

   apt-get install imagemagick
   convert -flatten -background white file.png file.jpg
   

   Konvertieren einer ganzen Verzeichnis:

   for f in *.png; do
       n=$(echo $f|sed 's/.png/.jpg/');
       convert -flatten -background white $f $n
   done