Wie kann man Bilder optimieren, um die Seitengeschwindigkeiten / Ladezeiten von Webseiten zu verbessern?

Wahrscheinlich ist der erste Schritt mehr Planung als Photoshop.

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

• Hintergrundfarbe.
• Ein CSS-Gradienten.

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

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

3) Stimmt das Dateiformat?

Es ist nicht in Stein gemeißelt, aber:

• JPG für Fotografie.
• Png für einfache Farben oder Farbverläufe. Logos, Grafiken.
• SVG-Bilder für skalierbare Bilder, einfache 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 Tragen

Für Fotografie. Nachdem ich die reale Dimension entschieden habe, brauche ich:

• Ist es wirklich wichtig, ob ich einige Komprimierungsartefakte sehen kann? Darf ich noch ein bisschen pushen? Lohnt es sich?
• Muss ich das Farbprofil auf jedem Foto einfügen?

Hier ist ein "psychologisches" Problem. Vermeiden Sie beim Speichern für das Web die Verwendung einer Qualitätsstufe 25, nur weil dort „Niedrig“ steht und Sie möchten, dass Ihre Website eine hohe Qualität hat?

7) Und einige Besonderheiten

• Progressives JPG benötigt etwas mehr Platz als nicht progressives.
• Schalten Sie JPG optimieren ein.
• Deaktivieren Sie alle Blur-Optionen.
• 4:4:4-Algorithmen bieten Ihnen eine bessere Qualität, aber weniger Komprimierung bei höherer Qualität. 4:2:2 komprimiert besser.
• Achten Sie darauf, rgb-Dateien zu verwenden, nicht cmyk.
• Bereiten Sie Ihre Dateien mit den Farbeinstellungen auf "Web" vor. Auf diese Weise können Sie das Farbprofil löschen.

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

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

Wieder. "Verluste" hat hier keine Bedeutung.

Bevor Sie Ihr endgültiges Website-Design liefern, sollten Sie die Bilder wirklich mit Tools optimieren, die mehr 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.

Soweit 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 im Moment nicht die Zeit habe, ImageMagick zu beherrschen, suche ich nach kostenlosen Online-Optimierungstools , wo ich ein Bild eingeben kann und es wird eine optimierte Version ausspucken.

Einige der Tools, die ich gefunden habe, sind:

• Compressor.io - sehr wenige anpassbare Optionen, aber ziemlich erstaunliche Ergebnisse (durchschnittlich 60 % - 80 % Reduzierung der Dateigröße für mich)
• ImageOptimizer.net - sieht standardmäßig aus
• tinyPNG - persönlich verwendet mit guten Ergebnissen (kann 24/32-Bit-PNG mit Alphakanal in ein 8-Bit-PNG konvertieren, wobei die Transparenz erhalten bleibt)

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

Sie können wahrscheinlich viele weitere kostenlose Online- und Offline-Tools finden, indem Sie Schlüsselwörter wie reduce image file size, image compression, kombinieren PNG / JPEG / GIF optimisation tools.

Meiner Erfahrung nach wird das Bild für das Web optimiert, wenn Sie die Routine „Für das Web speichern“ aus Photoshop verwenden. Trotzdem werden Sie beim Testen der Seitengeschwindigkeit immer noch Optimierungswarnungen sehen, aber schauen Sie sich nur die KB an Optimierung an, die Sie erreichen werden. In den meisten Fällen sind es etwa 1~5kb. Ich stimme Scott zu, dass Sie nicht von der Seitengeschwindigkeit besessen sein sollten.

Wenn Sie mit WordPress arbeiten, können Sie Optimierungs-Plugins wie den EWWW-Bildoptimierer installieren, der jedes hochgeladene Bild verarbeitet und um einen bestimmten Prozentsatz reduziert. Es ist nützlich, wenn der Kunde 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 und Stapelverarbeitung bietet.

In Ihrem Fall denke ich, dass es erledigt ist. Ab diesem Punkt müssen Sie die Serverseite überprüfen, leistungsstarke Hostings wie Amazon S3 oder ähnliches verwenden 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 die Firma, die 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 Seite weiter zu verbessern, da die Bilder viel kleiner sind und der Client daher weniger Zeit damit verbringt, sie herunterzuladen.

Das 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 Website 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 verwende ich ImageOptim ... die Ergebnisse gefallen mir wirklich gut.

https://imageoptim.com

PS: Ich versuche nicht zu spammen. :-D