画像のファイルサイズ、小さくしていますか?

webの森からお客様にウェブサイトを納品した後、お客様ご自身で更新している場合、画像の容量のことを考慮しないでバナーを作られている方が多いです。

ちょっと気になったのが画像のファイルサイズです

今日もちょうどこのようなメールを担当者さんに送ったところなので、紹介しますね。

——————8<——————————————–

●●さん、お世話になっております。webの森の小久江です。

●●さんのサイト、表紙のバナーなども入れ替えていただき
有効に活用していただいてるようで良かったです。

ちょっと気になったのが画像のファイルサイズです。

クリスマスのバナーのファイル容量をみると201キロバイトになっています。

その上の全員一斉写真のサイズが91kbなので、
できればこのくらいのサイズには、容量を落としたいところです。

ちょっと大きな画像でしたら、100キロバイトまでは落とす
というのを目安に作っていただけたらと思います。

(やりかたは使っているソフトによりますが・・)
画像を書き出しするときにweb用書き出しを選んでいただいて
そこに何キロバイトなのか出ますので、画質を、例えば
80だったのを50に落とすとか・・を選んで、
できるだけ100キロバイト以下・・を目指してください。

——————8<——————————————–

ホームページの画像の容量を気にする時代

わたしたちホームページを作る人は、昔はWEB上の写真の容量を最大限の努力をはらって、できるだけ小さい容量の画像にすることをやってました。
どうしてかというと、その頃のネットの回線はとても細く、大量に画像を読み込みしたりすると通信費がかかったり、遅すぎて読み込みできなかったりしたからです。

時代は変わって、光回線の時代になり、速度は早く、大容量でも課金されることもなく、パソコンモニターも大きくなり、大きな画像もストレスなく表示できるようになったので、ホームページの写真や画像はどんどん大きくなる一方でした。

ところが今また、スマホの時代になり「画像の容量は最低限に落としましょう」という時代に戻りました。
日本は4G回線がかなり浸透しているので、割りと大きな画像でもスマホで表示できますが、世界中でみると7割以上が、まだ一世代前の3G回線で、大きな画像があると、スマホで読めなかったり、表示に時間がかかりスマホ電池をすごく消費したりしてしまうので迷惑をかけてしまいます。

電池消費が多いと敬遠されてしまうのは4G回線の人でも同じですが、1ページあたりの容量が膨大になり、表示されるまでに5秒とか10秒とかかかってしまうと、忙しい現代人、待ってられないのでさっさと閉じてちがうサイトを探しに行ってしまう可能性も大です。

なので、検索サイトGoogleが「ページはできるだけすばやく表示させましょう!検索結果にも影響します。ユーザーにやさしいページを作っているウェブサイトは、Googleも歓迎ですよ」と言っています。

Googleが提供している測定サービス

というわけで、Googleが提供している、モバイルサイトの速度測定サービスを紹介します。

やり方は簡単で、ウェブページのアドレスをいれて測定するだけ。

最後に改善方法も提出してくれるという素晴らしいサービスです。一度チェックしてみてはどうでしょうか。

https://testmysite.withgoogle.com/intl/ja-jp

webの森のサイトをチェックしてみました。3G回線で、4秒。いちおう良好になりました。

イラストレーターの場合の画像の縮小方法

縮小といっても、見た目の大きさ(カンパスのサイズ)を小さくするのではなく、画像の容量、重さ自体を小さくして、jpg書き出しをする方法です。

(ビフォー)高画質で書き出しするとこんなに大きなファイル容量になってしまいます。

(アフター)画質30にしたら、小さくなりました。プレビューで見て、問題なければ大丈夫です。

 

  関連記事

WordPressにPDFやWord、Excelを添付する方法

当たり前のことかもしれませんが、質問がありましたのでこちらで紹介します。 WordPressのメディ ≫続きを読む

DaVinci Resolve(ダビンチリゾルブ)web埋め込み用書き出し設定

こんにちは、モモンガです。今回初めてweb用に動画を埋め込むために制作をしまして、いつもはYoutu ≫続きを読む

WordPressのページ更新をするときに便利なツールあれこれ

まず、GoogleChromeはPCに入れておいてください   HTMLを編集するのにとて ≫続きを読む

【Q】携帯サイトを初めて作ることになりました。まず何からやれば?どこで勉強したらいいですか?

携帯(ガラケー)サイトの作り方なんてもう不要な技術なのかもしれませんが、自分でも、この記事の中身をも ≫続きを読む

【ホームページの作り方】WordPressの勉強をしたいのですが・・・

Q:WordPressのサイトを土台まで友人に作ってもらったのですが、そこから先どうしたら良いかわか ≫続きを読む

facebookページの更新だけではもったいない

HTMLやcssの講習をした生徒さんが、ネットショップのオープンに向けてがんばってます。 こだわりの ≫続きを読む

飯田でのセミナーご参加ありがとうございました

飯田のセミナー、大好評のうちに終了しました。アンケート結果、皆さんとても勉強になった、また参加したい ≫続きを読む

【Q】サーバーとかドメインとか言われてもよくわからないのですが・・・

webの森では、サイト制作をご依頼したお客様に、毎回サーバーとドメインの管理を今後どうするかをお聞き ≫続きを読む

フィッシング詐欺の事例です

こんにちは、モモンガです。 お客様から「こんな見たことがないメールが来たんですが・・・」 とスクショ ≫続きを読む

【Q】ネットショップが完成しました、これから何をしていけば良いでしょうか

たくさんの労力・時間をかけてやっとオープンしたネットショップ。 webの森にリニューアルをご依頼いた ≫続きを読む

▲ページ先頭へ