Web素材/Web素材の基礎知識とマナー

画像素材のサイズを小さくする3つ+αの方法 画像を小さくしてみよう(5ページ目)

Windowsを使う方向けに、身近なツールで画像素材を縮小する方法を紹介します。方法や画像によって処理結果が微妙に異なりますので、皆様も手近なツールを使って実験してみてください。

執筆者:浅野 今日子

「HTML」でサイズを調整する方法…でも、あまりオススメできません

さいごにもうひとつ、画像そのものにはそのものには手を加えず、HTMLで画像の画像の表示サイズ指定して表示する方法をご紹介します。実は、これはあまりおすすめしたくない方法なのですが、HTMLの知識として覚えておいて損はありません。ただし、あまりに巨大な画像ファイルをこの方法で表示させると、とんでもなくページの表示が重くなり、サイトを訪れた方に迷惑がかかりますので、それはやめておきましょう。

方法自体は簡単です。ページのHTMLを記述する際にIMGタグの 「width(横幅)」「height(縦幅)」で指定すれば良いのです。

★補足★
これは、IMGタグの 「width(横幅)」「height(縦幅)」を使ってはいけない、ということではありません。むしろ、先に適正なサイズに縮小してある画像であれば、その画像のピクセルサイズをそのままwidthheightに指定して記述するのは大推奨!です。

"sakura.jpg" width="200" height="150" >

ブラウザ上で表示させたのが▼こちら▼。一見綺麗に表示されるようですが…

この方法、写真の場合は一見問題ないように感じられるかもしれませんが、GIFファイルで同じ事をすると、かなり見づらいものになってしまうのです。

▼クリックすると、元のGIFファイルを表示します。

▼ちょっと汚くないですか?

実際のところ、GIFアニメ素材の場合、HTMLで操作する以外にサイズを小さくする方法はとりあえず思いつきません(それはまぁ、やってやれないわけじゃないんですが)。ですが、それはどうしようもない事なのです。この場合は無理してその素材を使わず、別のサイズの合う素材を探すか、もしくは使用をあきらめた方が良いのではないでしょうか。


※記事内容は執筆時点のものです。最新の内容をご確認ください。
※OSやアプリ、ソフトのバージョンによっては画面表示、操作方法が異なる可能性があります。

あわせて読みたい

あなたにオススメ