Ottimizzazione dell'immagine in Magento 2: Best Practices

Le prestazioni influiscono direttamente sui tuoi profitti e poiché le immagini sono il tipo di risorsa più richiesto sul Web, l'ottimizzazione delle immagini dovrebbe essere il primo passo a cui dovresti pensare quando cerchi di migliorare il tasso di conversione del tuo negozio Magento.

In questo tutorial, ti mostreremo come ottimizzare le immagini nel tuo negozio Magento.

Immagini di prodotti di taglia unica

Puoi ottimizzare le immagini dei tuoi prodotti in blocco eseguendo la compressione sui file di immagine in /media/catalog/product/ .

Ecco alcuni strumenti che dovresti usare: GIFSicle , JPEGTran , OptiPNG . Queste righe di comando riscriveranno le tue immagini correnti in una versione ottimizzata senza modificare il nome del file. Anche tutte le immagini memorizzate nella cache verranno ottimizzate senza dover aggiornare la cache.

• Immagini PNG: utilizzo di OptiPNG

   optipng -o7 -strip tutti i media/catalog/product/*.png

• Immagini JPEG: utilizzo di JPEGTran

   trova supporto/catalogo/prodotto/ -name "*.jpg" -type f -exec jpegtran -copy none -optimize -outfile {} {} \;

• Immagini GIF: utilizzo di GIFSicle

   gifsicle --batch --optimize=3 media/catalog/product/*.gif

Usa il formato immagine corretto

L'uso del formato immagine corretto aiuta anche a ridurre le dimensioni del file delle immagini. Alcuni formati di immagine come JPEG e PNG, ad esempio, sono utilizzati al meglio per foto e immagini Web, mentre formati di immagine come GIF e BMP con i loro colori limitati (256) sono più adatti per file a piccola risoluzione come loghi, pulsanti, icone.

Per una migliore comprensione del formato immagine da utilizzare per la tua immagine, fai riferimento alla tabella seguente:

Sostituisci le GIF con i video

GIF è un ottimo modo per rendere i tuoi contenuti più intriganti, ma potrebbe non essere l'opzione migliore se desideri ottimizzare la velocità di caricamento della pagina. Allora, qual è un metodo alternativo?

Con i video!

Puoi convertire la tua GIF in un video MP4 o WebM. Ma dovresti verificare se è possibile farlo utilizzando il faro di Google. Se disponi di GIF che possono essere convertite, dovresti vedere un suggerimento per "Utilizzare i formati video per i contenuti animati":

Il prossimo passo è convertire la tua GIF. Per ottenere un video MP4, si consiglia di utilizzare FFmpeg. Esegui il seguente comando nella tua console:

ffmpeg -i my-animation.gif -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Questo dice a FFmpeg di prendere my-animation.gif come input, indicato dal flag -i , e di convertirlo in un video chiamato my-animation.mp4 .

Nel caso in cui le dimensioni della tua GIF siano dispari, includi un filtro di ritaglio come di seguito:

ffmpeg -i my-animation.gif -vf "crop=trunc(iw/2)*2:trunc(ih/2)*2" -b:v 0 -crf 25 -f mp4 -vcodec libx264 -pix_fmt yuv420p my-animation.mp4

Per i video WebM, esegui questo comando nella tua console:

ffmpeg -i my-animation.gif -c vp9 -b:v 0 -crf 41 my-animation.webm

* Nota : sebbene un video WebM sia più piccolo di un video MP4, non tutti i browser supportano il formato poiché è relativamente nuovo.

Converti le immagini in WebP

WebP è un formato immagine di nuova generazione che offre un eccezionale rapporto tra qualità dell'immagine e dimensione del file. Rispetto a JPG e PNG, le immagini WebP sono in media del 25-35% più piccole con una perdita di qualità dell'immagine prossima allo zero.

Tuttavia, poiché il formato dell'immagine è ancora relativamente nuovo, non riceve supporto in Magento 2 e supporto limitato in browser come Safari. Per utilizzare WebP nel tuo negozio Magento, dovrai utilizzare estensioni come Magento 2 Converti immagini in WebP per abilitare la conversione automatica di tutte le tue immagini in WebP.

Usa immagini reattive

Non accontentarti di un approccio "taglia unica" se desideri il miglior rendimento della pagina. Prova invece a fornire immagini di dimensioni diverse per dispositivi diversi.

Ci sono diversi strumenti là fuori che possono aiutarti nell'attività, ma il pacchetto sharp npm e gli strumenti ImageMagick CLI sono forse i più popolari.

Nitido (per il ridimensionamento automatico)

Per utilizzare sharp come script Node, salva questo codice come script separato nel tuo progetto, quindi eseguilo per convertire le tue immagini:

 const sharp = require('sharp'); const fs = require('fs'); const directory = './images'; fs.readdirSync(directory).forEach(file => { sharp(`${directory}/${file}`) .resize(200, 100) // width, height .toFile(`${directory}/${file}-small.jpg`); });

ImageMagick (per il ridimensionamento delle immagini una tantum)

Per ridimensionare un'immagine al 54% della sua dimensione originale, esegui il seguente comando nel tuo terminale:

converti -ridimensiona 54% picture.jpg picture-small.jpg

Per ridimensionare un'immagine per adattarla a 500 px di larghezza per 300 px di altezza, esegui il comando seguente:

 # macOS/Linux convert picture.jpg -resize 500x300 picture-small.jpg # Windows magick convert picture.jpg -resize 500x300 picture-small.jpg

* Nota : il numero consigliato di dimensioni dell'immagine è 3-5. Ovviamente più dimensioni crei, meglio viene visualizzata su un dispositivo, ma questo può occupare più spazio sul tuo server.

Usa una CDN

Un CDN è un altro modo per ottimizzare le tue immagini al volo, senza dover manomettere le immagini di origine. Per Magento, la raccomandazione ufficiale è Fastly in quanto è strettamente integrato con Magento e offre ulteriori vantaggi in termini di sicurezza, insieme a soluzioni di memorizzazione nella cache a pagina intera.

Integra estensioni di terze parti

Un altro modo per ottimizzare le tue immagini è utilizzare un'estensione Magento. L'estensione farà il lavoro per te per garantire che le tue immagini non rallentino la velocità di caricamento della pagina.

Ecco alcune estensioni utili che possono essere adatte al tuo negozio Magento:

Ottimizzatore di immagini per Magento 2 di Mageplaza

Questa estensione supporta gli amministratori del negozio per comprimere vari tipi di immagini tra cui PNG, JPG, GIF, TIF e BMP e ti consente persino di impostare il livello di compressione. Inoltre, la compressione può essere attivata frequentemente, quindi non devi preoccuparti.

Lazy Load per Magento 2 di Amasty

Con l'estensione Lazy Load, le informazioni sul prodotto vengono riempite solo quando un utente scorre le pagine, velocizzando così il rendering della pagina iniziale. Dispone inoltre di strumenti di ottimizzazione aggiuntivi: compressione dell'immagine e ottimizzazione della struttura del codice per fornire le migliori prestazioni della pagina.

Spero che sia di aiuto!