Effektive Größenänderung von Bildern mit ImageMagick

Ursprünglicher Autor: Dave Newton
  • Übersetzung
Heutzutage sind immer mehr Websites mit der Notwendigkeit konfrontiert, responsives Design und responsive Bilder einzuführen - und diesbezüglich ist es erforderlich, die Größe aller Bilder effektiv zu ändern. Das System sollte so funktionieren, dass jedem Benutzer auf Anfrage ein Bild in der richtigen Größe gesendet wird - klein für Benutzer mit kleinen Bildschirmen, groß für große Bildschirme.

Das Web funktioniert also einwandfrei. Um jedoch verschiedenen Benutzern Bilder unterschiedlicher Größe bereitzustellen, müssen Sie zunächst alle diese Bilder erstellen.

Viele Tools passen die Größe an, produzieren jedoch zu oft große Dateien, die die mit reaktionsschnellen Bildern verbundenen Leistungssteigerungen zunichte machen. Mal sehen wie mitImageMagick , ein Befehlszeilentool, kann die Größe von Bildern schnell ändern, wobei eine hervorragende Qualität beibehalten und Dateien mit kleinen Volumina abgerufen werden.

Große Bilder == große Probleme


Die durchschnittliche Webseite wiegt 2 MB , von denen 2/3 Bilder sind. Millionen von Menschen gehen über 3G oder noch schlimmer online. 2MB-Sites funktionieren in diesen Fällen schrecklich. Selbst bei schnellen Verbindungen können solche Sites die Verkehrsbeschränkungen ausnutzen. Die Arbeit von Webdesignern und Entwicklern besteht darin, das Leben des Benutzers zu vereinfachen und zu verbessern.

Bild

Sehr kleine Websites können einfach mehrere Variationen aller Bilder speichern. Aber was ist, wenn Sie ihre Dofig haben? Zum Beispiel kann es in einem Geschäft Hunderttausende von Bildern geben - machen Sie ihre Varianten nicht manuell.

Imagemagick


Ein 25 Jahre altes Befehlszeilenprogramm ist gleichzeitig ein voll ausgestatteter Bildeditor. Es verfügt über eine Vielzahl von Funktionen, darunter die schnelle und automatische Größenänderung von Bildern. Bei den Standardeinstellungen sind die Dateien jedoch häufig zu groß - manchmal ist das Volumen größer als das Original, obwohl sie weniger Pixel haben. Jetzt erkläre ich das Problem und zeige, welche Einstellungen zur Lösung erforderlich sind.

So funktioniert die Größenänderung von Bildern


Per Definition ändert sich die Anzahl der Pixel in einem Bild, wenn Sie dessen Größe ändern. Wenn es erhöht wird, hat die Ausgabe mehr Pixel als die Eingabe; mit einer Abnahme - im Gegenteil. Die Herausforderung besteht darin, den Inhalt des Originalbilds mit einer anderen Pixelanzahl zu speichern.

Das Vergrößern von Bildern ist einfacher darzustellen. Beginnen wir also damit. Stellen Sie sich ein Bild mit einem 4x4-Pixelquadrat vor, das wir auf 8x4 verdoppeln möchten. Tatsächlich machen wir dieses Bild und ziehen es auf ein neues Raster - dies wird Resampling genannt. Um ein 4x4-Bild im Format 8x8 abzutasten, müssen Sie 48 zusätzliche Pixel einfügen. Sie müssen eine Farbe haben - der Auswahlprozess heißt Interpolation. Bei der Abtastung wird ein Algorithmus, der die Funktionsweise der Interpolation auswählt, als Abtastfilter bezeichnet.

Bild

Es gibt viele solche Filter. Am einfachsten ist es, vier Zeilen und vier Spalten einer beliebigen Farbe hinzuzufügen. Nun, sag rot. Dies ist eine Hintergrundinterpolation, wenn die Hintergrundfarbe (rot) an leeren Stellen erscheint. In Photoshop erfolgt dies über „Bild“ → „Leinwandgröße“ anstelle von „Bild“ → „Bildgröße“.

Das wird uns natürlich nicht passen. Das Bild wird dem Original nicht ähnlich sein. Die Hintergrundinterpolation wird nur zum Hinzufügen neuer Pixel verwendet und ist auch dann beim Ändern der Größe unbrauchbar.

Bild

Eine weitere einfache Interpolation, bei der die Farbe der neuen Pixel mit der der Nachbarn übereinstimmt, ist die Interpolation über die nächsten Nachbarn. Für Bilder, besonders für unser Quadrat, ist das Ergebnis viel besser.

Bild

Beim Downsampling, dh beim Verkleinern des Bildes, ist es nicht so einfach, die nächsten Nachbarn zu interpolieren. Es muss akzeptiert werden, dass aus mathematischen Gründen mit gebrochenen Pixeln gearbeitet werden kann. Für den Anfang wird das neue Raster auf das Originalbild angewendet. Da die Pixel kleiner und größer sind, enthalten einige von ihnen mehrere Farben.

Echte Pixel haben jedoch nur eine Farbe. Die resultierende Farbe jedes Pixels im neuen Raster wird durch die Farbe in der Mitte bestimmt. Daher wird manchmal eine Interpolation über die nächsten Nachbarn beim Verringern als Punktabtastung bezeichnet.

Bild

Wenn dies jedoch etwas komplizierter ist als Linien und Quadrate, erzeugt eine solche Methode gezackte und quadratische Bilder. Es funktioniert schnell, erzeugt kleine Dateien, sieht aber schlecht aus.

Die meisten Filter verwenden Interpolationsvariationen für die nächsten Nachbarn - sie machen Punktabtastungen an mehreren Punkten und berechnen irgendwie eine bestimmte Durchschnittsfarbe für sie. Bei der bilinearen Interpolation wird ein gewichteter Durchschnitt der Farben berücksichtigt.

Bild

Ein solcher Filter wirkt sich jedoch auf die Dateigröße aus, da er neue Farben mit abgerundeten Kanten hinzufügt. Das Originalbild hatte nur zwei Farben, aber jetzt haben wir mehr von ihnen. Und andere Dinge sind gleich, je mehr Farben, desto schwerer die Datei.

Und was bedeutet das für uns

? Wir müssen irgendwie die Anzahl der Farben reduzieren, ohne an Qualität zu verlieren. Dies wird am meisten von der Auswahl des Filters beeinflusst, es können aber auch andere Einstellungen vorgenommen werden.

Optimale Einstellungen für ImageMagick


Grundlagen zu ImageMagick

ImageMagick hat viele Einstellungen und Funktionen , und es ist ziemlich schwierig, die richtige zu finden. Wir interessieren uns für zwei Funktionen, konvertieren und mogrifizieren. Sie führen ähnliche Aktionen aus, aber mogrify arbeitet mit mehreren Dateien gleichzeitig und konvertiert - eine nach der anderen.

Einfache Bedienung:

convert input.jpg -resize 300 output.jpg


In diesem Fall nimmt IM die Datei input.jpg und ändert ihre Größe auf die Breite von Pixeln, wobei das Ergebnis in der Datei output.jpg gespeichert wird. Die Funktion -resize 300 ist ein Beispiel für eine von vielen Funktionen. Sie haben alle ein Format: Option -functionName.

Sie können auch mogrify verwenden, mit ein wenig Zusatz:

mogrify -path output/ -resize 300 *.jpg


Hier nimmt IM alle JPEG-Dateien aus dem aktuellen Verzeichnis (* .jpg), ändert ihre Größe auf 300 Pixel und speichert sie im Ausgabeverzeichnis.

Funktionen können kombiniert werden:

convert input.jpg -resize 300 -quality 75 output.jpg


Dadurch wird auch die Größe der Datei input.jpg auf 300 Pixel geändert, die JPEG-Qualität wird jedoch auf 75 festgelegt, bevor die Datei output.jpg gespeichert wird.

Tests und Ergebnisse

Beim Testen verschiedener Sofortnachrichteneinstellungen habe ich versucht, die Größe der Dateien zu verringern, ohne dass die Qualität beeinträchtigt wird, damit sie nicht von der Photoshop-Option „Für Web speichern“ unterschieden werden. Ich habe sowohl die subjektive als auch die objektive Meinung zum Testen herangezogen - ich habe strukturelle Unterschiede gemessen (strukturelle Unähnlichkeit, DSSIM). DSSIM vergleicht zwei Bilder und gibt eine Bewertung ab. Je niedriger die Punktzahl, desto ähnlicher sind sie. 0 bedeutet Identität. Ich habe einen DSSIM-Wert von nicht mehr als 0,0075 erreicht. Und in einer Studie im letzten Jahr wurde festgestellt, dass Menschen mit einem DSSIM von weniger als 0,015 normalerweise nicht durch Augenbilder unterscheiden können.

Nachdem ich verschiedene Bilder in verschiedenen Größen im JPEG- und PNG-Format getestet hatte, kam ich zu dem Schluss, dass die folgenden IM-Einstellungen die kleinsten Ergebnisse liefern, die von der Photoshop-Ausgabe kaum zu unterscheiden sind:

mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2 -thumbnail OUTPUT_WIDTH -unsharp 0.25x0.25+8+0.065 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB -strip INPUT_PATH


Lassen Sie uns sie genauer analysieren.

Mogrifizieren oder konvertieren

IM verwendet die Konvertierung, um Bilder einzeln zu verarbeiten, und mogrify wird normalerweise für die Stapelverarbeitung benötigt. In einer idealen Welt sollten die Ergebnisse ihrer Arbeit übereinstimmen. Leider gibt es bei der Konvertierung einen Fehler , aufgrund dessen einige Einstellungen ignoriert werden (-define jpeg: fancy-upsampling = off), so dass ich mogrify verwenden musste.

Resampling

Die Wahl eines Abtastfilters in IM ist aus irgendeinem Grund verwirrt. Es gibt drei Möglichkeiten, dies zu tun:

  • durch Auswahl der Größenänderungsfunktion
  • mit der Option -filter
  • oder die Option -interpolate


Bild
Beispiele für zwölf verschiedene Größenänderungsfunktionen

Am offensichtlichsten ist –resize, aber die Ergebnisse sind zu groß. Ich habe 11 verschiedene Funktionen überprüft und festgestellt, dass die Miniaturansicht sowohl in der Größe als auch in der Qualität am besten mit der Reduzierung funktioniert. Diese Funktion arbeitet in drei Stufen:

  1. Skaliert das Bild mit der Funktion –sample, die über einen eigenen Filter verfügt, fünfmal so groß wie erforderlich
  2. Anschließend wird die Größe über –resize auf die erforderliche Größe geändert
  3. Entfernt Metadaten aus einem Bild


Das heißt, wenn wir das Bild auf 500 Pixel verkleinern, wird -thumbnail es zuerst mit –sample auf 2500 Pixel verkleinern. Dann ändert IM die Größe von 2500 auf 500 über –resize. Und am Ende werden die Metadaten gelöscht.

Die zweite Möglichkeit, einen Sampling-Filter auszuwählen, ist der Durchgangsfilter. Einige Funktionen verfügen über integrierte Filter, andere über Standardfilter, die Sie ändern können. Im zweiten Schritt von –thumbnail wird –filter verwendet, da dort die Funktion –resize verwendet wird.

Ich habe 31 Einstellungen auf –filter überprüft und mit Triangle die besten Ergebnisse erzielt. Dieser Filter wird auch als bilineare Interpolation bezeichnet. Es berechnet eine gewichtete Durchschnittsfarbe aus benachbarten Pixeln. Ich fand, dass es am besten ist, den Bereich benachbarter Pixel als -define-Filter festzulegen: support = 2 setting.

Die dritte Möglichkeit, einen Filter auszuwählen, ist –interpolieren, wird jedoch bei Verwendung von -thumbnail ignoriert.

Unter anderem verwendet IM standardmäßig eine Funktion namens JPEG Fancy Upsampling, mit der versucht wird, JPEG in besserer Qualität zu erzeugen. Ich entschied, dass es nur die Größe der Bilder vergrößert und der Qualitätsunterschied vernachlässigbar ist. Daher empfehle ich, es mit -define jpeg: fancy-upsampling = off auszuschalten.

Schärfen

Beim Ändern der Größe werden die Bilder leicht verwischt, sodass derselbe Photoshop verschiedene Techniken verwendet, um die Klarheit zu erhöhen. Ich empfehle den Unscharf-Filter, der trotz des Namens die Klarheit des Bildes erhöht: -unscharf 0,25x0,25 + 8 + 0,065.

Der Filter arbeitet so, dass zuerst die Gaußsche Unschärfe angewendet wird . Die ersten beiden Zahlen sind der Radius und das Sigma (in unserem Fall jeweils 0,25 Pixel). Nach der Unschärfe vergleicht der Filter die unscharfe Version mit dem Original. Wenn die Helligkeit über dem festgelegten Schwellenwert (0,065) liegt, wird die Schärfe der festgelegten Kraft erhöht (8).

Farbreduzierung

Wie ich bereits sagte, ist der Hauptgrund für die Zunahme der Dateigröße beim Ändern der Bildgröße das Hinzufügen neuer Farben. Daher müssen Sie versuchen, ihre Anzahl zu verringern, ohne dabei an Qualität zu verlieren.

Eine Möglichkeit ist die Posterisierung, bei der Farbverläufe durch Sätze klarer Farben ersetzt werden. Posterisierung reduziert die Anzahl der Farbebenen - so viele Optionen verbleiben in den roten, grünen und blauen Kanälen. Die Gesamtzahl der Farben im Bild ist eine Kombination der Farben dieser Kanäle.

Posterisierung kann die Dateigröße verringern, aber auch die Qualität beeinträchtigen. Ich schlage die Nummer 136 vor, in der Sie eine kleine Datei erhalten, ohne viel an Qualität zu verlieren.

Bild
Ursprüngliche

Bild
Farbreduzierung

Dithering ist ein Prozess, der die Auswirkungen der Reduzierung von Farben durch Hinzufügen von Rauschen zu Farbsätzen abschwächt, um die Illusion von mehr Farben zu erzeugen. Theoretisch ist das eine gute Idee.

Bild
Nach dem Dithering

Leider hat IM einen Fehler, der Bilder beim Dithering mit Transparenz verunstaltet. Daher ist es besser, es durch -dither None zu deaktivieren. Glücklicherweise sehen die Ergebnisse der Posterisierung auch ohne sie ziemlich gut aus.

Bild
Dithering-Fehler in IM

Farbraum

Der Farbraum bezieht sich indirekt auf die Anzahl der Farben in einem Bild. Dieser Bereich bestimmt, welche Farben verfügbar sind. Das folgende Bild zeigt, dass der ProPhoto RGB-Farbraum mehr Farben enthält als Adobe RGB, das wiederum mehr Farben als sRGB enthält. Und alle enthalten weniger Blüten, als das Auge sieht.

Bild

sRGB wurde zum König der Internet-Farbräume. Es wurde vom W3C und anderen Organisationen genehmigt. Es wird Unterstützung im CSS-Farbmodul Level 3 sowie in den SVG- und WebP-Spezifikationen benötigt. In der PNG-Spezifikation wird darauf verwiesen. In Photoshop ist dies auch der Standardfarbraum. Kurz gesagt, sRGB ist die beste Wahl für das Internet. Wenn Sie möchten, dass Ihre Bilder korrekt angezeigt werden, sollten Sie es am besten verwenden.

Qualität und Komprimierung

Bei Formaten mit Qualitätsverlust wie JPEG hängen Qualität und Komprimierung direkt zusammen - je mehr Komprimierung, desto geringer die Qualität und die Dateigröße. Daher müssen Sie ein Gleichgewicht finden.

In meinen Tests waren die Kontrollbilder und der Photoshop auf hoch oder 60 eingestellt. In den IM-Einstellungen empfehle ich die Verwendung von 82. Warum?

Es stellt sich heraus, dass die Qualitätseinstellung quantitativ nicht im JPEG-Format definiert ist und daher kein Standard ist. Die Qualität 60 in Photoshop entspricht möglicherweise der Qualität 40 in einem Programm, der Qualität B + in einem anderen Programm oder der Qualität Awesome in einem dritten Programm. Bei meinen Tests habe ich festgestellt, dass Photoshop 60 in ImageMagick der Qualität 82 entspricht.

Und in Formaten ohne Qualitätsverlust wie PNG stehen Qualität und Komprimierung in keinem Zusammenhang. Eine hohe Komprimierung ändert nicht das Erscheinungsbild des Bildes, sondern hängt nur von der Prozessorauslastung während der Verarbeitung ab. Wenn Sie keine Computer übrig haben, gibt es keinen Grund, die maximale PNG-Komprimierung nicht festzulegen.

Die PNG-Komprimierung in IM kann in drei Einstellungen festgelegt werden: -define png: Komprimierungsfilter, -define png: Komprimierungsstufe und -define png: Komprimierungsstrategie. Kompressionsfilter- Dies ist ein zusätzlicher Schritt vor der Komprimierung, bei dem die Daten sortiert werden, damit die Komprimierung effizienter wird. Ich habe mit adaptiver Filterung bessere Ergebnisse erzielt (-define png: compression-filter = 5). Ich empfehle, die Komprimierungsstufe auf maximal 9 zu setzen (-define png: compression-level = 9). Eine Strategie bestimmt den Algorithmus selbst. Mir hat die Standardstrategie besser gefallen (-define png: compression-strategy = 1).

Metadaten

Zusätzlich zum Bild selbst können Dateien Metadaten enthalten - Informationen über das Bild, als es erstellt wurde, und über das Gerät, von dem es erstellt wurde. Diese Information findet statt, verbessert aber nicht die Wahrnehmung des Bildes, und es ist besser, es zu löschen. Und obwohl ich darauf hingewiesen habe, dass -thumbnail Metadaten löscht, werden dennoch nicht alle gelöscht. Es ist möglich, alles mit -strip und -define png zu löschen: exclude-chunk = all. Dies hat keinen Einfluss auf die Qualität.

Progressives Rendern

JPEGs und PNGs können durch progressives oder sequentielles Rendern gespeichert werden. Standardmäßig wird die zweite ausgeführt, wenn die Pixel in Zeilen von oben nach unten geladen werden. Progressiv bedeutet, dass das Bild nach und nach übertragen und angezeigt wird.

Bei JPEG kann das progressive Rendern in einer beliebigen Anzahl von Schritten erfolgen. Dies wird beim Speichern der Datei festgelegt. Der erste Schritt ist die niedrig aufgelöste Version des gesamten Bildes. Bei jeder nachfolgenden Version wird eine höhere Auflösung angezeigt, bis das gesamte Bild in höherer Auflösung angezeigt wird.

Bild

PNG verfügt über eine Art progressives Rendering mit der Bezeichnung Adam7-Interlacing , bei dem Pixel in sieben Schritten auf der Grundlage eines 8 x 8-Rasters angezeigt werden.

Bild

Beide Rendering-Arten können in IM über –interlace konfiguriert werden. Aber ist es notwendig?

Ein solches Rendern erhöht das Dateivolumen. Lange Zeit glaubte man, dass es aufgenommen werden sollte, da es das Benutzererlebnis verbessert. Auch wenn das perfekte Bild nicht sofort geladen wird, erkennt es etwas und ist besser als nichts.

Im vergangenen Jahr wurde den Ergebnissen der Studie zufolge deutlich, dass Benutzer ein konsistentes Rendering bevorzugen. Dies ist nur eine Studie, aber immer noch interessant. Deshalb habe ich beschlossen, ein sequentielles Rendering durch "-interlace none" zu empfehlen.

Bildoptimierung

Ich habe die Optimierung erwähnt. Ich empfehle alle zuvor beschriebenen Einstellungen, wenn Sie Ihre Bilder nicht optimieren. Wenn sie optimiert werden können, werde ich sie ändern: Kleine Änderungen an den -unsharp-Einstellungen funktionieren besser (-unsharp 0,25x0,08 + 8,3 + 0,045 gegenüber -unsharp 0,25x0,25 + 8 + 0,065 ohne Optimierung) und Sie müssen -strip nicht verwenden.

mogrify -path OUTPUT_PATH -filter Triangle -define filter:support=2 -thumbnail OUTPUT_WIDTH -unsharp 0.25x0.08+8.3+0.045 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB INPUT_PATH


Es gibt viele Optimierer. Ich habe image_optim , picopt und ImageOptim getestet und alle haben die Bilder in verschiedenen Schritten durchlaufen. Ich habe sie nacheinander überprüft und bin zu dem Schluss gekommen, dass es besser ist, die Dateien in der angegebenen Reihenfolge durch alle drei Dateien zu führen. Nach der Verwendung von image_optim sind die Vorteile von picopt und ImageOptim jedoch minimal. Wenn Sie keine zusätzliche Zeit und Prozessorleistung haben, ist die Verwendung von mehr als einer Optimierung übermäßig.

Ergebnisse (und war es das wert, so viel zu leiden?)


Natürlich sind meine Einstellungen kompliziert, aber sie werden benötigt, um das Benutzererlebnis zu verbessern. Ich freue mich, Ihnen mitteilen zu können, dass ich nach intensiven Tests das Dateivolumen drastisch reduzieren konnte, ohne an Qualität zu verlieren.

Die durchschnittliche Dateigröße hat sich gegenüber der Photoshop-Option „Für das Web speichern“ um 35% verringert.

Vergleich mit Photoshop Creative Cloud


Meine Einstellungen ohne Optimierung erwiesen sich als noch besser als Photoshop mit Optimierung!

Im Vergleich zu den Standardeinstellungen beim Ändern der Größe von IM-Bildern haben meine Empfehlungen im Durchschnitt 82% gewonnen.


Im Vergleich zu den Standardeinstellungen in WordPress, in dem ImageMagick "under the hood" verwendet wird, haben meine Einstellungen im Durchschnitt 77% gewonnen.


Im Vergleich zu anderen CMS und Tools, die ImageMagick verwenden, haben meine Einstellungen bis zu 144% gewonnen.


Ich erinnere Sie daran, dass sich herausstellte, dass alle Bilder nicht von der Ausgabe von Photoshop zu unterscheiden waren.

Wie Sie dies in Ihren Projekten umsetzen


Bash Shell

Hier können Sie der Datei .bash_aliases (oder .bashrc) die Makrofunktion hinzufügen, die meinen empfohlenen Befehl ersetzt:

smartresize() {
   mogrify -path $3 -filter Triangle -define filter:support=2 -thumbnail $2 -unsharp 0.25x0.08+8.3+0.045 -dither None -posterize 136 -quality 82 -define jpeg:fancy-upsampling=off -define png:compression-filter=5 -define png:compression-level=9 -define png:compression-strategy=1 -define png:exclude-chunk=all -interlace none -colorspace sRGB $1
}


Und du musst es so nennen:

smartresize inputfile.png 300 outputdir/


Node.js

Mit dem npm-Paket namens imagemagick können Sie ImageMagick verwenden. Wenn Sie es verwenden, können Sie eine Größenänderungsfunktion wie folgt hinzufügen:

var im = require('imagemagick');
var inputPath = 'path/to/input';
var outputPath = 'path/to/output';
var width = 300; // output width in pixels
var args = [
   inputPath,
   '-filter',
   'Triangle',
   '-define',
   'filter:support=2',
   '-thumbnail',
   width,
   '-unsharp 0.25x0.25+8+0.065',
   '-dither None',
   '-posterize 136',
   '-quality 82',
   '-define jpeg:fancy-upsampling=off',
   '-define png:compression-filter=5',
   '-define png:compression-level=9',
   '-define png:compression-strategy=1',
   '-define png:exclude-chunk=all',
   '-interlace none',
   '-colorspace sRGB',
   '-strip',
   outputPath
];
im.convert(args, function(err, stdout, stderr) {
   // do stuff
});


Grunzen

Wenn Sie Grunt zum Ausführen von Aufgaben verwenden, habe ich speziell für Sie eine Aufgabe namens grunt-respimg ( npm ) erstellt, die alle von mir beschriebenen Aufgaben ausführt . Es kann wie folgt in Ihre Projekte aufgenommen werden:

npm install grunt-respimg --save-dev


Und dann kann es in der Grunt-Datei gemacht werden:

grunt.initConfig({
respimg: {
default: {
options: {
widths: [200, 400]
},
files: [{
expand: true,
cwd: 'src/img/',
src: ['**.{gif,jpg,png,svg}'],
dest: 'build/img/'
}]
}
},
});
grunt.loadNpmTasks('grunt-respimg');


Php

In PHP ist ImageMagick unter dem Namen Imagick integriert . Leider ist es dort begrenzt und kann nicht alles tun, was ich empfohlen habe - konfigurieren Sie insbesondere den Sampling-Filter so, dass er die Thumbnail-Funktion verwendet.

Aber Sie haben Glück - ich habe das PHP-Respimg-Modul ( Packagist ) entwickelt, das alles bietet, was Sie brauchen. Es kann mit Composer in das Projekt aufgenommen werden :

composer require nwtn/php-respimg


Und ändern Sie dann die Größe der Bilder wie folgt:

require_once('vendor/autoload.php');
use nwtn\Respimg as Respimg;
$image = new Respimg($input_filename);
$image->smartResize($output_width, 0, false);
$image->writeImage($output_filename);


Content-Management-Systeme

Wenn Ihr CMS auf PHP läuft, lesen Sie den Abschnitt "PHP" und machen Sie ein Plugin daraus. Wenn Sie WordPress verwenden, können Sie das RICG Responsive Images- Plugin verwenden . Nach der Installation müssen Sie der Datei functions.php Folgendes hinzufügen, um sie zu aktivieren:

function custom_theme_setup() {
   add_theme_support( 'advanced-image-compression' );
}
add_action( 'after_setup_theme', 'custom_theme_setup' );


Andere CMS bieten auf die eine oder andere Weise Zugriff auf Bildfunktionen - siehe deren Dokumentation.

Leistung


In meinen Tests stellte ich fest, dass IM im Vergleich zu der Standardeinstellung „Größe ändern“ 2,25-mal mehr Zeit für die Verarbeitung von Bildern benötigte.

Fazit


Designer und Entwickler haben großen Einfluss darauf, wie das Web funktioniert. Wir können Websites schneller machen, ihre Wahrnehmung durch Benutzer verbessern und unsere Inhalte sogar auf neue Märkte bringen . Das Reduzieren des Bildvolumens ist ganz einfach und wirkt sich erheblich auf die Leistungssteigerung der Website aus. Ich hoffe, dass all diese Informationen für Sie nützlich sind und es Ihnen ermöglichen, Ihre Website für Ihre Benutzer zu verbessern.

Referenzen


grunzen-respimg
php-respimg
RICG Responsive Images Plugin

Jetzt auch beliebt: