ウェブサイトを魅力的なものにしてくれる写真やロゴは、ウェブデザインの上で欠かせない要素ですが、たくさん利用するとサイトが重くなってしまいますよね。重いサイトは、ユーザがストレスに感じて、待てないよー！って、離脱してしまうかもしれないし、SEO的にも検索エンジンの低評価につながるので、画像の圧縮やリサイズなどの最適化は非常に重要です。
ウェブサイトに画像を利用する際、するべきこと
- 魅力的で適切な画像を利用する
- 適切なファイルフォーマットを選ぶ
- 圧縮、リサイズする
- SEO的に有効なファイル名、代替テキスト、キャプションを付ける
順番に見ていきます。
1. 高品質で適切な画像を利用する
ページの趣旨や文章に合った、魅力的な画像を利用することが大切ですね。
画像を自分で用意する、プロに依頼するなどありますが、ここではネット上で画像を提供しているサイトをいくつかまとめてみました。
利用規約がまちまちなので、しっかりと確認してください。
＜無料の写真素材＞
| サイト名 | 内容 |
|---|---|
| Pixabay.com | 世界中のクリエイターによる100万点以上の高品質な画像素材を提供。海外のサイトですが日本語検索可。 |
| PAKTASO | 凡庸性の高い高品質な画像素材がストックされていて便利です。 |
| GIRLY DROP | 女の子好みのお洒落な画像がたくさん提供されています。 |
| 写真AC | クリエイター投稿型の写真素材サイト。利用にはユーザ登録が必要。無料で利用できるのは、1日9個まで。 |
| FIND/47 | 経済産業省のサイトで、日本全国の四季折々の写真が公開されています。見ているだけでも楽しいです。 |
| Unsplash | 100万点以上の高品質な写真を提供しているカナダの写真素材サイト。検索は英語で。 |
| BURST | ネットショップ作成サービスのShopifyが運営するフリー写真素材サイト。検索は英語で。 |
| food.foto Foodiesfeed |
どちらも料理、食材に特化した写真素材サイトです。 |
＜有料の写真素材＞
| サイト名 | 内容 |
|---|---|
| PIXTA | 国内最大級。月額プラン、単品で購入も可。 |
| Adobe Stock | 世界中の豊富な素材が利用できて、コスパいいです。日本語サイトあり。月額プラン、パッケージプランから選びます。 |
| shutterstock | 世界最大級の写真素材サイト。日本語サイトあり。月額プラン、パッケージプランから選びます。 |
＜無料のアイコン＞
| サイト名 | 内容 |
|---|---|
| FLAT ICON DESIGN | お洒落感高めのアイコンがそろっています。背景色を選べます。 |
| ICOOON MONO | モノトーンのアイコン素材集。色味を調整してダウンロードできます。 |
| アイコン配布中 | スマホ用にデータが軽減されています。1日12個まで。 |
| イラストAC | 写真AC の姉妹サイト。1日9個まで無料。 |
| iconmonstr | 非常に豊富なアイコンの揃うドイツのサイトです。 |
| ICONS8 | ウェブ用デザインリソースを提供するアメリカのサイト。HTML に画像リンクを埋め込むこともできます。 |
＜無料のイラスト＞
| サイト名 | 内容 |
|---|---|
| イラストAC | 写真AC、アイコンACの姉妹サイト。1日9個まで。 |
| 無料イラスト素材.com | パーツとして利用できるイラストが豊富に揃っています。 |
| EC design | ネットショップに使い勝手のよさそうなイラストが揃っています。 |
2. 適切なファイルフォーマットを選ぶ
ウェブサイトの画像には、JPEG、PNG、GIF がよく利用されますね。最近よく利用される SVG も合わせて、特徴をまとめます。
画像の美しさ、ファイルの大きさにかかわってくるので、適切なフォーマットで保存することは大切です。
| フォーマット | 特徴 |
|---|---|
| JPEG | フルカラーで表現できるので、色数の多い画像をきれいに表示できる。 風景・景色・人物像など多くの色を使う写真に利用。 |
| PNG | フルカラーで高画質ですが、ファイルサイズが大きめです。透過処理もできる。 色数の多いイラストや、透過処理をする切り抜きの写真などに利用。 |
| GIF | 256色で構成されデータ容量が軽い。アニメーションや透過処理ができる。 色数の少ないロゴやイラストなどに利用。 |
| SVG | 拡大縮小しても画像が滑らかで、色やサイズの変更が簡単。複雑な形状や写真のように画素数の多いものには不向き。アニメーションや透過処理ができる。 アイコンなど複雑でない画像などに利用。 |
3. 圧縮、リサイズする
圧縮、リサイズは、Photoshop などの画像エディタツールを利用してできますが、ここでは圧縮、リサイズに特化したものをまとめます。
＜ブラウザ上で加工＞
| サイト名 | 内容 |
|---|---|
| Optimizilla | 圧縮後の画像を見ながら、自分でクオリティを調整できます。日本語対応あり。 対応ファイル形式：JPEG、PNG |
| TinyPNG | 一度に20個、簡単に圧縮ができます。圧縮率は自動で設定され、自分での詳細設定はできません。英語サイト。 対応ファイル形式：JPEG、PNG |
| Kraken.io | DropboxやBox、Googleドライブからファイルをインポートしてアップロードできます。 無料版は圧縮のみですが、有料版はリサイズもできます。英語サイト。 対応ファイル形式：JPEG、PNG、GIF |
| Bulk Resize | リサイズ用サービス。指定したサイズに、複数の画像をまとめてリサイズすることも可能。日本語対応あり。 対応ファイル形式：JPEG、PNG、WEBP |
＜WordPress プラグイン＞
WordPress を利用している場合、自動で圧縮、リサイズを行うプラグインを利用できます。
| プラグイン名 | 内容 |
|---|---|
| Compress JPEG & PNG images | ウェブサービスTinyPNG のプラグインバージョンです。 |
| EWWW Image Optimizer | 自動で簡単に画像の圧縮ができるプラグインです。 |
| Simple Image Sizes | リサイズ用のプラグインです。 |
4. SEO的に有効なファイル名、代替テキスト、キャプションを付ける
ファイル名： 画像に関連のある英語名。（例： sleeping-cat.jpg)
代替テキスト： 画像を簡潔に表す言葉。視覚障害者の方など、音声読み上げを利用している方には重要。（例： 眠り猫）
キャプション： 画像に関する説明・補足・注釈等の有用な情報。（例： 栃木県日光市の日光東照宮の回廊にある建築装飾彫刻作品）
また、画像の周辺のテキストは、検索エンジンが画像を理解する材料となります。画像と周辺の文字列の関連性も、SEO 的には重要です。