Come ottimizzare le immagini in Magento: il tuo kit di partenza per pagine Web più veloci
L'e-commerce è tutto incentrato sulla grafica. Non puoi proprio evitarlo. Immagini di prodotti, temi eleganti, contenuti generati dagli utenti dai social media: gli acquirenti online vogliono vedere ciò che acquistano e interagire con il tuo sito web.
Ma c’è un grosso problema con le immagini: rallentano il tuo sito web. Infatti, maggiore è il numero e la dimensione delle tue immagini, maggiore sarà il tempo di caricamento del tuo sito web.
Esiste un modo per fornire pagine veloci e attraenti: l'ottimizzazione delle immagini. In questo articolo, esploreremo otto modi definitivi su come ottimizzare le immagini in Magento e le migliori estensioni del browser per farlo.
8 modi per caricare più velocemente le tue immagini
Le immagini rappresentano il 70% del peso della pagina web e, di conseguenza, sono uno dei fattori decisivi in termini di velocità di caricamento. Fortunatamente, per Magento non è così difficile ottimizzare le immagini dei prodotti, devi solo sapere quali strumenti utilizzare. Ecco gli 8 modi principali per aumentare il tempo di caricamento delle immagini.
#1 Comprimi e ridimensiona
Uno dei modi più comuni per ottimizzare le immagini Magento 2 è comprimere e ridimensionare l'immagine.
Ridimensionamento delle immagini di solito significa abbassare il numero di pixel, la risoluzione dell'immagine. Se il numero di pixel è troppo basso, la qualità dell'immagine viene influenzata drasticamente.
Comprimere le immagini significa stipare più dati in meno spazio. Può essere fatto in modo con perdita, eliminando frammenti di pixel o sfumature, oppure senza perdita, riducendo semplicemente la dimensione del file, senza modifiche nella qualità.
La cosa migliore che puoi fare è combinare ridimensionamento e compressione. In questo modo, ridurrai il numero di pixel al punto in cui la qualità non sarà perfetta ma comunque decente, e quindi utilizzerai la compressione senza perdita di dati.
Magento offre strumenti di compressione integrati e comprime le immagini all'80% per impostazione predefinita. È una pratica popolare perché se scegli una percentuale ancora più bassa, gli utenti saranno insoddisfatti delle immagini dei prodotti di bassa qualità.
#2 Usa una CDN
Le reti per la distribuzione di contenuti di immagini (CDN) sono gruppi di server in tutto il mondo che lavorano insieme per fornire una distribuzione più rapida di contenuti online. Pertanto, quando gli utenti accedono a un'immagine, non devono attendere una risposta dal server in una posizione molto distante. I CDN utilizzano il server più vicino all'utente.
Esistono anche CDN intelligenti che offrono ancora più spazio di ottimizzazione. Rilevano il dispositivo dell'utente ed eseguono l'ottimizzazione delle immagini in tempo reale, personalizzata per ogni dispositivo. Ad esempio, se un utente carica una pagina sullo smartphone, non ha bisogno di una risoluzione 2048 x 1536, sarà sufficiente un'immagine di qualità inferiore e i CDN ridimensioneranno automaticamente l'immagine.
La CDN è il modo più semplice per ottimizzare efficacemente le immagini in Magento 2, poiché tutto viene eseguito automaticamente e non richiede il tuo coinvolgimento attivo.
#3 Fai attenzione ai formati di file immagine
La regola è utilizzare il formato JPEG per foto e illustrazioni complesse, e PNG o SVG per loghi e illustrazioni semplici. Tuttavia, esiste un formato meno conosciuto: WebP. Il motivo per cui questo formato sta diventando sempre più popolare nello sviluppo web è che offre la stessa qualità di JPEG o PNG ma le dimensioni dei file sono inferiori. Quindi le tue immagini e le tue pagine verranno caricate più velocemente.
WebP è supportato dai principali browser come Chrome, Edge, Opera, Firefox, ecc. Tuttavia, tieni presente che i file WebP non verranno visualizzati su Safari e IE.
Si consiglia di utilizzare il Immagini ottimizzate per JaJuMa WebP su Magento 2. Puoi caricare un'immagine in entrambi i formati JPEG e WebP e questa estensione di immagine WebP per Magento 2 sceglierà il formato giusto in base al browser utilizzato dal visitatore del sito web.
#4 Usa immagini vettoriali quando possibile
Le immagini vettoriali non sono costituite da pixel. Quando li ingrandisci, non vedrai bordi sfocati o quadrati veri e propri. Quindi salvi un'immagine di piccole dimensioni e puoi ridimensionarla quanto vuoi: rimarrà della stessa alta qualità e dimensione del file. Pertanto, si consiglia di utilizzare il più possibile immagini vettoriali anziché raster per migliorare la qualità delle immagini senza ridurre le prestazioni del sito web.
È interessante notare che le immagini vettoriali vengono utilizzate solo per illustrazioni e loghi semplici.
#5 Sostituisci le immagini non necessarie con caratteri e icone
Sì, le immagini sono utili quando si tratta di attirare utenti e promuovere tassi di conversione. Ma c’è una linea sottile tra abbastanza immagini e troppe. Se lo attraversi, otterrai un sito bellissimo (forse troppo soffocante) ma lento. Gli utenti non si preoccuperanno delle tue immagini se non riescono a caricare il sito Web, quindi è meglio sostituire le immagini non necessarie con caratteri e icone.
#6 Abilita IO veloce
L'ottimizzazione rapida delle immagini in Magento 2 è uno strumento integrato per l'ottimizzazione automatica delle immagini: ridimensiona, ritaglia, regola il formato delle proporzioni senza o con una minima interferenza umana. Lo strumento supporta i seguenti formati: JPEG, WebP, PNG, GIF e GIF animate. Adobe consiglia di utilizzare questo strumento con i siti Web Magento poiché l'eCommerce è pieno di immagini ed è faticoso ottimizzarle tutte manualmente.
#7 Usa immagini a caricamento lento
Il caricamento lento delle immagini è la pratica che ritarda il caricamento degli elementi visivi finché l'utente non scorre fino alla parte della pagina Web in cui sono effettivamente necessari. Migliora significativamente le prestazioni del sito Web e mostra i contenuti all'utente molto più velocemente. Considerando che gli utenti non aspetteranno se il sito Web impiega più di 3 secondi per caricarsi, le immagini a caricamento lento rappresentano un ottimo risparmio per qualsiasi attività di e-commerce.
#8 Sfrutta la potenza del SEO con gli attributi alternativi
Attributi alternativi, aka alt tag, sono un'alternativa testuale per un'immagine, la descrizione testuale di ciò che sta accadendo su una foto. Sono importanti Impostazione SEO di Magento, migliorando il ranking della pagina e aiutando gli utenti con problemi alla vista a comprendere il contesto di un'immagine.
I motori di ricerca tengono conto anche dei tag alt. Nel caso in cui siano presenti parole chiave pertinenti al contenuto della pagina, i web crawler troveranno la tua pagina ancora più pertinente.
Tuttavia, il testo alternativo non viene creato per il riempimento di parole chiave. È meglio usare il buon senso nel descrivere un'immagine: sii specifico su ciò che è effettivamente raffigurato. Inoltre, non usare parole come “Nell’immagine possiamo vedere” o “Ci sono… nell’immagine”. Basta scrivere cosa è rappresentato nell'immagine come nell'esempio qui sotto:
Le migliori estensioni per l'ottimizzazione delle immagini Magento
L'utilizzo di estensioni affidabili per l'ottimizzazione delle immagini Magento è un ottimo modo per garantire tempi di caricamento rapidi delle tue immagini senza molto lavoro manuale.
Ottimizzatore di immagini di Apptrian
Ottimizzatore di immagini di Apptrian ha funzionalità limitate e un accesso a pagamento al supporto ma è gratuito da usare. Puoi ottimizzare un numero di immagini con un clic e ridurne le dimensioni con una perdita di qualità insignificante. Una versione a pagamento offre tuttavia più configurazioni per l'ottimizzazione.
Servizio di ottimizzazione delle prestazioni per Magento 2
Servizio di ottimizzazione delle prestazioni per Magento 2 offre più dell'ottimizzazione dell'immagine. Puoi anche unire file CSS e JS, riducendone al minimo le dimensioni, analizzare JavaScript, ridurre al minimo l'HTML, tenere traccia dell'utilizzo della CPU e della memoria, ecc. Per quanto riguarda la parte immagine, puoi cercare tutte le immagini su Magento, proteggere il tuo sito web da over- ottimizzazione, ottimizzare automaticamente i file JPEG, PNG e GIF. La soluzione costa $ 699.
Ottimizzatore di immagini per Magento 2
Con Ottimizzatore di immagini per Magento 2, sarai in grado di comprimere e ottimizzare i formati PNG, JPG, GIF, TIF e BMP, scegliere tra compressione con e senza perdita di dati, automatizzare l'ottimizzazione e lasciare spazio per il backup dell'immagine originale e assegnare solo directory specifiche all'estensione che non desideri desidera ottimizzare ogni immagine nel negozio. La soluzione costa $ 99.
Collabora per migliorare la velocità di caricamento della pagina
L'ottimizzazione delle immagini Magento 2 è una parte essenziale di qualsiasi negozio di e-commerce. Poiché i siti Web di e-commerce utilizzano attivamente le immagini per mostrare i loro prodotti e le immagini sono molto lente da caricare, gli utenti potrebbero finire per abbandonare la tua attività prima ancora di dare un'occhiata a ciò che hai da offrire.
L'ottimizzazione delle immagini è uno dei tanti aspetti di Ottimizzazione delle prestazioni di Magento. Non avrai bisogno di riscrivere il codice o ripensare la tua architettura di e-commerce.
Ma se l’ottimizzazione delle immagini non è sufficiente o sei semplicemente troppo occupato per gestire la velocità del sito web, è meglio lasciare i complessi tecnicismi agli esperti (o ai fanatici dell’ottimizzazione delle prestazioni come noi di Elogic!).
CTA: collabora con un'agenzia Magento certificata e fai una prima impressione indimenticabile con una velocità di caricamento rapidissima.
Collabora con un'agenzia Magento certificata
Ottimizza le tue immagini e fai una prima impressione indimenticabile con una velocità di caricamento rapidissima
Domande frequenti sull'ottimizzazione delle immagini Magento
Magento 2 comprime le immagini?
Sì, ci sono impostazioni predefinite di compressione delle immagini Magento. Tuttavia, lo strumento è lungi dall’essere perfetto. La compressione automatica da una funzionalità integrata di Magento è troppo aggressiva e ti ritroverai con immagini di bassa qualità. Funziona anche solo per le immagini dei prodotti, non per blog o pagine di destinazione. Ti consigliamo di utilizzare un'estensione o di contattare i professionisti di Elogic per eseguire l'attività per te.
L'ottimizzazione delle immagini migliorerà davvero le prestazioni di un negozio Magento?
SÌ. Le immagini rappresentano il 70% della dimensione della pagina. Se riesci a ridurre la dimensione delle immagini, puoi ridurre significativamente anche la dimensione della pagina e, di conseguenza, ottenere prestazioni migliori del sito web.
Quali sono i migliori formati di immagine per l'ottimizzazione?
Tradizionalmente, i siti Web utilizzano JPEG per le foto e PNG per i loghi e la grafica semplice. Tuttavia, il formato più leggero con la qualità dei formati precedenti è WebP. Ti consigliamo di caricare immagini sia in versione JPEG che PNG e WebP poiché non tutti i browser supportano il nuovo formato.
L’ottimizzazione delle immagini influisce sulla SEO?
Sì, in due modi. Innanzitutto puoi aumentare le prestazioni del sito web con l’ottimizzazione delle immagini e non è un segreto che Google tenga conto della velocità di caricamento. In secondo luogo, puoi ottimizzare le immagini con il testo alternativo, consentendo a Google di leggere le tue immagini. Se un'immagine e, di conseguenza, il suo testo alternativo è rilevante per il contenuto, puoi ottenere punti di pertinenza extra.
- "
- &
- 67
- 7
- accesso
- Il mio account
- Action
- attivo
- Adobe
- Tutti
- Consentire
- architettura
- in giro
- articolo
- di riserva
- MIGLIORE
- blog
- potenziamento
- del browser
- affari
- Acquistare
- che
- Chrome
- codice
- Uncommon
- contenuto
- Costi
- colture
- dati
- affare
- ritardi
- consegna
- Mercato
- ecommerce
- bordo
- eccetera
- esperti
- estensioni
- occhio
- FAST
- caratteristica
- Caratteristiche
- sottile
- Firefox
- Nome
- formato
- Gratis
- pieno
- gif
- grande
- qui
- Alta
- Come
- Tutorial
- HTTPS
- Immagine
- Aumento
- IT
- JavaScript
- kit
- livello 1
- Strato 2
- Leva
- Limitato
- linea
- caricare
- località
- maggiore
- Media
- reti
- offrire
- Offerte
- online
- Opera
- partner
- performance
- immagine
- Popolare
- energia
- Prodotto
- Prodotti
- Scelto dai professionisti
- protegge
- qualità
- tempo reale
- ridurre
- risposta
- Safari
- Cerca
- senso
- SEO
- regolazione
- Shoppers
- Un'espansione
- Taglia
- piccole
- smart
- smartphone
- So
- Social
- Social Media
- lo spazio
- velocità
- Tornare al suo account
- supporto
- supportato
- supporti
- il mondo
- tempo
- top
- pista
- utenti
- aspettare
- Orologio
- sito web
- Sito web
- siti web
- Che cosa è l'
- parole
- Lavora
- lavori
- mondo
- X
- zoom