MB-Support

パソコン初心者のサポートページ

写真、または、画像を縮小する方法

 デジカメで撮影した写真をホームページに掲載する方法で、サムネイルをクリックしてオリジナルサイズの画像をリンクさせる場合、縮小画像を別に作成する必要があります。単純にオリジナルサイズの画像の width と height を変更しただけでは、容量の大きい元画像を読み込ませてしまうので、縮小した画像を別に用意しましょう。


前回 の「ホームページに写真を掲載する方法(サムネイルからオリジナル画像へ)」の続きです。 デジタルカメラ で撮影した写真を掲載する場合、ページのスペースの都合でオリジナルサイズの写真をそまま埋め込む方法は、ファイルの容量的にも難しいと思われます。 そこで、オリジナルサイズとは別に縮小画像を作成して、その一覧を表示し、クリックする事でオリジナルサイズの画像を別ウインドウで表示する方法が一般的です。 今回は縮小画像の作り方をご紹介します。



写真、または、画像を縮小する方法はアプリケーションに依存しますが、Windows に付属するペイントでも可能です。 例えば右は、デスクトップの「pic」フォルダにオリジナルサイズの写真「001.jpg」があります。 この写真のサイズは、492 × 369 となっています。試しにこの写真の縮小画像をペイントで作成してみます。



ファイルにポインタを移動して右クリックします。 表示されたメニューから「プログラムを開く(O)」を左クリックして、さらに「ペイント」を左クリックします。 ペイントを先に起動して、写真を開いても同じです。



メニューの「変形(I)」→「サイズ変更/傾斜(S)」を左クリックします。



現時点では、オリジナルサイズの写真 492 × 369 を、そのままペイントで開いているので、水平方向、垂直方向、共に 100 % が指定されています。 縮小するためには、100 % より低い数値を設定する事になります。 さらに、縦横非を固定するには、水平方向と垂直方向を同じパーセンテージにする必要があります。 水平方向は画像の横幅、垂直方向は画像の高さを変更します。まず、どちらを重視するかを決めましょう。なお、Windows 7 からピクセルで指定可能になりました。その説明は以下のリンク先を参照して下さい。

写真、または、画像を任意のサイズに縮小する方法



ここでは画像の横幅を統一する事にします。 試しに、30 % を指定して縮小を実行してみましょう。水平方向と垂直方向に 30 と入力して、「OK」を左クリックします。



画像の縦横の幅が 30 % 縮小されました。 この時点では保存していないので、メニューの「編集」→「元に戻す」で変更する前のサイズに戻せます。



保存していない状態で、30 % 縮小したサイズを知るには、計算すれば良いのですが、メニューの「変形(I)」→「キャンパスの色とサイズ(A)」を左クリックすると分かります。 右では 492 × 369 の画像が 148 × 111 に縮小されている事が分かります。



この縮小画像で良いか否かを決めるのは自分です。例えば、ページの横幅が固定されている場合、縮小画像を何枚表示する事ができるのかを考えましょう。ページの横幅が600pxだった場合、横に表示できる縮小画像の枚数は、600÷148で4枚となります。



幅 148 px の画像を 4 枚横に並べるのに必要なページの幅は、148 px × 4 枚 = 592 px となり、600 px 以内に収める事ができるものの、各画像とのスペースが厳しいものになります。 ならば、30 % ではなく、29 % に変更してみましょう。 メニューの「編集」→「元に戻す」で変更する前のサイズに戻し、再びメニューの「変形(I)」→「サイズ変更/傾斜(S)」を左クリックして、水平方向、垂直方向を 29 % に指定して「OK」を左クリックします。



幅 148 px の画像を 4 枚横に並べるのに必要なページの幅は、148 px × 4 枚 = 592 px となり、600 px 以内に収める事ができるものの、各画像とのスペースが厳しいものになります。 ならば、30 % ではなく、29 % に変更してみましょう。メニューの「編集」→「元に戻す」で変更する前のサイズに戻し、再びメニューの「変形(I)」→「サイズ変更/傾斜(S)」を左クリックして、水平方向、垂直方向を 29 % に指定して「OK」を左クリックします。



縮小画像のサイズの決め方は、サイト制作者の好みですが、できれば各画像のサイズは統一したいものです。 元画像のサイズが異なると、ペイントだけでは面倒な作業になりますが、写真の場合は、カメラの設定でほぼ固定された大きさなので、ここで「29%(例)」と決めてしまえば、すべての写真にこれを適用する事で統一できます。



縮小画像を保存するため、メニューの「ファイル(F)」→「名前を付けて保存(A)」を左クリックします。この時、上書き保存してしまうと、元サイズの画像が縮小画像に置き換わってしまうので注意しましょう。縮小画像は別ファイルとして保存します。



縮小画像を保管する場所は、同一フォルダでも別フォルダでも構いません。 別フォルダを指定する場合は、オリジナルサイズの画像を補完するフォルダが「pic」ならば、分かりやすいように「pic_small」や「spic」などの名前にすると良いでしょう。 この場合はフォルダが別になるため、ファイル名はオリジナル画像と同じでも構いません。 今回は同一フォルダに保管してみます。オリジナルサイズの画像が「001.jpg」なので、「small(スモール)」の「s」と追加して「s001.jpg」とします。これならば、「001.jpg」の縮小画像は「s001.jpg」であると簡単に判断できます。これは、制作者の好みで決めて構いません。名前を入力したら、「保存(S)」を左クリックします。



同一フォルダにオリジナルサイズの画像「001.jpg」と縮小画像「s001.jpg」が保管されました。 縮小画像はファイルサイズが 33.6 KB から 5.23 KB まで減らす事ができました。 オリジナルサイズの画像をそのまま貼り付けるのと、約 6 枚の縮小画像を貼り付けるのと、ダウンロードするファイル容量は同じになります。


HTMLソース(メモ帳)

<html>
<head>
<title>題名</title>
</head>
<body>
<center>

<!-- 画像1 -->
<a href="001.jpg"><img src="s001.jpg" border="0" /></a>
<!-- 画像2 -->
<a href="002.jpg"><img src="s002.jpg" border="0" /></a>
<!-- 画像3 -->
<a href="003.jpg"><img src="s003.jpg" border="0" /></a>
<!-- 画像4 -->
<a href="004.jpg"><img src="s004.jpg" border="0" /></a><br />
<!-- 画像5 -->
<a href="005.jpg"><img src="s005.jpg" border="0" /></a>
<!-- 画像6 -->
<a href="006.jpg"><img src="s006.jpg" border="0" /></a>
<!-- 画像7 -->
<a href="007.jpg"><img src="s007.jpg" border="0" /></a>
<!-- 画像8 -->
<a href="008.jpg"><img src="s008.jpg" border="0" /></a>

</center>
</body>
</html>

ブラウザ


以上で、縮小画像の一覧からオリジナルサイズの画像へリンクする事ができました。 上のソースでは省略しましたが、縮小画像の img タグ内に width と height を記入するのが望ましい。さらに、alt="説明" を記入すると尚良いでしょう。 もし、オリジナルサイズの画像を別ウインドウで開かせたい場合は、target="_blank" を挿入します。 例えば、001.jpg だけを例にすると、以下のソースとなります。

<a href="001.jpg" target="_blank"><img src="s001.jpg" border="0" width="143" height="108" alt="シガー" /></a>



となります。複数の縮小画像を一度に作成するには、Microsoft Office などに付属する画像処理専用のアプリケーションが便利です。 次は、フルスクリーンスライドショーを作って、画像表示を凝ったものにしてみましょう。




戻る 一覧表示 次へ


Copyright © 2019 MB-Support パソコン初心者のサポートページ All Rights Reserved.

管理人のご挨拶プライバシーポリシー著作権/免責事項