バンドのウェブサイトで画像を最適化する5つの方法

現在、Webサイトは、同じデバイス上でさまざまな向き（横向きまたは縦向き）であっても、何百もの異なる画面サイズで表示される可能性があります。 人々があなたのサイトを見るディスプレイは、モバイルでは幅がわずか数百ピクセル、新しい高解像度ワイドスクリーンモニターでは幅が最大数千ピクセルになる可能性があります。

新しいテクノロジーは、人々がサイトを見ることができるさまざまな画面サイズを提供するため、サイトのデザインについての新しい考え方も必要でした。これにより、サイトがどの画面でも見栄えが良くなります。

ここで、「レスポンシブ」ウェブサイトデザインのコンセプトが登場します。

レスポンシブデザインのしくみ

レスポンシブWebサイトは、配置とサイズが表示されているスペースに対して「相対的」であるように構築されています。サイトをさまざまなディスプレイで表示すると、拡大または縮小して適応します。 利用可能なスペースに収まるように動き回る。

Bandzoogle Webサイトにアップロードする写真は、写真の「スペース」の大きさに応じて拡大縮小されます。

ヘッダー画像の場合、レスポンシブ画像はフレームに可能な限り「フィット」するため、これは特に重要です。 たくさんの写真を切り抜く作業が減ると、音楽を再生する時間が長くなりますよね？

バンドのWebサイトの画像を最適化して、デザインを適切にする5つの方法を見てみましょう。

1.適切な画像を選択します

レスポンシブデザインは、ヘッダー画像などのページ要素を、使用する画像ファイルの元のサイズに「比例して」スケーリングし、画像がページ上に設定されているスペースに対して「相対的」にスケーリングします。

これは、画像の比率がすべてのデバイスで維持されることを意味し、画像は常に可能な限りスペースを「埋める」ことを試みます。 これにより、画像の一部が「切り取られた」ように見えるヘッダー画像が生成される可能性があります。これはレスポンシブデザインでは避けられませんが、適切にトリミングされる画像を選択すると役立ちます。

アーティスト： Tragedy Ann

デスクトップとワイドスクリーン

ラップトップでは、ヘッダー画像は画面の幅に比例して拡大縮小されます。 モバイルデバイスでは、画像は画面の高さに基づいて拡大縮小されます。

言い換えれば、あなたの写真は常に空間の最も長い辺に比例して拡大縮小されます。

ここで、幅が1,000ピクセルの画面でこれを想像してみてください。デスクトップ/ラップトップの画面は高さよりも幅が広く、同じ画面の高さも570ピクセルです（多くのディスプレイで約16：9の比率）。

このシナリオでは、このディスプレイでは画像の幅は1,000ピクセルですが、高さは900ピクセルに拡大縮小されています。つまり、高さが570ピクセルしかないスペースでは、上下で300ピクセル以上の画像が切り取られてしまいます。絵。 頭のない写真、イケ！

モバイルとポートレートのオリエンテーション

高さ600ピクセルのモバイル画面の例でも同じ計算を行います。たとえば、この同じディスプレイの幅は約320ピクセルしかないとします。 画像がこのディスプレイに適応すると、画像の半分以上がどちらかの側で切り取られます（600ピクセルの高さのポートレート画面では、画像のサイズが幅667ピクセルに縮小されることに注意してください）。

これは、バンドの写真の端にいるドラマーを困らせる良い方法です。これは楽しいことです。 それでも...

最適化してから、ファイルをアップロードします

あなたが使用できる良いメタファーは、あなたが写真をフレーミングしているアートギャラリーにいると想像することです-風景モネを「ウィスラーの母」の肖像画のフレームに入れると、そのフレームはあなたの絵。

これはトリッキーになる可能性がある場所です-サイトビルダーはあなたが使用したい画像（またはそれらに表示されているもの）を予測することはできませんが、追加する画像を選択することは良い最初のステップです。

ヘッダーに適切な画像を選択するための簡単なヒント：

• 「近くでトリミング」された画像の使用は避けてください。画像の「フォーカス」の周囲にスペースやパディングが多いほど、さまざまなディスプレイでフォーカスが途切れる可能性が低くなります。
  
• 大きな画像を使用する-72dpiサイズの2000x1800は、通常、ほとんどのBandzoogleテーマで適切に機能し、すべてのディスプレイで画像の見栄えを良くするのに役立ちます。
  
• 向きが「正方形」に近い画像を使用してみてください-完全な正方形の画像である必要はありませんが、画像の高さと幅を同じに近づけると、通常、どのディスプレイでもうまく機能します。 この余分なスペースは、サイトがどの方向で表示されていても、呼吸の余地を与えます。
  
• 画像自体にテキストやロゴを含む画像を使用しないようにしてください。重要なテキストやブランドが訪問者のために途切れることは絶対に避けてください。
  
• 代わりに、Bandzoogleテーマエディタの[タイトル/ロゴ]オプションの下にロゴを追加します。 次に、ヘッダーに必要なテキストを「召喚状ヘッダー機能」に追加します。 このようにして、重要なメッセージがディスプレイの端で途切れることはありません。

アーティスト：マーティンとジェームズ

2.テーマに合わせてトリミングします

すでに画像をアップロードしている場合、Bandzoogleには、画像をさらに見栄えよくするための優れたツールがいくつか付属しています。

一部のテンプレートデザインは、読み込み時に「フルスクリーン」で表示され、ヘッダーの高さが調整可能で、限られたスペースにさまざまな形でヘッダー画像を表示できます（Spotlightテンプレートなど）。また、ヘッダー画像を背景として設定することもできます。あなたのページ（例えば、スライス）。

さまざまなヘッダーオプションを使用してさまざまなテーマを試すのは簡単です。「テーマの編集」>「テーマの表示」を使用してテーマのデザインを変更し、必要なテーマを選択し、デザインエディターでそのテーマをカスタマイズし、「保存」をクリックして公開します。変更します。

テーマでヘッダーが全ページの背景画像として設定されていない場合は、追加する画像の相対的なズームと位置を調整することもできます。

[コンテンツの編集]で、[コンテンツの編集]タブのヘッダー画像をクリックし、ヘッダーエディターで、ヘッダー画像のサムネイルの下にある[切り抜き]リンクをクリックします。

次に、ズームスライダーを使用してズームを調整し、画像をクリック/ドラッグして相対的な配置にします。

3.焦点を設定します

ヘッダーエディタでヘッダー画像をトリミングすると、画像の上に小さな青い点が表示される場合があります。これは、「焦点」を設定するためのものです。 これにより、画像のサイズや向きに関係なく、このドットが画像のどこに配置されていても、常に「焦点が合っている」ことが保証されます。

これは、アップロードした画像の「フォーカス」が完全に中央に配置されていない画像に非常に便利です。画像のフォーカス上で焦点をクリック/ドラッグすると、異なる画面で何が途切れても、フォーカスが前面と中央になります。 。

切り抜き、ズーム、焦点を設定したら、[保存]をクリックして切り抜きを適用し、ヘッダーエディタでもう一度[保存]をクリックして変更を適用します。

アーティスト： Anna Bassy

4.モバイルヘッダーの高さをカスタマイズします

モバイル画面と非モバイル画面の境界線が常にぼやけています。たとえば、タブレットデバイスを考えてみましょう。 「デスクトップ」になるには十分な大きさではありませんが、モバイル画面には十分な小ささではありません。

「風景」で多くのタブレットでサイトを表示すると、デスクトップやラップトップの画面と同じようにサイトが表示される場合があります。 そのタブレットを「ポートレート」として横向きにすると、すべてが変わる可能性があります。画面の幅を狭くすると、電話で表示されるものに近い「モバイル」要素が増える可能性があります。

ほとんどのBandzoogleテーマは、デフォルトで縦向きの画面に「フルハイト」ヘッダーを表示するように設定されています。これは、ヘッダー画像に左側と右側にフォーカスが含まれている場合に問題になる可能性があります。

このため、テーマでヘッダーがページの背景画像として設定されていない場合は、[テーマの編集]タブの[ヘッダー]設定で[カスタムモバイルヘッダーの高さ]オプションを有効にできます。

有効にしたら、テーマエディタの[モバイルプレビュー]アイコンをクリックし、[ヘッダーの高さ（モバイル）]スライダーを調整します。これにより、画像のスペースを調整して、画像の比率に合わせて、より多くの画像を表示できます。画像。 これを設定したら、[保存]をクリックするだけです。

5.フィルターを追加します

最後に、フィルターを設定することで、ヘッダー画像に本当に素晴らしい雰囲気を加えることができます。 ブルースを引き出したり、写真に「70年代のフィルム」のような外観を与えたり、ビンテージの白黒にしたりできます。 ここにはたくさんのオプションがあります！

Bandzoogleコントロールパネルの[テーマの編集]タブをクリックするだけで、[ヘッダー]オプションの下で、プレハブフィルターを選択したり、独自のカスタムフィルタースタイルを作成したりできます。

アーティスト： Carleen Williams

頭を悩ませるのは少し難しいかもしれませんが、Webデザイナーとの全体的なコンセンサスは、Webサイトに関してはレスポンシブがより良い方法であるということです。

それはあなたのサイトが現在そして将来利用可能なすべての画面で見栄えが良く読みやすいことを保証します、そしてあなたのサイトが良いレスポンシブプラクティスを使用するならグーグルのようなサイトはあなたをより良くランク付けします。

長期的には、自分のサイトを管理している人にとっても時間の節約になります。画像とコンテンツを最適化する最善の方法を知ることが最初のステップであり、残りはBandzoogleが処理します。

数回クリックするだけで、レスポンシブ画像を使用して音楽Webサイトを作成できます。 今日Bandzoogleであなたのウェブサイトを構築してください！