CDN Immagini: differenze tra le versioni

Da Webmobili Wiki.
Nessun oggetto della modifica
Riga 68: Riga 68:


Per rimediare a questo problema ci sono 2 sistemi
Per rimediare a questo problema ci sono 2 sistemi
* Versioning delle immagini
* '''Versioning delle immagini'''
* Seguire l'originale header <code>cache-control</code>
* 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
Dalla '''dashboard''' di ''Imagekit.io'' è possibile forzare il purge della cache<br/>
https://docs.imagekit.io/features/cache-purging#through-the-dashboard


=== Versioning delle immagini ===
=== Versioning delle immagini ===
Riga 80: Riga 81:
<code>https://example.com/myimage.jpg?tr=w-300&ver=1</code>
<code>https://example.com/myimage.jpg?tr=w-300&ver=1</code>


=== Header cache-control ===
=== Header Cache-Control ===
Impostare la CDN in modo che segua l'header <code>cache-control</code> dell'immagine originale.<br/>
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).
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 delle 17:03, 24 ago 2021

Stiamo testando 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

Esiste la possibilità di lasciare che sia ImageKit a fornire l'immagine responsive giusta, qui la documentazione.

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

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.

?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

Utility

Analizzatore performance immagini


Operazioni pre-CDN Deliver

Prima di partire con la CDN deliver ci sarebbero da compiere delle operazioni preparatorie (ampio digiuno, svuotamento intestinale con clistere, depilazione zona interessata)

  • Per tutti i progetti, eliminare riferimenti a imgs.wm4pr.com sostituendo immagini.designbest.com/tp
    imgs.wm4pr.com => immagini.designbest.com/tp
    • Designbest, Trovaprodotti, Area Statistiche
    • Le Stored Procedure
  • Spostare tutte le risorse statiche del progetto sotto immagini.designbest.com/assets/wm e immagini.designbest.com/assets/tp
  • Creare un dominio img.designbest.com che punti allo stesso sito di immagini.designbest.com
  • Nel pannello di Imagekit.io, sotto external storage settare come *origin* il dominio img.designbest.com


Caching della CDN

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

Versioning delle immagini

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

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).