Componenti — Immagini Responsive

Linee Guida Immagini

Come funziona il motore responsive delle immagini

Il sistema gestisce autonomamente la generazione dei thumbnails partendo da un unico file sorgente ad alta risoluzione condiviso per proporzione. Per attivare il ritaglio corretto e ottimizzare le performance, si utilizzano due attributi:

  • tcl-size / tcl_size: Definisce il preset geometrico da applicare (es. card, hor-col4-full). uso: tcl-size="preset"
  • tcl-fold / tcl_fold: Controlla il caricamento prioritario per le immagini visibili, anche in minima perte, subito all'apertura della pagina (Above the Fold):
    • both: L'immagine è "Above the Fold" sia su Mobile che su Desktop. Forza l'attributo loading="eager" e imposta la fetchpriority="high" su tutti i dispositivi. uso: tcl-fold="both"
    • desk: L'immagine è in primo piano solo su Desktop (mentre su cellulare slitta in basso). Imposta loading="eager" ma mantiene una priorità standard per non penalizzare la banda mobile. uso: tcl-fold="desk"

Formati Card e Anteprime

Card Generica (Preset: card — File: 750x500 (3:2) — Render Visivo: Altezza bloccata a 250px centrata via CSS)
Esempio card generica
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="card" />
Card News (Preset: card-news — File: 750x500 (3:2) — Render Visivo: Proporzionale 3:2 fluido senza blocchi CSS)
Esempio card news
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="card-news" />
Card Low (Preset: card-low — File: 750x500 (3:2) — Render Visivo: Altezza bloccata a 200px dall'alto via CSS)
Esempio card low
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="card-low" />
Card Feature (Preset: card-feat — File: 750x500 (3:2) — Render Visivo: Altezza bloccata a 250px centrata via CSS)
Esempio card feature
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="card-feat" />
Card Verticale (Preset: card-vert — Render: 600x1000 — Sorgente: Verticale 2:3)
Esempio card verticale
<img src="/media/uploads/esempi/sorgente-verticale.jpg" alt="..." tcl-size="card-vert" />
Voice Card (Preset: card-voice — Render: 400x400 — Sorgente: Quadrato 1:1)
Esempio voice card
<img src="/media/uploads/esempi/sorgente-quadrato.jpg" alt="..." tcl-size="card-voice" />

Formati Quadrati (Tutti dallo stesso sorgente 1:1)

Square Piccolo (Preset: square-s — Render: 400x400)
Esempio square s
<img src="/media/uploads/esempi/sorgente-quadrato.jpg" alt="..." tcl-size="square-s" />
Square Medio (Preset: square-m — Render: 1000x1000)
Esempio square m
<img src="/media/uploads/esempi/sorgente-quadrato.jpg" alt="..." tcl-size="square-m" />
Square Grande (Preset: square-b — Render: 1000x1000)
Esempio square b
<img src="/media/uploads/esempi/sorgente-quadrato.jpg" alt="..." tcl-size="square-b" />

Formati su Griglia Bootstrap (Larghezza max 1340px)

Col-12 Full (Preset: hor-col12-full — Render: 1340x893 — Sorgente: 3:2)
Esempio col12 full
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="hor-col12-full" />
Col-12 Mid (Preset: hor-col12-mid — Render: 1340x446 — Sorgente: Stretto 5:2)
Esempio col12 mid
<img src="/media/uploads/esempi/sorgente-orizzontale-stretta.jpg" alt="..." tcl-size="hor-col12-mid" />
Col-6 Full (Preset: hor-col6-full — Render: 750x500 (3:2) — Layout fluido su griglia)
Esempio col6 full
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="hor-col6-full" />
Col-6 Mid (Preset: hor-col6-mid — Render: 750x250 — Sorgente: Stretto 5:2)
Esempio col6 mid
<img src="/media/uploads/esempi/sorgente-orizzontale-stretta.jpg" alt="..." tcl-size="hor-col6-mid" />
Col-4 Full (Preset: hor-col4-full — Render: 750x500 — Sorgente: 3:2)
Esempio col4 full
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="hor-col4-full" />
Col-4 Mid (Preset: hor-col4-mid — Render: 750x250 — Sorgente: Stretto 5:2)
Esempio col4 mid
<img src="/media/uploads/esempi/sorgente-orizzontale-stretta.jpg" alt="..." tcl-size="hor-col4-mid" />
Col-3 Full (Preset: hor-col3-full — Render: 750x500 — Sorgente: 3:2)
Esempio col3 full
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="hor-col3-full" />
Col-3 Mid (Preset: hor-col3-mid — Render: 750x250 — Sorgente: Stretto 5:2)
Esempio col3 mid
<img src="/media/uploads/esempi/sorgente-orizzontale-stretta.jpg" alt="..." tcl-size="hor-col3-mid" />

Formati Storici e Varianti Grandi

Hor Full (Preset: hor-full — Render: 1000x666 — Sorgente: 3:2)
Esempio hor full
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="hor-full" />
Hor Half (Preset: hor-half — Render: 1000x333 — Sorgente: Stretto 5:2)
Esempio hor half
<img src="/media/uploads/esempi/sorgente-orizzontale-stretta.jpg" alt="..." tcl-size="hor-half" />
Hor Mid Full (Preset: hor-mid-full — Render: 750x500 — Sorgente: 3:2)
Esempio hor mid full
<img src="/media/uploads/esempi/sorgente-orizzontale-3-2.jpg" alt="..." tcl-size="hor-mid-full" />
Hor Mid Half (Preset: hor-mid-half — Render: 750x250 — Sorgente: Stretto 5:2)
Esempio hor mid half
<img src="/media/uploads/esempi/sorgente-orizzontale-stretta.jpg" alt="..." tcl-size="hor-mid-half" />
Verticale Grande (Preset: ver-full — Render: 1000x1500 — Sorgente: Verticale 2:3)
Esempio ver full
<img src="/media/uploads/esempi/sorgente-verticale.jpg" alt="..." tcl-size="ver-full" />
Verticale Stretto (Preset: ver-half — Render: 800x2400 — Sorgente: Verticale Stretta 1:3)
Esempio ver half
<img src="/media/uploads/esempi/sorgente-verticale-stretta.jpg" alt="..." tcl-size="ver-half" />

Restiamo in contatto

Ricevi gratuitamente aggiornamenti su formazione, risorse didattiche e idee per le tue lezioni!

Iscriviti alla Newsletter

Incontra il team di supporto o richiedi una consulenza personalizzata con un nostro esperto.

Richiedi supporto
g Back to top