imageTweak - Grafiken und Bilder während der Ausgabe optimieren

Content Management Systeme (CMS) wie WebsiteBaker sind eine feine Sache: ein Artikel ist schnell geschrieben und läßt sich mit Bildern aus der Digitalkamera, vom  Handy  oder Smartphone ansprechend auflockern und gestalten.

Voilà und schon ist der Bericht über die letzte Veranstaltung des Vereins online!

Kaum jemand macht sich hierbei Gedanken darüber, dass die im Artikel verwendeten Grafiken und Fotos in Originalgröße verwendet werden - genauso, wie sie aus der Kamera kommen: hochauflösend und mit Dateigrößen die bei jedem Bild bei mehreren Megabyte liegen. Angezeigt werden diese Fotos jedoch verkleinert, sie sollen den Artikel schließlich auflockern und ihn nicht überlagern.

Natürlich könnten Sie jedes Bild vor dem Einbinden in den Artikel mit einem Grafikprogramm bearbeiten, es auf die gewünschte Größe bringen und mit einer veringerten Auflösung - 72 dpi sind am Bildschirm völlig ausreichend - optimal vorbereiten. Der Effekt wäre enorm: so schrumpfen Bilder mit 5 Megabyte rasch auf 50 Kilobyte. Was das für die Ladegeschwindigkeit Ihrer Website bedeutet muss ich Ihnen nicht erklären. Aber wer macht sich schon so viel Arbeit? Und das für jedes Bild? Bei jeder Änderung? Bei jedem neuen Artikel?

Niemand. Genau das ist das Problem.

Die Lösung heißt imageTweak.

Das Admin-Tool imageTweak klinkt sich in den Ausgabefilter des Content Management System (CMS) WebsiteBaker ein und überprüft vor der Anzeige alle eingebundenen Grafiken und Fotos. Findet es ein Bild, das z.B. 2480 x 3508 Pixel groß ist aber z.B. mit  200 x 283 Pixel angezeigt werden soll, so rechnet imageTweak das Bild entsprechend herunter und schreibt eine neue Datei, die in einem gesonderten Verzeichnis gespeichert wird. Statt der Originaldatei wird die neue, optimal angepasste Bilddatei übertragen. Die Originaldateien werden von imageTweak nicht verändert. Wird die Seite das nächste Mal angefordert, greift imageTweak direkt auf die optimierte Datei zu und beschleunigt den Vorgang noch ein wenig. Wird die Größe des Fotos im Artikel verändert, passt imageTweak die optimierte Datei daran an. Wird das Foto aus dem Artikel entfernt, löscht imageTweak die optimierte Datei.

Das Add-on imageTweak ist die konsequente Umsetzung aus über drei Jahren Erfahrung mit den beiden Vorgängern imageOptimizer und dbImageOptimizer. Der wichtigste Unterschied zu den früheren Version liegt darin, dass imageTweak bei der Prüfung ob eine Grafik neu geschrieben werden muss oder nicht ohne Datenbankunterstützung auskommt und dadurch spürbar schneller geworden ist. Darüber hinaus kontrolliert imageTweak permanent ob Dateien noch benötigt werden und löscht fortlaufend überflüssige Dateien.

imageTweak ist schnell und effektiv. Die Installation ist problemlos, Sie werden nur in den seltensten Fällen Einstellungen ändern oder ergänzen müssen.

Die Open Source Entwicklung von imageTweak wird duch feld kommunikation & design unterstützt

Systemvoraussetzungen:

• WebsiteBaker 2.8.1
• PHP 5.2
• dbConnect_LE installiert
• Dwoo installiert
• UTF-8 Zeichensatz wird verwendet

Während der Installation legt imageTweak eine Sicherungskopie des Ausgabefilter an und trägt sich danach in den Filter ein. Damit ist das Modul betriebsbereit und beginnt sofort die Ausgabe Ihrer Website zu beschleunigen.

Sie werden spüren dass imageTweak funktioniert, indem Sie mal einen Rundgang durch Ihre Website machen...

Schauen Sie trotzdem mal bei den Admin-Tools vorbei und rufen Sie imageTweak auf. Öffnen Sie die Einstellungen werfen Sie einen Blick auf die Einstellmöglichkeiten von imageTweak, sie sind jeweils erläutert. Das Protokoll teilt ihnen Fehler und die wichtigsten Aktivitäten von imageTweak mit.

imageTweak und die Fancybox

Wenn Sie die Fancybox verwenden, kann Ihnen imageTweak ein wenig Arbeit abnehmen: verwenden Sie die große Abbildung, die von der Fancybox angezeigt werden soll, setzen Sie die gewünschte Höhe sowie Breite für das Vorschaubild und weisen Sie der Abbildung die Klasse tweak-fancybox zu. Speichern Sie die Seite und schon wird das Bild beim Anklicken im Großformat mit der Fancybox angezeigt. imageTweak optimiert automatisch das Vorschaubild und ergänzt den <img> Tag mit dem <a> Link für die Fancybox. Die Standardparameter werden automatisch gesetzt. So wird aus:

<img class="tweak-fancybox" src="http://../abbildung.jpg" width="350" height="264" />

... von imageTweak ein vollständiger Aufruf für die Fancybox erstellt:

<a href="http://../abbildung.jpg" class="grouped_elements" rel="fancybox"><img class="tweak-fancybox" src="http://../tweaked/topics/125/abbildung_350_264.jpg" width="350" height="264" /></a>

Das geht schnell und ist sehr bequem. Die Aufrufparameter für die Fancybox können Sie bei Bedarf unter den imageTweak Einstellungen ändern.

Open Source lebt von der aktiven Unterstützung durch alle Nutzer, die lizenzfreie Software nutzen. Ich freue mich über Ihre Mithilfe bei der Verbesserung dieser Dokumentation sowie über alle Fehlermeldungen, Ideen, Verbesserungsvorschläge sowie eine Spende, die dieses und weitere Open Source Projekte unterstützt.

Bitte beachten Sie auch unter Tipps & Tricks den Artikel "Quadratisch, praktisch, gut - eine Bildergalerie mit imageTweak erstellen".