jpg・png・gif、ホームページでは何をどう使うのが良いの?違いと使いかた!

2020 2/06
jpg・png・gif、ホームページでは何をどう使うのが良いの?違いと使いかた!

これらの画像や写真の拡張子。

特徴を抑える事で、ホームページでの使い方が分かります。

簡単にご紹介すると、

  • jpg:かなり軽くできる(読込みが速くなる)、大体どのシステムでも使える。基本的にはコレでOK。
  • png:背景を透過できる(透明に出来る)。画像の中の文字などがボケにくい。ロゴやボタンに。
  • gif:軽い。画素数が少ないので、単色での使用がメイン。アニメーション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が特許の関係で自由に使用できなくなった時代があったんですね。

pngは正式名称は「Portable Network Graphics」ですが、コレとは別に「PNG is Not 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:背景を透過できる(透明に出来る)。画像の中の文字などがボケにくい。ロゴやボタンに。
  • gif:軽い。画素数が少ないので、単色での使用がメイン。アニメーションGIFだと動きもつけられる。

関連記事

目次
目次