Aktualisiert für Sparkle 2.8

In English

En Français

In Italiano

Bilder

‍Bilder machen Ihre Website interessant und einzigartig, liefern Informationen und Kontext und erzeugen eine Stimmung. Bilder wirken sich auch am stärksten auf das Volumen einer Seite aus, da Browser sie sofort zusammen mit der Seite laden.

‍Daher können Bilder auf vielerlei Weise in eine Seite integriert werden.

‍Sie fügen ein Bild hinzu, indem Sie es einfach aus dem Finder auf die Leinwand ziehen oder im Popup-Fenster „Mehr“ ein entsprechendes Element einfügen. Sie können ein eingefügtes Bild ersetzen, indem Sie das neue auf die Miniatur in der rechten Seitenleiste oder auf das Bild auf der Leinwand ziehen.

‍Anstatt ein Bildelement zu verwenden, haben Sie auch die Möglichkeit, das Bild als Hintergrund einer Box festzulegen.

‍Leere Bildelemente können gut als Platzhalter fungieren, während Sie noch am Layout arbeiten.

‍Bitmap-Bilder

‍Der einfachste und am weitesten verbreitete Bildtyp ist die Bitmap, die Bilder von Digitalkameras und Bildbearbeitungstools umfasst, die nicht vektorbasiert sind.

‍Sparkle kann die meisten vom System unterstützen Bitmap-Formate laden, darunter JPEG, PNG, PNG mit Transparenz, GIF, TIFF und Negative von Digitalkameras (Raw-Dateien).

‍GIF-Bilder werden im vorliegenden Zustand exportiert, während PNG- und JPEG-Bilder skaliert und komprimiert werden, um sie an die Größe des verwendeten Elements anzupassen. Andere Bildformate werden als JPEG exportiert und dann auf die erforderliche Größe skaliert.

‍Für jedes Bild kann ein Titel, der in den meisten Browsern als Tooltip angezeigt wird, und eine Beschreibung festgelegt werden (die manchmal als „Alt-Tag“ bezeichnet und von Screen-Readern und anderen unterstützenden Geräten genutzt wird, im Browser ansonsten aber nicht angezeigt wird).

‍Der Rahmen des Bildelements auf der Leinwand begrenzt die Fläche, die das Bild höchstens einnehmen darf. Wie das Bild im Rahmen platziert wird, kann über die Optionen für Ausrichtung und Skalierung gesteuert werden. 

‍Wenn das Markierungsfeld „Skalieren“ deaktiviert ist, werden die ursprünglichen Abmessungen des Bildes beibehalten. Gegebenenfalls werden die Ränder durch den Rahmen des Bildelements abgeschnitten oder es entstehen Freiräume innerhalb des Elements. Das Bild kann im Bildelement über die sechs Buttons (links, zentriert, rechts sowie oben, zentriert, unten) horizontal und vertikal ausgerichtet werden. 

‍Ist das Markierungsfeld „Skalieren“ aktiviert, wendet Sparkle den passenden Skalierungsfaktor an. „Anpassen“ stellt sicher, dass das gesamte Bild sichtbar ist, führt oben und unten bzw. rechts und links jedoch zu Freiräumen. „Füllung“ sorgt dafür, dass das Bild das gesamte Element einnimmt, an den Rändern werden überstehende Bildteile jedoch abgeschnitten. 

‍Die Auflösungsanalyse unter den Skalierungsoptionen stellt die Qualität des sich ergebenden Bildes in einem Balkendiagramm dar und sagt Ihnen, ob die Anzahl der Pixel für hochauflösende (Retina-) oder normale Bildschirme ausreichend ist. Während Sie die Größe des Bildes ändern, wird das Diagramm automatisch aktualisiert. Letztendlich sollten Sie drauf achten, nicht unter „2x“ zu fallen, andernfalls wird das Bild auf vielen Geräten sichtbar niedrig aufgelöst sein.

‍Sparkle unterstützt Browser, die auf Geräten mit hoher Pixeldichte (Retina-Display) oder sehr hoher Pixeldichte (3x Retina-Display) ausgeführt werden. Wenn die Größe des ursprünglichen Bildes ausreicht, wird das Bild automatisch für normale (1x), hohe (2x) oder sehr hohe (3x) Pixeldichte generiert. Die Bilderzeugungsoptionen, die für die gesamte Website angewendet werden, finden sich in den Einstellungen.

‍Tipp: Wenn Sie ein Bild, dessen Name auf „@2x“ endet (z. B. pic@2x.png), per Drag-and-Drop bewegen, werden seine Abmessungen halbiert und es wird mit 1x-Größe auf der Leinwand platziert. Entsprechendes gilt für die @3x-Endung.

‍Vektorbilder

‍Sparkle kann SVG-Vektorbilder laden, die sich für verschiedene Auflösungen und Geräte skalieren lassen. Sie können sie genau wie Bitmap-Bilder direkt auf die Leinwand oder auf ein bereits eingefügtes Bild ziehen. SVG-Bilder werden im vorliegenden Zustand exportiert und es ist keine Auflösungsanalyse erforderlich, da sie auf jedem Gerät in jeder Größe naturgemäß immer scharf dargestellt werden.

‍Vektorbilder sind im Allgemeinen sehr kompakt und eignen sich gut für Mobilgeräte, was Sie in Fällen ideal macht, in denen es sich bei einem Bild nicht um eine Fotografie handelt.

‍SVGs können im Internet leicht gefunden und mit vielen Desktop-Apps erstellt werden, weshalb wir ihre Nutzung definitiv empfehlen.

‍Live-Fotos

‍Sparkle unterstützt die Mischform aus Foto und Video, die mit neueren iPhone-Modellen aufgenommen werden kann. Indem Sie sowohl die Bild- als auch die Videodatei einfügen, die aus der Fotos-App exportiert werden, können Sie eine Seite erstellen, auf der Besucher das Live-Foto sehen und damit interagieren können.

‍Sie erhalten das Einzelbild und die Videodatei eines Live-Fotos, indem Sie Ihre Fotos mit der Fotos-App auf dem Mac synchronisieren, das Foto auswählen und dann den Befehl „Ablage“ > „Unbearbeitetes Original exportieren“ wählen.

‍Archivbilder

‍Mit Sparkle können Sie ganz einfach hochwertige Archivbilder kostenlos bei unsplash.com oder pixabay.com herunterladen. Alle Bilder werden unter liberalen Lizenzbedingungen bereitgestellt, die Sie lesen sollten (unsplash / pixabay).

‍ Sie sind aber dennoch dafür verantwortlich, dass der abgebildete Inhalt (Personen, Logos, Privateigentum usw.) für Ihre Website geeignet ist und keine Rechte verletzt.

‍Bilder aus einem Instagram-Feed

‍Mit der Instagram-Funktion für Bilder können Sie Bilder aus einem Instagram-Feed einbetten, ohne die Website erneut veröffentlichen zu müssen. Sie können einen Feed auch über Galerie oder mit dem dazu vorgesehenen Element Instagram einbetten.

‍Das Bild verbindet sich mit Ihrem Feed auf Ihrer aktiven Website und zeigt den aktuellen Post, der in den Einstellungen festgelegt ist. Welcher aktuelle Post verwendet werden soll, wird mit einer Zahl festgelegt. Dabei steht 0 für den letzten Post, -1 bis -29 sind ältere Posts im Feed. Wenn Sie also beispielsweise den aktuellen Post Nummer 0 festlegen, zeigt das Element immer den letzten Post in Ihrem Feed an.

‍Die Einbettungsfunktion unter „Bild“ bietet die gleichen Bildeinstellungen und Filter wie das Instagram-Element, nur Ihre verschiedenen Arten von Instagram-Posts (beispielsweise Video oder Posts mit mehreren Bildern) funktionieren nicht im Bild-Element.

‍Bilder von einem Netzwerkort

‍Mit dieser Funktion werden hauptsächlich Hotlinks zu Bildern an anderen Webspeicherorten eingerichtet. Da Sparkle keinen großen Einfluss darauf hat, stehen nur wenige Optionen zur Verfügung.

‍Da Ihre Website in diesem Fall die Bandbreite eines Dritten benutzt, sollten Sie sicherstellen, dass der Betreiber der verlinkten Seite mit dem Hotlink einverstanden ist.

‍Bildoptimierung

‍Sie müssen Bilder weder skalieren noch komprimieren, bevor Sie sie in Sparkle hinzufügen. Beim Veröffentlichen oder Exportieren der Website skaliert und rekomprimiert Sparkle die Bilder nach Bedarf. Im Prinzip ist es am besten, wenn Sie hinsichtlich der Abmessungen und der Qualität Ihrer Bilder großzügig sind.

‍Großzügige Abmessungen erlauben Ihnen, das Bild in beliebiger Größe an einer beliebigen Stelle ins Layout einzubauen – zurechtschneiden können Sie es immer noch. Die Auflösungsanalyse zeigt an, ob die Qualität des veröffentlichten Bildes in Ordnung ist oder nicht. Je besser die Qualität Ihrer Bilder, desto weniger Störungen entstehen, wenn Sparkle die Bilder komprimiert und desto besser ist das veröffentlichte Ergebnis.

‍Sie sollten Bilder deshalb nicht in einer anderen Anwendung bearbeiten, bevor Sie sie in Sparkle importieren.

‍Wenn Sie mehrere Geräte hinzufügen, erstellt Sparkle mehrere Bilder und liefert jedem Anzeigegerät nur das Bild mit der für das Gerät optimalen Auflösung und Dichte. So können moderne Browser nur das herunterladen, was sie wirklich benötigen, es werden weniger Daten übertragen, und die Ladezeit wird verkürzt.

‍Sparkle erzeugt im Prinzip aus jedem eingegebenen Bild je ein Bild für jedes Gerät und jede Pixeldichte sowohl als JPEG als auch als WebP (wenn diese Option unter „Einstellungen“ aktiviert wurde).

‍Rahmen

‍Unabhängig vom Bildtyp können Sie weiter unten in der rechten Seitenleiste einen Rahmen festlegen. Der Rahmen wird um den Bildaußenrand gesetzt. Sie können eine gemeinsame Rahmeneinstellung für alle Seiten vornehmen oder jede Seite einzeln konfigurieren. Auf der Leinwand sehen Sie das genaue Ergebnis.

‍Abrunden der Ecken

‍Die Ecken von Bildern können mit einem bestimmten Pixelradius abgerundet werden, und Sie können die Ecke(n) auswählen, die abgerundet werden soll(en).

‍Wenn Sie einen Radius einstellen, der die Bildgröße überschreitet, können Sie ein quadratisches Bild so abrunden, dass Sie ein rundes Bild erhalten – ein beliebtes Vorgehen bei Profilbildern.

‍Der Rahmen folgt, wenn sichtbar, den abgerundeten Ecken.

‍Schatten

‍Schatten waren einmal schick und angesagt – aus genau diesem Grund können sie Ihr Design aber heute etwas angestaubt wirken lassen.

‍Sparsam und mit Bedacht eingesetzt, erzeugen sie jedoch einen subtilen 3D-Effekt und vermitteln einen Eindruck von Tiefe.

‍Deckkraft

‍Durch Anpassung der Deckkraft lassen sich verschiedene visuelle Effekte erzielen. Die Deckkrafteinstellung wird auf den Bildinhalt und ggf. auf Rahmen und Schatten angewendet.

‍Filter

‍Mit Filtern können Bilder schnell verbessert oder verändert werden. Filter können wieder entfernt werden, das Ausgangsbild bleibt unverändert erhalten. Die Filter können miteinander kombiniert sowie mehrmals und in verschiedener Reihenfolge verwendet werden.

‍Bei Klick

‍Ebenso wie bei Text, können Sie auch bei Bildern festlegen, was geschehen soll, wenn sie angeklickt werden. Neben den üblichen Bei Klick-Aktionen steht eine Bild-spezifische Option „Bild in Lightbox zoomen“ zur Verfügung, zum Zoomen eines Bildes in einer Lightbox, die den Inhalt der Seite überlagert.

‍Scroll-Animation

‍Die Option „Beim Scrollen animieren“ steht für verschiedene Elemente zur Verfügung (siehe Seite Animation).

‍Laden wenn sichtbar

‍Browser beginnen mit dem Laden von Bildern schon bevor der Rest der Seite vollständig geladen wurde. Wenn Ihre Seite viele Bilder enthält, werden sie alle zum Download eingereiht, wodurch sich die Ladezeit der gesamten Seite verlängern kann. Die Option „Laden wenn sichtbar“ verzögert das Laden von Bildern. Dies ist ein Nachteil bei Bildern im oberen Seitenbereich. Wenn Sie die Option aber für Bilder aktivieren, die anfangs nicht sichtbar sind, verkürzt sich die Ladezeit der Seite insgesamt. Wenn der Besucher nicht nach unten scrollt, werden nicht sichtbare Bilder gar nicht erst geladen, was zudem Bandbreite einspart.

Bitte melden Sie uns Mängel, die Ihnen in dieser Dokumentation auffallen, damit wir sie schnellstmöglich beheben können!

Copyright © 2019 River SRL 

IT06208340486 — REA FI-609716

Diese Website verwendet Cookies. Einige davon sind für die Funktion der Website erforderlich, andere unterstützen uns dabei, sie zu verbessern. Mit der Nutzung dieser Website erklären Sie sich damit einverstanden, dass diese Cookies gespeichert werden. Weitere Informationen finden Sie in unserer Datenschutzerklärung.