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

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にしたら、小さくなりました。プレビューで見て、問題なければ大丈夫です。

 

  関連記事

阿智村商工会主催 ホームページ勉強会と相談会

「WEBサイトを作ったけど、自己流なのでどうしたら良いかわからない。 効果を上げられるホームページっ ≫続きを読む

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

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

パラコードアクセサリー製作入門! in 駒ヶ根高原・ヴァンドール

突然ですが、パラコードって知ってますか。 パラシュートを結ぶ紐なんですが、弾力があって柔らかいのに、 ≫続きを読む

Dreamweaverで携帯サイトを作る方法

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

Facebookで、自分の過去の投稿を探したい場合

え~、、っと、あの記事はたしかFacebookで投稿したはず。 あの時の写真を使いたい、あの時にリン ≫続きを読む

【Q】ホームページをCMSにするとSEO対策に不利と聞きましたが・・・・。普通のHTMLで作って置いた方がいいんでしょうか?

「アドレスがhtmlじゃなくなると検索に不利なのでは・・?」「CMSで作った動的ページはSEOで不利 ≫続きを読む

メールの反応がない方・・

例えば今期になってから、新しくお仕事をご依頼されたりお客様になっていただいて、新しく知り合った方が6 ≫続きを読む

調整レイヤーの使い方

フォトレタッチの極意1:紅葉の色彩をアップする | Adobe Creative Station 部 ≫続きを読む

不労所得って悪いことなの?資産の運用なら全然OKだし勉強するべき

ビットコインって何?危ないんじゃない?そんなことに手を出したら・・・・ ビットコインとか暗号資産の話 ≫続きを読む

【Q】ホームページでネットショップをやっています。ツイッターをやったほうがいいよと知人に誘われたのですが何がいいのかいまいちわからないのですが?

ツイッターってなに? 140文字の「つぶやき」を投 稿するだけのシンプルな webサービスです。 無 ≫続きを読む

▲ページ先頭へ