Bild - Site for dev.c4.netstyle.ch

Übersicht

Bild einfügen

Direkt im Inhalt lässt sich ein Bild hochladen, von der Bilddatenbank auswählen oder das Bild zu verlinken.
Löschen
Hochladen
Wähle ein bestehendes Bild aus der Datenbank aus.
Bearbeiten
Titel: Ein hier hinterlegter Titel erscheint, wenn man mit der Maus über das Bild fährt (Hover-Effekt). Dies unterstützt die Barrierefreiheit und die Suchmaschinenoptimierung (SEO) der Website.
Alt Text: Der Alternativ-Text beschreibt den Bildinhalt. Er wird angezeigt, wenn ein Bild (z. B. bei einer schlechten Internetverbindung) nicht geladen werden kann. Zudem nutzen Screenreader diesen Text, um Menschen mit Sehbehinderung die Webseite zugänglich zu machen.
Bildunterschrift: Wenn du direkt unter deinem Bild eine Beschreibung anzeigen möchtest, kannst du diese in diesem Textfeld ergänzen.
Link: Das Bild kann direkt verlinkt werden.
Zoom: Wenn du den Zoom aktivierst, lässt sich das Bild anklicken und öffnet sich in einer Pop-Up in voller Grösse.
Ohne Kompression: Standardmässig komprimieren wir Bilder, um die Ladezeiten deiner Webseite zu optimieren. Falls dir die Bildqualität im Einzelfall nicht ausreicht, kannst du die Komprimierung hier ausschalten.

Weiterführende Themen

Link und Button

So verlinkst du auf deine eigenen Seiten oder auf externe Websites.

Bilddatenbank

In der Bilderdatenbank findest du alle Bilder deiner Website. Hier ersetzt du Bilder an allen Stellen gleichzeitig, vergibst Schlagwörter und bestimmst den Fokuspunkt.

Grössen und Qualität

Bei der Umsetzung pflegen wir die Bilder normalerweise nicht vorab optimiert ein. Lade deshalb alle Bilder in guter Qualität hoch.

Dateiformat
Für Bilder eignen sich WebP, AVIF und komprimierte JPEG im RGB-Farbraum am besten, da sie die Ladezeit kaum belasten. PNGs setzt du nur ein, wenn ein Bild Transparenz benötigt. Grafiken und Icons lädst du als SVG hoch.

Auflösung
Damit die Bilder scharf dargestellt werden, empfehlen wir, sie in doppelter Grösse der im Design definierten Masse hochzuladen, maximal 2560 px Breite. Ist ein Bild im Design mit 100 × 500 px definiert, lädst du es mit 200 × 1000 px hoch. Unser System skaliert die Bilder automatisch, wenn sie kleiner dargestellt werden.

Format
Je nach Spaltenbreite und Konfiguration wird das Bild in der passenden Grösse angezeigt. Den gewünschten Ausschnitt und das Format des Bildes legst du am besten schon vor dem Hochladen fest.

FAQ

Häufig gestellte Fragen zu Bilder

Der Bildausschnitt passt auf dem Smartphone nicht. Was tun?

Du kannst einen Fokuspunkt definieren. Damit legst du fest, welcher Bereich des Bildes auf kleineren Bildschirmen immer im Zentrum steht.

Mehr erfahren

Soll ich JPG, PNG oder SVG verwenden?

Für Bilder eignen sich komprimierte JPGs im RGB-Farbraum am besten. PNGs setzt du nur ein, wenn ein Bild Transparenz benötigt. Grafiken und Icons lädst du als SVG hoch.

In welcher Grösse soll ich meine Bilder hochladen?

In doppelter Grösse der im Design definierten Masse, maximal 2560 px Breite. Ist ein Bild im Design mit 100 × 500 px definiert, lädst du es mit 200 × 1000 px hoch.

Mein Bild wirkt zu stark komprimiert. Was kann ich tun?

Aktiviere in der Sidebar die Option Ohne Kompression. Standardmässig komprimieren wir Bilder, um die Ladezeiten zu optimieren.

Was ist der Unterschied zwischen Titel und Alt-Text?

Der Titel erscheint, wenn man mit der Maus über das Bild fährt. Der Alt-Text beschreibt den Bildinhalt: Er wird angezeigt, wenn das Bild nicht geladen werden kann, von Screenreadern vorgelesen und unterstützt die Suchmaschinenoptimierung. Für Barrierefreiheit und SEO ist also der Alt-Text entscheidend.

Was ist der Unterschied zwischen Titel und Alt-Text?

Immer direkt im Inhaltsblock Bild. Die Beschreibung in der Bilderdatenbank ist nur für die Übersicht in der Datenbank gedacht und wird nicht als Alt-Text verwendet.