画像を貼り付ける
画像のサイズ変更
操作説明 ムービー 操作練習 クイズ
  この章では、画像のサイズ変更の方法を学びます。サイズ変更と言っても、ファイルサイズではなく、画像の表示サイズの変更方法の事です。
     
  1.
サイズを変更したい画像をクリックし選択します。
     
  2.
プロパティインスペクタの『幅』『高さ』をピクセル単位で設定します。
先ずは幅に1/2の値である『200』と入力しエンターキーを押します。

※画像選択時に表示されていた数値が画像本来のサイズです。
     
  3.
画像の幅が半分に縮みました。
画像が歪んでいますが、これは、幅の値のみ1/2に設定したことによります。
     
  4.
続いて、そのまま画像が選択されている状態で、プロパティインスペクタの『高さ』にも1/2の値である『200』を入力します。
※元のサイズと違う数値が入力されている場合、数値は太文字になります。
     
  5.
画像の高さが半分に縮みました。
これで、幅と高さの縮小比率が同じになったので、歪み無く画像が小さくなりました。
     
  6.
画像のサイズを元に戻す場合は、サイズを戻したい画像が選択状態であることを確認し、プロパティインスペクタの『元のサイズに戻す』をクリックします。
     
  7.
元の大きさに戻りました。
     
 
ハンドルによるサイズ変更
対象画像を選択するとサイズ変更ハンドルが表示されます。そのハンドルをドラッグすると、画像のサイズが変更されます。
 
画像を選択すると、画像の周りに『サイズ変更ハンドル』が表示されます。これをドラッグする事でサイズの変更が可能です。   ハンドルをドラッグ中は、変更後の画像の大きさが点線で示されます。希望の大きさになったらマウスを放すとサイズ変更が確定されます。
     
 
しかし、ハンドルでサイズを変更すると、画像の縦横比が変わり画像が歪む事があります。   そんな場合は、『Shiftキーを押しながらハンドルをドラッグ』すると、正しい縦横比のまま、サイズ変更が行えます。

※ しかし、実際のイメージの幅および高さに一致しない [幅] および [高さ] の値を設定すると、ブラウザでイメージが正しく表示されないことがありますので、注意してください。



画像のサイズとファイルサイズ
Dreamweaverでサイズ変更をしても、画像のファイルサイズが小さくなる訳ではないので、大きなファイルサイズの画像は読み込みに時間が掛かります。(見た目は小さくなっても、元は変わっていない)ファイルサイズを小さくさせたい場合は、画像処理ソフトなどで、ファイルサイズを小さくするしかありません。
最近のデジタルカメラは高画質なものが多く、高画質の写真をホームページに掲載しようとすると表示に大変時間が掛かってしまいます。見た目の画像のサイズが適正でも、ファイルサイズが大きい事もありますので、注意しましょう。
 
元のファイルサイズは16KBです。   画像サイズを小さくしてみましたが、ファイルサイズは小さくなりません。



サイズ変更による画質の変化
また、GIFやPNG画像は、サイズを変更すると画質が極端に悪くなるので、気をつけましょう。
 
GIF画像をDreamweaverでサイズ変更すると、   画質が悪くなるので注意しましょう。
※JPEGは、GIFに比べてサイズ変更による画質の劣化が少ないです。
  次へ