MENU
人気記事TOP3
TOP 1
【2022年版】名刺を作成、印刷するならココ!おすすめ名刺印刷サービスランキング! この記事は約3分で読めます。 ビジネスやオフ会などで必要な名刺。名刺を作る時に手間なのがデザインや入稿データの作成です。 イラストレーターで入稿用のaiデータを作...
TOP 2
「インスタ始めました」ポップやバナーの作り方。おしゃれなテンプレートで「良いね」をGET!! 最近お店やホームページでよく見るようになった「インスタ始めました」ポップやバナー。 こんな感じのものを作ります みんな大好きインスタのユーザー数は14億7800万人...
TOP 3
Canvaとの相性バツグン!PDF入稿で印刷が出来る印刷屋さん Canvaで作ったデザインを印刷する際のオススメの印刷屋さんの紹介と、入稿方法の説明です。

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

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

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

簡単にご紹介すると、

jpg:かなり軽くできる(読込みが速くなる)、大体どのシステムでも使える。基本的にはコレでOK

png:背景を透過できる(透明に出来る)。画像の中の文字などがボケにくい。ロゴやボタンに。

gif:軽い。画素数が少ないので、単色での使用がメイン。アニメーションGIFだと動きもつけられる。

という感じです。

Kesa

本文ではもう少し突っ込んだ内容と、拡張子に合った使い方を紹介していきます。

目次

ホームページによく使われる3つの拡張子

  • jpg(ジェイペグ)
  • png(ピング)
  • gif(ジフ)

ざっくりとした説明は上述のとおり。

Kesa

ココからはもう少し踏み込んで解説していきます。

ホームページの画像は基本的にjpgでOK!

ホームページでは基本「jpg」を使えば大丈夫です。

大抵の素材サービスでもjpg形式はありますし、画像編集ツールもほとんどが対応しています

Kesa

残念ながらCanvaでは対応していません(吐き出しはPDFかpng)ので、インターネット上の「変換サービス」などを使用する事になります。

特筆すべきは圧縮率の高さ。

画像サイズが大きいと読込みに時間がかかり、ホームページの表示スピードが下がります。

この表示スピードは結構重要で、表示に5秒かかると、約40%の人が検索結果に戻ってしまったり、ページを閉じてしまいます。

そうならないように画像のサイズを軽く「圧縮」するワケです。

Kesa

jpgだと75%くらいサイズをカットできます。

背景とカブらせたくないロゴやボタンはpngで!ただしサイズに注意

pngの特徴のひとつが、「背景を透明に出来る」こと。

jpgでロゴなどを作ると、文字の周りや余白が白くなってしまいますが、pngだと透明で表示出来ます。

背景が写真などだったり、記事にカブるフローティングボタン(ページのスクロールに合わせて着いてくるボタン)を使う場合に効果を発揮します。

Kesa

jpgと比べて文字もボケにくいので、ロゴやボタンなどに。

欠点はサイズが大きくなりがちなことです。

圧縮も出来ますが、jpgほどのサイズカットは出来ないので、写真などはjpgで載せる方が無難です。

余談ですが、pngはgifの代替品として生まれました。

Kesa

gifが特許の関係で自由に使用できなくなった時代があったんですね。

pngは正式名称は「Portable Network Graphics」ですが、コレとは別に「PNG is Not Gif」という意味があるとかないとか。

今では本家より使われる機会が多くなっています。

手軽に画像を動かしたいならgifをアニメーション化!

上述のpngや、後述のsvgの登場ですっかり影が薄くなった印象のgif。

Kesa

gif自体は軽いので、単色の画像なら使い勝手はそこそこ良いです。

最近ではコマ送りの原理で動いて見える「アニメーション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だと動きもつけられる。
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次