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-laravelL'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 modello HTML / Blade, inserisci il codice sotto appena prima del tag di chiusura </body>.
<html>
<body>
... @zmdInit
</body>
</html>
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_keyOttimizzazione 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ì:
... <img src="https://example.com/myimage.jpg" alt="La mia descrizione dell'immagine"/> ...
Ora sostituisci l'attributo src del tuo tag e aggiungi l'attributo contenente le operazioni, il tuo codice sarà simile a questo:
... <img src="" data-zmd-src="https://example.com/myimage.jpg" data-zmd-op="w:800;h:550" alt="La mia descrizione dell'immagine"/> ...
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.
French 
English 
German 
Spanish 
Italian