サイトに画像を載せる前の3手順｜リサイズ・圧縮・alt

「お知らせに載せる写真、スマホで撮ったものをそのままアップしたけど……なんだかページが開くのが遅くなった気がする」 そんなふうに、画像を載せたあとでモヤッとした経験はありませんか。かといって、画像編集ソフトを開いて細かく設定するのも面倒で、つい「まあいいか」とそのままにしてしまう。一人でサイトを更新していると、画像の扱いは後回しになりがちですよね。

その「まあいいか」は、決してサボりではありません。やり方を教わる機会がないまま、なんとなく不安なだけなんです。じつは、画像をアップする前にやることはたった3つ。①大きさを整える（リサイズ）→ ②容量を軽くする（圧縮）→ ③alt（代替テキスト）を入れる、これだけです。今日はこの3手順を、専門ソフトなしでもできる形で一緒に整理します。読み終わるころには、次に画像を載せるとき迷わなくなっているはずです。

結論：画像はアップする前に、①表示に必要なサイズまで縮める → ②ファイル容量を圧縮する → ③altで「何の画像か」を一言添える、の3つを順番に通すだけで、ページが軽くなり、検索にも親切になります。
全部を完璧にやらなくて大丈夫。まずは「①大きすぎる写真を縮めてから載せる」だけでも、ページの重さはぐっと減らせます。

何が起きているのか

スマホやデジカメで撮った写真は、サイトに載せるには大きすぎることがほとんどです。

最近のスマホ写真は、横幅が4000ピクセルを超え、ファイル容量も1枚で数MB（メガバイト）あることが珍しくありません。一方、サイトのお知らせや記事の中で実際に表示される幅は、せいぜい1000ピクセル前後。つまり、表示に必要な何倍もの大きさのまま載せている状態になりがちなんです。

これが起きると、ページを開くときに重い画像を毎回読み込むことになり、表示が遅くなることがあります。とくにスマホで見ている人や、通信が不安定な場所にいる人は、待たされて離れてしまうこともあります。せっかく良い内容でも、開くのが遅いだけで読まれないのは、もったいないですよね。

そしてもう一つ見落とされやすいのが、alt（オルト＝代替テキスト）です。altは「この画像には何が写っているか」を文字で説明しておくもので、画像が表示できないときや、読み上げソフトを使う人に内容を伝えます。検索エンジンも、画像の中身は文字情報で判断するため、altがあると親切です。ここは難しく考えず、「写真の説明を一言メモしておく」くらいの気持ちで大丈夫です。

逆に言えば、この3つは誰の落ち度でもなく、知っていれば防げることばかり。完璧な画像処理を目指す必要はありません。「大きすぎないか」「重すぎないか」「説明があるか」——この3点を、載せる前にひと呼吸おいて確認できれば十分です。

手順を小さく分ける

一度に覚えようとせず、次の順番で進めます。最初の1枚だけ少し時間がかかっても、2枚目からは流れで動けるようになります。

1. リサイズ（大きさを整える）：まず、写真の横幅を表示に必要なサイズまで縮めます。目安として、記事やお知らせの本文に載せる画像は横幅1200〜1600ピクセルくらいあれば、たいていのサイトで十分きれいに表示されます。横幅2000ピクセルを大きく超える写真は、まず縮めると考えて大丈夫です。パソコンの標準の画像編集機能（Windowsの「フォト」やMacの「プレビュー」）でも、サイズ変更はできます。
2. 圧縮（容量を軽くする）：リサイズしただけでもかなり軽くなりますが、さらにファイル容量を圧縮しておくと安心です。写真なら、1枚あたりおおむね数百KB（キロバイト）以内を目安にすると、表示が軽く保てます。無料の画像圧縮ツールやサイトを使うと、見た目をほとんど落とさずに容量だけ減らせます。可能なら、写真は「WebP（ウェッブピー）」や「JPEG」という軽い形式で保存すると効率的です。
3. alt（説明を一言入れる）：アップロードの画面に、たいてい「代替テキスト」「alt」「画像の説明」といった入力欄があります。そこに、写真に写っているものを、見えない人にも伝わるように一言書きます。たとえば「新店舗の外観」「セミナー会場で説明する講師」のように、具体的に。飾りだけの画像（区切り線など）は、無理に書かなくても構いません。

まずは「1. 大きすぎる写真を縮めてから載せる」を今日の習慣にできれば、それで十分です。3つ全部を一度に仕組み化しなくて大丈夫。1枚ずつ整えていけば、自然と身につきます。

補足：WordPressなど多くのサイトでは、アップロードした画像を自動で複数サイズに作り直す機能があります。それでも、元の写真が極端に大きいとサーバーに負担が残るので、アップする前に縮めておくのがいちばん確実です。「自動でやってくれるから大丈夫」と過信せず、入り口で整えておくと安心です。

具体例：どこまで縮めればいい？の目安

「どのくらいのサイズ・容量にすればいいのか」は、最初は迷いやすいところです。用途ごとの目安を表にまとめました。厳密な正解ではなく、ざっくりした基準として使ってください。

ポイントは、「表示される大きさより少し大きいくらい」で十分ということです。表示幅800ピクセルの場所に4000ピクセルの写真を置いても、見た目はほとんど変わらず、容量だけが重くなります。

たとえば「お知らせに、スマホで撮った3MBの店舗写真を載せたい」とき。横幅を1400ピクセルに縮め、圧縮ツールで250KBほどにし、altに「リニューアルした店舗の入り口」と入れる——これで、見た目はきれいなまま、ページはずっと軽くなります。最初の1枚でこの流れをつかめれば、次からは数分でできるようになります。

具体例：altの「書ける／書かなくていい」を分ける

altは「全部の画像にきっちり書かなきゃ」と気負うと続きません。画像の役割によって、書き方を変えていいので、肩の力を抜いて大丈夫です。

• 内容を伝える写真・図（店舗、商品、人物、説明図など）→ 写っているものを具体的に一言。例：「商品を手に取って説明するスタッフ」。
• すでに本文で説明している画像 → 本文と丸かぶりにせず、画像で分かる情報を補う。例：本文に商品名があるなら、altは「箱から取り出した本体の正面」など見た目を。
• 飾りだけの画像（区切り線、背景の模様など）→ 無理に書かなくてよい。空欄でも問題ありません。
• 避けたい書き方 → 「画像」「写真」「image001」のような中身のない言葉や、キーワードを詰め込んだ不自然な文章。altは検索対策のためというより、画像が見えない人に届ける一言だと考えると、自然な言葉になります。

altは「読み上げソフトで、その一言が耳から聞こえてくる」と想像すると書きやすくなります。完璧な文章でなくていいので、写っているものが伝わるかだけ意識すれば十分です。

あなたへの影響

• アップ前に縮める・軽くする習慣がつくと、ページの表示が軽くなり、見に来た人を待たせずにすむ。
• スマホで見ている人にやさしいページになり、「重くて離脱」が減らせる。
• altを一言添えるだけで、画像が見えない人にも内容が伝わり、検索エンジンにも画像の中身が伝わりやすくなる。
• 「うちのサイト、画像が重いかも」という漠然とした不安が、「載せる前に整えているから大丈夫」という安心に変わる。

明日やること

1. これから載せる写真を1枚、横幅1200〜1600ピクセルくらいに縮めてからアップしてみる。
2. 縮めた画像を、無料の圧縮ツールで容量だけ軽くしてみる（見た目が変わらない範囲で）。
3. アップロード画面の「代替テキスト（alt）」欄に、写っているものを一言書いてみる。

一度に全部の画像を直そうとしなくて大丈夫です。今日はこの1枚で流れをつかめれば、もう「整えてから載せる」運用に乗れています。

チェックリスト

• 載せる前に、写真の横幅を表示に必要なサイズまで縮めた（目安1200〜1600px）
• 横幅2000pxを大きく超える写真は、そのまま載せていない
• ファイル容量を圧縮した（本文写真は数百KB以内が目安）
• 写真は軽い形式（WebPやJPEG）で保存できているか確認した
• 内容を伝える画像には、altに「写っているもの」を一言入れた
• altに「画像」「写真」だけ、や中身のない文字列を入れていない
• 飾りだけの画像は、無理にaltを書かず空欄にした
• アップ後、スマホでもページが重くなっていないか実際に開いて確認した

画像の準備は、一度で完璧にこなす仕事ではありません。 これまで「そのまま載せていた」としても、それはやり方を知る機会がなかっただけ。今日「縮めて、軽くして、一言添える」を1枚だけ試せれば、それで十分です。小さな手間をかけている時点で、あなたのサイトは見に来た人にやさしくなっています。

画像のalt（説明）は、ページ全体の伝わりやすさにもつながります。あわせて読みたいtitleとmeta descriptionの書き方や、更新を公開前に確認する自社サイトの更新・公開前チェックリスト、表示の変化を数字で見るGA4で最初に見る4つの画面も、日々の運用の助けになるはずです。「うちのサイトの場合はどうすれば？」と迷ったら、お問い合わせからいつでも声をかけてくださいね。

関連用語

• 表示速度
• SEO