Squarespaceは写真家、クリエイター、中小企業に信頼される人気のウェブサイトビルダーであり、画像はすべての Squarespaceサイトの中心です。しかし、最適化されていない画像は、遅いSquarespaceページの最大の原因の 一つです。このガイドでは、Squarespaceが推奨する画像サイズとフォーマット、そして最高のパフォーマンスと 視覚的品質を得るためにアップロード前に画像を最適化する方法を説明します。
Squarespaceの画像サイズの推奨事項
Squarespaceの公式ガイドラインでは以下を推奨しています:
- 最大幅: ほとんどの画像で2500px。このサイズはほとんどのデスクトップ画面の フル幅バナーセクションをカバーします。
- ファイルサイズ: 画像あたり500KB未満。Squarespaceは画像を自動的に圧縮しますが、 小さなファイルをアップロードすることで最終品質をより良く制御できます。
- フォーマット: 写真はJPEG、透明度のあるグラフィックとロゴはPNG、WebPも受け入れられます。
- 受け入れられる最大ファイルサイズ: 画像あたり20MB。これを超えると、Squarespaceは アップロードを拒否します。
Squarespaceで画像最適化が重要な理由
Squarespaceは自動画像圧縮を適用し、CDNを通じて画像を提供します。しかし、次のような理由から 適切な事前アップロード最適化の代替にはなりません:
- Squarespaceの自動圧縮は予測不可能: プラットフォームはビジターのデバイスと 接続速度によって異なる品質レベルで画像を提供することがあります。
- ページスピードはSEOに影響: GoogleはCore Web Vitals(しばしばヒーロー画像である Largest Contentful Paintを含む)をランキングシグナルとして使用します。
- 大きな画像でSquarespaceエディターが遅くなる可能性: 8MBの写真をSquarespaceエディターに アップロードすると、特に遅いインターネット接続では編集体験が遅くなる可能性があります。
さまざまなSquarespaceセクションの推奨画像サイズ
- フル幅バナー画像: 2500 x 1400px。ほとんどのウルトラワイドデスクトップ画面を カバーします。
- ギャラリー画像: 1500 x 1000pxまたは1200 x 800px。
- ブログ記事画像: 1500 x 844px(16:9比率)。
- 商品画像(Squarespace Commerce): 1500 x 1500px(正方形)。
- ロゴ: 2x解像度の250 x 100px(Retinaディスプレイ用の500 x 200px)。 ロゴには透明度付きPNGが最適です。
ステップバイステップの画像最適化ワークフロー
- ステップ1 — 目標サイズにリサイズ: カメラからの写真が6000px幅の場合は、 圧縮前にPicovertの画像リサイザーを使用して2500pxにリサイズします。
- ステップ2 — 圧縮: リサイズした画像を 画像コンプレッサーで処理します。Squarespaceの写真には、 品質80〜85が通常推奨の500KB未満の範囲に収めます。
- ステップ3 — 必要に応じてフォーマットを変換: iPhoneからHEIC写真がある場合は、 アップロード前にJPEGまたはWebPに変換してください。
- ステップ4 — アップロードして説明的なファイル名を使用: アップロード前にキーワードを 含む名前に画像をリネームします。Squarespaceはデフォルトでファイルをaltテキストとして使用するため、 SEOに役立ちます。
クイック最適化目標
- バナー画像: 2500 x 1400px、300KB未満(JPEG品質80)
- ギャラリー画像: 1200 x 800px、200KB未満
- ブログ画像: 1500 x 844px、200KB未満
- 商品画像: 1500 x 1500px、300KB未満
- ロゴ: 500 x 200px、PNG、50KB未満
Squarespaceにアップロードする前に画像を最適化することは、サイトの読み込み速度に最も大きな影響を 与える改善の一つです。Picovertの無料画像コンプレッサーから始めましょう — 外部サーバーへのアップロードなしでブラウザで画像を処理するため、最適化プロセス全体を通じて写真が プライベートに保たれます。