これらの画像や写真の拡張子。
特徴を抑える事で、ホームページでの使い方が分かります。
簡単にご紹介すると、
jpg：かなり軽くできる（読込みが速くなる）、大体どのシステムでも使える。基本的にはコレでOK。
png：背景を透過できる（透明に出来る）。画像の中の文字などがボケにくい。ロゴやボタンに。
gif：軽い。画素数が少ないので、単色での使用がメイン。アニメーションGIFだと動きもつけられる。
という感じです。
Kesa本文ではもう少し突っ込んだ内容と、拡張子に合った使い方を紹介していきます。
ホームページによく使われる3つの拡張子
- jpg（ジェイペグ）
- png（ピング）
- gif（ジフ）
ざっくりとした説明は上述のとおり。
Kesaココからはもう少し踏み込んで解説していきます。
ホームページの画像は基本的にjpgでOK！
ホームページでは基本「jpg」を使えば大丈夫です。
大抵の素材サービスでもjpg形式はありますし、画像編集ツールもほとんどが対応しています。
Kesa残念ながらCanvaでは対応していません（吐き出しはPDFかpng）ので、インターネット上の「変換サービス」などを使用する事になります。
特筆すべきは圧縮率の高さ。
画像サイズが大きいと読込みに時間がかかり、ホームページの表示スピードが下がります。
この表示スピードは結構重要で、表示に5秒かかると、約40%の人が検索結果に戻ってしまったり、ページを閉じてしまいます。
そうならないように画像のサイズを軽く「圧縮」するワケです。
Kesajpgだと75%くらいサイズをカットできます。
背景とカブらせたくないロゴやボタンはpngで！ただしサイズに注意
pngの特徴のひとつが、「背景を透明に出来る」こと。
jpgでロゴなどを作ると、文字の周りや余白が白くなってしまいますが、pngだと透明で表示出来ます。
背景が写真などだったり、記事にカブるフローティングボタン（ページのスクロールに合わせて着いてくるボタン）を使う場合に効果を発揮します。
Kesajpgと比べて文字もボケにくいので、ロゴやボタンなどに。
欠点はサイズが大きくなりがちなことです。
圧縮も出来ますが、jpgほどのサイズカットは出来ないので、写真などはjpgで載せる方が無難です。
余談ですが、pngはgifの代替品として生まれました。
Kesagifが特許の関係で自由に使用できなくなった時代があったんですね。
pngは正式名称は「Portable Network Graphics」ですが、コレとは別に「PNG is Not Gif」という意味があるとかないとか。
今では本家より使われる機会が多くなっています。
手軽に画像を動かしたいならgifをアニメーション化！
上述のpngや、後述のsvgの登場ですっかり影が薄くなった印象のgif。
Kesagif自体は軽いので、単色の画像なら使い勝手はそこそこ良いです。
最近ではコマ送りの原理で動いて見える「アニメーションgif」の使用がメイン。
それ以外はjpgとpngが使われる事が多いです。
ホームページに使える画像の拡張子は他にもある！
世の中には上述の3つ以外にも、色々な拡張子の画像が存在します。
「レスポンシブデザイン」が主流の今、svgという拡張子の画像も多く使われるようになりました。
Kesa聞き馴染みのないこの「SVG」
どんな拡張子なのか説明していきます。
ボケない、にじまない、それでいて軽いSVG！
どうですかコレ！
そんなに便利ならコレで良いじゃん！
Kesaとなりますが、なかなかそうはならないのが残念なところ。
このSVG、こんな難点があります。
- WordPressで使うにはちょっと手を加える必要がある
- 作るにはイラストレーターなどのツールが必要になる
「jpg」などの画像ですと、ホームページの設計によっては、悲しいくらいロゴがボケたりします。
特にレスポンシブデザインのように、ひとつのホームページを端末によってレイアウトを変える仕組みの場合に重宝します。
WordPressも多分に漏れず、テーマによってスマホがボケたり、逆にPCで荒くなったりします。
Kesaそんな時にはぜひ使ってみて下さい。
※WordPressでのsvgの使い方も別記事で紹介予定です。
まとめ : ホームページに使う画像は基本jpg、ロゴにpng、時々gif
ホームページに使う画像の拡張子は、大体この3つにしておけばOKです。
最後にもう一度それぞれの拡張子の特徴と使い方です。
- jpg：かなり軽くできる（読込みが速くなる）、大体どのシステムでも使える。基本的にはコレでOK。
- png：背景を透過できる（透明に出来る）。画像の中の文字などがボケにくい。ロゴやボタンに。
- gif：軽い。画素数が少ないので、単色での使用がメイン。アニメーションGIFだと動きもつけられる。