ウェブデザイナーへの道のり【第4話】加工した画像を保存してみよう！！～Photoshopでのtiffとjpgへの書き出しとは？～

今回は加工した写真や画像を必ず必要になってくるのは保存方法について紹介していくよ！！

そうだね！！大切なことだからしっかり覚えていこうね！！

まず、画像を保存するにあたって、書き出しをしていく必要があるんだ！！保存形態はいくつかあるのだけど、どんなものがあるか紹介していくね

そうそう！！使いたい場所に合わせた形状で保存していくということだよ！！

画像を保存する方法としてあげられる形式はJPEG、GIF、PNG、SVG、Tiffといったものがあるよ！！

そうだね～。今回はPhotoshopを使っていく上で、特によく使われる「JPEG、PNG、Tiff」に注目して紹介していくよ！！

まず、Webで使われることの多い画像の形態として有名なものとしては「JPEG」があげられるよ！！

JPEGは高画質で、画質指定をして保存もできる上、ファイルサイズがコンパクトなのが魅力的だよ！！

うんうん！！表現できる色の種類が1670万色と多彩ながら、高画質を保ったまま画像を圧縮と保存できるからかなり便利なのさ！！

そうだね！！JPEGはデジカメやスマホの撮影画像でもこの形式が多く用いられているからね～

１つ気をつけるとしたら、JPEGは不可逆圧縮な保存方法なので注意が必要なのさ！！

「不可逆圧縮」とは、一度画像を圧縮すると画質を元に戻せないという圧縮方法さ！！

そうそう！！加工する際は元画像をコピーしておくなど、注意しながら使う必要はあるものの、使い勝手が良いからしっかり覚えておく必要があるね！！

お次はPNGについてだけど、表現できる色の種類が最大280兆色とかなり多彩だよ！！

うんうん！！その分ファイルサイズが大きいから容量が重くなてしまうところがあるよ～

ただ、JPEGとは違って、圧縮によってデータが捨てられてしまうことがない可逆圧縮形式だから可逆圧縮を重視したい画像を作成するのに適しているのさ♪

そうだね♪PNGは、漫画やアニメのように色数の少ないものから写真まで幅広く対応できるから用途が広がるのも良いところだよ

だからこそ、PNGはJPEG形式とともに、インターネットで標準的に用いられる画像形式として広く普及しているのさ♪

最後にTiffについてだけどTIFFはJPEGのように圧縮によってデータを損なうことがないのが特徴だよ！！

そうだね♪非圧縮式なので、画像を圧縮せずに保存するということだね～

そうだね～画質の品質は良い分、ファイル容量が極端に大きくなってしまうね～

画質良くそのまま保存出来るからこそ、異なるOSやパソコン機器で画像ファイルを交換するのに向いているね

そうだね～無圧縮でホームページに使えない形式だからこそ、先ほど紹介したJPEGなどに変換する必要があるね♪

「JPEG、PNG、Tiff」について説明してきたけど、実際にPhotoshopで保存してみよう！！

まずはJPEGの書き出しだよ～♪

まずは、画面左上の「ファイル」をクリックして、「書き出し」→「書き出し形式」と進めていこう！！

書き出し形式の場面が登場するよ！！

この中の右上にあるファイル設定の中で「PNG」を「JPG」に直そう♪

そしたら、Webで使うことを想定して画像サイズを変えていくよ！！画像サイズを「幅1000px」に変えてね！！これにより、自然に「高さが750px」に変更されるよ♪

うんうん♪あとは書きだしを押せば出来上がりさ！！

次は「PNG」を書き出していこう～！！

まずは、画面左上の「ファイル」をクリックして、「別名で保存」と進めていこう！！

コンピューターまたはクラウドドキュメントに保存する選択画面が出てくるから、ひとまずここは「コンピューターに保存」を選択しよう♪

そうしたら、出てきた画面下にある「ファイル名」を入力後、「ファイルの種類」を選択してその中にある「PNG」を選択して「保存」したら完成さ♪

「PNG」と同じく、画面左上の「ファイル」をクリックして、「別名で保存」と進めていこう！！

次も「PNG」と同じく、「コンピューターに保存」を選択しよう♪

またまた「PNG」と同じく、出てきた画面下にある「ファイル名」を入力後、「ファイルの種類」を選択してその中にある「Tiff」を選択して「保存」したら完成～♪

みぃちゃんがまた１つレベルアップしたね！！

保存について紹介してきたけど、用途に合わせて保存方法を考えていくことが必要だね～！！

みぃちゃん～、ぼくに柿ピーの写真を「Tiff」の書き出しで送って～