EditGuide/Images のバックアップ(No.1)

九州産業大学 生命科学部

編集ガイド｜画像掲載

当サイトへの画像の掲載について

↑

はじめに

デジタルカメラで撮影したものは、幅が数千ピクセル、ファイルサイズにして数MBもあります。これをそのままリンク配置すると大きな通信負荷をかけるので、リサイズ・圧縮を行なってファイルを軽くする必要があります。

Webに掲載する画像の一般的なサイズは、ヘッダー画像で 1920px〜1280px、記事内の画像で 800px〜240px程度、サムネイルで 160px〜80px 程度です。


↑

CONTENTS


↑

画像データの準備

↑

画像のリサイズ

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

↑

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

  • 画像解像度、画像サイズ、画像の拡大・縮小・・・といった操作キーワードをメニューから見つけて下さい。
  • ダイアログには、現在の画素数と、変更後の画素数が表示されるので、変更後に最適なサイズに縮小されるよう、指定して下さい。
  • 印刷サイズ(㎜)や解像度(dpi)をではなく画素数(pixel)を変更して下さい。

↑

画像は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 といった形式にして下さい。
  • 日本語は非推奨です。また、➀（まる１）や、ローマ数字といった「環境依存文字」も使わないようにしましょう。




↑

当サイト（PukiWiki）への掲載について

↑

掲載手順

  • 1 ) 画像を掲載したいページで 画像をアップする
    • ページフッターの UPLOAD をクリック
    • 参照＞手元の画像を選択
    • 管理者PWに、いつものPWを入力してアップ
  • 2 ) ページを編集する
    • ページフッターの EDIT をクリック　＞　編集画面に入ります。
    • 画像を掲載したい箇所に imageプラグイン（以下）を置いて、ファイル名、配置方法、サイズ等を記載します。

↑

imageプラグインの書式

#image(画像ファイル名, [ left / right / center ] , 初期表示(%) , "一行コメント")
  • 画像ファイル名には、添付ファイルとURL(直リンク)が利用できます。
  • left あるいは right を記述すると回りこみます。
  • 初期表示サイズ(%)は、コンテンツ領域に対する割合を意味します。
    従来の単位はピクセルでしたが、このプラグインの単位は%です。
  • 何も記載しない場合は100%（コンテンツ幅いっぱい）で表示されます。
    ただし、もともと小さな画像が拡大されることはありません。

↑

通常配置

#image(sample.jpg)

#image(): File not found: "dummy.jpg" at page "images"


#image(sample.jpg,,40%)

#image(): File not found: "dummy.jpg" at page "images"


↑

インライン配置

&image(sample.jpg,,20%); &image(sample.jpg,,20%); &image(sample.jpg,,20%);

&image(): File not found: "dummy.jpg" at page "images"; &image(): File not found: "dummy.jpg" at page "images"; &image(): File not found: "dummy.jpg" at page "images";


↑

表組

|48|4|48|c　← 合計が 100(%)になるように
|#image(sample.jpg)| |#image(sample.jpg)|

#image(): File not found: "dummy.jpg" at page "images"

#image(): File not found: "dumm2.jpg" at page "images"


↑

回り込み配置

#image(): File not found: "dummy2.jpg" at page "images"

この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。



以下のように記載しています。

#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。・・・
#clear


↑

画像をリンクボタンにする方法

画像にハイパーリンクを設定するには、画像をインライン要素（ #プラグイン( ) ではなく &プラグイン( ); ）として表示した上で、ページ名 または URL にリダイレクトします。以下書き方です。

[[&image(sample.jpg,,20%);>SocialDesign]]
[[&image(isample.jpg,,20%);>http://www.example.com]]


&image(): File not found: "dummy.jpg" at page "images";?
↑ ボタンです。



↑

付記

↑

要注意! Exif情報について

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

  • 基本的な方法：PNG、GIF形式に変換して保存
    PNG形式やGIF形式の画像には Exif情報はありません。したがって画像が扱えるソフトであれば、JPEG画像を開いた後、PNG形式で保存すれば、その時点で Exif情報は消えます。
  • Macの場合
    • 画像をプレビューで開いて変換書き出し
      ファイル＞書き出す＞フォーマットにPNG形式を指定して書き出せばOK。
      ツール＞インスペクタを表示＞Exifタブ　で情報の確認もできます。
    • ImgeOptimというソフト（画像最適化ソフト）でも削除できます。
  • 尚、Facebook、Instagram、Twitter、LINEなど、SNSの最近の仕様では、投稿された写真に含まれる位置情報等は自動的に削除されるようになっています。

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