Wie Man

So formatieren Sie Bilder für Ihre Squarespace-Site


Wenn Sie versuchen, eine eigene Website für ein Unternehmen, ein Portfolio oder ein Blog zu erstellen, ist Squarespace ein guter Ort, um sie zu erstellen. Sie bietet elegante Voreinstellungen, eine intuitive Benutzeroberfläche und zahlreiche Medienoptionen.

Für bestimmte Fotostile sind die Anforderungen von Squarespace jedoch sehr genau, und es ist nicht die einfachste Aufgabe, Ihre Bilder im eigenen Bildeditor von Squarespace korrekt zu formatieren. Stattdessen kann es für Sie einfacher sein Zuschneiden, Zoomen, Auffüllen und Formatieren Verwenden Sie Ihre Bilder mit einem Online-Editor und laden Sie sie dann direkt in Squarespace hoch, ohne sich anschließend um die Bearbeitung kümmern zu müssen.

In diesem Artikel werde ich eine komprimierte Version der umfassenden Richtlinien für die Bildgröße von Squarespace sowie kurze Tutorials zu den einfachsten Möglichkeiten zur Größenänderung und Verarbeitung Ihrer Fotos bereitstellen, um sie an die wichtigsten Abmessungen für Squarespace-Websites anzupassen. Lass uns anfangen!

  1. Richtlinien für die Größenanpassung im Quadratbereich
  2. Formatieren kniffliger Bildblöcke
  3. Formatieren großer Bilder
  4. Formatieren von Bildern mit Text

1. Richtlinien für die Größenbestimmung von Squarespace-Bildern

Squarespace hat eine Umfassender Leitfaden zu den Anforderungen an die Bildformatierung und Best Practices, aber ich werde hier einen kurzen Überblick über die wichtigsten Teile geben:

  • Es werden nur JPG-, GIF- und PNG-Dateien unterstützt
  • Keine Bild- oder GIF-Dateien über 20 MB
  • Keine Dateien über 60 MP (dies ist angesichts der Dateigrößenbeschränkung wahrscheinlich kein Problem)
  • Empfohlene Größenbeschränkungen sind 500 KB und 2500 Pixel in der Breite, um die Site-Leistung zu optimieren.
  • Geben Sie Ihren Bildern hilfreiche und beschreibende Namen – Bildnamen werden als Alternativtext verwendet, um Ihre Website für Menschen mit Sehbehinderungen zugänglich zu machen.

Squarespace empfiehlt die Verwendung von a Software von Drittanbietern Zum Ändern der Größe und Drehen Ihrer Bilder für die Site, insbesondere da der eigene Bildeditor beim Zuschneiden von Fotos keine Pixelauslesungen oder Anpassungen der Ausgabegröße bietet, sondern nur voreingestellte Seitenverhältnisse und Freiform-Zuschneidewerkzeuge bietet.

2. Formatieren kniffliger Bildblöcke

Wenn Sie die meisten Bildblöcke und voreingestellten Blöcke mit Bild und Text zusammen verwenden (z. B. “Überlappung”, “Karte” oder “Collage”), können Ihre Bilder mit Squarespace das ursprüngliche Seitenverhältnis beibehalten. Für bestimmte vorformatierte Bildblockdesigns gibt es jedoch Anforderungen an das Seitenverhältnis, die Squarespace nicht bietet. Ich werde Ihnen eine Zusammenfassung der verschiedenen Anforderungen geben, die nicht aufgeführt sind:

“Poster” und “Inline”: Bei diesen Bildformattypen werden Ihre Bilder manchmal oben und unten zugeschnitten, insbesondere wenn sie wie eine Textbeschreibung neben einem anderen Block platziert werden. Hier ist ein Beispiel:

Ein Screenshot zeigt Squarespaces unvorhersehbares Zuschneiden von Poster- und Inline-Blöcken.
Das Zuschneiden von Poster- und Inline-Bildblöcken durch Squarespace ist häufig nicht vorhersehbar.

Stellen Sie bei solchen Bildern sicher, dass Sie Probieren Sie sie zuerst aus bevor sie sich zu ihnen verpflichten. Wenn Squarespace Ihr Foto oben und unten beschneidet, laden Sie es auf Kapwing hoch und stellen Sie sicher, dass der zugeschnittene Bereich derjenige ist, den Sie auf Ihrer Seite anzeigen möchten, oder fügen Sie Polster hinzu, bis Ihr Foto nicht mehr zugeschnitten wird.

Gitter: Der Bildstil “Raster” ist streng, aber seine Regel ist äußerst einfach: Alle Bilder im Raster sind auf das gleiche Seitenverhältnis zugeschnitten, ausgewählt auf der Registerkarte Design des Editors. Sie können den Bildeditor von Squarespace verwenden, um die gewünschten Teile auszuschneiden, oder die Option Zuschneiden im Entwurfseditor deaktivieren. Mit Squarespace können Sie jedoch nur alle oder keine Fotos in Ihrem Raster zuschneiden und keine benutzerdefinierten Seitenverhältnisse für Ihre Anzeige auswählen. Für diese Aufgaben benötigen Sie eine Software von Drittanbietern wie Kapwing.

Ein Screenshot mit den Seitenverhältnisoptionen im Rasterblock von Squarespace.

Diashow: Der Bildstil “Diashow” hat die seltsamsten Formatierungsanforderungen von allen – in diesem Designtyp werden alle Ihre Bilder auf der angezeigt volle Breite des breitesten Bildes in der Galerie entweder beschnitten oder gepolstert. Wenn die Bilder, die Sie verwenden möchten, in ihren Abmessungen stark variieren, haben Sie zwei Möglichkeiten: Beschneiden Sie Ihre anderen Bilder oder fügen Sie Polsterungen an den Seiten hinzu, um dem Seitenverhältnis des breitesten Bilds zu entsprechen, oder vergrößern Sie Ihr breitestes Bild, indem Sie es auf das Bild zuschneiden Seiten oder Polsterung oben und unten.

Screenshots zeigen, wie Bilder zugeschnitten oder verkleinert werden, wenn sie im Diashow-Block von Squarespace angezeigt werden.
Bei Diashows, die stark variieren, werden Ihre höchsten Bilder stark beschnitten oder sehr klein, wenn Sie die Größe Ihrer Bilder nicht vorher ändern.

Ich empfehle die zweite Option, da Sie damit die Anzeigegröße von nur einem Bild in Ihrer Galerie reduzieren und den Rest auf Ihrer Seite besser sichtbar machen können.

Ändern der Größe von Bildern für Squarespace: Ich empfehle, Kapwing zu verwenden, um die Größe Ihrer Bilder nach Ihren Wünschen zu ändern. Gehe zum Kapwing Studio Laden Sie auf einem beliebigen Gerät das Bild hoch, dessen Größe Sie von Ihrem Gerät ändern möchten, oder fügen Sie den Link zu einem Foto ein, das Sie im Web gefunden haben. Verwenden Sie hier den Ausgabegrößen-Editor auf der rechten Seite des Studios, um die genauen Abmessungen Ihrer Fotos zu ermitteln und die Ausgabeabmessungen Ihres Projekts bis auf das Pixel zu ändern. Wenn Sie Ihr Bild ausgewählt haben, können Sie auch das Zuschneiden-Werkzeug auswählen, um einen beliebigen Teil Ihres Fotos auszuschneiden.

Screenshots aus dem Kapwing Studio zeigen, wie Sie die Größe von Bildern auf ein beliebiges Seitenverhältnis ändern können.

Für Bildblöcke vom Typ Galerie ist das Studio ein guter Ort, um alle Ihre Fotos auf das genaue Seitenverhältnis zuzuschneiden oder aufzufüllen, das Sie benötigen. Wenn Sie ein Bild in Kapwing exportieren und herunterladen, können Sie sofort “Bearbeiten” oder “Kopie erstellen” auswählen, um direkt zum Studio zurückzukehren und Ihr nächstes Foto zur Leinwand hinzuzufügen, während Sie das Seitenverhältnis beibehalten.

3. Formatieren großer Bilder

Für bestimmte Abschnitte einer Seite können Sie große Bilder verwenden, ohne sie zu beschneiden. Sie sollten jedoch sicherstellen, dass sie nicht zu groß sind. In einigen Bereichen, wie z. B. Seitenkopfzeilen, werden Bilder immer in voller Breite geladen, sodass große Dateien entstehen können lange Ladezeiten. Beispielsweise werden Banner- und Hintergrundbilder mit einer Breite von mehr als 2500 Pixel auf 2500 Pixel neu formatiert, sodass Bilder mit üblichen Hintergrundabmessungen wie 2560 x 1920 Ihre Seite langsamer laden.

Screenshots zeigen, wie Sie die Größe großer Bilder im Kapwing Studio reduzieren können.

Um die Größe Ihrer großen Bilder so zu ändern, dass sie auf Ihrer Website funktionieren, empfehle ich die Verwendung von Kapwing, da Sie damit die Abmessungen Ihres Bilds auf das Pixel anpassen und die Größe der Bilder präzise ändern können, ohne das Seitenverhältnis zu ändern. Gehen Sie in Ihrem Browser zum Kapwing Studio und laden Sie Ihr Foto von Ihrem Dateibrowser hoch. Wählen Sie die Ausgabegröße, wählen Sie Originalbild, kehren Sie zum Werkzeug zurück und wählen Sie Proportionen sperren. Geben Sie dann die Breite, die Sie für Ihr Bild mit geänderter Größe verwenden möchten, und die Höhe ein

4. Formatieren von Bildern mit Text

Squarespace empfiehlt, beim Hochladen von Dateien mit Text nur PNG-Dateien zu verwenden, da Squarespace Die Bildkomprimierung verzerrt häufig den Text in JPG-Dateien, und dies wirkt sich fast jedes Mal auf Ihr Foto aus, wenn es angezeigt wird, da Squarespace für jedes Foto mehrere Größen für unterschiedliche Browserbreiten erstellt.

Ein Screenshot zeigt, wie Bilder als PNG-Dateien im Kapwing Studio exportiert werden.

Ich empfehle, Kapwing zu verwenden, um Ihren Fotos Text hinzuzufügen und sie als PNG-Dateien zu exportieren. Im Kapwing Studio können Sie beliebig viele Textfelder hinzufügen und dabei Positionen, Stil, Umriss, Schriftart, Farbe und sogar Schlagschatteneffekte vollständig anpassen. Stellen Sie dann die Hintergrundfarbe auf “Keine Farbe“und Ihr Bild wird als PNG-Datei exportiert, die perfekt für die Bildkomprimierung von Squarespace geeignet ist.

Unabhängig vom Zweck Ihrer Squarespace-Site sind Bilder und GIFs möglicherweise der wichtigste Designaspekt. Daher ist es wichtig, dass sie genau so aussehen, wie Sie es möchten. Ich hoffe, dieser Artikel trägt dazu bei, dass der Fotoinhalt Ihrer Website sauber, professionell und schön aussieht. Wenn Sie an weiteren Tipps und Tutorials zum Erstellen großartiger digitaler Inhalte im Jahr 2021 interessiert sind, lesen Sie die Kapwing YouTube-Kanal, wo wir jede Woche mehrere neue Videos veröffentlichen. In der Zwischenzeit finden Sie einige verwandte Artikel zu professionellen Bildbearbeitungsaufgaben:

• Foto- und Videodimensionen für soziale Medien im Jahr 2021
• So verkleinern Sie Videos
• So reduzieren Sie die Bildgröße
• So passen Sie Ihr gesamtes Bild auf Instagram an

Ähnliche Artikel

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

Schaltfläche "Zurück zum Anfang"