Bildzoom: imgpop

Bilder werden mit diesem Modul verkleinert eingefügt und können per Anklicken/Antippen auf die maximale Bildgröße skaliert und mit einem Titel angezeigt werden. Erneutes Anklicken/Antippen verkleinert das Bild wieder.

Hinweis

Es gibt neuere Variante, die eleganteren Code erzeugt und mehr Steuerungsmöglichkeiten anbietet: imgmag.

Aufruf

[imgpop HREF TITEL ID CSS]

HRFE

Die Datei mit Pfad relativ zur Root der Domain

TITEL

Ein (optionaler) Bildtitel

ID

Eine (optionale) ID für Querverweise

CSS

(Optionale) Formatklasse(n) zur Ausrichtung des Bildes

• Wird nur die Bildquelle angegeben, werden die im Modul vorgegebenen Standards gesetzt.
• Der Titel muss mit " umfasst werden, wenn er aus mehreren Worten besteht.
• Sollen mehrere Format-Klassen verwendet werden, gilt das dafür analog (z.B. "right max30").
• Die Vergrößerung erfolgt ausschließlich mit CSS – das in der Stil-Vorlage vorhanden sein muss.
• Der Titel wird als Untertitel der Vergrößerung ausgegeben.
• Der ID muss eindeutig vergeben werden, wenn mehrere Vergrößerungen auf einer Seite verwendet werden.
• Mit "stil1 stil2 …" können mehrere Stile für das umschließende div mitgegeben werden.

Das Modul

Das Modul fügt einen HTML-Abschnitt ein, der mittels CSS den gewünschten Effekt erzeugt.

imgpop href "Titel=Keine Bildbeschreibung verfügbar" ID=ipp css=right
<div class="ipop §§§css§§§">
	<a class="iboxx" href="#§§§ID§§§">
		<img loading=lazy src="§§§href§§§" title="Für Beschreibung bitte anklicken" />
		<span class="glo"><span class="imag">🔍</span></span>
	</a>
	<a class="imgbox" id="§§§ID§§§" href="#_">
		<img loading=lazy src="§§§href§§§">
		<span class="imgboxtitle">§§§Titel§§§</span>
	</a>
</div>

Verarbeitung

Beim Einfügen von Bildern sollte die tatsächlich erforderliche Größe, Qualität und Dimension des Bildes bedacht und eine damit kleinstmögliche Dateigröße erzeugt werden.

Manuelle Vorarbeit lohnt sich

Thumbnail-Generatoren“ sind beliebt, weil sie für den Ersteller bequem sind. Den Preis zahlen die Webseiten-Besucher. Damit die Bilder „brauchbar“ aussehen, wird selten eine effiziente Kompression oder das zweckmäßigste Bildformat gewählt. Trotz mikroskopischer Bildgröße ist die Dateigröße häufig erschreckend groß. Die öffnen beim Anklicken/Antippen ein ebenso schlecht gerechnetes, nachzuladendes Bild, meistens per Javascript. Viele redundante Daten und Zugriffe, extrem nervtötend, wenn gerade nur GPRS verfügbar ist.

Mit einem geeigneten Werkzeug (ich favorisiere Photoline) können Bilder fast immer auf einen Bruchteil ihrer Original-Dateigröße bei dennoch ansprechender Präsentation reduziert werden. Ausgehend von den gebräuchlichen Bildschirmgrößen ist die Anzeige von Bildern mit 4k2 oder mehr, von einem Automaten mangelhaft „passend gerechnet“, grober Unfug: Der eigentliche Vorteil hohen Auflösung geht dabei verloren. Vor allem ist es völlig unnötig.

Bitte beachten:

Alle1 „Bild-Tools“ setzte auf vorbereitete Bilder. Sie werden „wie sie sind“ in der Webseite platziert. Die Verkleinerung übernimmt der Browser – alle gängigen können das vernünftig. Ein „skaliertes“ Original sieht oft besser aus als ein „klein gerechnetes“. Für die Anzeige werden keine Daten hin und her geschickt: Ist alles schon da.

Bilder werden via CSS auf maximal „100%“ skaliert, nie größer als die bereitgestellte Originaldimensionen. So bleibt zwar bei großen Bildschirmen womöglich verfügbarer Platz ungenutzt, dafür ist die Darstellung „1:1 scharf“.

Beispiel

[imgpop /media/bilder/bild1.svg "Das Ganze in groß…" p1 "right"] Weit hinten, …

Erzeugte Ausgabe

🔍 Das Ganze in groß…