LogoMark.png

WebDesign/Images

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


はじめに

Webに掲載する画像は、JPEG, PNGなどの汎用の形式であることが必要で、また一般的なサイズは、ヘッダー画像で 1920px〜1280px、記事内の画像で 800px〜320px程度、サムネイルで 160px〜80px 程度です。

幅が数千ピクセル、ファイルサイズにして数MBもある画像をそのままリンク配置すると閲覧者に大きな通信負荷をかけるため、リサイズ・圧縮を行なってファイルを軽くする必要があります。

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

画像のサイズを確認するには

画像のリサイズを行うには

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

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

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

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

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

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

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

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

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



PAGES

GUIDE

DATA

Last-modified: 2020-09-09 (水) 15:39:51