簡単ホームページ作成ツールならAMS - まずはお試し

全国対応!まずはご相談ください 電話番号0120-55-4682

よりキレイな画像を表示するためのコツ

■大きい画像を準備する!

画像を縮小して利用する場合や多少拡大して利用する場合には、問題ありませんが、
大幅に拡大して利用すると、画像が粗くなってしまいます。

より美しく表示するためには、必ず大きめのサイズのものを準備しましょう!

■画像は適当な大きさにリサイズ!

ただし、大きめの画像をそのままサイトに掲載してしまうと、
サイトの表示速度が遅くなってしまい、閲覧者にとってストレスになりますし
SEO的にも不利になるケースも。

画像は表示する場所に合わせて、サイズを縮小してから利用しましょう!

■WEB作成にオススメの画像ファイルの種類

また、画像が適した保存形式で保存されていない場合にも、
画像がキレイに表示されなかったり、サイトの表示速度が遅くなったり、
閲覧者のストレスの原因となる場合があります。

種類 利用シーン 画像ファイルの特徴 表示
速度
PNG
(ピング)
 繊細なイラスト
 加工した写真

  • フルカラーが可能なためGIFより扱える色が多く多彩な表現ができます
  • テキストや線など色の境界がはっきりしたイメージに適しています
  • GIFよりインターレース表示が綺麗で早いです
    (表示の時、最初は荒くて次第に細かい部分まで表示)
  • 透過画像が可能です
    (背景などの一部箇所を透けて見せることが可能)
  • JPGよりもファイルサイズが大きくなりがちです
JPG
(ジェイペグ)
 写真
  • 色数が多く表現が多彩で写真に適していますが、イラストには あまり適していません
  • 写真の場合、圧縮してファイルサイズを小さくしても、その割に 画像の劣化があまりありません
  • ただし、圧縮率を上げ過ぎると画像が大きく劣化します
  • 編集するごとに画像が劣化します
GIF
(ジフ)
 イラスト
 アニメーション

  • 単純な画像ならファイルサイズが他の形式の画像より小さくなります
  • 透過画像が可能です
    (背景などの一部箇所を透けて見せることが可能)
  • インターレース表示が可能です
    (表示の時、最初は荒くて次第に細かい部分まで表示)
  • アニメーション画像が可能です
    (簡単な動画)
  • 256色しか扱えないので、色数が少なく単純な画像に適しています
  • 写真では色数が少なく表現力に劣るためイラストに適しています
BMPは、ファイルサイズが大きくなり、表示速度が遅くなるため、WEBでの利用はオススメしません。

閲覧者に不快な思いをさせないためにも、画像のファイル形式を意識しましょう。

■番外編:ブラウザで画像の『幅』と『高さ』を確認する

AMSのファイル管理画面で、画像の『幅』と『高さ』は確認はできますが、
サーバーにアップロードする前に、サイズを確認したいという方は、
ブラウザで画像を表示すると、簡単に確認ができます。

①画像ファイルを右クリック
②メニューの【プログラムから開く】をクリック
③メニューの【Firefox】をクリック(※【safari】でもOK!)

filebrowzer1.png

④タブに表示された(幅×高さ)を確認

browzertitle1.png

常時SSL+スマホサイト最適化の効果の出るホームページが39,800円!
【0120-55-4682】平日9:00~18:00 /土曜10:00~17:00

平日9:00〜18:00/土曜10:00〜17:00

メールでのお問い合わせ
AMS簡単ホームページ作成ツール
あなたのサイトをPRしましょう!
AMSマニュアル
よくある質問と回答
AMSお問合わせ

月別アーカイブ