画質

画質はピクセルベースの画像の大きさを表します。高画質とは、画像がシャープで鮮明に見えることを意味します。逆に、画質が低いとは、画像が粗く粗く見えることを意味します。

カメラで撮影された画像やビジュアルアーティストによって作成された画像のほとんどは、以下に示す画像のように高品質で保存されます。

適切な寸法

画像を画面の幅全体に表示したい場合は、まず画像のサイズが正確であることを確認してください。

画像サイズが不十分です

200 x 150 の品質の画像は、幅 100 ピクセル、高さ 75 ピクセルのスペースに収まります。ただし、幅 800 ピクセル、高さ 600 ピクセルの画面をカバーするように拡大すると、ぼやけてピクセル化されて表示されます。この場合、品質が不十分になります。

画像サイズが大きすぎる

57600 x 38400 の品質の画像は、800 x 600 の画面に縮小しても問題なく表示されます。逆に、はるかに品質の低い画像 (例: 1000 x 800) は適切で、余分なデータはありません。品質が大きすぎる画像は効果がなく、アップロードやダウンロードに時間がかかります。これにより、Web ページの速度も低下します。

画質ガイドライン

ウェブサイトに写真を追加する前に、次の点を確認してください。

• 適切な画像形式を選択する
• 写真の質を高める

アップロードに最適な画像ファイルの種類は、PNG、JPEG、SVG、WebP です。 ウェブ上で最もよく使用される画像ファイルの種類について詳しく知る.

Webflowでの画像の利用

Webflow サイトに画像を組み込むには、次の 2 つの方法があります。 

• 埋め込み画像として
• 背景画像として

埋め込み画像

サイトに埋め込み画像が含まれている場合、Webflow は自動的にこの画像を強化し、さまざまな品質のさまざまなバージョンを作成します。

ユーザーが埋め込み画像を含むページを開くと、ブラウザはそのユーザーの画面品質に基づいて最適な画像を提供します。 レスポンシブ画像の詳細を見る. 

背景画像

パーツやコンテナなどの要素に背景画像を設定する場合、元の画像が適用されます。Webflow は背景画像のレスポンシブ バージョンを作成しません。つまり、適切な品質の強化された画像をアップロードする必要があります。

画像を強化する最適な方法は、通常の実用的な表示を計画し、Web サイトのユーザーについて考えることです。

たとえば、15 インチ MacBook Pro の解像度は 2880 x 1800 です。このディスプレイには、幅 3000 ピクセルの画像が最適です。より大きなディスプレイでは、画像を拡大しても見栄えがよくなります。

ただし、モバイル デバイスのサイト ユーザーは、より大きなブレークポイントで使用される同じ大きな背景画像をダウンロードするため、これは理想的ではありません。背景画像のバリエーションをアップロードし、各ブレークポイントに新しい背景画像バージョンを導入することができます。これにより、より広いブレークポイントまたはより狭いブレークポイントに合わせて背景画像が最適化されます。

画像圧縮の変更

Photoshop などの画像エディタを使用して、画像形式の品質を変更できます。画像エディタは画像を圧縮し、ファイル サイズを縮小できます。