Wie können Bilder optimiert werden, um die Ladezeiten von Seiten / Webseiten zu verbessern?

Dies ist fast eine StackOverflow-Frage, die jedoch vollständig mit Photoshop und anderen Tools zusammenhängt. Bei jedem Pagespeed-Test, den ich für meine gesamte Website durchführe, wird der Kommentar "Bilder durch verlustfreies Komprimieren von Bild X optimieren" angezeigt, wodurch sich mein Seitenrang häufig erheblich erhöht.

Ich habe bereits JEDES Bild mit "Für das Web speichern" in Photoshop gespeichert, aber ich habe mich gefragt, wie ich "Bilder durch verlustfreies Komprimieren optimieren" noch mehr optimieren kann. Soweit ich weiß, mache ich schon alles, was ich kann.

Wie kann ich Bilder optimieren, um die Ladegeschwindigkeit meiner Webseite zu verbessern?

Wahrscheinlich ist der erste Schritt mehr Planung als der von Photoshop.

1) Benötige ich eine Bilddatei? Oder kann ich etwas anderes verwenden

• Hintergrundfarbe.
• Ein CSS-Gradient.

2) Benötige ich diese Dateidimensionen? oder kann ich verwenden

• Eine niedrigere Dimension hochskaliert.
• Die niedrige Auflösung mit etwas maskieren? ein Muster darüber, eine Unschärfe, verdunkeln es.
• Ein Muster.
• Lohnt es sich wirklich, das Bild in hoher Auflösung zu haben?

3) Ist das Dateiformat korrekt?

Es ist nicht in Stein gemeißelt, aber:

• JPG für die Fotografie.
• Png für einfarbige oder Farbverläufe. Logos, Grafiken.
• SVG-Bilder für skalierbare Bilder, Uni-Farben, Farbverläufe.

4) Kann ich eine Alternative für Animationen verwenden?

• Animierte Gifs mit optimierten Paletten und Dithering.
• CSS-Animationen.

5) Habe ich die richtige Medienabfrage vorbereitet, die ich für das Bildschirmgerät benötige?

• Benötige ich diese Dimension auf diesem Gerät?

6) Hier kommt die spezifische JPG-Komprimierung zum Einsatz

Für die Fotografie. Nachdem ich mich für die wahre Dimension entschieden habe, die ich brauche:

• Ist es wirklich wichtig, ob ich einige Komprimierungsartefakte sehe? Kann ich etwas mehr pushen? Lohnt es sich?
• Muss ich jedem Foto das Farbprofil hinzufügen?

Hier ist ein "psicologisches" Problem. Vermeiden Sie beim Speichern für das Web die Verwendung einer Qualität 25, nur weil dort "Niedrig" steht und Sie möchten, dass Ihre Website von hoher Qualität ist?

7) Und einige Besonderheiten

• Progressive JPG verwendet etwas mehr Platz als nicht progressive.
• Aktivieren Sie jpg optimieren.
• Deaktivieren Sie eine beliebige Unschärfeoption.
• 4: 4: 4-Algorithmen bieten eine bessere Qualität, aber weniger Komprimierung bei höherer Qualität. 4: 2: 2 komprimiert besser.
• Stellen Sie sicher, dass Sie RGB-Dateien verwenden, nicht cmyk.
• Bereiten Sie Ihre Dateien mit den Farbeinstellungen im "Web" vor. Auf diese Weise können Sie das Farbprofil löschen.

Ein Optimierungswerkzeug wird Ihnen immer sagen, dass Sie es besser machen.

Welchen Parameter kann ein Algorithmus verwenden, um zu sagen. Oh, das Porträt, das Sie auf Ihrer Website zeigen, hat die richtige Menge an "Lossles" -Komprimierung?

Nochmal. "Verluste" hat hier keine Bedeutung.

Bevor Sie Ihr endgültiges Website-Design bereitstellen, sollten Sie die Bilder wirklich mit Tools optimieren, die stärker auf die Optimierung von Bildern ausgerichtet sind. Photoshop ist in Ordnung, aber ich habe viele Leute kommentieren sehen, dass andere Tools einen besseren Job machen.

Nach allem, was ich höre, ist ImageMagick für diesen Zweck ziemlich gut. Als Kommandozeilen-Noob muss ich jedoch ein wenig Zeit damit verbringen, es persönlich zu beherrschen. Wenn Sie mit der Befehlszeile vertraut sind, ist sie wahrscheinlich perfekt für Sie.

Da ich momentan nicht die Zeit habe, ImageMagick zu beherrschen, suche ich nach kostenlosen Online-Optimierungstools, mit denen ich ein Bild eingeben kann und eine optimierte Version ausspuckt.

Einige der Tools, die ich gefunden habe, sind:

• Compressor.io - sehr wenige optimierbare Optionen, aber ziemlich erstaunliche Ergebnisse (durchschnittliche Reduzierung der Dateigröße um 60% - 80% für mich)
• ImageOptimizer.net - sieht standardmäßig aus
• tinyPNG - persönlich mit guten Ergebnissen verwendet (in der Lage, 24/32 Bit PNG mit Alpha-Kanal in ein 8 Bit BitG umzuwandeln, während die Transparenz erhalten bleibt)

Ich persönlich habe keinen Grund, für ein zusätzliches Tool mit allen verfügbaren kostenlosen Optionen zu bezahlen, es sei denn, ich höre von einem bahnbrechenden.

Sie können sich wahrscheinlich viele weitere kostenlose Online - und Offline - Tools durch die Kombination von Schlüsselwörtern wie finden reduce image file size, image compression, PNG / JPEG / GIF optimisation tools.

Wenn Sie meiner Erfahrung nach die Routine "Speichern für das Web" aus Photoshop übernehmen, wird das Bild für das Web optimiert. Trotzdem werden beim Testen der Seitengeschwindigkeit weiterhin Optimierungswarnungen angezeigt. Sehen Sie sich jedoch nur die KB an Optimierung an, die Sie erzielen werden. In den meisten Fällen sind es ungefähr 1 ~ 5 kb. Ich stimme Scott zu, dass Sie nicht von der Seitengeschwindigkeit besessen sein sollten.

Wenn Sie mit WordPress arbeiten, können Sie Optimierungs-Plugins wie das EWWW-Bildoptimierungsprogramm installieren, das jedes hochgeladene Bild verarbeitet und um einen bestimmten Prozentsatz reduziert. Es ist nützlich, wenn der Client es selbst hochladen soll.

Eine weitere Option ist die Verwendung einer Desktop-Optimierungssoftware wie http://www.jpegmini.com/, die ein gutes Verhältnis von Komprimierung zu Qualität aufweist und über eine Stapelverarbeitung verfügt.

In Ihrem Fall denke ich, dass es fertig ist. Ab diesem Zeitpunkt müssen Sie die Serverseite mit leistungsstarken Hostings wie Amazon S3 oder ähnlichem überprüfen und Dateien von dort aus bereitstellen, um die beste Leistung zu erzielen.

Wenn Sie ein Wordpress-Benutzer sind, können Sie sich auch Optimus Image Optimizer (Haftungsausschluss: Ich arbeite für das Unternehmen, das das Plugin erstellt hat) für eine verlustfreie Bildkomprimierung ansehen . Ein großes Unterscheidungsmerkmal dieses Plugins im Vergleich zu anderen ist jedoch die Fähigkeit, Bilder in das WebP-Format zu konvertieren, von dem bekannt ist, dass es die Dateigröße im Vergleich zu PNGs um bis zu 26% verringert.

Dies wird dazu beitragen, die Ladezeiten Ihrer Seitengeschwindigkeit weiter zu verbessern, da die Bilder viel kleiner sind und der Client weniger Zeit damit verbringt, sie herunterzuladen.

Dies könnte auch einen Blick wert sein ...

https://developers.google.com/speed/pagespeed/

Ich habe in der Vergangenheit PageSpeed ​​verwendet.

Es testet Ladeseiten von Ihrer Site und bietet allgemein hilfreiche Vorschläge zur Beschleunigung der Ladezeiten.

Wie andere bereits betont haben, kann auch die Bildoptimierung sehr hilfreich sein.

Auf dem Mac - ich benutze ImageOptim ... mag die Ergebnisse wirklich.

https://imageoptim.com

PS: Ich versuche nicht zu spammen. :-D