Dieser Artikel enthält alles, was du darüber wissen musst, wie du deine Bilder für das Web vorbereitest. Es listet die empfohlenen Bildgrößen für die Verwendung im Sitebuilder auf und erläutert auch, wie du Bilder richtig speicherst, damit sie optimiert sind.
Bildgröße und Format
Die maximale Bildgröße, die du im Sitebuilder verwenden kannst, beträgt 5 MB. Um größere Bilder hochzuladen, könnte ein Upgrade erforderlich sein.
Folgende Dateiformate werden akzeptiert: .jpg, .jpeg, .png, .gif. Erfahre mehr über Bildformate.
Bilder innerhalb des Inhalts
Die empfohlene Breite für Bilder, die in Artikel- und Textblöcken verwendet werden sollen, beträgt 1200 px.
Hinweis: Der Raum um das Bild kann je nach Bildschirmgröße variieren.
Vollbildbilder
Bestimmte Blöcke ermöglichen es dir, Hintergründe zu ersetzen und Vollbildbilder hinzuzufügen, die von links nach rechts über den gesamten Bildschirm reichen.
Die empfohlene Breite für Vollbildbilder beträgt mindestens 1920 px. Auf diese Weise sicherst du, dass deine Vollbildbilder auf jedem Gerät gut aussehen.
Vorformatierte Zuschnittgitter
Wenn du dein Bild hochlädst, möchtest du vielleicht deine Bildposition und den Fokuspunkt ändern oder Gitter darum platzieren. Die Zuschnitt- und Fokuspunktfunktionen können dir dabei helfen, dein Bild schön innerhalb des Blocks zu positionieren, ohne das Design zu beeinträchtigen.
Auf diese Weise sehen deine Blöcke professionell aus, ohne dass du Bildbearbeitungswerkzeuge verwenden musst. Lies mehr über diese Funktionen in unserem dedizierten Tutorial.
Hinweis: Stelle sicher, dass die Auflösung deiner Bilder hoch genug ist, damit sie beim Zoomen nicht verschwommen erscheinen.
Bildgrößen für deine Website
Es könnte sein, dass die empfohlenen Größen nicht deinen Bedürfnissen entsprechen. Der Sitebuilder passt automatisch die Größe deiner Bilder an das Blockdesign an, um sicherzustellen, dass deine Website professionell aussieht.
Bilder für Retina-Bildschirme
Für Retina-Geräte musst du die Pixeldichte des Bildes verdoppeln. Das bedeutet, dass du Bilder benötigst, die doppelt so groß sind wie für Retina-Geräte, damit sie frei von Unschärfe und scharf aussehen. Wenn du einen Bildraum von 750x500 px hast, sollte das hochgeladene Bild für Retina-Bildschirme 1500x1000 px sein. Auf einem nicht-Retina-Gerät bleiben die angezeigten Bilder gleich.
Die Dateigröße deiner Bilder
Schwere und nicht optimierte Bilder auf deiner Website hochzuladen, verlangsamt deine Seite und führt zu einer schlechten Benutzererfahrung. Du solltest darüber nachdenken, welchen Dateityp du verwenden möchtest, JPG, PNG oder GIF, und sie im richtigen Farbformat speichern, nämlich sRGB für das Web.
Beim Exportieren für das Web mit einem Bildbearbeitungstool von Drittanbietern wie Adobe Photoshop solltest du eine Exportqualität von 65-75% wählen. Das stellt das richtige Gleichgewicht zwischen Qualität und optimaler Dateigröße sicher.
Du kannst Tools von Drittanbietern zur Bildgrößenanpassung verwenden, um überschüssige Daten aus Bildern zu entfernen und die Dateigröße zu reduzieren, zum Beispiel JPEG Mini oder TinyPNG.
Benennen deiner Bilddatei
Für Dateinamen von Bildern solltest du sicherstellen, dass sie für jedes einzelne Bild geeignet sind. Verwende nur lateinische Buchstaben, Zahlen, Unterstriche und Bindestriche. Es ist am besten, Fragezeichen, Leerzeichen, Prozentzeichen und so weiter zu vermeiden, da sie SEO-unfreundliche Bildnamen erstellen.
Beste Praktiken für das Hochladen von Bildern
- Das Hochladen großer, nicht optimierter Bilder führt nicht nur zu Problemen mit der Benutzererfahrung auf deiner Website, sondern verursacht auch langsame Ladezeiten, eine höhere Absprungrate und eine niedrigere Platzierung in Suchmaschinen. Du kannst deine Website-Geschwindigkeit mit dem GTMetrics-Tool testen.
- Für horizontale Bilder versuche, breitere Aufnahmen als üblich für deine Webinhalte zu machen, um ein Beschneiden wichtiger Bildinhalte zu vermeiden.
- Wenn du Bilder für die Verwendung im Galerie-Block vorbereitest, stelle sicher, dass sie alle dieselbe Höhe haben, unabhängig davon, ob sie horizontal oder vertikal sind.