Bildoptimierung für die Site: Stapelverarbeitung mit jpegtran | optipng | pngout

  1. Voraussetzungen
  2. Wir verwenden Empfehlungen für Bilder
  3. Archivstruktur
  4. Kurzanleitung für die Arbeit
  5. Ergänzungen
  6. x64 (auch bekannt als andi)

Site ohne Bilder - ein Anachronismus. So viele Leute denken, und es fehlt nicht an gesundem Menschenverstand. Denken Sie daran, wie lange waren Sie das letzte Mal auf der Website und wie lange waren Sie dort?

Textdaten sind viel kleiner als das Bild. Aber die Menschen lieben ihre Augen. Daher werden die Bilder zweifellos ein Vorteil der Geschichte sein.

Wenn wir über den Text sprechen, meinen wir im Allgemeinen sowohl dessen Inhalt als auch eine bequeme visuelle Darstellung, einschließlich Absätzen, Listen, Anführungszeichen und Tabellen. Dies ist jedoch nicht genug, und sogar Nachrichten-Websites versuchen, Bilder von Journalisten zu liefern.

Dies ist jedoch nicht genug, und sogar Nachrichten-Websites versuchen, Bilder von Journalisten zu liefern

Gehen wir von der Annahme aus, dass Bilder benötigt werden. Dies können Fotos, Diagramme, einfach erläuternde Bilder sein.

Vor langer Zeit, als Putin nicht ewig schien, machte ich mein erstes medizinisches Webportal. Der Atlas musste mit Bildern versehen werden. Es ist offensichtlich, dass es ziemlich schwierig ist, sich die anatomische Struktur des Körpers ohne Bilder vorzustellen und umso mehr mit Worten zu beschreiben. Und ohne weiteres habe ich Bilder in bmp (unkomprimiertes Format) hochgeladen. Muss ich sagen, dass sie den Teig gewogen haben? Außerdem wussten einige Browser nicht, wie solche Bilder angezeigt werden sollten.

Warum also Bilder optimieren? Ein einfaches Beispiel ist ein Foto. Moderne Telefone verfügen über Kameras mit 8, 12 und noch mehr Megapixeln. 12 MP entsprechen einem Bild mit 4000 × 3000 Pixeln. Dies entspricht je nach Komplexität der Szene einer Größe von 2-5 Megabyte und mehr. Ein Dutzend Fotos - und die Seitengröße schwillt an. Das Bild passt in den Inhaltsbereich, dh der Browser muss zuerst alles herunterladen, skalieren und erst dann anzeigen. Für die Schwachen Prozessoren oder mit wenig RAM - eine Katastrophe.

Stellen Sie sich nun vor, der Benutzer beobachtet die Site vom Telefon aus. In diesem Fall kann das Laden der Seite einfach nicht warten. Daher müssen die Bilder vorverkleinert werden.

Jemand wird argumentieren, dass dies keinen Sinn hat: Modernes CMS erstellt beim Herunterladen von Bildern automatisch Miniaturansichten. Aber hat jeder seine Websites mit VPS- oder VIP-Tarifen? Das Herunterladen eines 12-MP-Images ist möglich, aber um es zu verarbeiten, muss PHP mehr als 35 Megabyte (theoretisch sogar mehr) für den Speicher reservieren und weiß dann immer noch, wie viel zum Erstellen einer kleineren Kopie erforderlich ist. Günstige Tarife stürzen sich sofort in den Ressourcenüberschuss. Ein guter Hoster wird den Benutzer bitten, dies nicht mehr zu tun, ein schlechter wird es ignorieren, weil ihm nur Geld wichtig ist und nicht die Leistung von Diensten.

Also haben wir uns entschlossen, richtig zu handeln. Wir verkleinern die Bilder vorläufig und laden sie dann auf die Site hoch. So ist der Motor leichter und die Leute. Ist alles Nicht wirklich.

Viele Editoren behalten die ursprünglichen Abschnitte (Metainformationen, Nicht-Bildteile der Datei) bei, die zusätzliche Informationen enthalten. Wenn Sie beispielsweise ein Bild von etwas auf dem Telefon aufnehmen, die Datei auf den Computer übertragen, mit der rechten Maustaste darauf klicken und "Eigenschaften → Details" auswählen, werden die Daten auf dem Gerät angezeigt: Welche Kamera Sie fotografiert haben, Verschlusszeit, ISO usw. Für den Benutzer sind diese Informationen nutzlos, sodass Sie sie entfernen können.

Nun, denk darüber nach, ein Stück. Was ist da, ein Bündel von Informationen, die enthalten sind? Stellen Sie sich vor. Manchmal erhalten Sie Bilder, in denen Hunderte von Kilobyte solcher Daten gespeichert sind. Erst heute haben sie ein Logo mit einer Größe von 584 KB gesendet. Gleichzeitig waren nützliche Informationen nur 14 KB! Was mich betrifft, ist es nicht ganz richtig, den Besucher zum Herunterladen von 570 KB von oben zu zwingen.

Fassen wir die Zwischensummen zusammen. Damit die Benutzer der Website gut abschneiden können, benötigen Sie:

  1. Verkleinern Sie das Bild. Um jedem Grafikeditor zu helfen.
  2. Das Herauswerfen der Dateiteile ist nicht erforderlich. Tatsächlich benötigt der Benutzer nur ein Bild.
  3. Versuchen Sie, das Bild weiter zu verkleinern.

Der erste Absatz beinhaltet die individuelle Bearbeitung jeder Datei. Es ist zeitaufwändig, bringt aber das beste Ergebnis. Wir öffnen jede Datei, schneiden, reduzieren und speichern sie in akzeptabler Qualität.

Die Absätze 2 und 3 können jedoch Sonderprogrammen ausgeliefert sein. Software für die Arbeit mit Bildern gesetzt. Google empfiehlt die folgenden Programme:

  • jpegtran für das jpg Bildformat.
  • optipng und pngout für PNG-Bilder.

Ein bisschen zu S. 3. Grafikeditoren kümmern sich normalerweise nicht darum. Sie speichern einfach das Bild und wählen vorab festgelegte Komprimierungsalgorithmen mit denselben Einstellungen, Quantisierungskoeffizienten und anderen Dingen aus. Darüber hinaus übertragen viele ehrlich die verfügbaren Metainformationen und fügen ihre eigenen hinzu, wodurch die Dateigröße weiter erhöht wird.

Voraussetzungen

Vor einem Jahr begannen sie massenhaft über den Service zu reden. PageSpeed ​​Insights von google. Tatsächlich handelt es sich hierbei um Empfehlungen des Suchriesen, wie man es gut macht. Geben Sie einfach die Adresse der Site ein und Sie erhalten eine Liste mit Optimierungsvorschlägen. Dort können Sie auch bereits optimierte Ressourcen, einschließlich Bilder, für Ihre Site herunterladen. Richtig, dies ist nur für die markierte Seite relevant.

Wenn Sie eine Website haben, achten Sie darauf, zu suchen dieser Artikel . Besonders nützlich für Benutzer von WordPress.

Wir verwenden Empfehlungen für Bilder

Es scheint einfach: Laden Sie die von Google angegebenen Programme herunter und führen Sie alle Dateien auf dem Server durch. Das Problem ist, dass diese Dienstprogramme Konsole sind. Sie nehmen jeweils nur eine Datei auf. Aber wir sind nicht vergebens letzter Artikel hat sich die zeit genommen dateien zu stapeln, oder?

Die Informationen aus dem Artikel reichen völlig aus, um Ihren eigenen Datei-Handler in großen Mengen zu erstellen. Ich schlage nur vor, die fertige Baugruppe herunterzuladen, die ich selbst benutze.

Archiv herunterladen (212 KB)

Archivstruktur

Das Archiv enthält einen Ordner [ OptimizeImg ]. Packen Sie es zunächst irgendwo aus. Ich habe es in c: \ temp \ gefunden, aber es spielt keine Rolle. Hauptsache, der Pfad enthält keine Ausrufezeichen.

Weiter. Dieser Ordner enthält das Unterverzeichnis [ uploads ]. Hier müssen Sie Dateien ablegen, die verarbeitet werden müssen. Das Beste daran ist, dass Sie zumindest die Ordner- / Dateistruktur verschieben können.

Es gibt 3 weitere Programme: jpegtran.exe | optipng.exe | pngout.exe ist das von Google empfohlene Dienstprogramm. Von den entsprechenden offiziellen Websites / Repositories heruntergeladen. Wenn Sie Zweifel haben oder nur ein Upgrade durchführen möchten, laden Sie es von einer vertrauenswürdigen Quelle herunter und ersetzen Sie vorhandene.

Und schließlich das Herz von Tulza. Batnichki:

  • 1.bat
  • 3.bat
  • 3-go.bat
  • 3-opti-to-out.bat
  • 3-out-to-opti.bat

Die erste Datei, 1.bat, erstellt die Struktur aus [uploads] neu. Es werden 3 zusätzliche Ordner erstellt: [jpg_jpegtran] [png_optipng] [png_pngout] mit verarbeiteten minimierten Dateien ihres Typs (jpg - nur * .jpg-Dateien, dasselbe mit png).

3.bat startet nacheinander drei Batchdateien zur Ausführung:

  • 3-go.bat ist fast dasselbe wie 1.bat. Überspringen Sie JPG / PNG-Dateien durch Minimierer. Das Ergebnis der Arbeit sind 3 Ordner (so) mit den entsprechenden Bildern.
  • 3-opti-to-out.bat erstellt den Ordner [png_optipng-to-pngout], in den die von optipng + pngout verarbeiteten Dateien geschrieben werden (in genau dieser Reihenfolge).
  • 3-out-to-opti.bat erstellt einen Ordner [png_pngout-to-optipng], in den die von pngout + optipng verarbeiteten Dateien geschrieben werden. Ähnlich wie beim Vorgänger, nur in einer anderen Reihenfolge.

Grundsätzlich reicht für unsere Bedürfnisse nur 1.bat. 3x Beutel sind als Ergebnis von Nachforschungen und Fehlern in der vorherigen Version der Batch-Datei aufgetreten. Es kam vor, dass während des Fehlers die Dateien für pngout aus dem optipng-Verzeichnis entnommen wurden. Und was war meine Überraschung, als der Start der alten Version eine 1,5-mal kleinere Größe ergab als in der aktualisierten Batch-Datei. Als Ergebnis stellte sich heraus, dass die doppelte Verarbeitung Bilder gut „einholen“ kann. Aber es dauert fast zweimal länger. Also entscheide dich, ob es gebraucht wird.

Kurzanleitung für die Arbeit

  1. Archiv herunterladen .
  2. Pack es aus.
  3. Wechseln Sie zum neu geöffneten Ordner [OptimizeImg].
  4. Kopieren Sie alle Dateien, die stechen müssen, den Ordner [upload].
  5. Führen Sie 1.bat aus und warten Sie. Wenn es viele Dateien gibt und sie png sind, warten Sie lange.
  6. Wenn im schwarzen Fenster eine Meldung angezeigt wird, dass zum Fortfahren eine Taste gedrückt werden muss, ist alles bereit. Es bleibt übrig, den Inhalt der erstellten Ordner zu übernehmen und über FTP auf das Hosting zu kopieren, wobei alte Dateien überschrieben werden.

Beispielsweise. Lassen Sie ein Blog auf WordPress haben. Alle Bilder werden in [ / wp-content / uploads / ] gespeichert. Gehen Sie zum Site-Ordner (über FTP), gehen Sie zu [ wp-content ] und kopieren Sie einfach [ uploads ] in den gleichnamigen Ordner OptimizeImg. Führen Sie 1.bat aus und warten Sie. Nachdem die Arbeit beendet ist, wird der Inhalt [jpg_jpegtran] (wir gehen dorthin!) Auf den Server hochgeladen. Anfragen nach vorhandenen Dateien werden durch Überschreiben beantwortet. Ein ähnlicher Trick für png, aber zuerst schauen wir uns an, welcher Ordner - [png_optipng] oder [png_pngout] - weniger Platz beansprucht. Füllen Sie ihn mit seinem Inhalt.

Haben Sie keine Angst, andere Dateien zu beschädigen. Batniki funktioniert nur mit jpg / png und nur die Bilder dieser Art werden in die neu erstellten Ordner geschrieben.

Ich hoffe, jemand wird nützlich sein. Erfolge!

Ergänzungen

  1. Der Pfad zu [OptimizeImg] sollte keine Ausrufezeichen enthalten ! und Prozent %
  2. Das Ausführen von Skripten als Administrator ist nicht erforderlich. Außerdem funktionieren sie in diesem Fall möglicherweise nicht!
  3. ...

Herausgeber

nicht online vor 13 Stunden

x64 (auch bekannt als andi)

Anmerkungen: 2846 Veröffentlichungen: 395 Anmeldung: 02-04-2009

Denken Sie daran, wie lange waren Sie das letzte Mal auf der Website und wie lange waren Sie dort?
Muss ich sagen, dass sie den Teig gewogen haben?
Warum also Bilder optimieren?
Aber hat jeder seine Websites mit VPS- oder VIP-Tarifen?
Was ist da, ein Bündel von Informationen, die enthalten sind?