Sintassi delle Immagini

Le immagini sono elementi visivi importanti nella documentazione. Markdown fornisce una sintassi concisa per inserire e gestire le immagini.

Sintassi Base delle Immagini

Immagini Inline

Usa il formato ![testo alternativo](URL immagine):

![Logo Markdown](https://www.markdownlang.com/markdown-logo.png)

Immagini con Titolo

Aggiungi un titolo opzionale:

![Logo Markdown](https://www.markdownlang.com/markdown-logo.png "Logo Ufficiale Markdown")

Quando passi il mouse sull'immagine, verrà visualizzato il testo del titolo.

Immagini in Stile Riferimento

Stile di Riferimento Base

![testo alternativo][riferimento-immagine]

[riferimento-immagine]: https://www.markdownlang.com/image.jpg "Titolo Opzionale"

Stile di Riferimento Abbreviato

Quando l'etichetta di riferimento è uguale al testo alternativo:

![Logo Markdown][]

[Logo Markdown]: https://www.markdownlang.com/markdown-logo.png

Tipi di Percorso Immagine

URL Assoluto

![Immagine Web](https://www.markdownlang.com/images/photo.jpg)

Percorso Relativo

![Immagine Locale](./images/photo.jpg)
![Immagine Directory Superiore](../images/photo.jpg)
![Immagine Stessa Directory](photo.jpg)

Percorso Relativo alla Radice

![Immagine Directory Radice](/images/photo.jpg)

Funzionalità Avanzate delle Immagini

Immagini con Link

Racchiudi un'immagine in un link:

[![Descrizione Immagine](image.jpg)](https://www.markdownlang.com)

Risultato Renderizzato: Cliccando sull'immagine si aprirà il link specificato.

Controllo delle Immagini con HTML

Specificare la Dimensione

<img src="image.jpg" alt="Descrizione" width="300" height="200">

Allineamento Immagine

<!-- Allineamento al centro -->
<div align="center">
  <img src="image.jpg" alt="Immagine Centrata" width="400">
</div>

<!-- Allineamento a destra -->
<div align="right">
  <img src="image.jpg" alt="Immagine a Destra" width="300">
</div>

Immagini Responsive

<img src="image.jpg" alt="Immagine Responsive" style="max-width: 100%; height: auto;">

Visualizzazione Combinata di Immagini

Visualizzazione Affiancata

<img src="img1.jpg" width="45%"> <img src="img2.jpg" width="45%">

Griglia di Immagini

<table>
  <tr>
    <td><img src="img1.jpg" width="200"></td>
    <td><img src="img2.jpg" width="200"></td>
  </tr>
  <tr>
    <td><img src="img3.jpg" width="200"></td>
    <td><img src="img4.jpg" width="200"></td>
  </tr>
</table>

Immagine e Testo Misti

<img src="avatar.jpg" align="left" width="100" style="margin-right: 10px;">

Questo è un paragrafo di testo con l'immagine flottante a sinistra. Il testo si disporrà attorno all'immagine, creando un layout misto. Questo può essere usato per profili personali o presentazioni di prodotti.

<div style="clear: both;"></div>

Best Practice per il Testo Alternativo

Testo Descrittivo

✅ Consigliato: Descrivi il contenuto dell'immagine
![Un utente che lavora al laptop in un workspace](workspace.jpg)

❌ Non consigliato: Testo senza significato
![Immagine](workspace.jpg)
![Clicca qui](workspace.jpg)

Immagini Funzionali

✅ Consigliato: Spiega la funzione dell'immagine
![Pulsante Cerca](search-icon.png)
![Link Repository GitHub](github-logo.png)

❌ Non consigliato: Ripetere il testo circostante
Clicca ![Clicca](search-icon.png) per cercare

Immagini Decorative

✅ Consigliato: Usa testo alternativo vuoto per immagini decorative
![](decorative-border.png)

❌ Non consigliato: Descrizione non necessaria
![Bordo decorativo](decorative-border.png)

Formati Immagine Comuni

Formati Adatti al Web

Formato	Utilizzo	Caratteristiche
JPEG	Foto, immagini complesse	File piccolo, compressione con perdita
PNG	Icone, sfondi trasparenti	Compressione senza perdita, supporta trasparenza
WebP	Immagini web moderne	Dimensioni minori, qualità migliore
SVG	Grafica vettoriale, icone	Scalabile, file piccolo
GIF	Animazioni semplici	Supporta animazione, colori limitati

Consigli sulla Scelta del Formato

✅ Uso consigliato:
![Foto](photo.jpg)           ← JPEG per le foto
![Icona](icon.png)           ← PNG per le icone
![Vettoriale](logo.svg)      ← SVG per la grafica vettoriale
![Animazione](animation.gif) ← GIF per animazioni semplici

❌ Non consigliato:
![Icona](icon.jpg)           ← JPEG non adatto per le icone
![Foto](photo.png)           ← I file PNG possono essere grandi

Suggerimenti per l'Ottimizzazione delle Immagini

Ottimizzazione della Dimensione del File

1. Scegli la risoluzione giusta

   <!-- Consigliato per la visualizzazione web -->
   <img src="image.jpg" width="800" alt="Descrizione">  ← Immagine 2x per schermi ad alta DPI

2. Usa la compressione appropriata

   <!-- Qualità JPEG: 70-80% consigliata -->
   ![Foto Ottimizzata](optimized-photo.jpg)

3. Lazy Loading

   <img src="image.jpg" alt="Descrizione" loading="lazy">

Uso di CDN e Hosting Immagini

<!-- Usa CDN per accelerazione -->
![Immagine CDN](https://cdn.example.com/images/photo.jpg)

<!-- Servizio di hosting immagini -->
![Immagine Hostata](https://img.example.com/upload/photo.jpg)

Errori Comuni e Soluzioni

1. Errore di Percorso

❌ Errore:
![Immagine](images/photo.jpg)    ← Il percorso non esiste

✅ Corretto:
![Immagine](./images/photo.jpg)  ← Controlla il percorso del file
![Immagine](/assets/photo.jpg)   ← Usa il percorso relativo corretto

2. Testo Alternativo Mancante

❌ Errore:
![](important-chart.jpg)     ← Immagine importante senza descrizione

✅ Corretto:
![Grafico confronto dati vendite 2023](important-chart.jpg)

3. Problema di Controllo Dimensione

❌ Problema: Immagine troppo grande
![Immagine Grande](huge-image.jpg)   ← Può rompere il layout

✅ Soluzione:
<img src="huge-image.jpg" alt="Immagine Grande" style="max-width: 100%;">

4. Problema con Link Immagine

❌ Errore:
[![Immagine](image.jpg)(https://www.markdownlang.com)  ← Errore di sintassi

✅ Corretto:
[![Immagine](image.jpg)](https://www.markdownlang.com)

Scenari Pratici

1. Documentazione Tecnica

## Passaggi di Installazione

1. Scarica l'installer

   ![Schermata Pagina Download](download-page.png)

2. Esegui l'installer

   ![Interfaccia Wizard Installer](installer-wizard.png)

3. Completa l'installazione

   ![Conferma Installazione Completata](installation-complete.png)

2. Presentazione Prodotto

## Caratteristiche del Prodotto

### Design UI Moderno

<div align="center">
  <img src="ui-screenshot.png" alt="Screenshot UI Prodotto" width="600">
  <p><em>Interfaccia utente pulita e intuitiva</em></p>
</div>

### Supporto Multi-piattaforma

<table>
  <tr>
    <td align="center">
      <img src="windows-logo.png" width="60"><br>
      <strong>Windows</strong>
    </td>
    <td align="center">
      <img src="mac-logo.png" width="60"><br>
      <strong>macOS</strong>
    </td>
    <td align="center">
      <img src="linux-logo.png" width="60"><br>
      <strong>Linux</strong>
    </td>
  </tr>
</table>

3. Profilo Personale

## Su di Me

<img src="avatar.jpg" align="right" width="150" style="margin-left: 20px; border-radius: 50%;">

Ciao! Sono uno sviluppatore full-stack specializzato in tecnologie web moderne. Ho oltre 5 anni di esperienza nello sviluppo e conosco vari linguaggi e framework.

### Stack di Competenze

![JavaScript](https://img.shields.io/badge/JavaScript-F7DF1E?logo=javascript&logoColor=black)
![React](https://img.shields.io/badge/React-61DAFB?logo=react&logoColor=black)
![Node.js](https://img.shields.io/badge/Node.js-339933?logo=node.js&logoColor=white)

<div style="clear: both;"></div>

4. Istruzioni Tutorial

## Configurazione Editor di Codice

Segui questi passaggi per configurare il tuo ambiente di sviluppo:

1. **Apri le Impostazioni**

   ![Voce Impostazioni VS Code](vscode-settings-1.png)

2. **Cerca le Voci di Configurazione**

   ![Cerca Configurazione](vscode-settings-2.png)

3. **Modifica il Valore di Configurazione**

   ![Modifica Configurazione](vscode-settings-3.png)

> 💡 **Suggerimento**: Riavvia l'editor dopo la configurazione per assicurarti che le impostazioni abbiano effetto.

Accessibilità

Scrivi Testi Alternativi Significativi

✅ Consigliato: Descrizione dettagliata
![Grafico a barre che mostra una crescita del 15% dei ricavi nel Q3 2023 con una freccia rossa verso l'alto](revenue-chart-q3.png)

❌ Non consigliato: Ripetizione semplice
![Grafico](revenue-chart-q3.png)

Usa Descrizioni Strutturate

![Foto di gruppo del team: Prima fila da sinistra Zhang San, Li Si, Wang Wu; seconda fila da sinistra Zhao Liu, Sun Qi, Zhou Ba](team-photo.jpg)

Output HTML

Le immagini Markdown vengono convertite in HTML:

![Testo Alternativo](image.jpg "Titolo Immagine")

Convertito in:

<img src="image.jpg" alt="Testo Alternativo" title="Titolo Immagine">

Immagini in stile riferimento:

![Testo Alternativo][ref]

[ref]: image.jpg "Titolo"

Convertito in:

<img src="image.jpg" alt="Testo Alternativo" title="Titolo">

Sintassi Correlata

• Sintassi Link - Creazione di collegamenti
• Sintassi HTML - Incorporamento HTML
• Blocchi di Codice Delimitati - Evidenziazione del codice

Pratica

Prova a creare quanto segue:

1. Una pagina di presentazione prodotto con più immagini
2. Un tutorial tecnico con screenshot passo-passo e spiegazioni
3. Una pagina di presentazione del team con avatar e informazioni dei membri
4. Un grafico comparativo che mostra l'andamento dei dati

Strumenti Consigliati

Strumenti di Modifica Immagini

• Strumenti Online: Canva, Figma, Photopea
• Software Desktop: GIMP, Paint.NET, Adobe Photoshop
• Strumenti Screenshot: Snipaste, Lightshot, strumenti screenshot integrati

Strumenti di Ottimizzazione Immagini

• Strumenti di Compressione: TinyPNG, ImageOptim, Squoosh
• Conversione Formati: CloudConvert, Online-Convert
• Elaborazione Batch: ImageMagick, XnConvert

Servizi di Hosting Immagini

• Servizi Gratuiti: GitHub, Gitee, sm.ms
• Servizi a Pagamento: Qiniu Cloud, Alibaba Cloud OSS, Tencent Cloud COS
• CDN: jsDelivr, Cloudflare, AWS CloudFront