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

内田泰三 研究室


編集ガイド|画像掲載

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

はじめに

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

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


CONTENTS


画像データの準備

画像のリサイズ

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

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

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

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

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

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

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




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

掲載手順

imageプラグインの書式

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

通常配置

#image(sample.jpg)
dummy.jpg


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


インライン配置

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

dummy.jpg dummy.jpg dummy.jpg


表組

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


回り込み配置

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

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



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

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


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

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

[[&image(sample.jpg,,20%);>生命科学部]]
[[&image(isample.jpg,,20%);>http://www.example.com]]


dummy.jpg
↑ ボタンです。



付記

要注意! Exif情報について

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

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