img要素の概要
| 画像HTML | ||
| <img> | ||
| 目的 | 画像を表示 | |
| 関連 | <picture> <source> | |
 | ||
<img src="pic01.png" /> //src属性によって画像のURLを指定 | ||
属性
- alt
画像が表示できないときに代替として表示されるテキスト
<img src="pic01none.png" alt="画像がなければこのテキストを表示する" />
- decording
画像の読み込みタイミングを指定できる。同期デコードに sync 非同期デコードに async を指定する。デフォルト値はautoであり、自動的に指定されます。特にwordpressでlazyプラグインを使っている場合は指定する必要はないでしょう。chrome系に限りますがloading=”lazy”属性も同等の効果を得られる。テキストの読み込みを優先したい場合などはasyncを指定するとよいことになります。いずれにしても、実装するのであればPageSpeed Insightsなどで実際のスコアを確認しながら調整すると良いでしょう。
<img src="pic01.png" decording="async" />
- sizes
<picture> にて解説
- src
画像のURLを指定する
- srcset
<picture>にて解説
- width,height
画像の幅、高さを指定する。下のサンプルでは、元は横に長い画像であったが、縦に長くpxを指定した。
<img style="width: 100px; height: 150px;" src="pic01.png" />
- その他
crossorigin , ismap , referrerpolicy の属性があるが、通常は使用しない。
CSSデザイン
文字や画像に影をつける
文字や画像に影をつける コピペで使えるHTML+CSS
影を描くCSSプロパティにはテキスト向けのtext-shadowと要素全体に対して適用されるbox-shadowがあります。このページでは２つが、どう違うのかを比較しやすい具体例を出しながら適用方法について解説します。
programming-cafe.com