Eure Website zeigt jedes Bild auf jedem Gerät in passender Größe und mit passendem Ausschnitt, vom Handy bis zum großen Monitor. Eine feste Pixeltabelle braucht ihr dafür nicht. Wichtiger sind drei Dinge: ein gutes Ausgangsbild, der Fokuspunkt und bei Bedarf ein eigenes Bild für Mobilgeräte.
Worauf es ankommt
- Ein gutes Ausgangsbild: Ladet Bilder scharf und groß genug hoch. Für Bilder über die ganze Breite, etwa im Aufmacher, im CTA-Hintergrund oder im Bildtrenner, sind mindestens 1.920 px Breite gut, wir empfehlen rund 2.000 px. Für alle anderen Blöcke genügt eine kleinere Breite.
- Der Fokuspunkt: Je nach Bildschirm schneidet die Website das Bild unterschiedlich zu. Mit dem Fokuspunkt legt ihr fest, welcher Teil des Bildes immer sichtbar bleibt, zum Beispiel ein Gesicht oder ein Gebäude. Wie das geht, steht in Focal Point setzen.
- Ein eigenes Bild für Mobilgeräte: Wird ein breites Bild am Handy zu stark beschnitten, hinterlegt ein zweites, hochformatiges Bild. Siehe Alternative Bilder für Mobilgeräte.
Dateigröße und Format
Die Website rechnet eure Bilder passend zur Bildschirmbreite herunter und liefert JPGs und PNGs an Browser, die es können, automatisch als WebP aus. Die Dateien sind dann in der Regel deutlich kleiner. Umwandeln müsst ihr dafür nichts.
- JPG für Fotos: kleine Dateien bei guter Qualität.
- PNG nur, wenn ein Bild eine transparente Fläche hat, zum Beispiel ein Logo.
- Sehr große Kameradateien verkleinert ihr vor dem Hochladen am besten auf rund 2.500 px an der langen Seite. Das spart Zeit beim Hochladen und Platz in der Mediathek.
Farbprofil
Speichert Bilder für das Web im Farbraum sRGB. Er ist für Bildschirme gemacht und zeigt eure Farben am zuverlässigsten.
Alternativtext nicht vergessen
Jedes Bild, das etwas zeigt, braucht einen Alternativtext. Wie ihr ihn schreibt oder euch vorschlagen lasst, steht in Medien, Bilder und Mediathek verwalten.
Eine einfache Anleitung, wie ihr Bilder in der Mediathek zuschneiden könnt, findet ihr in Bilder in CANVAYO bearbeiten.