こんにちは。デザインブログねるねるです!今回は、画像の拡張子についてご紹介します。デザイン初心者さん必見です!拡張子の基本そもそも拡張子ってなに?拡張子とは、コンピュータファイルの名前の末尾に付けられる「.」から始まる通常3文字の文字列のことで、拡張子にはそのファイルの種類や形式を示す役割があります。コンピューターは、この拡張子によって適切なアプリケーションを認識し、ファイルを開いています。可逆圧縮について可逆圧縮とは、画像のデータを圧縮しても、あとで完全に元の状態に戻せる圧縮方法です。画像の画質や情報がまったく劣化しないため、図やイラスト、文字の多い画像の保存に適しています。代表的な形式はPNGやGIFなどです。可逆圧縮は下記の場合に適切です。写真を綺麗なまま保存したいとき図や文字が多い画像(スクリーンショット、図表など)非可逆圧縮について非可逆圧縮とは、画像データの一部を削って圧縮する方法で、一度圧縮すると元に完全には戻せません。ファイルサイズを小さくできるため、写真の保存やウェブページの表示速度を重視する場面でよく使われます。代表的な形式はJPEGやWEBPなどです。非逆圧縮は下記の場合に適切です。写真を大量に保存したいときウェブページで表示を速くしたいときよく使われる画像の拡張子一覧JPG/JPEG(ジェーペグ) JPEG/JPGは写真やリアルなイメージを効果的に圧縮し、比較的小さいファイルサイズで1,677万色を表現できます。比較的軽量で綺麗な画像のためWebサイトでもよく使われる画像ファイルで、スマホで撮影した際にもJPEG/JPG形式の画像で保存されることが多く、画像ファイルの中でも特に広く利用されている形式です。少し画質を落として軽くする「非可逆圧縮」を用いています。【メリット】広い互換性視覚的に自然な画質見た目を維持したまま高圧縮が可能【デメリット】背景の透過ができない繰り返し編集・保存には不向き図や文字がはっきりした画像・イラストなどには向いていない (※その場合はPNGの方が適している)PNG(ピング)PNGは、画像を高画質のまま保存できる形式のひとつで「可逆圧縮」という方法を用いています。つまり保存しても画質がまったく劣化せず、元の状態を正確に保ったままデータを圧縮できます。また、背景を透明にできる「透過機能」があるのも大きな特徴で、ロゴやアイコンなどのデザイン素材としても広く使われております。【メリット】画質が劣化しない圧縮しても復元できる線や文字がくっきり表示される【デメリット】印刷用には向いていないファイルサイズが大きくなりやすいアニメーション非対応(※PNG単体では)GIF(ジフ)GIFは、画像を動かすことができる珍しい形式のひとつです。最大の特徴は、複数の画像を連続で表示することで、アニメーションのような動きを表現できる点にあります。そのため、SNSやチャットアプリなどで「動くスタンプ」や「短いリアクション画像」としてよく利用されています。GIFは「可逆圧縮」です。【メリット】アニメーション対応ファイルサイズが軽い圧縮しても復元できる背景の透過が可能(※半透明は不可)【デメリット】音声が入れられない色の制限(最大256色)圧縮効率があまり高くない長時間のアニメーションには不向きWebP(ウェッピー)WebPとは、Googleが開発した次世代型の画像フォーマットであり、高圧縮かつ高画質を実現できることが最大の特徴です。この形式は、JPEGやPNG、GIFのそれぞれの長所を取り入れながら、より効率的なデータ圧縮と高い互換性を目指して設計されました。WebPは、「可逆圧縮・非可逆圧縮」の両方に対応しており、用途に応じた柔軟な使い分けが可能です。【メリット】圧縮率が非常に高いWebでの表示速度が速いアニメーションや透過にも対応【デメリット】一部の古いブラウザやアプリで非対応(※主要なブラウザではほぼ対応)画像編集ソフトが制限される(※古いPhotoshopやIllustratorなどは使えない)SVG(エスブイジー)SVGは、画像をベクター形式で表現する画像フォーマットです。サイズを自由に拡大・縮小しても画質が劣化しないという特性があります。画像をピクセル(点の集合)で保存するのではなく、図形・線・文字などを数式やコードで定義します。そのため、非常にシャープで美しい表示が可能で、主にアイコン、ロゴ、図表、UIパーツ、地図などに用いられます。SVGは「可逆圧縮」です。【メリット】編集・加工がしやすい拡大しても画質が劣化しない非常に軽量なファイルサイズSEOやアクセシビリティにも貢献【デメリット】写真や複雑な画像には不向きJPG・PNGで保存するとSVGに戻せない編集や作成に専門的な知識が必要なこともTIFF(ティフ)TIFFは、高品質な画像データを保存するためのフォーマットであり、主に印刷業界やスキャナー、医療・建築・地図などの専門分野で利用されている形式です。特に、画質や情報の正確性が重視される場面において、非常に信頼性の高い形式として広く採用されております。TIFFは、「可逆圧縮・非可逆圧縮」の両方に対応しており、用途に応じた柔軟な使い分けが可能です。【メリット】高解像度・高画質多くの色情報に対応複数ページ対応(マルチページTIFF)【デメリット】ファイルサイズが非常に大きいソフトによって対応状況が異なるブラウザやSNSが対応していない場合が多いまとめJPEGPNGGIFWebPSVGTIFF用途Web上の写真・画像ロゴ・図形透過したい画像アニメーションしたい画像Web上で軽量化したい画像二次元のグラフィック画像宣材写真・高精細な写真透過×〇〇(簡易的)〇〇×画質の変化非可逆圧縮可逆圧縮可逆圧縮両方可能可逆圧縮可逆圧縮色数1677万色256万色または1677万色256色1677万色制限ないが、複雑な写真は不向き1677万色基本的な知識ですが、知っておくだけで作業が円滑に進みます!ゆっくり覚えて身に付けましょう!