WebDesign/Images

Webに掲載する画像について

はじめに

Webに掲載する画像は、JPEG, PNGなどの汎用の形式であることが必要で、また一般的なサイズは、ヘッダー画像で 1920px〜1280px、記事内の画像で 800px〜320px程度、サムネイルで 160px〜80px 程度です。

幅が数千ピクセル、ファイルサイズにして数MBもある画像をそのままリンク配置すると閲覧者に大きな通信負荷をかけるため、リサイズ・圧縮を行なってファイルを軽くする必要があります。

参考：このページの記事は「画像」すなわち、ラスターデータを前提として内容ですが、HTML5 からは「図形」すなわち、ベクターデータ（具体的には SVG 形式のデータ）も直接使えるようになりました。ロゴのように Illustratorで作成できるものについては、今後はSVGの活用も検討して下さい。

画像のサイズを確認するには

• Macの場合：画像ファイルを右クリック＞情報を見る
• Windowsの場合：画像ファイルを右クリック＞プロパティー
  
  

画像のリサイズを行うには

画像のリサイズを行うにはオンラインツールやスマホ、PCにインストールされた画像処理ツールを使います。

• 方法１. Web上の画像リサイズサービスを使う（簡単・手軽）
  • Google Squoosh：https://squoosh.app/
    参考：Google Squooshの使い方
  • Bulk Resize Photos：https://bulkresizephotos.com/
    参考：Bulk Resize Photosの使い方
• 方法２. AdobePhotoshop で「Web用に書き出し」を使う
• 方法３. The GIMPなどのオープンソースフリーウエアを使う
  
  

変更するのは「画素数」です

• サイズ変更における単位は、pixel（画素数）です。mm（印刷サイズ）や dpi（解像度）ではありません。
• Photoshopのダイアログの場合、現在の画素数と、変更後の画素数が表示されるので、変更後に最適なサイズに縮小されるよう、指定して下さい。
  
  

画像はRGBモードになっていますか？

• 画像には、RGBモード(ディスプレイ用)とCMYKモード(印刷用)があります。
• デジタルカメラの画像であれば、そのままで問題ありませんが、もし与えられた画像がCMYKモードになっていた場合は、メニューの中から、「モードの変更」のような項目を見つけて、RGBモードに変換して下さい。
  
  

Webに適した形式で保存します

JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( .gif)、SVG(.svg)など、Webブラウザが対応する形式を選択して下さい。Photoshop形式( .psd )やIllustrator形式( .ai)ような特定のソフトに依存する形式は使えません。

• JPEG：細かな色の変化の多い「写真（自然物）」向きです
• PNG：スクリーンショットなどの「画像（人工的なもの）」向きです。また透明部分の処理がきれいなので、ロゴマーク等にも適しています
• WebP：Googleによる次世代画像フォーマットで、軽くて高速。アルファチャンネルもサポートします。多くのブラウザが対応するようになりました。
• GIF：フラットな塗りの多いイラスト等で、効率よく圧縮がかかります
  
  

保存の際のクオリティーについて

• JPEG形式では、保存の際に質を落とせば、ファイルサイズを小さくすることができます。そこそこの画質で、できるだけファイルサイズが小さくなるようにして下さい。ファイルサイズが小さい方がネットワークの負荷が軽減されます（閲覧がスムーズ）。
• ただし、JPEGは「不可逆圧縮」といって、圧縮の際に捨てた情報は戻りません。必ず、オリジナル画像を別にバックアップしておきましょう。
  
  

保存の際のファイル名について

• 原則として文字は、半角英数と _ (アンダースコア)　- (ハイフン)のみです。
• / * + ~ . , # % & () などは特殊な意味を持つので使わないようにしましょう。
• また、スペースの利用もおすすめできません。単語を区切りたいときは、
  photoImage01.jpg　photo_image_01.jpg といった形式にして下さい。
• 日本語は非推奨です。また、➀（まる１）や、ローマ数字といった「環境依存文字」も使わないようにしましょう。
  
  

画像データに含まれるExif情報 (個人情報が含まれる) について

スマートフォン等で撮影した写真には、位置情報が含まれる場合があります。自宅の位置情報などプライベートな情報が流出しないよう、画像等をアップする場合は、それを削除することをお勧めします。

• 基本的な方法：PNG、GIF形式に変換して保存
  PNG形式やGIF形式の画像には Exif情報はありません。したがって画像が扱えるソフトであれば、JPEG画像を開いた後、PNG形式で保存すれば、その時点で Exif情報は消えます。

• Macの場合
  • 画像をプレビューで開いて変換書き出し
    ファイル＞書き出す＞フォーマットにPNG形式を指定して書き出せばOK。
    ツール＞インスペクタを表示＞Exifタブ　で情報の確認もできます。
  • ImgeOptimというソフト（画像最適化ソフト）でも削除できます。

• Windowsの場合
  • 画像ファイルを右クリック＞プロパティ＞「詳細」タブ
    最下部の「プロパティや個人情報を削除」から削除できます。
  • All About のサイトに記事があります。

• iPhone / Androidの場合：アプリが必要です（無料のものがあります）
  Google:iPhone Exif 削除　/　Google:Android exif 削除

• 尚、Facebook、Instagram、Twitter、LINEなど、SNSの最近の仕様では、投稿された写真に含まれる位置情報等は自動的に削除されるようになっています。