PAGES

GUIDE

DATA

編集ガイド|画像掲載

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

掲載手順

  • 1) 手元の画像処理ソフトで画像のサイズを最適化する。
    • デジカメの写真をそのままアップはできません。大きすぎます。
    • 大きな画像データは、閲覧者の通信負担が大きくなります。
    • 拡大で大きく見せるとしても、1200px幅程度で十分です。
    • PukiWikiの仕様で、アップロードできるファイルは、最大で1MBですが、Web上に掲載する画像は、数十KBから、200KB程度までと考えて下さい。
    • 参考:画像のリサイズサービスの活用
  • 2) 画像を掲載したいページで 画像をアップする
    • ページフッターの UPLOAD をクリック
    • 参照>手元の画像を選択
    • 管理者PWに、いつものPWを入力してアップ
  • 3) ページを編集する
    • ページフッターの EDIT をクリック
    • 編集画面に入って、画像を掲載したい箇所に imageプラグイン(以下)を書く

imageプラグインの書式

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

記述例(最もシンプルな記述)

#image(sample.jpg)


記述例(画面右側に、1/4の幅で表示)

#image(sample.jpg,right,25%)


応用例

これはサンプル画像です。

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



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

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




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

初心者の方は、こちらもお読み下さい。

はじめに

近年のデジタルカメラで撮影したものは、サイズが非常に大きく、幅が数千ピクセル、ファイルサイズにして数MBもあります。一点で数MBもある画像を<img>タグでそのままリンク配置する行為は大きな通信負荷をかけるので、絶対にやってはいけません。
 Webで表示できるのは画面幅最大1920px、近年の一般的なサイズとしては、ヘッダー画像で1280px、記事内の画像であれば 180px〜640px程度、サムネイルであれば、60px〜160px程度です。ですから、Webサイトに画像を掲載するには、まずオリジナル画像をWebに最適なサイズに変更することが必要です。
 ここでは、デジタルカメラで撮影した写真、またスキャナー等で取り込んだ画像をWeb用にリサイズする際の留意点を述べます。

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

必要なソフトウエア

  • 画像処理ができるソフトウエアをご用意下さい。
    例えば、Adobe Photoshop(有償,W/M)、The GIMP(フリー,W/M/L)など
  • 以下のようなオンラインツールでも可能です。
    Photoshop Express Editor

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

  • 画像解像度、画像サイズ、画像の拡大・縮小・・・といった
    操作キーワードをメニューから見つけて下さい。
  • ダイアログには、現在の画素数と、変更後の画素数が表示されると思いますので、変更後に、800pixel、640pixel、320pixelなどと縮小されるよう、指定して下さい。
    • Webの幅は960pxが標準的な目安です。それに収まるサイズを考えます。
    • 印刷サイズ(㎜)や解像度(dpi)をではなく画素数(pixel)を変更して下さい。

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

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

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

  • JPEG形式( .jpg)、GIF形式( .gif)、PNG形式( .png) などを選択して下さい。
    • JPEGは、細かな色の変化の多い「写真」向きです
    • GIFは、フラットな塗りの多いイラスト等で、効率よく圧縮がかかります
    • PNGは透明部分の処理がきれいなので、ロゴマーク等に適しています
  • Photoshop形式( .psd )のような特定のソフトに依存する形式は使えません。

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

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

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

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

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

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

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



添付ファイル: fileNight_Dream_eye.jpg 4件 [詳細]
Last-modified: 2019-05-29 (水) 17:26:46 (18d)