ホームページに掲載する写真のサイズについて解説します【スマホで撮った写真をそのまま公開していませんか?】

写真
ポコひろ
ポコひろ

先日、お客様のホームページの状況を診断しました。

テンプレートを使いながらご自身で作成されたとの事でしたが

その際、写真のサイズが気になったので記事にしてご説明します!

まず、画像で診断時と対策後の変化を比較してみます。

診断時・・・性能の項目が異常に低い、画像の容量の問題が大!

対策後・・・画像のサイズを見直し、容量自体も減らしたので性能が改善しました!

モバイルユーザビリティを意識する

スマホでサイトを見ているときに、なかなかページが表示されなくて、
「ちょっとイラッとしてしまう」経験をしたことは
誰もが一度はあるのではないでしょうか?

原因は様々ありますが、画像(主に写真)の容量が大きいために
遅延が発生していることが多々あります。

スマホ検索はとても便利で手軽だからこそ、
ユーザーは「遅い」ことにとても敏感です。

無駄に大きい写真を掲載して、ページを重くするのはやめて、
正しい写真を正しいサイズで掲載しましょう!というのが
モバイルユーザビリティの考え方のひとつです。

と、言葉にしてしまえば簡単ですが、
実際、具体的にどうすればいいのかが
よく分からない方もいらっしゃると思います。

そこで写真の「種類」と「サイズ」について
お話させて頂きます。

写真の種類(拡張子)

ポコひろ
ポコひろ

種類はたくさんありますが、ここでは代表的な

「JPG」「PNG」についてご説明します。

JPGについて

一度は見たことがあると思いますが「ジェイペグ」と読みます。

  • 大きな画像のファイルサイズを小さくできる
  • 色の扱いが多いので、写真に向いている

上記ふたつが大きなメリットです。
デメリットもありますが、ホームページの写真という観点では
JPG一択でいいと思って頂いて大丈夫です。

ちなみに、「JPG」「JPEG」「jpg」「jpeg」は
表記の違いだけで同じものです。

パソコンに取り込んだ写真を「右クリック→情報を見る」などの操作で
拡張子を確認することが出来ます。

2019-12-08 121212.jpgなど、末尾の「.jpg」を拡張子と言います

PNGについて

こちらも一度は耳にしたことのある拡張子だと思います。
「ピング」と読むのが一般的です。

JPGとの大きな違いは透過情報が扱える点です。

透過画像とは主に背景を消す(切り抜く)時に重宝されます。

ポコひろ
ポコひろ

実際にご覧ください。

左がPNG、右がJPGです。

PNGの方は背景の水色が見えています。
右のJPGは背景透過が出来ず、白になっています。

Amazonなどのショッピングサイトに並ぶ商品に多く見られますが、
サイトの背景となじみがいいため品物がより良く見えることが理由です。

扱える色も多く、非常に便利な拡張子なのですが
以下の理由からホームページの写真用には不向きです。

  • JPGに比べ、データ量が大きくなる
  • そもそも透過を使う状況があまりない

ただ、ロゴやアイコン、簡易的なイラストなど、
グラフィカルなものの使用にはPNGが向いています。

ポコひろ
ポコひろ

ポコひろが診断させて頂いたホームページでは

意図なくPNGを使っていたので、全てJPGに変更してもらいました!

HEICについて(iPhone・iPad独自の拡張子)

iPhoneで撮影した写真がPCで見られない、という方もいらっしゃるはずです。
理由はHEICという独自の拡張子で容量を節約して保存しているためです。

スマホのデフォルト設定でPCに取り込む際には
互換性のあるJPGに自動変換されるはずなのですが、
そうならない場合にはiPhoneの「設定」→「写真」から
「MACまたはPCに転送」の項目を自動に設定しましょう。

写真サイズの目安

ここまでで、ホームページには「JPG」がベスト!
という事をお伝えしました。

それでは次に、どのくらいのサイズが適正かをご説明します。

結論はずばり、100KB程度かそれ以下です!

ちなみに、スマホで撮影した写真のサイズは、
機種にもよりますが約2MB~5MB程度です。

「1000KB=1MB」ですから、ハッキリ言って大きすぎです!

画像サイズ(容量)の削減方法

ポコひろ
ポコひろ

ここが今回いちばん大切な内容かもしれません。

写真と言えばPhotoshopにおまかせを!

と言いたいところですが、
今回はとても便利で簡単な無料のツールをご紹介します。

JPGの場合

まず、スマホで撮影した写真は機種にもよりますが
基本的にはサイズが大きいはずですので、
「画像のサイズ変更」をしましょう。

一概にコレ!とは言えませんが、目安として
1000px(幅)x 1000px(高さ)以下にしましょう。

慣れないうちは「比率」での変更をお勧めします。

次に「画像の圧縮」を行いましょう。
これは、画質を維持したまま容量を小さくしてくれる
とても優れた機能です。

PNGの場合

手元にPNGの写真がある場合には「JPGに変換」を使ってみて下さい。
変換したら「画像の圧縮」をお忘れなく。

ツールのその他機能

上記の機能に慣れてきたら、「画像の切り抜き」も使ってみましょう。
切り抜くことでもサイズダウンが図れます。

また、サイズにはあまり関係ありませんが
「画像の回転」を使い、写真の傾きを調整することで
より見やすい写真に編集できます。

注意点と補足

画像サイズを追求するあまり、圧縮などのやりすぎは注意です。
画質を維持したままとは言っても、圧縮前と比べると画像は劣化します。

また、それ以上に気を付けなければいけないのは
一度縮小(小さく)した画像を、改めて拡大(大きく)することです。

これは試していただくのが一番分かりやすいと思いますが
画像がガビガビになります。

まとめ

いかがでしたか?
今日お伝えしたかったことは以下のみっつです。

  1. ホームページにはJPG
  2. 正しいサイズ、軽い容量で
  3. 結果ユーザーのためになり、あなたのお店のためになります

心当たりがある方は、一度見直して修正してみることをお勧めします。

直してみたけど、それで合ってるのか確認して欲しい、など
なんでもお気軽にご相談下さいね。

お問い合わせはこちら

ポコひろ
ポコひろ

ポコひろのTwitterでは、
共感を持ってもらえるようなあるあるネタや

お役立ち情報をつぶやいているので、
ぜひフォローお願いします♪

コメント

タイトルとURLをコピーしました