LogoMark.png

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


#author("2021-10-20T18:10:53+09:00","default:inoue.ko","inoue.ko")
*編集ガイド|画像掲載
当サイトへの画像の掲載について
~

***はじめに
デジタルカメラで撮影したものは、幅が数千ピクセル、ファイルサイズにして数MBもあります。これをそのままリンク配置すると大きな通信負荷をかけるので、リサイズ・圧縮を行なってファイルを軽くする必要があります。
&color(red){当サイトでは、データダイエットのため 512KB以上のファイルはアップロードできないように制限をかけています(アップロード画面に明記されています)。};
&small(Instagram, Twitter などはアップした時点でサービス側でリサイズ・圧縮が行われています。);

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

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

#qrcode(,right,)
***CONTENTS
#contents2_1
~

**画像データの準備
***画像のリサイズ
画像のリサイズを行うにはオンラインツールやスマホ、PCにインストールされた画像処理ツールを使います。以下のような方法があります。
-''Webサービスの利用''  ← 手軽でオススメ
手元の画像をドラッグ&ドロップでアップして、サイズを指定するだけで、簡単にリサイズ・圧縮された画像が得られます。
--''Google Squoosh'':https://squoosh.app/
[[参考:Google Squooshの使い方>https://blog.marswee.com/entry/squoosh-how-to]]
--''Bulk Resize Photos'':https://bulkresizephotos.com/
[[参考:Bulk Resize Photosの使い方>https://freesoft-100.com/review/bulk-resize-photos.html]]
-Adobe Photoshop (Web用に書き出し)を使う。
-Photoshop同等の作業ができる [[The GIMP>https://www.gimp.org/]]を使う
~

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

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

***Webに適した形式で保存します
JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( .gif)、SVG(.svg)など、Webブラウザが対応する形式を選択して下さい。
-JPEG:細かな色の変化の多い「写真(自然物)」向きです
-PNG:スクリーンショットなどの「画像(人工的なもの)」向きです。また透明部分の処理がきれいなので、ロゴマーク等にも適しています
-WebP:Googleによる次世代画像フォーマットで、軽くて高速。アルファチャンネルもサポートします。多くのブラウザが対応するようになりました。
-GIF:フラットな塗りの多いイラスト等で、効率よく圧縮がかかります
//-SVG:上記の4種と異なり、ベクター形式のデータです。拡大縮小で劣化することなく、なめらかなアニメーションも可能になります。

Photoshop形式( .psd )やIllustrator形式( .ai)ような特定のソフトに依存する形式は使えません。また、WORDやPDFなどのドキュメントファイルは、ページ内に直接表示することはできません。
~

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

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

~
~


**当サイト(PukiWiki)への掲載について
***掲載手順

-1 ) ''画像を掲載したいページで'' 画像をアップする
--ページフッターの UPLOAD をクリック
--参照>手元の画像を選択
--管理者PWに、いつものPWを入力してアップ

-2 ) ページを編集する
--ページフッターの EDIT をクリック > 編集画面に入ります。
--画像を掲載したい箇所に imageプラグイン(以下)を置いて、ファイル名、配置方法、サイズ等を記載します。
~

***imageプラグインの書式
 #image(画像ファイル名, [ left / right / center ] , 初期表示(%) , "一行コメント")

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

***他のページにある画像を流用掲載するには
以下のように、画像のファイル名の前に、それが添付されているページ名を加えることで、他のページからの画像の流用掲載が可能です。
 #image(画像が添付されたページの名称/画像ファイル名,・・以下同様)
ページ名と画像ファイル名の区切りは''「/」半角スラッシュ''です。

例えば、JohnSmith さんの 情報デザイン演習IIA のページにある MainVisual.jpg をこのページに掲載するには、以下のように記載します。
 #image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
~
~

**配置サンプル

***通常配置
 #image(sample.jpg)

#image(sample.jpg)

~

***中央に縮小配置
 #image(sample.jpg,center,40%)

#image(sample.jpg,center,40%)

~

***左右に回り込み配置
 #image( ファイル名, left / right, ・・・)
 2つ目のパラメータに left または right と記載
#image(sample.jpg,right,30%,"これはサンプル画像です。")
この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。この文章は回りこみ動作確認用のダミーです。
#clear

以下のように記載しています。
 #image(sample.jpg,right,30%,"これはサンプル画像です。")
 この文章は回りこみ動作確認用のダミーです。・・・
 #clear

左に寄せるだけで、回り込みさせたくない場合は、以下のように2番目のパラメータを空欄(カンマを連打 [ ,, ] )にして下さい。

~


***インライン配置
 &image(sample.jpg,,20%); &image(sample.jpg,,20%); &image(sample.jpg,,20%);

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

画像をインライン要素(プラグイン記号 ''&'' )として表示することで、文字並びと同様に、羅列させて表示することができます。この場合、2番目のパラメータは空欄(カンマを連打 [ ,, ] )にして下さい。
~

***表組
 |49|2|49|c ← 合計が 100(%)になるように
 |#image(sample.jpg)| |#image(sample.jpg)|


|49|2|49|c
|#image(sample.jpg)| |#image(sample.jpg)|

付記)表の罫線を消したい場合は、以下をご参照下さい。
[[Plugin/SetTableBorder]]
~

***画像をリンクボタンにする方法
 [[&image(・・略・・);>リンク先]]
画像にハイパーリンクを設定するには、画像をインライン要素( #プラグイン( ) ではなく &プラグイン( ); )として表示した上で、ページ名 または URL にリダイレクトします。以下書き方です。
 [[&image(sample.jpg,,20%);>健康スポーツ科学科]]
 [[&image(isample.jpg,,20%);>http://www.example.com]]
~
CENTER:
[[&image(sample.jpg,,25%);>EditGuide]]
↑ ボタンです。
~
~

**付記

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

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

-Macの場合
--画像をプレビューで開いて変換書き出し
ファイル>書き出す>フォーマットにPNG形式を指定して書き出せばOK。
&small(ツール>インスペクタを表示>Exifタブ で情報の確認もできます。);
--[[ImgeOptim>https://imageoptim.com/mac]]というソフト(画像最適化ソフト)でも削除できます。

-Windowsの場合
--画像ファイルを右クリック>プロパティ>「詳細」タブ
最下部の「プロパティや個人情報を削除」から削除できます。
--[[All About のサイトに記事があります。>https://allabout.co.jp/gm/gc/404311/]]

-iPhone / Androidの場合:アプリが必要です(無料のものがあります)
[[Google:iPhone Exif 削除]] / [[Google:Android exif 削除]]

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

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