CDN Immagini: differenze tra le versioni

Da Webmobili Wiki.
Nessun oggetto della modifica
 
(12 versioni intermedie di uno stesso utente non sono mostrate)
Riga 1: Riga 1:
Stiamo testando [https://ImageKit.io ImageKit.io].
[https://ImageKit.io ImageKit.io].


Con 49$ al mese, che significa circa 510€ all'anno, abbiamo la possibilità di mantenere anche il dominio attualmente associato alle immagini ''immagini.designbest.com''
Con 49$ al mese, che significa circa 510€ all'anno, abbiamo la possibilità di mantenere anche il dominio attualmente associato alle immagini ''immagini.designbest.com''.<br/>
 
In realtà sforiamo sempre, la spesa media è 90€ al mese.
Esiste la possibilità di lasciare che sia ImageKit a fornire l'immagine responsive giusta, [https://docs.imagekit.io/features/client-hints qui la documentazione].


''Se non specificato, ImageKit elimina i metadata dall'immagine.''
''Se non specificato, ImageKit elimina i metadata dall'immagine.''
Riga 16: Riga 15:
   <tr>
   <tr>
     <td>Larghezza</td>
     <td>Larghezza</td>
     <td>tr:w-200</td>
     <td>tr=w-200</td>
     <td>Mantiene aspect ratio</td>
     <td>Mantiene aspect ratio</td>
     <td>[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200 https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200]</td>
     <td>[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200 https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200]</td>
Riga 22: Riga 21:
   <tr>
   <tr>
     <td>Altezza</td>
     <td>Altezza</td>
     <td>tr:h-200</td>
     <td>tr=h-200</td>
     <td>Mantiene aspect ratio</td>
     <td>Mantiene aspect ratio</td>
     <td>[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200 https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200]</td>
     <td>[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200 https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200]</td>
Riga 48: Riga 47:
formati disponibili: auto ,jpg , jpeg , webp, avif and png
formati disponibili: auto ,jpg , jpeg , webp, avif and png


== Utility ==  
== Caching della CDN ==
Le immagini dalla nostra ''origin'' ( <code>img.designbest.com</code> ), quando chiamate per la prima volta entrano nella CDN.<br/>
Nel caso in cui un redattore '''modifichi un'immagine già presente sulla CDN''', il cambiamento non viene recepito.<br/><br/>
 
Per rimediare a questo problema ci sono 2 sistemi
* '''Versioning delle immagini'''
* Seguire l'originale '''header Cache-Control'''
<br/>
 
Dalla '''dashboard''' di ''Imagekit.io'' è possibile forzare il '''purge della cache'''<br/>
https://docs.imagekit.io/features/cache-purging#through-the-dashboard<br/>


[https://imagekit.io/responsive-images/#chapter-10---how-to-verify-responsive-image-implementation Analizzatore performance immagini]
Se cambia il Cache-Control di un'immagine già presente sulla CDN è comunque necessario "purgarla" perché il cambiamento venga recepito.<br/>


=== Versioning delle immagini ===
If you have an image URL like this <syntaxhighlight>https://example.com/myimage.jpg?tr=w-300</syntaxhighlight>

Then adding a version parameter would look like <syntaxhighlight>https://example.com/myimage.jpg?tr=w-300&ver=1</syntaxhighlight>


== Operazioni pre-CDN Deliver ==
=== Header Cache-Control ===
Prima di partire con la CDN deliver ci sarebbero da compiere delle operazioni preparatorie (ampio digiuno, svuotamento intestinale con clistere, depilazione zona interessata)
Impostare la CDN in modo che segua l'header <code>Cache-Control</code> dell'immagine originale.<br/>
* Per tutti i progetti, eliminare riferimenti a ''imgs.wm4pr.com'' sostituendo ''immagini.designbest.com/tp'' <br/><code>imgs.wm4pr.com => immagini.designbest.com/tp</code><br/>
Per usare questo sistema è necessario contattare l'assistenza di ''Imagekit.io'' e chiedere di attivare il setting '''honor origin cache''' (non fattibile dalla dashboard).
** Designbest, Trovaprodotti, Area Statistiche
** <span style="text-decoration: line-through">Le Stored Procedure</span>
* Spostare tutte le risorse statiche del progetto sotto '''immagini.designbest.com/assets/wm''' e '''immagini.designbest.com/assets/tp'''
* Creare un dominio <code>img.designbest.com</code> che punti allo stesso sito di <code>immagini.designbest.com</code>
* Nel pannello di Imagekit.io, sotto '''external storage''' settare come *origin* il dominio <code>img.designbest.com</code>

Versione attuale delle 10:44, 27 ott 2021

ImageKit.io.

Con 49$ al mese, che significa circa 510€ all'anno, abbiamo la possibilità di mantenere anche il dominio attualmente associato alle immagini immagini.designbest.com.
In realtà sforiamo sempre, la spesa media è 90€ al mese.

Se non specificato, ImageKit elimina i metadata dall'immagine.

Trasformazione Comando Descrizione Esempio
Larghezza tr=w-200 Mantiene aspect ratio https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200
Altezza tr=h-200 Mantiene aspect ratio https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=w-200
Aspect ratio tr=ar-16-9&tr=w-200 Sempre in combinazione con width o height https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=ar-16-9&tr=w-200

Cropping

[modifica]

Specificando sia la larghezza che l'altezza bisogna decidere quale metodo di cropping dell'immagine adottare.

Pad resize crop strategy - (cm-pad_resize)

[modifica]

Non si tocca l'aspect ratio dell'immagine, ma si aggiunge del padding all'immagine.

?tr=h-300&tr=w-400&tr=cm-pad_resize&tr=bg-F3F3F3

Formato

[modifica]

Format - (f)

formati disponibili: auto ,jpg , jpeg , webp, avif and png

Caching della CDN

[modifica]

Le immagini dalla nostra origin ( img.designbest.com ), quando chiamate per la prima volta entrano nella CDN.
Nel caso in cui un redattore modifichi un'immagine già presente sulla CDN, il cambiamento non viene recepito.

Per rimediare a questo problema ci sono 2 sistemi

  • Versioning delle immagini
  • Seguire l'originale header Cache-Control


Dalla dashboard di Imagekit.io è possibile forzare il purge della cache
https://docs.imagekit.io/features/cache-purging#through-the-dashboard

Se cambia il Cache-Control di un'immagine già presente sulla CDN è comunque necessario "purgarla" perché il cambiamento venga recepito.

Versioning delle immagini

[modifica]

If you have an image URL like this 

https://example.com/myimage.jpg?tr=w-300



Then adding a version parameter would look like 

https://example.com/myimage.jpg?tr=w-300&ver=1

Header Cache-Control

[modifica]

Impostare la CDN in modo che segua l'header Cache-Control dell'immagine originale.
Per usare questo sistema è necessario contattare l'assistenza di Imagekit.io e chiedere di attivare il setting honor origin cache (non fattibile dalla dashboard).