LogoMark.png

EditGuide/Images

編集ガイド|画像掲載

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

はじめに

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

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


CONTENTS


画像データの準備

画像のリサイズ

画像のリサイズを行うにはオンラインツールやスマホ、PCにインストールされた画像処理ツールを使います。以下のような方法があります。

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

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

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

JPEG形式( .jpg)、PNG形式( .png) 、WebP(.webp)、GIF形式( .gif)、SVG(.svg)など、Webブラウザが対応する形式を選択して下さい。

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

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

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




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

掲載手順

imageプラグインの書式

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

他のページにある画像を流用掲載するには

以下のように、画像のファイル名の前に、それが添付されているページ名を加えることで、他のページからの画像の流用掲載が可能です。

#image(画像が添付されたページの名称/画像ファイル名,・・以下同様)

ページ名と画像ファイル名の区切りは「/」半角スラッシュです。

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

#image(JohnSmith/情報デザイン演習IIA/MainVisual.jpg,,30%)
MainVisual.jpg




配置サンプル

通常配置

#image(sample.jpg)
sample.jpg


中央に縮小配置

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


左右に回り込み配置

#image( ファイル名, left / right, ・・・)
2つ目のパラメータに left または right と記載
これはサンプル画像です。

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

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

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

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


インライン配置

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

sample.jpg sample.jpg sample.jpg

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

表組

当サイトでは、編集画面内で [ | ](縦ストローク)を使って以下のように記述すると、各要素が表の形で出力されます。

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

表の罫線を消したい場合は、編集画面に以下のコードを貼り付けて下さい。

#settableborder(none)


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

[[&image(・・略・・);>リンク先]]

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

[[&image(sample.jpg,,20%);>健康スポーツ科学科]]
[[&image(isample.jpg,,20%);>http://www.example.com]]


sample.jpg
↑ ボタンです。



付記

要注意! Exif情報について

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

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



PAGES

GUIDE

添付ファイル: filesample.jpg 389件 [詳細]
Last-modified: 2023-01-12 (木) 10:44:12