CDN Immagini: differenze tra le versioni
Nessun oggetto della modifica |
|||
| (30 versioni intermedie di 3 utenti non mostrate) | |||
| Riga 1: | Riga 1: | ||
[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. | |||
''Se non specificato, ImageKit elimina i metadata dall'immagine.'' | |||
<table class="wikitable sortable"> | <table class="wikitable sortable"> | ||
| Riga 14: | Riga 15: | ||
<tr> | <tr> | ||
<td>Larghezza</td> | <td>Larghezza</td> | ||
<td>tr | <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 20: | Riga 21: | ||
<tr> | <tr> | ||
<td>Altezza</td> | <td>Altezza</td> | ||
<td>tr | <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 26: | Riga 27: | ||
<tr> | <tr> | ||
<td>Aspect ratio</td> | <td>Aspect ratio</td> | ||
<td>tr=ar- | <td>tr=ar-16-9&tr=w-200</td> | ||
<td>Sempre in combinazione con width o height</td> | <td>Sempre in combinazione con width o height</td> | ||
<td>[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=ar- | <td>[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=ar-16-9&tr=w-200 https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=ar-16-9&tr=w-200]</td> | ||
</tr> | </tr> | ||
</table> | </table> | ||
== Cropping == | |||
Specificando sia la larghezza che l'altezza bisogna decidere quale metodo di cropping dell'immagine adottare. | Specificando sia la larghezza che l'altezza bisogna decidere quale metodo di cropping dell'immagine adottare. | ||
=== Pad resize crop strategy - (cm-pad_resize) === | |||
Non si tocca l'aspect ratio dell'immagine, ma si aggiunge del padding all'immagine. | |||
[https://ik.imagekit.io/lqdylxu3pwj/immaginiprodotti/poltroncine/medium/293-poltroncine-69366-m-1.jpg?tr=h-300&tr=w-400&tr=cm-pad_resize&tr=bg-F3F3F3 ?tr=h-300&tr=w-400&tr=cm-pad_resize&tr=bg-F3F3F3] | |||
== Formato == | |||
Format - (f) | |||
formati disponibili: auto ,jpg , jpeg , webp, avif and png | |||
== 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/> | |||
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> | |||
=== Header Cache-Control === | |||
Impostare la CDN in modo che segua l'header <code>Cache-Control</code> dell'immagine originale.<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). | |||
Versione attuale delle 10:44, 27 ott 2021
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=1Header 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).
