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