Allgemeines

Bei Bildskalierungen gilt, dass die Resultate häufig nicht in der Qualität überzeugend sind, wenn der Faktor der Skalierung zu groß ist. Als Beispiel gelten Bilder aus Digitalkameras mit z.B. 10 Mega-Pixel (4000x2500 Pixel), die auf Thumbnail-Größen von 150x150 Pixel verkleinert werden sollen. In diesem Beispiel wird auf etwa 1/25 reduziert. Diese Schwäche zeigt sich quer durch die Bank bei jeglicher -auch kommerzieller- Software. Man erreicht jedoch eine insgesamt bessere Qualität durch iterative Skalierung von z.B. zwei 2 x 1/5. Für die Arbeit mit OpenCms ergibt sich die Konsequenz, dass Sie bitte nicht Rohdaten aus Digitalkameras direkt hochladen, sondern tatsächlich Web-taugliche Versionen von etwas maximal 1500x1500 Pixel erzeugen. Nach obigem Beispiel verbleibt dann eine Skalierung auf 1/10, was die Algorithmen in guter Qualität zu Leisten im Stande sind. Skalieren Sie also bitte vorher Ihre Grafiken auf geeignete Dimensionen.



Automatische Skalierung beim Upload

In OpenCms ist in der Zwischenzeit beim Upload eine automatische Skalierung realisiert. Grafiken werden auf 2000x2000 Pixel skaliert. 

Die Skalierung erfolgt auf alle Upload-Varianten, egal ob als Einzeldatei, in einem ZIP-Archiv mit automatischem Entpacken (Basic-Upload) oder per GWT.



Motivation

Bildmaterial liegt vielen Fällen in unterschiedlichen Grafikformaten (JPG, TIF, GIF, BMP, ..) oder -größen vor. Die Nutzung der Grafiken kann innerhalb einer Website mehrfach geschehen, z.B. in einer Vorschau als kleines Thumbnail und einer qualitativ hochwertigen Detailansicht. Das Ziel ist es, die Grafik nur einmalig im System zu speichern und davon alle notwendigen Varianten abzuleiten. Dies leistet OpenCms und konvertiert aufgrund Ihrer Anweisung. Sie müssen leider hierfür in HTML eingebettete Grafiken per Hand mit den richtigen Operatoren versehen. Sie suchen daher in der Quellcodeansicht der Seite nach dem Bild (Tag <img src="bild.jpg" />) und ergänzen den Dateinamen mit dem Suffix "?__scale=" plus den zusätzlichen Operatoren nach folgender Tabelle:

OperatorBeschreibung
w Breite (width) in Pixel
h Höhe (height) in Pixel
c Hintergrundfarbe (color) für Ränder (RGB-Format von 000000=schwarz bis FFFFFF=weiß)
q Qualität (quality) für verlustbehaftete Formate wie JPG (Werte 0-100), nicht kleiner als 85 wählen!
f Filterfunktion:
shadow für Schatten
grayscale für schwarz-weiß
t Render-Mode mit folgenden Werten:
0,1 skaliert seitenverhältnistreu, Grafik ist in der spezifizierten Größe und hat ggf. farbigen Rand
2 skaliert seitenverhältnistreu absolut auf die Größe (Überschuss wird abgeschnitten) 
3 skaliert seitenverhältnistreu auf eine ggf. kleinere Größe (kein farbiger Rand!)
4 skaliert nicht seitenverhältnistreu absolut auf die Größe (wird gezerrt) 

Sie können mehrere Operatoren als Parameter anwenden. Diese werden per Kommata getrennt. Einzelne Parameter werden mit ihrem Namen, einem Doppelpunkt und dem Wert angegeben (z.B. w:600). Das komplette Tag erhält damit die folgende Form:

<img src="bild.jpg?__scale=parameter1:wert1,parameter2:wert2,..." >


Beispiele

ErgebnisParameter
Das normale Tag für ein Bild:
<img src="bild1.jpg" 
alt="Mallorca" />

Das Bild mit einer Skalierung von 150x150 Pixeln mit schwarzen Rändern in einer Qualität von 75%:

<img src="bild1.jpg?__scale=w:150,
h:150,c:000000,q:75" 
alt="Mallorca" />

Zur besseren Lesbarkeit sind die Parameter umgebrochen, müssen aber in Ihrem Code ohne Trennzeichen zusammen stehen!

Das Bild mit einer Skalierung von 125x125 Pixeln mit schwarzen Rändern in einer (mangelhaften!) Qualität von 20%:

<img src="bild1.jpg?__scale=w:125,
h:125,c:000000,q:20" 
alt="Mallorca" />

 

Das Bild mit einer Skalierung von 100x100 Pixeln ohne Rändern in einer Qualität von 100%:

<img src="bild1.jpg?__scale=w:100,
h:100,q:85,t:4,f:shadow" 
alt="Mallorca" />

 

Das Bild mit einer Skalierung von 100x100 Pixeln ohne Rändern in einer Qualität von 75% mit Schatten:
<img src="bild1.jpg?__scale=w:100,
h:100,q:85,t:4,f:shadow" 
alt="Mallorca" />
Das Bild mit einer Skalierung von 100x100 Pixeln ohne Ränder in einer Qualität von 100% als Schwarz/Weiß-Grafik:
<img src="bild1.jpg?__scale=w:100,
h:100,c:000000,q:100,t:3,f:grayscale" 
alt="Mallorca" />

 



Hinweise

  • Die Skalierung erfolgt seitenverhältnistreu, d.h. Ihre Pixelangaben definieren die Größe der Grafik, die aber evtl. Ränder enthält
  • Entfernen oder korrigieren Sie mögliche Attribute width oder height im Tag img
  • Die width- oder height-Angaben, die nicht den tatsächlichen Größenangaben des Bildes entsprechen, veranlassen den Browser eine Skalierung gemäß dieser Daten durchzuführen. Der fundamentale Unterschied ist die schlechtere Qualität der browsereigenen Algorithmen. Vermeiden Sie daher unbedingt diese Technik der Browserskalierung. In der Zwischenzeit können aktuelle Browser verbessert skalieren. 
  • Wählen Sie eine ausreichend Größe Qualitätsstufe (>75%). Denken Sie weniger an Dateigrößen und Übertragungszeiten, denn vielmehr an Qualität und erkennbaren Details.
  • Benutzen Sie nicht die Skalierung, wenn Ihr Bild unverändert bleibt, d.h. Sie auf eine identische Größe skalieren. Dies benötigt unnötige Rechenzeit.