Share on facebook
Share on twitter
Share on linkedin

Blog

画像はリサイズして使いましょう! 〜重いサイトにしないために

3DCG制作
画像はリサイズして使いましょう! 〜重いサイトにしないために

画像はリサイズして使いましょう! 〜重いサイトにしないために

画像はリサイズして使いましょう! 〜重いサイトにしないために

WEBサイトをお持ちの会社様は、ご自身でブログやイベントページの更新を行っている場合も多いですよね。

その更新の際に、「画像は大きほど画質がいいよね?なら画質が良い方がいい!」と、むやみに大きい画像をアップしてしまっていませんか?

確かに、画質が悪い写真よりも綺麗な写真の方が魅力的。

でも、もしかしたら不要な大きさかもしれません。

大きすぎるサイズの画像のアップを続けていると、サイトがどんどん重くなってしまうため、画像はリサイズして掲載しましょう!

では、適切な大きさの画像にリサイズするにはどうすればいいのか。

Photoshopなどの画像編集ソフトを持っていない方でもできる方法を教えます!

ぜひご活用ください。

適切な画像サイズを調べよう
まずは、どの大きさに合わせたら良いのかを調べましょう。

WEBサイトの一番大きく画像が載るページで調査してみてくださいね。

(ブログなど大抵の場合は、詳細ページが一番大きく表示されます。)

※画像をクリックして拡大表示して見れるようにしたい場合は注意が必要です。

この機能を使う場合はリサイズしてしまうとそれよりも大きい画像で表示されません。

クリックしても大きくならない、意味のない機能になってしまいます。

この場合はクリックした後の大きさ(拡大時の大きさ)を基準にリサイズしてください。

それでは例として、弊社ブログでの画像サイズを調べてみましょう。

【Google Chromeをお使いの場合】

1.画像の上で右クリックし、「検証」をクリックします。

2.ソースコードが表示されます。

その左上部分に、矢印のマークがあるので、クリックします。

3.その状態で、画像にカーソルを合わせると、細かな情報が表示されます。

その中でも、右上に表示されているのが画像サイズです。

今回は 横が750.19 縦が514.5 ということですね!(なんだか半端な数字ですが…)

※注意点

レスポンシブサイトは、見ているウィンドウの大きさで画像の表示サイズが変わります。

小さいウィンドウで確認している場合は、画像も小さく表示されるため、画像の表示サイズを正確に調べる時には、フルスクリーンで確認してください。

【Internet Explorerをお使いの場合】

1.画像の上で右クリックし、プロパティを選択します。

2.大きさが確認できます。

今回は横 750 px 縦515ピクセルですね!

【スマホサイトを基準にして考える場合】
最近はスマホユーザーが多いため、WEBサイトの閲覧もスマホが中心のものも多いです。

特にBtoCのサイトでは、スマホでの閲覧が多い傾向がありますね。

「うちのサイトはほとんどのユーザーがスマホでサイトを閲覧している!」と言う場合はスマホを基準に画像サイズを決めてしまいましょう。

Google chromeでの調べ方を紹介します。

1.先ほどと同じように、右クリックを押して「検証」を選択します。

2.スマホのマークを押します

3.スマホ表示に切り替わりました!

上の部分で、スマホの種類を変えることも可能ですよ。

最新のデータではありませんが、iphone11が出る直前では、iphone7のシェア率が一位とのことでした。

今回はiphone7を基準にして見てみましょう。

4.PCの時と同じように、矢印のマークをクリックし、画像にホバーするとサイズが表示されます。

今回は横355 縦243px のようです!

ただここで注意してほしいのが、スマホ用の画像は2倍サイズで作成する必要があるということです。

最近のスマートフォンはレティーナディスプレイが採用されており、解像度が高いので、普通にこの大きさで作成してしまうとボヤけて見えてしまいます。

つまり、今回の場合は 355 × 2 =710 で、横幅710pxの画像を用意する必要があるということですね!

Windowsでのスマホ画像サイズを調べるのは、複雑であるため割愛させていただきますが…。

iphone7の画面幅は375pxですので、750pxで画像を用意すれば画像サイズが足りない場合もありませんし、オーバーしすぎることもないのでスマホを優先する場合は750pxを基準にして良いと思います!

実際に画像サイズを変更しよう
それでは、実際に画像サイズを変更していきましょう。

すでに画像加工ソフトを持っていらっしゃる方は、そちらで編集可能です。

持っていらっしゃらない方は、WEBサービスを利用してみましょう。

ILOVEIMGというサイトをご紹介します。

使い方は簡単です!

「画像を選択」ボタンを押すか、画像を画面にドラッグ&ドロップします。

(複数の画像をドラッグ&ドロップして、一気にサイズを編集することも可能です)

画像編集画面に変わります。

ブログの画像で比率が指定されていない場合は、横の大きさを合わせましょう。

幅(px)に先ほど調べた750と入力します。

※「縦横比を維持」のチェックを外すと、画像が潰れてしまうので、外さないでください

「画像のサイズ変更」ボタンを押したら完了です!

ダウンロードボタンをおしてダウンロードしてください。

画像を切り抜いてから使いたい!という場合は同サイトのサービスで、簡単に切り抜きができますよ。

よかったら試して見てください。

https://www.iloveimg.com/ja/crop-image

さらに軽くしてみよう
先ほどの作業で、大きすぎる画像ではなくなったはず。

でも、実はまだ画像を軽くできます!

同サイトの「画像圧縮」を試してみましょう。

先ほどと同じ手順で、画像を圧縮できますよ。

https://www.iloveimg.com/ja/compress-image

※画像によっては、圧縮すると劣化が目立つこともあります。

その場合は、画像圧縮は行わなくて良いと思います。

おわりに
WEBサイトでは「読み込みの速さ」も重要視されます。

読み込みが長すぎるサイトは、それだけでユーザーの離脱・直帰に繋がってしまうため、画像の大きさには気をつけていきましょう。

画像をリサイズした場合は、上書き保存をしてしまわないように注意してくださいね!

元の画質の良い大きい画像が、必要になることもあるかもしれません。

(印刷物を作成する場合は、画質の良い写真が必要になりますよ!)

Leave your thought here

メールアドレスが公開されることはありません。

Popular tags

1つのWEBサイトを作るのには、どれだけの時間がかかるもの? alt属性とは?画像検索の対策 business DTPデザイナーが陥りがちな残念なWebデザイン IT Security IT services ITで働き方改革!クラウド、テレワークの新しい仕事の形とは LP(ランディングページ)って何? Pythonでできることって何だろう? Pythonとは?大人気プログラミング言語のメリット Webサイトの制作って、なぜこんなに高いの?! Webサイトを更新したのに反映されない?それ、キャッシュが原因 Webサイトを更新したのに反映されない?それ、キャッシュが原因かも…【PC編】 Webデザイナーの1日・生活スタイル WEB制作の現場で使われる用語をご紹介 WordPress(ワードプレス)でのホームページ制作・ウェブサイト制作 WordPressのメリットとデメリット WordPressを使ったホームページ作成のメリットデメリット 「デザインお願いします」と言われてデザイナーは何を考えてデザインしているの? この修正、お金かかるんですか? なんて名前? WEBサイトの基本パーツ名と導入時の注意点! イメージコピーとセールスコピーの違い クリック率とCV数をUP!サイトの入り口を飾る「titleタグ」「meta description」とは? コロナ対策のためにネットショップを素早く開設しよう!ECサイト構築 ネットワークエンジニアとは?ネットワークエンジニアの仕事内容と将来性 ネットワークエンジニアになるには資格が必要?おすすめの資格 フリーランスのWebデザイナーが仕事を効率良くする方法とは? ブログで使っているその画像は本当に大丈夫? プログラマーとは?プログラマーの種類と将来性 ペルソナってなに? 〜WEBサイトのターゲット ホームページとウェブサイトの違い! ホームページを制作する目的の重要性 ホームページ作成に失敗しないための、制作料⾦の費⽤相場と Web制作ツール・制作業者選定のポイント ホームページ制作で起きるトラブル事例と対策 ホームページ制作と動画や写真撮影などを一社でまとめるメリット ホームページ制作に関する著作権 ホームページ制作の注意点 企業にとってのホームページの役割と運用目的を再確認 働きながらWebプログラミングスクールに通う方法 初心者でも簡単!無料でホームページ作成ができるソフト 危険!Wordpressの更新は制作会社にご依頼ください。 古いサイトは何故ダメなのか 在宅でできるWebデザインを副業にしよう♪初心者におすすめの仕事は? 画像はリサイズして使いましょう! 〜重いサイトにしないために 結果が出ないホームページの初歩的なミス
Select the fields to be shown. Others will be hidden. Drag and drop to rearrange the order.
  • Image
  • SKU
  • Rating
  • Price
  • Stock
  • Availability
  • Add to cart
  • Description
  • Content
  • Weight
  • Dimensions
  • Additional information
  • Attributes
  • Custom attributes
  • Custom fields
Click outside to hide the compare bar
Compare
Compare ×
Let's Compare! Continue shopping