WordPressでの画像の使い方と加工の仕方＆圧縮でサイトの速度と評価を上げる！
サイト内ではロゴやアイコン以外にも背景や説明画像、商品画像などで画像をつかう機会がたくさんあります。
画像って貼るだけだから簡単！なんてことはなく、サイズを調整したり、サイト全体の雰囲気と合わせるために色味を調整したりする作業があります。
さらに、重い画像(データのサイズが大きい画像)はウェブサイトの速度を下げる大きな原因に。
サイトを作り始める前に、正しい画像の使い方をマスターしておきましょう！
画像の著作権に注意！無断でサイトにアップしてはいけない
普段はなにげなくSNSにアップしたり自分のアイコンに使ったりしている“ネットから拾ってきた画像”
写真やイラストなどの画像にはすべて著作権があります。
基本的にネットからダウンロードした画像をサイトに使うのはNG
自分で撮った写真や、アプリなどで書いた絵※以外はすべて無断で使ってはいけないと考えましょう。
※お絵描きソフトや画像作成サイトなどでは、無料で使えるフリー素材が入っているものがありますので、必ずフリー素材かどうかを確認してから使いましょう。
使ってもいい画像を探すときは、「ダウンロード無料」に加えて、「著作権元の表記が必要か」「商用利用可能か」をチェックしてください。
不明なときは製作者に連絡して許可をもらう必要があります。
画像がほしいときは、著作権フリー素材を探します。
様々な画像やイラストのサイトが出てくるので、自分の好みに合ったサイトを一つ見つけておくと良いです。
おすすめのフリー素材サイト
写真ACは無料で写真素材をダウンロードOK!、さらに商用利用OK！
……質の高い写真素材が無料でダウンロードできるサイト。無料プランでは制限があるものの、コツコツ使えば問題なし！
イラストACでは高品質なイラストが無料でダウンロードできます。加工や商用利用もOK
……写真ACのイラストバージョン。プロが描いたような絵もたくさんある
アイコン素材ダウンロードサイト「icooon-mono」 | 商用利用可能なアイコン素材が無料(フリー)ダウンロードできるサイト
……サイトをわかりやすくするためや装飾のために使いやすいモノクロなアイコンが沢山あるサイト
わたしてきには上記の３つあれば素材探しには十分です！
色味の調整したり一部の色を変えたりもできる画像の加工
自分のイメージに合った画像を探すだけでも大変ですが、いざサイト内で使ってみたら周囲の雰囲気と合わなかったり、画像に重ねた文字が読めなかったりといろいろと問題が。
案外簡単に写真の雰囲気は変えられます。
- 画像の背景を消してサイトの背景の中で要素として使う背景透過
- 全体の色味を変える色彩ツールや要素の色を変える色置き換え
- ノイズを消したり要らない要素を消すスポット修正
などなど、いろいろなことができるとサイト作りに役立ちます。
画像加工の方法を知っておけば、この画像じゃ色味が合わない！なんて思うことがなくなります。
ちなみに、背景色を変えたいときなどに使う背景透過ツールはネット上に沢山ありますが、画像が荒くなったりするのでPixlrで頑張るのがおすすめ。
必要に応じてツールの使い方を調べてください。
Exif・メタデータとは？画像に個人情報が隠されている！？
フリー素材探しやイラストづくりに疲れて、自分で撮った写真を使いたくなることもあるでしょう。
摂った写真の画像データには見えている情報のほかに、撮影日時や位置情報などが保存されています。
わたしも友達から送られてきた「〇〇なう！」みたいな写真の撮影日時をみて嘘に気づいてしまったことが…。(笑)
サイトに上げる画像も同じです。データを確認＆処理してからサイトにアップロードしましょう。
Exchangeable Image File Format（エクスチェンジブル・イメージ・ファイル・フォーマット）の略で、画像の適切な処理や出力のために保存されているデータのこと。
JPEG・TIFF・JPEG XR（HD Photo）などの形式のファイルに保存されています。(デジカメやスマホで撮った写真)
写真データに保存される情報の例
- 撮影日時
- 位置情報（緯度、経度）
- 撮影情報（絞り値・露出時間・ISO感度・シャッタースピードなど）
参考元：毎日が生まれたて－写真のexif情報とは？確認・削除・編集する方法まとめ【画像データのイグジフ見方：Mac/PC・iPhone/Android】
べつに自宅の写真じゃないし、自分は映っていないし…なんて安易な考えで自分で撮った写真をサイトにアップしていると、住所や普段いく場所などがバレてしまうかも。
画像のデータはMacならから
Windowsなら右クリックでのから確認できます。
スマートフォンにはExif情報を確認する方法が標準ではありません。
LINEやTwitterなどの大手のSNSでは自動でExif情報を削除してからアップロードしてくれますが、Wordpressでは削除されません。
Exif情報を削除する方法
Windowsでは、Exif情報の下にあるプロパティや個人情報を削除から削除できます。
Macでは、ImageOptimというアプリケーションがおすすめ。
一括で削除したい場合などはフリーソフトを探してみましょう
画像のファイル形式を理解する
画像のファイル形式とは、画像のデータを圧縮するときの方法のことです。
それぞれ特徴があるので、写真やイラストなどの画像が重要なサイトを作る場合はチェックしておきましょう。
.jpgや.jpeg、他にも.jpe.pjpなどいろいろと拡張子がありますが、すべて同じ形式です。
フルカラーの約1677万色で表現でき、デジカメ写真などの保存に使われることが多いです。
高画質でありながら容量が小さいので写真などに向いてます。
ただし、データを圧縮するときに要らない部分を捨ててしまうため、後から元に戻すことが出来ません。
編集を繰り返していると画質が劣化することがあるので注意。
WEBでビットマップ形式(ドットで表現される)で扱うために作られた形式。
フルカラーの約1677万色で表現でき、背景透過などの処理が可能です。
イラストやロゴの画像では、JPGなどで生じる圧縮ノイズが生じないPNGが推奨です。
変更を加えてもあとでデータを完全に復元できるため、加工を繰り返す場合に向いています。
※印刷では色が変わってしまうため、印刷を前提とした画像には使えません。
１つのファイルに複数の画像を入れることができるため、ちょっとしたアニメーションに使用するのが有名です。
色数が256色までで、できるだけ小さくデータを使用するために作られました。グラデーションなど綺麗な表現はできません。
透明や半透明の背景透過処理ができます。
単色のアイコンやボタンなどをGIFで作るとデータ容量を非常に小さく抑えることができます。
簡潔にまとめると写真はJPG系、イラストやアイコンはPNGと覚えておけばOKです。
サイトにアップロードする前に画像を圧縮する
大きなサイズの画像はサイトの表示速度を下げてしまうため、「あれ、このサイト重いな…」と素人感が出てしまう原因になります。
よほど高画質な画像にこだわっているのでない限り、サイトにアップロードして使う画像は、まず圧縮処理をしましょう。
このサイトで簡単に画像の圧縮が出来ます。
パンダの横の点線の中をクリックして、圧縮したい画像を選択。
進行バーが満たされて完了したら、downloadをクリックしてダウンロードします。
必ずこの圧縮を行ってからサイトに画像をアップしましょう！
alt=代替テキストを入力しておく
画像がなんらかの問題によって表示されなかった場合に、alt=<さやっと。ロゴ画像>に設定した文字が表示されます。
画像をしめすキーワードで説明を入力しましょう。
全角日本語で構いません。複数設定するときは、半角スペースを入れて入力します。
SEO的にもサイトに関係のあるコンテンツのキーワードとして認識されるため、altは必ず設定するようにしましょう。
WordPressのメディアの管理画面では、代替テキストという欄で入力できます。
画像を追加したら同時に設定すると忘れなくて済みます。
メディアの編集と便利な置き換えツール
サイト内に画像を挿入する際は、外観のカスタマイズ画面や固定ページ・投稿の編集画面などからアップロードすることができます。
HTML編集で画像を挿入する場合には、先にメディアにアップロードしてからアップロード先のURLを使用して画像を指定します。
また、アップロードした画像の編集などもここで行います。
すでに挿入した画像を差し替えできる Enable Media Replace
このプラグインを有効にしておくと、すでにページ内に挿入した画像を変更する場合にメディアから新しい画像をアップロードし、自動で挿入した場所のURLを書き換えることができます。
これがないと、新しい画像をアップロードしたあとに、更に挿入した場所を編集して新しい画像に差し替えなければならなくなって面倒。
ページを見てみたらデザインが合わなかった場合などに使えるので、サイトを作る際にはインストールしておくのをおすすめします。
WordPressのメディア編集で画像を編集しても反映されないときがある
ページ内に表示してみたらサイズが合わなかったりしたとき、メディアの編集画面で画像をトリミングするなど簡単な編集ができるのですが、
編集が終わってもページ内の画像が元のまま…
これがすごくよくある現象で、ネット上で検索しても明確な対処法は出てこず、いろいろと試さなければならなくなります。
いちいちつまずくと面倒なので、もうアップロードしてから編集するのではなく、一旦自分のPCや他サイトで編集してから画像の差し替えすることを強くおすすめします。
上記のプラグインをインストールしておけば簡単なので、編集してダメだったときは早々に諦め、貴重な時間を浪費しないようにしましょう。
小さな作業がサイトの質を左右する！
画像一つでも覚えることがあり面倒ですが、著作権に配慮したり画像を圧縮したりする小さな作業がサイトの「プロ感」を出すのにたいせつなことです。
一度覚えてしまえば面倒なこともないので、最初に頭にいれてサイトを作っていきましょう。
参考元：LIG－画像ファイル形式の基礎と特徴まとめ（JPEG・GIF・PNGなど）
さやに相談してみる
自分では解決しない…けど専門業者に頼むのはちょっと…
自分で進めたいけどサポートが欲しい！というとき
お気軽にご相談ください！
記事内容のカスタマイズ代行、さらにご希望に合わせたカスタマイズ、ご希望の機能やデザインの制作、コンテンツ作成のお手伝いまでウェブ制作全般にご対応！
ご利用ガイド