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

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

 CMSの機能を利用して画像ファイルの調整を行う方法

hosting logo

 オンラインサービスを利用して画像を軽くする方法

パソコンに保存している画像を、ドラッグドロップすることにより、簡単に圧縮して軽くしてくれるサイトがあります。以下にいくつかをご紹介します。

  • Compressor.io
    4つのファイルタイプに対応しています。JPEG - PNG - GIF - SVG
    ドラッグドロップだけで、非常に簡単に画像を軽くすることができます。
    compressor1「TRY IT!」をクリックすると、画像のアップロード画面が現れます。
    compressor2圧縮(軽く)したい画像をドラッグドロップすると、圧縮が実行されます。圧縮結果とダウンロードリンクが表示されます。「DOWNLOAD YOUR FILE」ボタンをクリックして、軽くなったファイルをダウンロードしてください。

  • PNG圧縮
    PNGファイルを同時に20個まで圧縮できます。圧縮されたファイルはZIP形式で一括ダウンローするか、個別にダウンロードすることもできます。
    png1圧縮されたファイルをダウンロードすることができます。
    png2更に、画面下部のリンクをクリックして画像の種類を変更(コンバート)することができます。PNGからJPEGなどへの変換時に利用できます。
    png3
  • その他の変換サイト
    Compressnow
    JPEG-OPTIMZER
    Tiny JPG
    Tiny Png
    いずれも簡単に圧縮できる大変便利なサイトです。各サイトのポリシーを守って利用させてもらいましょう。

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

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

    画像の圧縮率が高いと、データ容量が減り、表示にかかる時間を短縮できますが、そのぶん画質が低下しますので気をつけましょう。
     
  • 画像をGIFに変換する(JPEGファイルの場合)

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

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

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

    ただし、、<img>タグのwidthやheightで表示サイズを小さくしても、ファイルサイズ自体は変わりませんので注意しましょう。
     
  • サムネイル(親指の爪ほどのサイズの縮小画像)に加工する

    画像を羅列するときにとっても便利だぴょん。
     
    「はろー!」
上記の方法のちゅらいところは、グラフィックソフトが必要だということです。でも、次のようなソフトを利用すれば、ある程度カバーできると思います。 参考までに、色使いについて詳しく知りたい方は、次のサイトをチェックしてみましょう。

 

ファイル名のつけ方

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ホームページ公開前にチェックしよう