こんにちは、沖縄で活動しているコンテンツ制作チームの沖縄Npnp（エヌポンプ）です。エヌポンプでは、WEBサイトやホームページ制作だけでなく、YouTubeチャンネルを開設・撮影・運用したり動画編集のお仕事も承っています。
本日はサイト内に記事を追加する時に知っておきたい画像サイズ注意点について、画像の横幅や保存形式・便利な編集機能などをお話していきたいと思います。
目次
サイトの記事に画像を追加する時の注意点
記事内の画像は「なるべく容量は小さく・横幅いっぱい・綺麗」
WEBサイトで記事を投稿する際には「テキスト」と「静止画」を使って制作することが主流です。静止画は、カメラやスマートフォンで撮影した写真やペイントソフトを用いて作成した画像、ネット上で無料提供されているフリー画像などの事を指します。
これらとテキストを組み合わせて１つの記事を作りますが、まずは以下の３つに気をつけて画像を用意します。
１. なるべく容量は小さくする
簡単に言うと、画像は横幅が大きくかつ高画質なものほどファイルサイズ（容量）が大きくなります。「綺麗でより鮮明な画像を閲覧者に見てもらいたい！」という思いから撮影した写真を容量やサイズを変更することなくそのまま記事に掲載してしまうとページを開く際に時間がかかってしまいます。
時間がかかる事で閲覧者にストレスを与えてしまった結果ページが完全に表示される前に離脱されては元も子もありません。特にスマートフォンからアクセスした場合「ギガ」を消費する為ユーザーからはあまりよく思われないでしょう。スペックの高いスマートフォンやPCが当たり前のように普及しデバイスによってはページがサクサクと表示されますが、記事に画像を掲載するなら「容量は小さく」する作業を忘れずに行なった上でアップロードすることが無難です（※画像１枚100kb以下ならまず問題なく表示されます。ファイルサイズは大きくても200〜300kbにとどめておくと良いでしょう）。
２. 横幅いっぱい
記事内の画像は「横幅いっぱい」に設定します。記事全体のバランスやデザインを整えるだけでなくスマートフォンから閲覧した場合にも画像がしっかり確認できるようにする為です。
【画像の横幅が小さい場合の閲覧イメージ】 ※パソコンから閲覧した場合は画面が大きい分画像も大きく表示されるがスマートフォンからの閲覧ではかなり小さく表示され非常に見づらくなっている。
３. 綺麗
画像は容量が小さければ良いという訳ではありません。以下のように横幅も小さく容量も限界まで落とした画像は、ページを開く際にいかにスムーズに閲覧可能であっても画像が荒くパッと見ただけでは細部が判別不可能です。このような画像は閲覧者に意図が伝わりづらく閲覧者に対して記事の質が悪い印象を与えてしまいます。
【画質が荒すぎる画像の例】
写真や作成した画像の容量を小さくすることも大事ですが画像サイズをリサイズする際は鮮明さがある程度残るレベルに留めておきましょう。
また画像の保存形式には「JPG」や「PNG」「GIF」などのファイル形式が多く存在しますがWEBサイトの記事内で使用する画像は基本的に「JPG（JPEGとも書きます）」で保存します。
「横長」の画像が好ましい理由
WEB記事の中に挿入されている静止画は基本的に「横長」が主流です（例外としてイラストや漫画などの静止画を挿入する場合は縦長が使われている事もあります）。横長の写真を使用することで画像を画面全体に表示させ「見切れ」を防止します。
特に見切れてしまうと確認しづらい図形や表・地図などの静止画を記事内に挿入する場合は横長画像を設定しましょう（※ただしデバイスによりますがスマートフォンやタブレットから閲覧する場合は縦長画像も見切れる事なく表示させる事が可能です。完全にスマートフォン向けのサイトであれば縦長画像の使用は問題ありません）。
ファイル形式や画像サイズを変更したい時に使える無料のサービス
記事に挿入する写真や画像のファイル形式やサイズを変更する場合ペイントソフトや画像編集ソフト等を使用する方法が挙げられますが、オンライン上の無料サービスを使用して簡単に画像編集を行う方法もおすすめです。
例えば「PEKO STEP（https://www.peko-step.com/tool/resize.html）」というサイトでは、画像サイズの変更から切り取り・テキストの追加等をオンライン上で行う事が可能です。
PNG形式の画像をJPG形式に変更したい場合は「iLoveIMG（https://www.iloveimg.com/ja/convert-to-jpg/png-to-jpg）」で画像をドロップするだけで簡単に変更できます。
まとめ
● 記事内の画像は「横幅いっぱい・なるべく軽く・綺麗」を意識する ● 縦長画像はスクロールしないと見切れる可能性あり。「横長」画像を挿入する ● 静止画像の保存形式は基本的に「JPG」でOK ● 画像サイズやファイル形式はオンライン無料サービスを使えば簡単に変更できる
記事に挿入する画像サイズや容量に注意する事はWEBサイトのデザインや仕様に合わせるだけでなく閲覧者にとって見やすいページを作成するためにも必要な作業です。特に初めて記事制作をする方は知っておいて損はありませんのでぜひ参考にしてみてください。
