こんにちは、ホームページ作成アドバイザーの田中孝一です。
本日もよろしくお願いします。
以前、お客さんからこんな相談がありました。
Ａさん：田中さん、私の作ったＨＰが重くて、ＰＣなら見れるんですが、スマホで開かない事が多いいみたいなんですよ…
私：そうですか。ではちょっと見てみましょう。
Ａさん：はいお願いします。
私：原因がわかりました。
ちょっと画像をたくさん使ってますね、このページ。
ＨＰが重い原因になるツールを使ってみて調査したんですが、やっぱり画像が多いのが原因です。
Ａさん：でもそのページは、製造手順などを1ページで見せたいので画像をたくさん使いたいんですよね…
私：そうですね。それなら、画像1つ1つのサイズを小さくしましょうか？
Ａさん：サイズをですか？
私：ええ。サイズだけでなく、少し工夫すれば画像の品質も保ったまま、画像を軽くする事も出来るんですよ。
Ａさん：そんなこと出来るんですか。どうすればいいんですか？
私：はい簡単ですよ。 画像加工ツールを使えば出来ます。
Ａさん：画像加工ですか？なんか難しそうですね･･･
私：いや、結構簡単にできるんですよ。
手持ちの画像をブラウザで読み込ませて、ボタンを押すだけで良いんですよ。
Ａさん：あ、それなら私にも出来そうですね♪
私：ですね♪
このサイトにアクセスしてみてください。
https://tinypng.com/
ここの部分をクリックすると、パソコンの画像を読み込ませる事ができるのでやってみてください・
その後、作業が勝手に進んで、サイズの軽い画像が自動で出来上がりますよ。
Ａさん：なるほど。これなら私も出来そうですね。
私：はい。簡単なのでやってみてください。
私はこのツールで実験したところ５メガあったファイルが９割も減って、0.6メガまで落とした事があります。
品質をチェックした処大丈夫そうなので結構良いですよ。
--ここまで---------------------------
いかがでしたでしょうか？
本日会話の中で出てきたサービス以外にも、
画像をアップロードするか、すでにサーバにアップしてある画像の URL を指定するか、もしくはブックマークレットを使って、閲覧中のサイトの全画像ファイルを一括して軽量化してくれるサービスが結構ありますので、まとまっているサイトを紹介しますね。
ぜひ活用してみて下さい。
画像を軽量化する上で絶対に知っておきたい5つのサービス
この中で紹介されていた中の1つ「TinyPNG」を利用してみました。
左は５メガもある画像の一部です。
右は「TinyPNG」を利用して0.6メガになった画像の一部です。
圧縮の際、写真の部分が顕著に違いが出るため
解りやすいようにしその部分を拡大しています。
サイズは9分の1位になっているのでこれくらいのあらはでますが・・
これを等倍サイズに戻しますと…
（↑の図をＰＣでマウスオーバーで見てください。）
右と左ほとんど違いがわかりません。
画像の軽量化は、ＨＰの閲覧速度にかなり影響してきますので、もしページ中に画像を3枚以上使う場合には、ちょっと手間でも軽量化した方が訪問者にとってやさしい作りになってお勧めです。
メッセージを送る！
今回の記事を気に入っていただけた方はこちらへ！