このブログでは、ホームページ制作をするにあたって必要な、画像ファイルについて説明します。
文章ばかりのホームページは、じっくり読み進めないと理解できませんが、
ホームページに目を通す人は、『読み込む時間がある人』ばかりではありません。
見てくださっている人が、画面をみて素早く理解できるよう、
画像やイラストをホームページに入れていくことで、情報が入りやすくなってきます。
画像を適切に使って、ユーザーに読みやすいホームページを制作するために、
画像ファイルについて学んでいきましょう！
ホームページ制作に知っておくべき画像の種類って？
あなたは、JPEG(ジェイペグ）やPING（ピング）といった言葉を聞いたことはありますか？
聞いたことはあるけど、どう使い分けたらいいのかわからない。。。
私も勉強したての頃は、なにが違うのかさっぱりわかりませんでした。
この二つをはじめ、いくつかの画像ファイルの種類をご紹介します！
画像ファイルの横にそれぞれの拡張子も記載しています。
拡張子とは、ファイルの名前の後ろについていて、
そこを見るとこの画像は何の画像形式なのかが何かわかります。
名前と拡張子、共に見ていきましょう！
まずは画像ファイルの種類を知っておこう
JPEG （jpg：ジェイペグ）
JPEGは『Joint Photographic Experts Group』の略で、多く使われている画像ファイルです。
主に、色が多いデータに適していて、写真をデータ化するときなどに用いられています。
| 良い点 | ・画像を圧縮できる |
| 悪い点 | ・圧縮したあと、もとの大きさには戻せない ・圧縮すると、画質が悪くなる ・保存を繰り返すたび画質が悪くなる |
圧縮でどのように変わるかというと、
よく見ると、afterのほうが少し荒くなっているのがわかります。
圧縮が大きいほど画質は小さくなり、画像が小さくなるほど荒さは目立ってきます。
圧縮とは、画像の容量を下げることをいいます。
一般的に、画像の縦横の比率を変えずにサイズを小さくすることで容量を小さくした
→圧縮した、ということになります。
PNG (png：ピング）
PNGとは、「Portable Network Graphics」の略です。
主にWebで使うために作られた画像形式で、イラストや図表・図形の使用に向いています。
| 良い点 | ・背景を透過できる（①） ・繰り返し保存しても画質は維持される（可逆圧縮という） |
| 悪い点 | ・画質は維持される分、圧縮してもデータ量は大きく減らない（②）→重たいまま |
①背景の透過って？
Point!の画像はPNG像なので、このマークの背景が透明になります。なので、芝生の画像の上に貼り付けると、このように、字や指先の三本線の背景を芝生になじませることができます。
なので、ロゴをイラストはPNGがおススメです👍
データ量は重たいまま？
圧縮しても、比較的維持されるので、画質を下げてまで圧縮ができるJPEGと比べると、データ量は軽くなりません。
その他に出てくる画像ファイル （GIF PSD)
GIF…アニメーションに対応している画像ファイルです。背景の透過処理ができて、画像圧縮も可能です。色の数が少ないので、グラデーションや写真などは向いていません。アニメーション以外の基本的な写真や画像の利用ならば、JPGやPNGで行った方が良いと思います✨
PSD…Adobeという会社が提供している、【Photoshop】という画像編集アプリのファイル形式です。Photoshopのアプリケーションをもっている人同士ならば、保存をしても再度Photoshopで編集も可能ですが、Webにそのままアップすることができないので、JPGやPNGに書き出して画像をアップする必要があります。
ai…Adobeンの【Illustrator】という、イラストやテキストを使って素材を作ることができるアプリで使用される、ファイル形式です。画質もよく、名刺やロゴ、チラシなど、印刷物を作る際の利用に適したもので、印刷会社へのデータ納品や看板など大きい印刷物の納品では、aiデータを用います。
どうやって使い分けるの？
画像ファイルには、それぞれ特徴があります。先ほども少し触れましたが、用途に合わせて使い分けていくのがおススメです！
| JPG | 写真や画像のファイルにおすすめ！圧縮したりして見やすく使い分けよう！ |
| PNG | データ量が大きいため、良い画質のまま載せたいもの・背景透過したいものPNGはしよう！ |
| GIF | アニメーション使いたいときはこれ！ |
| PSD | Photoshop同士でやりとりしたいときはこれ！ 画像を直接WebにアップするときはJPGかPNGに変換してから！ |
| ai | 印刷物や拡大するもの |
ポイントをまとめておきますので、参考にしてくださいね♪
