画像データを軽くする方法

ホームページを重くしている要因のひとつは画像です。デイスク容量が限られていることや、訪問者にストレスを与えないようにすることを考えると、画像のファイルサイズは小さいほど望ましいといえます。

一般には、次の方法で画像データを軽くすることができます。
 

  • 画像の圧縮率を上げる(JPEGファイルの場合)

    画像の圧縮率が高いと、データ容量が減り、表示にかかる時間を短縮できますが、そのぶん画質が低下しますので気をつけましょう。
     

  • 画像をGIFに変換する(JPEGファイルの場合)

    JPEGファイルをGIFファイルに変換すると、色数も自動的に256色まで落ちます。
     

  • 画像の色数を落とす

    JPEG・GIFともに、画像を減色すると、見栄えも落ちるので、両者の兼ね合いを考えましょう。
     

  • 画像サイズを小さくする

    画像ファイルを作るときに、自分のホームページのサイズに合わせて、「縦 X 横」のサイズも決めましょう。例えば、ホームページのサイズが「800 X 600 ピクセル」(だいたい15インチモニタの大きさ)だとすると、画像サイズは「800 X 600 ピクセル」もいらないですよね。「200 X 150 ピクセル」などの小さなサイズに変更すればいいわけです。

    ただし、、<img>タグのwidthやheightで表示サイズを小さくしても、ファイルサイズ自体は変わりませんので注意しましょう。
     

  • サムネイル(親指の爪ほどのサイズの縮小画像)に加工する

    画像を羅列するときにとっても便利だぴょん。
     

    「はろー!」

上記の方法のちゅらいところは、グラフィックソフトが必要だということです。でも、次のようなソフトを利用すれば、ある程度カバーできると思います。

参考までに、色使いについて詳しく知りたい方は、次のサイトをチェックしてみましょう。

WordPress、Joomla!などのCMSでは、画像の自動圧縮・サイズ調整機能が利用できたりします。 独自に画像ソフトで加工する必要もなくなってきていますが、細かい調整をしたい場合には、画像ソフトがお勧めです。

ファイル名のつけ方

HTMLファイルができたら、こんどは保存しましょう。拡張子は「.html」または「.htm」です。

ついでですが、SSI(Server Side Include)を使用するときは、呼び出すHTMLファイルの拡張子を「.shtml」としてください。(サーバー設定により異なることがあります)ちょっと似てますね。(「ほんまにちょっとやな」)

まず、トップページは、「index.html」か「index.htm」と名付けてください。(「どちて?」)

これは、ブラウザ上でトップページを自動的に表示させるための決まりです。例えば、みなさんのドメインが「yourdomain.com」だとします。「/home/yourdomain/www/」の下に「index.html(htm)」というファイルを置いていた場合、ブラウザのアドレス欄に「http://yourdomain.com/」と指定したときに、この「index.html(htm)」がブラウザに読み込まれるようにサーバが作動するのです。

つまり、「http://yourdomain.com/」と指定しても、実際には「http://yourdomain.com/index.html(htm)」が開いているのです。

逆に、「index.html(htm)」と名付けていなかった場合、サーバは、そのデイレクトリよりも下位のデイレクトリやファイルを一覧の形で表示してしまいます。これはとてもカッコ悪いです。しかもセキュリテイの面でも好ましくありません。(サーバー設定により動作が異なることがあります)

何のこっちゃようわからないかもしれませんが、とにかく決まりと思って「index.html」か「index.htm」と名付けておいてください。(「わけわかめ!」)←勇気のいる発言

トップページ以外のページは、お好きな名前を付けることができます。ただし、
 

  • 英数字半角であること(日本語は使いません。全角の英数字もダメです。)

    ×)「五月蝿い.html」
    ×)「urusai.html」
    )「urusai.html」
     

  • 英字は小文字が望ましい

    )「GREAT.html」
    )「great.html」
     

  • なるべく短くてわかりやすいこと

    ×)「namamuginamagomenamatamago.html」 (「最後まで読んでアホらし!」)
    )「nmgt.html」
     

  • 記号の使用はさける(ハイフンやアンダーバーぐらいならオーケー)

    ×)「∞♂☆§※%¢.html」
    )「cyber-p.html」
     

  • スペースを入れないこと

    ×)「gi raffe.html」
    )「giraffe.html」

 
「ぴょよよよ~ん」

WebサーバのほとんどがUNIXというOSで稼動しています。Windowsとちがって、UNIXはふつう、ファイル名の大文字・小文字を区別します。

ということは、「great.html」「GREAT.html」「great.HTML」「GREAT.HTML」「Great.html」「great.Html」などは、すべて別物として扱われてしまします。(ラボちゃん、「gReAt.HtMl」はどうだ?!)

そこで、小文字で統一することをおすすめします。また、UNIXは、日本語をほとんど認識しないので、日本語のファイル名は避けましょう。

以上のことは、HTMLファイルだけでなく、デイレクトリ(フォルダ)に名前を付けるときも同様です。

余談ですが、ホームページを構成するファイルをサーバに転送するとき、バラバラに転送するとサーバ君も判断に困ります。また、作った本人も、更新するときなどに、ゴチャゴチャしていて苦労します。

そうならないためにも、一括のデイレクトリを作り、その中にサブデイレクトリを設けて、きちんと整理しておくことをおすすめします。

なお、画像ファイルは、「image」デイレクトリで一括しておくと便利です。

 

ホームページ作成ソフト

手っ取り早くホームページを作りたい、HTMLタグを書くのが面倒だ、という方には、CMSやホームページ作成ソフトが至れり尽せりです。

初心者の方にはすごい誘惑でしょう。(「ヒヒヒッ、こっちのソフトは甘~いぞお・・・」)

おのれサタンめ・・・助けて!(「それじゃ、意味ねーだろ!」)

でも、この講座を受講しているみなさんは、ホームページのシステムを理解する意味で、最初はつらくても、タグを書くように心がけてみてください。慣れるとあんがい快感ですよ。ウフ。(「きも~」)

あるいは、いいなあと思ったホームページからHTMLタグを「拝借する」のもいいかもしれません。ただし、くれぐれも著作権侵害にならないように気を付けてください!

拝借の仕方ですが、対象のホームページにきたら、ブラウザの「ソース」(「表示」→「ソース」)をクリックすると、HTMLタグが現れます。あとは使いたい部分をコピーして、自分のHTML文書に貼りつけるだけです。(「関西風それとも広島風?」)

やっぱりもんじゃ、と言いたいところですが、ソースは「情報源」という意味ですよ、ヒポくん。(「ソー・・・すね毛はイヤよ」)←ダジャレの非難をおそれてはぐらかすヒポくん

もうどうにもこうにもガマンできない、という方には、次の作成ソフトをご紹介します。以下は、メーカー製のものでPCにインストールして使うもの、ダウンロードしたシステムをサーバーにセットして使用するCMSです。

 

メーカー製の作成ソフト

CMS

 

STEP 2 クリアー!!!

 

 

 画像2ホームページ公開前にチェックしよう 

コメントする

メールアドレスが公開されることはありません。 が付いている欄は必須項目です