L’elemento img: src, alt, width e height
Incorporare correttamente le immagini con tutti gli attributi richiesti
L’elemento img: src, alt, width e height è una lezione HTML Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento HTML Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso HTML Academy include 4 lezioni in totale.
L'elemento img
L'elemento <img> incorpora un'immagine nella pagina:
<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 -->L'attributo src
L'attributo src specifica la sorgente dell'immagine:
<!-- 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">L'attributo alt
L'attributo alt fornisce un testo alternativo per le immagini:
- Viene visualizzato quando l'immagine non riesce a caricarsi
- Viene letto ad alta voce dagli screen reader
- Viene indicizzato dai motori di ricerca
- È necessario per l'accessibilità (WCAG)
Scrivere un buon testo alt
Come scrivere un testo alt efficace:
<!-- 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>Attributi width e height
Specifichi sempre width e height per le immagini:
<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 -->Proporzioni e CSS
Impostare width e height in HTML permette a CSS di calcolare le proporzioni:
<!-- 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 -->
}
-->Formati delle immagini sul web
Formati comuni delle immagini e relativo utilizzo:
- JPEG/JPG — fotografie e immagini complesse con molti colori
- PNG — immagini che richiedono la trasparenza
- WebP — formato moderno: più piccolo di JPEG/PNG e con supporto alla trasparenza
- AVIF — formato di nuova generazione: compressione ancora migliore di WebP
- SVG — icone e illustrazioni, vettoriali e scalabili all'infinito
- GIF — animazioni semplici, oggi in gran parte sostituite dai video
Attributo loading
Controlli il momento in cui vengono caricate le immagini con l'attributo 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 -->Attributo decoding
L'attributo decoding controlla il comportamento della decodifica delle immagini:
<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) -->Attributo fetchpriority
L'attributo fetchpriority fornisce un'indicazione sulla priorità di caricamento dell'immagine:
<!-- 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">Esempio completo di img
Un'immagine completamente accessibile e ottimizzata per le prestazioni:
<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"
>Verifica rapida
Perché è necessario includere sempre gli attributi width e height negli elementi img?
Riepilogo: elemento img
Elementi essenziali per incorporare immagini:
src— URL dell'immagine, relativo o assolutoalt— descrizione obbligatoria; vuota per le immagini decorativewidtheheight— impostarli sempre per evitare spostamenti del layoutloading="lazy"per le immagini sotto la piega- Scelga il formato appropriato: WebP/AVIF per le fotografie, SVG per le icone
Domande Frequenti
La lezione «L’elemento img: src, alt, width e height» è gratuita?
Sì — il testo completo di «L’elemento img: src, alt, width e height» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso HTML Academy, passa a CoddyKit PRO. Il corso HTML Academy include 4 lezioni in totale.
Cosa imparerò in «L’elemento img: src, alt, width e height»?
Incorporare correttamente le immagini con tutti gli attributi richiesti Eserciti HTML Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.
Ho bisogno di esperienza per iniziare HTML Academy?
Non è richiesta alcuna esperienza precedente. HTML Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.
Quanto tempo richiede la lezione «L’elemento img: src, alt, width e height»?
La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.
Posso scrivere ed eseguire codice in questa lezione HTML Academy?
Sì. Ogni lezione HTML Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.
Tutte le lezioni di questo corso
- L’elemento img: src, alt, width e height
- Immagini responsive con srcset e sizes
- L’elemento picture per l’art direction
- figure e figcaption