WEB DESIGN Webデザイナー 2026.11.07

画像の書き出し設定の型｜容量と画質のバランス

美しい画像をそのまま書き出すとファイルが重くなり、圧縮しすぎると必要な細部が消えることがある。デザイナーは容量の大小だけ…

text: HYPE編集部

Webデザイナーの記事一覧へ

美しい画像をそのまま書き出すとファイルが重くなり、圧縮しすぎると必要な細部が消えることがある。デザイナーは容量の大小だけではなく、用途、表示条件、閲覧者に伝える情報から設定を決めたい。

書き出しは、用途から解像度を逆算すること。置く場所の表示サイズが決まれば、必要な大きさも決まります。

Table of Contents

画像の用途から必要解像度を決める

カードの小さな画像と画面いっぱいのメインビジュアルでは必要な画素数が違う。掲載先の表示領域と高密度ディスプレイを考慮し、元データを無条件に最大サイズで出さない。

大型モニター向けの画像をそのまま小さなカードへ使うと、不要な画素まで配信することになる。表示領域と必要な細部を確認して書き出す。

画像の形式と最適化の考え方は、web.devの画像の学習資料にまとまっています。

写真と図解で形式を選び分ける

写真では連続した階調、図解では細い線や文字の可読性が重要になる。PNG、JPEG、WebP、SVGなどの特性を踏まえ、透過、アニメーション、対象ブラウザ、編集上の条件から選ぶ。形式名だけで優劣を決めない。

背景が透過するロゴと、写真主体のバナーでは求める形式が異なる。CMSが受け付ける形式と必要な画質を確認し、単一の形式へ統一することを目的にしない。

書き出し作業を外部へ依頼する場合は、用途別サイズと再書き出しの条件を伝える。体系立てて学びたい場合は、Webスキルを学ぶオンラインスクールデイトラのようなオンラインスクールも選択肢になります。

色の扱いの基礎は、MDNの色の解説でも確認できます。

圧縮の比較は、同じ表示サイズで並べること。拡大して比べると、判断を間違えます。

圧縮後の比較は同じ表示サイズで行う

ファイルの容量だけを見て圧縮率を上げると、人物の輪郭や商品の細部が崩れる。公開時に使う大きさで拡大と縮小を両方確認し、読者が判断に必要な細部を失っていないか点検する。

圧縮の比較では、ファイルサイズと見た目を同じ画面上で比べる。商品の細かな文字や服の質感が重要なら、容量が小さいだけの画像を選ぶべきではない。

文字の入った画像は、別扱いにすること。写真と同じ圧縮では、文字の輪郭が先に崩れます。

テキスト入り画像を別扱いする

図の中の小さな注記は圧縮で判読しにくくなる。可能なら文字をHTMLとして持ち、画像に含める場合は書き出し後に実際の端末で確認する。画像だけに重要な説明を依存させない。

画像の中に入れた説明文字は、スマートフォン表示で意図せず読めなくなる。必要な情報をページ側の文字として設計する方法も検討する。

画像圧縮ツールはファイル容量だけでなく、文字の輪郭と色の崩れを比較して採用したい。作画の道具としては、イラスト・マンガ制作ソフト CLIP STUDIO PAINTも定番です。

複数サイズを適切に配信する

スマートフォンに大型デスクトップ用画像をそのまま届けると、通信量や表示時間が増える。レスポンシブ画像の指定やCMSの自動生成設定を確認し、ブラウザが必要なサイズを選べる構成にする。

複数サイズを用意する運用では、CMSが自動生成する画像と手動でアップロードした画像を区別する。二重生成や不要な容量増加が起きないか調べる。

ファイル名と代替テキストを整える

書き出したあとに画像が何を示すか分からなくなると、管理も検索も難しい。説明的なファイル名と、用途に応じた代替テキストを用意する。ただし見た目の装飾画像には不要な説明を詰め込まない。

ファイル名には内容が分かる語と版を使い、意味のない連番だけで保存しない。代替テキストは画像の用途に応じて書き、キーワードの詰め込みに使わない。

最適化を学ぶなら、端末別の表示を自分で計測する実践課題のある教材が向いている。学んだことを仕事につなげる入口として、スキルマーケットココナラで小さな案件から始める方法もあります。

代替テキストの書き方は、W3C WAIの画像チュートリアルが参考になります。

ページ全体の体感を測る

画像単体を軽くしてもページ表示が速くなるとは限らない。他のスクリプトやレイアウトの影響を含めて測定し、ファーストビューに必要な画像の読み込み順を点検する。

画像一枚の圧縮効果だけでサイト全体の高速化を宣言しない。実際のページで読み込み順と他のファイルの影響を見て評価する必要がある。

書き出し仕様を納品書に残す

使用フォーマット、想定表示サイズ、差し替え用元データ、CMSへの登録方法を渡す。次回更新の担当者が同じ品質で画像を追加できれば、継続保守のコストを抑えやすい。

納品書には元データ、公開用形式、想定表示先、差し替え手順を記載する。追加制作を別担当者へ依頼しても、同じ品質基準を共有しやすくなる。

判断に使う比較表

確認する場面	実際に見ておく材料
画像の用途から必要解像度を決める	カードの小さな画像と画面いっぱいのメインビジュアルでは必要な画素数が違う
圧縮後の比較は同じ表示サイズで行う	ファイルの容量だけを見て圧縮率を上げると、人物の輪郭や商品の細部が崩れる
複数サイズを適切に配信する	スマートフォンに大型デスクトップ用画像をそのまま届けると、通信量や表示時間が増える
ページ全体の体感を測る	画像単体を軽くしてもページ表示が速くなるとは限らない

数値での圧縮率が良くても、利用画面で文字がにじむなら適切な設定とはいえない。実際の表示幅に合わせて比較し、必要な品質を維持できる形式を選びたい。

軽い画像を納品することと、見栄えを損なわないことは両立を検討できる。書き出し設定の根拠を残せば、次の改修で同じ検証を繰り返さずに済む。

現場で試すための補足

書き出し設定は、制作担当者しか分からない暗黙知にしないほうがよい。公開先の表示サイズ、フォーマット、透過の要否、文字の可読性、元データの保存場所を簡潔にまとめる。運用中に画像が差し替えられても、同じ条件で品質を確かめられるからだ。容量削減と視覚表現の両立は、見た目だけでなくサイトの運用コストを下げる設計でもある。

例えば同じブランドの写真をトップページと記事一覧カードへ使う場合、二つの画面で必要な表示サイズが違う。元の画像を常にそのまま配信するより、用途に応じたサイズを使い分けた方が不要なデータを減らせる。とはいえ圧縮率を高めすぎると、商品の表面や文字が潰れることがある。閲覧者が判断に使う細部を確認し、公開時の画面で比較する必要がある。

図解に小さい説明文字が入っている場合は、写真と同じ圧縮方針が適切とは限らない。文字をHTML側に置けるならその方法も検討し、画像へ埋め込む場合は小さな端末で読めるか確かめる。ファイル名と代替テキストには画像の用途が伝わる内容を用意し、管理しやすい版の規則を設ける。納品後に更新担当者が変わっても、画質と容量の判断を再現できるよう、採用した書き出し条件を残しておきたい。

画像を書き出す際、単に容量を小さくすればよいわけではない。細い文字やグラデーション、写真の細部では劣化の見え方が異なる。画面上の使用サイズを確認し、必要以上に大きな画像を配信していないか調べる。透過が必要な図案と色数の多い写真で形式を使い分け、対応環境も確認する。元データを圧縮後の画像で上書きしてしまうと修正できなくなるため、編集用と公開用を分離したい。

発注者のサイトでは、画像の表示品質だけでなく、読み込み位置や代替テキストも確認する。拡大表示が必要な商品写真を一覧用の小さな画像だけで用意すると、閲覧時に粗くなる。反対に小さなアイコンへ高解像度の写真を渡しても、利用者の体験が改善するとは限らない。制作見積もりでは書き出し形式の選択、端末確認、差し替え時の手順を工程に入れ、サイト運用者が後から迷わない納品仕様を作りたい。

同じ画像をサムネイル、記事本文、SNS告知に使うときは、必要な縦横比と切り抜き位置が異なる。人物や商品が切れて困る場合、単純に中央で自動トリミングする設定は適さない。どの配置で画像を使うかを確認し、用途ごとの書き出し名をそろえる。公開後に画像を差し替える担当者の手順まで考えると、納品ミスを防ぎやすくなる。

納品画像の管理ではファイル名に用途を含めると、別の担当が差し替える際に探しやすい。色味が変わる場合は、閲覧端末やブラウザーの表示差も考え、編集画面だけで判断しない。画質の検査は主観に頼りすぎず、文字の輪郭や重要な商品の部分など、確認する位置を決めて複数の書き出しを比べる。