神奈川県のWEB制作フリーランスなら下村

無料資料請求
2019/06/25

【サイト制作】画像の入れ方・選び方【便利サイト】

WEBサイト制作で画像の入れ方を教えてほしい
ついでに無料で良質なサイトがあれば教えてほしいな

そんな人に向けた記事です

サイト制作で画像の入れ方

サイト制作で画像の入れ方

HTMLで画像を入れる方法は簡単で以下のHTMLに従えばOKです

<img src=”画像のURLもしくは画像の場所” width=”画像の幅” height=”画像の高さ” alt=”画像の説明” border=”外枠あり・なし” >

画像の場所

ダウンロードした画像がローカルファイルのどこにあるかを調べましょう

../でひとつ上のフォルダを見ることができます

以下の画像が分かりやすいです

ちづみさん引用させていただきます!

URLの場合は例えば以下のようにすれば画像が表示されます

width=”画像の幅” height=”画像の高さ” alt=”画像の説明” border=”外枠あり・なし”

src以外の要素については無くても表示されます

ない場合はwidthやheightは画像のサイズのままで表示されるので100pxなら100pxで表示されます

HTMLで表示すれば100pxの画像を50pxで表示出来たり出来ると言う事です!

画像の説明のaltタグ

画像の説明のaltは、画像の説明なので視覚的には表示されないのですが

Googleも重要なので設定するように解説しています

・代替テキスト

代替テキスト(画像について説明するテキスト)は、スクリーン リーダーを使用するユーザーや、低帯域幅のネットワークを使用しているユーザーなど、ウェブページの画像を確認できないユーザー向けの補助機能として役立ちます

・Google では、代替テキストに加えて、コンピュータ ビジョン アルゴリズムやページのコンテンツを使用して、画像のテーマを理解します。


・代替テキストを設定するときは、キーワードを適切に使用して、ページのコンテンツのコンテキストに沿った、情報に富む、有用なコンテンツを作成するようにしてください。


Google 画像検索に関するおすすめの方法

要するに

・altタグは画像のリンクが切れていてもaltタグが補助機能として役にたちますよ
・Googleはロボットなので画像は読めないのでaltタグがないと何の画像か理解できないよ

と言う事です

長すぎるとスパム判定されるようなので、適切にaltタグを設置しましょう

写真素材を選ぶときに便利なサイト

写真素材を選ぶときに便利なサイト

無料で良質な写真素材があるサイト

いらすとや
ぱたくそ
O-DAN(オーダン)

無料の画像でも良質な写真が揃っていますね

ただ、人間は何気なくに無料の写真と有料の写真を見極めているので、しっかりとしたサイトを作りたいなら有料の画像を使うのもありだと思います

有料の写真素材サイト

shutterstock(月に12000円ほど)
freepik(月に1600円ほど)

かなり良質な写真がたくさん揃っています

shuttuerstockはかなり良質なので写真選びに逆に時間がかかってしまうので気を付けたほうが良いと思いますね

ベクター画像などこんな感じのキレイな画像が表示されますよ

ベクター画像

皆さんの役に経てば幸いです