インフォメーション
画像ファイルの拡張子を理解して、お店をきれいに紹介しましょう
「お店の雰囲気は正しく伝わっていますか？」
「『拡張子』なんて難しい言葉はめんどくさそう。」
なんて言わずに、少しだけ付き合ってください
よく使う拡張子はたった2種類！
使い分けるだけで格段にあなたのサイトが変わります
拡張子とは下のように画像を保存したときの
「.jpg」「.png」の部分のことです。
画像の拡張子の種類はいろいろありますが
基本「.jpg」と「.png」の2種類を使い分ける
だけで大丈夫です。
では、どのように使い分けたらいいのかというと、
結論から先に言います。
＜画像拡張子の使い分け まとめ＞ (画像をうまく使うコツ その3)
- 境界のはっきりした画像は「.png」を使う
- 境界のはっきりしない画像は「.jpg」を使う
ということになります。
※画像をうまく使うコツ(その1)(その2)は別ページで
ご説明しています。あわせてご確認ください。
「どのように使うの？」とか「どうやって作るの？」という
ことは後でご説明しますので、まずは、「.jpg」と「.png」の
違いからお話しします。
具体的に例を見るとわかりやすいと思いますので
下の例を見てください↓↓↓
〇境界のはっきりした画像は「.png」を使う
(例えば、下のような↓↓パソコンの画面からとった画像など)
〇境界のはっきりしない画像は「.jpg」を使う
(例えば、下のような↓↓写真画像)
比較するとよくわかる。「.jpg」と「.png」の適性と違い
まずは、境界のはっきりした画像を比べてみる
まずは、パソコンの画面が取り込んだ画像を
並べてみました。
境界のはっきりした画像なので「.png」を使うのが
正解でしたよね。
目を凝らして見比べていただくと、「.jpg」の方が
「ぼやっとした感じ」になっていませんか？
「.jpg」の画像 「.png」の画像
上の画像で、わかりにくかったという方も、
拡大してみると、もっとよくわかります↓↓
上の「.jpg」の画像を拡大すると・・
字の周りに薄い点々が見えますね。
上の「.png」の画像を拡大すると・・
字の周りは真っ白で、とてもクリアに見えませんか?
この画像処理の違いが、「.png」がはっきりした
境界の画像に適した画像ファイルということです。
次は、境界のはっきりしない写真を比べてみる
次は、写真画像を並べてみました。
境界のはっきりしない画像なので「.jpg」を使うのが
正解でしたよね。
「.jpg」の画像 「.png」の画像
よく目を凝らしてみても、あまり違いがわからない
と思いませんか?
実は、違いは見た目ではなく「ファイルサイズ」にあります。
webサイトの画像は、画面の表示スピードが速いほうが
サイトを訪れるお客様のストレスが少なくなるので
できる限りファイルサイズが小さいほうがいいのです。
ファイルサイズを見てみると・・
上の写真は「.jpg」107KB、「.png」149KB で
約1.4倍「.png」が大きくなります。
ものによっては9倍近くファイルサイズが違うものも
ありました。
ですので、写真はファイルサイズの軽い「.jpg」を使うのです。
まずは、画像の保存方法についてご説明します
「.jpg」「.png」の違いが分かったところで、
「じゃあ、どうやったら.jpgのファイルが作れるの?」
とお感じの方も多いと思います。
作り方はかんたんで、「画像処理ソフト」で画像を
保存する際に「.jpg」「.png」のどちらかの拡張子を
選んで保存することで区別して作成できます。
具体的にやり方をご説明しますので、まず手始めに
「無料画像処理ソフト」を手に入れてみましょう
私がいつも使っている無料画像処理ソフトを
ご紹介します。
「JTrim」という無料ソフトです
無料ダウンロードはこちらから → Vector ソフトを探す！
とても軽く動き、使いやすいソフトです。
長い間使っていますが、難しい加工をする
とき以外普段使いはほとんどこれを使っています。
まずはダウンロードして、ソフトを立ち上げて
みてください。
もちろんダウンロードに抵抗のある方は、お手持ちの
ソフトでも大丈夫です。
一番手軽な画像取り込み方法についてご説明します
いわゆる「ソフト」ではありませんが、小さい画面の取込は
やはり、Print Screen（プリントスクリーン）が便利です。
画面に表示されている部分の取込しかできないので、画面の
大きさまでの小さい画像専用なのですが、ソフトの立ち上げが
必要ありませんので早くてカンタンです。
私のパソコンでは下のふたつのキー
と 
を同時に押すだけで画面の取込ができます。
いまあなたのパソコンの画面に映っている画像は
この方法で簡単に取り込めますので、試しに同時押しを
やってみてください
・・・
ひとまず、何もおきませんよね。
まずは、コピーされた画像がパソコンに取り込まれている
状態ですので、次はアウトプットする作業をします。
JTrimを立ち上げて、「編集」→「貼り付け」を選択します
すると、取り込んだ画像がソフトにアウトプットされます。
取り込んだ画像を加工して、保存する際に「.jpg」「.png」
のどちらかの拡張子を選んで保存するということになります。
なお、かんたんな加工のやり方については、こちらのサイトを
参考にしてください。
保存は、あなたがわかりやすい場所にフォルダを作り、
そのフォルダに保存します。
「ファイル」→「名前を付けて保存」を選択します。
「名前を付けて保存」をクリックすると、下の画像のような
ボックスが出てきます。
まずは、先ほど準備したフォルダを選択します。
次に、ファイル名(英数字半角小文字がベター)をつけて、
「ファイルの種類」から、保存する拡張子を選びます。
プリントスクリーンで取り込んだ画像でしたら「.png」ですね。
拡張子を選び、保存すると画像が取り込めます。
いかがですか？
思いのほかカンタンだと思いませんか。
たったこれだけで、画像の保存は完了です。
一瞬で「.jpg」と「.png」ファイルを区別した保存が
マスターできました。
拡張子を区別して画像の使い分けができるようになると
貼り付けた画像がクリアに表示されるようになります。
あなたのサイトも画像を見直したらもっと素敵に変身するかもです。
※取り込んだ画像を使用する際の注意点(著作権等)について
記事を書きましたので、ぜひ参考にしてください。
→ お店の写真を紹介する際の、画像の入手や注意点についてご説明
あなたもグーペでお店を素敵に紹介してみませんか?
下のボタンを押すと「公式サイト」にリンクしています。
店舗のwebサイトに強い「グーペ(Goope)に興味がある」
という方は、こちらのボタンから グーペーとはどのような
サービスかぜひご確認ください。
↓↓↓
