Angoli arrotondati e immagini circolari per siti web

Gli angoli arrotondati possono integrare le foto nelle schede; i ritratti circolari danno uniformità alle pagine del team. La forma deve aiutare il contenuto: un cerchio che taglia un volto o un arrotondamento che nasconde un dettaglio importante non migliorano l’immagine.

Puoi modificare il file oppure lasciare che il browser arrotondi la visualizzazione. La scelta dipende da dove userai il risultato e dalla necessità di cambiare forma in seguito.

Usare CSS o modificare il file?

CSS è di solito più flessibile su un sito che controlli. Puoi usare lo stesso originale in vari layout, regolare gli angoli in tutto il sito e cambiare ritaglio senza esportare un nuovo file. Molti editor hanno già un’impostazione del raggio che applica questo stile.

Modifica il file quando il sito o l’app accetta un’immagine ma non offre controlli sugli angoli, oppure se inserisci l’immagine arrotondata in un altro progetto. Gli angoli trasparenti vengono salvati nel file e non dipendono dal CSS del sito.

Scegli forma e raggio adatti al contenuto

Parti dal ruolo dell’immagine. Un cerchio può andare bene per un piccolo ritratto incentrato sul viso. Paesaggi, screenshot e dettagli di prodotto richiedono in genere un rettangolo per conservare più informazioni.

Per le schede prova un raggio moderato, come 12 o 16 pixel CSS, e valutalo accanto a schede, pulsanti e altre immagini. Sono esempi di design, non requisiti. Riutilizzare pochi raggi facilita la coerenza più che scegliere un arrotondamento diverso per ogni foto.

Giudica alla dimensione reale di visualizzazione. Un raggio discreto in una fonte grande può quasi sparire in miniatura. Gli angoli salvati nel file scalano con tutta l’immagine. Un raggio CSS fisso, come 16 pixel, conserva quella misura CSS anche al variare della larghezza mostrata.

Prendi un’immagine di 800 × 400 con Pixilo al 25%. Il raggio salvato è 50 pixel. Visualizzandola a 400 × 200, il raggio visibile si dimezza a circa 25 pixel CSS. A 200 × 100 scende a circa 12,5. Scegli il valore guardando le dimensioni che vedranno i visitatori, non solo l’anteprima completa.

Tieni le informazioni importanti lontane dagli angoli. Controlla le persone ai bordi di una foto di gruppo e le etichette o i comandi di uno screenshot. Se un dettaglio scompare, riduci l’arrotondamento o cambia ritaglio anziché forzare la forma.

Arrotonda gli angoli con Pixilo

1. Prepara una copia di lavoro. Conserva l’originale a parte. Per una forma diversa usa prima lo strumento di ritaglio. Se le misure sono eccessive, ridimensiona la copia prima di arrotondare.
2. Scegli l’immagine. Apri Angoli arrotondati e scegli un JPG, PNG o WebP.
3. Regola Arrotondamento degli angoli. Parti da un valore basso e aumentalo osservando l’anteprima. Tutti gli angoli usano lo stesso raggio.
4. Scegli come riempire gli angoli rimossi. Mantieni Sfondo trasparente attivo per usare l’immagine su diversi colori di pagina. Disattivalo per scegliere un colore di sfondo.
5. Scarica e controlla. Seleziona Scarica PNG, apri il file e controlla i bordi sullo sfondo previsto.

Lo strumento mantiene larghezza e altezza in pixel. Rimuove o riempie gli angoli all’interno di quelle misure, ma non ridimensiona l’immagine né elimina lo sfondo dietro al soggetto.

Cosa significa la percentuale di arrotondamento?

Pixilo calcola il raggio come percentuale della metà del lato più corto. Allo 0% gli angoli restano retti; al 100% usa il massimo raggio circolare possibile. Nell’esempio 800 × 400, metà del lato corto è 200 pixel e il 25% equivale a 50.

Il cursore non equivale a una percentuale CSS. CSS ricava i raggi orizzontali dalla larghezza e quelli verticali dall’altezza. Su un’area non quadrata, border-radius: 50% crea un’ellisse. Il 100% di Pixilo produce una capsula su un rettangolo e un cerchio su un quadrato.

Crea un’immagine circolare con Pixilo

Parti da un quadrato. Un’immagine larga resta larga anche con l’arrotondamento massimo: scegli il ritaglio prima di applicare il cerchio.

1. Ritaglia in 1:1. Apri l’originale nello strumento di ritaglio e scegli un quadrato. Lascia spazio attorno alla testa o all’oggetto: il cerchio nasconderà gli angoli.
2. Scegli misure adatte. Una copia di 320 × 320 è un’opzione per un ritratto mostrato a 160 × 160 pixel CSS su uno schermo 2×. Usa lo strumento di ridimensionamento se necessario. Confronta i dettagli alla dimensione finale, senza ingrandire una piccola fonte solo per raggiungere quelle misure.
3. Arrotonda il quadrato. Seleziona la copia in Angoli arrotondati, imposta Arrotondamento degli angoli al 100% e mantieni Sfondo trasparente attivo.
4. Controlla il cerchio salvato. Scarica il PNG e verifica che testa, capelli e dettagli importanti siano ben contenuti nell’area visibile.

Il cerchio si trova in un PNG quadrato con angoli trasparenti. Le misure del file non cambiano: diventa circolare solo il contorno visibile. Una parete o stanza dietro la persona rimane dentro il cerchio.

Aggiungi angoli arrotondati con CSS

Se l’editor offre già il raggio degli angoli, provalo prima. Per una soluzione personalizzata il CSS deve agire sull’elemento immagine:

1. Aggiungi la classe. Se modifichi HTML, usa l’esempio sotto o aggiungi rounded-image all’attributo class dell’elemento <img> esistente. Nel campo delle classi CSS scrivi il nome senza punto iniziale e verifica se viene applicato all’immagine o a un elemento contenitore.
2. Aggiungi il CSS. Incolla l’esempio nel foglio di stile o nel campo CSS personalizzato. Mantieni il punto di .rounded-image, che seleziona gli elementi con quella classe. Il campo CSS normalmente richiede solo CSS, senza tag HTML <style>.
3. Verifica l’immagine pubblicata. Sostituisci percorso e dati se usi l’HTML sotto. Guarda l’anteprima e controlla che altri stili del tema o dell’editor non prevalgano.

L’esempio conserva le proporzioni e permette di ridurre l’immagine nel contenitore:

<img
  class="rounded-image"
  src="/images/finished-kitchen.webp"
  width="1200"
  height="800"
  alt="Cucina finita con mobili in rovere e piano di lavoro in pietra">

.rounded-image {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 16px;
}

Usa percorso, misure e testo alternativo della tua immagine. Larghezza e altezza HTML descrivono la fonte e aiutano a riservare spazio. CSS controlla dimensioni mostrate e angoli. Per il cerchio seguente ripeti i passaggi con la classe team-avatar e il relativo CSS.

Se l’editor applica la classe al contenitore, cambia il selettore .rounded-image in .rounded-image img. Per il cerchio usa .team-avatar img anziché .team-avatar. Le regole di misura e arrotondamento agiscono così sull’immagine interna.

Il valore 16px arrotonda tutti gli angoli. CSS può assegnare raggi diversi: border-radius: 16px 16px 0 0 arrotonda solo quelli superiori. L’ordine è alto a sinistra, alto a destra, basso a destra, basso a sinistra. Pixilo arrotonda attualmente tutti e quattro allo stesso modo. Consulta la documentazione MDN di border-radius per sintassi e percentuali.

CSS cambia l’aspetto sulla pagina, non il file scaricato. Aprire o salvare l’originale separatamente non conserva la forma CSS. Le parti nascoste restano nella fonte.

Crea un’immagine circolare con CSS

Un cerchio CSS richiede larghezza e altezza visualizzate uguali. La fonte può essere rettangolare: object-fit: cover riempie il quadrato senza deformare la persona e il raggio lo taglia in cerchio.

<img
  class="team-avatar"
  src="/images/team-portrait.webp"
  width="800"
  height="1200"
  alt="Maya, fisioterapista">

.team-avatar {
  display: block;
  width: 160px;
  height: 160px;
  object-fit: cover;
  object-position: 50% 40%;
  border-radius: 50%;
}

Qui la fonte misura 800 × 1200 pixel e viene mostrata in un quadrato di 160 × 160. Adatta i valori a immagine e layout. Se cambi la misura a un breakpoint mobile, mantieni larghezza e altezza uguali.

object-fit: cover mantiene le proporzioni e ritaglia ciò che non entra. object-position: 50% 40% centra orizzontalmente e, per questa fonte verticale, mostra una parte leggermente più alta rispetto al centro predefinito. Non aumenta né riduce lo zoom sul viso. Regola la posizione per ogni ritratto.

MDN approfondisce object-fit e object-position. Evita di forzare una foto rettangolare in un quadrato senza adattamento appropriato, perché può deformare il soggetto.

Esempio: ritratti del team coerenti

Uno studio ha quattro foto: due ritratti di testa e spalle, una foto più ampia nella sala trattamenti e un volto molto ravvicinato. La pagina del team le mostra in cerchi di 160 × 160. La stessa forma esterna è solo il primo passo.

1. Scegli un ritaglio di riferimento. Decidi con un ritratto quanto mostrare di testa e spalle. Lascia aria sopra i capelli e posiziona gli occhi ad altezze simili. Usalo come riferimento visivo, non come misura rigida per tutti.
2. Uniforma le dimensioni dei volti. Stringi il ritaglio della sala perché la persona non sembri molto più piccola. Se il ritratto stretto taglia già capelli o mento, usa un originale più ampio se disponibile. Un cerchio maggiore non recupera ciò che manca.
3. Scegli come applicare il cerchio. Con CSS prepara i ritagli, usa lo stesso riquadro di 160 × 160 e regola le posizioni. Per file circolari prepara copie quadrate uguali, ad esempio 320 × 320 se adatto, e applica a tutte il 100% di Pixilo.
4. Esamina l’insieme. Metti i ritratti accanto ai nomi alla dimensione reale. Nessun volto deve dominare solo per un ritaglio più stretto. Controlla poi il mobile, dove possono apparire uno sotto l’altro.

La coerenza dipende anche da inquadrature e dimensioni dei volti simili. Conserva il contesto utile ma scrivi nomi e ruoli nel testo della pagina, non dentro i ritratti.

Scegli sfondo e formato

Salva con trasparenza se l’immagine deve funzionare su colori diversi o in modalità scura. Un angolo bianco si fonde con una pagina bianca ma appare come una macchia quadrata su una scheda scura. Alcuni visualizzatori rappresentano le aree trasparenti con bianco o scacchiera. Prova un altro sfondo prima di concludere che ci siano pixel bianchi.

Con Sfondo trasparente disattivato, il colore scelto riempie angoli rimossi e aree già trasparenti. Non sostituisce uno sfondo opaco dentro la foto. Se hai riempito di bianco ma vuoi trasparenza, torna all’originale e salva nuovamente con l’opzione attiva.

PNG conserva la trasparenza senza nuova compressione con perdita, ma può aumentare il peso della foto. Per il sito confronta una copia WebP, che può mantenerla. La conversione Pixilo è con perdita: controlla bordi e dettagli. JPG non mantiene angoli trasparenti. La nostra guida agli sfondi trasparenti approfondisce i formati.

Con una forma CSS la foto non deve essere trasparente. Mantieni un JPG o WebP adatto e lascia al browser l’arrotondamento. CSS non comprime la fonte. Scegli misure per il layout e confronta peso e nitidezza del file distribuito.

Controlla il risultato nel layout reale

• Esamina il soggetto. Guarda volti, capelli, bordi dei prodotti e testo vicino al ritaglio. La forma deve conservare le informazioni utili.
• Controlla gli schermi piccoli. Per un cerchio CSS larghezza e altezza mostrate devono restare uguali. Valuta anche il raggio alla misura finale.
• Prova gli sfondi della pagina. Cerca angoli opachi indesiderati o aloni chiari su superfici chiare e scure.
• Controlla la versione finale. Il sito o l’app può ridimensionare, ritagliare o convertire il file. Verifica la copia salvata o pubblicata, anche dopo cambi di formato.
• Mantieni un testo alternativo utile. Descrivi il ruolo, non soltanto la forma. Il ritratto deve identificare la persona nel contesto; le immagini decorative richiedono normalmente testo alternativo vuoto. Consulta la nostra guida a testo alternativo e nomi dei file.

Domande frequenti

Perché l’immagine è diventata ovale o a capsula?

Controlla le proporzioni. Usa larghezza e altezza uguali in CSS oppure ritaglia un quadrato prima del 100% di Pixilo. Il confronto sopra mostra perché un rettangolo produce un contorno diverso.

Perché gli angoli sono ancora bianchi?

Prova prima un altro sfondo come descritto sopra. Se ci sono pixel bianchi, verifica la scelta di un colore pieno o una conversione in JPG. Il sito o l’app potrebbe aver sostituito la trasparenza con bianco. Salva una nuova copia trasparente dall’originale e controlla il formato dopo la pubblicazione.

Perché l’immagine ha angoli retti dentro una scheda arrotondata?

Arrotondare la scheda contenitore non ritaglia automaticamente l’immagine. Applica il raggio all’immagine oppure usa un contenitore arrotondato con overflow: hidden per ritagliare insieme il contenuto. Se include controlli interattivi, verifica che gli indicatori di focus da tastiera rimangano visibili.

Posso creare un cerchio senza tagliare nulla?

Un cerchio non può riempire tutto il rettangolo della foto senza perdere area o cambiare composizione. Per conservare tutto, inserisci la foto in un progetto quadrato più grande con spazio attorno e verifica il bordo circolare. Un rettangolo spesso funziona meglio per contenuti dettagliati.

Le immagini arrotondate si caricano più velocemente?

La sola forma non garantisce un download minore. Controlla misure e formati come indicato sopra e misura il file effettivamente distribuito dalla pagina.

Riassumi conChatGPT (si apre in una nuova scheda)Grok (si apre in una nuova scheda)Google (si apre in una nuova scheda)Perplexity (si apre in una nuova scheda)Claude (si apre in una nuova scheda)