ECサイトやブログの運営をするのに絶対に欠かせないのが写真ですよね。
綺麗な写真は販売数にも関わってくる大切なものですし、スタッフブログでも写真を使ってイメージを伝えようとすることも多いと思います。

WEBサイト制作会社にとっては常識ですが、ECサイトを始めたい人だと考えたこともないことでしょう。
普段何気なく撮っている写真がどんなデータになっているのか、ちょっとだけ知ってみることで、より良いサイトにするための方法の一つになるかもしれません。

写真の拡張子について

拡張子とはどんなデータかを識別する記号で、サイトやツールによって様々な拡張子が存在します。〇〇社の〇〇アプリ用の拡張子などもあります。
身近ではMicrosoft社のExcelの拡張子は「.xlsx」などでしょうか。。。

写真の場合だと拡張子はjpg(jpegも同じ)が多数を占めます。
パソコンを使ったことがあれば見たこともあると思います。 例えば、「今日のランチ.jpg」とか。

jpgとはどんなデータ？？

写真だけではなく、サイトで使う画像には主にjpg、gif、png。他にもsvgやwebpなど色々な画像データがあります。
その中でjpgは使える色が多く（フルカラー）、かつ容量（〇〇MBとか）の調整がしやすいデータです。

よくサイトを見ていて画像が出てくるのが遅いこととかありませんか？
画像は綺麗だけど表示されない、荒れていて汚いけれど早く表示される。
目的に合わせて画像データも調整が必要で、違和感や不快感を感じるサイトは調整がされていないことが多いです。
※すべて画像が原因ということではありませんが、一番多い原因です。

写真が画像(jpg)になるまで

写真は最初からjpgデータではありません。
写真を撮った瞬間にレンズから入ってくる光をイメージセンサーで感知し、デジタルデータに変換してRAWデータとなります。
このRAWデータは画像にはなっておらず、ただの光情報のデータです。

なんでもないデジタルデータであるRAWデータを「RAW現像」することでjpgに変換し、初めて画像として見ることができます。

カメラやスマホで撮った写真を「上手く写ってるかな〜」と確認している時には既にjpgに変換までされているんですね。

写真にはどんな情報が入っているの？

jpgには「SOI」「セグメント」「イメージデータ」「EOI」という情報が入っています。
「SOI」はスタート部分、「EOI」は最後に。
その間にいくつもの「セグメント」と、画像となる「イメージデータ」が入っています。（実際にはもっと細かく入っていますが簡略で）

写真の場合はそのセグメントの中に「Exif」というデータが入っています。

写真で個人情報がバレるなど聞いたことがありませんか？
Exifはいつ、どこで、どんな機種で撮影したかなどの細かい情報が入っているデータです。
悪用すれば色々なことが分かってしまうということですね。

サイトに写真を掲載するためにはどんな画像データにする？

サイトを見にきたユーザーが、なかなか画像が映らないと待ちきれなくて帰ってしまいますよね。
そのため、画像の容量を軽くして表示速度を早くし、かつユーザーに不快感を与えない綺麗な画像にしなければなりません。

まずは、Exifを削除して容量を減らす。

個人情報は最初に消しましょう。このExifは容量の15〜20%くらいを占めています。
Windowsでは画像ファイルを右クリックしてプロパティを開くと削除できます。
Mac、iPhoneだとツール、Wordpressだとプラグインが必要です。
※TwitterなどSNSは自動で削除してくれます。

表示したいサイズに変更する。

写真はスマホで1500px前後の幅、デジカメだと3000px以上の画像サイズになります。
ちなみにノートパソコンの画面サイズで1300pxくらいなので、写真はサイトに掲載するには、かなり大きいサイズですよね。 サイトに最適な大きさに変更すればその分容量は減ってさらに軽くなります。

画質(解像度)の調整

写真は印刷するときのこともあるので、解像度（高いほど画質は良い）350ppi前後の解像度になっています。
しかし、WEBサイトだとPC画面に表示するため、PC画面が表示できる解像度までしか必要ありません。（多くのサイトは72ppiで作成します）
350ppiのままで綺麗にしても無意味になってしまうんですね。
※画質の変更はPhotoshopなどの専用ツールを使います。

注意点

jpgはデータを編集して書き出すことで、その度に画像が荒くなっていきます。
これはjpgというデータ自体が圧縮（いらないデータを削る）されて作られるため、書き出す度に半端な色データが削除されていく仕組みになっています。

まとめ

今回は長くなってしまうので大まかな説明しかしていませんが、興味を持ってもらえたなら詳しく調べてみてください。
写真を「綺麗」に「早く」サイトに掲載して、より良いサイトを運用して、売り上げやブランド価値も上げていきましょう。

また、写真にExifが残っていて個人情報がダダ漏れなんてことにならないように気をつけましょう。