img要素：src、alt、width、height
必要な属性をすべて指定して、画像を正しく埋め込みます。
「img要素：src、alt、width、height」はCoddyKit上の無料HTML Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはHTML Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 HTML Academyコースには全4レッスンが含まれています。
img要素
<img>要素を使用すると、ページに画像を埋め込めます。
<img src="photo.jpg" alt="A golden retriever playing fetch">
<!-- img is a void element — no closing tag needed -->
<!-- src: path to the image file -->
<!-- alt: text description for screen readers and broken images -->src属性
src属性で画像のソースを指定します。
<!-- Relative path -->
<img src="images/logo.png" alt="Company logo">
<!-- Root-relative path -->
<img src="/assets/banner.jpg" alt="Sale banner">
<!-- Absolute URL (external) -->
<img src="https://cdn.example.com/photo.jpg" alt="Mountain view">
<!-- Data URI (inline) -->
<img src="data:image/png;base64,iVBOR..." alt="Icon">alt属性
alt属性は、画像の代替テキストを指定します。
- 画像の読み込みに失敗したときに表示される
- スクリーンリーダーによって読み上げられる
- 検索エンジンによってインデックス登録される
- アクセシビリティ（WCAG）に必要
適切なaltテキストを書く
効果的なaltテキストの書き方：
<!-- Informative image: describe the content -->
<img src="chart.png" alt="Bar chart showing 30% revenue growth Q1-Q4 2024">
<!-- Decorative image: empty alt -->
<img src="divider.png" alt="">
<!-- Empty alt tells screen readers to skip this image -->
<!-- Functional image (button/link): describe the action -->
<a href="/">
<img src="logo.png" alt="Go to homepage">
</a>width属性とheight属性
画像には必ずwidth属性とheight属性を指定してください。
<img src="photo.jpg" alt="Landscape" width="800" height="600">
<!-- Values are in pixels (no units needed) -->
<!-- Why? The browser can reserve space before the image loads
This prevents layout shift (CLS) — a Core Web Vital metric -->アスペクト比とCSS
HTMLでwidthとheightを設定すると、CSSでアスペクト比を計算できるようになります。
<!-- HTML sets intrinsic dimensions -->
<img src="photo.jpg" alt="Photo" width="1600" height="900">
<!-- CSS can make it responsive while preserving ratio -->
<!--
img {
width: 100%;
height: auto; /* auto preserves the aspect ratio -->
}
-->Webで使われる画像形式
一般的な画像形式と使用する場面：
- JPEG/JPG — 写真や、多くの色を含む複雑な画像
- PNG — 透明度が必要な画像
- WebP — 最新の形式：JPEG/PNGより小さく、透明度に対応
- AVIF — 次世代形式：WebPよりさらに高い圧縮率
- SVG — アイコンやイラスト（ベクター形式で、無限に拡大可能）
- GIF — 単純なアニメーション（現在は主に動画に置き換えられている）
loading属性
loading属性を使用すると、画像を読み込むタイミングを制御できます。
<!-- Lazy load: only load when near viewport -->
<img src="photo.jpg" alt="" loading="lazy" width="800" height="600">
<!-- Eager load (default): load immediately -->
<img src="hero.jpg" alt="" loading="eager" width="1920" height="1080">
<!-- Always eager-load above-the-fold images -->
<!-- Lazy-load everything below the fold -->decoding属性
decoding属性を使用すると、画像のデコード方法を制御できます。
<img src="large.jpg" alt="" decoding="async" width="800" height="600">
<!-- async: decode in parallel with rendering (good for most images) -->
<!-- sync: decode before rendering (for critical above-fold images) -->
<!-- auto: browser decides (default) -->fetchpriority属性
fetchpriority属性を使用すると、画像の読み込み優先度をヒントとして指定できます。
<!-- Hero image: fetch with high priority -->
<img src="hero.jpg" alt="Hero" fetchpriority="high" width="1920" height="600">
<!-- Below-fold images: low priority -->
<img src="gallery-item.jpg" alt="" fetchpriority="low"
loading="lazy" width="400" height="300">imgの完全な例
アクセシビリティに完全に対応し、パフォーマンスも最適化された画像：
<img
src="/images/team-photo.jpg"
alt="The Coddy team gathered at a conference table in 2024"
width="1200"
height="800"
loading="lazy"
decoding="async"
>確認問題
img要素にwidth属性とheight属性を必ず含めるべき理由は何ですか。
まとめ：img要素
画像埋め込みの要点：
src— 画像URL（相対URLまたは絶対URL）alt— 必須の説明。装飾用画像の場合は空にするwidthとheight— レイアウトシフトを防ぐため、必ず設定する- ファーストビューより下の画像には
loading="lazy"を使用する - 適切な形式を選ぶ：写真にはWebP/AVIF、アイコンにはSVG
よくある質問
「img要素：src、alt、width、height」レッスンは無料ですか？
はい。「img要素：src、alt、width、height」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、HTML Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 HTML Academyコースには全4レッスンが含まれています。
「img要素：src、alt、width、height」で何を学びますか？
必要な属性をすべて指定して、画像を正しく埋め込みます。 ブラウザで直接実行するハンズオンコードでHTML Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
HTML Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのHTML Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「img要素：src、alt、width、height」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このHTML Academyレッスンでコードを書いて実行できますか？
はい。すべてのHTML Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- img要素：src、alt、width、height
- srcsetとsizesによるレスポンシブ画像
- アートディレクションのためのpicture要素
- figureとfigcaption