Come ottimizzare le immagini della tua applicazione Laravel

Uno degli aspetti principali dell'ottimizzazione della tua applicazione o del tuo sito Web per i motori di ricerca è l'uso di immagini di dimensioni adeguate per il loro uso pratico.

Ad esempio, se il tuo blog visualizza immagini in formato 300 × 200 e l'articolo da solo visualizza l'immagine in formato 1200 × 500, i motori di ricerca si aspettano che le immagini fisiche siano in questi formati, questo è in parte il modo in cui queste immagini sono considerate ottimizzate (la dimensione anche in relazione al formato del file influenza).

Tuttavia, quando l'applicazione visualizza immagini fornite dagli utenti, può essere complicato creare processi per ridimensionare e ottimizzare questi file, motivo per cui potrebbe essere saggio ricorrere a un servizio di elaborazione dati esterno.file.

Nel 2020 abbiamo creato un servizio di elaborazione di file di immagini online che può consentirti di eseguire operazioni normalmente complesse in modo semplificato, analizzeremo come integrare questo servizio nella tua applicazione Laravel.

ZMD è un servizio di elaborazione di immagini online on demand, integrando alcune istruzioni nel tuo codice HTML puoi eseguire operazioni come:

Consulta l'elenco delle operazioni disponibili: https://zmd.io.

Creare un account

Inizia creando un account gratis per 10 giorni senza carta di credito e senza impegno: https://app.zmd.io/register

Aggiungi un dominio

Per utilizzare il servizio ZMD devi inserire da quale nome di dominio lavorerai, questo dominio deve essere fisicamente accessibile per poter funzionare, registra i tuoi domini qui: https://app.zmd.io/domains

Compositore del pacchetto

Abbiamo creato un pacchetto compositore per semplificare l'uso del servizio zmd.io, per questo è sufficiente installare il pacchetto con il seguente comando:

il compositore richiede il superlativo / zmd-laravel

L'installazione di questo pacchetto ti dà accesso a una direttiva blade che ti consente di integrare gli elementi javascript necessari per il corretto funzionamento del servizio ZMD, nonché per la configurazione della tua chiave di dominio.

Integrazione HTML / Blade

Nel tuo template HTML / Blade, inserisci il codice qui sotto appena prima di chiudere il tag .

... @zmdInit

Configurazione della chiave di dominio

Quando hai aggiunto il tuo nome di dominio, ti viene fornito un codice speciale, questo codice farà il collegamento tra il tuo sito e ZMD, per aggiungere la tua chiave di dominio, aggiungi semplicemente la seguente chiave nel tuo file di configurazione .env:

ZMD_DOMAIN_KEY = your_domain_key

Ottimizzazione delle tue immagini

Non resta che adattare il codice delle immagini che si desidera ottimizzare, è possibile salvare le operazioni da eseguire direttamente nel codice HTML, ad esempio un file img generalmente si presenta così:

... ...

Ora sostituisci l'attributo src del tuo tag e aggiungi l'attributo contenente le operazioni, il tuo codice sarà simile a questo:

...  ...

Si noti che l'attributo src non è più necessario, verrà aggiunto automaticamente dallo script ZMD per rimanere valido per il browser.

L'elenco completo delle operazioni disponibili è accessibile qui:

https://zmd.io/documentation/operations/

Voilà, le tue immagini sono ora automaticamente ottimizzate per soddisfare le esigenze della tua applicazione.