{"id":123652,"date":"2025-03-03T08:20:27","date_gmt":"2025-03-03T06:20:27","guid":{"rendered":"https:\/\/elementor.com\/blog\/come-ridimensionare-unimmagine-in-css-html\/"},"modified":"2025-12-17T17:02:50","modified_gmt":"2025-12-17T15:02:50","slug":"come-ridimensionare-unimmagine-in-css-html","status":"publish","type":"post","link":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/","title":{"rendered":"Come Ridimensionare Un&#8217;Immagine In CSS &amp; HTML"},"content":{"rendered":"\t\t<div data-elementor-type=\"wp-post\" data-elementor-id=\"123652\" class=\"elementor elementor-123652 elementor-1351\" data-elementor-post-type=\"post\">\n\t\t\t\t<div class=\"elementor-element elementor-element-0db367b e-flex e-con-boxed e-con e-parent\" data-id=\"0db367b\" data-element_type=\"container\">\n\t\t\t\t\t<div class=\"e-con-inner\">\n\t\t\t\t<div class=\"elementor-element elementor-element-8b7c1d8 elementor-widget elementor-widget-text-editor\" data-id=\"8b7c1d8\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">\u00c8 qui che entra in gioco il ridimensionamento delle immagini con CSS. Con il <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/what-is-css\/\"   title=\"What Is CSS? How to Use it in Web Design (2025)\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20358\">CSS<\/a> (Cascading Style Sheets), hai strumenti potenti per controllare come le immagini appaiono sul tuo sito web, assicurandoti che si vedano al meglio senza compromettere i tempi di caricamento della pagina.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Questa guida ti dar\u00e0 tutto ci\u00f2 di cui hai bisogno per padroneggiare il ridimensionamento delle immagini in CSS come un pro. Che tu stia costruendo un blog personale, un elegante negozio online o un&#8217;applicazione web complessa, imparerai come far brillare le tue immagini. <\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Capire i Fondamenti del Ridimensionamento delle Immagini <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Dimensioni e Risoluzione delle Immagini<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Prima di esplorare le tecniche CSS, iniziamo capendo i concetti fondamentali di dimensioni e risoluzione delle immagini.<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pixel:<\/b><span style=\"font-weight: 400;\"> Le immagini sul web sono composte da piccoli quadrati chiamati pixel. Ogni pixel contiene informazioni sul colore. Pi\u00f9 pixel ha un&#8217;immagine, pi\u00f9 alta \u00e8 la sua risoluzione e pi\u00f9 dettagli pu\u00f2 mostrare.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Dimensioni dell&#8217;Immagine:<\/b><span style=\"font-weight: 400;\"> Le dimensioni dell&#8217;immagine sono espresse in larghezza e altezza, misurate in pixel (es. 1200px x 800px). Queste dimensioni determinano lo spazio fisico che un&#8217;immagine occupa su una pagina web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Proporzioni:<\/b><span style=\"font-weight: 400;\"> Il rapporto d&#8217;aspetto \u00e8 la relazione proporzionale tra larghezza e altezza di un&#8217;immagine (es. 16:9, 4:3). Mantenere il rapporto d&#8217;aspetto \u00e8 fondamentale quando si ridimensionano le immagini per evitare distorsioni.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Formati di File Immagine<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il web supporta vari formati di file immagine, ognuno con i suoi punti di forza e casi d&#8217;uso ideali. Diamo un&#8217;occhiata veloce ai pi\u00f9 comuni che incontrerai:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>JPEG (JPG):<\/b><span style=\"font-weight: 400;\"> Questo formato \u00e8 il migliore per fotografie e immagini con colori e sfumature complesse. Supporta una compressione regolabile per bilanciare qualit\u00e0 e dimensione del file.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>PNG: <\/b><span style=\"font-weight: 400;\">\u00e8 ideale per loghi, grafiche e immagini che richiedono trasparenza. Supporta la compressione senza perdita (nessuna perdita di qualit\u00e0).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>GIF:<\/b><span style=\"font-weight: 400;\"> Usato principalmente per animazioni semplici e grafiche. Palette di colori limitata.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>SVG: <\/b><span style=\"font-weight: 400;\">\u00e8 un formato vettoriale perfetto per loghi, icone e illustrazioni. \u00c8 scalabile all&#8217;infinito senza perdita di qualit\u00e0.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">Capire questi formati di file \u00e8 importante perch\u00e9 scegliere quello giusto pu\u00f2 influenzare significativamente le dimensioni delle tue immagini web e i loro tempi di caricamento. E ricorda, GenericProductName supporta senza problemi tutti questi tipi di file, permettendoti di usare l&#8217;immagine perfetta per ogni situazione sul tuo sito web.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Impatto sulle Prestazioni Web<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Perch\u00e9 tutto questo parlare di pixel, formati di immagine e ridimensionamento \u00e8 importante? Si riduce alle prestazioni web. Le immagini grandi e non ottimizzate sono uno dei principali colpevoli dei siti web lenti. Here&#8217;s why:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Consumo di Banda:<\/b><span style=\"font-weight: 400;\"> I file immagine grandi richiedono pi\u00f9 dati da trasferire dal server al browser del visitatore, consumando preziosa larghezza di banda.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Tempi di Caricamento Aumentati:<\/b><span style=\"font-weight: 400;\"> Il browser ha bisogno di tempo per scaricare ed elaborare file immagine grandi, ritardando la visualizzazione dell&#8217;intera pagina e portando a un&#8217;esperienza utente frustrante.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Impatto Negativo sulla SEO:<\/b><span style=\"font-weight: 400;\"> I motori di ricerca come Google considerano la velocit\u00e0 del sito un fattore di ranking. I siti web lenti potrebbero essere penalizzati nei risultati di ricerca.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Scarsa Esperienza Utente (UX):<\/b><span style=\"font-weight: 400;\"> Immagini non ottimizzate, soprattutto su dispositivi mobili con connessioni pi\u00f9 lente, possono rovinare l&#8217;esperienza utente e far s\u00ec che i visitatori abbandonino il tuo sito web prima che si carichi completamente.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Ecco perch\u00e9 il ridimensionamento delle immagini, insieme ad altre tecniche di ottimizzazione, \u00e8 una pietra angolare nella costruzione di siti web veloci e coinvolgenti, specialmente se pianifichi di offrire un&#8217;esperienza visivamente ricca!<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Tecniche CSS per Ridimensionare le Immagini<\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Propriet\u00e0 width e height<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Il modo pi\u00f9 fondamentale per ridimensionare le immagini in CSS \u00e8 usando le propriet\u00e0 <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\"> . Puoi controllare direttamente la dimensione visualizzata di un&#8217;immagine impostando queste propriet\u00e0 con vari valori:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pixel (px):<\/b><span style=\"font-weight: 400;\"> Questo offre il controllo pi\u00f9 preciso sulle dimensioni dell&#8217;immagine (ad esempio, larghezza: 300px; altezza: 200px).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Percentuali (%):<\/b><span style=\"font-weight: 400;\"> Questo rende le immagini <a class=\"wpil_keyword_link\" href=\"https:\/\/elementor.com\/blog\/responsive-website\/\"   title=\"How To Create A Responsive Website: Step-By-Step 2025 Guide\" data-wpil-keyword-link=\"linked\"  data-wpil-monitor-id=\"20360\">responsive<\/a> permettendo loro di ridimensionarsi in relazione al loro contenitore padre (ad esempio, larghezza: 50%; altezza: auto, per far occupare all&#8217;immagine met\u00e0 della larghezza del suo contenitore).<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Codice di esempio<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fabab8f elementor-widget elementor-widget-code-highlight\" data-id=\"fabab8f\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 400px; height: 300px;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-23408f6 elementor-widget elementor-widget-text-editor\" data-id=\"23408f6\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Nota Importante:<\/b><span style=\"font-weight: 400;\"> Considera sempre il design responsive quando usi <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">. Con Elementor, hai controlli visivi intuitivi per regolare le dimensioni delle immagini su diversi schermi, assicurandoti che le tue immagini appaiano perfette su qualsiasi dispositivo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propriet\u00e0 max-width e max-height<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mentre <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\"> impostano dimensioni esplicite, le propriet\u00e0 <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">max-height<\/span><span style=\"font-weight: 400;\"> sono incredibilmente utili per impostare limiti di dimensione mantenendo la responsivit\u00e0.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ecco come funzionano:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>max-width:<\/b><span style=\"font-weight: 400;\"> Impedisce a un&#8217;immagine di superare una larghezza specificata, permettendole di ridursi se necessario (ad esempio, <\/span><span style=\"font-weight: 400;\">max-width: 100%;<\/span><span style=\"font-weight: 400;\"> assicura che l&#8217;immagine non occupi mai pi\u00f9 del 100% della larghezza del suo contenitore).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>max-height:<\/b><span style=\"font-weight: 400;\"> Funziona in modo simile, ponendo un limite all&#8217;altezza di un&#8217;immagine (ad esempio, <\/span><span style=\"font-weight: 400;\">max-height: 400px;<\/span><span style=\"font-weight: 400;\"> impedirebbe all&#8217;immagine di crescere oltre i 400 pixel in altezza).<\/span><\/li>\n<\/ul>\n<p><b>Perch\u00e9 usarle?<\/b><span style=\"font-weight: 400;\"> Sono uno strumento chiave per impedire alle immagini di uscire dai loro contenitori e disturbare il tuo layout, specialmente nei design responsive.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Codice di esempio<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-13b72f0 elementor-widget elementor-widget-code-highlight\" data-id=\"13b72f0\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"max-width: 100%; height: auto;\"> \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd04060 elementor-widget elementor-widget-text-editor\" data-id=\"dd04060\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Consiglio da Pro:<\/b><span style=\"font-weight: 400;\"> Spesso, impostare <\/span><span style=\"font-weight: 400;\">max-width: 100%;<\/span><span style=\"font-weight: 400;\"> con <\/span><span style=\"font-weight: 400;\">height: auto;<\/span><span style=\"font-weight: 400;\"> \u00e8 la tua scelta migliore per il ridimensionamento responsive delle immagini, ma esploreremo le ragioni nel prossimo sottotitolo!<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Preservare le Proporzioni con &#8216;auto&#8217;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Ricordi quelle proporzioni di cui abbiamo parlato prima? Mantenerle durante il ridimensionamento \u00e8 cruciale per evitare che le tue immagini appaiano schiacciate, stirate o distorte. Ecco dove il valore <\/span><span style=\"font-weight: 400;\">auto<\/span><span style=\"font-weight: 400;\"> viene in soccorso:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Impostare Una Dimensione, l&#8217;Altra &#8216;auto&#8217;:<\/b><span style=\"font-weight: 400;\"> Quando imposti <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\"> o <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\"> a un valore specifico (pixel o percentuale) e l&#8217;altra dimensione su <\/span><span style=\"font-weight: 400;\">auto<\/span><span style=\"font-weight: 400;\">, il browser calcola automaticamente la dimensione mancante per preservare le proporzioni.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Perch\u00e9 Questo \u00e8 Importante<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Integrit\u00e0 Visiva:<\/b><span style=\"font-weight: 400;\"> Assicura che le tue immagini appaiano al meglio e come previsto.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Armonia del Layout:<\/b><span style=\"font-weight: 400;\"> Impedisce alle immagini di disturbare il design del tuo sito web.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Professionalit\u00e0:<\/b><span style=\"font-weight: 400;\"> Immagini distorte possono dare un&#8217;impressione poco professionale.<\/span><\/li>\n<\/ol>\n<h4><span style=\"font-weight: 400;\">Codice di esempio<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c9a0b08 elementor-widget elementor-widget-code-highlight\" data-id=\"c9a0b08\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\" style=\"width: 100%; height: auto;\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-1e1ee92 elementor-widget elementor-widget-text-editor\" data-id=\"1e1ee92\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Consiglio Elementor:<\/b><span style=\"font-weight: 400;\"> L&#8217;editor visuale di Elementor rende incredibilmente facile ridimensionare le immagini mantenendo automaticamente le proporzioni, dandoti un perfetto equilibrio tra controllo e comodit\u00e0.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Immagini di Sfondo e background-size<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Invece di usare il tag <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> il CSS ti permette di impostare le immagini come sfondi di vari elementi. Questo sblocca possibilit\u00e0 creative di design e potenti tecniche di ridimensionamento usando la propriet\u00e0 <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ecco i valori chiave per <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si scala per adattarsi interamente al contenitore mantenendo le sue proporzioni. Alcune aree dello sfondo potrebbero rimanere vuote se le proporzioni dell&#8217;immagine non corrispondono a quelle del contenitore.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si scala per coprire completamente il contenitore mantenendo le sue proporzioni. Questo potrebbe risultare in parti dell&#8217;immagine tagliate se le proporzioni non si allineano.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>100% 100%:<\/b><span style=\"font-weight: 400;\"> Forza l&#8217;immagine a stirarsi per riempire l&#8217;intera larghezza e altezza del contenitore, potenzialmente distorcendo le proporzioni.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Valori Personalizzati:<\/b><span style=\"font-weight: 400;\"> Puoi anche impostare valori specifici in pixel o percentuali per <\/span><span style=\"font-weight: 400;\">background size (ad esempio, background-size: 500px 300px)<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Codice di esempio<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-90bf6ea elementor-widget elementor-widget-code-highlight\" data-id=\"90bf6ea\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\n.my-element {\r\n  background-image: url(\"my-image.jpg\");\r\n  background-size: cover; \r\n} \r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-a9b8899 elementor-widget elementor-widget-text-editor\" data-id=\"a9b8899\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Casi d&#8217;Uso<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sezioni Hero:<\/b><span style=\"font-weight: 400;\"> Crea aree hero visivamente d&#8217;impatto con grandi immagini di sfondo.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Sovrapposizioni di Testo:<\/b><span style=\"font-weight: 400;\"> Combina immagini di sfondo con testo per effetti coinvolgenti.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pattern:<\/b><span style=\"font-weight: 400;\"> Usa immagini piccole e ripetitive per creare pattern di sfondo interessanti.<\/span><\/li>\n<\/ol>\n<h3><span style=\"font-weight: 400;\">Propriet\u00e0 object-fit<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  propriet\u00e0 offre un controllo preciso su come un&#8217;immagine (o video) si adatta al suo contenitore. Pensala come la controparte CSS dei concetti di  <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">cover<\/span><span style=\"font-weight: 400;\"> che abbiamo esplorato con <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> ma con ancora pi\u00f9 opzioni:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>riempi:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si estende (potenzialmente distorcendosi) per riempire l&#8217;intero contenitore.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>contain:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si ridimensiona per adattarsi completamente al contenitore, mantenendo il suo rapporto d&#8217;aspetto (simile a <\/span><span style=\"font-weight: 400;\">background-size: contain<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>cover:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine si ridimensiona per coprire l&#8217;intero contenitore mantenendo il rapporto d&#8217;aspetto, potenzialmente ritagliando parti dell&#8217;immagine (simile a <\/span><span style=\"font-weight: 400;\">background-size: cover<\/span><span style=\"font-weight: 400;\">).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>none:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine viene visualizzata nella sua dimensione originale, senza ridimensionamento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale-down:<\/b><span style=\"font-weight: 400;\"> L&#8217;immagine sceglie tra <\/span><span style=\"font-weight: 400;\">contain<\/span><span style=\"font-weight: 400;\"> e <\/span><span style=\"font-weight: 400;\">none<\/span><span style=\"font-weight: 400;\"> in base a se la dimensione dell&#8217;immagine \u00e8 pi\u00f9 piccola o pi\u00f9 grande del contenitore.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Codice di esempio<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-8f13963 elementor-widget elementor-widget-code-highlight\" data-id=\"8f13963\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc3e025 elementor-widget elementor-widget-text-editor\" data-id=\"fc3e025\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Confronti visivi:<\/b><span style=\"font-weight: 400;\"> \u00c8 spesso meglio vedere i diversi <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\">  valori in azione per comprendere appieno le loro differenze. Considera di includere un set di esempi di immagini che dimostrano ciascun valore in questa sezione dell&#8217;articolo.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Quando usare object-fit<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Immagini dei prodotti:<\/b><span style=\"font-weight: 400;\"> Assicurati che le foto dei prodotti siano visualizzate in modo coerente all&#8217;interno di contenitori di dimensioni fisse.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Miniature:<\/b><span style=\"font-weight: 400;\"> Crea gallerie di miniature uniformi dove i rapporti d&#8217;aspetto possono variare.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Contenuti caricati dagli utenti<\/b><span style=\"font-weight: 400;\"> Controlla come vengono visualizzate le dimensioni delle immagini potenzialmente imprevedibili.<\/span><\/li>\n<\/ol>\n<h2><span style=\"font-weight: 400;\">Ridimensionamento delle immagini responsive <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Media Queries<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le media query sono la pietra angolare del design web responsive. Ti permettono di applicare diversi stili CSS in base a condizioni specifiche, come la dimensione dello schermo o l&#8217;orientamento del dispositivo del browser del visitatore.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintassi base delle media query<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-dd8e6a6 elementor-widget elementor-widget-code-highlight\" data-id=\"dd8e6a6\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\n\n@media (min-width: 768px) {\n\n\u00a0\u00a0\/* CSS styles for screens 768px or wider *\/\n\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c89ad42 elementor-widget elementor-widget-text-editor\" data-id=\"c89ad42\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Breakpoints:<\/b><span style=\"font-weight: 400;\"> I <\/span><span style=\"font-weight: 400;\">min-width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">max-width<\/span><span style=\"font-weight: 400;\">, ecc., all&#8217;interno delle media query, definiscono i breakpoints dove il tuo design cambia. I breakpoints comuni mirano a tablet, telefoni cellulari e desktop pi\u00f9 grandi.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Media Queries per le immagini<\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Puoi usare le media query per ridimensionare le immagini in modo diverso a seconda delle dimensioni dello schermo:<\/span><\/p>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c475496 elementor-widget elementor-widget-code-highlight\" data-id=\"c475496\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  width: 100%;  \r\n  height: 300px; \r\n  object-fit: cover; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-560d7f7 elementor-widget elementor-widget-text-editor\" data-id=\"560d7f7\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Spiegazione:<\/b><span style=\"font-weight: 400;\"> In questo esempio, le immagini occuperanno l&#8217;intera larghezza del contenitore sugli schermi pi\u00f9 piccoli e poi si ridurranno al 50% della larghezza del contenitore sugli schermi pi\u00f9 larghi di 768px.<\/span><\/p>\n<p><b>Suggerimento importante:<\/b><span style=\"font-weight: 400;\">  Pensa sempre prima al mobile! Inizia progettando per gli schermi pi\u00f9 piccoli, e poi usa le media query per migliorare progressivamente il layout per display pi\u00f9 grandi.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Tecniche di ridimensionamento fluido<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Anche se le media query ti danno molto controllo, a volte vuoi che le immagini si ridimensionino in modo fluido e proporzionale su tutte le dimensioni dello schermo, non solo a specifici breakpoints. Ecco un paio di modi per ottenere questo:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Max-width: 100% e Height: auto (rivisitato):<\/b><span style=\"font-weight: 400;\">  Se ricordi, abbiamo introdotto questa tecnica in precedenza. Il suo vero potere risiede nella sua reattivit\u00e0 automatica \u2013 le immagini non supereranno mai la larghezza del loro contenitore, e la loro altezza si adatter\u00e0 proporzionalmente.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Combinare percentuali con media query:<\/b><span style=\"font-weight: 400;\">  Puoi usare percentuali per la larghezza all&#8217;interno delle media query per creare layout fluidi con aggiustamenti mirati. Per esempio:<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-478ee4c elementor-widget elementor-widget-code-highlight\" data-id=\"478ee4c\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg { \r\n  width: 100%; \r\n  height: auto;  \r\n}\r\n@media (min-width: 768px) {\r\n  img {\r\n    width: 50%;  \/* Images occupy 50% of their container on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-fc19d3d elementor-widget elementor-widget-text-editor\" data-id=\"fc19d3d\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><span style=\"font-weight: 400;\">Il ridimensionamento fluido non \u00e8 sempre la soluzione perfetta. A volte, le immagini con dimensioni fisse funzionano meglio all&#8217;interno di elementi di design specifici. \u00c8 essenziale scegliere le tecniche di ridimensionamento giuste in modo strategico in base al tuo layout complessivo.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">L&#8217;attributo &#8216;srcset&#8217;<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">L&#8217;attributo <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\">, usato con il tag <\/span><span style=\"font-weight: 400;\">&lt;img&gt;<\/span><span style=\"font-weight: 400;\"> , fornisce un modo per offrire al browser pi\u00f9 versioni della stessa immagine a diverse risoluzioni. Questo permette al browser di selezionare l&#8217;immagine pi\u00f9 appropriata in base al dispositivo e alla dimensione dello schermo dell&#8217;utente.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Sintassi di Base<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-2825604 elementor-widget elementor-widget-code-highlight\" data-id=\"2825604\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-html line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-html\">\n\t\t\t\t\t<xmp>HTML\r\n<img decoding=\"async\" src=\"my-image.jpg\" alt=\"A beautiful landscape\"\r\n     srcset=\"my-image-small.jpg 480w, \r\n             my-image-medium.jpg 800w, \r\n             my-image-large.jpg 1200w\">\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-44082ef elementor-widget elementor-widget-text-editor\" data-id=\"44082ef\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Il descrittore &#8216;w&#8217;:<\/b><span style=\"font-weight: 400;\"> Dice al browser la larghezza di ciascuna versione dell&#8217;immagine.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Benefici<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Prestazioni migliorate evitando di scaricare immagini inutilmente grandi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Display ottimizzato per schermi ad alta risoluzione.<\/span><\/li>\n<\/ol>\n<p><b>Nota:<\/b> <span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> \u00e8 uno strumento potente per l&#8217;ottimizzazione avanzata di immagini responsive, spesso usato insieme ad altre tecniche di cui abbiamo parlato.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Ottimizzazione e Buone Pratiche <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Strumenti di Ottimizzazione delle Immagini<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Anche se puoi ridimensionare le immagini manualmente con software di editing, gli strumenti di ottimizzazione dedicati semplificano il processo e sbloccano ulteriori miglioramenti delle prestazioni:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Ottimizzatore di Immagini di Elementor: <\/span><\/h4>\n<p><span style=\"font-weight: 400;\">Questo potente strumento \u00e8 integrato perfettamente nell&#8217;esperienza Elementor e semplifica l&#8217;ottimizzazione delle immagini nel tuo flusso di lavoro WordPress.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Considerazioni Chiave<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Con perdita vs. Senza perdita:<\/b><span style=\"font-weight: 400;\"> La compressione con perdita offre una maggiore riduzione della dimensione del file ma con una certa perdita di qualit\u00e0 dell&#8217;immagine. Senza perdita mantiene la piena qualit\u00e0 al costo di file leggermente pi\u00f9 grandi. Scegli saggiamente in base al tipo di immagine.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Formato Immagine (Rivisitato):<\/b><span style=\"font-weight: 400;\"> Ricorda, i JPEG sono generalmente migliori per le foto, mentre i PNG eccellono per la grafica. Scegliere il formato giusto prima dell&#8217;ottimizzazione \u00e8 fondamentale!<\/span><\/li>\n<\/ol>\n<p><b>Consiglio da Pro:<\/b><span style=\"font-weight: 400;\"> Spesso, usare una combinazione dell&#8217;Ottimizzatore di Immagini di Elementor per la gestione principale delle immagini e un servizio esterno specializzato per esigenze specifiche ti d\u00e0 la massima flessibilit\u00e0 e i migliori risultati.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Propriet\u00e0 image-rendering<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">La <\/span><span style=\"font-weight: 400;\">image-rendering<\/span><span style=\"font-weight: 400;\"> propriet\u00e0 fornisce suggerimenti al browser su come dovrebbe dare priorit\u00e0 al rendering quando un&#8217;immagine viene ingrandita o rimpicciolita. Ecco i valori comuni:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>auto:<\/b><span style=\"font-weight: 400;\"> Il default del browser. Di solito cerca di trovare un equilibrio tra velocit\u00e0 e qualit\u00e0.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>pixelated:<\/b><span style=\"font-weight: 400;\"> Mantiene un aspetto nitido e pixelato ideale per grafiche in stile retr\u00f2 o quando si vogliono intenzionalmente preservare i bordi dei pixel duri durante l&#8217;ingrandimento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>smooth:<\/b><span style=\"font-weight: 400;\"> D\u00e0 priorit\u00e0 a un aspetto pi\u00f9 morbido e meno pixelato (questo pu\u00f2 introdurre sfocature quando si ingrandiscono le immagini).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-16d5c62 elementor-widget elementor-widget-code-highlight\" data-id=\"16d5c62\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  image-rendering: pixelated; \r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-78f3c46 elementor-widget elementor-widget-text-editor\" data-id=\"78f3c46\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h4><span style=\"font-weight: 400;\">Quando Usarlo<\/span><\/h4>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Pixel Art:<\/b> <span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> \u00e8 essenziale per la pixel art per mantenere la sua estetica intenzionale.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Considerazioni sulle Prestazioni:<\/b><span style=\"font-weight: 400;\"> In alcuni casi, scegliere <\/span><span style=\"font-weight: 400;\">pixelated<\/span><span style=\"font-weight: 400;\"> pu\u00f2 offrire lievi miglioramenti nella velocit\u00e0 di rendering per le immagini ingrandite.<\/span><\/li>\n<\/ol>\n<p><span style=\"font-weight: 400;\">I browser moderni sono piuttosto bravi nel rendering automatico delle immagini. Usa <\/span><span style=\"font-weight: 400;\">image rendering<\/span><span style=\"font-weight: 400;\"> strategicamente, poich\u00e9 sovrascrivere i default pu\u00f2 a volte avere conseguenze indesiderate.<\/span><\/p>\n<h3><span style=\"font-weight: 400;\">Considerazioni sul Ridimensionamento per Tipi di Immagini Specifici<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Analizziamo le cose chiave da tenere a mente quando si ridimensionano alcuni dei tipi di immagini pi\u00f9 comuni che incontrerai sui siti web:<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Immagini Hero<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Le immagini grandi e accattivanti devono apparire stupende in tutte le dimensioni.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">L&#8217;ottimizzazione della dimensione del file \u00e8 cruciale (considera formati come WebP se supportati).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Usa media query o <\/span><span style=\"font-weight: 400;\">srcset<\/span><span style=\"font-weight: 400;\"> per assicurare una risoluzione ottimale per diverse dimensioni dello schermo.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Gallerie di Immagini<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Usa miniature che caricano velocemente, collegandole a versioni ottimizzate a dimensione piena.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementa tecniche come il lazy loading per esperienze di caricamento delle immagini fluide.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Rapporti d&#8217;aspetto coerenti tra le immagini della galleria creano un look raffinato.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Immagini di Prodotto (eCommerce)<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Immagini di alta qualit\u00e0 sono essenziali per favorire le conversioni.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Potrebbe essere necessaria la funzionalit\u00e0 di zoom, richiedendo dimensioni delle immagini pi\u00f9 grandi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ridimensionamento coerente e spazio bianco creano un catalogo prodotti pulito.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Considera l&#8217;uso di una CDN (come Cloudflare Enterprise incluso con Elementor Hosting) per una consegna rapida delle immagini in tutto il mondo.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Contenuto Caricato dagli Utenti<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Implementa controlli di sanit\u00e0 sul lato server per limitare le dimensioni delle immagini e le dimensioni dei file.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ottimizzazione automatica per prevenire il caricamento di immagini enormi e non ottimizzate.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Mostra linee guida chiare agli utenti sui formati di immagine accettati e i vincoli di dimensione.<\/span><\/li>\n<\/ul>\n<h3><span style=\"font-weight: 400;\">Compatibilit\u00e0 del Browser<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Mentre i browser moderni offrono un eccellente supporto per la maggior parte delle tecniche di ridimensionamento delle immagini CSS, \u00e8 essenziale essere consapevoli delle potenziali incoerenze e di come affrontarle.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Browser Pi\u00f9 Vecchi<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Potrebbe <\/b><span style=\"font-weight: 400;\">non supportare funzionalit\u00e0 pi\u00f9 recenti come <\/span><span style=\"font-weight: 400;\">object-fit<\/span><span style=\"font-weight: 400;\"> o comportamenti avanzati di <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\">.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Polyfill<\/b><span style=\"font-weight: 400;\"> o fallback potrebbero essere necessari per fornire un&#8217;esperienza coerente su browser pi\u00f9 vecchi (se supportarli \u00e8 un requisito).<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Prefissi del Fornitore<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Ogni tanto<\/b><span style=\"font-weight: 400;\">, le funzionalit\u00e0 CSS sperimentali richiedono prefissi dei vendor (tipo <\/span><span style=\"font-weight: 400;\">-webkit-<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">-moz-<\/span><span style=\"font-weight: 400;\">) per la massima compatibilit\u00e0 finch\u00e9 non diventano completamente standardizzate.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Test<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Testa a fondo<\/b><span style=\"font-weight: 400;\"> come si vedono le immagini del tuo sito su browser e dispositivi diversi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Strumenti<\/b><span style=\"font-weight: 400;\"> come BrowserStack rendono facile testare su vari browser.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Progressive Enhancement<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Parti<\/b><span style=\"font-weight: 400;\"> da un&#8217;esperienza base solida che funziona ovunque.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Usa <\/b><span style=\"font-weight: 400;\">tecniche come il rilevamento delle funzionalit\u00e0 per aggiungere funzioni avanzate di ridimensionamento immagini per i browser che le supportano.<\/span><\/li>\n<\/ul>\n<p><span style=\"font-weight: 400;\">Con Elementor, molti di questi mal di testa di compatibilit\u00e0 sono gestiti per te, assicurando che le immagini si vedano bene su tutti i browser senza dover indagare su ogni piccola stranezza.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Tecniche Avanzate di Ridimensionamento <\/span><\/h2>\n<h3><span style=\"font-weight: 400;\">Unit\u00e0 di Viewport (vh, vw)<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">Le unit\u00e0 di viewport offrono un modo per dimensionare gli elementi in relazione al viewport (l&#8217;area visibile del browser). Ecco come si collegano al ridimensionamento delle immagini:<\/span><\/p>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>vh:<\/b><span style=\"font-weight: 400;\"> 1vh equivale all&#8217;1% dell&#8217;altezza del viewport.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>vw:<\/b><span style=\"font-weight: 400;\"> 1vw equivale all&#8217;1% della larghezza del viewport.<\/span><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-575ca47 elementor-widget elementor-widget-code-highlight\" data-id=\"575ca47\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-height: 80vh;  \/* Image height will never exceed 80% of the viewport height *\/\r\n}<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cb67780 elementor-widget elementor-widget-text-editor\" data-id=\"cb67780\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Casi d&#8217;Uso con le Immagini<\/span><\/h3>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Impostare Dimensioni Flessibili:<\/b><span style=\"font-weight: 400;\"> Combina percentuali e unit\u00e0 fisse per creare elementi che si ridimensionano ma mantengono offset specifici (ad esempio, una barra laterale che occupa il 30% della larghezza meno un margine fisso di 20px).<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Calcoli Complessi:<\/b><span style=\"font-weight: 400;\"> Crea regole di ridimensionamento intricate che tengono conto di pi\u00f9 fattori.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>Aggiustamenti Responsivi:<\/b><span style=\"font-weight: 400;\"> Usa <\/span><span style=\"font-weight: 400;\">calc()<\/span><span style=\"font-weight: 400;\"> all&#8217;interno delle media query per perfezionare il ridimensionamento delle immagini a specifici breakpoint.<\/span><\/li>\n<\/ul>\n<p><b>Nota:<\/b><span style=\"font-weight: 400;\"> Il supporto del browser per <\/span><span style=\"font-weight: 400;\">calc()<\/span><span style=\"font-weight: 400;\"> \u00e8 eccellente, ma bisogna sempre tenere a mente la compatibilit\u00e0.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Example<\/span><\/h4>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-c38189b elementor-widget elementor-widget-code-highlight\" data-id=\"c38189b\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg {\r\n  max-width: 100%;  \r\n  height: auto; \r\n}\r\n@media (min-width: 900px) {\r\n  img {\r\n    width: calc(50% - 30px); \/* Image takes up 50% of its container minus 30px on larger screens *\/\r\n  }\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-d0a618b elementor-widget elementor-widget-text-editor\" data-id=\"d0a618b\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<h3><span style=\"font-weight: 400;\">Filtri e Trasformazioni CSS<\/span><\/h3>\n<p><span style=\"font-weight: 400;\">I filtri e le trasformazioni CSS forniscono modi per manipolare visivamente le immagini, aprendo possibilit\u00e0 creative che vanno oltre il semplice ridimensionamento.<\/span><\/p>\n<h4><span style=\"font-weight: 400;\">Filtri<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>grayscale:<\/b><span style=\"font-weight: 400;\"> Converte un&#8217;immagine in scala di grigi.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>sepia:<\/b><span style=\"font-weight: 400;\"> Applica un tono seppia stile vintage.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>blur:<\/b><span style=\"font-weight: 400;\"> Sfoca un&#8217;immagine.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>brightness, contrast, saturation:<\/b><span style=\"font-weight: 400;\"> Regola queste propriet\u00e0 visive.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>E altro ancora!<\/b><\/li>\n<\/ul>\n<h4><span style=\"font-weight: 400;\">Trasformazioni<\/span><\/h4>\n<ul>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>scale:<\/b><span style=\"font-weight: 400;\"> Ingrandisce o rimpicciolisce un&#8217;immagine.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>rotate:<\/b><span style=\"font-weight: 400;\"> Ruota un&#8217;immagine.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><b>skew, translate:<\/b><span style=\"font-weight: 400;\"> Applica effetti di inclinazione o riposiziona un&#8217;immagine.<\/span><\/li>\n<\/ul>\n<h5><span style=\"font-weight: 400;\">Example<\/span><\/h5>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-cc42968 elementor-widget elementor-widget-code-highlight\" data-id=\"cc42968\" data-element_type=\"widget\" data-widget_type=\"code-highlight.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t<div class=\"prismjs-okaidia copy-to-clipboard word-wrap\">\n\t\t\t<pre data-line=\"\" class=\"highlight-height language-css line-numbers\">\n\t\t\t\t<code readonly=\"true\" class=\"language-css\">\n\t\t\t\t\t<xmp>CSS\r\nimg:hover {\r\n  filter: grayscale(100%); \r\n  transform: scale(1.1); \/* Image scales up slightly on hover *\/\r\n}\r\n<\/xmp>\n\t\t\t\t<\/code>\n\t\t\t<\/pre>\n\t\t<\/div>\n\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<div class=\"elementor-element elementor-element-eae8283 elementor-widget elementor-widget-text-editor\" data-id=\"eae8283\" data-element_type=\"widget\" data-widget_type=\"text-editor.default\">\n\t\t\t\t<div class=\"elementor-widget-container\">\n\t\t\t\t\t\t\t\t\t<p><b>Nota sulle Prestazioni:<\/b><span style=\"font-weight: 400;\"> L&#8217;uso eccessivo di filtri e trasformazioni pu\u00f2 potenzialmente influenzare i tempi di caricamento della pagina, specialmente su dispositivi pi\u00f9 vecchi. Usali strategicamente per effetti mirati.<\/span><\/p>\n<p><b>Integrazione con Elementor:<\/b><span style=\"font-weight: 400;\"> Elementor fornisce controlli visivi intuitivi per applicare molti di questi effetti, permettendoti di sperimentare con le trasformazioni delle immagini senza dover scrivere codice a mano.<\/span><\/p>\n<h2><span style=\"font-weight: 400;\">Conclusione <\/span><\/h2>\n<p><span style=\"font-weight: 400;\">Durante questa guida, hai imparato che il ridimensionamento delle immagini non riguarda solo far entrare le foto. \u00c8 un aspetto cruciale delle prestazioni web, dell&#8217;esperienza utente e del mantenimento di una presenza online professionale.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Capendo come funzionano le propriet\u00e0 CSS come <\/span><span style=\"font-weight: 400;\">width<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">height<\/span><span style=\"font-weight: 400;\">, <\/span><span style=\"font-weight: 400;\">object fit<\/span><span style=\"font-weight: 400;\">, e <\/span><span style=\"font-weight: 400;\">background-size<\/span><span style=\"font-weight: 400;\"> hai ottenuto strumenti potenti per controllare la visualizzazione delle immagini. Abbiamo esplorato tecniche di immagini responsive e best practice di ottimizzazione e abbiamo persino toccato possibilit\u00e0 di ridimensionamento avanzate.<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Se sei un utente WordPress, Elementor semplifica l&#8217;intero processo. .<\/span><\/p>\n<p><span style=\"font-weight: 400;\">Ricorda:<\/span><\/p>\n<ol>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Ottimizza le tue immagini <\/span><i><span style=\"font-weight: 400;\">prima<\/span><\/i><span style=\"font-weight: 400;\"> di caricarle.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Considera sempre lo scopo e il contesto dell&#8217;immagine quando scegli le tecniche di ridimensionamento.<\/span><\/li>\n<li style=\"font-weight: 400;\" aria-level=\"1\"><span style=\"font-weight: 400;\">Testa come si vede il tuo sito su dispositivi diversi per assicurare un&#8217;esperienza perfetta per tutti i visitatori.<\/span><\/li>\n<\/ol>\n\t\t\t\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t\t\t<\/div>\n\t\t","protected":false},"excerpt":{"rendered":"<p>Le immagini sono l&#8217;anima dei siti web moderni. Catturano l&#8217;attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l&#8217;intera strategia online.<\/p>\n","protected":false},"author":2024234,"featured_media":123653,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[518],"tags":[],"marketing_persona":[],"marketing_intent":[],"class_list":["post-123652","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-risorse"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.7 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Come Ridimensionare Un&#039;Immagine In CSS &amp; HTML<\/title>\n<meta name=\"description\" content=\"Le immagini sono l&#039;anima dei siti web moderni. Catturano l&#039;attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l&#039;intera strategia online.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\" \/>\n<meta property=\"og:locale\" content=\"it_IT\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Come Ridimensionare Un&#039;Immagine In CSS &amp; HTML\" \/>\n<meta property=\"og:description\" content=\"Le immagini sono l&#039;anima dei siti web moderni. Catturano l&#039;attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l&#039;intera strategia online.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\" \/>\n<meta property=\"og:site_name\" content=\"Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/elemntor\/\" \/>\n<meta property=\"article:published_time\" content=\"2025-03-03T06:20:27+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-17T15:02:50+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1200\" \/>\n\t<meta property=\"og:image:height\" content=\"630\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Itamar Haim\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@elemntor\" \/>\n<meta name=\"twitter:site\" content=\"@elemntor\" \/>\n<meta name=\"twitter:label1\" content=\"Scritto da\" \/>\n\t<meta name=\"twitter:data1\" content=\"Itamar Haim\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tempo di lettura stimato\" \/>\n\t<meta name=\"twitter:data2\" content=\"15 minuti\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\"},\"author\":{\"name\":\"Itamar Haim\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\"},\"headline\":\"Come Ridimensionare Un&#8217;Immagine In CSS &amp; HTML\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2025-12-17T15:02:50+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\"},\"wordCount\":2934,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"articleSection\":[\"Risorse\"],\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\",\"url\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\",\"name\":\"Come Ridimensionare Un'Immagine In CSS &amp; HTML\",\"isPartOf\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"datePublished\":\"2025-03-03T06:20:27+00:00\",\"dateModified\":\"2025-12-17T15:02:50+00:00\",\"description\":\"Le immagini sono l'anima dei siti web moderni. Catturano l'attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l'intera strategia online.\",\"breadcrumb\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#breadcrumb\"},\"inLanguage\":\"it-IT\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png\",\"width\":1200,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Blog\",\"item\":\"https:\/\/elementor.com\/blog\/it\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Risorse\",\"item\":\"https:\/\/elementor.com\/blog\/it\/category\/risorse\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Come Ridimensionare Un&#8217;Immagine In CSS &amp; HTML\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#website\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"name\":\"Elementor\",\"description\":\"Website Builder for WordPress\",\"publisher\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"it-IT\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#organization\",\"name\":\"Elementor\",\"url\":\"https:\/\/elementor.com\/blog\/it\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"contentUrl\":\"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png\",\"width\":225,\"height\":225,\"caption\":\"Elementor\"},\"image\":{\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/elemntor\/\",\"https:\/\/x.com\/elemntor\",\"https:\/\/www.instagram.com\/elementor\/\",\"https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1\",\"https:\/\/en.wikipedia.org\/wiki\/Elementor\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377\",\"name\":\"Itamar Haim\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"it-IT\",\"@id\":\"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g\",\"caption\":\"Itamar Haim\"},\"description\":\"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.\",\"sameAs\":[\"https:\/\/elementor.com\/blog\/author\/itamarha\/\",\"https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/\"],\"url\":\"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Come Ridimensionare Un'Immagine In CSS &amp; HTML","description":"Le immagini sono l'anima dei siti web moderni. Catturano l'attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l'intera strategia online.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/","og_locale":"it_IT","og_type":"article","og_title":"Come Ridimensionare Un'Immagine In CSS &amp; HTML","og_description":"Le immagini sono l'anima dei siti web moderni. Catturano l'attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l'intera strategia online.","og_url":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/","og_site_name":"Blog","article_publisher":"https:\/\/www.facebook.com\/elemntor\/","article_published_time":"2025-03-03T06:20:27+00:00","article_modified_time":"2025-12-17T15:02:50+00:00","og_image":[{"width":1200,"height":630,"url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","type":"image\/png"}],"author":"Itamar Haim","twitter_card":"summary_large_image","twitter_creator":"@elemntor","twitter_site":"@elemntor","twitter_misc":{"Scritto da":"Itamar Haim","Tempo di lettura stimato":"15 minuti"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#article","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/"},"author":{"name":"Itamar Haim","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377"},"headline":"Come Ridimensionare Un&#8217;Immagine In CSS &amp; HTML","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2025-12-17T15:02:50+00:00","mainEntityOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/"},"wordCount":2934,"commentCount":0,"publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","articleSection":["Risorse"],"inLanguage":"it-IT","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/","url":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/","name":"Come Ridimensionare Un'Immagine In CSS &amp; HTML","isPartOf":{"@id":"https:\/\/elementor.com\/blog\/it\/#website"},"primaryImageOfPage":{"@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage"},"thumbnailUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","datePublished":"2025-03-03T06:20:27+00:00","dateModified":"2025-12-17T15:02:50+00:00","description":"Le immagini sono l'anima dei siti web moderni. Catturano l'attenzione, trasmettono emozioni e danno il tono a tutta la tua presenza online. Ma le immagini stupende hanno un problema: quelle non ottimizzate possono rallentare seriamente la velocit\u00e0 del tuo sito web. I siti web lenti frustrano i visitatori, danneggiano il tuo posizionamento nei motori di ricerca e alla fine compromettono l'intera strategia online.","breadcrumb":{"@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#breadcrumb"},"inLanguage":"it-IT","potentialAction":[{"@type":"ReadAction","target":["https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/"]}]},{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#primaryimage","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2024\/01\/The-Role-of-Image-Optimization.png","width":1200,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/elementor.com\/blog\/it\/come-ridimensionare-unimmagine-in-css-html\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Blog","item":"https:\/\/elementor.com\/blog\/it\/"},{"@type":"ListItem","position":2,"name":"Risorse","item":"https:\/\/elementor.com\/blog\/it\/category\/risorse\/"},{"@type":"ListItem","position":3,"name":"Come Ridimensionare Un&#8217;Immagine In CSS &amp; HTML"}]},{"@type":"WebSite","@id":"https:\/\/elementor.com\/blog\/it\/#website","url":"https:\/\/elementor.com\/blog\/it\/","name":"Elementor","description":"Website Builder for WordPress","publisher":{"@id":"https:\/\/elementor.com\/blog\/it\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/elementor.com\/blog\/it\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"it-IT"},{"@type":"Organization","@id":"https:\/\/elementor.com\/blog\/it\/#organization","name":"Elementor","url":"https:\/\/elementor.com\/blog\/it\/","logo":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/","url":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","contentUrl":"https:\/\/elementor.com\/blog\/wp-content\/uploads\/2025\/06\/images.png","width":225,"height":225,"caption":"Elementor"},"image":{"@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/elemntor\/","https:\/\/x.com\/elemntor","https:\/\/www.instagram.com\/elementor\/","https:\/\/www.youtube.com\/channel\/UCt9kG_EDX8zwGSC1-ycJJVA?sub_confirmation=1","https:\/\/en.wikipedia.org\/wiki\/Elementor"]},{"@type":"Person","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/5d24783541c454816685653dfed73377","name":"Itamar Haim","image":{"@type":"ImageObject","inLanguage":"it-IT","@id":"https:\/\/elementor.com\/blog\/it\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/830174068538633c83fd732c583ea1fe9d4c813314075640bf78d5a621982848?s=96&d=mm&r=g","caption":"Itamar Haim"},"description":"Itamar Haim, SEO Team Lead at Elementor, is a digital strategist merging SEO &amp; AEO \/ GEO, and web development. He leverages deep WordPress expertise to drive global organic growth, empowering businesses to navigate the AI era and ensuring top-tier search performance for millions of websites.","sameAs":["https:\/\/elementor.com\/blog\/author\/itamarha\/","https:\/\/www.linkedin.com\/in\/itamar-haim-8149b85b\/"],"url":"https:\/\/elementor.com\/blog\/it\/author\/itamarha\/"}]}},"_links":{"self":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123652","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/users\/2024234"}],"replies":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/comments?post=123652"}],"version-history":[{"count":3,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123652\/revisions"}],"predecessor-version":[{"id":147885,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/posts\/123652\/revisions\/147885"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media\/123653"}],"wp:attachment":[{"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/media?parent=123652"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/categories?post=123652"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/tags?post=123652"},{"taxonomy":"marketing_persona","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_persona?post=123652"},{"taxonomy":"marketing_intent","embeddable":true,"href":"https:\/\/elementor.com\/blog\/it\/wp-json\/wp\/v2\/marketing_intent?post=123652"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}