デザはじ

「スキル・コスト・センス」ゼロからはじめるデザイン

【拡張子】初心者向け画像データ講座|これだけ覚えとけばOK【「.jpg」「.png」など違いは?】

【拡張子】初心者向け画像データ講座|これだけ覚えとけばOK【「.jpg」「.png」など違いは?】

Canva などで画像作成しているとよく目にする「jpg」や「png」。

これは画像データの拡張子ですが、違いをわかって使っていますか?

 

『よくわからないけどCanvaでダウンロードするとき「png推奨」ってあるからそのまま使ってるけど…』

 

という方、いらっしゃいませんか?

この記事でわかること

・そもそも拡張子って何?
・よく見る「jpg」「png」って何?
・それぞれの拡張子の違いは?同じ画像データじゃないの?
・「.ai」「.psd」ファイルって何?プロじゃないと使えないの?
・画像の質を落とさずにデータを軽量化したい!

違いをわかって使うとデータの軽量化につながりブログでの表示スピードがあがったり、Canvaで素材のアップロードなどがはかどりますよ。

 

記事の最後におまけとして私が使っている画像データの軽量化サービスもご紹介します。

 

 

【拡張子】初心者向け画像データ講座|これだけ覚えとけばOK【「.jpg」「.png」など違いは?】

そもそも拡張子とは?

PCを扱ったことがある方なら一度は聞いた、目にした事があるワード「拡張子」。

「○○.jpg」や「○○.png」のドット以降のアルファベットのことですが、そもそも拡張子ってなんでしょう?

 

そのファイルが何のファイルであるのか判別し、ファイルをクリックすると対応したアプリケーションで開くことができるようになっています。

引用:拡張子とは パソコン初心者講座

 

拡張子によって「これはこういった形式の画像データです、開けるアプリケーション(ソフト)は○○です」と判別できる仕組みです。

そして、画像データの拡張子にはそれぞれ特徴があり同じ画像データでも大きな違いがあります。

 

それでは、私がブログ運営やSNSなどで使う・目にする拡張子とその特徴をシェアしていきたいと思います。

JPG(.jpg、.jpeg)-一般的な写真、イラストに使われる

f:id:nyamo-sun:20211021123153j:plain

 

画像データで一番よく目にする「.jpg .jpeg」という拡張子。

画像編集ソフト・アプリで対応していないものはないと断言できるほどのメジャーなデータ形式です。

写真やイラストなど色数が多いデータ向けで圧縮によりデータを軽量化する事が可能です。

当ブログに掲載している画像データもほとんどがJPG形式です。

 

JPG向けの画像は?

・写真やイラストなど色数が多く繊細に表現したい画像
・ブログのアイキャッチなど圧縮して軽量化したい画像

PNG(.png)-背景透過ができる

f:id:nyamo-sun:20211021123217j:plain

 

ブログなどに使える素材サイトなどで使われる「.png」という形式のデータは背景を切り抜いて透明化することができます。

 

当ブログのヘッダ(ブログの先頭にあるタイトル)はPNGの画像データを使って背景の色が透けるようにしています。

 

JPGと違って背景を切り抜いた状態で保存できるので別の写真やイラストに重ねても余白を削除する作業が必要なく、使い勝手がいいのも特徴です。

Canvaにアップロードした際も背景が透過された扱いやすい画像データになります。

 

反面、表現できる色数がJPGと比較すると少なく、色数を多くするとデータも重くなりがちなのでロゴやシンプルな色数が少ないアイコン素材などに使うのがオススメです。

 

PNGにオススメの画像は?

・背景を透過して表示させたい画像
・ロゴやシンプルな色数の素材

GIF(.gif)-パラパラ漫画のように動く画像データ

Twitterなどで動画ではなく動いている画像を目にしたことはないでしょうか?

画像データを並べてパラパラ漫画のようにすることができるのが「.gif」です。

 

ブログでも文章説明に補足する形で動きがわかりやすいようGIFを掲載している方もいます。

最近ではYouTubeの動画を補足として使う方が多いので最近ではあまり見かけない印象です。

 

特徴としては動画のような画像が掲載できますが、何枚もの画像データの集まりでデータは重くなりがちなのでブログでの使用はあまりオススメはできないです。

使うとしても最小限にしたほうがいいです。

写真などをGIFにする場合、画像もあまりキレイに表示できないので使い所が限られます。

 

それでもGIF画像を作りたい!という方はペイントソフトのCLIP STUDIO PAINT PRO GIMPが対応していますし、WEB上で作成できるサービスもあります。

(「GIF画像 作成」で検索すると多くのサービスがあります)

簡単にGIF画像が作成できるサイトを参考リンクとして置いておきます。

AI(.ai)-Adobe Illustrator固有のファイル保存形式

イラスト素材サイトの「イラストAC」で素材をダウンロードするとき「AI」という項目を目にしたことはありませんか?

 

これは「.ai」という拡張子のデータでAdobeのIllustratorというソフト固有の保存形式になります。

「ベクター形式」といって拡大縮小しても画像ににじみや劣化がおきず対応するソフトで画像や文字を歪めたり曲げたりと変形などの編集も容易です。

 

Illustratorというソフトはデザイナーさんが主に扱うソフトでプロも使うソフトとあって月額料金もかなり高め。

(月額や年額制で買い切りはありません)

高いソフトは手が届かない!じゃあ、まったく使えないの?というとそうではありません。

 

Inkscape」というフリーソフトで閲覧編集が可能です。

あとは画像作成のWEBサービス「Canva」でも2021年10月のアップデートでAIファイルが読み込めるようになりました。

特にCanvaでAIファイルを使うと素材画像の拡大縮小と色変更がとても簡単で使い勝手バツグンです。

 

InkscapeとCanvaについては当ブログで以前にご紹介しているのでリンクを掲載しておきます。

注意したいのが、画像作成した作者さんのIllustratorのバージョンが古かったり、他のソフトや媒体で読み込めるように設定されていないと、InkscapeやCanvaで正常に読み込めなかったりうまく素材活用や編集できない場合があります。

 

ダウンロードした素材がそういった保存設定のデータだった場合、Illustratorじゃないとデータの閲覧・編集は難しいです。

私も「なにか手立てはないかな」と引き続きリサーチしていますので、新しい情報があれば追記します。

PSD(.psd)-Adobe Photoshop固有の保存形式

PSDはAdobeのPhotoshopというソフトの固有の保存形式です。

「レイヤー」という画像の重なりとそこに付与されたフィルターなどの効果を保持したまま保存することができます。

ペイントソフトを利用しない限りこの「レイヤー」という概念やPSD形式を扱うことはまずありませんが、素材や画像作成の講座などPSD形式で配布されることが稀にあるので頭の片隅にでも置いておくといいですね。

 

そしてこのPSD形式はPhotoshopでしか開けないの?というとこちらもそうではなく、前述のCLIP STUDIO PAINTやGIMPで閲覧・編集が可能です。

アイキャッチなどブログの画像の軽量化に!愛用のWEBサービスのご紹介

画像のデータ量を軽量化するために手っ取り早いのが「適切な拡張子のデータを利用する」「画像サイズを小さくする」ですが、表示させたい場所によっては拡張子を変えたくない、画像サイズそのものを小さくするのが難しいという場合もあります。

 

そんなときに便利なのが「画像の軽量化サービス」です。

 

画像の大きさを変更せずに、そしてできるだけ劣化させずに画像データを軽量化してくれるという便利なサービスです。

私もブログの画像などに活用しています。

 

「画像 軽量化」などと検索するとかなりの量の画像軽量化サービスがあります。

個人的な感想としては、色々使いましたがどのサイトも差はあまり感じられないので自分の使いやすいサイトを利用されるといいです。

 

なお、スマホのみで画像データを軽量化できるサービスは見つかりませでした。

スマホのみで軽量化したい場合は最低限画像サイズを小さくするという方法を取るしかありません。

(なにか新しいアプリやサービスを発見したら追記します)

 

それでは私が使っている軽量化サービスですが、なかでも特に知名度のある「TinyPNG 」です。

(英語のサイトになります)

tinypng.com

サイトに行くとパンダさんがどーんと目に入るサービスです。

軽量化サービスを検索すると知名度が高いだけあって紹介されているブログやサイトが多いですね。

 

JPG・PNGが対応しており、ドラッグ・アンド・ドロップでファイルを対象ファイルを選択できるので操作も簡単。

右上に「LOGIN」とありますが、そのまま気にせず登録不要で利用することができます。

 

実際に利用してみるとわかるのですが、軽量化したものとよくよく見比べても画像の違いはほとんどわかりません。

 

特に画像掲載を多くするブログではこの軽量化が表示スピードを大きく左右することもあるので利用することをオススメします。

 

ワードプレスの方はこのTinyPNGのプラグインがありますのでそちらを活用したほうが簡単に軽量化できるようです。

(私ははてなブログでワードプレスのプラグインに関しては門外漢なので参考リンクを貼っておきます)

まとめ:覚えておいて損はない「拡張子」

今回は「とりあえず覚えておけばOK!」な基本的な拡張子を中心にお伝えしました。

 

「なんとなく適当に使ってた!」という方も違いがわかって使い分けると、特にブロガーの方が気になるブログの表示スピードは大きな違いが出てくる場合もあるのでこれからのアイキャッチ作成などに役立ててくださいね。

 

拡張子のなかでもJPGとPNGの2つはよく使われる画像データですが、意外に違いがよくわからないで使っている方もいるので、この機会に「知らなかった!」という方は覚えておくと便利ですよ。