WordPressで作るウェブサイト&サイト運営・集客をわかりやすく学べます
※本サイトはプロモーションが含まれています

Webサイトの最適な画像とは?(サイズ・重さ・圧縮・軽量化など)

Webサイトの最適な画像とは?(サイズ・重さ・圧縮・軽量化など)

Webサイトの最適な画像とは?(サイズ・重さ・圧縮・軽量化など)

Webサイトの制作を請け負ったり、教えたりしていてよく質問があるのが「Webサイトにおける最適な画像サイズ」についてです。

最近は外出先でスマホでページを見る人がほとんどです。せっかくきれいに撮影してもらった商品やサービス画像を高画質でお客さまにみてほしいですよね。でもビジュアルを重視すればするほど、画像サイズが重くなり、ページの表示速度が遅くなってしまいます。

この記事では「画像の最適化のポイント」と「サイトによって違う最適な画像サイズの考え方」についてお伝えしていきますね。

画像の最適化の基準とは?

画像の縦横のサイズの一般的な基準としては、横幅が800px~1,000px前後としているサイトが多いです。WordPressやWixなどのCMSを利用している方は、そのテーマのサンプルサイズにあわせるようにしましょう。

またアイキャッチやギャラリーなど、事前に縦横比を固定しておいたほうがよいケースもあります。

一般的な縦横比

縦長
16:9
4:3
3:2

横長
9:16
3:4
2:3

適切な画像はサイトやページを制作した目的によって変わる

「最適な画像サイズを教えてください」という質問に対しての回答は簡単ではありません。なぜなら、Webサイトのページ数やコンテンツの量、ページ内にある画像の枚数にもよって変わるからです。もちろん15年前といまのインターネットの利用手段が違うように、ユーザーのツールやネット回線スピードに合わせた対応も必要になります。

テキストのみで大きな画像を1枚だけ載せたいサイトと、ポートフォリオやギャラリーとして利用していて動きがあるサイトだと、それぞれ適切な画像サイズは異なりますよね。

もしあなたがアパレルのEC店長さんだとして、がんばって画像サイズを最低限まで小さくして、ページの表示速度が上がっても、商品画像が小さく、粗く、枚数が少なくなり、商品そもそもの魅力が伝わらなければ意味がありません。

また「売上アップにつながるからどうしても高品質な画像を載せたい」というのであれば、利用しているサーバーを強化する選択もあります。

そこでこの記事では多くの人にあてはまる「どのようにすれば画像の軽量化ができるのか」の方法を紹介していきます。

「TinyPNG」で画像圧縮する

パンダさんが目印の「TinyPNG」という無料ツールを使えば、簡単に画像が軽量化できます。

TinyPNG
https://tinypng.com/

対応している画像形式:WebP,PNG,JPEG

操作方法はサイトにアクセスして圧縮した画像をドラッグアンドドロップするだけです。
※1回につき圧縮できる画像は20枚まで

圧縮した画像は元画像と比較して、50%~70%のサイズとなることが多いです。圧縮後の画像のクオリティもぜひチェックしてみてくださいね。

WordPressプラグインを使って画像を圧縮する

WordPressプラグインのなかには自動的に画像を圧縮してくれるプラグインがあります。弊社でも以前利用していたことがあるのですが、先に結論を言ってしまうとどのクライアントサイトの制作も含め、弊社では数年前からこういった自動の画像圧縮プラグインは利用していません。

画像圧縮プラグインを利用しなくなった理由は「画像のクオリティにムラがある」ためです。自動化に頼ってしまうとひとつひとつの画像のチェックをしなくなり、元の画像と比較して彩度が違う、荒いといった画像が生成されるようになりました。画像を圧縮してサイズを下げるプラグインのため当たり前なのですが、制作側としてサイトにおける画像の大切さがわかっているため、プラグインを利用しなくなりました。

ただしばらく利用していないうちに、もっと高機能になっているかもしれませんね。またプラグインを利用する機会があれば記事を投稿します!

Googleが開発した画像形式「WebP(ウェッピー)」を利用する

WebPは画像形式のなかでも新しい画像形式で、Googleによって開発されました。JPEGやPNGと同じような品質でも画像ファイルが小さくなることが特徴です。一方でWebPにもデメリットがあり、古いブラウザでサポートされていなかったり、未対応のツールもあります。

サイトスピードが気になるなら「PageSpeed Insights」で計測してみよう

PageSpeed Insights

「PageSpeed Insights」は、Googleが提供するウェブサイトのパフォーマンス評価ツールです。ツールを利用することでサイトの読み込み速度や表示速度を測定し、改善点がわかります。

画像の軽量化を行う前やあとでテストを行ってみるのもおすすめですよ。

自分のサイトにとっての適切な画像サイズを見つけましょう

画像サイズが重いとWebページの表示が遅くなり、ユーザーがサイトを閲覧しづらくなってしまいます。とはいえ、画像サイズを下げることを考えすぎて、サイトで商品やサービスの魅力を伝えられなくなれば意味がありません。

ご自身のサイトにとっての適切な画像サイズや画像形式を一度考えてみてくださいね。

 集客&新規ビジネスに!はっちゃんの新サービス

WordPressで会員動画サイトが作れる!

\動画コンテンツで新しい収益を!/

オンライン講座機能付き
WordPressテンプレート新発売

多言語化によるお悩みを解決します

\導入費用のみ!月額費用は不要/

管理画面からカンタン更新!
AI翻訳+人力翻訳の使い分けも可能

 開催中のWordPress講座・セミナー

サイト制作&運営のお悩みを解決しませんか?

~ あなたのための特別カリキュラムでお悩み解決 ~
・制作・運営のちょっとした困ったを解決!
・集客&効率化のアドバイスも!
・オンラインレッスンだから全国どこでも参加可能
・受講後も安心!メールサポート付き

【東京開催】対面レッスンのElementor講座

~ 対面でのセミナーを再開しました~
ノーコードで簡単にデザインができる
大人気プラグイン「Elementor」の対面での講座です。

新しいWordPress作成のスタンダード!

~ Elementorでサイトデザインを作ってみよう ~
WordPressでの制作はこれから大きく変化します!
テーマを選んで当てはめていく作り方から、
自分で自由にデザインし、テーマまで作れるオンライン講座です。

 はっちゃんセミナー公式SNS

 はっちゃんYouTubeチャンネル

無料セミナー・お役立ち情報を配信中!

公式メールマガジンもあります!

新着情報

  新サービス開始しました

WordPressで会員動画サイトが作れる!
オンライン講座機能付きWordPressテンプレート新発売!→詳しくはこちら

多言語化によるお悩みを解決します!
管理画面からカンタン更新!AI翻訳+人力翻訳の使い分けも可能→詳しくはこちら

  ピックアップ講座

最新のAIコンテンツ生成とSEO対策が
6時間しっかり学べるコンテンツマーケティング講座(オンライン開催)→詳しくはこちら

 

WordPressに限らず、Canvaの画像編集やサイト運営に関係する内容と、受講生さんからのご質問等で共通な内容も掲載していきます。

  ピックアップ記事

 カテゴリー
公式Facebook
公式LINEアカウント

友だち追加

こちらのURLからお友だち登録できます。
https://lin.ee/CbqqEEI

公式メールマガジン

こちらのURLからメルマガに登録できます。https://www.8seminar.com/mailmagazine-form

PAGE TOP