Bildgrößenänderer

Das Modul Image Resizer dient zur bequemen Größenänderung von Bildern nach dem Hochladen auf die Website. Es ist besonders nützlich in Situationen, in denen dasselbe Bild in verschiedenen Bereichen der Website verwendet wird, aber in unterschiedlichen Größen angezeigt werden soll.

Zum Beispiel kann dasselbe Bild je nach Website-Design in mehreren Blöcken ausgegeben werden: in der Ankündigung, in der Materialliste und in der Vollversion des Artikels. Wenn man das Bild einfach mit HTML oder CSS verkleinert, bleibt das Bild tatsächlich groß (zum Beispiel 500×400 px), nimmt dabei aber eine kleinere Fläche ein (300×250 px). Das wirkt sich negativ auf SEO aus, da es das Seitengewicht erhöht und die Ladegeschwindigkeit verringert — Parameter, die Suchmaschinen bei der Rangfolge berücksichtigen.

Hauptfunktionen des Moduls

Image Resizer ist nicht nur aus SEO-Sicht nützlich, sondern vereinfacht auch die Arbeit von Entwicklern und Website-Administratoren erheblich. In Nachrichten- und Content-Projekten ist es oft erforderlich, ein Bild in unterschiedlichen Proportionen und Größen auszugeben. Bei der Standard-Skalierung über CSS kann das Seitenverhältnis verzerrt werden, was das Erscheinungsbild verschlechtert.

Dank der Funktion Crop (Zuschneiden) schneidet das Modul automatisch den gewünschten Bereich des Bildes aus und passt ihn ohne Verlust der Proportionen an die vorgegebenen Maße an. Sie können angeben, welcher Teil des Bildes verwendet werden soll — die Mitte, oben, unten oder die Ecken.

Arbeiten mit externen Bildern

Als zusätzliche Funktion unterstützt das Modul die Arbeit mit externen Bildern. Wenn in einem Beitrag ein Bild verwendet wird, das auf einen Drittanbieterdienst hochgeladen wurde (über einen direkten Link), kann Image Resizer es automatisch auf Ihren Server herunterladen und anschließend Folgendes ausführen:

• Größenänderung;

• Qualitätseinstellung;

• Zuschneiden des Bildes.

SEO-Optimierung von Dateinamen

Eines der Probleme von DLE ist das Hinzufügen eines Unix-Timestamps zum Bildnamen. Solche langen und unleserlichen Dateinamen bringen keinen SEO-Vorteil. Image Resizer löst dieses Problem, indem es den Wert des alt-Tags als Dateinamen verwendet.

Auf diese Weise können Bilder automatisch aussagekräftige, SEO-freundliche Namen ohne unnötige Präfixe erhalten.

Leistung und Caching

Die Größenänderung von Bildern wird nicht bei jedem Öffnen der Seite ausgeführt. Die Verarbeitung erfolgt nur beim ersten Anzeigen des Bildes, danach wird das Ergebnis im Cache gespeichert. Das bedeutet:

• die Serverlast ist minimal;

• die Ladegeschwindigkeit der Seiten sinkt nicht;

• eine erneute Verarbeitung ist nicht erforderlich.

Kurze URLs für Bilder

Wenn die Bild-URL selbst nach der Umbenennung immer noch zu lang bleibt, können Sie den Pfad
/uploads/cache/
durch ein virtuelles Verzeichnis ersetzen, zum Beispiel /resimler/.

⚠️ Wichtig: Der angegebene virtuelle Pfad darf nicht übereinstimmen mit tatsächlich verwendeten Systemverzeichnissen oder Kategorienamen.

Automatisches Hinzufügen von width und height

Nach der Größenänderung eines Bildes kann das Modul automatisch die Attribute width und height in den HTML-Code einfügen. Das wirkt sich positiv auf SEO und die Stabilität des Layouts aus, da der Browser die Bildgröße im Voraus kennt.

Anwendungsbeispiel

TPL-Code:

HTML ohne Modul
Bildgröße: standardmäßiges medium aus dem Admin-Panel

HTML mit Modul
Größe: 140×100 px, Qualität: 90%

HTML mit Modul (ohne automatische Benennung):

Bild-Upload über externen Link

Sie können Bilder von externen Websites automatisch herunterladen, indem Sie den Parameter d:1 verwenden:

Ergebnis:

Die Bildgröße wurde von 94 KB auf 12 KB reduziert, was das Gesamtgewicht der Seite erheblich verringert.

Flexibilität bei der Verwendung

Das Modul kann in jeder .tpl-Datei verwendet werden. Es ist kompatibel mit:

• image-Tags;

• zusätzlichen Feldern;

• standardmäßigen DLE-Vorlagen.

Bei Bedarf kann das Modul jederzeit aktiviert und deaktiviert werden.

Optimierung der Ladegeschwindigkeit

Wenn Sie mit der Ladegeschwindigkeit der Website nicht zufrieden sind und Bilder unterschiedlicher Größen verwenden, ermöglicht Image Resizer, den Unterschied in Google PageSpeed anschaulich zu sehen.

Für eine noch bessere Optimierung können Sie:

• Bilder aus /uploads/cache/ herunterladen;

• sie zusätzlich mit Hilfsprogrammen komprimieren (z. B. optipng);

• wieder auf den Server hochladen.

Formate zur Parameterangabe

Zuschneiden (Crop)

Vor dem Zuschneiden wird das Bild automatisch auf die minimal zulässige Größe verkleinert, danach erfolgt das Zuschneiden.

Beschreibung der Parameter

• w — Breite

• h — Höhe

• q — Qualität (0–100)

• f — Hinzufügen von width und height in HTML

• d — Hochladen eines externen Bildes auf den Server

• e — Ausrichtung der Skalierung:

  • 1 oder w — nach Breite

  • 2 oder h — nach Höhe

  • 0 oder leer — nach der längeren Seite

Zusätzliche Möglichkeiten

Im Admin-Panel kann eine vom Server unterstützte Hash-Methode ausgewählt werden. Sie wird verwendet, um einen eindeutigen Dateinamenssuffix zu erzeugen, zum Beispiel:

Dies ist ein Fork des Moduls, der Code wurde für die Arbeit auf aktuellen Versionen von DLE 19.0 angepasst (das Original befindet sich hier: https://github.com/dlenettr/image-resizer).

Wenn Sie diese Datei auf Ihre Website kopieren, geben Sie bitte einen Link zu unserer Website als Autoren der Weiterentwicklung an!