Designの福田です。Webサイト制作を学ばれてる方でどんな時にどのファイル形式がいいの?と思うことがあると思います。画像データは、検索エンジンからも評価をされていて、画像が重いと表示速度が遅くなったりしてユーザーにストレスを与えてしまいます。今回はWeb制作で扱う画像のファイル形式やファイルの重さなどについて説明します。私がWeb制作をする際によく使うファイル形式がPNG・JPEG・SVG・WEBPです。1つずつ形式の特徴について説明していきます。Group)の略語で、画像ファイルにおけるデータ圧縮形式の1つです。JPEGのメリットJPEGは写真などの画像を、一見した限りわからない程度に画質を落とすことで、画像データはを小さく圧縮することが出来ます。JPEG形式は1,670万色を表現することができるので、風景写真など輪郭がはっきりとしていない色の変化が多いグラーデーション表現が綺麗に表現され、色の変化を滑らかに再現できます。拡張子は基本的に「jpeg」「jpg」が使うのが一般的です。JPEGのデメリットJPEGは非可逆圧縮のため、圧縮した後は元のサイズに戻すことが出来なくなります。一度小さくしたり、元の画像を上書き保存を繰り返すと徐々に劣化してしまいます。背景透過に対応していないので、目的によってPNGと使い分ける必要があります。実際に圧縮してみる実際に圧縮して画像の違いを見ていきましょう。こちらはフォトショップで画質を100%で書き出した画像です。621KB次はフォトショップで画質を50%で書き出した画像です。119KB最後に極端ですが、フォトショップで画質を1%で書き出した画像です。34KB50%まで落とすとファイルサイズはかなり小さくなっていますが、影の部分が少しノイズが出ています。1%まで落とすと画像のサイズはかなり小さくなりましたが、劣化してかなりノイズが目立っています。Graphics)の略で、主にWebサイトで使われるための形式です。PNGのメリットPNGはJPEG同様、フルカラー1670万色を扱うことができます。JPEGとは違い「可逆圧縮」の画像形式なので低画質で保存しても元の画質に戻すことができます。背景透過ができる形式です。PNGのデメリットPNGのデメリットは若干データー容量が重くなることです。画像の見た目がほぼ変わらず背景が白の場合は、私はJPEGを使用してファイルデータを軽くしています。Graphics)は画像フォーマットの一部で、ベクター形式のデータです。画像ファイルであるSVGですが、テキストエディターで編集することが可能です。このアイコンをSVGで書き出すと下のようなコードになります。d="M14,11h5c2.76,0,5-2.24,5-5"/></g></g></svg>SVGのメリットSVGファイルはベクタ形式の画像ファイルです。ベクタ形式とは画像の線や文字、色を数値化して記録しており、ブラウザがその場で描画してくれます。拡大縮小でデータが劣化することがありません。先ほどのイラスト(PNG)をWebブラウザで拡大してみます。3倍に拡大するとギザギザとなり画像が劣化しています。SVGを同じサイズに拡大すると全然違いますね。SVGは全くかすんでないのがわかります。拡大縮小で画像の劣化がないためレスポンシブデザインと相性がとても良いです。SVGは後から色やサイズ文字の変更が簡単にできます。CSSやJavaScriptでアニメーションをしたりもできます。背景透過にも対応しています。SVGのデメリット私もよく使うSVGですがデメリットもあります。SVGは画像を数値化するため、風景写真のような複雑な色、グラデーションを持つ画像は膨大な量の計算が必要になり、サイズがJPEGやPNGよりも大きくなってしまいます。平面的なイラストなどです。このWebサイトでいうと、ロゴ、各ボタンの三角形、サービスページのイラストにSVGを使用しています。WEBPWEBPはgoogleが開発している画像フォーマットで、拡張子は「.webp」です。WEBPのメリットWEBPはJPEGやPNGと比べると、同じくらいの画質の画像をより小さなファイルで保存可能です。googleのWEBPのページでは、ロスレス画像は同等のPNGと比較して26%サイズが小さく、同等のJPEG画像よりも25%〜34%サイズが小さくなると書いてあります。https://developers.google.com/speed/webp同じ画質で3割も小さなファイルで保存ができるのはすごいですよね!アニメーションや背景透過にも対応しています。WEBPのデメリットそんな優秀なWEBPですがデメリットもあります。それはIEとMacOs、iOSに対応していない点です。IEは6月でサポートが終了するのであまり気にしなくて良いですが、MacOsではCatalinia、iOSでは13以前が未対応で表示されませんでした。https://caniuse.com/webp今でもCatalinia、iOSでバージョン13以前には表示されないので対応したHTMLの書き方をしないといけません。src="/img/image.png">HTMLで画像を書く時はこのように書きますが、WEBP対応ブラウザと対応していないブラウザで書き方を変えないといけません。//未対応ではこちらを表示</picture>このようにコードが増えて書く手間がかかるのはデメリットです。WEBPに変換するツールJPEGやPNGをWEBPに変換するアプリがあります。Googleが開発した画像変換webアプリ「squoosh」ですsquooshは2018年にGoogleが提供したWebアプリで、Web上で画像の変換をすることができます。squooshにアクセスして、画像をアップロードします。画像をドラッグ&ドロップでアップロードできます。右下のメニューから「Compress」のドロップメニューをクリックして「WebP」を選択します。この画面で変換する前と変換後の画像のクオリティーと圧縮率を確認できます。Qualityのスライダーを操作すると、リアルタイムで画像の劣化状態が表示され、圧縮率も確認できます。Optimizer」で自動的にWEBPに変換してくれます。WordPressをお使いの方はプラグインを使うのも良いと思います。まとめ今回はWebで扱う画像ファイル形式(PNG・JPEG・SVG・WEBP)の種類についてご紹介しました。画像が重いと表示速度にも影響が出でしまいます。Desingを立ち上げ。得意分野は、コーディング、CMS構築、ディレクション。現在はブログ、マーケティングなどを勉強中。関連記事キーワードCSSHTMLJavaScriptSEOVue.jsWeb制作WordPressガジェットブログあわせて読みたいWeb制作の費用についてご紹介!2022-07-05Web制作ブログ【初心者の方も安心】Web制作の流れをご紹介!2022-05-18Web制作ブログWebデザインの独学にオススメのツールとオススメの本をご紹介!(デザイン編)2022-05-07Web制作ブログWeb制作のフリーランスになるには?2022-04-30Web制作ブログWebで扱う画像ファイル形式(PNG・JPEG・SVG・WEBP)を理解しよう!2022-04-29Web制作ブログWebサイトのレイアウトについて解説!2022-04-24Web制作ブログSNSでシェアWeb制作に関するお悩みがある方はお気軽にご連絡下さい。ご相談・お問い合わせメールでWeb制作に関して相談や見積もり依頼をされたい方に、お問い合わせフォームよりお問い合わせを承っております。フォームからお問い合わせ下さい。