写真2019.12.08ポコひろ先日、お客様のホームページの状況を診断しました。「ちょっとイラッとしてしまう」経験をしたことは誰もが一度はあるのではないでしょうか?原因は様々ありますが、画像(主に写真)の容量が大きいために遅延が発生していることが多々あります。スマホ検索はとても便利で手軽だからこそ、ユーザーは「遅い」ことにとても敏感です。正しい写真を正しいサイズで掲載しましょう!というのがモバイルユーザビリティの考え方のひとつです。実際、具体的にどうすればいいのかがよく分からない方もいらっしゃると思います。そこで写真の「種類」と「サイズ」についてお話させて頂きます。写真の種類(拡張子)ポコひろ種類はたくさんありますが、ここでは代表的な「JPG」「PNG」についてご説明します。JPGについて一度は見たことがあると思いますが「ジェイペグ」と読みます。大きな画像のファイルサイズを小さくできる色の扱いが多いので、写真に向いている上記ふたつが大きなメリットです。デメリットもありますが、ホームページの写真という観点ではJPG一択でいいと思って頂いて大丈夫です。ちなみに、「JPG」「JPEG」「jpg」「jpeg」は表記の違いだけで同じものです。パソコンに取り込んだ写真を「右クリック→情報を見る」などの操作で拡張子を確認することが出来ます。121212.jpgなど、末尾の「.jpg」を拡張子と言いますPNGについてこちらも一度は耳にしたことのある拡張子だと思います。「ピング」と読むのが一般的です。JPGとの大きな違いは透過情報が扱える点です。透過画像とは主に背景を消す(切り抜く)時に重宝されます。ポコひろ実際にご覧ください。左がPNG、右がJPGです。PNGの方は背景の水色が見えています。右のJPGは背景透過が出来ず、白になっています。Amazonなどのショッピングサイトに並ぶ商品に多く見られますが、サイトの背景となじみがいいため品物がより良く見えることが理由です。扱える色も多く、非常に便利な拡張子なのですが以下の理由からホームページの写真用には不向きです。JPGに比べ、データ量が大きくなるそもそも透過を使う状況があまりないただ、ロゴやアイコン、簡易的なイラストなど、グラフィカルなものの使用にはPNGが向いています。ポコひろポコひろが診断させて頂いたホームページでは意図なくPNGを使っていたので、全てJPGに変更してもらいました!HEICについて(iPhone・iPad独自の拡張子)iPhoneで撮影した写真がPCで見られない、という方もいらっしゃるはずです。理由はHEICという独自の拡張子で容量を節約して保存しているためです。「MACまたはPCに転送」の項目を自動に設定しましょう。写真サイズの目安ここまでで、ホームページには「JPG」がベスト!という事をお伝えしました。それでは次に、どのくらいのサイズが適正かをご説明します。機種にもよりますが約2MB~5MB程度です。「1000KB=1MB」ですから、ハッキリ言って大きすぎです!画像サイズ(容量)の削減方法ポコひろここが今回いちばん大切な内容かもしれません。今回はとても便利で簡単な無料のツールをご紹介します。「画像のサイズ変更」をしましょう。1000px(高さ)以下にしましょう。慣れないうちは「比率」での変更をお勧めします。次に「画像の圧縮」を行いましょう。これは、画質を維持したまま容量を小さくしてくれるとても優れた機能です。手元にPNGの写真がある場合には「JPGに変換」を使ってみて下さい。変換したら「画像の圧縮」をお忘れなく。上記の機能に慣れてきたら、「画像の切り抜き」も使ってみましょう。切り抜くことでもサイズダウンが図れます。サイズにはあまり関係ありませんが「画像の回転」を使い、写真の傾きを調整することでより見やすい写真に編集できます。画像サイズを追求するあまり、圧縮などのやりすぎは注意です。画質を維持したままとは言っても、圧縮前と比べると画像は劣化します。それ以上に気を付けなければいけないのは一度縮小(小さく)した画像を、改めて拡大(大きく)することです。これは試していただくのが一番分かりやすいと思いますが画像がガビガビになります。まとめいかがでしたか?今日お伝えしたかったことは以下のみっつです。ホームページにはJPG正しいサイズ、軽い容量で結果ユーザーのためになり、あなたのお店のためになります心当たりがある方は、一度見直して修正してみることをお勧めします。直してみたけど、それで合ってるのか確認して欲しい、などなんでもお気軽にご相談下さいね。3つのことを気を付けるだけで、あなたも素敵な写真を撮ることが出来ます。高級なカメラではなくスマホでの撮影についての記事ですのでぜひご覧ください。コメントをキャンセルメールアドレスが公開されることはありません。コメント名前メールアドレスサイト上に表示された文字を入力してください。雷神ポコひろエモ派・クリエイティブ派マーケター。雷神ポコひろエモ派・クリエイティブ派マーケター。店名検索で表示されないサイトでやったSEO対策について「次回予告」を使ったフォロワーやリピーターの増やし方ホームページに掲載する写真のサイズについて解説します【スマホで撮った写真をそのまま公開していませんか?】ビジネス系Youtuber(ユーチューバー)おすすめランキング7選マインドマップで出来ることをご紹介します【やり方は自由でOKです!】タイトルとURLをコピーしました。