ホームページ画像が重い製造業がまず直すべき3つのこと

「工場の写真をホームページに載せたら、ページが重くなった」という相談は、部品加工・産業機械メーカーの担当者からよく聞きます。スマートフォンで撮影した画像をそのままアップロードしている会社では、1枚の写真が5〜8MBになっていることも珍しくありません。

ホームページの画像が重いと何が起きるか。まずページの表示が遅くなり、訪問者が読み込みを待てずにページを離れます。採用候補者や仕入れ先の担当者がスマホで御社のサイトを開いたとき、写真が表示される前に画面を閉じてしまう可能性があります。ページの読み込み速度はGoogleの検索順位にも影響するため、SEO面でも無視できません。

本記事では、製造業のホームページで画像が重い・圧縮できていない状態を改善するための3つの手順を、初めて取り組む担当者でも迷わないよう具体的に説明します。特別なソフトは不要で、無料のオンラインツールで対応できます。

なぜ製造業のサイトは画像が重くなりやすいのか

金属プレス加工を手がけるある中小メーカーでは、自社の量産ラインを紹介するページに12枚の写真を掲載していました。すべてスマートフォン（12メガピクセル以上）で撮影したJPEGファイルで、1枚あたり平均4.5MB。合計54MBのデータをブラウザが読み込もうとしていました。

製造業のサイトで画像が重くなりやすい背景には、次のような事情があります。現場の担当者が「とにかく高画質で残したい」という感覚でスマホ撮影した写真をそのまま担当者に渡す、あるいは更新担当者がWeb向けに加工する手順を知らずにアップロードする、というケースが大半です。印刷物の制作経験がある方だと「高解像度のほうが品質が高い」という感覚が残っていることもあります。

Webの画像はモニターやスマホ画面で表示するため、印刷物とは必要な解像度が根本的に異なります。横幅1,920px以上の元画像を用意しても、ページのコンテンツ幅（多くは700〜1,200px）に収めて表示されるため、余分なピクセルは表示に使われないまま通信量だけ増やしています。

まず自社サイトの画像の重さを確認する方法

改善の前に「どのくらい重いのか」を把握します。Googleが無料で提供している「PageSpeed Insights」というツールを使います。

1. ブラウザで「PageSpeed Insights」と検索し、公式ページを開く
2. 自社ホームページのURLを入力して「分析」ボタンをクリック
3. 結果ページで「次世代フォーマットでの画像の配信」「適切なサイズの画像」という項目を探す
4. その項目に表示される数値（KB・MB単位）が削減できる見込みの容量

「適切なサイズの画像」の欄に大きな数値が出ていれば、リサイズと圧縮で改善できます。「次世代フォーマット」という指摘があれば、WebP形式への変換が有効です。これらの意味は次のセクションで説明します。

直すべき3つのこと：リサイズ・圧縮・WebP変換の手順

画像を軽くする作業は大きく3段階に分けられます。順番どおりに進めると、同じ見た目のままファイルサイズを大幅に削減できます。

① 表示サイズに合わせてリサイズする

スマホで撮影した写真は横幅が4,000px以上あることが多いですが、ホームページの本文エリアに表示するなら横幅1,200pxで十分です。ヘッダーや全幅の背景画像でも1,920pxあれば対応できます。リサイズだけでファイルサイズが4分の1以下になることもあります。

無料ツール「Squoosh（スクーシュ）」はGoogleが開発したブラウザ上で動くツールで、インストール不要です。「Resize」の項目で横幅を1,200と入力するだけでリサイズできます。

② JPEGの品質を下げて圧縮する

JPEGは「品質（Quality）」という数値で圧縮率を調整できます。元の写真が品質100だとしたら、75〜80程度に下げても画面上ではほとんど差がわかりません。工場内の設備や製品写真であれば、品質70でも十分な見た目を保てることが多いです。先ほどのSquooshで品質のスライダーを動かしながら、プレビューを見て判断してください。

③ WebP形式に変換する

WebP（ウェブピー）はGoogleが開発した画像フォーマットで、JPEGやPNGより同じ見た目でファイルサイズを小さくできます。現在のスマートフォンとPCブラウザのほぼすべてで表示できます。SquooshでフォーマットをWebPに切り替えるだけで変換できます。リサイズ・圧縮・WebP変換を組み合わせると、元の5MBのJPEGが200〜400KB程度になるケースも珍しくありません。

複数の画像をまとめて処理したいときのツール選び

製品ラインナップのページや事例紹介ページなど、一度に10枚以上の写真を更新する場合は、1枚ずつ処理するSquooshより一括変換ツールが便利です。

ツール名	特徴	向いている用途
Squoosh	ブラウザ上で動作・1枚ずつ確認しながら処理できる	重要な写真を丁寧に仕上げたいとき
Bulk Resize Photos	複数ファイルを一括リサイズ・ブラウザのみ	同じ条件で複数枚まとめて処理したいとき
XnConvert（無料）	PCソフト・フォルダごとバッチ変換できる	毎月定期的に写真を追加する運用の会社

樹脂成形メーカーで月に数回ホームページを更新している担当者であれば、XnConvertをPCにインストールしてフォルダを指定するだけで自動変換できる設定を作っておくと、毎回の作業が数分で終わります。

更新のたびに重い画像を上げないための社内ルール

ツールを覚えても、画像の準備を誰がどのタイミングで行うかが決まっていないと、担当者が変わったときに元の状態に戻ります。最低限、次の3点をルールとして共有することをお勧めします。

• アップロード前の横幅上限を決める：コンテンツエリアの写真は横1,200px以内、ファイルサイズは500KB以内、といった基準を文書化する
• スマホ写真を直接アップしない：撮影データは一度PCに取り込み、変換してからCMSにアップする手順を徹底する
• 月1回PageSpeed Insightsで確認する：スコアが大きく下がっていたらその月の更新画像を見直すきっかけにする

産業機械の製造会社でよくあるのが、展示会で撮影した写真を広報担当がそのままDropboxに入れ、Web担当がチェックなしでそのままアップしてしまうケースです。担当者同士で「Web用に変換する」というひと手間の位置づけを決めておくだけで防げます。

BtoB企業の技術発信と採用コンテンツを、制作から月次運用まで担当しています。まず現状のサイトを無料で診断します。